چگونه می توان عنوان و شعار سایت پویا را به یک هدر دیوی جهانی اضافه کرد

تعادل بلر Jersyer | DIVI

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

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

نتیجه احتمالی

در اینجا پیش نمایش طرحی که در این آموزش خواهیم ساخت وجود دارد.

به عنوان سایت و برچسب در وسط بالای هدر که به صورت پویا نمایش داده می شود توجه کنید.

دانلود رایگان

به Divi Newlsetter بپیوندید و ما یک کپی از بسته بندی صفحه Ultimate Divi Landing Page همراه با تعداد زیادی از منابع ، نکته ها و ترفندهای رایگان و شگفت انگیز Divi را برای شما ایمیل خواهیم کرد. آن را دنبال کنید و در کمترین زمان استاد Divi خواهید شد. اگر قبلاً مشترک شده اید ، کافیست آدرس ایمیل خود را در زیر وارد کنید و برای دسترسی به بسته بندی طرح ، روی بارگیری کلیک کنید.دانلود

برای وارد کردن الگو ، به Divi> Theme generator بروید.

روی نماد قابل حمل در سمت راست بالای صفحه کلیک کنید.

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

سپس بر روی دکمه واردات کلیک کنید.

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

در ادامه می خواهیم به طرح بپردازیم.

عنوان سایت و شعار در وردپرس

هر سایت وردپرسی دارای عنوان سایت و یک عنوان می باشد. عنوان سایت در اصل نام سایت است و tagline یک عبارت کوتاه است که معمولاً توضیح می دهد که چیست.

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

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

با رفتن به داشبورد وردپرس و رفتن به تنظیمات> عمومی می توانید هر زمان بخواهید عنوان سایت و برچسب را در وردپرس پیدا و به روز کنید.

یا می توانید مسیر دیگری را با استفاده از تنظیم کننده تم برای به روزرسانی عنوان سایت تحت تنظیمات کلی طی کنید.

اکنون که می دانیم عنوان و شعار سایت در باطن WordPress کجاست ، بیایید کشف کنیم که چگونه می توانیم آنها را به یک هدر Divi اضافه کنیم!

چگونه می توان عنوان و شعار سایت پویا را به عنوان جهانی در Divi اضافه کرد

وارد کردن الگوی سرآیند جهانی از قبل طراحی شده

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

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

سپس به بخش Divi> Theme Builder بروید.

روی نماد قابلیت حمل در بالا سمت راست کلیک کنید. در پنجره بازشو قابل حمل ، پرونده JSON الگوی پیش فرض وب سایت را انتخاب کنید و روی دکمه Import کلیک کنید.

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

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

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

انتقال آرم

برای شروع ، ماژول تصویری را که آرم (به صورت پویا) از ستون وسط ردیف بالا به ستون سمت چپ ردیف بالا نشان می دهد ، بکشید.

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

سپس یک ماژول Call to Action جدید به ستون وسط ردیف بالا (جایی که آرم بود) اضافه کنید.

ما از ماژول Call to Action برای نمایش عنوان سایت و عنوان استفاده خواهیم کرد.

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

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

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

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

سپس ، موس را روی قسمت بدن قرار دهید و نماد "استفاده از محتوای پویا" را انتخاب کنید. سپس "Site Tagline" را از لیست انتخاب کنید.

پیوند صفحه اصلی پویا اضافه کنید

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

طراحی متن متن و شعار سایت

اکنون عنوان سایت و برچسب سایت به صورت پویا روی سربرگ نمایش داده می شود. تنها کاری که اکنون باید انجام دهیم این است که یک ظاهر طراحی شده اضافه کنیم. به یاد داشته باشید برای طراحی عنوان سایت باید متن عنوان را سفارشی کنیم.

به برگه طراحی بروید و موارد زیر را به روز کنید:

• قلم عنوان: Heebo
• عنوان وزن قلم: پررنگ
• عنوان سبک قلم: TT
• اندازه متن متن: 32px (دسک تاپ) ، 24 پیکسل (رایانه لوحی و تلفن)
• فاصله نامه نامه: 0.3em
• قلم بدنه: Roboto
• سبک قلم بدنه: italic
• رنگ متن بدن:
• اندازه متن بدن: 13px
• فاصله نامه نامه بدن: 0.1em
• ارتفاع خط بدنه: 1em

برای کمک به مرکز سازی ، با افزودن CSS سفارشی زیر به توضیحات تبلیغاتی ، قسمت زیرین پیش فرض را در زیر متن بدست آورید:

padding-bottom: 0px

تنظیمات اضافی طراحی

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

به طور عمودی ستونها / محتوا را محور کنید

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

تراز وسایل: مرکز؛

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

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

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

سپس تنظیمات ماژول دکمه را باز کرده و پس زمینه را با یک شیب زمینه جدید به شرح زیر به روز کنید:

• پس زمینه شیب رنگ سمت چپ: #ffffff
• رنگ شیب پس زمینه سمت راست: # 1dbf73
• جهت گرادیان: 135deg
• موقعیت شروع: 10٪
• موقعیت نهایی: 0٪

اضافه کردن شخصیت های قبل و بعد از آن به شعار

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

نتیجه نهایی

برای دیدن نتیجه ، هر صفحه ای را در سایت خود باز کنید. شما باید عنوان سایت و برچسب ها را به زیبایی نمایش دهید!

آخرین افکار

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

منبع: تم زیبا

نحوه ایجاد یک انتقال بدون درز با جلوه های پیمایش بر روی دیوی

