Divi Full Width Menu menu به شما امکان می دهد یک منوی ناوبری را در هر کجای صفحه قرار دهید. این می تواند برای افزودن یک منوی صفحه دوم به صفحه مورد استفاده قرار گیرد ، یا می تواند همراه با ویژگی Blank Page باشد تا ناوبری اصلی شما به پایین صفحه منتقل شود. به عنوان مثال ، می توانید منوی خود را به زیر بخش اول خود منتقل کنید تا افرادی که دارای تصویر راه اندازی بزرگی هستند را در خود جای دهید. این اساساً به ناوبری هدر شما اجازه می دهد تا با استفاده از سازنده در صفحه حرکت کند!

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

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

با استفاده از divi builder

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

ماژول full width module.png

ماژول منوی تمام عرض را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما می توانید کلمه "Fullwith menu" یا "Full-menu" را نیز تایپ کنید (بسته به نسخه شما) و سپس برای جستجو به صورت خودکار و افزودن ماژول menu full width بر روی enter کلیک کنید ! پس از اضافه شدن ماژول ، لیست گزینه های ماژول به شما خوش آمد می گوید. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .

مثال use case: افزودن منوی Fullwidth در زیر هدر صفحه

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

در اینجا یک مثال است:

مثال منوی fullwidth divi.jpg

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

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

ویژگی page.png

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

مثال منو wordpress.jpg

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

منوی full-width زیر عنوان title.jpg را اضافه کنید

تنظیمات منوی Fullwidth را به شرح زیر به روز کنید:

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

منو: [منویی را که باید در ماژول استفاده شود انتخاب کنید] متن: # 333333

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

رنگ متن: نور جهت گیری متن: مرکز منوی قلم: منوی Roboto اندازه قلم: 20px

این همه!

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

نتیجه منو divi.jpg

گزینه های محتوا در منوی Fullwidth

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

fullwidth-menu-section content.png

فهرست

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

رنگ پسزمینه

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

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

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

رنگ پس زمینه منوی موبایل

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

برچسب مدیریت

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

گزینه های طراحی منوی کامل عرض

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

بخش ماژول طراحی module fullwidth.png

منوها را باز کنید

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

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

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

رنگ خط منوی کشویی

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

رنگ متن

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

جهت گیری متن

این نحوه چیدمان متن شما در ماژول را کنترل می کند. می توانید از بین چپ ، راست و مرکز یکی را انتخاب کنید.

رنگ لینک فعال

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

رنگ متن منوی کشویی

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

رنگ متن منو همراه

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

فونت منو

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

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

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

رنگ متن منو

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

فاصله نامه منو

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

ارتفاع خط منو

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

گزینه های پیشرفته منوی پهنای باند

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

ماژول منوی fullwidth بخش پیشرفته divi.png

شناسه CSS

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

کلاس CSS

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

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]

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