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

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

[vc_row content_plaction = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! مهم؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin مهم! مرز-پایین-عرض: 0px! مهم ؛ پر کردن-پایین: 0px! مهم ؛} "] [vc_column_text]

Divi: ساده ترین قالب وردپرس برای استفاده

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

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

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

عنوان سایت پویا سرآیند جهانی قالب 6

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

مثال اصلاح عنوان Divi

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

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

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

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

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

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

یک الگوی divi انتخاب کنید

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

سربرگ divi جهانی را تغییر دهید

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

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

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

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

عنوان divi را سفارشی کنید

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

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

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

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

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

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

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

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

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

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

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

واردات مدل Divi

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

الگو را از پاورقی حذف کنید

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

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

انتقال آرم

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

padding-bottom: 0px
کد CSS divi سفارشی را اضافه کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

شعار divi را نمایش دهید

نتیجه نهایی

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

تقسیم نتیجه نهایی

آخرین افکار

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

منبع: تم زیبا

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

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

[vc_row content_plaction = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! مهم؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin مهم! مرز-پایین-عرض: 0px! مهم ؛ پر کردن-پایین: 0px! مهم ؛} "] [vc_column_text]

Divi: ساده ترین قالب وردپرس برای استفاده

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

برویم.

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

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

انتقال بین بخش divi

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

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

فاصله

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

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

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

ساختار ستون

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

اندازه

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

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

فاصله

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

  • حاشیه بالایی: 200px
  • حاشیه پایین: 200px
پیکربندی فاصله خط Divi

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

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

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

خدمات ما توسط کارشناسان فعلی ارائه می شود

تنظیمات متن H2

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

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

فاصله

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

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

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

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

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

جعبه متن divi محتوا

تنظیمات متن

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

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

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

دید

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

  • جداکننده را نشان دهید: بله
تقسیم کننده قابل مشاهده

خط

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

  • رنگ خط: # 000000
زمینه رنگ تقسیم کننده

اندازه

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

  • وزن تقسیم: 3px
  • عرض: 28٪
اندازه گیری جدا کننده دیوی

فاصله

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

  • حاشیه بالایی: 10px
فاصله ماژول جدا کننده Divi

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

فاصله

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

  • بالشتک بالایی: 0px
فاصله تقسیم بخش 2

سرریزهای

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

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

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

ساختار ستون

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

طرح تقسیم را انتخاب کنید

اندازه

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

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

فاصله

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

  • بالشتک بالایی: 0px
  • بالشتک پایین: 0px
تنظیمات فاصله ماژول خط Divi 1

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

رنگ پس زمینه

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

  • رنگ زمینه: # f7f7f7
پیکربندی پس زمینه ماژول Divi

فاصله

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

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

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

فاصله

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

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

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

دید

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

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

خط

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

  • رنگ خط: # 000000
تنظیمات جداکننده Divi

اندازه

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

  • وزن تقسیم: 3px
  • عرض: 50٪
اندازه گیری جدا کننده دیوی

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

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

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

تنظیم قسمت محتوای Divi

تنظیمات متن H3

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

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

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

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

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

تنظیم ماژول متن Divi

تنظیمات متن

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

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

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

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

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

تنظیم محتوای ماژول متن

تنظیمات دکمه

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

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

فاصله

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

  • بالشتک بالایی: 50px
  • بالشتک پایین: 50px
  • لبه چپ: 100px
  • بالشتک راست: 100 پیکسل
تنظیمات فاصله دکمه ماژول Divi

موقعیت

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

  • مقام: مطلق
  • محل سکونت: پایین سمت چپ
تنظیم موقعیت ماژول دکمه Divi

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

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

ماژول Clone divi

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

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

محتوای بخش divi را ویرایش کنید

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

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

حرکت افقی

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

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

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

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

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

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

حرکت عمودی

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

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

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

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

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

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

حرکت عمودی

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

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

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

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

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

نتیجه نهایی

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

نسخه ی نمایشی نهایی

