Divi: نحوه ایجاد پوشش های سفارشی تصویر

آیا می خواهید یاد بگیرید که چگونه با استفاده از همپوشانی تصویر سفارشی طراحی کنید DIVI ?

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

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

هیچ پلاگینی مورد نیاز نیست.

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

بررسی

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

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

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

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

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

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

ایجاد پوشش های سفارشی تصویر در Divi

بخش، سطر و ستون را طراحی کنید

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

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

• پس زمینه: #3a0ca3

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

• کلاس CSS: et-overlay-container

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

تصویر اضافه کن

اکنون که بخش، سطر و ستون آماده هستند، یک ماژول Image جدید به ستون 1 اضافه کنید. این تصویر اصلی پشت طرح های همپوشانی ما خواهد بود.

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

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

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

• حاشیه (پایین): 0 پیکسل

زیر زبانه فناوری، کلاس CSS زیر را اضافه کنید:

• کلاس CSS: et-overlay-image

افزودن رنگ پوشش تصویر با استفاده از ماژول "Divider".

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

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

سپس جداکننده را در حالت مطلق قرار دهید تا بالای تصویر قرار گیرد:

• موقعیت: مطلق

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

• نمایش تقسیم کننده: خیر

• رنگ پس زمینه: rgba (247,37,133,0.8)

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

• عرض: 100%
• قد: 100%

با طراحی در جای خود، کلاس CSS زیر را به اسپلیتر اضافه کنید:

• and-overlay-item

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

برای کمک به پیگیری عناصر/ماژول‌های طراحی، لایه‌های modal را باز کنید و ماژول را Divider ("Overlay Color") برچسب بزنید.

متن سرصفحه همپوشانی اضافه شد

در ماژول Divider، یک ماژول Text جدید اضافه کنید. این به عنوان متن هدر همپوشانی است که در بالای تصویر در حالت شناور ظاهر می شود.

را به روز کنید محتویات با عنوان H2:

<h2>Coaching</h2>

در مرحله بعد، برچسب ماژول متن را برای مراجعات بعدی به روز کنید.

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

• تراز متن: در مرکز
• رنگ متن: روشن

• فونت: Cormorant Garamond
• وزن قلم: پررنگ
• اندازه متن: 40 پیکسل

• عرض: 100%
• حداکثر عرض: 85٪

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

• موقعیت: مطلق
• مکان: مرکز بالا
• افست عمودی: 10%

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

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

• کلاس CSS: et-overlay-item move-down

علاوه بر کلاس "and-overlay-item"، یک کلاس اضافی اضافه می کنیم "حرکت به پایین" به منظور استفاده از CSS سفارشی برای جابجایی هدر کمی به پایین هنگام شناور.

ایجاد متن بدنه همپوشانی

برای ایجاد پوشش متنی بدنه، می‌توانیم ماژول Text مورد استفاده برای همپوشانی هدر را کپی کنیم. قبل از به روز رسانی پارامترهای تکراری، برچسب را به "Overlay Body" تغییر دهید.

تنظیمات متن ماژول جدید Text را باز کنید و آن را به روز کنید محتویات از بدن با چند جمله از متن پاراگراف.

زیر زبانه فناوری، مکان مطلق ماژول را به مرکز تغییر دهید.

از آنجایی که نمی‌خواهیم این مورد به حالت شناور (فقط ظاهر می‌شود)، کلاس CSS را به‌روزرسانی کنید تا فقط موارد زیر را شامل شود:

• کلاس CSS: et-overlay-item

ایجاد دکمه همپوشانی

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

قبل از اصلاح طرح، موقعیت دکمه را به صورت زیر به روز کنید:

• موقعیت: مطلق
• افست عمودی: 10%

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

در برگه فناوری، کلاس CSS را به روز کنید و یک قطعه CSS سفارشی را به صورت زیر به عنصر اصلی اضافه کنید:

