Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62.

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

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

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

درک فلوکس و دوو

ویژگی css Flex (یا Flexbox) به سادگی روشی برای قرار دادن موارد در پشته های افقی و / یا عمودی است (دقیقاً مانند یک جدول). به جز ، برخلاف جداول سنتی ، ویژگی flex به شما امکان می دهد جعبه هایی ایجاد کنید که متناسب با اندازه محتوای موجود در آن تنظیم شوند.

Divi هر زمان که "Equalize Column Heights" را به عنوان پارامتر سطر انتخاب کنید ، از ویژگی flex استفاده می کند. این فقط تضمین می کند که اندازه ستون های شما به اندازه ستون با بیشترین محتوا تنظیم می شود. و از آنجا که "Equalize Column Heights" قابلیت انعطاف پذیری را برای محفظه ردیف فراهم می کند ، به راحتی می توانید با افزودن css به ستون های خود از محتوای هر ستون (یا ناحیه) استفاده کنید.

به عنوان مثال ، اگر "margin: auto" را به یک ستون پشت سر هم اضافه کنید ، محتوای آن ستون (خواه یک یا چند ماژول باشد) به صورت عمودی مرکز می شود.

علاوه بر این ، در صورت اضافه کردن "align-things: center" به خط خود ، تمام ستون های شما (و محتویات آنها) به صورت عمودی متمرکز می شوند.

البته کاربردهای فراوانی برای ویژگی Flex در طراحی وب و همچنین CSS پیشرفته تری وجود دارد که می توانید در زمینه خود اعمال کنید. اما برای این آموزش ، من می خواستم آن را ساده نگه دارم.

آیا واقعاً لازم است؟

از نظر فنی ، نه با استفاده از فاصله سفارشی (padding و حاشیه) می توانید مطالب / ماژول های خود را به صورت عمودی در یک ستون تراز کنید. به عنوان مثال ، می توانید از گزینه های فاصله Divi برای ایجاد ستونی برابر با بالشتک بالا و پایین استفاده کنید تا ماژول (ها) را به صورت عمودی در ستون قرار دهید. برای ترازبندی محتوای پایین ، می توانید فقط بالشتک بالایی را به یک ستون اضافه کنید. با این وجود ، ممکن است لازم باشد هنگام به روزرسانی صفحه خود با محتوای بیشتر ، فاصله را تنظیم کنید. بعلاوه ، حفظ این تراز در عرضهای مختلف مرورگر دشوار است.

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

بیایید شروع کنیم!

طرح از پیش تعریف شده را در صفحه خود بارگذاری کنید

برای شروع ، من از طرح موجود در محدوده نمونه کارها شرکت طراحی داخلی استفاده خواهم کرد. برای دریافت این طرح در صفحه خود ، یک صفحه جدید ایجاد کنید. سپس به صفحه خود عنوان بدهید. بر روی "Use Divi Builder" و سپس "Use Visual Builder" کلیک کنید. سپس گزینه "Choose a basic layout" را انتخاب کنید. سپس کادر طرح بندی شرکت طراحی داخلی را از پنجره بازشو Load from Library انتخاب کنید. در آخر ، صفحه نمونه کارها را از لیست طرح ها انتخاب کرده و روی "استفاده از این طرح" کلیک کنید.

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

روش 1: نحوه تنظیم عمودی مطالب با استفاده از Flex و Auto Margin

تنظیمات خط را برای خط دوم صفحه (یکی مستقیم زیر خط با عنوان صفحه) باز کنید. در بخش تنظیمات طراحی ، گروه گزینه sizing را باز کرده و متوجه شوید که "Equalize Column Heights" از قبل فعال است. این به این معنی است که خط اکنون خاصیت flex ("display: flex؛") اضافه شده است.

حالا به تنظیمات برگه Advanced برای همان ردیف بروید و قطعه css زیر را در جعبه ورودی عنصر اصلی ستون 2 اضافه کنید.

marginauto;

به راحتی وب سایت خود را با Elementor بسازید

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

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

محتوای پایین تر را تراز کنید