تعادل بلر Jersyer | DIVI

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

در این آموزش ، ما به شما نشان خواهیم داد که چگونه با جلوه های پیمایشی Divi خلاقیت ایجاد کرده و یک انتقال خدمات یکپارچه ایجاد کنید. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید!

برویم.

نتیجه احتمالی

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

1 ، ساختار عناصر را از نو بسازید

بخش شماره 1 را اضافه کنید

فاصله

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

• بالشتک بالایی: 80 پیکسل (دسک تاپ و رایانه لوحی) ، 0px (تلفن)
• بالشتک پایین: 80px

یک خط جدید اضافه کنید

ساختار ستون

با استفاده از ساختار ستون زیر ، اضافه کردن یک ردیف جدید:

اندازه

بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و تغییرات زیر را در پارامترهای بعدی اعمال کنید:

• از عرض روده ای سفارشی استفاده کنید: بله
• عرض روده: 1
• عرض: 90٪
• حداکثر عرض: 1580px

فاصله

سپس یک حاشیه بالا و پایین سفارشی اضافه کنید.

• حاشیه بالایی: 200px
• حاشیه پایین: 200px

ماژول متن را به ستون 1 اضافه کنید

محتوای H2 را اضافه کنید

وقت آن است که با اضافه کردن یک ماژول متن در ستون 1. ماژول ها را اضافه کنید ، محتوای H2 مورد نظر خود را وارد کنید.

تنظیمات متن H2

به برگه طراحی ماژول بروید و تنظیمات متن H2 را به صورت زیر تغییر دهید:

• عنوان 2 پلیس: فصلنامه
• هدر 2 اندازه متن: 80px (دسک تاپ) ، 50 پیکسل (تبلت) ، 40 پیکسل (تلفن)
• ارتفاع خط 2 از سر: 1.2em

فاصله

سپس حاشیه پایینتری را در تبلت و تلفن اضافه کنید.

• حاشیه پایین: 50 پیکسل (فقط رایانه لوحی و تلفن)

ماژول متن را به ستون 2 اضافه کنید

اضافه کردن محتوا

بیایید به ستون دوم برویم. در آنجا اولین ماژول مورد نیاز ما یک ماژول متنی با مقداری محتوای توصیف است.

تنظیمات متن

به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:

• فونت متن: کابین
• سبک فونت متن: حروف بزرگ
• رنگ متن: # 000000
• اندازه متن: 18px (دسک تاپ) ، 15px (رایانه لوحی) ، 13px (تلفن)
• فاصله نامه متن: 3px (دسک تاپ) ، 1px (رایانه لوحی و تلفن)
• ارتفاع خط متن: 3em

ماژول جداسازی را به ستون 2 اضافه کنید

دید

ماژول بعدی و نهایی که در این ستون نیاز داریم ، ماژول جداسازی است. مطمئن شوید که گزینه "Show Separator" فعال باشد.

• جداکننده را نشان دهید: بله

خط

سپس رنگ خط ماژول را تغییر دهید.

• رنگ خط: # 000000

اندازه

سپس برخی از پارامترهای اندازه را تغییر دهید.

• وزن تقسیم: 3px
• عرض: 28٪

فاصله

ما همچنین حاشیه برتر اضافه می کنیم.

• حاشیه بالایی: 10px

بخش شماره 2 را اضافه کنید

فاصله

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

• بالشتک بالایی: 0px

سرریزهای

همچنین سرریزها را نیز مخفی کنید.

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

یک خط جدید اضافه کنید

ساختار ستون

اضافه کردن یک ردیف اول با استفاده از ساختار ستون زیر:

اندازه

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

• از عرض روده ای سفارشی استفاده کنید: بله
• عرض روده: 1
• برابری ارتفاعات ستون: بله
• عرض: 90٪
• حداکثر عرض: 1580px

فاصله

سپس تمام بالشتک های پیش فرض بالایی و پایین را حذف کنید.

• بالشتک بالایی: 0px
• بالشتک پایین: 0px

تنظیمات ستون 1

رنگ پس زمینه

سپس تنظیمات ستون 1 را باز کرده و رنگ پس زمینه را تغییر دهید.

• رنگ زمینه: # f7f7f7

فاصله

تنظیمات ستون را با افزودن مقادیر padding سفارشی در اندازه های مختلف صفحه کامل کنید.

• بالشتک بالایی: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)
• بالشتک پایین: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)
• بالشتک چپ: 8٪
• بالشتک راست: 8٪

تنظیمات ستون 2

فاصله

ادامه کار را با باز کردن تنظیمات در ستون 2 ادامه دهید. به برگه پیشرفته بروید و مقادیر padding سفارشی را در اندازه های مختلف صفحه اضافه کنید.

• بالشتک بالایی: 100 پیکسل (دسک تاپ) ، 50 پیکسل (رایانه لوحی و تلفن)
• بالشتک پایین: 200px
• بالشتک سمت چپ: 150 پیکسل (میز) ، 0 عدد (تبلت و تلفن)

ماژول جداسازی را به ستون 1 اضافه کنید

دید

در ستون اول ، اولین ماژول مورد نیاز ما یک ماژول جداسازی است. مطمئن شوید که گزینه "Show Separator" فعال باشد.

• جداکننده را نشان دهید: بله

خط

سپس رنگ خط ماژول را تغییر دهید.

• رنگ خط: # 000000

اندازه

همچنین در پارامترهای اندازه تغییراتی ایجاد کنید.

