آیا می خواهید یاد بگیرید که چگونه یک کارت با جلوه نمونه کارها ایجاد کنید؟ در این آموزش جدید به شما نشان خواهیم داد که چگونه این کار را انجام دهید Elementor.
اگر نمی دانید امروز در مورد چه چیزی می خواهیم صحبت کنیم، از شما دعوت می کنیم ویدیوی زیر را تماشا کنید:
سپس برگردیم به اینکه چرا ما اینجا هستیم.
برای تکمیل این آموزش، شما نیاز دارید نسخه حرفه ای المنتور، زیرا ما از کد CSS سفارشی استفاده خواهیم کرد که فقط توسط این نسخه پشتیبانی می شودElementor.
دفعات بازدید: نحوه نمایش متن بالای تصویر با المنتور
بیایید یک بخش جدید با ساختار 3 ستونی ایجاد کنیم، سپس در پانل، اجازه دهید آن را تعریف کنیم ارتفاع سور حداقل ارتفاع، و سپس حداقل ارتفاع بیایید کلیک کنیم VH و نوار لغزنده را روی 100.
بیایید ستون میانی را انتخاب کنیم و در این ستون ستون را رها کنیم ویجت بخش داخلی. ویجت Internal Section به طور پیش فرض با 2 ستون پیکربندی شده است. در زیر 2 ستون، بیایید ویجت را رها کنیم عنوان با عنوان رستوران، انتخاب کنید H4 برای تگ HTML و مرکز برای هم ترازی
در برگه پیشرفته از ویجت عنوان، اجازه دهید وارد شویم 30 برای حاشیه بالا
بیایید یک بار دیگر بخش داخلی خود را انتخاب کنیم. در پنل، بیایید آن را اصلاح کنیم ارتفاع سور حداقل ارتفاع و حداقل ارتفاع بیایید مکان نما را روی 380. سپس، بیایید ستون سمت راست یا چپ بخش Internal را حذف کنیم
بیایید آن را رها کنیم ویجت تصویر در بخش داخلی و درج یک تصویر از کتابخانه ما. بیایید انتخاب کنیم کل برای اندازه تصویر et مرکز برای هم ترازی.
توجه: اگر میخواهید صفحات کاملی مانند صفحه ما داشته باشید، از شما دعوت میکنیم تا با کمک افزونه کروم GoFullPage از صفحات عکس بگیرید، اما میتوانید از یکی دیگر نیز استفاده کنید.
همچنین کشف کنید: نحوه ایجاد گالری تصاویر با Elementor
سپس در Tab سبک، کلیک کنید PX de عرض، بیایید نوار لغزنده را روی آن تنظیم کنیم 260 همکاران له پرتوهای مرزی سور 10
سپس با تغییر Blur به 40 و Diffuse به -10، Box Shadow را تغییر می دهیم.
در تب Advanced، در بخش تثبیت موقعیت، انتخاب کنید مطلق برای موقعیت, جهت گیری افقی سور چپ دستاز میشود décalage سور 0، L 'جهت گیری عمودی سور حجاری و نقوش برجسته.
بیایید ویجت Image خود را دو بار کپی کنیم. به ناچار همه آنها روی هم قرار می گیرند. بیایید Navigator را باز کنیم تا بتوانیم به سایر ویجتهای پنهان شده توسط اولی دسترسی داشته باشیم.
بیایید تصویر ویجت دوم و در Tab آن را جایگزین کنیم پیشرفته، بیایید آنها را اصلاح کنیم حاشیه های پایین et چپ دست با ورود 30 برای هر. اکنون یک تاخیر جزئی خواهید دید،
همین کار را برای ویجت تصویر سوم انجام دهید، اما حاشیههای آن را اعمال کنید 60 برای حاشیه های پایین و چپ. اکنون باید یک نمای کلی از هر 3 ویجت تصویر داشته باشید.
بیایید ویجت Internal Section خود را انتخاب کنیم، به Tab آن برویم پیشرفته و در بخش CSS سفارشی، قطعه کد زیر را کپی و جایگذاری کنید:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}
(اگر این بخش را ندارید پس نسخه Pro را ندارید، اگر می خواهید ادامه دهید باید نسخه خود را ارتقا دهید)
حالا اگر ماوس را روی نقشه ما نگه دارید، یک انیمیشن بزرگنمایی خواهید داشت
بیایید اولین ویجت تصویر خود را (پایین ترین) و در تب آن انتخاب کنیم پیشرفته، بگیریم front-img برای کلاس های CSS.
برای ویجت تصویر دوم، اجازه دهید تایپ کنیم mid img برای کلاس های CSS
برای سومین ویجت تصویر، اجازه دهید تایپ کنیم آخرین ایمگ برای کلاس های CSS
همچنین ببینید: نحوه ایجاد یک گالری Tabbed از تصاویر با Elementor
اکنون با شناور شدن بر روی ستون ما یک انیمیشن باشکوه از آن را خواهیم دید محتویات از بخش داخلی ما
بیایید صفحه خود را در حالت تبلت نمایش دهیم خواهیم دید که تصاویر به درستی نمایش داده نمی شوند.
اولین ویجت Image را انتخاب کنید، در تب Style آن، اجازه دهید عرض را با کلیک بر روی PC و سپس وارد کردن 150 به عنوان عرض، تغییر دهیم. بیایید همین کار را با 2 ویجت تصویر دیگر انجام دهیم.
بیایید بخش داخلی خود را در بخش آن انتخاب کنیم محتویات، بیایید آن را اصلاح کنیم حداقل ارتفاع سور 225.
بیایید صفحه خود را در حالت تلفن هوشمند نیز نمایش دهیم، پیش از این هیچ مشکلی ایجاد نمی کند. اما، اگر موردی را ارائه کرد، بیایید بخش داخلی خود را در بخش آن انتخاب کنیم محتویات، بیایید حداقل ارتفاع را تغییر دهیم.
حالا بیایید ستون وسط خود را دو بار کپی کنیم، سپس دو ستون خالی دیگر را حذف کنیم.
بیایید عنوان این ستون ها را تغییر دهیم سپس تصاویر را تغییر دهیم
شما باید بخش باشکوهی داشته باشید که نتایج آن در اینجا آمده است:
در اینجا می روید، این کار را به راحتی انجام داده اید.
اکنون Elementor Pro را دریافت کنید!
نتیجه
ایناهاش ! این برای این مقاله است که به شما نشان می دهد چگونه یک کارت با جلوه نمونه کارها ایجاد کنید. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...