آخرین افکار

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

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

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

[vc_row content_plaction = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! مهم؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin مهم! مرز-پایین-عرض: 0px! مهم ؛ پر کردن-پایین: 0px! مهم ؛} "] [vc_column_text]

Divi: ساده ترین قالب وردپرس برای استفاده

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

تظاهرات

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

عضو تیم divi را پیمایش کنید

آغاز مفهوم

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

فاصله

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

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

سرریزهای

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

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

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

ساختار ستون

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

طرح تقسیم را انتخاب کنید

اندازه

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

  • عرض: 90٪
  • حداکثر عرض: 1580px
پارامتر خط Divi

فاصله

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

  • بالشتک بالایی: 100px
  • بالشتک پایین: 100px
پیکربندی تقسیم خط فاصله

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

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

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

گروه را ملاقات کن

تنظیمات متن H2

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

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

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

دید

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

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

خط

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

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

اندازه

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

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

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

ساختار ستون

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

پیکربندی ستون Divi

اندازه

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

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

فاصله

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

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

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

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

پیکربندی خط پارامتر Divi

پیشینه شیب

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

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

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

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

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

عنصر اصلی

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

عرض: 100٪! مهم؛ حاشیه: 50px 0px 50px 0px! مهم؛
ستون div css کد

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

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

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

نام شخص Divi

حذف تصویر

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

تصویر divi را حذف کنید

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

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

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

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

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

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

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

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

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

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

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

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

فاصله

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

  • بالشتک بالایی: 70٪
  • بالشتک پایین: 10٪
  • بالشتک چپ: 10٪
  • بالشتک راست: 10٪
فاصله ماژول شخص Divi

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

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

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

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

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

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

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

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

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

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

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

بررسی

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

دفتر

عضو تیم divi را پیمایش کنید

آخرین افکار

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

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

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

[vc_row content_plaction = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! مهم؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin مهم! مرز-پایین-عرض: 0px! مهم ؛ پر کردن-پایین: 0px! مهم ؛} "] [vc_column_text]

Divi: ساده ترین قالب وردپرس برای استفاده

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

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

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

آیکون های اجتماعی divi

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

گزینه های تم Divi

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

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

Divi وردپرس

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

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

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

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

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

ایجاد مقاله Divi

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

طرح Divi gutenberg

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

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

درج ماژول در رسانه های اجتماعی

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

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

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

یک شبکه اجتماعی جدید اضافه کنید

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

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

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

نمادهای اجتماعی را سفارشی کنید

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

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

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

دکمه Divi ما را دنبال کنید

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

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

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

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

دیوی ساز

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

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

یک مدل divi اضافه کنید

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

طرح Divi

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

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

ماژول اجتماعی را انتخاب کنید

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

تقسیم ماژول رسانه آیکون اجتماعی

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

ظاهر در قسمت divi با دکمه اشتراک گذاری

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

انتقال ماژول اشتراک اجتماعی Divi

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

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

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

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

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

طرح زمینه طرح زمینه شخصی سازی

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

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

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

یک پاورقی divi جهانی اضافه کنید

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

نتیجه

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

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

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

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

[vc_row content_plaction = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! مهم؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin مهم! مرز-پایین-عرض: 0px! مهم ؛ پر کردن-پایین: 0px! مهم ؛} "] [vc_column_text]

Divi: ساده ترین قالب وردپرس برای استفاده

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

ما به شما نشان خواهیم داد که چگونه با استفاده از 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 .

افزونه زمینه سفارشی adavanced را نصب کنید

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

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

زمینه های acf ایجاد کنید

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

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

  • "نوع پیام" با "محصول" برابر است
قوانین اضافه کنید

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

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

  • Field Label: عنوان مزیت 1
  • نوع فیلد: متن
فیلد ac را اضافه کنید
Divi سفارشی سازی زمینه

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

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

  • عنوان خدمات 1
  • شرح مزایا 1
  • عنوان خدمات 2
  • شرح مزایا 2
  • عنوان خدمات 3
  • شرح مزایا 3
  • عنوان خدمات 4
  • شرح مزایا 4
