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

آیا می خواهید یک شبکه ایجاد کنید DIVI سیال بودن در شناور؟

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

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

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

برویم.

بررسی

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

دفتر

موبایل

بیایید فرآیند ایجاد را در Divi شروع کنیم

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

رنگ پس زمینه

یک بخش جدید به صفحه ای که روی آن کار می کنید اضافه کنید. 

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

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

• زمینه: #ffffff

خط شماره 1 را اضافه کنید

ساختار ستون

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

اندازه

بدون افزودن ماژول، تنظیمات خط را باز کنید، به تب بروید طرح، گزینه را پایین بکشید اندازه گیری و پارامترهای اندازه را به صورت زیر تغییر دهید:

• از عرض ناودان سفارشی استفاده کنید: بله
• ناودان با: 1
• عرض: 100%
• حداکثر عرض: 100٪

فاصله

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

• بالشتک (بالا و پایین): 0 پیکسل

مرز

در گزینه Border نیز تغییرات زیر را اعمال کنید:

• سبک های حاشیه (بالا و پایین): 1 پیکسل
• رنگ حاشیه (بالا و پایین): #d3d3d3

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

پس‌زمینه شناور

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

• رنگ 1: rgba (255,255,255,0)
• رنگ 2: #000000
• نوع گرادیان: خطی
• رنگ موقعیت 1: 30%
• قرار دادن گرادیان در بالای تصویر گرادیان: بله

تصویر پس‌زمینه روی شناور

همچنین یک تصویر پس‌زمینه را بارگذاری کنید که در نشانگر ظاهر می‌شود.

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

کلاس CSS

و با اختصاص دادن کلاس CSS زیر در تب، تنظیمات ستون را تکمیل کنید فناوری :

• کلاس CSS: شناور-ستون

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

اضافه کردن متن اندازه H3 (سرفصل 3)

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

تنظیمات متن H3

سپس به تب تغییر دهید طرح از ماژول و پارامترهای متن H3 را به صورت زیر تغییر دهید:

• فونت: Oswald
• وزن قلم وزن قلم: فوق العاده سبک
• عنوان 3 سبک قلم: TT
• رنگ متن: #0a0a0a
• عنوان 3 اندازه متن:
  • دسکتاپ: 3vw
  • تبلت: 7vw
  • تلفن: 14vw
• عنوان 3 فاصله حروف: -2px

اندازه

عرض را در اندازه های مختلف صفحه در تنظیمات اندازه تغییر دهید.

• عرض:
  • رومیزی: 44%
  • قرص: 48٪
  • تلفن: 50%

فاصله

بیایید پارامترهای زیر را نیز در گزینه تغییر دهیم فاصله.

• حاشیه (پایین): 25vh
• بالشتک (بالا و پایین): 5%
• بالشتک (چپ و راست): 4%

مرز

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

• عرض حاشیه (راست و پایین): 1 پیکسل
• رنگ حاشیه (راست و پایین): #d3d3d3

کلاس CSS

و همچنین تنظیمات ماژول را با اختصاص کلاس CSS زیر به ماژول Text تکمیل می کنیم:

• کلاس CSS: hover-title

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

اضافه کردن محتوا

یک ماژول متنی دیگر درست زیر ماژول قبلی با محتویات شرح انتخاب شما

تنظیمات متن

به تب تغییر دهید طرح از ماژول و بر این اساس پارامترهای متن را تغییر دهید:

• فونت متن: Karla
• رنگ متن: #ffffff
• حجم:
  • دسکتاپ: 0,8 vw
  • تبلت: 2vw
  • تلفن: 3.6vw
• ارتفاع خط: 2,2 em

فاصله

همچنین مقادیر حاشیه سفارشی را اعمال کنید.

• بالشتک (پایین): 10%
• بالشتک (چپ و راست): 9%

کلاس CSS

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

• کلاس CSS: hover-text

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

یک توضیح اضافه کنید

ماژول بعدی و آخرین مورد نیاز ما یک ماژول است دکمه. توضیحات دلخواه خود را وارد کنید.

تنظیمات دکمه

