نحوه حذف و اضافه کردن فضای خالی میان بلاک‌های وردپرس

16 مرداد 1401
حذف و اضافه کردن فضای خالی میان بلاک‌های وردپرس

آیا می‌خواهید فضای خالی را میان بلاک‌های وردپرس اضافه کرده یا حذفشان کنید؟ حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس، به شما کنترل بیشتری بر طراحی سایت وردپرسی می‌دهد.

در این مقاله نحوه حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس را به صورت گام به گام به شما نشان خواهیم داد.

 

حذف و اضافه کردن فضای خالی میان بلاک‌های وردپرس چه اهمیتی دارد؟

وردپرس با داشتن ویرایشگر بلاک داخلی (built-in WordPress block editor) تهیه صفحات و پست‌های سفارشی را آسان می‌کند.

با این حال، شاید متوجه شده‌اید که وقتی بلاک‌های خاصی را اضافه می‌کنید، فاصله بسیار زیاد یا خیلی کمی به وجود می‌آید. حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس، امکان سفارشی سازی چیدمان صفحه را دقیقاً همانطور که می‌خواهید، فراهم می‌کند.

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

همانطور که گفته شد، می‌خواهیم نگاهی به نحوه حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس در وب سایت بیندازیم. در ادامه روش‌های زیر را بررسی خواهیم کرد:

  • اضافه کردن فضای خالی با بلاک ادیتور وردپرس
  • حذف یا اضافه کردن فضای خالی با افزودن کد به وردپرس
  • اضافه کردن و حذف فضای خالی با CSS Hero
  • حذف و اضافه کردن فضای خالی با SeedProd

 

مطلب پیشنهادی: افزودن ماشین حساب به سایت وردپرس

 

روش اول: اضافه کردن فضای خالی بین بلاک‌های وردپرس با بلاک ادیتور

ساده ترین راه برای اضافه کردن فضای خالی بین بلاک‌ها، استفاده از بلاک ادیتور وردپرس است. در اینجا یک بلاک فاصله گذار داخلی وجود دارد که امکان اضافه کردن فضای خالی را با کمک چند کلیک فراهم می‌کند.

برای استفاده از این قابلیت، پست یا صفحه‌ مدنظر برای ویرایش شدن را باز کنید و روی دکمه «Plus» کلیک کنید.

سپس «Spacer» را جستجو کنید و بلاک را انتخاب کنید.

اضافه کردن فضای خالی با بلاک ادیتور

این کار به طور خودکار یک spacer  را وارد صفحه می‌کند.

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

بلاک ادیتور

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

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

 

روش دوم: حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس با افزودن CSS سفارشی

راه دیگری برای افزودن و حذف فضای خالی بین بلاک‌ها، افزودن کد CSS سفارشی به تم خودتان است.

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

سپس، روی آیتم «Block» در منوی سمت راست کلیک کنید.

حذف و اضافه کردن فضای خالی با کد

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

سپس، در کادر «Additional CSS classes» کد زیر را اضافه کنید:

.add-remove-bottom-space

این اسنیپت، یک کلاس CSS جدید را به طور اختصاصی برای آن بلاک ایجاد می‌کند.

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

اسنیپت css

در مرحله بعد، به مسیر Appearance » Customize بروید تا WordPress theme customizer  ظاهر شود.

سفارشی سازی تم

سپس به پایین بروید و روی گزینه «Additional CSS» در منو کلیک کنید.

با این کار، فیلدی ظاهر می‌شود که می‌توانید کد CSS را در آن وارد کنید.

فیلد کد

سپس قطعه کد زیر را در کادر قرار دهید:

.add-remove-bottom-space {
 margin-bottom: 0;
}

این قطعه کد، حاشیه پایین را صفر می‌کند و فضای خالی را از بلاک حذف می‌کند. اگر می‌خواهید به پایین فضا اضافه کنید، به سادگی عدد «0» را به چیزی شبیه به «20px» تغییر دهید.

اضافه کردن کد css

هنگامی‌که تغییرات خودتان را انجام دادید، روی دکمه « Publish » کلیک کنید تا تغییرات در لحظه انجام شود.

ذخیره کردن کد CSS سفارشی با استفاده از پلاگین

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

اگر می‌خواهید CSS سفارشی شما بدون توجه به تمی که استفاده می‌کنید اعمال شود، باید از افزونه Simple Custom CSS استفاده کنید.

اولین کاری که باید انجام دهید این است که افزونه را نصب و فعال کنید. پس از فعال سازی، به سادگی به مسیر Appearance » Custom CSS رفته و کد CSS سفارشی خودتان را اضافه کنید.

