Divi: نحوه نمایش محتوا با شناور روی قسمت تقسیم کننده

آیا می خواهید بدانید که چگونه آشکار کنید محتویات هنگامی که ماوس را بر روی جداکننده بخش در قرار می دهید DIVI ?

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

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

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

بررسی

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

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

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

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

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

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

طراحی اثر شناور بخش تقسیم کننده در Divi

ایجاد بخش و خط

یک بخش منظم با یک ردیف دو ستونی ایجاد کنید.

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

گرادیان پس‌زمینه (چپ): #73ba57
گرادیان پس‌زمینه (راست): #2a4c23
عرض: 80%
حداکثر عرض: 1 پیکسل
تراز بخش: مرکز

عنوان بخش را اضافه کنید

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

<h2>The Juice</h2>

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

فونت: Lato
اندازه متن: 80 پیکسل
فاصله حروف: -5 پیکسل
حاشیه: -50 پیکسل (بالا)، -40 پیکسل (پایین)
شاخص Z: -1

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

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

زیر ماژول Text با عنوان در ستون 1، یک ماژول Image اضافه کنید. سپس یک تصویر با پس زمینه شفاف آپلود کنید. ما از یک تصویر از بسته layout استفاده می کنیم فروشگاه آبجو 240 پیکسل در 300 پیکسل.

تنظیم تراز تصویر در مرکز.

یک ماژول "Call To Action" را در ستون 2 اضافه کنید

در ستون 2، یک ماژول Call To Action اضافه کنید.

برای اطمینان از نمایش دکمه، یک URL پیوند دکمه اضافه کنید.

پس زمینه CTA و یک ظاهر طراحی متن عنوان

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

زمینه: #ffffff
رنگ متن: تیره
قلم عنوان: Lato
وزن قلم عنوان: سنگین
سبک قلم: TT
اندازه متن عنوان: 18 پیکسل

دکمه CTA را سفارشی کنید

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

• استفاده از سبک های سفارشی برای دکمه: بله
• رنگ متن دکمه: #ffffff
• رنگ پس زمینه دکمه: #73ba57
• عرض حاشیه: 0 پیکسل

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

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

عرض حاشیه: 10 پیکسل
رنگ حاشیه: rgba(115,186,87,0.15)

افکت شناور را به اسپلیتر اضافه کرد تا ماژول "Call To Action" آشکار شود

اکنون وقت آن است که افکت شناور را به قسمت تقسیم‌کننده اضافه کنید تا ماژول «Call To Action» آشکار شود. برای این کار ابتدا باید تقسیم کننده های بخش خود را ایجاد کنیم.

دفعات بازدید: Divi: چگونه می توان محتوا را هنگام نگه داشتن ماوس روی برگه ها آشکار کرد

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

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

سبک تقسیم کننده بالا: به اسکرین شات مراجعه کنید
رنگ تقسیم بالا: #73ba57
ارتفاع تقسیم‌کننده: 70% (پیش‌فرض)، 0% (موتور)
بالاتنه تقسیم کننده: افقی

توجه داشته باشید که ارتفاع جداکننده با ارتفاع پیش‌فرض 70% شروع می‌شود، سپس در حالت شناور به ارتفاع 0% تغییر می‌کند.

تقسیم کننده پایین اضافه شد

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

• سبک تقسیم کننده پایین: به اسکرین شات مراجعه کنید
• رنگ تقسیم کننده پایین: #73ba57
• ارتفاع تقسیم‌کننده: 70% (پیش‌فرض)، 0% (موتور)
• تلنگر تقسیم کننده: افقی
• ترتیب: در بالای محتوای بخش

این تقسیم کننده پایینی نیز با ارتفاع 70% شروع می شود که با شناور به 0% کاهش می یابد. با این حال، از آنجایی که گزینه چیدمان شکاف در بالای محتوا تنظیم شده است، تقسیم‌کننده بخش، قسمت پایین ماژول "Call To Action" را در ستون 1 پنهان می‌کند. سپس با شناور، بقیه ماژول نمایان می‌شود.

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

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

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

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

• Box Shadow: اسکرین شات را ببینید
• موقعیت افقی: 0px
• موقعیت عمودی: 0px
• قدرت پخش سایه جعبه: 0 پیکسل (پیش‌فرض)، 150 پیکسل (موتور)
• رنگ سایه: #73ba57

مدت زمان انتقال را کم کنید

برای آخرین مرحله ، اجازه دهید مدت زمان انتقال را کم کنیم.

مدت زمان انتقال: 700 میلی‌ثانیه

نتیجه نهایی

حالا که تمام مراحل را طی کردیم، بیایید نتیجه نهایی را ببینیم.

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

نتیجه

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

در واقع، تنظیم اسپلیتر شناور می تواند به تنهایی یک ویژگی طراحی عالی باشد. علاوه بر این، طرح های نمونه باید به شما کمک کند تا کاوش و طرح های خود را شروع کنید.

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

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

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

...