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

چگونه یک ماژول ویجت Zonde از Divi اضافه کنیم

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

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

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

مثال استفاده از حالت: افزودن یک نوار کناری به صفحه وبلاگ شما

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

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

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

ابتدا باید مطمئن شوید که ابزارک ها را در صفحه ابزارکهای داشبورد وردپرس خود تنظیم کرده اید. برای این مثال ، من ابزارک Search و ابزار اخیر Recent Article را به ابزارک Sidebar اضافه می کنم.

سپس Visual Builder را برای ویرایش صفحه وبلاگ مستقر کنید. بخش خاصی را به صفحه خود اضافه کنید (درست زیر سربرگ) با طرح زیر:

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

دیگری (در سمت راست) دکمه "درج ردیف" را دارد. منطقه "ماژول درج" نوار کناری عمودی شما را نشان می دهد. اینجاست که وارد ماژول نوار کناری می شوید. می توانید به تعداد واحد ماژول در اینجا ، در یک ردیف اضافه کنید ، و آنها به عرض عمودی بخش ، مجاور ساختار ستونی که در کنار آن می سازید ، باز می شوند. در حقیقت ، برای این مثال ، صفحه وبلاگ از قبل دارای یک ماژول Email Optin و یک ماژول Person در آن قسمت از نوار کناری عمودی طرح Speciality است.

حالا ماژول نوار کناری را به قسمت بالای ماژول های موجود در منطقه نوار کناری عمودی خود اضافه کنید.

در تنظیمات Sidebar Module موارد زیر را به روز کنید:

برگه محتوا

منطقه ابزارک: نوار کناری را انتخاب کنید

برگه طراحی

جهت گیری: درست (زیرا نوار کناری در سمت راست است)
جدا کننده مرز: YES
رنگ متن:
اندازه قلم هدر تیره: 26 پیکسل
فاصله حروف
سربرگ: 3 پیکسل ارتفاع ردیف هدر: 1.1em

برگه پیشرفته

در بخش Custom CSS ، CSS زیر را به جعبه متن Widget اضافه کنید. این امر باعث می شود طراحی ابزارک های نوار کناری با طراحی سایت مطابقت داشته باشد:

پس زمینه: #fff؛ padding: 20px؛ -webkit-box-shadow: 0 1px 5px rgba (0، 0، 0، 0.1) -moz-box-shadow: 0 1px 5px rgba (0، 0، 0، 0.1)؛ جعبه سایه: 0 1px 5px rgba (0، 0، 0، 0.1)؛

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

اکنون می توانید ببینید که ماژول نوار کناری عناصر عنصر Sidebar (جستجوی و مقالات اخیر) را نشان می دهد و آنها را در قسمت نوار کناری عمودی بخش تخصص شما نشان می دهد.

گزینه های محتوا برای نوار کناری

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

منطقه ویجت

ماژول Sidebar از مناطق ایجاد ابزارک استفاده می کند که می توانید در برگه Appearances> Widgets ایجاد کنید. از این فهرست کشویی می توانید یکی از مناطق ویجت سفارشی خود را انتخاب کنید.

برچسب مدیریت

این برچسب ماژول را در سازنده تغییر می دهد تا به راحتی شناسایی شود. وقتی از نمای 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" را وارد کنید تا نوع واحد آن تغییر کند.

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

در برگه پیشرفته ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی 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 را که با نقطه ویرگول جدا شده اند وارد کنید.

دید

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

[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