نحوه تغییر حاشیه در وردپرس (راهنمای مبتدیان)

2. تنظیم حاشیه‌ها برای افزودن فاصله بین بخش‌ها، مانند قسمت سرصفحه و محتوا.

اما از padding برای افزودن فضای بالشتکی بین محتوا و لبه‌های جعبه یا عنصر استفاده می‌شود.

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

1. تنظیم بالشتک برای افزایش فضای بالشتک در دکمه‌های تماس به اقدام شما.

2. افزایش padding در یک ستون متنی

هم padding و هم حاشیه ها به طور گسترده در طراحی وب استفاده می شوند.

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

برای جزئیات بیشتر، به آموزش ما در تفاوت بین padding و margin در وردپرس.

چرا ممکن است نیاز به اضافه کردن یا تغییر حاشیه در وردپرس داشته باشید؟

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

ما به‌طور کامل تست‌های A/B را در تمام وب‌سایت‌های خود اجرا می‌کنیم تا بفهمیم کاربران چگونه با یک طراحی تعامل دارند. بارها و بارها، نتایج نشان می‌دهد که افزودن حاشیه‌ها تأثیر زیادی بر تبدیل‌ها دارد.

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

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

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

برای مثال، ممکن است حاشیه اطراف منوهای ناوبری یا می خواهید حاشیه بیشتری در اطراف دکمه های فراخوانی خود اضافه کنید.

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

در این صورت، باید خودتان حاشیه‌ها را در وردپرس تغییر دهید.

چگونه در وردپرس حاشیه اضافه کنیم؟

راه های زیادی برای اضافه کردن حاشیه در وردپرس وجود دارد.

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

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

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

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

ابتدا، باید به Appearance » Editor بروید تا ویرایشگر سایت را راه اندازی کنید.

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

بعد، روی ناحیه یا عنصری که می‌خواهید حاشیه‌ها را تغییر دهید، کلیک کنید. در ستون سمت راست، گزینه تنظیم حاشیه‌ها را در زبانه «سبک» خواهید دید.

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

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

افزودن حاشیه در ویرایشگر بلوک

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

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

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

افزودن حاشیه در وردپرس با استفاده از SeedProd

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

رمزگشایی

صفحه‌ساز بصری کشیدن و رها کردن SeedProd به شما امکان می‌دهد حاشیه‌ها را برای هر عنصر داخل ویرایشگر به راحتی تنظیم کنید.

ابتدا، باید SeedProd. برای جزئیات بیشتر، به آموزش ما در نحوه نصب افزونه WordPress.

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

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

SeedProd دارای ده ها الگوی آماده است که می توانید از آنها به عنوان نقطه شروع استفاده کنید یا می توانید با یک الگوی خالی شروع کنید.

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

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

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

می توانید برای ویرایش هر موردی در صفحه اشاره کنید و روی آن کلیک کنید.

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

از اینجا می توانید حاشیه ها و بالشتک های عنصر انتخاب شده را تغییر دهید.

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

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

تغییر حاشیه ها با استفاده از Thrive Architect

Thrive Architect یکی است یکی از بهترین ابزارهای صفحه ساز وردپرس که به شما امکان می دهد از رابط کشیدن و رها کردن برای طراحی صفحات وردپرس استفاده کنید.

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

برای نصب Thrive Architect، ابتدا باید وارد حساب کاربری خود در وب سایت Thrive Themes شوید.

از آنجا، باید افزونه Thrive Product Manager را دانلود و نصب کنید. برای جزئیات بیشتر، به آموزش ما در نحوه نصب افزونه WordPress.

پس از فعال‌سازی، باید از صفحه Thrive Product Manager بازدید کنید.

دکمه «ورود به حساب من» را کلیک کنید تا وردپرس را به حساب Thrive Themes خود متصل کنید.

پس از اتصال، فهرستی از محصولات موجود Thrive Themes را در حساب خود خواهید دید.

بروید و بر روی کادر “نصب محصول” در قسمت Thrive Architect کلیک کنید و سپس روی دکمه “نصب محصولات انتخاب شده” در پایین کلیک کنید.

Thrive Product Manager اکنون افزونه Thrive Architect را برای شما نصب خواهد کرد.

