Divi: چگونه یک هدر سراسری چسبنده ایجاد کنیم

آیا می خواهید یک هدر چسبنده با آن ایجاد کنید DIVI ?

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

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

بنابراین، در این آموزش وقت صرف می کنیم تا به شما نشان دهیم که چگونه با استفاده از پارامترها، یک هدر چسبنده فوق شخصی سازی کنید. DIVI.

بررسی

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

ساختار عنصر هدر را بسازید

یک الگوی سربرگ جهانی جدید ایجاد کنید

به Divi Theme Builder دسترسی پیدا کنید و شروع به ایجاد یک سربرگ جهانی یا سفارشی جدید کنید.

بخش 1 پارامترها

پیشینه شیب

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

دفعات بازدید: نحوه ایجاد یک منوی کشویی و فشاری در DIVI

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

رنگ 1: #ffba60
رنگ 2: #ffd6a0
جهت گرادیان: 90 درجه
موقعیت شروع: 50%
موقعیت نهایی: 50%

فاصله

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

راس حاشیه داخلی: 0 پیکسل
حاشیه داخلی پایین: 0 پیکسل

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

ساختار ستون

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

اندازه

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

از عرض ناودان سفارشی استفاده کنید: بله
فاصله ستون ها: 1
حداکثر عرض: 95
حداکثر عرض: 2 پیکسل

فاصله

همچنین حاشیه های داخلی سفارشی (بالا و پایین) را اضافه کنید.

راس حاشیه داخلی: 15 پیکسل
حاشیه داخلی پایین: 15 پیکسل

عنصر اصلی CSS

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

display: flex;

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

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

وقت آن است که ماژول‌ها را اضافه کنید و با ماژول «ما را در رسانه‌های اجتماعی دنبال کنید» در ستون 1 شروع کنید. شبکه‌های اجتماعی انتخابی خود را به همراه پیوندهای مربوطه اضافه کنید.

رنگ پس زمینه را از هر شبکه اجتماعی حذف کنید

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

تنظیمات نماد

سپس به تنظیمات ماژول عمومی برگردید و رنگ آیکون را در تب طراحی تغییر دهید.

رنگ نماد: #26333a

فاصله

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

حاشیه بالا: 5 پیکسل

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

اضافه کردن متن به دکمه

در ستون 2، تنها ماژول مورد نیاز ما یک ماژول Button است. متن دلخواه خود را اضافه کنید.

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

سپس یک لینک اضافه کنید.

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

سپس به تب Style بروید و تراز دکمه را تغییر دهید.

تراز دکمه: راست

تنظیمات دکمه

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

استفاده از سبک های سفارشی برای دکمه: بله
اندازه متن دکمه: 14 پیکسل
رنگ متن دکمه: #26333a
پهنای حاشیه دکمه: 2 پیکسل
رنگ حاشیه دکمه: #26333a
شعاع حاشیه دکمه: 0 پیکسل

دکمه های فاصله بین حروف: 4 پیکسل
دکمه Soft Light: متن پررنگ
دکمه سبک کپی: حروف بزرگ
دکمه نمایش: بله

فاصله

و با افزودن حاشیه های داخلی (بالا و پایین) به تنظیمات فاصله، تنظیمات ماژول را تکمیل می کنیم.

راس حاشیه داخلی: 10 پیکسل
حاشیه داخلی پایین: 10 پیکسل