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

divi line module builder.png

پارامترهای تنظیمات خط divi.png

تنظیمات محتوا

رنگ پسزمینه

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

تصویر پس زمینه

تصاویر پس‌زمینه را می‌توان در کل ردیف اعمال کرد.

ویدئو پس زمینه MP4

لس فیلم ها پس زمینه را می توان روی خطوط اعمال کرد. اگر می خواهید ویدیوی پس زمینه را اعمال کنید، باید ویدیوی MP4 و WEBM را آپلود کنید و وارد کنید فیلم ها ICI.

ویدیوی وب پس زمینه

لس فیلم ها پس زمینه را می توان روی خطوط اعمال کرد. اگر می‌خواهید ویدیو پس‌زمینه را اعمال کنید، باید ویدیوی MP4 و WEBM را دانلود کنید و فیلم‌ها را اینجا وارد کنید.

عرض ویدیوی پس زمینه

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

ارتفاع فیلم پس زمینه

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

مکث ویدیو

اگر می خواهید ویدیوها با کلیک بر روی آنها مکث کنند، این گزینه را فعال کنید.

رنگ پس زمینه ستون

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

تصویر پس زمینه ستون

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

برچسب مدیریت

این باعث تغییر برچسب ماژول در ژنراتور برای شناسایی آسان می شود. هنگام استفاده از نمای WireFrame در Visual Builder، این برچسب ها در بلوک ماژول های رابط ظاهر می شوند. DIVI سازنده.

بخش طراحی divi builder.png

پارامترهای طراحی

از افکت اختلاف منظر استفاده کنید

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

افکت اختلاف منظر ستونی

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

این خط را تمام عرض کنید

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

از عرض سفارشی استفاده کنید

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

از عرض ناودان سفارشی استفاده کنید

عرض ناودان فاصله بین ستون ها را تنظیم می کند. 4 اندازه ناودان وجود دارد که از 0 شروع می شود تعریف عرض ناودان به 1 باعث می شود که بین ستون ها فاصله ای وجود نداشته باشد. هنگامی که با گزینه Full Width ترکیب می شود، می تواند جلوه هایی مشابه ماژول Full Screen Portfolio ایجاد کند.

ارتفاع ستون ها را برابر کنید

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

بالشتک سفارشی

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

حاشیه سفارشی

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

پر کردن ستون سفارشی

اگر می خواهید بالشتک یک ستون خاص در ردیف خود را تنظیم کنید، می توانید این کار را در اینجا انجام دهید.

حاشیه ستون سفارشی

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

ستون پیشروی گزینه divi.png

تنظیمات پیشرفته

شناسه CSS

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

کلاس CSS

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

ستون شناسه CSS

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

ستون کلاس CSS

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

قبل

ورودی CSS در اینجا برای اعمال: قبل از div خط اصلی.

عنصر اصلی

ورودی CSS در اینجا برای اعمال در بخش خط اصلی.

پس از

ورودی CSS اینجا برای اعمال: بعد از خط اصلی div.

ستون جلو

CSS را در اینجا وارد کنید تا اعمال شود: قبل از ستون مشخص شده div.

عنصر اصلی ستون

CSS را در اینجا وارد کنید تا در ستون div مشخص شده اعمال شود.

ستون بعد

ورودی CSS در اینجا برای اعمال: بعد از ستون div مشخص شده.

دید

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

عملی کردن آموزش

اکنون که همه تنظیمات را بررسی کردیم، اجازه دهید چند مورد را آزمایش کنیم تا به شما نشان دهیم وقتی هر تنظیمات به طور خلاقانه استفاده می شود چه چیزی ممکن است. در این مثال، تنظیمات ردیف تمام صفحه را به عنوان مقدمه پوشش خواهم داد. گزینه ایجاد یک ردیف "تمام صفحه" یکی از متنوع ترین گزینه های مجموعه است. این پهنای خط را تا لبه مرورگر گسترش می‌دهد، شبیه به بخش FullScreen (یا FullWidth). با این حال، برخلاف بخش Fullwidth، ردیف های FullWidth می توانند ساختارهای ستونی داشته باشند و می توانند شامل هر ماژول باشند! در مثال زیر یک ردیف 4 ستونی ایجاد کردم و به هر ستون یک تصویر مربع اضافه کردم. سپس «Make this line full-width» را فعال کردم تا خط را تا لبه‌های پنجره مرورگر گسترش دهم.

طراحی نمونه divi.jpg

سپس اندازه "Gutter" را به "1" کاهش دادم تا فاصله بین ستون های ردیف حذف شود.

حذف فاصله بین ستون ها divi.jpg

در نهایت، با تغییر مقادیر بالا و پایین با گزینه "Custom Padding" به "0" padding بالا و پایین خط را حذف کردم.
تغییر fill.jpg

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