پارامترهای ماژول را به صورت زیر تغییر دهید:

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه:
  • دسکتاپ: 1vw
  • تبلت: 2,5 vw
  • تلفن: 4vw
• پهنای حاشیه دکمه: 0 پیکسل
• شعاع حاشیه: 0 پیکسل

• فونت دکمه: Karla
• نمایش نماد دکمه: بله
• محل قرارگیری نماد دکمه: سمت راست
• فقط نمایش نماد روشن برای دکمه: خیر

فاصله

مقادیر فاصله سفارشی را نیز اضافه کنید.

• حاشیه (پایین): 8%
• حاشیه (چپ و راست): 9%
• بالشتک (پایین): 5%
• بالشتک (راست): 20%

سایه جعبه

بعد، یک سایه جعبه اعمال کنید.

• موقعیت افقی سایه جعبه: 0 پیکسل
• موقعیت عمودی سایه جعبه: 2 پیکسل
• رنگ سایه: #000000

کلاس CSS

و با اختصاص دادن کلاس CSS زیر به دکمه، تنظیمات ماژول را تکمیل کنید:

• کلاس CSS: دکمه شناور

استفاده مجدد از ستون 1

ستون های 2، 3 و 4 را حذف کنید

اکنون که ستون اول را ساخته ایم، می توانیم دوباره از آن استفاده کنیم. اولین کاری که می‌خواهیم انجام دهیم این است که ستون‌های خالی را از ردیف خود حذف کنیم.

ستون 1 را سه بار کلون کنید

ستون 1 را با کلون کردن سه بار مجدداً استفاده خواهیم کرد.

تصاویر پس زمینه را در شناور ستون های تکراری تغییر دهید

سپس تصاویر پس زمینه ستون های تکراری را در هر ستون تکراری تغییر دهید.

ویرایش محتوای تکراری

را نیز تغییر دهید محتویات ماژول در هر ستون تکراری.

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

ستون 1

ما باید تنظیمات حاشیه منحصر به فرد را برای هر ستون اعمال کنیم که از ستون 1 شروع می شود.

• عرض حاشیه (راست):
  • دسکتاپ: 1 پیکسل
  • تبلت: 1 پیکسل
  • تلفن: 0 پیکسل
• رنگ (راست): #d3d3d3
• عرض حاشیه (پایین):
  • دسکتاپ: 0 پیکسل
  • تبلت: 1 پیکسل
  • تلفن: 1 پیکسل
• رنگ حاشیه (پایین): #d3d3d3

ستون 2

بعد ستون 2 را داریم.

عرض حاشیه (راست):

• دسکتاپ: 1 پیکسل
• تبلت: 1 پیکسل
• تلفن: 0 پیکسل

رنگ (راست): #d3d3d3عرض حاشیه (پایین):

• دسکتاپ: 0 پیکسل
• تبلت: 1 پیکسل
• تلفن: 1 پیکسل

رنگ حاشیه (پایین): #d3d3d3

ستون 3

و از تنظیمات حاشیه زیر برای ستون 3 استفاده خواهیم کرد:

• عرض حاشیه (راست):
  • دسکتاپ: 1 پیکسل
  • تبلت: 1 پیکسل
  • تلفن: 0 پیکسل
• رنگ (راست): #d3d3d3
• عرض حاشیه (پایین):
  • دسکتاپ: 0 پیکسل
  • تبلت: 1 پیکسل
  • تلفن: 1 پیکسل
• رنگ حاشیه (پایین): #d3d3d3

CSS سفارشی را به تنظیمات صفحه اضافه کنید

تنظیمات صفحه را باز کنید

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

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

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

و خطوط زیر کد CSS را کپی و پیست کنید:

.hover-column:hover .hover-title {
background-color: #000000;
}
 
.hover-column:hover .hover-title h3 {
color: white !important;
}
 
.hover-button {
color: black;
}
 
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
 
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
 
.hover-column:hover::before {
opacity: 0;
}

بررسی

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

دفتر

موبایل

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

نتیجه

در این مقاله نحوه ایجاد یک طرح شناور زیبا را به شما نشان دادیم. 

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

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

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

...