کد سفارشی

وقتی کارتان تمام شد، روی دکمه «Update Custom CSS» کلیک کنید تا تغییرات ذخیره شود.

 

مطلب پیشنهادی: طراحی سایت بدون کدنویسی با المنتور

 

روش سوم: حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس با CSS Hero

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

پیشنهاد ما استفاده از پلاگین CSS Hero است. این کار به شما امکان می‌دهد تا تقریباً هر سبک از CSS را در سایت وردپرس خودتان بدون نوشتن حتی یک خط کد، ویرایش کنید.

اولین کارتان، نصب و فعال‌سازی افزونه است.

پلاگین css hero

پس از فعال‌سازی، باید روی دکمه «Proceed to Product Activation» کلیک کنید تا پلاگین فعال شود. دکمه را مستقیماً در بالای لیست افزونه‌های نصب شده خودتان پیدا خواهید کرد.

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

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

کلیک روی پلاگین

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

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

سفارشی سازی پلاگین

برای حذف و اضافه کردن فضای خالی بین بلاک‌های خودتان، کافی است روی گزینه «Spacings» کلیک کنید و سپس به قسمت «Margin-Bottom» بروید.

در اینجا می‌توانید slider را به سمت بالا یا پایین حرکت دهید تا فضای خالی، اضافه یا حذف شود.

حذف و اضافه کردن فضای خالی با پلاگین

هر تغییری که ایجاد کنید به طور خودکار در صفحه شما نمایش داده می‌شود.

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

 

مطلب پیشنهادی: نحوه اضافه کردن گوگل مپ به سایت وردپرسی

 

روش چهارم: حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس با SeedProd

SeedProd بهترین صفحه ساز کشیدن و رها کردن (drag and drop) است که در بیش از یک میلیون وب سایت استفاده شده است.

حذف و اضافه کردن فضای خالی با سید

می‌توانید از لایبرری حاوی بیش از 150 قالب برای ایجاد صفحات 404 سفارشی، صفحات فروش، صفحات فرود و سایر موارد استفاده کنید. حتی می‌توان از SeedProd برای تهیه تم وردپرس سفارشی بدون نوشتن هر گونه کدی استفاده کرد.

با این صفحه ساز، کنترل کاملی بر طراحی سایت دارید و می‌توانید به راحتی هر عنصر از وب سایت را حذف کرده یا فاصله بیندازید.

همانطور که صفحه را سفارشی می‌کنید، می‌توانید با استفاده از Spacer در هر جایی فضا اضافه کنید.

سفارشی سازی با سید

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

سپس می‌توانید از slider  برای تنظیم ارتفاع آن استفاده کنید.

تنظیم ارتفاع

همچنین می‌توانید فاصله بین هر بلاکی را کنترل کنید. برای این کار، کافی است روی هر بلاکی که می‌خواهید فضایی را اضافه یا حذف کنید، کلیک کنید.

با این کار پنل گزینه‌ها در سمت چپ ظاهر می‌شود. سپس، روی تب Advanced  کلیک کنید.

تب ادونسد

در مرحله بعد، به سمت پایین اسکرول کنید و روی آن کلیک کنید.

با این کار منویی ظاهر می‌شود که در آن می‌توانید «Margin» را کنترل کنید. برای اضافه کردن فضا کافی است یک عدد را در کادر حاشیه پایین وارد کنید یا عدد را برای حذف فضای خالی موجود، حذف کنید.

حذف و اضافه کردن فضای خالی میان بلاک‌ها

پس از انجام تغییرات، روی دکمه «Save» کلیک کنید و منوی کشویی «Publish» را انتخاب کنید تا تغییرات را اجرا کنید.

اجرای تغییرات در بلاک

در نهایت…

امیدواریم با این مقاله، نحوه حذف و اضافه کردن فضای خالی بین بلاک‌های وردپرس را یاد بگیرید. لطفا نظرات خودتان را با ما در میان بگذارید.

 

منبع

https://www.wpbeginner.com/wp-tutorials/how-to-add-or-remove-blank-space-between-wordpress-blocks

آیا این مطلب برای شما مفید بود؟
بلهخیر
برچسب ها :
نویسنده مطلب زینت فلاح
من زینت فلاح، ارشد روان سنجی هستم. هشت ساله که ترجمه متون روانشناسی،مدیریت و فناوری رو انجام میدم. به تولید محتوای جدید علاقمندم. در حدود یک ساله که با کارلنسر همکاری دارم. https://www.karlancer.com/profile/1408

دیدگاه شما

بدون دیدگاه