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

آیا می خواهید سبک چندین عنصر را تغییر دهید DIVI روی شناور یا بعد از کلیک؟

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

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

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

این ممکن است پیچیده به نظر برسد (مخصوصاً برای مبتدیان)، اما ممکن است از این که چقدر ساده است تعجب کنید.

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

بررسی

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

تغییر عناصر در شناور دکمه

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

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

همچنین ببینید: Divi: نحوه ایجاد منوی چرخ چرخان در شناور

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

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

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

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

بخش 1: طراحی چیدمان بخش

برای شروع، یک ردیف جدید با دو ستون ایجاد کنید.

تنظیمات بخش

قبل از افزودن ماژول ها، تنظیمات بخش را باز کنید و موارد زیر را به روز کنید:

• زمینه: #ffffff

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

• تقسیم کننده (بالا)
  • سبک: اسکرین شات را ببینید
  • رنگ: #ffffff
  • ارتفاع: 5vw

• تقسیم کننده (پایین)
  • سبک: ضبط را ببینید
  • رنگ: #ffffff
  • ارتفاع: 5vw
  • بالشتک (بالا و پایین): 6vw

تصویر (قبل از شناور)

در ستون سمت چپ ردیف دو ستونی، یک ماژول تصویر جدید اضافه کنید.

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

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

• تراز تصویر: در مرکز
• قدرت تمام عرض: بله

تصویر (در حالت شناور یا پس از کلیک)

در مرحله بعد، تصویر دیگری ایجاد می‌کنیم که با نگه‌داشتن یا کلیک روی یک دکمه نمایش داده می‌شود.

برای ایجاد تصویر، ماژول تصویر قبلی را کپی کنید.

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

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

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

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

• شفافیت: 0%

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

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

سپس کد HTML زیر را در کادر قرار دهید محتویات از بدن:

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

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

زیر زبانه طرح، گزینه های سبک H3 را به صورت زیر به روز کنید:

• سرفصل 3:
  • فونت: مونتسرات
  • وزن قلم وزن قلم: فوق العاده پررنگ
  • سبک: TT
  • اندازه متن: 60 پیکسل (کامپیوتر و تبلت)، 40 پیکسل (تلفن)
  • فاصله حروف: 0,06em
  • ارتفاع خط: 2 em

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

یک بخش برای دکمه ایجاد کنید

ابتدا باید یک بخش منظم جدید در زیر بخش فعلی ایجاد کنیم.

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

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

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

متن دکمه را برای خواندن "ادامه..." تغییر دهید.

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

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن: 16 پیکسل
• رنگ متن: #ffffff
• پس زمینه دکمه (رومیزی): #4b4baf
• Backround دکمه (Hover): #67ddc1
• عرض حاشیه: 0 پیکسل

دفعات بازدید: Divi: چگونه یک نماد همبرگر را به ماژول منو اضافه کنیم

• فاصله حروف دکمه ها: 4 پیکسل
• فونت: مونتسرات
• وزن قلم: نیمه پررنگ
• سبک قلم دکمه: TT

• حاشیه (پایین): 0 پیکسل
• بالشتک (بالا و پایین): 1.5em
• بالشتک (چپ و راست): 4 ساعت

قسمت 2: کلاس های CSS را به عناصر اضافه کنید

اکنون که طراحی ما در جای خود قرار دارد، بقیه تغییرات طراحی را با استفاده از کدهای سفارشی (CSS و JQuery) انجام خواهیم داد.

اما قبل از اینکه شروع به اضافه کردن کد سفارشی خود کنیم، باید کلاس‌های CSS را به تمام عناصری که می‌خواهیم با نگه‌داری/کلیک کردن روی دکمه تغییر دهیم، اضافه کنیم.

یک کلاس CSS به بخش اضافه کنید

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

• کلاس CSS: et-change-style_section

یک کلاس CSS به ماژول های Image اضافه کنید

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

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

این تصویری خواهد بود که "قبل از" شناور/کلیک کردن دکمه نمایش داده می شود.

با استفاده از لایه مودال، تنظیمات تصویر دوم (تصویر پنهان شده با فیلتر opacity) را باز کنید و کلاس CSS زیر را اضافه کنید:

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

این تصویری خواهد بود که "پس از" شناور کردن / کلیک کردن روی دکمه نمایش داده می شود.

یک کلاس CSS به ماژول Text اضافه کنید

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

• کلاس CSS: et-style-text

یک کلاس CSS به ماژول Button اضافه کنید

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

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

ما به این کلاس نیاز داریم تا دکمه را برای عملکرد شناور/کلیک در کد بعداً هدف قرار دهیم.

قسمت 3: کد سفارشی را برای تغییر استایل با شناور یا کلیک اضافه کنید

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

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

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

کد jQuery را قرار دهید

سپس JQuery زیر را Paste کنید. مطمئن شوید که کد را در تگ های اسکریپت قرار دهید زیرا ما کد را به یک سند HTML (نه یک فایل JS) اضافه می کنیم.

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

سبک عناصر را با CSS سفارشی تغییر دهید

ماژول Code را باز کنید و CSS سفارشی زیر را در بالای اسکریپت JQuery قرار دهید و مطمئن شوید که آن را در تگ های سبک لازم قرار دهید.

.et_pb_section.et-change-style_section.et-change-style_active {
  background-color:#484db0 !important;
}

سپس CSS اضافی زیر را در تگ های سبک قرار دهید.

.et-change-style_active .et-after-image {
  filter: opacity(100%);
}
.et-change-style_active .et-before-image {
  filter: opacity(0%);
}  

سپس بقیه CSS را در تگ های سبک قرار دهید:

.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
  color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
  color: #67ddc1;
}
.et-toggle-button_active {
  transform: scale(1.1);
  background-color: #67ddc1 !important;
}  
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
  transition: all 0.3s;
}

این تکه‌های CSS از همان مفهوم برای تغییر سبک عنصر زمانی که بخش (یا دکمه) دارای کلاس جدید است استفاده می‌کنند.

نتیجه نهایی (نمای کلی)

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

تغییر سبک با کلیک

برای افزودن عملکرد کلیک، JQuery فعلی را با موارد زیر جایگزین کنید (دوباره مطمئن شوید که در برچسب های اسکریپت پیچیده شده است):

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('Précédent...');
            } else {
                $this.text('Suite...');
            }
        });
    });
})( jQuery );

نتیجه نهایی است.

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

نتیجه

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

شما می توانید از این تکنیک برای موارد مختلف استفاده کنید (قبل و بعد، CTA و غیره)

البته دانستن کمی CSS و JS/JQuery به شما کمک می کند. اما، همانطور که در این آموزش دیدید، برای به دست آوردن نتایج شگفت انگیز نیازی به دانش عمیق کدنویسی ندارید!

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

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

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

...