آیا می خواهید یاد بگیرید که چگونه روی کارت نمایه با افزونه صفحه ساز بزرگنمایی کنید Elementor ?
در این آموزش جدید Elementor، ما به شما نشان خواهیم داد که چگونه افکت زوم را روی کارت نمایه اعمال کنید، در حالی که نام نمایه و همچنین نمادهای شبکه اجتماعی آن را آشکار می کنیم.
اگر نمی دانید امروز در مورد چه چیزی می خواهیم صحبت کنیم، از شما دعوت می کنیم ویدیوی زیر را تماشا کنید:
سپس برگردیم به اینکه چرا ما اینجا هستیم.
برای تکمیل این آموزش، شما نیاز دارید نسخه حرفه ای المنتور، زیرا ما از کد CSS سفارشی استفاده خواهیم کرد که فقط توسط این نسخه پشتیبانی می شودElementor.
بیایید یک بخش جدید با ساختار 3 ستونی ایجاد کنیم، سپس در پانل، اجازه دهید آن را تعریف کنیم ارتفاع سور حداقل ارتفاع، و سپس حداقل ارتفاع بیایید کلیک کنیم VH و نوار لغزنده را روی 100.
بیایید یک ویجت اضافه کنیم بخش داخلی در ستون وسط ویجت Internal Section به طور پیش فرض با 2 ستون پیکربندی شده است، بیایید یکی از آنها را حذف کنیم. بیایید بقیه را در پانل با تغییر آن پیکربندی کنیم ارتفاع سور حداقل ارتفاع و حداقل ارتفاع بیایید مکان نما را روی 400.
در برگه سبک، بیایید آن را اصلاح کنیم پوشش پس زمینه. روی کلیک کنید کلاسیک بر روی نوع پس زمینه، و یک تصویر را از کتابخانه انتخاب کنید و در تنظیمات تصویر، را انتخاب کنید مرکز محور در موقعیت پوشش در اندازه. کدورت در 1 و
در بخش مرزهای کلیک کنید % و وارد شوید 4 برای همه شعاع های محدود
در تعداد کادرها، نوار لغزنده را روی آن تنظیم کنید 0 سور افقی، به 70 سور عمودی، به 63 سور تاری، به -60 سور پخش کننده. شما باید یک افکت سایه زیبا در زیر تصویر خود ببینید.
در بخش داخلی اسلاید ویجت عنوان. همانطور که عنوان وارد استیو جابز می شود، در تب Style، رنگ سفید را انتخاب کنید # FFFFFF. در تایپوگرافی، اندازه را انتخاب کنید 20.
سپس ستون Internal Section Widget را انتخاب کنید و در تب Style با کلیک بر روی Solid، تمام عرض ها را روی 1 و رنگ ها را روی #FFFFFF کلیک کنید.
در برگه پیشرفته، حاشیه ها را به 15 و حاشیه های داخلی روشن است 20.
اکنون آیکون های رسانه های اجتماعی را با کشیدن ویجت Social Media Icons به بخش داخلی وارد کنید.
پیوندهای رسانه های اجتماعی را در برگه ویرایش کنید محتویات با کلیک بر روی هر شبکه اجتماعی. اگر می خواهید شبکه های اجتماعی دیگری را اضافه کنید، روی دکمه افزودن کلیک کنیدیک عنصر
در قسمت Icon Field روی Icon Library کلیک کنید و در نوار جستجو حروف اول شبکه اجتماعی خود را تایپ کنید، به محض اینکه آن را پیدا کردید، آن را انتخاب کرده و بر روی دکمه Insert کلیک کنید.
سپس به تب بروید سبک، در بخش تصویر، رنگ را به رسم.
همچنین راهنمای ما را بخوانید. نحوه اضافه کردن صفحه بندی با المنتور
در باره رنگ اصلیشفافیت را روی حداقل تنظیم کنید.
در باره رنگ ثانویه، رنگ را انتخاب کنید # FFFFFF. در Size، وارد کنید 20، حاشیه داخلی روشن است 0.4.
حالا روی تب کلیک کنید پیشرفته، و در بخش تثبیت موقعیتروی کلیک کنید رسم. بر عرض سفارشی، وارد 0.
کشف کنید نحوه استفاده از Color Picker با المنتور
در باره موقعیت، انتخاب کنید مطلق، در تغییر 15بر جهت گیری عمودی انتخاب کننده حجاری و نقوش برجسته، و انحراف سور 20.
دوباره انتخاب کنید بخش داخلی و در برگه پیشرفته، در بخش CSS سفارشی (اگر این بخش را ندارید، برای ادامه به سرعت به نسخه حرفه ای Elementor ارتقا دهید)
کد زیر را کپی کرده و در این قسمت قرار دهید:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}پیشینی شما نباید چیز زیادی ببینید، اما اگر ماوس را روی تصویر نگه دارید، باید زوم اعمال شده روی تصویر را مشاهده کنید.
حالا کد زیر را بعد از کد قبلی کپی و پیست کنید تا برخی از عناصر ستون نشان داده یا پنهان شوند:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}اکنون به محض اینکه ماوس را بر روی تصویر قرار می دهید، زوم روی تصویر اعمال می شود و نام و نماد شبکه های اجتماعی ظاهر می شود.
بیایید این ستون را 2 بار کپی کنیم و 2 ستون دیگر را حذف کنیم.
تصویر پس زمینه بخش های داخلی و همچنین نام و لینک های شبکه های اجتماعی را تغییر دهید.
در اینجا می روید، این کار را به راحتی انجام داده اید. فقط پیش نمایش کار تبلت و تلفن هوشمند خود را مشاهده کنید، سعی کنید حاشیه ها را برای مطابقت با هر دستگاه تغییر دهید.
اکنون Elementor Pro را دریافت کنید!
نتیجه
بنابراین ! این برای این مقاله است که به شما نشان می دهد چگونه جلوه زوم را روی کارت پروفایل اعمال کنید. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
