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

سلام رفیق رایا وردپرسی عزیزم! 😎

تا حالا به این فکر کردی چرا بعضی سایت‌ها اینقدر جذاب و گیرا هستن که کاربر رو مثل آهنربا به خودشون جذب می‌کنن؟ 🤔 خب، راز این سایت‌ها همونطور که حدس می‌زنی، جلب توجه کاربر هست! تو دنیای شلوغ اینترنت، تنها ۳ ثانیه وقت داری تا کاربر رو جذب کنی و نگه داری. یعنی در همون لحظه اولی که کاربر وارد سایتت میشه، باید کاری کنی که تصمیم بگیره بمونه، بیشتر اسکرول کنه و یا سایت رو دیرتر ترک کنه!

حالا چطور می‌تونی توجه کاربر رو جلب کنی تا بیشتر بمونه؟ خیلی ساده! با اضافه کردن المان‌های متفاوت و جذابی که شاید توی سایت‌های دیگه کمتر دیده باشه. تو این پست قراره یه المان چرخشی جالب به صفحه‌ات اضافه کنیم تا توجه کاربر رو به کلی به صفحه سایتت معطوف کنیم! 😊

پس تا آخر این پست منو با نگاه زیبات همراهی کن 🙂

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

×

طراحی باکس دسته‌ بندی خدمات در المنتور با هاور افکت جالب

مطالعه

اضافه کردن المان چرخشی به صفحه برای جلب توجه کاربران 🛞

حالا بریم سراغ اصل مطلب. با استفاده از ویجت HTML المنتور، می‌تونی انیمیشن‌های جذابی به سایتت اضافه کنی که توجه هر کسی رو جلب کنه. این انیمیشن‌ها می‌تونند شامل چرخش و تغییر مقیاس (scale) باشن که به طور مداوم اتفاق میفتن و باعث میشن المان‌های سایتت زنده و پویاتر به نظر برسن.

1. ویجت HTML رو اضافه کن

• برگه‌ای که می‌خوای المان رو بهش اضافه کنی با المنتور باز کن تا وارد محیط ویرایشگر بشی.
• حالا از پنل ویجت‌ها، ویجت «HTML» رو پیدا کن و توی قسمتی از صفحه که می‌خوای، بکش و رها کن.
• حالا کدهای زیر رو درون ویجت HTML ات پیست کن:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

توجه! 🚨 برای تغییر عکس داخل المان چرخشی، کافیه کدهای خط ۱۵۶ رو ویرایش کنی و آدرس URL عکس دلخواهت رو جایگزین کنی. 🖼️

بعد از انجام مراحل، تصویر کار به این شکل در میاد. ولی هنوز کارمون تموم نشده! برای اینکه انیمیشن و افکت چرخش رو به المان اضافه کنیم و استایلش رو تنظیم کنیم، باید کدهای CSS رو بهش اضافه کنیم.

×

ایجاد دارک مود (Dark Mode) در وردپرس و المنتور بدون افزونه

مطالعه

2. کدهای CSS رو اضافه کن

• به تب پیشرفته ویجت HTML برو و در بخش کلاس های CSS کلاس elementor-312 رو به ویجت اختصاص بده.
• تو همون تب پیشرفته به پایین اسکرول کن و در بخش کدهای CSS سفارشی کدهای زیر رو قرار بده:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

هورااااااا! حالا یه المان جذاب و خفن داری. با این المان چرخشی جذاب، می‌تونی توجه کاربر رو به راحتی جلب کنی و سایتت رو از بقیه متمایز کنی. مرسی که مثل همیشه از سایت خودتت حمایت میکنی تا یه آموزش خاص و جذاب دیگه فعلن 🙂

×

ساخت لودینگ «Preloader» برای سایت با المنتور

مطالعه