Divi به شما امکان می دهد اسلایدرها را در بخشهای عرض کامل قرار دهید ، و باعث می شود لغزنده های شما از عرض کامل مرورگر باز شوند. اسلایدرهای Divi (اسلایدر) از زمینه های اختلاف منظر و همچنین زمینه های ویدیویی پشتیبانی می کنند!

چگونه یک ماژول Diapo تمام عرضی را از Divi اضافه کنیم

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

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

ماژول کشویی تمام عرض را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست حالت های قابل جستجو است ، به این معنی که شما همچنین می توانید کلمه "اسلاید" را تایپ کنید و سپس بر روی Enter کلیک کنید تا به صورت خودکار ماژول کشویی تمام عرض را پیدا کرده و اضافه کنید! پس از اضافه شدن ماژول ، لیست گزینه های ماژول به شما خوش آمد می گوید. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .

از مثال مورد استفاده کنید: افزودن یک قسمت قهرمان لغزنده تمام پهنا به صفحه اصلی خود

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

برای این مثال ، من یک اسلاید تمام عرض را اضافه می کنم تا به عنوان بخش اصلی در یک صفحه اصلی عمل کند.

با استفاده از Visual Builder ، یک بخش Fullwidth در بالای صفحه وب خود اضافه کنید. سپس ماژول Fullwidth Slider را در قسمت جدید خود وارد کنید. در زبانه محتوا از تنظیمات اسلاید تمام عرض ، کلیک کنید + مورد جدیدی اضافه کنید برای ایجاد اولین اسلاید خود

در تنظیمات اسلاید اولین اسلاید خود گزینه های زیر را به روز کنید:

گزینه های محتوا

