نحوه تغییر ارتفاع و عرض بلوک در وردپرس

آیا می خواهید ارتفاع و عرض بلوک را در وردپرس تغییر دهید؟

به طور پیش فرض، وردپرس ایجاد طرح بندی محتوای زیبا برای پست ها و صفحات خود را با استفاده از بلوک ها آسان می کند. با این حال، گاهی اوقات ممکن است بخواهید اندازه بلوک ها را تغییر دهید تا بهتر به نظر برسند.

در این مقاله به شما نشان می دهیم که چگونه به راحتی ارتفاع و عرض بلوک را در وردپرس تغییر دهید.

چرا ارتفاع و عرض بلوک را در وردپرس تغییر دهیم؟

ویرایشگر بلاک شما را قادر می سازد با استفاده از بلوک های مختلف، از جمله سرفصل ها، پاراگراف ها، تصاویر، ویدئوها، صدا و موارد دیگر، محتوا را به وب سایت وردپرس خود اضافه کنید.

با این حال، گاهی اوقات ممکن است بخواهید عرض یا ارتفاع یک بلوک خاص را تغییر دهید تا ظاهر آن یا چیدمان محتوای کلی را بهبود بخشد.

تنظیم اندازه بلوک همچنین می تواند اطمینان حاصل کند که محتوای شما واکنش گرا بوده و در همه دستگاه ها از جمله تلفن، تبلت و لپ تاپ به درستی نمایش داده می شود.

به عنوان مثال، ممکن است تصویری را در ویرایشگر محتوا آپلود کرده باشید، اما بیش از حد بزرگ باشد و صفحه را غیر جذاب به نظر برساند.

یا ممکن است بخواهید اندازه بلوک عنوان را تغییر دهید تا آن را بهتر با محتوا هماهنگ کنید.

با تنظیم عرض و ارتفاع بلوک ها، می توانید پست ها و صفحات خود را زیباتر جلوه دهید.

همانطور که گفته شد، بیایید ببینیم چگونه می توانید به راحتی ارتفاع و عرض بلوک را در وردپرس تغییر دهید.

روش 1: ارتفاع و عرض بلوک را با استفاده از تنظیمات بلوک تغییر دهید

برای این روش، ما به شما نشان خواهیم داد که چگونه ارتفاع و عرض یک بلوک را با استفاده از تنظیمات پیش فرض ارائه شده توسط وردپرس تغییر دهید.

در حال حاضر، وردپرس گزینه های تغییر اندازه یکسانی را برای همه بلوک ها ارائه نمی دهد. با این حال، ویرایشگر بلوک راه های زیادی برای تغییر اندازه ارتفاع و عرض بلوک های مختلف ارائه می دهد.

بیایید با بلوک Image در وردپرس شروع کنیم.

ابتدا، می‌توانید تراز بلوک Image را با کلیک بر روی دکمه “Align” در نوار ابزار بالای بلوک تغییر دهید.

در اینجا، با انتخاب گزینه “Wide Width” عرض بلوک برابر با ظرف است.

یا، گزینه تراز “عرض کامل” بلوک را به تمام عرض صفحه تبدیل می کند.

همچنین می‌توانید اندازه بلوک را با رفتن به پانل «تنظیمات مسدود کردن» در سمت راست و پایین رفتن به بخش «تنظیمات» تغییر دهید. از اینجا می‌توانید اندازه یک بلوک را از منوی کشویی «اندازه تصویر» تغییر دهید.

همچنین می‌توانید عرض و ارتفاع بلوک را با تایپ اندازه پیکسل ترجیحی در کادرهای «عرض» و «ارتفاع» در بخش «ابعاد تصویر» تنظیم کنید.

در زیر آن، شما همچنین می توانید اندازه بلوک را بر اساس درصد تنظیم کنید.

راه دیگر برای تغییر اندازه بلوک تصویر این است که روی خود تصویر کلیک کنید تا یک حاشیه آبی با لنگرهای دایره ای ظاهر شود.

سپس، به سادگی این لنگرها را بکشید تا ارتفاع و عرض بلوک تصویر را تغییر دهید.

پس از اتمام کار، روی دکمه «به‌روزرسانی» یا «انتشار» کلیک کنید تا تنظیمات شما ذخیره شود.

روش 2: ارتفاع و عرض بلوک را با استفاده از بلوک ستون ها تغییر دهید

اگر بلوکی که می‌خواهید اندازه آن را تغییر دهید همراه با دکمه‌های تراز یا تنظیمات تغییر اندازه نیست، این روش برای شما مناسب است.

برای این روش بلوک خود را داخل بلوک Columns قرار می دهیم. این به عنوان یک ظرف عمل می کند که در آن می توانید بلوک ها را در هر ستون اضافه کنید. سپس، می توانید اندازه آن بلوک ها را با تنظیم ارتفاع و عرض ستون ها تغییر دهید.

ابتدا باید روی دکمه «افزودن بلوک» (+) در گوشه سمت چپ بالای صفحه کلیک کنید.

