بر کسی پوشیده نیست که صفحات «درباره ما» در بالا بردن کلیک شما بسیار خوب هستند سایت اینترنتی. همچنین این نوع صفحه است که بر بخش انسانی کسب و کار در پشت آن تاکید می کند وب سایت. با دانستن این موضوع، متوجه می شویم که توجه به نحوه ساختار صفحات، نوع اطلاعاتی که به اشتراک می گذاریم، و نحوه ایجاد تعاملات مهم است.

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

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

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

بیایید برویم

بررسی

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

دفتر

موبایل

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

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

فاصله

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

• بهترین جاذبه: 100px
• بالشتک پایین: 100px

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

ساختار ستون

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

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

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

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

تنظیمات متن H2

سپس به تنظیمات متن H2 بروید و تغییراتی در شکل کپی ایجاد کنید.

• عنوان 2 فونت: Cinzel
• عنوان سبک 2 قلم: کلاه های کوچک
• عنوان 2 تراز متن: مرکز
• عنوان 2 اندازه متن: 70px

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

دید

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

• نمایش تقسیم: بله

رنگ جداکننده

به برگه Design بروید ، تنظیمات رنگ را باز کرده و بر اساس آن رنگ تقسیم کننده خود را تغییر دهید:

• رنگ جداکننده: # 333333

اندازه

سپس اندازه تقسیم کننده را کاهش می دهیم و آن را مرکز می کنیم.

• عرض: 26٪
• ترتیب ماژول: مرکز

خط 2 را اضافه کنید

ساختار ستون

درست زیر خط قبلی که اضافه کردید ، با استفاده از سه ستون با اندازه مساوی ، یک ردیف جدید اضافه کنید.

اندازه

بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پارامترهای اندازه را تغییر دهید.

• از عرض سفارشی استفاده کنید: بله
• واحد: PX
• عرض سفارشی: 2000px
• از عرض روده ای سفارشی استفاده کنید: بله
• عرض روده: 1
• برابری ارتفاعات ستون: بله

فاصله

سپس به تنظیمات فاصله رفته و مقادیر حاشیه و padding سفارشی را اضافه کنید.

• حاشیه بالایی: 50px
• حاشیه پایین: 50px
• پوشش بالا: 10px
• بالشتک پایین: 10px
• چسباندن چپ: 5px
• اثاثه یا لوازم داخلی راست: 5px
• ستون 1 ، 2 و 3 Padding در سمت چپ: 5px
• ستون 1 ، 2 و 3 در سمت راست: 5px

جعبه سایه

ما همچنین با اضافه کردن یک سایه جعبه با پارامترهای زیر ، خط خود را کمی عمق می بخشیم:

• جعبه Shadow Force Blur Force: 80px
• نیروی انتشار سایه جعبه: -14 پیکسل
• رنگ سایه: rgba (0,0,0,0,3،XNUMX،XNUMX،XNUMX،XNUMX)

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

یک تصویر را در یک ماژول تصویر بارگیری کنید

وقت آن است که شروع به اضافه کردن ماژول ها کنیم! برای دستیابی به اثر شناور بیولوژیکی ، در کل به دو ماژول نیاز خواهیم داشت. یک ماژول تصویر و یک ماژول تاری. ماژول تصویر شامل تصویر عضو تیمی است که می خواهید ارائه دهید.

در عین حال ، از حالت Blurb برای افزودن نماد در گوشه پایین سمت چپ و بیوگرافی شناور استفاده خواهد شد. با استفاده از یک تصویر به اندازه مربع ، یک ماژول تصویر به اولین ستون اضافه کنید.

فیلترها

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

• اشباع: 0٪

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

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

با افزودن یک ماژول Blurb جدید درست در زیر ماژول تصویر در ستون 1 ادامه دهید. نام عضو تیم را به قسمت عنوان اضافه کنید و اطلاعات اضافی درباره عضو تیم را در کادر وارد کنید. محتویات.

یک نماد را انتخاب کنید

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

رنگ پیش زمینه پیش فرض

بعد ، ما یک رنگ زمینه کاملا شفاف را انتخاب می کنیم.

• رنگ پسزمینه: rgba (255,255,255,0)

رنگ پس زمینه در حال حرکت

و ما این تغییر رنگ را تغییر خواهیم داد.

• رنگ پسزمینه: rgba (255,255,255,0.88)

تنظیمات پیش فرض نماد

ما یک نماد قابل مشاهده می خواهیم که کمک کند آخرین بازدید بفهمند که می توانند بر فراز آن پرواز کنند. تنظیمات آیکون را تغییر دهید تا چنین آیکونی دریافت کنید.

• رنگ نماد: #ffffff
• نماد حلقه: بله
• رنگ دایره: # 000000
• مکان نماد: سمت چپ
• از اندازه قلم آیکون استفاده کنید: بله
• اندازه قلم نماد: 50 پیکسل

تنظیم نماد شناور

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

• رنگ نماد: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
• رنگ دایره: rgba (255,255,255,0)

تنظیمات عنوان پیش فرض

سپس به تنظیمات متن عنوان بروید و تغییراتی ایجاد کنید.

• پلیس عنوان: Cinzel
• عنوان فونت: ضخیم
• عنوان سبک قلم: کلاه های کوچک
• عنوان متن رنگی: # 000000
• عنوان متن اندازه: 0px

روی تنظیمات متن عنوان کلیک کنید

تغییر اندازه متن با شناور شدن

• عنوان متن اندازه: 30px

تنظیمات متن پیش فرض بدن

همچنین تنظیمات متن بدن را تغییر دهید.

• پلیس بدن: باز بدون
• متن رنگ بدن: # 000000
• اندازه متن بدن: 0px
• ارتفاع بدن: 1.8em

پارامتر بدن در پرواز

و، دوباره، اندازه بدن متن مواجهه را تغییر دهید.

• اندازه متن بدن: 14px

فاصله پیش فرض

در آخر اما لازم نیست که ما با استفاده از یک حاشیه منفی بالا یک همپوشانی بین ماژول Blurb و ماژول تصویر ایجاد کنیم.

• حاشیه بالایی: -3.7vw (دسک تاپ) ، -9vw (رایانه لوحی و تلفن)
• حاشیه پایین: 1.5vw (رایانه لوحی) ، 2vw (تلفن)

فاصله ثابت

حاشیه سفارشی را تغییر داده و مقادیر آن را دوباره پر کنید.

• حاشیه بالایی: -11,38vw
• پوشش بالا: 20px
• بالشتک پایین: 20px
• اثاثه یا لوازم داخلی راست: 50px

دو ماژول دو بار کلون کنید و تکراری را در ستون های باقیمانده قرار دهید.

ما اولین اثر شناور بیولوژیکی خود را به پایان رسانده ایم. برای صرفه جویی در وقت ، ما می توانیم به سادگی دو ماژول را در ستون 1 دو بار کلون کنیم و نسخه های تکراری را در دو ستون باقی مانده قرار دهیم.

تصویر و محتوای ماژول Blurb را ویرایش کنید

فراموش نکنید که تصویر را در ماژول Image تغییر دهید و برای تکمیل قسمت اعضای تیم ، آن را در ماژول Blurb کپی کنید!

بررسی

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

دفتر

موبایل

آخرین افکار

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

استفاده از افکت های bio hover برای عکس های اعضای تیم نه تنها کیفیت صفحه شما را بهبود می بخشد ، بلکه تعامل با بازدیدکنندگان را نیز ایجاد می کند. اگر س anyال یا پیشنهادی دارید ، حتماً در قسمت نظرات زیر نظر دهید!