آیا می خواهید قابلیت ها یا محصولات خود را در قالب یک برگه ارائه دهید DIVI با افکت شناور؟
آیا به دنبال راه های خلاقانه جدیدی برای نمایش ویژگی ها و/یا محصولات در صفحات وب خود هستید؟
اگر چنین است، به خواندن ادامه دهید زیرا در این مقاله به شما نشان خواهیم داد که چگونه ویژگی‌ها را در برگه‌ها در حالت شناور تنها با استفاده از گزینه‌های داخلی نشان دهید. DIVI. امکاناتی که با این رویکرد دارید بی‌پایان است و مطمئناً به شما امکان می‌دهد آن را درک کنید DIVI در سطح عمیق تر
اثر شناور تب فقط در دسکتاپ رخ می دهد. در اندازه های کوچکتر صفحه نمایش، آنها در شکل های معمولی خود ظاهر می شوند.
بیایید برویم
بررسی
قبل از ورود به این آموزش، بیایید نگاهی به نتیجه ای که می خواهیم به دست آوریم بیندازیم.
بیایید فرآیند ایجاد را با Divi شروع کنیم
یک بخش جدید اضافه کنید
پیشینه شیب
یک صفحه جدید اضافه کنید یا یک صفحه موجود را باز کنید و یک بخش جدید اضافه کنید. تنظیمات بخش را باز کنید و یک پس زمینه گرادیان به بخش اضافه کنید.
- رنگ سمت چپ: #f2f2f2
- رنگ سمت راست: #ffffff
- جهت گرادیان: 87 درجه
- موقعیت چپ: 20%
- موقعیت درست: 80%
فاصله
بعد، تنظیمات فاصله زیر را تغییر دهید:
- بالشتک (بالا و پایین): 0 پیکسل
یک خط جدید اضافه کنید
ساختار ستون
با افزودن یک ردیف جدید به بخش با استفاده از ساختار ستون زیر ، ادامه دهید:
رنگ پس زمینه
بدون افزودن ماژول، تنظیمات ردیف را باز کرده و رنگ پس‌زمینه را تغییر دهید.
- رنگ پس زمینه: #ffffff
اندازه و تراز
در برگه طرح، گزینه را پایین بکشید اندازه گیری و تنظیمات زیر را تغییر دهید:
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض ناودان: 1
- عرض: 400 پیکسل
- تراز ردیف: چپ
اندازه شناور
گزینه را تغییر دهید عرض در تنظیمات اندازه شناور این به خط اجازه می دهد تا هنگام شناور شدن، گسترش یابد.
- عرض (Hover): 2 پیکسل
فاصله
سپس به تنظیمات فاصله در گزینه بروید فاصله
- بالشتک (بالا و پایین): 0 پیکسل
حاشیه (رومیزی)
"20px" را به گوشه سمت راست بالای خط اضافه کنید و همچنین یک حاشیه سمت چپ به خط اضافه کنید.
- گوشه های گرد (رومیزی): 20 پیکسل (گوشه سمت راست بالا)
- عرض حاشیه سمت چپ: 20 پیکسل
- رنگ حاشیه سمت چپ: #6d44ff
مرز روی شناور
با اضافه کردن «20px» به جای آن، گوشه بالا سمت راست و گرد «0px» را در حالت شناور بردارید.
سایه جعبه (رومیزی)
در نهایت یک سایه ظریف اضافه کنید.
- قدرت تاری سایه جعبه: 80 پیکسل
- قدرت پخش سایه جعبه: -10 پیکسل
- رنگ سایه: rgba(0,0,0,0.11)
سایه شناور
و رنگ سایه را به رنگ کاملا شفاف در شناور تغییر دهید.
- Box Shadow: rgba (255,255,255,0)
ماژول Blurb را به ردیف اضافه کنید
اضافه کردن محتوا
اکنون که تغییر همه تنظیمات ردیف را انجام دادیم، می‌توانیم ادامه دهیم و یک ماژول Blurb به ستون اضافه کنیم. با خیال راحت از هر ماژول دیگری که انتخاب می کنید استفاده کنید.
هنگامی که ماژول را اضافه کردید، مقداری اضافه کنید محتویات د votre choix.
نماد را انتخاب کنید
سپس یک نماد مورد نظر خود را انتخاب کنید.
تنظیمات نماد
و ظاهر آیکون را در تنظیمات آیکون تغییر دهید. به برگه بروید طرح
- رنگ نماد: #5323ff
- محل قرارگیری تصویر/آیکون: بالا
- عرض تصویر/آیکون: 50 پیکسل
تنظیمات عنوان متن (رومیزی)
سپس تنظیمات عنوان را تغییر دهید.
- قلم عنوان: Poppins
- تراز متن: در مرکز
- رنگ متن عنوان: #5323ff
- اندازه متن عنوان: 25 پیکسل
- فاصله حروف: -1 پیکسل
- ارتفاع خط: 1 em
تنظیمات عنوان متن را نگه دارید
و ارتفاع ردیف عنوان را در حالت شناور تغییر دهید.
- ارتفاع خط عنوان: 1,5 em
تنظیمات متن بدنه (رومیزی)
سپس به تنظیمات متن بدنه بروید و تغییراتی را اعمال کنید. این شامل تغییر اندازه متن به '0px' است. این به ما کمک می کند متن بدنه فقط در حالت شناور ظاهر شود.
- فونت بدنه: Poppins
- وزن قلم بدن: سبک
- تراز متن: در مرکز
- رنگ متن: #000000
- اندازه متن بدنه: 0 پیکسل (رومیزی)، 15 پیکسل (تبلت و تلفن)
- ارتفاع خط: 2,2 em
تنظیمات متن بدنه روی شناور
برای اطمینان از اینکه متن اصلی در شناور ظاهر می شود، اندازه متن شناور را تغییر دهید.
- اندازه متن بدنه: 15 پیکسل
فاصله گذاری (رومیزی)
برای دادن مقداری فضا به ماژول، پارامترهای فاصله گذاری زیر را تغییر می دهیم:
- بالشتک (بالا و پایین): 80 پیکسل
فاصله شناورها
ما قصد داریم تنظیمات فاصله شناور را تغییر دهیم.
- بالشتک (بالا و پایین): 80 پیکسل
- بالشتک (چپ و راست): 20vw
ردیف کلون 3 بار
هنگامی که ویرایش ردیف اول و ماژول Blurb آن تمام شد، می توانید ادامه دهید و هر چند بار که می خواهید ردیف را شبیه سازی کنید.
ماژول شماره 2 خط و تار را ویرایش کنید
رنگ حاشیه خط را تغییر دهید
بیایید با تغییر رنگ حاشیه سمت چپ خط شروع کنیم.
- رنگ حاشیه سمت چپ: #00ffcc
محتوا و نماد Blurb را ویرایش کنید
سپس تنظیمات ماژول Blurb را باز کرده و نماد را تغییر دهید.
رنگ نماد ماژول Blurb را تغییر دهید
با رنگ آیکون
- رنگ نماد: #00eda6
تغییر رنگ عنوان
و رنگ متن عنوان.
- رنگ متن عنوان: #00eda6
ماژول خط و Burb #3 را ویرایش کنید
رنگ حاشیه خط
بیایید رنگ حاشیه ردیف سمت چپ را تغییر دهیم.
- رنگ حاشیه سمت چپ: #afebff
محتوا و نماد Blurb را ویرایش کنید
بیایید آیکون و را نیز تغییر دهیم محتویات از متن ارائه
رنگ نماد ماژول Blurb را تغییر دهید
همچنین رنگ آیکون را تغییر دهید.
- رنگ نماد: #68d9ff
تغییر رنگ متن عنوان
و همچنین رنگ متن عنوان.
- رنگ متن عنوان: #68d9ff
ماژول شماره 4 خط و تار را ویرایش کنید
رنگ حاشیه خط را تغییر دهید
در ماژول بعدی و آخر، رنگ حاشیه سمت چپ خط را نیز تغییر دهید.
- رنگ حاشیه سمت چپ: #dd87cf
محتوا و نماد Blurb را ویرایش کنید
ماژول Blurb را در ردیف باز کنید و نماد و علامت را تغییر دهید محتویات ماژول du
رنگ نماد ماژول Blurb را تغییر دهید
با رنگ آیکون
- رنگ نماد: #dd6aca
تغییر رنگ متن عنوان
و همچنین رنگ متن عنوان.
- رنگ متن عنوان: #dd6aca
بررسی
اکنون که آموزش را مرور کردیم، بیایید آخرین نگاهی به نتیجه داشته باشیم.
دانلود DIVI در حال حاضر!!!
نتیجه
در این مقاله به شما نشان دادیم که چگونه از گزینه های داخلی Divi فقط برای ایجاد برگه های موجود در شناور استفاده کنید.
این رویکرد به شما کمک می‌کند تا محتوای مربوط به ویژگی‌ها یا محصولات را به صورت تعاملی به اشتراک بگذارید.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