اگر می خواهید محتوای خود را در پایین تراز کنید تا همه ماژول ها در انتهای ستون شما پشته شوند ، می توانید مقدار حاشیه را به شرح زیر تنظیم کنید:

marginauto 0;

تراز عمودی محتوا برای تمام ستون ها در ردیف شما

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

align-items: center;

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

align-items: flex-end;

و فراموش نکنید که می توانید با کلیک راست بر روی عنصر اصلی با قطعه CSS خود و کلیک بر روی "توسعه عنصر اصلی" ، از ویژگی Extend Styles استفاده کنید.

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

اکنون همه چیز به صورت عمودی محور است.

اما شاید متوجه شده باشید که رنگ پس زمینه ستون سفید دیگر کل ارتفاع ردیف را پوشش نمی دهد. این به این دلیل است که ما "margin: auto" را به ستون اضافه کردیم. برای حل این مشکل ، می توانید رنگ پس زمینه خط را به سفید تغییر دهید و پر کردن را از خط حذف کنید. اما در عوض ، من راهی به شما نشان می دهم که محتوای ستون خود را بدون تغییر حاشیه متمرکز کنید.

روش 2: با استفاده از جهت انعطاف ستون ، مطالب را به صورت عمودی تراز کنید

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

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

در روش اول ، از ویژگی flex اضافه شده به سطر استفاده کردیم. این باعث شد که هر یک از ستون های ما یک "جعبه انعطاف پذیر" باشد که می تواند با تنظیم ساده حاشیه به صورت عمودی تراز شود.

اما یک راه جهت انعطاف پذیری نیز وجود دارد که می تواند محتوای ستون ما را بدون از دست دادن اثر "Equalize Column Height" تنظیم کند که ستون ها (و زمینه های ستون) را به همان اندازه نگه دارد. برای این کار ، ما فقط چند خط CSS به ستون خود اضافه می کنیم تا تمام ماژول های ستون به صورت عمودی انباشته شده و سپس مرکز شوند.

بیایید به خط خود در مثال قبلی برگردیم. تنظیمات ردیف را باز کرده و با کلیک راست بر روی CSS سفارشی و کلیک روی "بازنشانی سبک های CSS سفارشی" ، css های سفارشی را که ممکن است در آنجا داشته باشید حذف کنید.

سپس CSS زیر را در زیر ستون 2 ، عنصر اصلی اضافه کنید:

نمایشگر: flex؛ فلکس-جهت: ستون؛ justify-content: center؛

یا اگر می خواستم مطالب را در پایین تراز کنید ، فقط "توجیهی محتوا: مرکز" را با "توجیه محتوا: flex-end" جایگزین کن.

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

تاری (خلاصه) را با مقادیر مختلف متن تراز عمودی ایجاد کنید

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

برای این مثال ، من قصد دارم تارها را به صورت طرح صفحه اصلی Digital Payments تراز کنم.

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

حال باید به تنظیمات خط و "ارتفاعات ستون هماهنگ" مراجعه کنم.

اکنون می توانم قطعه های CSS خود را برای تطبیق مطالب من و طراحی تغییر دهم.

در زیر زبانه Advanced از تنظیمات ردیف شما ، می توانیم محتوای ستون های خود را با افزودن موارد زیر در عنصر اصلی به صورت عمودی در مرکز قرار دهیم:

align-items: center;

یا آن را با دنبال کردن به خط آنها را تغییر دهید.

align-items: flex-end;

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

ستون 1 CSS عنصر اصلی:

marginauto auto 0;

ستون 3 CSS عنصر اصلی:

margin0 auto auto;

در مورد طرح های تک ستونی چطور؟

از نظر فنی ، به مرکز CSS یا محتوای ستون خود نیازی به قطعه CSS یا flex ندارید. تمام کاری که شما باید انجام دهید این است که مطمئن شوید از فاصله برابر و بالاتر از محتوای (یا ماژول ها) خود برخوردار هستید. بیشتر اوقات ، کاربران به محتوای عمودی نیاز دارند که متمرکز بر طرح بندی با چندین ستون باشد ، زیرا آنها می خواهند محتوای مجاور به طور کامل در یک ردیف قرار بگیرند.

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