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

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

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

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

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

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

احتمالا برای تان پیش آمده است که مثلا در یک ردیف (Row) دو ستونی از دیوی بیلدر (شکل زیر) در یک ستون متن و در یک ستون عکس داشته باشید و بخواهید ترتیب نمایش آن ها را در نسخه موبایل هنگام اسکرول به پایین تغییر دهید.

تغییر ترتیب نمایش محتوای ستون ها در سطرهای دیوی بیلدر

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

تغییر و بازآرایی ترتیب نمایش ستون‌های Divi در نسخه موبایل

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

از لحاظ منطقی گام بعدی آموزش نحوه تغییر ترتیب نمایش هر یک از ستون های Div در نسخه های تبلت و موبایل است.

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

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

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

به طور پیش‌فرض، Divi در نسخه انگلیسی اینها را از چپ به راست و در نسخه راست چین شده از راست به چپ روی هم می‌گذارد، بنابراین در این مثال خاص در نسخه موبایل، ماژول متن در بالا و ماژول تصویر در پایین قرار می‌گیرد.

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

تغییر ترتیب نمایش عناصر موجود در ستون های یک سطر (ردیف) قالب دیوی

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

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

تغییر ترتیب نمایش عناصر موجود در ستون های یک ردیف در دیوی بیلدر در نسخه موبایل

برای این کار بایستی به ترتیب زیر عمل نماییم:

گام اول) دو خط CSS را به تنظیمات سطر (یا ردیف) اضافه می کنیم

اولین کاری که باید انجام دهیم این است که دو خط کد CSS به تنظیمات سطر Divi اضافه کنیم. این CSS برای این است که به ستون‌های موجود در سطر بگوییم که با flex نمایش داده شوند (در css برای تعیین یک نگهدارنده از نوع  flexbox باید display را از نوع flex تعریف کنیم). پس از تکمیل این مرحله نیمی از راه را برای کنترل ترتیب نمایش ستون های Divi در تلفن همراه برداشته ایم.

برای این کار به (تنظیمات ردیف > تب پیشرفته > CSS سفارشی) می رویم.

Row Settings>Advanced Tab>Custom CSS

سپس قطعه کد CSS زیر را در بخش main element قرار دهید.

display: flex;
flex-wrap: wrap;

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

اضافه کردن کد سی اس اس به تنظیمات سطر قالب دیوی برای تغییر ترتیب نمایش ستون ها در نسخه موبایل

گام دوم) برای تنظیم ترتیب نمایش ستون ها به هر ستون یک شماره می دهیم که نشان دهنده اولویت نمایش آن است

این مرحله نیز مانند مرحله قبل ساده است و پیچیدگی چندانی ندارد.

در بخش row settings لیستی از ستون های سطر مورد نظر (columns) نمایش داده می شود (شکل زیر).

ستون های مربوط به سطرهای قالب دیوی برای تغییر ترتیب نمایش آن ها

روی آیکون setting مربوط به هر ستون کلیک کنید و سپس به تب Advanced و سپس Custom CSS (CSS سفارشی) بروید (شکل زیر).

اضافه کردن کد سی اس به تنظمات ستون های دیوی برای تغییر ترتیب نمایش آن ها

برای هر ستون، باید مشخص کنیم که کدام یک از ستون ها ابتدا و کدام یک بعد از آن نمایش داده شود. برای این کار کافی است که عبارت “order:1 ” را برای ستون دارای اولویت نمایش و به همین ترتیب “order:2 ” و … را اضافه کنیم.

order: 1;

واضح است که این کدها نیز باید در بخش Main Element و حالت موبایل اضافه شود.

این کار را می توانیم برای هر تعداد ستون با شماره های 2 و 3 و 4 و 5 و … تکرار کنیم.

به همین سادگی می توان ترتیب نمایش ستون ها را تغییر داد! کار تمام است و ترتیب نمایش به ترتیب دلخواه تغییر می کند.

جمع بندی

در این مقاله به بررسی و آموزش تغییر ترتیب نمایش ستون های یک سطر قالب دیوی که ممکن است هر المانی در آن گنجانده شده باشد (متن، تصویر، ویدیو و …) پرداختیم و دیدیم که این کار به سادگی امکان پذیر است.

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

0 Comments

Submit a Comment

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