به راحتی وب سایت خود را با Elementor بسازید

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

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

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

یک کارت با جلوه نمونه کارها ایجاد کنید

سپس برگردیم به اینکه چرا ما اینجا هستیم.

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

دفعات بازدید: نحوه نمایش متن بالای تصویر با المنتور

بیایید یک بخش جدید با ساختار 3 ستونی ایجاد کنیم، سپس در پانل، اجازه دهید آن را تعریف کنیم ارتفاع سور حداقل ارتفاع، و سپس حداقل ارتفاع بیایید کلیک کنیم VH و نوار لغزنده را روی 100.

بخش 3 ستونی

بیایید ستون میانی را انتخاب کنیم و در این ستون ستون را رها کنیم ویجت بخش داخلی. ویجت Internal Section به طور پیش فرض با 2 ستون پیکربندی شده است. در زیر 2 ستون، بیایید ویجت را رها کنیم عنوان با عنوان رستوران، انتخاب کنید H4 برای تگ HTML و مرکز برای هم ترازی

در برگه پیشرفته از ویجت عنوان، اجازه دهید وارد شویم 30 برای حاشیه بالا

یک کارت با جلوه نمونه کارها ایجاد کنید

بیایید یک بار دیگر بخش داخلی خود را انتخاب کنیم. در پنل، بیایید آن را اصلاح کنیم ارتفاع سور حداقل ارتفاع و حداقل ارتفاع بیایید مکان نما را روی 380. سپس، بیایید ستون سمت راست یا چپ بخش Internal را حذف کنیم

یک کارت با جلوه نمونه کارها ایجاد کنید

بیایید آن را رها کنیم ویجت تصویر در بخش داخلی و درج یک تصویر از کتابخانه ما. بیایید انتخاب کنیم کل برای اندازه تصویر et مرکز برای هم ترازی.

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62.

یک کارت با جلوه نمونه کارها ایجاد کنید

توجه: اگر می‌خواهید صفحات کاملی مانند صفحه ما داشته باشید، از شما دعوت می‌کنیم تا با کمک افزونه کروم 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 را ندارید، اگر می خواهید ادامه دهید باید نسخه خود را ارتقا دهید)

آیا می خواهید محصولات خود را در اینترنت بفروشید؟

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

حالا اگر ماوس را روی نقشه ما نگه دارید، یک انیمیشن بزرگنمایی خواهید داشت

یک کارت با جلوه نمونه کارها ایجاد کنید

بیایید اولین ویجت تصویر خود را (پایین ترین) و در تب آن انتخاب کنیم پیشرفته، بگیریم front-img برای کلاس های CSS.

برای ویجت تصویر دوم، اجازه دهید تایپ کنیم mid img برای کلاس های CSS

برای سومین ویجت تصویر، اجازه دهید تایپ کنیم آخرین ایمگ برای کلاس های CSS

همچنین ببینید: نحوه ایجاد یک گالری Tabbed از تصاویر با Elementor

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

یک کارت با جلوه نمونه کارها ایجاد کنید

بیایید صفحه خود را در حالت تبلت نمایش دهیم خواهیم دید که تصاویر به درستی نمایش داده نمی شوند.

یک کارت با جلوه نمونه کارها ایجاد کنید

اولین ویجت Image را انتخاب کنید، در تب Style آن، اجازه دهید عرض را با کلیک بر روی PC و سپس وارد کردن 150 به عنوان عرض، تغییر دهیم. بیایید همین کار را با 2 ویجت تصویر دیگر انجام دهیم.

بیایید بخش داخلی خود را انتخاب کنیم، در بخش محتوای آن، آن را تغییر دهید حداقل ارتفاع سور 225.

یک کارت با جلوه نمونه کارها ایجاد کنید

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

حالا بیایید ستون وسط خود را دو بار کپی کنیم، سپس دو ستون خالی دیگر را حذف کنیم.

یک کارت با جلوه نمونه کارها ایجاد کنید

بیایید عنوان این ستون ها را تغییر دهیم سپس تصاویر را تغییر دهیم

شما باید بخش باشکوهی داشته باشید که نتایج آن در اینجا آمده است:

یک کارت با جلوه نمونه کارها ایجاد کنید

در اینجا می روید، این کار را به راحتی انجام داده اید.

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

نتیجه

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

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

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

...

0 سهام
سهم
صدای جیر جیر
ثبات