En-سر : [عنوان اسلاید را وارد کنید]
متن دکمه : [متن دکمه را وارد کنید]
محتویات : [محتوای متن اسلاید را وارد کنید
URL دکمه : [URL مقصد دکمه اسلاید را وارد کنید]
تصویر پس زمینه : [تصویری را وارد کنید که به عنوان پس زمینه اسلاید عمل کند]

گزینه های طراحی

از روکش زمینه استفاده کنید : بله
رنگ همپوشانی پس زمینه rgba:

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

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

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

گزینه های محتوای کامل را اسلاید کنید

در برگه محتوا ، تمام عناصر محتوای ماژول ، مانند متن ، تصاویر و آیکون ها را پیدا خواهید کرد. همه اینها را کنترل می کند چی به نظر می رسد که در ماژول شما همیشه در این برگه یافت می شود.

فلش

انتخاب کنید آیا می خواهید فلش های ناوبری چپ و راست را نشان دهید.

کنترل

انتخاب کنید که آیا دکمه های دایره ای / اسلاید در پایین نشانگر نمایش داده شود یا خیر.

برچسب سرپرست

این برچسب ماژول را در سازنده تغییر می دهد تا به راحتی شناسایی شود. وقتی از نمای WireFrame در Visual Builder استفاده می کنید ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.

گزینه های طراحی ماژول اسلاید

در زبانه Design ، تمام گزینه های یک ظاهر طراحی شده ماژول ، مانند قلم ها ، رنگ ها ، اندازه و فاصله را پیدا خواهید کرد. این برگه ای است که برای تغییر ظاهر ماژول خود استفاده خواهید کرد. هر ماژول Divi دارای یک لیست طولانی از تنظیمات طراحی است که می توانید برای تغییر هر چیزی از آنها استفاده کنید.

سایه داخلی را بردارید

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

اثر اختلاف منظر

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

قلم سربرگ

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن سرآیند خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، مورب ، حروف بزرگ و زیر خط تنظیم کنید.

اندازه قلم هدر

در اینجا می توانید اندازه متن سرآیند خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

سرصفحه متن

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن هدر خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر را از انتخابگر رنگ انتخاب کنید.

فاصله حروف سربرگ

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن سرآیند خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلف پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

سر ردیف ارتفاع

ارتفاع ردیف بر فضای بین هر ردیف از متن سرآیند شما تأثیر می گذارد. اگر می خواهید فضای بین هر ردیف را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را وارد کنید قسمت ورودی در سمت راست مکان نما. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

پلیس بدن

می توانید با انتخاب قلم مورد نظر از منوی کشویی ، قلم بدن خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های درشت ، حروف بزرگ ، حروف بزرگ و زیر خط تنظیم کنید.

اندازه فونت بدن

در اینجا می توانید اندازه متن بدن خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی سمت راست نوار لغزنده وارد کنید. فیلدهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

متن متن بدن

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر را از انتخاب کننده رنگ انتخاب کنید.

فاصله نامه های بدن

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط بدن

ارتفاع خط بر فضای بین هر خط متن در بدن شما تأثیر می گذارد اگر می خواهید فضای بین هر خط را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی وارد کنید واقع در سمت راست مکان نما. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

بالشتک بالایی

این پارامتر فضای داخلی بین بالای ماژول و محتوای متن در ماژول را کنترل می کند. اگر می خواهید این فضا را کم یا زیاد کنید ، مقدار مورد نظر خود را اینجا وارد کنید. به عنوان مثال ، برای کاهش فضا و اندازه کلی مکان نما ، می توانید مقدار 100px را وارد کنید. برای پویاتر نشان دادن ارتفاع می توانید مقداری از درصد را وارد کنید ، به عنوان مثال 10٪.

بالشتک پایین

این پارامتر فضای داخلی بین پایین ماژول و محتوای متن را در ماژول کنترل می کند. اگر می خواهید این فضا را کم یا زیاد کنید ، مقدار مورد نظر خود را اینجا وارد کنید. به عنوان مثال ، برای کاهش فضا و اندازه کلی مکان نما ، می توانید مقدار 100px را وارد کنید. برای پویاتر نشان دادن ارتفاع می توانید مقدار درصدی مانند 10٪ را نیز وارد کنید.

از دکمه های سبک سفارشی استفاده کنید

با فعال کردن این گزینه ، تنظیمات مختلف سفارشی سازی دکمه نشان داده می شود که می توانید برای تغییر ظاهر دکمه ماژول خود استفاده کنید.

اندازه متن دکمه

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

رنگ متن دکمه

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

رنگ پس زمینه دکمه

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

عرض حاشیه دکمه

همه دکمه های Divi به طور پیش فرض حاشیه 2px دارند. با استفاده از این تنظیم می توان این مرز را کم یا زیاد کرد. با وارد کردن مقدار 0 می توان مرزها را حذف کرد.

رنگ مرز دکمه

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

شعاع مرزی دکمه

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

فاصله حروف دکمه

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن دکمه خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

قلم دکمه

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن دکمه خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، مورب ، حروف بزرگ و زیر خط تنظیم کنید.

نماد دکمه را اضافه کنید

غیرفعال است ، این تنظیم نمادها را از دکمه شما پاک می کند. به طور پیش فرض ، تمام دکمه های Divi یک نماد پیکان را روی شناور نشان می دهند.

نماد دکمه

اگر نمادها فعال هستند ، می توانید با استفاده از این تنظیم نماد را در دکمه خود استفاده کنید. Divi آیکون های مختلفی برای انتخاب دارد.

دکمه نماد رنگی

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

دکمه قرار دادن آیکون

می توانید نماد دکمه خود را در سمت چپ یا راست دکمه خود نمایش دهید.

نمایش نماد فقط هنگام قرار گرفتن روی دکمه

به طور پیش فرض ، نمادهای دکمه فقط هنگام شناور نشان داده می شوند. اگر می خواهید نماد همیشه نشان داده شود ، این تنظیم را خاموش کنید.

رنگ متن رنگ دکمه را پیمایش کنید

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

رنگ پس زمینه دکمه شناور

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

دکمه مرز رنگ شناور

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

دکمه شعاع مرز را شناور کنید

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

دکمه فاصله یادداشت را فشار دهید

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

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

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

شناسه CSS

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

کلاس CSS

کلاسهای CSS اختیاری را برای استفاده برای این ماژول وارد کنید. برای ایجاد یک سبک CSS سفارشی می توان از کلاس CSS استفاده کرد. می توانید چندین کلاس را که با فاصله از هم جدا شده اند ، اضافه کنید. با استفاده از گزینه های طرح زمینه Divi یا تنظیمات موجود در صفحه Divi Builder می توانید از این کلاسها در طرح زمینه Divi child یا سبک CSS سفارشی که به صفحه خود اضافه می کنید یا به وب سایت خود استفاده کنید.

CSS سفارشی

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

انیمیشن اتوماتیک

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

سرعت انیمیشن خودکار (بر حسب میلی ثانیه)

در اینجا می توانید نشان دهید که نشانگر با چه سرعت بین هر اسلاید محو می شود ، اگر گزینه "تحریک خودکار" در بالا فعال باشد. هرچه عدد بیشتر باشد ، مکث بین هر چرخش بیشتر است.

ادامه اسلاید خودکار در شناور

روشن کردن این باعث می شود که اسلاید خودکار برای ادامه حرکت روی ماوس ادامه یابد.

مخفی کردن محتوا در تلفن همراه

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

مخفی کردن CTA در تلفن همراه

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

مشاهده تصویر / فیلم در تلفن همراه

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

دید

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

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

عنوان

متن عنوان مکان نما را در اینجا تنظیم کنید.

متن دکمه

اگر می خواهید دکمه ای زیر محتوای اسلاید خود نمایش دهید ، متن دکمه را اینجا وارد کنید. اگر نمی خواهید دکمه ای نمایش داده شود این قسمت را خالی بگذارید.

محتویات

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

URL دکمه

اگر دکمه ای را نمایش می دهید ، یک URL وب معتبر را در این قسمت وارد کنید تا لینک مقصد تنظیم شود.

تصویر را بکشید

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

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

اسلاید فیلم

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

مکث ویدیو

اجازه دهید ویدیوها هنگام شروع پخش توسط سایر مکث ها مکث شود

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

در صورت تنظیم ، این تصویر به عنوان پس زمینه این ماژول استفاده می شود. برای حذف تصویر پس زمینه ، فقط URL را از قسمت تنظیمات حذف کنید.

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

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

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

به طور پیش فرض ، تصاویر پس زمینه در مرکز اسلاید نمایش داده می شوند. می توانید از این تنظیمات برای تغییر مکان در بالا ، پایین ، چپ ، راست یا هر یک از چهار گوشه اسلاید استفاده کنید.

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

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

رنگ پسزمینه

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

فیلم پس زمینه MP4

برای اطمینان از حداکثر سازگاری در همه مرورگرها ، همه فیلم ها باید در هر دو قالب .MP4 .WEBM بارگیری شوند. نسخه .MP4 را از اینجا بارگیری کنید. نکته مهم: پس زمینه های ویدئویی در دستگاه های تلفن همراه غیرفعال هستند. درعوض ، از تصویر bkacground شما استفاده خواهد شد. به همین دلیل ، برای اطمینان از نتایج بهتر ، باید هم یک تصویر پس زمینه و هم یک فیلم پس زمینه تنظیم کنید.

فیلم پس زمینه WEBM

برای اطمینان از حداکثر سازگاری در همه مرورگرها ، همه فیلم ها باید در هر دو قالب .MP4 .WEBM بارگیری شوند. نسخه های .WEBM را از اینجا بارگیری کنید. نکته مهم: پس زمینه های ویدئویی در دستگاه های تلفن همراه غیرفعال هستند. درعوض ، از تصویر bkacground شما استفاده خواهد شد. به همین دلیل ، برای اطمینان از نتایج بهتر ، باید هم یک تصویر پس زمینه و هم یک فیلم پس زمینه تنظیم کنید.

عرض فیلم پس زمینه

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

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

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

گزینه های طراحی عناصر اسلاید

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

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

رنگ پس زمینه

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

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

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

رنگ پوشش متن

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

شعاع مرز شعاعی متن

شعاع حاشیه بر گرد بودن گوشه های ناحیه همپوشانی متن تأثیر می گذارد. به طور پیش فرض ، گوشه ها دارای لبه کمی گرد 3 پیکسلی هستند. برای ایجاد یک جعبه مستطیل شکل می توانید این مقدار را به 0 کاهش دهید یا برای گردتر شدن گوشه ها مقدار آن را افزایش دهید.

فلش های رنگی سفارشی

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

رنگ سفارشی Dot Nav

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

تراز عمودی تصویر اسلاید

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

رنگ متن

اگر پس زمینه اسلاید شما تاریک است ، رنگ متن باید روی "Light" تنظیم شود. در مقابل ، اگر پس زمینه اسلاید کم رنگ باشد ، رنگ متن باید روی "تیره" تنظیم شود.

قلم هدر

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن سرآیند خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، مورب ، حروف بزرگ و زیر خط تنظیم کنید.

اندازه قلم هدر

در اینجا می توانید اندازه متن سرآیند خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

سرصفحه متن

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن هدر خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر را از انتخابگر رنگ انتخاب کنید.

فاصله حروف سربرگ

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن سرآیند خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلف پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

سر ردیف ارتفاع

ارتفاع ردیف بر فضای بین هر ردیف از متن سرآیند شما تأثیر می گذارد. اگر می خواهید فضای بین هر ردیف را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را وارد کنید قسمت ورودی در سمت راست مکان نما. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

فونت بدن

می توانید با انتخاب قلم مورد نظر از منوی کشویی ، قلم بدن خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های درشت ، حروف بزرگ ، حروف بزرگ و زیر خط تنظیم کنید.

اندازه فونت بدن

در اینجا می توانید اندازه متن بدن خود را تنظیم کنید. می توانید نوار لغزنده محدوده را بکشید تا اندازه متن خود را کم یا زیاد کنید یا مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی سمت راست نوار لغزنده وارد کنید. فیلدهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

متن متن بدن

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر را از انتخاب کننده رنگ انتخاب کنید.

فاصله نامه های بدن

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط بدن

ارتفاع خط بر فضای بین هر خط متن در بدن شما تأثیر می گذارد اگر می خواهید فضای بین هر خط را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی وارد کنید واقع در سمت راست مکان نما. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

از دکمه های سبک سفارشی استفاده کنید

با فعال کردن این گزینه ، تنظیمات مختلف سفارشی سازی دکمه نشان داده می شود که می توانید برای تغییر ظاهر دکمه ماژول خود استفاده کنید.

اندازه متن دکمه

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

رنگ متن دکمه

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

رنگ پس زمینه دکمه

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

دکمه پهنای باند

همه دکمه های Divi به طور پیش فرض حاشیه 2px دارند. با استفاده از این تنظیم می توان این مرز را کم یا زیاد کرد. با وارد کردن مقدار 0 می توان مرزها را حذف کرد.

رنگ مرز دکمه

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

شعاع مرزی دکمه

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

فاصله حروف دکمه

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف را در متن دکمه خود افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای اندازه گیری مختلفی پشتیبانی می کنند ، به این معنی که شما می توانید بسته به مقدار اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

قلم دکمه

با انتخاب قلم مورد نظر از منوی کشویی می توانید قلم متن دکمه خود را تغییر دهید. Divi دارای ده ها فونت عالی است که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، مورب ، حروف بزرگ و زیر خط تنظیم کنید.

نماد دکمه را اضافه کنید

غیرفعال است ، این تنظیم نمادها را از دکمه شما پاک می کند. به طور پیش فرض ، تمام دکمه های Divi یک نماد پیکان را روی شناور نشان می دهند.

نماد دکمه

اگر نمادها فعال هستند ، می توانید با استفاده از این تنظیم نماد را در دکمه خود استفاده کنید. Divi آیکون های مختلفی برای انتخاب دارد.

دکمه نماد رنگی

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

دکمه قرار دادن آیکون

می توانید نماد دکمه خود را در سمت چپ یا راست دکمه خود نمایش دهید.

نمایش نماد فقط هنگام قرار گرفتن روی دکمه

به طور پیش فرض ، نمادهای دکمه فقط هنگام شناور نشان داده می شوند. اگر می خواهید نماد همیشه نشان داده شود ، این تنظیم را خاموش کنید.

رنگ متن رنگ دکمه را پیمایش کنید

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

رنگ پس زمینه دکمه شناور

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

دکمه مرز رنگ شناور

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

دکمه شعاع مرز را شناور کنید

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

دکمه فاصله یادداشت را فشار دهید

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

گزینه های مکان نما پیشرفته Fullwidth

CSS سفارشی

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

متن تصویر جایگزین

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

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]دانلود تم DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” =_font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NAD”]DOW قالب DIVI[/vcex_button][/vc_column][/vc_row]