از اینجا، به سادگی بلوک Columns را پیدا کرده و به ویرایشگر محتوا اضافه کنید. سپس، از شما خواسته می شود که یک تغییر را انتخاب کنید.

پس از آن، طرح بندی ستون روی صفحه نمایش داده می شود و اکنون می توانید بلوک مورد نظر خود را با کلیک بر روی دکمه “افزودن بلوک (+)” در داخل یک ستون اضافه کنید.

هنگامی که بلوک اضافه شد، می توانید با استفاده از “تنظیمات ستون” واقع در پانل سمت راست، اندازه آن را تغییر دهید.

پس از اتمام کار، به سادگی روی دکمه “انتشار” کلیک کنید تا تغییرات شما ذخیره شود.

پس از تغییر اندازه و تراز کردن دو بلوک پاراگراف در داخل یک بلوک دو ستونی، محتوا در وب‌سایت آزمایشی ما به این صورت است.

روش 3: ارتفاع و عرض بلوک را با استفاده از بلوک گروه تغییر دهید

همچنین می توانید عرض و ارتفاع بلوک ها را با استفاده از بلوک گروه تنظیم کنید. این به شما امکان می دهد بلوک های مختلف را گروه بندی کنید و آنها را با هم استایل دهید.

ابتدا باید روی دکمه «افزودن بلوک» (+) در بالا کلیک کنید. در مرحله بعد، باید بلوک Group را پیدا کرده و به ویرایشگر محتوا اضافه کنید.

پس از انجام این کار، بلوک گروه سه گزینه طرح بندی مختلف را نشان می دهد که می توانید از بین آنها انتخاب کنید. برای این آموزش، از طرح “گروه” استفاده خواهیم کرد.

پس از آن، دکمه “افزودن بلوک” روی صفحه نمایش داده می شود. اکنون می توانید هر بلوکی را که می خواهید اضافه کنید.

در این آموزش، ما یک بلوک عنوان، یک بلوک پاراگراف و یک بلوک تصویر را اضافه و تغییر اندازه خواهیم داد.

برای افزودن چندین بلوک به گروه، باید روی دکمه “انتخاب گروه” از نوار ابزار بلوک کلیک کنید.

پس از انتخاب گروه، به سادگی روی دکمه “افزودن بلوک” (+) در پایین کلیک کنید.

با کلیک بر روی دکمه “انتخاب گروه” نیز تنظیمات بلوک در ستون سمت راست باز می شود. از اینجا به راحتی می توانید طرح، توجیه و جهت تمام بلوک ها را تنظیم کنید.

تغییر طرح، اندازه های مختلف بلوک را نیز تغییر می دهد. تا زمانی که از نتیجه راضی نباشید می توانید این تنظیمات را پیکربندی کنید.

پس از اتمام کار، روی دکمه «به‌روزرسانی» یا «انتشار» کلیک کنید تا تنظیمات شما ذخیره شود.

بلوک گروه در وب‌سایت آزمایشی ما اینگونه به نظر می‌رسد.

روش 4: ارتفاع بلوک را با استفاده از بلوک پوششی تغییر دهید

اگر می خواهید از بلوک Cover استفاده کنید، این روش تغییر اندازه برای شما مناسب است. این به شما امکان می دهد متن و سایر محتواها را در بالای یک تصویر یا ویدیو نمایش دهید.

ابتدا باید روی دکمه «افزودن بلوک» (+) در بالا کلیک کنید و بلوک پوشش را پیدا کنید.

پس از انجام این کار، از شما خواسته می شود که رنگی را انتخاب کنید یا تصویری را از کتابخانه رسانه وردپرس آپلود کنید. این تصویر یا رنگ به عنوان پس‌زمینه برای بلوک پوشش استفاده می‌شود.

در مرحله بعد، به سادگی هر بلوکی را که می خواهید در بلوک Cover بکشید و رها کنید.

پس از آن، باید روی بلوک Cover کلیک کنید تا تنظیمات بلوک آن در ستون سمت راست باز شود.

از اینجا، به سمت پایین به پانل «ابعاد» بروید، جایی که می‌توانید ارتفاع بلوک پوشش را با استفاده از پیکسل‌ها تنظیم کنید.

در نهایت، فراموش نکنید که برای ذخیره تنظیمات خود، روی دکمه “ذخیره تغییرات” کلیک کنید.

برای دستورالعمل های دقیق تر در مورد نحوه استفاده از بلوک پوشش، ممکن است بخواهید راهنمای مبتدی ما را در مورد تصویر جلد در مقابل تصویر ویژه در ویرایشگر بلوک وردپرس ببینید.

امتیاز: ایجاد صفحات زیبا با استفاده از بلوک های پیشرفته در SeedProd

با استفاده از افزونه SeedProd به راحتی می توانید صفحاتی زیبا و زیبا ایجاد کنید.

این بهترین صفحه ساز وردپرس در بازار است که به شما امکان می دهد صفحات فرود را با استفاده از بلوک ایجاد کنید. این بلوک ها نیز بسیار آسان برای سفارشی سازی و تغییر اندازه بر اساس نیاز شما هستند.

