Elementor: چگونه یک انیمیشن در شناور ایجاد کنیم

آیا می خواهید یک انیمیشن شناور با Elementor ?

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

از شما دعوت می‌کنیم ویدیوی زیر را تماشا کنید تا ایده‌ای را که می‌خواهیم به شما نشان دهیم به دست آورید.

یک بخش ستونی را وارد کنید سپس در نوار کناری انتخاب کنید حداقل ارتفاع سور ارتفاع

در باره حداقل ارتفاع کلیک کنید VH سپس نوار لغزنده را به سمت آن بکشید 100. همیشه در برگه چیدمان تعریف 650 comme عرض.

ستون و در نوار کناری فیلد را انتخاب کنید چیدمان عمودی انتخاب کنید محیط.

در برگه سبک، رنگ پس زمینه را با کلیک کردن روی انتخابگر رنگ تغییر دهید و تایپ کنید # D37636 سپس در بخش مرز، بگیریم 20 برای همه شعاع های محدود

در برگه پیشرفته، صحافی padding را خاموش کنید و تایپ کنید 75 برای حاشیه های داخلی بالا et حجاری و نقوش برجسته et 25 برای حاشیه های داخلی چپ دست et Droite.

سپس در ستون یک ویجت را بکشید بخش داخلی. بیایید یکی از ستون ها را از قسمت Internal حذف کنیم.

در ستون قسمت داخلی باقیمانده، را رها کنید ویجت عنوان و عنوان را به پپسی لاو.

همچنین راهنمای ما را در اینجا بخوانید: نحوه ایجاد یک کارت افکت از پورتفولیو در المنتور

سپس، در برگه سبک، به متن رنگ سفید بدهید و برای تایپوگرافی مقدار را تنظیم کنید اندازه سور 32از ارتفاع سطر سور 1.2, فاصله بین حروف سور 0.5.

زیر ویجت عنوان، یک را رها کنید ویجت ویرایشگر متن و متن را ویرایش کنید در برگه سبک، رنگ متن را به سفید تغییر دهید و اندازه تایپوگرافی روشن 16از ارتفاع سطر سور 1.5 وفاصله بین حروف سور 0.5.

در برگه پیشرفته حاشیه را تغییر دهید حجاری و نقوش برجسته سور -10.

در بخش تثبیت موقعیت زبانه پیشرفته، اصلاح کنید عرض سور رسم و عرض سفارشی دومی را تنظیم کنید 310.

در زیر پاراگراف الف را اضافه می کنیم ویجت دکمه با برای متن ادامه مطلب.

در برگه سبک به دکمه رنگ بدهید سفید و رنگ متن را روی آن تنظیم کنید خیر.

حالا ستون را انتخاب کنید بخش داخلی، در بخش پیشرفته زبانه پیشرفته لینک را خاموش کنید و روی درصد کلیک کنید سپس حاشیه را تنظیم کنید چپ دست سور 20 و در حاشیه داخلی آن را تعریف کنید چپ دست سور 20.

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

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

در برگه پیشرفته، به بخش بروید موقعیت سور عرض انتخاب کنید آنلاین (خودکار)بر موقعیت انتخاب کنید مطلق و جهت گیری افقی انتخاب کنید راست سپس در انحراف وارد شدن -9.9 و در انحراف از جهت عمودی را وارد کنید -105.

به پایین تر بروید بخش تبدیل تعریف کردن تغییر اندازه سور 0.5.

حالا ستون را انتخاب کنید بخش داخلی و در برگه پیشرفته نام را وارد کنید کلاس های css متن پپسی

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

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

توجه داشته باشید : اگر این بخش را ندارید، باید به آن بروید نسخه حرفه ای المنتور.

حال اگر بخواهیم رنگ پس زمینه را از متن حذف کنیم، ستون اصلی خود را انتخاب کرده و در تب Style رنگ پس زمینه را غیرفعال می کنیم.

در این زمان، انیمیشن شما به طور معمول در مرورگر اجرا می شود.

به نظر می رسد انیمیشن روی تبلت نیز عالی است

اما در گوشی های هوشمند، به طور معمول نمایش داده نمی شود. بیایید این مشکل را حل کنیم.

بیایید مرورگر را نمایش دهیم

در مرورگر Section را انتخاب کنید (مطمئن شوید هنوز در حالت گوشی هوشمند هستید) و مقدار را پایین بیاورید عرض سور 320

سپس ستون اصلی و در تب آن را انتخاب کنید پیشرفته، تمام حاشیه های داخلی را روی 25

در مرورگر، تصویر را انتخاب کنید و در تب سبکروی کلیک کنید PX de عرض و آن را تنظیم کنید 180.

در برگه پیشرفته du ویجت تصویرادامه دهید موقعیت، و انتخاب کنید مطلقبه افست افقی وارد شدن 75 و در تغییر عمودی وارد شدن 236. به طور خلاصه، مطمئن شوید که تصویر خود را با استفاده از آفست های مختلف وسط دایره قرار دهید.

اکنون می توانید پیش نمایش انیمیشن خود را در دستگاه های مختلف مشاهده کنید.

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

نتیجه

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

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

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

...