Divi: چگونه یک نوار لغزنده جمع و جور برای هدر ایجاد کنیم

آیا می خواهید یک نوار لغزنده جمع و جور برای هدر Divi درج کنید؟

افزودن توصیفات به سایت شما راهی موثر برای ایجاد اعتبار برای کسب و کار (یا برند شما) و ایجاد اعتماد در بین کاربران است. آخرین بازدید. 

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

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

برای انجام این کار، ما می‌خواهیم ماژول Divi Slider را به روشی سرگرم‌کننده و منحصربه‌فرد اصلاح کنیم.

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

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

بررسی

در اینجا لغزنده گواهینامه جمع و جور است که ما با استفاده از ماژول Divi's Slider خواهیم ساخت.

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

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

یک صفحه جدید با Divi Builder ایجاد کنید

برای شروع، باید موارد زیر را انجام دهید:

از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید

عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید

سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)

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

نحوه ایجاد یک اسلایدر گواهینامه فشرده در Divi

سطر جدید و ماژول اسلایدر اضافه کنید

برای شروع، یک ردیف تک ستونی به بخش اضافه کنید.

سپس یک ماژول Slider به خط اضافه کنید.

ویرایش اسلاید

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

محتوای اسلاید

زیر برگه محتوا از تنظیمات اسلاید، موارد زیر را به روز کنید:

• عنوان: «Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• دکمه: خواندن همه
• بدن: - تاتیانا گاگلمن

پس از انجام، تنظیمات اسلاید را ذخیره کنید.

همچنین بخوانید: Divi: نحوه استفاده از تنظیمات ماسک پس‌زمینه و گزینه‌های تبدیل الگو

تنظیمات لغزنده را به روز کنید

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

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

سپس در زیر گروه گزینه عناصر، با به روز رسانی موارد زیر، کنترل های لغزنده را پنهان کنید:

• نمایش کنترل: خیر

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

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

برای افزودن پس‌زمینه، موارد زیر را به‌روزرسانی کنید:

• گرادیان پس زمینه:
  • گرادیان توقف 0٪: #000000
  • گرادیان 100٪ متوقف می شود: #000000

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

تنظیمات لغزنده

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

پوشش

• از پوشش پس‌زمینه استفاده کنید: بله
• رنگ پوشش پس‌زمینه: rgba(0,0,0,0.7)

متن عنوان

• عنوان :
  • سطح عنوان: H4
  • فونت: Josefin Sans
  • وزن قلم: متوسط
  • تراز متن: چپ
  • اندازه متن: 16 پیکسل (رومیزی و تبلت)، 14 پیکسل (تلفن)
  • ارتفاع خط: 1,5 میلی متر

متن متن

• بدن:
  • فونت: Josefin Sans
  • تراز متن: چپ
  • رنگ متن: #aaaaaa
  • فاصله حروف: 0,05em

دکمه

• استفاده از اندازه سفارشی برای دکمه: بله
• دکمه :
  • اندازه متن: 1em
  • رنگ متن: پیش‌فرض (رومیزی)، #000 (مانوس‌گر)
  • رنگ پس زمینه (رومیزی): rgba (255,255,255,0.19)
  • رنگ پس زمینه (Hover): #ffffff
  • عرض حاشیه: 0 پیکسل
  • فاصله حروف: 0,05em
  • فونت: Josefin Sans
  • حاشیه: 0 پیکسل (بالا و پایین)
  • بالشتک: 0px (بالا و پایین)، 0,6em (چپ و راست)

پر کردن خودکار و انیمیشن

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

• حاشیه: 0 پیکسل (بالا و پایین)
• بالشتک: 1em (بالا و پایین)، 5٪ (چپ و راست)
• انیمیشن خودکار: روشن
• سرعت انیمیشن خودکار: 3500

CSS سفارشی

زیر زبانه فناوری، CSS سفارشی زیر را برای به روز رسانی سبک هر عنصر اسلایدر (عنوان، دکمه و فلش) اضافه کنید.

عنوان اسلاید

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

این تضمین می‌کند که عنوان اسلاید در صفحه‌های کوچک‌تر خط شکنی ایجاد نمی‌کند.

دکمه اسلاید

position:absolute;
bottom: 1em;
right: 6%;

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

فلش ها را بکشید

font-size: 30px;
margin-top: -15px;

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

نکته: همان رنگ پس‌زمینه را به ستون اضافه کنید تا انتقال اسلایدها صاف‌تر شود

برای انجام این کار، تنظیمات ستون والد اسلایدر را باز کنید و رنگ پس زمینه زیر را اضافه کنید:

• پس زمینه: #000000

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

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

هنگامی که تصویر پس‌زمینه را به اسلاید اضافه کردید، تصویر پس‌زمینه سبک‌هایی را که از قبل در زیر تنظیمات اسلایدر (نه اسلاید) وجود داشت، به ارث می‌برد.

نتیجه

نتیجه نهایی را بررسی کنید.

افزودن نوار لغزنده جمع و جور به یک الگوی هدر

ماژول را در کتابخانه Divi ذخیره کنید

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

می توانید این کار را با نگه داشتن ماوس روی ماژول Slider و کلیک کردن بر روی " انجام دهید. افزودن به کتابخانه". سپس یک نام برای طرح بندی انتخاب کنید و روی "کلیک کنید" ذخیره در کتابخانه"

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

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

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

دسترسی به Divi > تم ساز، سپس بر روی نمادی که به شما امکان تغییر را می دهد کلیک کنید. هدرهای سفارشی"

ماژول لغزنده گواهینامه ذخیره شده را از کتابخانه درج کنید

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

در حالت "InsertModule"، برگه را انتخاب کنید «افزودن از کتابخانه». نوار لغزنده گواهینامه فشرده ای را که قبلاً در کتابخانه ذخیره کرده اید پیدا کنید و آن را انتخاب کنید.

پس از بارگذاری، تغییرات را ذخیره کنید.

همچنین ببینید: Divi: نحوه نمایش ماژول Fullwidth Header به صورت تمام صفحه

نتیجه نهایی

در زیر نوار لغزنده گواهی اضافه شده به سربرگ جهانی است.

در اینجا ما اسلایدر گواهینامه را بدون تصاویر پس زمینه نویسنده داریم.

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

اکنون DIVI را دانلود کنید!!!

نتیجه

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

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

اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...