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

در این آموزش، نحوه استفاده از سازنده Divi را برای سفارشی سازی به شما نشان خواهم داد وبلاگ شماو به ویژه ناحیه CSS.

این منطقه ای است که من در مورد آن صحبت می کنم:

این بدان معنی است که هر تغییری که ما در اینجا ایجاد کنیم فقط در صفحه ای که ویرایش می کنیم مثر خواهد بود. این یک ویژگی فوق العاده جالب و مفید است!

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

من ابتدا نحوه اعمال رنگ پس زمینه را در منو نشان خواهم داد. سپس به طور جداگانه نحوه تطبیق نمادهای اجتماعی را به شما نشان خواهم داد.

اگر هنوز آموزش ما را مطالعه نکرده اید ارائه موضوع WordPress Divi، من شما را به انجام این کار دعوت می کنم.

بیایید شروع کنیم!

اعمال رنگ به منوها

اول ، من از قالب پیش فرض هدر استفاده می کنم. اگر از قالب دیگری استفاده می کنید ، این آموزش هنوز باید مثر باشد زیرا شناسه عمومی "divs" در Divi ، تا آنجا که من می دانم برای همه قالب ها یکسان است (# header-header). اگر با فرمت های دیگر مشکل دارید.

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

من از rgba (255,255,255,0.6،XNUMX،XNUMX،XNUMX) استفاده می کنم که رنگ پیوند و سفید تیره به عنوان رنگ پیوند فعال خواهد بود (برای جلوه بصری مورد نظر)

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

اکنون CSS زیر را در این جعبه اضافه کنید:

# main-header {background: #474f61؛ }

شما باید چیزی شبیه به این داشته باشید ، فراموش نکنید که کد hex را به هر رنگی که می خواهید تغییر دهید:

کلیک کنید ذخیره و بروزرسانی کنید و این مربوط به منوی اصلی است ، همه در یک خط کد.

حالا فقط باید همین کد را برای همه صفحات خود اضافه کنید و هر بار کد hex را تغییر دهید.

نمادهای شبکه اجتماعی (اختیاری)

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

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

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

برو به " سربرگ و پیمایش> عناصر هدر و کادر را تیک بزنید " نمایش آیکون های اجتماعی '.

آیا به یاد دارید که چگونه ما اضافه کردیم که CSS را در هر صفحه اضافه کنیم؟ ما برمی گردیم و آنچه را که قبلاً نوشتیم ویرایش خواهیم کرد. آنچه را در آنجا دارید با CSS زیر جایگزین کنید ، یا اگر تفاوت دیگری را تشخیص دادید می توانید کد اضافی را اضافه کنید.

# main-header، # top-header .et-social-icon a {background: #474f61؛ }

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

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

عمومی CSS

کد زیر در "شما" خواهد بود گزینه تم> جعبه CSS یا در پرونده سبک موضوع کودک.

# top-header .and-social-icons لی {margin-left: 5px؛ } # top-header .et-social-icon a {padding: 4px؛ حاشیه پایین: 8px؛ عرض: 30px؛ ارتفاع: 30px؛ مرز شعاع: 50٪؛ خط ارتفاع: 24px؛ }

شاید تعجب کنید که چرا در جعبه 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