ابتدا باید افزونه SeedProd را نصب و فعال کنید. برای جزئیات بیشتر، می توانید راهنمای ما در مورد نحوه نصب افزونه وردپرس را بخوانید.

پس از فعال سازی، باید به آدرس زیر بروید SeedProd » تنظیمات صفحه را از داشبورد وردپرس خود وارد کنید و کلید مجوز را در کادر “کلید مجوز” وارد کنید.

می توانید کلید مجوز را در صفحه حساب خود در وب سایت SeedProd پیدا کنید.

بعد، باید از SeedProd » صفحات فرودبرای شروع ایجاد صفحه فرود، از نوار کناری ادمین صفحه نمایش داده شود.

از اینجا، فقط روی دکمه «افزودن صفحه فرود جدید» کلیک کنید.

اکنون به صفحه «انتخاب الگوی صفحه جدید» هدایت خواهید شد. SeedProd الگوهای از پیش ساخته زیادی را ارائه می دهد که می توانید از بین آنها انتخاب کنید.

پس از انتخاب یک الگو، از شما خواسته می شود که یک نام و URL برای صفحه فرود خود ارائه دهید.

پس از افزودن این جزئیات، برای ادامه روی دکمه «ذخیره و شروع ویرایش صفحه» کلیک کنید.

با این کار صفحه ساز کشیدن و رها کردن SeedProd راه اندازی می شود، جایی که اکنون می توانید صفحه خود را ویرایش کنید.

برای دستورالعمل های دقیق تر، لطفاً راهنمای ما در مورد نحوه ایجاد صفحه فرود با وردپرس را ببینید.

برای این آموزش، یک بلوک تصویر و یک بلوک دکمه را اضافه و اندازه آن را تغییر خواهیم داد.

ابتدا باید بلوک Image را از پنل بلوک در سمت چپ بکشید و آن را در هر کجای صفحه که دوست دارید رها کنید.

بعد، به سادگی روی بلوک Image کلیک کنید تا تنظیمات بلوک آن در ستون سمت چپ باز شود. از اینجا می توانید تصویری را از کتابخانه رسانه خود آپلود کنید.

بعد، می توانید ارتفاع و عرض بلوک را با استفاده از پیکسل یا درصد تغییر دهید.

همچنین می‌توانید اندازه و موقعیت تصویر را با جابجایی به برگه «پیشرفته» در بالای پانل تنظیمات تنظیم کنید.

سپس، فقط روی پانل Spacing کلیک کنید تا تنظیمات آن گسترش یابد.

در اینجا، به سادگی مقادیری را اضافه کنید تا حاشیه و بالشتک بلوک را مطابق با نیاز خود تنظیم کنید.

شما می توانید حاشیه و بالشتک را برای قسمت های بالا، پایین، چپ و راست بلوک تنظیم کنید.

با Seedprod، می‌توانید یک بلوک Spacer بین دو بلوک مختلف اضافه کنید تا مقداری فاصله بین آنها قرار دهید.

ابتدا باید بلوک “Spacer” را از ستون سمت چپ بیابید و اضافه کنید. سپس روی آن کلیک کنید تا تنظیمات آن باز شود.

اکنون می‌توانید ارتفاع فاصله‌دهنده را با استفاده از نوار لغزنده «Height» کنترل کنید.

بلوک spacer می تواند به شما در ایجاد یک وب سایت بدون درهم و برهم کمک کند.

همچنین می توانید عرض و ارتفاع بلوک های دیگر را نیز به همین ترتیب تغییر دهید، از جمله بلوک های ویدیو، عنوان و دکمه.

به سادگی بلوک دکمه را در ستون سمت چپ پیدا کنید و آن را به صفحه خود بکشید.

در مرحله بعد، باید روی دکمه کلیک کنید تا تنظیمات بلوک آن باز شود.

از اینجا، از بالا به تب ‘Advanced’ بروید. می‌توانید ارتفاع بلوک را با کشیدن نوار لغزنده Vertical Padding تغییر دهید.

برای تغییر عرض، نوار لغزنده “Horizontal Padding” را در ستون سمت چپ بکشید.

پس از اتمام کار، فراموش نکنید که روی دکمه “ذخیره” کلیک کنید.

امیدواریم این مقاله به شما در یادگیری نحوه تغییر عرض و ارتفاع بلوک در وردپرس کمک کرده باشد. همچنین ممکن است بخواهید مقاله ما را در مورد نحوه افزودن و تراز کردن تصاویر در ویرایشگر بلوک وردپرس و انتخاب های برتر ما برای افزونه های ضروری وردپرس برای رشد سایت خود مشاهده کنید.

اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب ما برای آموزش های ویدیویی وردپرس مشترک شوید. شما همچنین می توانید ما را در توییتر و فیس بوک

پست نحوه تغییر ارتفاع و عرض بلوک در وردپرس اولین بار در WPBeginner ظاهر شد.

سایت محتوا مارکتینگ