قسمتهای acf را ​​پیکربندی کنید

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

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

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

ایجاد محصول Divi

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

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

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

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

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

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

تم سازنده Divi

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

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

همه محصولات ووکامرس را اضافه کنید

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

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

بدن divi ساختمان

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

رنگ پس زمینه

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

  • رنگ زمینه: # 000000
پیکربندی قسمت Divi

فاصله

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

  • بالشتک بالایی: 10px
  • بالشتک پایین: 10px
پیکربندی فاصله بخش Divi

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

ساختار ستون

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

پیکربندی طرح ماژول خط

فاصله

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

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

فاصله

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

  • حاشیه داخلی بالا: 0px
  • حاشیه داخلی کم: 0px
تنظیمات فاصله ماژول خط Divi

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

محتوای پویا

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

  • محصول: این محصول
تنظیمات woo cart توجه ماژول تقسیم

زمینه رنگی

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

  • رنگ پس زمینه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
تنظیمات divi ماژول سبد خرید

تنظیمات متن

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

  • قلم متن: کارلا
تنظیمات قلم ماژول Divi

تنظیم دکمه

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

  • از دکمه های سفارشی برای دکمه استفاده کنید: بله
  • اندازه متن دکمه: 20px
  • رنگ متن دکمه: # 000000
  • زمینه دکمه: # ffd623
  • عرض مرز دکمه: 0px
  • دکمه حاشیه گرد: 0px
تنظیمات رنگ ماژول اطلاع از سبد خرید وو
  • قلم دکمه: اسوالد
  • دکمه سبک قلم: Shift
وو سبد خرید تنظیم رنگ طراحی ماژول
  • حاشیه داخلی بالا: 20px
  • حاشیه داخلی کم: 20px
  • حاشیه داخلی سمت چپ: 50px
  • حاشیه سمت راست داخلی: 50px
ماژول طراحی پیکربندی اعلان سبد خرید

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

پیشینه شیب

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

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

فاصله

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

  • بالشتک بالایی: 150px
پیکربندی فاصله ماژول خط Divi

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

ساختار ستون

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

پیکربندی سبک Divi

اندازه

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

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

فاصله

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

  • بالشتک بالایی: 0px
پیکربندی فاصله ماژول Divi

عنصر اصلی

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

دسکتاپ:

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

تبلت و تلفن:

صفحه نمایش: بلوک؛
تنظیمات سبک ماژول Divi

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

محتوای پویا

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

  • محصول: این محصول
تنظیمات ماژول تصویر محصول Woocommerce

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

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

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

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

محتوای پویا

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

  • محصول: این محصول
شبکه سود محصول

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

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

  • فونت عنوان: اسوالد
  • سبک فونت عنوان: بزرگ
  • عنوان متن رنگ: # ffd623
  • اندازه متن عنوان: 80px
تنظیم طرح ماژول عنوان Divi

فاصله

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

  • حاشیه سمت چپ: 5٪
  • حاشیه راست: 5٪
تنظیم ماژول عنوان Divi

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

محتوای پویا

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

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

تنظیمات متن

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

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

اندازه

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

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

فاصله

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

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

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

محتوای پویا

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

  • عنوان: مزایای عنوان 1
  • بدن: توضیحات مزایا 1
تنظیم متن ماژول خلاصه Divi

آپلود تصویر

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

پیکربندی divi خلاصه ماژول تصویر

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

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

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

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

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

  • قلم عنوان: اسوالد
  • عنوان سبک قلم: حروف بزرگ
  • اندازه متن عنوان: 25px
پیکربندی قلم ماژول خلاصه divi

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

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

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

اندازه

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

  • عرض تصویر: 25٪
  • عرض: 49٪
اندازه ماژول خلاصه divi را پیکربندی کنید

فاصله

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

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

عنصر اصلی

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