• وزن تقسیم: 3px
• عرض: 50٪

ماژول متن را به ستون 1 اضافه کنید

محتوای H3 را اضافه کنید

ماژول بعدی که در ستون 1 به آن نیاز داریم یک ماژول متنی با محتوای H3 است.

تنظیمات متن H3

به برگه طراحی ماژول بروید و تنظیمات متن H3 را تغییر دهید:

• عنوان 3 پلیس: فصلنامه
• رنگ متن مورد 3: # 000000
• مورد 3 اندازه متن: 50 پیکسل (دسک تاپ) ، 40 پیکسل (تبلت) ، 35 پیکسل (تلفن)
• ارتفاع خط 3 از سر: 1.1em

ماژول متن را به ستون 2 اضافه کنید

اضافه کردن محتوا

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

تنظیمات متن

تنظیمات متن ماژول را به شرح زیر تغییر دهید:

• فونت متن: کابین
• سبک فونت متن: حروف بزرگ
• اندازه متن: 18px (دسک تاپ) ، 15px (رایانه لوحی) ، 13px (تلفن)
• فاصله نامه متن: 3px (دسک تاپ) ، 1px (رایانه لوحی و تلفن)
• ارتفاع خط متن: 3em

ماژول دکمه را به ستون 2 اضافه کنید

یک کپی اضافه کنید

آخرین و آخرین ماژول مورد نیاز ماژول دکمه است. نسخه ای از انتخاب خود را وارد کنید.

تنظیمات دکمه

سپس دکمه را سبک کنید.

• از دکمه های سفارشی برای دکمه استفاده کنید: بله
• اندازه متن دکمه: 20 پیکسل
• رنگ متن دکمه: #ffffff
• رنگ پس زمینه دکمه: # 000000
• عرض مرز دکمه: 0px

• قلم دکمه: فصلنامه
• وزن قلم دکمه: جسورانه

فاصله

همچنین بالشتک سفارشی را اضافه کنید.

• بالشتک بالایی: 50px
• بالشتک پایین: 50px
• لبه چپ: 100px
• بالشتک راست: 100 پیکسل

موقعیت

و دکمه را بر این اساس مجدداً تغییر دهید:

• مقام: مطلق
• محل سکونت: پایین سمت چپ

هر بار که لازم باشد خط را کلون کنید

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

همه مطالب را تغییر دهید

حتماً تمام مطالب را به صورت خطوط تکراری ویرایش کنید.

2. از جلوه های پیمایش استفاده کنید

جلوه های پیمایش ردیف اول

حرکت افقی

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

• حرکت افقی را فعال کنید: بله
• شروع افست: -5
• متوسط ​​افست: 0 (با 26٪)
• پایان افست: 0
• اثر حرکت ماشه: وسط عنصر

محو و داخل می شوند

همچنین از یک اثر محو شدن ورودی و خروجی استفاده کنید.

• محو شدن درون و بیرون را فعال کنید: بله
• کدورت اولیه: 100٪
• کدورت متوسط: 100٪ (با 50٪)
• کدورت پایان: 0٪ (تا 53٪)
• اثر حرکت ماشه: وسط عنصر

جلوه های پیمایش ردیف میانه

حرکت عمودی

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

• حرکت عمودی را فعال کنید: بله
• شروع افست: -4
• متوسط ​​افست: 0 (با 26٪)
• پایان افست: 0
• اثر محرک حرکت: وسط عنصر

محو و داخل می شوند

همچنین یک اثر محو شدن داخل و خارج را فعال کنید.

• محو شدن درون و بیرون را فعال کنید: بله
• کدورت اولیه: 0٪
• کدورت متوسط: 100٪ (از 27٪ تا 50٪)
• افست پایان: 0 (با 53٪)
• اثر حرکت ماشه: وسط عنصر

جلوه های پیمایش خط آخر

حرکت عمودی

سپس آخرین خط بخش را باز کرده و حرکت عمودی زیر را اضافه کنید:

• حرکت عمودی را فعال کنید: بله
• شروع افست: -4
• متوسط ​​افست: 0 (با 26٪)
• پایان افست: 0
• اثر حرکت ماشه: وسط عنصر

محو و داخل می شوند

با یک اثر محو شدن ورودی و خروجی و تمام می شوید!

• محو شدن درون و بیرون را فعال کنید: بله
• کدورت اولیه: 0٪
• کدورت متوسط: 100٪ (از 27٪ تا 50٪)
• کدورت پایان: 100٪ (تا 53٪)
• اثر حرکت ماشه: وسط عنصر

نتیجه نهایی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

آخرین افکار

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

نحوه ایجاد چرخ فلک پیمایشی یکی از اعضای تیم با Divi

تعادل بلر Jersyer | DIVI

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

تظاهرات

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

آغاز مفهوم

یک بخش جدید اضافه کنید

فاصله

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

• بالشتک بالایی: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)
• بالشتک پایین: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)

سرریزهای

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

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

خط شماره 1 را اضافه کنید

ساختار ستون

با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:

اندازه

بدون افزودن ماژول ، تنظیمات ردیف را باز کنید ، به برگه طراحی بروید و عرض و حداکثر عرض را در تنظیمات اندازه تغییر دهید.

• عرض: 90٪
• حداکثر عرض: 1580px

فاصله

ما همچنین بالشتک های سفارشی بالایی و پایینی را اضافه می کنیم

• بالشتک بالایی: 100px
• بالشتک پایین: 100px

ماژول متن را به ستون اضافه کنید

محتوای H2 را اضافه کنید

وقت آن است که با اولین ماژول متن ، ماژول ها را اضافه کنیم. محتوای H2 مورد نظر خود را وارد کنید.

تنظیمات متن H2

به برگه طراحی ماژول بروید و تنظیمات متن H2 را به صورت زیر تغییر دهید:

• عنوان قلم 2: Quicksand
• عنوان قلم 2: نیمه پررنگ
• رنگ متن مورد 2: # 000000
• هدر 2 اندازه متن: 70px (دسک تاپ) ، 50 پیکسل (تبلت) ، 40 پیکسل (تلفن)

ماژول جداسازی را به ستون اضافه کنید

دید

سپس یک ماژول جداسازی اضافه کنید. مطمئن شوید که گزینه "Show Separator" فعال باشد.

• جداکننده را نشان دهید: بله

خط

سپس در تنظیمات خط تغییراتی ایجاد کنید.

• رنگ خط: # edf000
• سبک خط: جامد
• موقعیت خط: بالا

اندازه

و پارامترهای ماژول را با تغییر پارامترهای ابعاد متناسب با آن کامل کنید:

• وزن تقسیم: 20px
• عرض: 11٪
• ترازبندی ماژول: سمت چپ
• ارتفاع: 20px

یک خط شماره 2 اضافه کنید

ساختار ستون

به ردیف بعدی! از ساختار ستون زیر استفاده کنید:

اندازه

بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پارامترهای اندازه را به شرح زیر اصلاح کنید:

• از عرض روده ای سفارشی استفاده کنید: بله
• عرض روده: 2
• عرض: 100٪
• حداکثر عرض: 100٪

فاصله

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

• بالشتک چپ: 5٪ (فقط رایانه لوحی و تلفن)
• بالشتک مناسب: 5٪ (فقط رایانه لوحی و تلفن)

پارامترهای ستون (5 برابر)

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

پیشینه شیب

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

• رنگ 1: rgba (255,255,255,0)
• رنگ 2: rgba (0,0,0,0,84)
• نوع شیب: خطی
• موقعیت شروع: 25٪
• موقعیت نهایی: 86٪
• شیب را بالای تصویر پس زمینه قرار دهید: بله

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

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

• اندازه تصویر پس زمینه: جلد
• موقعیت تصویر پس زمینه: مرکز

عنصر اصلی

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

عرض: 100٪! مهم؛ حاشیه: 50px 0px 50px 0px! مهم؛

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

اضافه کردن محتوا

برای به اشتراک گذاشتن اطلاعات در مورد اعضای تیم ، از ماژول Person استفاده خواهیم کرد. ماژول Person first را به ستون 1 اضافه کنید و از هر محتوایی که می خواهید استفاده کنید.

حذف تصویر

سپس تصویر را حذف کنید. به جای آن از تصویر پس زمینه ستون استفاده می کنیم.

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

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

• اندازه تصویر پس زمینه: جلد
• موقعیت تصویر پس زمینه: مرکز

تنظیمات متن عنوان

به برگه طراحی ماژول بروید و تنظیمات متن عنوان را به صورت زیر تغییر دهید:

• سطح عنوان: H3
• فونت عنوان: Quicksand
• وزن وزن قلم عنوان: جسورانه
• عنوان متن رنگ: #ffffff
• اندازه متن عنوان: 230٪

تنظیمات متن بدن

همچنین تنظیمات متن بدن را تغییر دهید.

• فونت بدن: باز بدون
• رنگ متن بدن: #ffffff
• ارتفاع خط بدنه: 2,2 em

تنظیمات متن موقعیت

سپس برخی از تنظیمات متن تنظیمات را تغییر دهید.

• موقعیت قلم: Sans Open
• رنگ متن متن: # edf000

فاصله

و تنظیمات ماژول را با افزودن مقادیر padding سفارشی به تنظیمات فاصله کامل کنید.

• بالشتک بالایی: 70٪
• بالشتک پایین: 10٪
• بالشتک چپ: 10٪
• بالشتک راست: 10٪

4 بار ماژول Person را کپی کنید

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

کپی های تکراری را در ستون های باقی مانده قرار دهید

ماژولهای تکراری را در چهار ستون باقیمانده ردیف قرار دهید. حتماً محتوا را نیز ویرایش کنید.

Row را به چرخ دستی اتومبیل تبدیل کنید

اندازه خط شماره 2 را تغییر دهید

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

• عرض: 180٪
• حداکثر عرض: 220٪ (میز) ، 100٪ (تبلت و تلفن)

حرکت افقی خط شماره 2 را اضافه کنید

تنظیمات خط را با اضافه کردن حرکت افقی به تنظیمات اثر پیمایش در برگه پیشرفته کامل کنید و کار شما تمام شد!

• حرکت افقی را فعال کنید: بله
• شروع افست:
  • دفتر: 2,5
  • تبلت و تلفن: 0
• متوسط ​​افست: 0 (با 40٪)
• پایان افست:
  • دفتر: -25 (با 62٪)
  • تبلت و تلفن: 0
• اثر حرکت ماشه: وسط عنصر

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

دفتر

آخرین افکار

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

چگونه آیکون های رسانه های اجتماعی بیشتری را به دیوی اضافه کنیم

تعادل بلر Jersyer | DIVI

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

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

چگونه به راحتی آیکون های اضافی رسانه های اجتماعی را در پاورقی Divi فعال کنید

