تغییر عرض ستون ها در دیوی بیلدر: چگونه می توان عرض ستون ها را در قالب دیوی تغییر داد

دیوی بیلدر | ریسپانسیو | سفارشی سازی | سفارشی سازی با کد
دیوی مارکتآگوست 24, 2023

امیدواریم از خواندن این مقاله لذت کافی را ببرید

اگر می خواهید قالب قدرتمند دیوی را با لایسنس اورجینال و قابلیت آپدیت اتوماتیک تهیه کنید و با ما سفری هیجان انگیز به سوی راه اندازی کسب و کاری سودآور با تجربه کنید اینجا کلیک کنید.

تغییر عرض ستون ها در دیوی بیلدر: چگونه می توان عرض ستون ها را در قالب دیوی تغییر داد

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

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

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

اما ابتدا بهتر است به این موضوع بپردازیم که اساسا چرا این موضوع اهمیت دارد؟

چرا به تغییر عرض ستون‌های Divi نیاز داریم؟

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

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

تغییر عرض ستون ها در هدر اسکایرون

در شکل فوق از ماژول منو، ماژول ایمیج و یک دکمه (باتن) استفاده شده است.

بررسی حالات دیفالت ستون ها در دیوی بیلدر

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

لی اوت (طرح بندی) پیش فرض ستون ها در قالب دیوی
طرح بندی پیش فرض ستون ها در قالب دیوی

به عنوان مثال در ادامه از طرحی با 4 ستون استفاده کرده ام که عرض هر کدام از ستون ها به مقدار یک چهارم (1/4) تنظیم شده است، اما همانگونه که در شکل فوق دیده می شود طرح بندی هایی (layout) با تعداد ستون بیشتر یا کمتر نیز در Divi وجود دارد.

لی اوت ستون ها با اندازه یک چهارم در دیوی در نسخه دسکتاپ
عرض مساوی و یک چهارم در نسخه دسکتاپ
لی اوت ستون ها با اندازه یک چهارم در دیوی در نسخه تبلت
عرض مساوی و یک چهارم در نسخه تبلت
  لی اوت ستون ها با اندازه مساوی و یک چهارم در دیوی در نسخه موبایل
عرض مساوی و یک چهارم در نسخه موبایل

مطالبی که در این آموزش بیان می شود با همه layout ها در دیوی (شکل فوق: طرح بندی پیش فرض ستون ها در قالب دیوی) قابل استفاده است بنابراین اهمیتی ندارد که طرح بندی ستونی چگونه باشد.

اما راه حل چیست؟ اگر بخواهیم عرض ستون ها را به عرض های دلخواه تغییر بدهیم چه باید بکنیم؟

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

این کار بسیار ساده است و نیازی به هیچگونه قطعه کد خاص یا کلاس های CSS گیج کننده نیست. در ادامه به شما نشان خواهم داد که چگونه این کار را به درستی و به سادگی در Divi Builder انجام دهید!

من می خواهم از روشی استفاده کنم که استفاده از آن برای دیگران و با کمترین میزان دانش طراحی وب و کدنویسی به ساده ترین شکل ممکن امکان پذیر باشد و از استفاده از مدیا کوئری های گیج کننده css و کلاس‌های سفارشی اجتناب می کنم. … خبر خوب اینکه از این ساده تر نمی شود!

روش تغییر Column Widths در قالب دیوی

 این روش را با مراحل زیر پی می گیریم.

گام اول- تنظیمات اولیه لازم برای تغییر عرض ستون ها

ابتدا بایستی یک سری تنظیمات اولیه را برای ردیف ها انجام دهید.

  • اطمینان حاصل کنید که عرض ردیف (Width) و حداکثر عرض ردیف (Max-Width) هر دو روی 100٪ تنظیم شده اند.
  • مطمئن شوید که مقدار Custom Gutter Width (فاصله بین دو ستون) روی ۱ تنظیم شده است.

این موضوع در شکل های زیر نشان داده شده است:

برای این کار باید ابتدا وارد تنظیمات سطر (ردیف) شویم که با این کار با شکل زیر مواجه خواهیم شد:

وارد شدن به بخش تنظیمات سطر یا Row در قالب دیوی
بخش تنظیمات سطرها در قالب دیوی

و سپس در سربرگ Design باید تنظیمات لازم را اعمال کنیم

تنظیمات لازم برای تغییر عرض ستون های دیوی بیلدر

گام دوم- بهترین ساختار ستون Divi را انتخاب کنید

مهمترین نکته در اینکار این است که تعداد ستون های مورد نیاز را درست انتخاب کنید. نگران عرض هر ستون نباشید. اگر به مثال فوق دقت کنید، می بینید که من 4 ستون را انتخاب کردم که عرض هر کدام از آن ها برابر 1/4 عرض کل سطر (Row) است. بنابراین به طور پیش فرض عرض هر یک از آنها 25٪ عرض کل ردیف است.

استفاده از سطر (ردیف) چهار ستونه سبب می شود که 4 بخش در اختیار طراح باشد که بتواند اندازه آن ها را به اندازه های دلخواه خود تغییر دهد. اگر به سه بخش با اندازه دلخواه نیاز دارید از حالت سه ستونه استفاده کنید و … .

گام سوم- دانش ریاضی خود را بکار گیرید

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

هر مجموعی کمتر یا بیشتر از مقدار 100 ایجاد مشکل خواهد کرد پس بایستی مطمئن شوید که همواره جمع مقادیر انتخابی برای عرض ستون ها دقیقا برای 100٪ شود.

گام چهارم- از کد css یک خطی زیر استفاده کنید

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

برای این کار باید به تنظیمات سطر (ردیف) و سپس تنظیمات هر یک از ستون ها بروید و برای هر ستون به صورت جداگانه این کار را انجام دهید.

 Advanced Tab>Custom CSS>Main Element

وارد کردن کد سی اس اس لازم برای تغییر عرض ستون های دیوی بیلدر

سپس باید قطعه کد زیر را در بخش Main element وارد کنید.

width: 10%!important;

بدیهی است که باید  مقدار 10% کد فوق را متناسب با نیاز خود تغییر دهید.

باز هم تاکید می کنم که مقادیر اعداد را طوری انتخاب کنید که مجموع آن ها برابر 100٪ شود.

تنظیمات لازم برای تبلت و تلفن

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

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

پس به این نکته هم توجه کنید که شاید لازم باشد عرض هر ستون را به 50٪ یا 100٪ یا مقادیر دیگری در تلفن همراه یا تبلت تغییر دهید. برای این کار باید در همان بخش Main element و این بار برای تبلت یا موبایل کد لازم را وارد کنید.

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

توجه: پست بعدی ما در دیوی مارکت در مورد چگونگی تغییر ترتیب نمایش هر بخش از عرض ستون ها هنگام اسکرول در نسخه موبایل می باشد که می توانید آن را مطالعه کنید.

جمع بندی

در این مقاله به یکی از راهکارهای ساده تغییر عرض ستون ها در دیوی بیلدر پرداختم. امیدوارم از یادگیری این روش برای تغییر اندازه عرض ستون ها در قالب Divi لذت برده باشید.

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

0 Comments

Submit a Comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *