Elementor: چگونه یک بخش اعضای تیم ایجاد کنیم

آیا می خواهید یک بخش اعضای تیم ایجاد کنید Elementor ?

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

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

و برای اینکه بفهمید در این آموزش در مورد چه چیزی صحبت می کنیم، شما را به تماشای ویدیوی زیر دعوت می کنیم:

برای شروع، یک صفحه ایجاد کنید و آن را با Elementor ویرایش کنید.

سپس یک ساختار با 3 ستون در دومی، سپس در پانل، زیر زبانه وارد کنید محتویات، Height را روی Min Height قرار دهید و VH Min Height را انتخاب کنید سپس نوار لغزنده را روی 100 قرار دهید.

بیایید ستون میانی را برای ویرایش انتخاب کنیم و به تب Advanced برویم. بیایید تمام حاشیه های داخلی را روی 30 قرار دهیم.

بیایید یک ویجت Inner Section را در این ستون وارد کنیم، سپس یکی از ستون های موجود در بخش داخلی و سپس در پانل زیر برگه را حذف کنیم. محتویات، همچنین ارتفاع را روی حداقل ارتفاع و نوار لغزنده را روی 450 پیکسل قرار می دهیم.

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

در برگه سبک پس زمینه را به کلاسیک و یک تصویر از کتابخانه خود انتخاب کنید.

راهنمای ما را بخوانید: نحوه ایجاد کارت محصول با المنتور

در باره موقعیت Sélectionnez برتر محور, فایل ضمیمه سور پیمایش, دوباره بگو سور تکرار نشدنی et اندازه سور پوشش

در مرزها را تعریف کنید مرزهای سور 12.

بیایید افکت های سایه اضافه کنیم. در Shade of box بیایید اصلاح کنیم عمودی سور 22, تاری سور 40 et منتشر کننده سور -10.

بیایید یک را اضافه کنیم ویجت عنوان در قسمت Internal و نامی برای عضو و سانترون ها ویجت

دفعات بازدید: نحوه تغییر هدر در اسکرول صفحه با Elementor

در برگه سبک، بیایید آن را اصلاح کنیم رنگ متن و فن چاپ انتخاب کنید 22 برای اندازه فونت و 500 برای گریس, دگرگونی سور بزرگ et فاصله بین حروف سور 1.2

سپس بیایید آن را کپی کنیم ویجت عنوان و عنوان ویجت دوم را تغییر دهید و در تایپوگرافی انتخاب کنید 15 برای اندازه فونت و 500 برای عرض، تبدیل در دفوت و فاصله حروف در 1.2

بیایید به برگه برویم پیشرفته و تعریف کنید حاشیه بالا سور -15. بیایید ویجت نمادهای رسانه های اجتماعی را به بخش داخلی خود اضافه کنیم.

بیایید به برگه برویم سبک، رنگ را به Custom تغییر دهید، رنگ اصلی را شفاف کنید و حاشیه های داخلی را روی 0.30 قرار دهید

در برگه پیشرفته، حاشیه ها را تعریف کنید بالا در -15 و پایین در 20

سپس ستون Inner Section را برای اصلاح آن انتخاب کنید و در تب سبک نوع را انتخاب کنید کلاسیک و روی رنگ بیایید بگیریم # FFFFFF28.

همچنین بخوانید: نحوه پیمایش در یک تصویر طولانی از نمونه کارها با Elementor

سپس ستون Inner Section را برای اصلاح آن انتخاب کنید و در تب پیشرفته در مزرعه کلاس های CSS، بگیریم اطلاعات عضو

سپس انتخاب کنید بخش داخلی سپس در برگه پیشرفته در مزرعه CSS سفارشی، کد زیر را قرار دهید:

/ * جلوه شیشه CSS * /

انتخابگر {

    – ارتفاع: 150 پیکسل؛

    -پایین: -150 پیکسل؛

    سرریز: پنهان مهم

}

انتخابگر .member-info {

    ارتفاع: var (–height);

    موقعیت: مطلق؛

    پس زمینه فیلتر: تاری (15 پیکسل)؛

    پایین: 0;

    انتقال: 5s ease-in-out;

}

بعد از اولین کد CSS، موارد زیر را قرار دهید:

/ * CSS برای مخفی کردن یا نمایش در شناور * /

انتخابگر .member-info {

    پایین: var (–پایین)؛

}

انتخابگر: شناور .member-info {

    پایین: 0 پیکسل

}

اکنون وقتی ماوس را روی تصویر می‌برید، اطلاعات اعضا ظاهر می‌شود.

ستون را 2 بار کپی کنید و بقیه ستون های خالی را حذف کنید

سپس Inner Section را انتخاب کنید و تصویر پس زمینه را به تصویر یکی دیگر از اعضای تیم تغییر دهید، نام و حرفه آنها را تغییر دهید، همین کار را با ستون دیگر انجام دهید.

برای مشاهده بهتر، کار خود را در رایانه لوحی و تلفن همراه پیش‌نمایش کنید و حاشیه‌ها و موارد دیگر را بهبود بخشید.

و به این ترتیب می توانید یک بخش فوق العاده برای اعضای تیم ایجاد کنید

اکنون Elementor Pro را دریافت کنید!

نتیجه

بنابراین ! این برای این آموزش است که به شما نشان می دهد چگونه یک بخش عضو تیم ایجاد کنید. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، در این قسمت به ما اطلاع دهید نظر.

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

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

...