ساده ترین راه برای افزودن آیکون های بیشتر شبکه های اجتماعی به سایت Divi ، مراجعه به پنل است گزینه های تم ، گزینه های فعال سازی برای فیس بوک ، توییتر ، اینستاگرام و RSS. سپس تنها کاری که باید انجام دهید اینست که URL های نمایه خود را در قسمت ها وارد کنید. هنگامی که این کار را انجام می دهید ، مشاهده خواهید کرد که آنها به عنوان لینک آیکون در پاورقی سایت شما ظاهر می شوند:

در منوی داشبورد وردپرس خود ، به بروید Divi - گزینه های تم و روی برگه کلیک کنید عمومی . برای دیدن سوئیچ شبکه به پایین بروید. همچنین ، دقیقاً در زیر این ضامن ها ، اطمینان حاصل کنید که URL های هر نماد اجتماعی Divi را که فعال می کنید وارد کنید. در غیر این صورت آیکون ظاهر می شود ، اما با کلیک بر روی آن کاربر هیچ جا نمی شود. با استفاده از # به جای یک URL کاربر را در صفحه نگه می دارد تا اینکه به طور بالقوه او را به یک هدایت کند صفحه 404 .

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

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

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

نحوه استفاده از Divi Builder برای افزودن ردیاب های رسانه های اجتماعی به یک صفحه یا انتشار محتوا

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

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

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

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

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

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

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

سپس یکی از لیست کشویی را انتخاب کنید.

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

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

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

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

پس از آن ، نمادهای رسانه اجتماعی در سایت شما بصورت زنده پخش می شود.

با استفاده از Divi Theme Builder برای اضافه کردن نمادهای رسانه های اجتماعی

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

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

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

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

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

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

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

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

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

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

حتما روی دکمه سبز کلیک کنید ثبات در گوشه. اکنون هر پست وبلاگی با این الگو در سایت با نمادهای شبکه های اجتماعی شما در بالای نوار کناری بارگذاری می شود.

افزودن نمادهای شبکه های اجتماعی به عنوان و زیر صفحه با Divi Theme Builder

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

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

همچنین می توانید یک پاورقی جهانی را جایگزین کنید همه پاورقی های دیگری که ایجاد کرده اید (این مورد همچنین در مورد سرفصل ها و سرفصل های جهانی نیز اعمال می شود). 

اگر 4 زیر صفحه سفارشی برای پست ها ، صفحات ، پروژه ها و دسته بندی ها طراحی کرده باشید ، اما یک Global Footer ایجاد کنید ، فقط Global Footer نشان داده می شود. 

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

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

نتیجه

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

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

ایجاد یک شبکه مزایای پویا برای محصولات WooCommerce

تعادل بلر Jersyer | DIVI

نحوه طراحی صفحه محصول شما تأثیر فوری بر رفتار بازدید کنندگان شما دارد. یک طراحی صحیح و شخصی صفحه صفحه می تواند تصمیم گیری درمورد خرید محصول شما را برای بازدیدکنندگان آسان کند. اگر به دنبال راهی هستید که صفحه محصول خود را جذابتر کند ، احتمالاً این آموزش را دوست خواهید داشت. 

ما به شما نشان خواهیم داد که چگونه با استفاده از Divi و پلاگین Advanced Custom Fields یک شبکه مزایای محصول پویا در طراحی خود بگنجانید. ما با ایجاد یک گروه از زمینه ها برای مزایا شروع خواهیم کرد. سپس ما قسمتهای سفارشی را در صفحه محصول خود پر می کنیم و محتوای پویا را در الگوی صفحه محصول خود قرار می دهیم. 

نتیجه احتمالی

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

1. افزونه ACF Plugin And Product Benefit Field Group را نصب کنید

افزونه Advanced Custom Fields را نصب کنید

برای نمایش مزایای مختلف محصول در قسمت عقب محصولاتمان ، از پلاگین Advanced Advanced Fields رایگان استفاده خواهیم کرد. به خود دسترسی پیدا کنید WordPress backend> Plugins> Add new> Find plugin ACF> Install> Active .

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

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

تنظیمات گروه زمینه

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

• "نوع پیام" با "محصول" برابر است

اولین فیلد را اضافه کنید

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

• Field Label: عنوان مزیت 1
• نوع فیلد: متن

مرحله را برای قسمتهای باقیمانده تکرار کنید

همین کار را برای سایر مزایای محصول و توضیحات آنها نیز انجام دهید. همه این فیلدها به نوع فیلد "Text" اختصاص یافته به آنها نیاز دارند.

• عنوان خدمات 1
• شرح مزایا 1
• عنوان خدمات 2
• شرح مزایا 2
• عنوان خدمات 3
• شرح مزایا 3
• عنوان خدمات 4
• شرح مزایا 4

2. مزایایی را به محصولات اضافه کنید

محصولی جدید را باز یا اضافه کنید

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

قسمت مزایای محصول را تکمیل کنید

و مزایای محصول را برآورده سازید.

3. یک الگوی صفحه محصول را در Divi Theme Builder ایجاد کنید

به Divi Theme Builder بروید و یک الگوی جدید اضافه کنید

وقت آن است که با Divi شروع کنیم! برای ایجاد الگوی جدید ، به Divi Theme Builder بروید و روی "افزودن الگوی جدید" کلیک کنید.

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

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

وارد ویرایشگر قالب بدنه مدل شوید

سپس با کلیک بر روی "Add custom body" و انتخاب "Create custom body" بدنه مدل را وارد کنید.