سایر آموزشهای دوگانه

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• چگونه برای اضافه کردن متن در محصول Divi WooCommerce
• چگونه می توان رنگ منو را بین صفحات Divi تغییر داد
• نحوه شخصی سازی شبکه های یک وبلاگ با Divi
• نحوه استفاده از ویرایشگر نقش دووی در وردپرس
• نحوه ایجاد یک نوار لغزنده تمام صفحه Divi
• چگونگی تغییر رنگ منوها بین صفحات Divi
• ویژگی هایی که احتمالاً در مورد Divi نمی دانید
• نحوه استفاده از Divi Builder در وردپرس
• نحوه استفاده از ماژول پیمایش ویدئو Divi
• نحوه استفاده از ماژول Flip Builder Divi
• نحوه اضافه کردن ماژول توصیفی در Divi Builder
• نحوه استفاده از ماژول متن دووی
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر Divi
• نحوه استفاده از ماوی رسانه اجتماعی Divi
• نحوه استفاده از ماژول فروشگاه با موضوع WordPress Divi
• نحوه استفاده از ماوی نوار کناری Divi
• نحوه استفاده از ماژول جدول قیمت دووی
• چگونه از عنوان ماژول نشریات دووی استفاده کنیم
• نحوه اضافه کردن ماژول ویدیویی از دیوی
• نحوه استفاده از ماژول ناوبری مقاله
• چگونه از ماوی جستجوی Divi استفاده کنیم
• چگونه از ماژول کیف پول Divi استفاده کنیم
• نحوه استفاده از ماژول شخص در Divi Builder
• نحوه استفاده از ماژول کیف پول با فیلتر Divi
• نحوه استفاده از ماژول کشویی عرض کامل
• نحوه استفاده از ماژول Image Divid Builder
• نحوه استفاده از ماژول ناوبری تمام عرض Divi Builder
• نحوه استفاده از ماژول گالری تصاویر
• نحوه استفاده از ماوی کارت Width Divi Builder
• نحوه استفاده از ماژول Portfolio Full Width Divi
• نحوه استفاده از ماژول هدر تمام عیار Divi
• چگونه از ماوی شمارنده Divi استفاده کنیم
• نحوه استفاده از نوار لغزنده مقالات در Divi Builder
• نحوه استفاده از ماژول Divi ایمیل Optin