پس از آن، می‌توانید یک پست یا صفحه جدید وردپرس را ویرایش یا ایجاد کنید و روی دکمه «Edit with Thrive Architect» یا «Launch Thrive Architect» کلیک کنید.

Thrive Architect از شما می خواهد که اگر یک صفحه جدید است یک الگو را انتخاب کنید.

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

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

برای انتخاب موردی که شبیه آنچه می‌خواهید ایجاد کنید، کافیست کلیک کنید.

چه یک صفحه معمولی (با استفاده از سبک های موضوع شما) باشد یا یک صفحه فرود، صفحه ساز Thrive Architect دارای همان ویژگی ها خواهد بود.

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

برای انتخاب یک عنصر می‌توانید روی کلیک روی آن کلیک کنید. یا روی دکمه افزودن [+] در نوار ابزار کلیک کنید تا یک عنصر جدید اضافه کنید.

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

از اینجا، روی برگه “Layout & Position” کلیک کنید تا حاشیه‌ها و بالشتک‌ها را تغییر دهید.

نمایشی بصری از حاشیه و بالشتک را خواهید دید.

موس خود را به هر طرف حاشیه ببرید و دستگیره را بکشید تا حاشیه کم یا زیاد شود.

می‌توانید این فرآیند را برای تغییر حاشیه‌ها در هر یک از چهار طرف تکرار کنید.

پس از اتمام کار، فراموش نکنید که روی دکمه Save Work کلیک کنید و سپس گزینه Save and Exit to Post Editor را انتخاب کنید.

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

تغییر حاشیه در وردپرس با استفاده از کد CSS

این روش شما را ملزم به اضافه کردن کد CSS به موضوع وردپرس خود می کند. شما همچنین به درک بسیار اساسی از HTML و CSS نیاز خواهید داشت.

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

اضافه کردن و تغییر حاشیه با استفاده از CSS های سفارشی در موضوع وردپرس

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

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

به عنوان مثال ، اگر می خواهید حاشیه های اطراف صفحه را تغییر دهید ، می توانید از کد زیر استفاده کنید:

ساده ترین راه برای یافتن کدام عنصر برای هدف قرار دادن توسط با استفاده از ابزار بازرسی در مرورگر خود.

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

<شکل کلاس = "wp-block-image size-full">

این صفحه مرورگر شما را تقسیم می کند ، و کد HTML و CSS را در پشت صفحه مشاهده خواهید کرد.

شما می توانید ماوس خود را بر روی کد حرکت دهید و مرورگر شما منطقه تحت تأثیر آن را برجسته می کند.

<شکل کلاس = "wp-block-image size-full">

در کد ، می توانید عنصر HTML یا کلاس CSS را که باید با CSS سفارشی خود هدف قرار دهید ، مشاهده کنید.

شما حتی می توانید حاشیه های خود را در اینجا امتحان کنید تا پیش نمایش آن را پیش نمایش دهید.

<شکل کلاس = "wp-block-image size-full">

با این حال ، این تغییرات در موضوع شما ذخیره نمی شوند و هنگام بارگیری مجدد یا بستن برگه مرورگر ناپدید می شوند.

بیایید روشهای مختلفی را طی کنیم که می توانید این CSS سفارشی را در وردپرس ذخیره کنید.

با استفاده از CSS های سفارشی برای تغییر حاشیه در ویرایشگر سایت < /h4>

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

ابتدا ، به صفحه ظاهر “ویرایشگر بروید تا ویرایشگر سایت را راه اندازی کنید و سپس به پانل” سبک ها “بروید.

<شکل کلاس = "wp-block-image size-full">

در پایین پانل “سبک ها” ، روی برگه “CSS اضافی” کلیک کنید.

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

<شکل کلاس = "wp-block-image size-full">

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

اضافه کردن حاشیه با CSS در سفارشی ساز

اگر از یک موضوع کلاسیک (بدون پشتیبانی ویرایشگر سایت) استفاده می کنید ، می توانید CSS های سفارشی خود را در موضوع سفارشی ذخیره کنید.

به صفحه ظاهر می شوید »سفارشی سازی برای راه اندازی موضوع سفارشی.

<شکل کلاس = "wp-block-image size-full">

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

برای گسترش آن باید روی برگه اضافی CSS کلیک کنید.

<شکل کلاس = "wp-block-image size-full">