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

دوست دارید داشته باشید محتویات که هنگام شناور کردن روی زبانه‌های زاویه‌ای قابل توسعه آشکار می‌شود DIVI ?

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

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

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

بررسی

در اینجا نگاهی اجمالی به طرح‌بندی تب‌های گوشه قابل گسترش است که با هم خواهیم ساخت. توجه کنید که جلوه ها و محتوا چقدر متقارن هستند.

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

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

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

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

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

ایجاد طرح‌بندی پوشش‌های محتوای قابل توسعه در Divi

طراحی یک میتر گوشه قابل گسترش از سمت راست پایین

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

قبل از اضافه کردن یک ماژول، پارامترهای خط را به صورت زیر به روز کنید:

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 4

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

راهنمای ما را نیز در ادامه بخوانید Divi: نحوه ایجاد یک شبکه ستون سیال در شناور

بیایید با اضافه کردن یک ماژول Blurb شروع کنیم.

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

تنظیمات ستون 1

هنگامی که تار در جای خود قرار گرفت، تنظیمات ردیف را باز کنید، موارد زیر را به روز کنید:

• تصویر پس زمینه [درج تصویر]
• اندازه تصویر پس زمینه: اندازه واقعی

توجه: برای این مثال ما از تصاویر پس‌زمینه شفاف آبجو استفاده می‌کنیم که از بسته طرح‌بندی گرفته شده‌اند « آبجوسازی". آنها 128 پیکسل در 359 پیکسل هستند، به همین دلیل است که ما از اندازه واقعی تصویر استفاده می کنیم.

حاشیه ستون 1

• گوشه های گرد: 10 پیکسل پایین سمت راست
• عرض حاشیه (راست و پایین): 2 پیکسل
• رنگ حاشیه (راست و پایین): #e94558

CSS سفارشی و سرریز

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

height: 400px;

گزینه کشویی 'دید' و تغییرات زیر را انجام دهید:

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

محتوا را به ماژول Blurb اضافه کنید

اکنون آماده شروع سفارشی سازی ماژول Blurb در ستون 1 هستیم. تنظیمات ماژول را باز کنید و موارد زیر را به روز کنید:

• عنوان: Mango IPA
• بدن:

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>

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

سفارشی سازی ماژول Blurb

به blurb یک رنگ پس زمینه شناور به صورت زیر بدهید:

• پس زمینه (رومیزی): شفاف
• رومیزی (Hover): rgba(255,255,255,0.9)

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

• محل قرارگیری تصویر/آیکون: سمت راست
• قلم عنوان: Oswald
• وزن قلم: نیمه پررنگ
• سبک قلم: TT
• اندازه متن: 40 پیکسل
• رنگ متن بدنه (رومیزی): واضح
• رنگ متن بدنه (Hover): #121212

• عرض تصویر/آیکون: 100 پیکسل (رومیزی)، 64 پیکسل (تلفن)
• عرض محتوا: 100%
• قد: 100%
• بالشتک (رومیزی): 15% (بالا و پایین)، 8% (چپ و راست)
• بالشتک (هور): 8% (بالا، پایین، چپ و راست)

• گوشه های گرد (رومیزی): 20 پیکسل بالا سمت چپ
• گوشه‌های گرد (هور): 10 پیکسل بالا سمت چپ
• پهنای حاشیه (بالا و چپ): 4 پیکسل (رومیزی)، 2 پیکسل (مانوس کردن)
• رنگ حاشیه (بالا و چپ): #e94558

گزینه تبدیل (رومیزی)

• مقیاس تبدیل (X و Y): 50%

• تبدیل ترجمه
  • محور Y: 50%
  • محور X: 30%

همچنین راهنمای ما را در اینجا بخوانید: Divi: نحوه ایجاد یک فوتر چسبنده با افکت "Reveal".

• مبدا تبدیل: پایین و سمت راست

گزینه های تبدیل (موشواره)

• مقیاس تبدیل (Y و X) (Hover): 100%

• Transform Translate (Y and X) (Hover): 0%

برای برگرداندن تصویر برجسته در سمت راست، CSS سفارشی زیر را به ناحیه اضافه کنید محتوای Blurb :

direction: rtl

توجه: "rtl" مخفف است "راست به چپ"، که ترتیب پیش فرض محتوا را تغییر می دهد (از چپ به راست).

نتیجه

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

طراحی یک میتر گوشه قابل گسترش از سمت چپ پایین

ستون تکراری

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

تنظیمات ستون 2 را به روز کنید

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

• گوشه های گرد: 10 پیکسل پایین سمت چپ
• عرض حاشیه (راست): 0 پیکسل
• عرض حاشیه (سمت چپ): 2 پیکسل
• رنگ: #e94558