• کلاس CSS: et-overlay-item move up

• عنصر اصلی CSS:

min-width: 15em;

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

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

• تراز دکمه: در مرکز
• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 14 پیکسل
• رنگ پس زمینه: #4361ee

• پهنای حاشیه دکمه: 0 پیکسل
• فاصله حروف دکمه ها: 0,1em
• وزن قلم: پررنگ
• سبک قلم دکمه: TT
• بالشتک: 0,8em (بالا و پایین)، 0px (چپ و راست)

افزودن CSS سفارشی با ماژول کد

یک ماژول کد زیر دکمه اضافه کنید.

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

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

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

برای طراحی بیشتر ستون را کپی کنید

لایه modal را باز کنید، ابتدا دو ستون خالی را حذف کنید.

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

ایجاد طرح پوشش تصویر شماره 2

برای این طراحی بعدی، دکمه را در مرکز تصویر (همیشه قابل مشاهده) قرار می دهیم. در مرحله بعد، هدر و متن متن را از بالا و پایین تصویر به نمای منتقل می کنیم.

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

تنظیمات ماژول متن متن همپوشانی را در ستون 2 باز کنید و موقعیت را به روز کنید:

• مکان: پایین مرکز
• افست عمودی: 5%

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

• کلاس CSS: et-overlay-item move up

مکان دکمه و کلاس CSS را تنظیم کنید

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

• مکان: مرکز

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

تنظیمات ماژول Divider (رنگ پوشش) را باز کنید و پس زمینه را به صورت زیر تغییر دهید:

• پس زمینه: rgba(67,97,238,0.8)

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

• رنگ پس زمینه: #f72585

تصویر و کلاس CSS را تنظیم کنید

سپس تنظیمات تصویر را باز کرده و یک تصویر جدید (در صورت تمایل) آپلود کنید.

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

• کلاس CSS: et-overlay-image et-scale

توجه داشته باشید که علاوه بر کلاس "et-overlay-image" یک کلاس اضافی به نام "et-scale" وجود دارد که اندازه تصویر را افزایش می دهد و جلوه بزرگنمایی در شناور ایجاد می کند.

ایجاد طرح پوشش تصویر شماره 3

اکنون نوبت به ایجاد طرح پوشش سوم تصویر در ستون 3 می رسد.

محتوای متن متن و کلاس CSS را تنظیم کنید

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

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

تنظیم افست دکمه و کلاس CSS

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

• افست عمودی: 5%

سربرگ Overlay را حذف کنید

سپس، ماژول Overlay Header Text را حذف کنید.

رنگ همپوشانی و کلاس CSS را تنظیم کنید

تنظیمات ماژول Divider (رنگ پوشش) را باز کنید و پس زمینه را به موارد زیر به روز کنید:

• رنگ گرادیان پس زمینه سمت چپ: rgba (67,97,238,0.8)
• رنگ گرادیان پس زمینه سمت راست: rgba (247,37,133,0.8)
• موقعیت شروع: 25%
• موقعیت نهایی: 75%

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

کلاس CSS تصویر را تنظیم کنید

در نهایت، یک کلاس CSS اضافی ("et-rotate") به تصویر اصلی اضافه می کنیم که اندازه تصویر را تغییر می دهد و در حالت شناور می چرخد.

• کلاس CSS: et-overlay-image et-rotate

لمس های نهایی

قبل از بررسی نتایج نهایی خود، باید برخی تنظیمات را انجام دهیم.

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

از آنجایی که ما قبلاً حاشیه را با حاشیه پایین 0 پیکسل به روز کرده ایم، می توانیم این حاشیه را به همه ماژول ها گسترش دهیم.

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

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

ماژول های کد تکراری را حذف کنید

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

نتایج نهایی

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

دانلود DIVI در حال حاضر!!!

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

دانلود DIVI در حال حاضر!!!

نتیجه

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

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...