صفحه نمایش: نشان دهنده بلوک؛
ماژول divi کد css را اضافه کنید

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

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

بخش تقسیم نام محصول

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

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

تصویر ماژول خلاصه Divi

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

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

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

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

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

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

  • عرض حاشیه راست: 1 پیکسل
  • رنگ حاشیه سمت راست: # ffd623
ماژول خلاصه divi پیکربندی حاشیه گرد

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

  • عرض مرز پایین: 1px
  • رنگ حاشیه پایین: # 000000
حاشیه پایین divi را پیکربندی کنید
تنظیمات حاشیه Blurb Module 2

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

  • عرض مرز پایین: 1px
  • رنگ حاشیه پایین: # 000000
divi خلاصه ماژول پیکربندی
تنظیمات حاشیه Blurb Module 3

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

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

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

محتوای پویا

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

  • محصول: این محصول
به تنظیمات ماژول divi کارت اضافه کنید

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

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

  • زمینه زمینه رنگ: #ffffff
  • رنگ متن متن: # 000000
پیکربندی ماژول رنگ سبک اضافه کردن به divi سبد خرید
  • زمینه های گرد: 0px (همه گوشه ها)
  • عرض مرزهای پایین مزارع: 1px
  • رنگ مرز پایین فیلدها: # 000000
فاصله قسمت divi را پیکربندی کنید

تنظیمات دکمه

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

  • از دکمه های سفارشی برای دکمه استفاده کنید: بله
  • اندازه متن دکمه: 20 پیکسل
  • رنگ متن دکمه: # 000000
  • رنگ پس زمینه دکمه: # ffd623
  • عرض مرز دکمه: 0px
  • شعاع مرزی دکمه: 0px
طراحی دکمه divi را پیکربندی کنید
  • قلم دکمه: اسوالد
  • سبک قلم دکمه: بزرگ
دکمه divi را پیکربندی کنید
  • بالشتک بالایی: 20px
  • بالشتک پایین: 20px
  • لبه چپ: 50px
  • بالشتک راست: 50 پیکسل
اندازه ماژول divi را پیکربندی کنید

فاصله

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

  • حاشیه بالایی: 100px
  • حاشیه سمت چپ: 5٪
فاصله divi را پیکربندی کنید

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

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

طراحی divi را ذخیره کنید
تغییرات divi را ذخیره کنید

بررسی

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

نتیجه نمایش

آخرین افکار

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

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

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

[vc_row content_plaction = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! مهم؛}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin مهم! مرز-پایین-عرض: 0px! مهم ؛ پر کردن-پایین: 0px! مهم ؛} "] [vc_column_text]

Divi: ساده ترین قالب وردپرس برای استفاده

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

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

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

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

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

بررسی

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

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

تغییر حالت تاریک

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

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

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

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

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

بخش Divi

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

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

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

محتویات

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

ماژول خلاصه Divi

تصور

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

  • رنگ نماد: # 666666
  • تراز تصویر / آیکون: سمت چپ
  • اندازه قلم نماد: 22 پیکسل
پیکربندی نماد Divi
  • عرض: 50px
  • ترتیب ماژول: مرکز
  • ارتفاع: 25px
پیکربندی اندازه Divi
  • حاشیه: 0px کم است
  • گوشه های گرد: 4px
  • عرض مرز: 2px
  • رنگ حاشیه: # 666666
پیکربندی مرز Divi

CSS سفارشی

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

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

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

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

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

دکمه ضامن Divi

طراحی متن بدن

از آنجا که متن عنصر شبه 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
کد css divi

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

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

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

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

  • کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است
بخش تقسیم انتخابگر CSS

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

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

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

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

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

طرح divi 1 را انتخاب کنید

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

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

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

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

همه بخش ها

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

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

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

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

به همه بخشهای تخصصی اضافه کنید

ماژول های متن

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

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

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

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

حالت پاک کردن

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

حالت تاریک

منابع اضافی

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

آخرین افکار

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