پارامترهای ماژول Blurb را به روز کنید

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

• تراز متن: سمت راست
• گوشه های گرد (رومیزی): 20 پیکسل بالا سمت راست
• گوشه های گرد (هور): 10 پیکسل بالا سمت راست
• عرض حاشیه سمت چپ: 0 پیکسل
• عرض حاشیه سمت راست: 4 پیکسل (رومیزی)، 2 پیکسل (موشواره)
• رنگ حاشیه سمت راست: #e94558

• Transform Translate (X-Axis) (رومیزی): -30%
• مبدا تبدیل (رومیزی): پایین سمت چپ

سپس مطمئن شوید که CSS سفارشی را در قسمت محتوای Blurb حذف کرده اید.

نتیجه

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

طراحی یک میتر گوشه قابل گسترش از موقعیت بالا سمت راست

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

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

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

• گوشه های گرد: 10 پیکسل بالا سمت راست
• عرض حاشیه پایین: 0 پیکسل
• پهنای حاشیه بالا: 2 پیکسل
• رنگ حاشیه بالایی: #e94558

پارامترهای ماژول Blurb را به روز کنید

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

• گوشه های گرد (رومیزی): 20 پیکسل پایین سمت چپ
• گوشه های گرد (هور): 10 پیکسل پایین سمت چپ
• پهنای حاشیه بالا: 0 پیکسل
• عرض حاشیه پایین: 4px (رومیزی)، 2px (هور)
• عرض حاشیه پایین: #e94558

• Transform Translate (محور Y) (رومیزی): -50%
• مبدا تبدیل: بالا سمت راست

CSS سفارشی

در حال حاضر ما فقط می توانیم قسمت پایین سمت چپ ماژول ارائه را ببینیم که عنوان ما را مانند دو ارائه دیگر در ردیف بالا نمایش نمی دهد. برای نمایش عنوان در برگه، باید با استفاده از CSS سفارشی، عنوان را به سمت چپ پایین محو تغییر دهیم.

CSS سفارشی زیر را به ناحیه اضافه کنید عنوان تار :

position: absolute;
bottom: 0;
left: 15px;

سپس CSS زیر را به قسمت محتوا اضافه کنید محتوای Blurb :

direction: rtl;
height: 100%;

طراحی یک میتر گوشه قابل گسترش از سمت چپ بالا

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

تنظیمات ستون 2 را به روز کنید

در تنظیمات ردیف، تنظیمات ستون 2 را باز کنید و موارد زیر را به روز کنید:

• گوشه های حاشیه: 10 پیکسل بالا سمت چپ
• عرض حاشیه پایین: 0 پیکسل
• پهنای حاشیه بالا: 2 پیکسل
• رنگ حاشیه بالایی: #e94558

پارامترهای ماژول Blurb را به روز کنید

سپس، تنظیمات متن ماژول Blurb را در ستون 2 باز کنید و موارد زیر را به روز کنید:

• گوشه های گرد (رومیزی): 20 پیکسل پایین سمت راست
• گوشه های گرد (هور): 10 پیکسل پایین سمت راست
• پهنای حاشیه بالا: 0 پیکسل
• عرض حاشیه پایین: 4 پیکسل (رومیزی)، 2 پیکسل (موشواره)
• رنگ حاشیه پایین: #e94558

سپس گزینه های تبدیل را به روز کنید:

• Transform Translate (Y-Axis) (رومیزی): -50%
• مبدا تبدیل: بالا سمت چپ

CSS سفارشی

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

position: absolute;
bottom: 0%;
right: 0%;

CSS زیر را نیز در کادر اضافه کنید محتویات :

height: 100%;

طراحی چیدمان را به پایان برسانید

رنگ پس زمینه بخش

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

• زمینه: #efefef

عنوان اضافه کن

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

سپس یک ماژول Text اضافه کنید.

اضافه کردن محتوا: "فصلی".

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

• فونت: Merriweather
• وزن قلم: پررنگ
• سبک: TT
• تراز متن: در مرکز
• رنگ متن: #999999
• اندازه: 50 پیکسل (رومیزی)، 30 پیکسل (تبلت)، 24 پیکسل (تلفن)
• فاصله حروف: 1em

• پد (سمت چپ): 50 پیکسل (رومیزی)، 30 پیکسل (تبلت)، 24 پیکسل (تلفن)

نتیجه نهایی

نتیجه نهایی چیدمان را با گسترش زبانه های گوشه بررسی کنید.

و اینم طراحی روی موبایل.

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

نتیجه

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

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

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

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

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

...