بخش شماره 1 را ویرایش کنید

رنگ پس زمینه

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

• رنگ زمینه: # 000000

فاصله

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

• بالشتک بالایی: 10px
• بالشتک پایین: 10px

یک خط جدید اضافه کنید

ساختار ستون

بیایید با اضافه کردن یک خط جدید به بخشی که ساختار زیر را دارد ادامه دهیم:

فاصله

بدون اضافه کردن حالت ، اجازه دهید تنظیمات ردیف را باز کنیم و تنظیمات فاصله را انجام دهیم.

• از Personal Gutter استفاده کنید: بله
• عرض روده: 1
• عرض: 90٪
• حداکثر عرض: 100٪

فاصله

تمام فاصله داخلی بالا و پایین را حذف کنید.

• حاشیه داخلی بالا: 0px
• حاشیه داخلی کم: 0px

ماژول Woo Cart Notice را به ستون اضافه کنید

محتوای پویا

تنها ماژولی که در این خط و بخش به آن نیاز داریم ، ماژول Woo Cart Notice است. اطمینان حاصل کنید که "این محصول" در بخش پویا انتخاب شده است.

• محصول: این محصول

زمینه رنگی

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

• رنگ پس زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)

تنظیمات متن

به برگه "Design" بروید و قلم متن را تغییر دهید.

• قلم متن: کارلا

تنظیم دکمه

تنظیمات افزونه را با تعریف تنظیمات سبک تمام کنید:

• از دکمه های سفارشی برای دکمه استفاده کنید: بله
• اندازه متن دکمه: 20px
• رنگ متن دکمه: # 000000
• زمینه دکمه: # ffd623
• عرض مرز دکمه: 0px
• دکمه حاشیه گرد: 0px

• قلم دکمه: اسوالد
• دکمه سبک قلم: Shift

• حاشیه داخلی بالا: 20px
• حاشیه داخلی کم: 20px
• حاشیه داخلی سمت چپ: 50px
• حاشیه سمت راست داخلی: 50px

بخش شماره 2 را اضافه کنید

پیشینه شیب

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

• رنگ 1: # 000000
• رنگ 2: #ffffff
• نقطه شروع:
  • دسکتاپ: 30٪
  • قرص: 57٪
  • تلفن: 54٪
• پایان موقعیت:
  • دسکتاپ: 30٪
  • قرص: 57٪
  • تلفن: 54٪

فاصله

بیایید به تب Design برویم و یک حاشیه داخلی زیاد اضافه کنیم.

• بالشتک بالایی: 150px

یک خط جدید اضافه کنید

ساختار ستون

با افزودن یک خط جدید با همان ساختاری که در زیر نشان داده شده است ، ادامه دهید:

اندازه

بدون اضافه کردن هیچگونه حالت ، هنوز تنظیمات را باز کرده و فاصله را به صورت زیر تغییر می دهیم:

• از روده های سفارشی استفاده کنید: بله
• فضای ناودان: 1
• عرض: 95٪
• حداکثر عرض: 2560px
• تراز خط: مرکز

فاصله

ما حاشیه داخلی بالایی را نیز حذف خواهیم کرد.

• بالشتک بالایی: 0px

عنصر اصلی

و برای قرار دادن محتوای ستون در Desktop ، قصد داریم از دو خط کد CSS در عنصر اصلی ماژول سطر استفاده کنیم.

دسکتاپ:

نمایش: flex؛ align-things: center؛

تبلت و تلفن:

صفحه نمایش: بلوک؛

ماژول Woo Image را به ستون 1 اضافه کنید

محتوای پویا

وقت آن است که ماژول ها را اضافه کنیم ، ما با ماژول Woo Images در ستون 1 شروع می کنیم. اطمینان حاصل کنید که "این محصول" انتخاب شده است.

• محصول: این محصول

جلوه انیمیشن پیمایش عمودی

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

• حرکت عمودی را فعال کنید: بله
• شروع افست:
  • دفتر: -4
  • تبلت و تلفن: 0
• میانگین افست: 0
• پایان افست: 0
• اثر حرکت ماشه: وسط عنصر

ماژول عنوان Woo را به ستون 2 اضافه کنید

محتوای پویا

در ستون 2 ، اولین مد مورد نیاز ما یک مد عنوان Woo است. اطمینان حاصل کنید که "این محصول" در قسمت محتوای پویا انتخاب شده باشد.

• محصول: این محصول

تنظیمات متن عنوان

سپس به برگه طراحی بروید و متن عنوان را به صورت زیر سبک دهید:

• فونت عنوان: اسوالد
• سبک فونت عنوان: بزرگ
• عنوان متن رنگ: # ffd623
• اندازه متن عنوان: 80px

فاصله

با اضافه کردن حاشیه های چپ و راست ، ماژول عنوان Woo را تکمیل کنید.

• حاشیه سمت چپ: 5٪
• حاشیه راست: 5٪

ماژول توضیحات Woo را به ستون 2 اضافه کنید

محتوای پویا

بیایید به ماژول بعدی برویم ، که یک ماژول توصیف Woo است. ما از محتوای پویای زیر برای این استفاده می کنیم:

• محصول: این محصول
• نوع توضیحات: توضیحات کوتاه

تنظیمات متن

به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن را تغییر دهید:

• قلم متن: کارلا
• رنگ متن: #dbdbdb
• اندازه متن: 17 px (میزکار و رایانه لوحی) ، 15 عدد (تلفن)
• ارتفاع خط متن: 1,9 em

