هنگام ایجاد صفحه درباره خود، احتمالاً می خواهید اعضای تیم خود را نیز در آنجا معرفی کنید. با انجام این کار، شما اجازه می دهید آخرین بازدید با افرادی که پشت کسب و کار شما هستند تعامل داشته باشید. اگر به دنبال راهی برای متحرک سازی بخش اعضای تیم خود در اسکرول هستید، ممکن است این آموزش برای شما مفید باشد. ما یک چرخ فلک اعضای تیم پیمایش خودکار ایجاد می کنیم که وقتی شما حرکت می کند آخرین بازدید صفحه را اسکرول کنید
تظاهرات
قبل از اینکه به آموزش برویم ، بیایید نگاهی به نتیجه در اندازه های مختلف صفحه بیندازیم.
آغاز مفهوم
یک بخش جدید اضافه کنید
فاصله
با افزودن یک بخش منظم جدید به صفحه ای که در آن کار می کنید ، شروع کنید. تنظیمات بخش را باز کرده و padding سفارشی را در اندازه های مختلف صفحه اضافه کنید.
- بالشتک بالایی: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)
- بالشتک پایین: 200 پیکسل (میز) ، 100 پیکسل (رایانه لوحی و تلفن)
سرریزهای
برای اطمینان از اینکه هیچ نوار پیمایشی افقی در طراحی ما ظاهر نمی شود ، سرریزهای بخش را در برگه پیشرفته پنهان می کنیم.
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
خط شماره 1 را اضافه کنید
ساختار ستون
با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:
اندازه
بدون افزودن ماژول ، تنظیمات ردیف را باز کنید ، به برگه طراحی بروید و عرض و حداکثر عرض را در تنظیمات اندازه تغییر دهید.
- عرض: 90٪
- حداکثر عرض: 1580px
فاصله
ما همچنین بالشتک های سفارشی بالایی و پایینی را اضافه می کنیم
- بالشتک بالایی: 100px
- بالشتک پایین: 100px
ماژول متن را به ستون اضافه کنید
محتوای H2 را اضافه کنید
وقت آن است که ماژول ها را اضافه کنید، با اولین ماژول متنی شروع کنید. آن را وارد کنید محتویات H2 به انتخاب شما
تنظیمات متن H2
به برگه طراحی ماژول بروید و تنظیمات متن H2 را به صورت زیر تغییر دهید:
- عنوان قلم 2: Quicksand
- عنوان قلم 2: نیمه پررنگ
- رنگ متن مورد 2: # 000000
- هدر 2 اندازه متن: 70px (دسک تاپ) ، 50 پیکسل (تبلت) ، 40 پیکسل (تلفن)
ماژول جداسازی را به ستون اضافه کنید
دید
سپس یک ماژول جداسازی اضافه کنید. مطمئن شوید که گزینه "Show Separator" فعال باشد.
- جداکننده را نشان دهید: بله
خط
سپس در تنظیمات خط تغییراتی ایجاد کنید.
- رنگ خط: # edf000
- سبک خط: جامد
- موقعیت خط: بالا
اندازه
و پارامترهای ماژول را با تغییر پارامترهای ابعاد متناسب با آن کامل کنید:
- وزن تقسیم: 20px
- عرض: 11٪
- ترازبندی ماژول: سمت چپ
- ارتفاع: 20px
یک خط شماره 2 اضافه کنید
ساختار ستون
به ردیف بعدی! از ساختار ستون زیر استفاده کنید:
اندازه
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پارامترهای اندازه را به شرح زیر اصلاح کنید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 2
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
سپس بالشتک چپ و راست را فقط روی صفحه نمایش های کوچکتر اضافه کنید.
- بالشتک چپ: 5٪ (فقط رایانه لوحی و تلفن)
- بالشتک مناسب: 5٪ (فقط رایانه لوحی و تلفن)
پارامترهای ستون (5 برابر)
اکنون ، در سه مرحله بعدی این آموزش ، ما می خواهیم برخی تغییرات را در ستون ها ایجاد کنیم. سه مرحله را به هر یک از ستون های ردیف خود اعمال کنید.
پیشینه شیب
ابتدا به هر ستون یک پس زمینه گرادیان اضافه کنید.
- رنگ 1: rgba (255,255,255,0)
- رنگ 2: rgba (0,0,0,0,84)
- نوع شیب: خطی
- موقعیت شروع: 25٪
- موقعیت نهایی: 86٪
- شیب را بالای تصویر پس زمینه قرار دهید: بله
تصویر پس زمینه
سپس تصویر پس زمینه دلخواه خود را بارگذاری کنید. این تصویر پس زمینه نشان دهنده هر یک از اعضای تیم است ، بنابراین برای هر ستون از تصویر متفاوتی استفاده کنید.
- اندازه تصویر پس زمینه: جلد
- موقعیت تصویر پس زمینه: مرکز
عنصر اصلی
تنظیمات ستون را با افزودن CSS سفارشی به عنصر اصلی رایانه لوحی هر ستون کامل کنید. این خطوط کد CSS به ما کمک می کند تا ستون ها را به جای اینکه دو ردیف در کنار هم قرار داشته باشند ، در زیر تبلت قرار دهیم.
عرض: 100٪! مهم؛ حاشیه: 50px 0px 50px 0px! مهم؛
ماژول شخص را به ستون اضافه کنید
اضافه کردن محتوا
برای به اشتراک گذاشتن اطلاعات در مورد اعضای تیم، از ماژول Person استفاده می کنیم. اولین ماژول Person را به ستون 1 اضافه کنید و از آن استفاده کنید محتویات د votre choix.
حذف تصویر
سپس تصویر را حذف کنید. به جای آن از تصویر پس زمینه ستون استفاده می کنیم.
تصویر پس زمینه
سپس ما یک پوشش تصویر را به عنوان تصویر پس زمینه ماژول اضافه خواهیم کرد. می توانید با بارگیری پوشه ابتدای این آموزش ، پوشه مورد نظر خود را پیدا کنید.
- اندازه تصویر پس زمینه: جلد
- موقعیت تصویر پس زمینه: مرکز
تنظیمات متن عنوان
به برگه طراحی ماژول بروید و تنظیمات متن عنوان را به صورت زیر تغییر دهید:
- سطح عنوان: H3
- فونت عنوان: Quicksand
- وزن وزن قلم عنوان: جسورانه
- عنوان متن رنگ: #ffffff
- اندازه متن عنوان: 230٪
تنظیمات متن بدن
همچنین تنظیمات متن بدن را تغییر دهید.
- فونت بدن: باز بدون
- رنگ متن بدن: #ffffff
- ارتفاع خط بدنه: 2,2 em
تنظیمات متن موقعیت
سپس برخی از تنظیمات متن تنظیمات را تغییر دهید.
- موقعیت قلم: Sans Open
- رنگ متن متن: # edf000
فاصله
و تنظیمات ماژول را با افزودن مقادیر padding سفارشی به تنظیمات فاصله کامل کنید.
- بالشتک بالایی: 70٪
- بالشتک پایین: 10٪
- بالشتک چپ: 10٪
- بالشتک راست: 10٪
4 بار ماژول Person را کپی کنید
پس از اتمام ماژول Person ، می توانید کل ماژول را چهار بار کلون کنید.
کپی های تکراری را در ستون های باقی مانده قرار دهید
ماژول های تکراری را در چهار ستون باقی مانده از ردیف قرار دهید. مطمئن شوید که آن را نیز تغییر دهید محتویات.
Row را به چرخ دستی اتومبیل تبدیل کنید
اندازه خط شماره 2 را تغییر دهید
اکنون برای تبدیل این سطر به چرخ فلک عضو تیم پیمایش خودکار ، باید تنظیمات ردیف را دوباره باز کرده و عرض و حداکثر عرض را در تنظیمات اندازه تغییر دهیم.
- عرض: 180٪
- حداکثر عرض: 220٪ (میز) ، 100٪ (تبلت و تلفن)
حرکت افقی خط شماره 2 را اضافه کنید
تنظیمات خط را با اضافه کردن حرکت افقی به تنظیمات اثر پیمایش در برگه پیشرفته کامل کنید و کار شما تمام شد!
- حرکت افقی را فعال کنید: بله
- شروع افست:
- دفتر: 2,5
- تبلت و تلفن: 0
- متوسط افست: 0 (با 40٪)
- پایان افست:
- دفتر: -25 (با 62٪)
- تبلت و تلفن: 0
- اثر حرکت ماشه: وسط عنصر
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
دفتر
آخرین افکار
در این آموزش، ما به شما نشان دادهایم که چگونه با افکتهای اسکرول داخلی خلاق شوید DIVI. به طور خاص، ما یک چرخ فلک اعضای تیم پیمایش خودکار زیبا را بازسازی کردیم. وقتی که آخرین بازدید صفحه را اسکرول کنید، قسمت دیگری از چرخ فلک ظاهر می شود.