قابلیت تراز عمودی محتویات هنگام ایجاد سایت با 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 اضافه کنید.
margin: auto; |
اکنون محتویات ستون دوم منتقل شده است تا به صورت عمودی متمرکز شود.
محتوای پایین تر را تراز کنید
اگر می خواهید محتوای خود را در پایین تراز کنید تا همه ماژول ها در انتهای ستون شما پشته شوند ، می توانید مقدار حاشیه را به شرح زیر تنظیم کنید:
margin: auto 0; |
تراز عمودی محتوا برای تمام ستون ها در ردیف شما
به جای افزودن "حاشیه: خودکار" به هر ستون به صورت جداگانه ، می توانید محتویات تمام ستون های ردیف خود را به صورت عمودی با افزودن قطعه زیر به عنصر اصلی تنظیمات ردیف خود ، در مرکز قرار دهید.
align-items: center; |
یا اگر می خواهید تمام مطالب ستون های شما در پایین تراز شود ، می توانید این گزیده را اضافه کنید:
align-items: flex-end; |
و فراموش نکنید که می توانید با کلیک راست بر روی عنصر اصلی با قطعه CSS خود و کلیک بر روی "توسعه عنصر اصلی" ، از ویژگی Extend Styles استفاده کنید.
سپس ، این عنصر اصلی css را در تمام سطرهای صفحه (یا بخش) گسترش دهید تا به طور عمودی تمام محتویات هر ستون صفحه را مرکز کنید.
اکنون همه چیز به صورت عمودی محور است.
اما شاید متوجه شده باشید که رنگ پس زمینه ستون سفید دیگر کل ارتفاع ردیف را پوشش نمی دهد. این به این دلیل است که ما "margin: auto" را به ستون اضافه کردیم. برای حل این مشکل ، می توانید رنگ پس زمینه خط را به سفید تغییر دهید و پر کردن را از خط حذف کنید. اما در عوض ، من راهی به شما نشان می دهم که محتوای ستون خود را بدون تغییر حاشیه متمرکز کنید.
روش 2: با استفاده از جهت انعطاف ستون ، مطالب را به صورت عمودی تراز کنید
در روش اول ، از ویژگی flex اضافه شده به سطر استفاده کردیم. این باعث شد که هر یک از ستون های ما یک "جعبه انعطاف پذیر" باشد که می تواند با تنظیم ساده حاشیه به صورت عمودی تراز شود.
اما یک راه جهت انعطاف پذیری نیز وجود دارد که می تواند محتوای ستون ما را بدون از دست دادن اثر "Equalize Column Height" تنظیم کند که ستون ها (و زمینه های ستون) را به همان اندازه نگه دارد. برای این کار ، ما فقط چند خط CSS به ستون خود اضافه می کنیم تا تمام ماژول های ستون به صورت عمودی انباشته شده و سپس مرکز شوند.
بیایید به خط خود در مثال قبلی برگردیم. تنظیمات ردیف را باز کرده و با کلیک راست بر روی CSS سفارشی و کلیک روی "بازنشانی سبک های CSS سفارشی" ، css های سفارشی را که ممکن است در آنجا داشته باشید حذف کنید.
سپس CSS زیر را در زیر ستون 2 ، عنصر اصلی اضافه کنید:
نمایشگر: flex؛ فلکس-جهت: ستون؛ justify-content: center؛
یا اگر می خواستم مطالب را در پایین تراز کنید ، فقط "توجیهی محتوا: مرکز" را با "توجیه محتوا: flex-end" جایگزین کن.
نکته جالب در مورد این تنظیم این است که اگر محتوای من به صورت عمودی متمرکز شود و به عرض ردیف برسد ، محتوا در مرکز باقی بماند.
تاری (خلاصه) را با مقادیر مختلف متن تراز عمودی ایجاد کنید
قرار دادن محتوای ستون خود به صورت عمودی در مرکز نیز می تواند برای تارها مفید باشد. همانطور که می دانید، همه تارها حاوی مقدار دقیق متن مورد استفاده برای d نیستندنوشتن عملکرد یا خدمات وسط قرار دادن این تارها به صورت عمودی می تواند طراحی زیبایی برای چیدمان شما ایجاد کند.
برای این مثال ، من قصد دارم تارها را به صورت طرح صفحه اصلی Digital Payments تراز کنم.
من در ابتدا می خواهم مقادیر مختلف متن متن را به تارها اضافه کنم تا نمای واقعی تری از شکل ظاهری یک سایت ارائه دهم.
حال باید به تنظیمات خط و "ارتفاعات ستون هماهنگ" مراجعه کنم.
اکنون می توانم قطعه های CSS خود را برای تطبیق مطالب من و طراحی تغییر دهم.
در زیر زبانه Advanced از تنظیمات ردیف شما ، می توانیم محتوای ستون های خود را با افزودن موارد زیر در عنصر اصلی به صورت عمودی در مرکز قرار دهیم:
align-items: center; |
یا آن را با دنبال کردن به خط آنها را تغییر دهید.
align-items: flex-end; |
همچنین می توانید سبک های CSS سفارشی خود را مجددا تنظیم کنید و حاشیه های سفارشی زیر را برای تراز کردن ستون پایین و ستون سوم تراز وسط قرار دهید.
ستون 1 CSS عنصر اصلی:
margin: auto auto 0; |
ستون 3 CSS عنصر اصلی:
margin: 0 auto auto; |
در مورد طرح های تک ستونی چطور؟
از نظر فنی ، به مرکز CSS یا محتوای ستون خود نیازی به قطعه CSS یا flex ندارید. تمام کاری که شما باید انجام دهید این است که مطمئن شوید از فاصله برابر و بالاتر از محتوای (یا ماژول ها) خود برخوردار هستید. بیشتر اوقات ، کاربران به محتوای عمودی نیاز دارند که متمرکز بر طرح بندی با چندین ستون باشد ، زیرا آنها می خواهند محتوای مجاور به طور کامل در یک ردیف قرار بگیرند.
این فقط برای این آموزش است که به شما نشان می دهد چگونه عناصر را در همان خط در Divi تراز کنید.