اندازه

سپس عرض را در اندازه های مختلف صفحه تغییر دهید.

• عرض: 59٪ (دسکتاپ) ، 82٪ (رایانه لوحی و تلفن)

فاصله

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

• حاشیه بالایی: 50px
• حاشیه پایین: 100px
• حاشیه سمت چپ: 5٪
• حاشیه راست: 5٪

ماژول Blurb را به ستون 2 اضافه کنید

محتوای پویا

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

• عنوان: مزایای عنوان 1
• بدن: توضیحات مزایا 1

آپلود تصویر

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

تنظیمات تصویر / آیکون

به برگه طراحی ماژول بروید و تنظیمات تصویر / آیکون را به شرح زیر تغییر دهید:

• قرار دادن تصویر / آیکن: بالا
• تراز تصویر / آیکون: سمت چپ

عنوان تنظیمات متن

تنظیمات متن عنوان را در مرحله بعدی تغییر می دهیم.

• قلم عنوان: اسوالد
• عنوان سبک قلم: حروف بزرگ
• اندازه متن عنوان: 25px

تنظیمات متن بدن

همراه با تنظیمات متن بدن.

• قلم بدنه: کارلا
• اندازه متن: 17 px (میزکار و رایانه لوحی) ، 15 عدد (تلفن)
• ارتفاع خط بدنه: 1,9 em

اندازه

سپس به تنظیمات اندازه بروید و عرض ها را تغییر دهید. مهم است که از عرض اصلی کمتر از 50٪ استفاده کنید ، این به ما امکان می دهد در مراحل بعدی دو ماژول Blurb را در کنار هم نشان دهیم.

• عرض تصویر: 25٪
• عرض: 49٪

فاصله

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

• بالشتک بالایی: 8٪
• بالشتک پایین: 8٪
• بالشتک چپ: 8٪ (دسک تاپ و تبلت) ، 2٪ (تلفن)
• بالشتک سمت راست: 8٪ (رومیزی و رایانه لوحی) 2٪ (تلفن)

عنصر اصلی

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

صفحه نمایش: نشان دهنده بلوک؛

کلون کردن ماژول خلاصه 3 بار

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

تصاویر ماژول Blurb را ویرایش کنید

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

محتوای پویا ماژول Blurb را اصلاح کنید

همچنین محتوای پویا هر یک از ماژول های Blurb را تکرار کنید.

• عنوان: عنوان خدمات (2,3،4 یا XNUMX)
• بدن: شرح مزایا (2,3،4 یا XNUMX)

مرزها را به صورت جداگانه به ماژول های Blurb اضافه کنید

تنظیمات حاشیه Blurb Module 1

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

• عرض حاشیه راست: 1 پیکسل
• رنگ حاشیه سمت راست: # ffd623

همچنین یک حاشیه پایین به اولین ماژول Blurb اضافه کنید.

• عرض مرز پایین: 1px
• رنگ حاشیه پایین: # 000000

تنظیمات حاشیه Blurb Module 2

سپس ماژول Blurb دوم را باز کرده و از مرز پایین استفاده کنید.

• عرض مرز پایین: 1px
• رنگ حاشیه پایین: # 000000

تنظیمات حاشیه Blurb Module 3

طرح شبکه را با اضافه کردن یک مرز مستقیم به ماژول سوم Blurb تکمیل کنید.

• عرض حاشیه راست: 1 پیکسل
• رنگ حاشیه سمت راست: # ffd623

اضافه کردن وو اضافه کردن به سبد ماژول در ستون 2

محتوای پویا

آخرین ماژولی که در طراحی خود به آن نیاز داریم ، ماژول Woo Add to Cart است. اطمینان حاصل کنید که "این محصول" در منطقه محتوای پویا انتخاب شده باشد.

• محصول: این محصول

تنظیمات زمینه

به برگه طراحی بعدی بروید و تنظیمات قسمت را تغییر دهید.

• زمینه زمینه رنگ: #ffffff
• رنگ متن متن: # 000000

• زمینه های گرد: 0px (همه گوشه ها)
• عرض مرزهای پایین مزارع: 1px
• رنگ مرز پایین فیلدها: # 000000

تنظیمات دکمه

سپس دکمه را مطابق آن سبک دهید:

• از دکمه های سفارشی برای دکمه استفاده کنید: بله
• اندازه متن دکمه: 20 پیکسل
• رنگ متن دکمه: # 000000
• رنگ پس زمینه دکمه: # ffd623
• عرض مرز دکمه: 0px
• شعاع مرزی دکمه: 0px

• قلم دکمه: اسوالد
• سبک قلم دکمه: بزرگ

• بالشتک بالایی: 20px
• بالشتک پایین: 20px
• لبه چپ: 50px
• بالشتک راست: 50 پیکسل

فاصله

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

• حاشیه بالایی: 100px
• حاشیه سمت چپ: 5٪

3. ذخیره تغییرات در ایجاد کننده موضوع و پیش نمایش نتیجه

پس از اتمام طراحی الگوی صفحه محصول ، می توانید تمام تغییرات Theme Builder خود را ذخیره کرده و نتیجه را روی محصولات خود نشان دهید!

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

آخرین افکار

در این مقاله ، ما به شما نشان داده ایم که چگونه با الگوی صفحه بعدی محصول Divi خود خلاق شوید. به طور خاص ، ما به شما نشان داده ایم که چگونه یک شبکه سود محصول پویا برای افزودن مزایای اضافی به صفحه محصول خود بگنجانید. ما این آموزش را با استفاده از Divi در ترکیب با پلاگین Advanced Custom Fields ایجاد کردیم. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید! اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.

نحوه اجرای حالت تاریک در سایت خود با Divi

تعادل بلر Jersyer | DIVI

Dark Mode به عنوان گزینه ای راحت که به کاربران امکان می دهد وب را با فشار کمتری در چشم تجربه کنند ، همچنان محبوبیت خود را کسب می کند. بیایید این واقعیت را بپذیریم که همه ما بیشتر از آنچه که احتمالاً باید داشته باشیم وقت خود را صرف خیره شدن به صفحه نمایش می کنیم ، بنابراین هرگونه راحتی بیشتر به تجربه کاربر (مانند حالت تاریک) می تواند تا حد زیادی کمک کند. 

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

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

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

بررسی

در اینجا پیش نمایش طرحی که در این آموزش خواهیم ساخت وجود دارد.

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

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

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

قسمت 1: ساخت سوئیچ از حالت تاریک

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

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

ماژول خلاصه را اضافه کنید

برای ساخت تغییر کاربری سفارشی ، ما قصد داریم یک ماژول Blurb را با کمی CSS سفارشی طراحی کنیم.

ماژول متن ارائه جدید را به خط اضافه کنید.

محتویات

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

تصور

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

• رنگ نماد: # 666666
• تراز تصویر / آیکون: سمت چپ
• اندازه قلم نماد: 22 پیکسل

• عرض: 50px
• ترتیب ماژول: مرکز
• ارتفاع: 25px

• حاشیه: 0px کم است
• گوشه های گرد: 4px
• عرض مرز: 2px
• رنگ حاشیه: # 666666

CSS سفارشی

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

سرریز: قابل مشاهده! مهم؛

سپس CSS سفارشی زیر را به عنصر After اضافه کنید:

محتوای: "نور" ؛ موقعیت: مطلق ؛ سمت چپ: -35px؛ top: 0px؛

این یک برچسب به ماژول Blurb اضافه می کند که ما از کلیک بر روی "نور" به "تاریک" تغییر می دهیم.

طراحی متن بدن

از آنجا که متن عنصر شبه post سبک های متن متن را به ارث می برد ، می توانیم سبک های متن بدن را با استفاده از گزینه های Divi به شرح زیر اضافه کنیم:

• قلم بدنه: Roboto
• رنگ متن بدن: # 666666
• اندازه متن بدن: 13px
• فاصله حروف بدن: 1px

اضافه کردن کد دلخواه با ماژول کد

برای اضافه کردن کد لازم (CSS / JQuery) برای عملکرد ضامن حالت تاریک ، از ماژول کد استفاده خواهیم کرد.

در همان ستون یک ماژول کد جدید را در زیر ماژول Blurb ایجاد کنید.

سپس کد زیر را در قسمت کد قرار دهید:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

افزودن کلاسهای CSS سفارشی

کد سفارشی ایجاب می کند که یک کلاس CSS سفارشی به ماژول یا سوئیچ Blurb اضافه کنید. این اجازه می دهد تا علامت گذاری باعث تغییر حالت تاریک و قابلیت کلیک کردن شود.

کلاس ماژول را مبهم کنید

تنظیمات ماژول Blurb را باز کرده و یک کلاس CSS سفارشی را به شرح زیر اضافه کنید:

• کلاس CSS: et-dark-toggle

کلاس قادر به حالت تاریک است

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

برای شروع می توانیم حالت تاریک را به بخش حاوی ضامن حالت تاریک اضافه کنیم.

پارامترهای بخش را باز کرده و کلاس CSS زیر را اضافه کنید:

• کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است

قسمت 2: اضافه کردن ویژگی های حالت تاریک به صفحه Divi

اکنون که کد و کلاس های CSS در دسترس ما قرار دارد ، آماده استفاده از قابلیت و حالت تاریک حالت در کل صفحه در Divi هستیم. برای این کار ، ما می خواهیم از طرح Premade صفحه فرود برنامه تلفن همراه استفاده کنیم.

برای افزودن طرح ، منوی تنظیمات را در پایین سازنده ویژوال باز کنید و روی نماد افزودن طرح جدید کلیک کنید.

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

اطمینان حاصل کنید که گزینه "جایگزینی محتوای موجود" انتخاب نشده باشد. شما نمی خواهید بخش را با تغییر حالت تاریک پاک کنید.

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

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

اضافه کردن کلاس CSS به عناصر صفحه

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

همه بخش ها

برای افزودن کلاس CSS به همه بخش ها ، تنظیمات قسمت بالا را که شامل ضامن حالت تاریک است باز کنید. سپس بخش جهانی پیش فرض ها را تغییر دهید و کلاس CSS زیر را به بخش پیش فرض های جهانی اضافه کنید:

• کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است

کلیه بخش های تخصصی

همچنین کلاس CSS را در بخش تخصصی به پیش فرض های جهانی اضافه کنید.

ماژول های متن

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

برای آزمایش نتیجه ، به صفحه زنده بروید و بر روی حالت تاریک ضامن در بالای صفحه کلیک کنید.

در اینجا آنچه صفحه باید در حالت واضح به نظر برسد ، آمده است.

و این همان چیزی است که صفحه باید در حالت تاریک به نظر برسد.

منابع اضافی

در اینجا منابع دیگری وجود دارد که ممکن است مورد توجه شما قرار گیرند.

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

آخرین افکار

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