معرفی و کاربرد ابزارک Divider در المنتور

اگر بخواهید طراحی وب‌سایت شما منظم، خوانا و حرفه‌ای به نظر برسد، استفاده از المان‌های ساده اما کاربردی اهمیت زیادی دارد. یکی از این المان‌ها در المنتور، ابزارک Divider یا همان جداکننده است. شاید در نگاه اول یک خط ساده چندان چشمگیر نباشد، اما همین المان کوچک می‌تواند باعث نظم‌دهی به صفحه، ایجاد فاصله بصری بین بخش‌ها و زیبایی بیشتر طرح شود.

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

روش افزودن جداکننده در المنتور

برای استفاده از ابزارک Divider در المنتور کافی است چند گام ساده را انجام دهید:

• ابتدا سکشنی را که می‌خواهید خط جداکننده در آن قرار گیرد ایجاد کنید.

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

• سپس ظاهر جداکننده را با توجه به رنگ‌بندی و طراحی کلی سایت تنظیم کنید.

بخش‌های تنظیمات Divider

بخش محتوا

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

بخش استایل

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

نکات طراحی هنگام استفاده از جداکننده‌ها

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

• ضخامت خط را به‌گونه‌ای تنظیم کنید که هم قابل مشاهده باشد و هم ظاهر صفحه را شلوغ نکند.

• در مقالات یا صفحات طولانی، از جداکننده‌ها برای تقسیم‌بندی موضوعات استفاده کنید تا کاربر راحت‌تر بخش‌های مختلف را مرور کند.

نتیجه‌گیری

ابزارک Divider در المنتور اگرچه یک قابلیت ساده به نظر می‌رسد، اما در زیباسازی طراحی، ایجاد نظم بصری و افزایش خوانایی نقش بزرگی دارد. این ابزار به شما کمک می‌کند صفحات خود را حرفه‌ای‌تر طراحی کنید و تجربه بهتری برای بازدیدکنندگان رقم بزنید. پیشنهاد می‌شود در تمام طراحی‌های خود از این المان استفاده کنید، به‌ویژه زمانی که متن‌ها یا بخش‌های زیادی در یک صفحه قرار دارند.

منبع : https://ofoghweb.com/divider-widget-elemntor/

راهنمای کامل ذخیره‌سازی و مدیریت قالب‌ها در المنتور

هر طراح وب می‌داند که از دست رفتن اطلاعات می‌تواند به کابوسی بزرگ تبدیل شود. مشکلاتی مثل خرابی سیستم، ویروسی شدن فایل‌ها یا حتی یک اشتباه ساده در ذخیره‌سازی ممکن است تمام زحمات شما را نابود کند. خوشبختانه افزونه المنتور (Elementor) امکاناتی کاربردی برای ذخیره‌سازی، گرفتن خروجی (Export) و وارد کردن قالب‌ها (Import) فراهم کرده است تا همیشه نسخه‌ای امن از طراحی‌های خود داشته باشید.

مزایای استفاده از Import و Export در المنتور

• امنیت داده‌ها: همیشه یک نسخه پشتیبان از طراحی‌هایتان در اختیار دارید.

• سهولت در انتقال: قالب‌های طراحی‌شده را می‌توانید به سایت‌های دیگر منتقل کنید.

• صرفه‌جویی در زمان: به‌جای طراحی دوباره، از قالب‌های آماده خود استفاده کنید.

• انعطاف‌پذیری در ویرایش: امکان وارد کردن قالب و اعمال تغییرات جدید روی آن وجود دارد.

مراحل ذخیره و خروجی گرفتن از قالب‌ها

ذخیره قالب جدید

وقتی در محیط ویرایشگر المنتور مشغول طراحی هستید، در پایین صفحه کنار دکمه Update گزینه‌ای برای ذخیره وجود دارد. کافی است روی آن کلیک کنید و Save as Template را انتخاب کنید. سپس نام مناسبی برای قالب خود مشخص کرده و آن را ذخیره نمایید.

خروجی گرفتن (Export)

پس از ذخیره قالب، می‌توانید روی گزینه Export Template کلیک کنید تا یک نسخه از قالب به‌صورت فایل JSON روی سیستم شما دانلود شود. این فایل همان نسخه پشتیبان است که می‌توانید هر زمان لازم شد دوباره استفاده کنید.

وارد کردن (Import)

برای بارگذاری یک قالب ذخیره‌شده، وارد بخش My Templates شوید. در این قسمت گزینه Import Template را انتخاب کنید و فایل JSON ذخیره‌شده را بارگذاری کنید. بعد از بارگذاری، قالب به لیست شما اضافه می‌شود و می‌توانید آن را روی هر صفحه‌ای اعمال کنید. هنگام اعمال قالب، پیغامی ظاهر می‌شود که هشدار می‌دهد تغییرات صفحه فعلی جایگزین خواهند شد؛ با تأیید این گزینه، قالب وارد صفحه شما می‌شود.

نکات کاربردی برای مدیریت قالب‌ها

• نام‌گذاری استاندارد: برای جلوگیری از سردرگمی بهتر است قالب‌ها را با نام‌های دقیق ذخیره کنید (مثل "Landing-Page-BlackFriday").

• ایجاد نسخه‌های متعدد: از مراحل مختلف طراحی خروجی بگیرید تا در صورت نیاز به نسخه قدیمی‌تر دسترسی داشته باشید.

• ذخیره در فضای ابری: فایل‌های JSON خود را در سرویس‌های ابری مثل Google Drive نگهداری کنید.

• بررسی قبل از انتشار: توصیه می‌شود قالب‌های Import شده ابتدا در یک صفحه تست بارگذاری شوند.

تفاوت Import و Export با ذخیره معمولی

• ذخیره معمولی: تغییرات تنها روی همان صفحه فعلی ثبت می‌شوند.

• ذخیره به‌عنوان قالب: طراحی شما به‌عنوان یک قالب مجزا ذخیره می‌شود و قابلیت استفاده مجدد دارد.

• Export و Import: امکان انتقال قالب‌ها بین سایت‌ها یا نگهداری نسخه پشتیبان را فراهم می‌کند.

نتیجه‌گیری

امکانات ذخیره‌سازی، Import و Export در المنتور یک ابزار ضروری برای هر طراح سایت است. با این قابلیت‌ها، می‌توانید مطمئن باشید هیچ‌گاه طراحی‌هایتان از بین نمی‌رود و همیشه نسخه‌ای برای بازیابی در اختیار دارید. همچنین امکان استفاده مجدد و انتقال قالب‌ها به شما کمک می‌کند تا پروژه‌هایتان سریع‌تر و حرفه‌ای‌تر پیش برود.

منبع : https://ofoghweb.com/save-extract-and-import-files-from-the-library-elemntor/

طراحی اسلایدشو حرفه‌ای در المنتور و اهمیت آن در وب‌سایت‌ها

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

چرا اسلایدشو در طراحی سایت اهمیت دارد؟

• معرفی سریع خدمات و محصولات: اسلایدر بهترین بخش برای نمایش پروموشن‌ها یا معرفی ویژگی‌های کلیدی است.

• جلب توجه مخاطب: تصاویر متحرک نگاه کاربر را در همان ثانیه‌های ابتدایی جذب می‌کنند.

• کاربرد چندمنظوره: از معرفی محصولات گرفته تا نمایش اطلاعیه‌ها و حتی آموزش‌ها.

• افزایش نرخ تبدیل: یک اسلایدشو تبلیغاتی حرفه‌ای می‌تواند بازدیدکننده را به مشتری تبدیل کند.

• ایجاد زیبایی بصری: سایتی که اسلایدشو دارد مدرن‌تر و پویا‌تر دیده می‌شود.

اصول مهم در استفاده از اسلایدرها

برای اینکه اسلایدشو شما علاوه بر زیبایی، عملکرد خوبی هم داشته باشد باید به چند نکته دقت کنید:

1. بهینه‌سازی حجم تصاویر: حجم بالای عکس‌ها سرعت سایت را کاهش می‌دهد.

2. انتخاب رنگ‌بندی مناسب: رنگ‌ها باید با هویت برند و طراحی کلی سایت هماهنگ باشند.

3. تعداد محدود اسلایدها: زیاده‌روی در تعداد اسلایدها باعث کند شدن لود صفحه می‌شود.

4. تمرکز بر پیام اصلی: هر اسلاید باید یک هدف یا پیام مشخص داشته باشد.

5. هماهنگی با موبایل: مطمئن شوید اسلایدشو در موبایل نیز درست نمایش داده می‌شود.

آموزش ساخت اسلایدشو در المنتور

مرحله اول: ایجاد بخش جدید

در صفحه‌ای که می‌خواهید اسلایدشو اضافه کنید، یک سکشن جدید ایجاد کنید.

مرحله دوم: انتخاب پس‌زمینه اسلایدشو

در تنظیمات سکشن، به بخش استایل (Style) بروید و نوع پس‌زمینه را روی Slideshow قرار دهید. سپس تصاویر دلخواه خود را آپلود کنید.

مرحله سوم: تنظیم ویژگی‌ها

• Loop یا تکرار بی‌پایان: تصاویر بدون توقف پشت سر هم نمایش داده شوند.

• مدت زمان هر اسلاید: مشخص کنید هر تصویر چند ثانیه روی صفحه باقی بماند.

• افکت انتقال: انتخاب کنید تغییر تصاویر با چه افکتی انجام شود (مانند Fade یا Slide).

• انیمیشن حرکتی: برای ورود و خروج تصاویر می‌توانید افکت‌های حرکتی اضافه کنید.

• زمان‌بندی انیمیشن: سرعت اجرای افکت‌ها را تنظیم کنید تا روان و جذاب باشند.

مرحله چهارم: استفاده از ویدیو

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

تفاوت اسلاید ثابت و متحرک

• اسلاید ثابت: تنها یک تصویر نمایش داده می‌شود و حرکت یا تغییر ندارد.

• اسلاید متحرک: چندین تصویر یا ویدیو به‌صورت خودکار یا دستی جابه‌جا می‌شوند. این نوع بیشتر در سایت‌ها کاربرد دارد چون پویا و جذاب‌تر است.

نتیجه‌گیری

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

منبع : https://ofoghweb.com/slideshow-capability-elemntor/

راهنمای ساخت منوی لنگر در المنتور برای دسترسی سریع

اگر تا به حال در یک مقاله طولانی به دنبال بخش خاصی بوده‌اید، حتماً می‌دانید چقدر زمان‌بر و خسته‌کننده است که مدام صفحه را بالا و پایین کنید. اینجاست که لینک‌های لنگر یا Anchor Links وارد عمل می‌شوند. این قابلیت به شما اجازه می‌دهد با یک کلیک ساده، کاربر را مستقیماً به بخش مورد نظر هدایت کنید. در المنتور نیز ابزاری به نام ویجت لنگر فهرست طراحی شده که اجرای این قابلیت را بسیار ساده می‌کند.

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

مزایای استفاده از منوی لنگر در صفحات وب

• صرفه‌جویی در زمان کاربر: بازدیدکننده بدون اسکرول دستی به محتوای مورد نیاز می‌رسد.

• کاربرد در صفحات طولانی: به‌خصوص برای لندینگ‌پیج‌ها یا مقالات جامع بسیار ضروری است.

• تقویت تعامل کاربر: کاربران بیشتر روی بخش‌های مختلف کلیک می‌کنند و این یعنی تعامل بیشتر.

• بهبود ساختار صفحه: لینک‌های لنگر نظم محتوایی ایجاد کرده و باعث خوانایی بهتر می‌شوند.

• اثر مثبت روی سئو: گوگل صفحاتی را که ساختار داخلی منظم دارند، بیشتر ارزش‌گذاری می‌کند.

در چه صفحاتی بهتر است از لنگر استفاده کنیم؟

• مقالات آموزشی با طول زیاد

• صفحات معرفی خدمات یک شرکت

• فروشگاه‌های اینترنتی (انتقال سریع از معرفی محصول به مشخصات یا نظرات)

• صفحات فرود (Landing Page) برای معرفی کمپین‌ها یا محصولات خاص

آموزش مرحله به مرحله ساخت لنگر در المنتور

مرحله ۱: انتخاب ابزارک

به محیط ویرایشگر المنتور وارد شوید. در نوار جستجوی ابزارک‌ها، عبارت Menu Anchor یا همان لنگر فهرست را تایپ کرده و ابزارک را انتخاب کنید.

مرحله ۲: قرار دادن ابزارک

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

مرحله ۳: تعریف شناسه (ID)

در تنظیمات ابزارک، یک نام یا شناسه وارد کنید. این شناسه باید یکتا باشد. برای مثال اگر شناسه را features قرار دهید، آدرس شما به شکل #features خواهد بود.

مرحله ۴: ایجاد لینک به شناسه

اکنون کافی است در منو، دکمه یا حتی یک لینک متنی، آدرس #features را وارد کنید. به این ترتیب با کلیک روی لینک، کاربر به سکشن مورد نظر هدایت می‌شود.

نکات مهم برای استفاده بهتر از لنگرها

• از شناسه‌های کوتاه و خوانا استفاده کنید (مثل about-us یا contact)

• در شناسه‌ها از فاصله استفاده نکنید، به‌جای آن خط تیره بگذارید.

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

• اسکرول صفحه باید روان باشد، بنابراین سازگاری نسخه موبایل را بررسی کنید.

• ترکیب منوی اصلی سایت با لینک‌های لنگر تجربه کاربری را به شدت بهبود می‌بخشد.

تفاوت لینک‌های معمولی و لنگر در سایت

ویژگی	لینک معمولی	لینک لنگر
مقصد	صفحه‌ای دیگر	همان صفحه
سرعت دسترسی	متوسط	سریع و فوری
تجربه کاربری	عادی	روان و کارآمد
کاربرد	ناوبری بین صفحات	حرکت درون یک صفحه

چرا المنتور گزینه‌ای ایده‌آل برای پیاده‌سازی منوی لنگر است؟

• رابط کاربری ساده و بدون نیاز به کدنویسی

• امکان اتصال آسان شناسه‌ها به دکمه یا آیتم‌های منو

• شخصی‌سازی کامل شناسه‌ها و ظاهر منو

• سازگاری با موبایل و تبلت

• سرعت بالا و هماهنگی کامل با استانداردهای سئو

نتیجه‌گیری

ویجت لنگر فهرست المنتور یکی از ابزارهای پرکاربرد برای طراحی سایت‌های حرفه‌ای است. این قابلیت به کاربران کمک می‌کند بدون اتلاف وقت به بخش دلخواه خود بروند، که نتیجه آن افزایش رضایت، تعامل بیشتر و حتی بهبود رتبه در گوگل خواهد بود. اگر در طراحی سایت خود از مقالات طولانی یا صفحات فرود استفاده می‌کنید، پیشنهاد می‌شود حتماً از این قابلیت قدرتمند بهره ببرید.

منبع : https://ofoghweb.com/list-anchor-widget-elemntor/

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

در دنیای پررقابت امروز که کاربران هر روز با انبوهی از محتوا روبه‌رو می‌شوند، جلب توجه آن‌ها در همان چند ثانیه اول ورود به سایت اهمیت بالایی دارد. یکی از اصلی‌ترین ابزارها برای این کار، عنوان (Heading) یا همان تیتر اصلی هر صفحه است. این بخش اولین چیزی است که کاربر مشاهده می‌کند و بر اساس آن تصمیم می‌گیرد که در سایت شما بماند یا به سرعت آن را ترک کند. اگر عنوان شما ساده و بدون جذابیت باشد، احتمالاً تأثیر چندانی بر کاربر نمی‌گذارد. اما اگر از یک عنوان متحرک و انیمیشنی استفاده کنید، می‌توانید توجه او را جلب کرده و حس کنجکاوی‌اش را برانگیزید. همین موضوع می‌تواند نرخ ماندگاری کاربران در سایت، افزایش کلیک و حتی فروش شما را به شکل قابل توجهی رشد دهد.

چرا عنوان متحرک اهمیت دارد؟

استفاده از عنوان‌های انیمیشنی تنها جنبه زیبایی ندارد، بلکه تأثیر مستقیم بر رفتار کاربران و در نتیجه بر موفقیت سایت شما دارد. در ادامه به برخی از مهم‌ترین دلایل اهمیت عنوان‌های متحرک اشاره می‌کنیم:

• افزایش جذابیت بصری سایت و ایجاد حس حرفه‌ای بودن

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

• افزایش نرخ کلیک (CTR) و بالا رفتن احتمال خرید یا مطالعه بیشتر

• تقویت برندینگ و ماندگاری بهتر نام برند در ذهن مخاطب

• بهبود تجربه کاربری (UX) و ایجاد حس پویایی در سایت

عنوان ساده یا متحرک؛ کدام بهتر است؟

برای درک بهتر این موضوع، کافی است دو سایت را تصور کنید. در سایت اول عنوان‌ها ساده و بدون حرکت هستند و کاربر به راحتی از کنار آن‌ها عبور می‌کند، بدون اینکه تأثیر خاصی بگیرد. در سایت دوم اما عنوان‌ها با حرکت و افکت نمایش داده می‌شوند و حتی اگر کاربر به دنبال مطلب خاصی نباشد، همین انیمیشن و حرکت او را کنجکاو می‌کند که بیشتر در سایت بماند. همین تفاوت کوچک می‌تواند نرخ خروج کاربر (Bounce Rate) را کاهش داده و زمان ماندگاری را افزایش دهد.

چگونه یک عنوان متحرک در المنتور بسازیم؟

یکی از بهترین ابزارها برای ساخت عنوان‌های انیمیشنی، افزونه المنتور (Elementor) است. این صفحه‌ساز محبوب وردپرس امکانات متنوعی برای طراحی عنوان‌ها، متن‌ها و المان‌های گرافیکی دارد. برای ساخت یک عنوان متحرک در المنتور کافی است مراحل زیر را طی کنید:

مرحله اول: افزودن ابزارک عنوان متحرک

ابتدا در صفحه مورد نظر یک سکشن جدید ایجاد کنید. سپس ابزارک Animated Headline یا همان عنوان متحرک را به داخل سکشن بکشید.

مرحله دوم: تنظیمات محتوا

در این بخش می‌توانید متن اصلی عنوان را وارد کنید، نوع انیمیشن (مانند تایپ شدن، محو شدن یا چرخش) را انتخاب کنید، لینک مورد نظر را اضافه کنید، تراز متن را مشخص کنید و در نهایت تگ HTML (مانند h1، h2 یا h3) را تعیین نمایید. انتخاب درست تگ HTML اهمیت بالایی در سئو دارد و باید برای تیتر اصلی صفحه از h1 و برای زیرعنوان‌ها از h2 یا h3 استفاده کنید.

مرحله سوم: تنظیمات استایل

در بخش استایل، ظاهر عنوان را به‌طور کامل شخصی‌سازی کنید. می‌توانید رنگ متن عادی و رنگ انیمیشن را تغییر دهید، تایپوگرافی را شامل فونت، اندازه، ضخامت و فاصله بین حروف تنظیم کنید، پس‌زمینه یا حاشیه دلخواه تعریف کنید و حتی افکت‌های اضافه مانند سایه متن را اعمال نمایید.

نکات مهم برای بهبود سئو با استفاده از عنوان متحرک

ساخت عنوان متحرک تنها به زیبایی ختم نمی‌شود، بلکه باید مطابق با الگوریتم‌های گوگل هم باشد تا رتبه سایت شما افت نکند. رعایت نکات زیر ضروری است:

1. همیشه از h1 برای عنوان اصلی صفحه استفاده کنید.

2. کلیدواژه اصلی مقاله یا محصول خود را در عنوان بگنجانید.

3. انیمیشن‌ها باید سبک و بهینه باشند تا سرعت بارگذاری سایت کاهش نیابد.

4. حتماً نسخه موبایل را بررسی کنید تا عنوان در آن درست نمایش داده شود.

5. از انیمیشن به شکل افراطی استفاده نکنید، زیرا می‌تواند باعث خستگی کاربر شود.

نمونه‌هایی از کاربرد عنوان‌های متحرک

• فروشگاه‌های اینترنتی: معرفی محصولات جدید یا کمپین‌های تخفیف با عنوان متحرک بسیار مؤثر است.

• سایت‌های خبری: نمایش تیتر مهم‌ترین خبرها به‌صورت انیمیشنی باعث افزایش کلیک می‌شود.

• وبلاگ‌ها: برجسته‌سازی مقالات مهم با تیتر متحرک زمان حضور کاربر را بیشتر می‌کند.

• سایت‌های شرکتی: برای معرفی خدمات کلیدی یا شعار برند استفاده از عنوان متحرک جلوه‌ای خاص ایجاد می‌کند.

جدول مقایسه عنوان ساده و متحرک

ویژگی	عنوان ساده	عنوان متحرک
جذابیت بصری	کم	بسیار زیاد
نرخ کلیک (CTR)	متوسط	بالا
زمان ماندگاری کاربر	کوتاه	طولانی‌تر
مناسب برای برندینگ	محدود	قوی
تأثیر در سئو	معمولی	به شرط بهینه‌سازی بالا

جمع‌بندی

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

منبع : https://ofoghweb.com/animated-title-elemntor-pro/

آموزش ایجاد گالری تصاویر در المنتور

گالری تصاویر یکی از بخش‌های مهم در طراحی سایت است که علاوه بر زیبایی بصری، تأثیر مستقیمی بر معرفی محصولات، نمایش تخفیف‌ها و جذب کاربران دارد. وجود یک گالری حرفه‌ای و کاربرپسند می‌تواند نرخ کلیک و فروش شما را افزایش دهد. مدیریت درست گالری در صفحات مختلف سایت اهمیت بالایی دارد، زیرا باعث می‌شود جلوه‌ای منظم و جذاب‌تر برای کاربر داشته باشد.

راه‌های ساخت گالری

برای ساخت گالری تصاویر در المنتور، دو روش اصلی وجود دارد:

۱. کتابخانه رسانه‌ها

در این روش تصاویر مورد نظر خود را در وردپرس آپلود کرده یا از تصاویر موجود در کتابخانه رسانه استفاده می‌کنید. این روش مطمئن‌تر است زیرا تصاویر همیشه روی هاست شما باقی می‌مانند.

۲. لینک خارجی

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

نحوه ساخت گالری در المنتور

پس از افزودن بخش جدید در صفحه:

1. ابزارک گالری تصاویر (Gallery) را به داخل ستون بکشید.

2. در تنظیمات محتوا، حالت پیکربندی را روی چندگانه (Multiple) قرار دهید.

3. آیتم جدید اضافه کنید، نام گالری را مشخص کرده و تصاویر دلخواه را از کتابخانه انتخاب کنید.

4. با گزینه درج گالری تصاویر را اضافه کنید. بهتر است برای هر تصویر نام مشخصی بگذارید تا مدیریت گالری ساده‌تر شود.

5. تنظیمات طرح‌بندی، ستون‌ها، فاصله‌ها، بارگذاری تنبل (Lazy Load)، پیوند و اندازه تصاویر را طبق نیاز تغییر دهید.

6. از بخش فیلتر می‌توانید فیلترها را فعال یا غیرفعال کنید و افکت‌های هاور یا انیمیشن برای گالری انتخاب کنید.

7. در بخش پوشش (Overlay) نیز می‌توانید پس‌زمینه، عنوان و توضیحات را تغییر دهید.

تنظیمات استایل

در بخش استایل می‌توانید ظاهر گالری را شخصی‌سازی کنید:

• تغییر رنگ و استایل تصاویر در حالت عادی و هاور.

• تنظیم پس‌زمینه و تایپوگرافی متن‌ها.

• تغییر رنگ و افکت فیلترها برای جذابیت بیشتر.

• ایجاد فاصله، حاشیه و استایل دلخواه برای آیتم‌ها.

جمع‌بندی

با المنتور می‌توانید به‌سادگی یک گالری حرفه‌ای و زیبا بسازید. استفاده از کتابخانه رسانه‌ها، مدیریت تصاویر را ساده‌تر می‌کند و با شخصی‌سازی تنظیمات محتوا و استایل، می‌توانید گالری‌هایی جذاب و کاربرپسند ایجاد کنید که هم برای معرفی محصولات و هم برای جلب توجه کاربران بسیار مؤثر است.

منبع : https://ofoghweb.com/use-the-gallery-widget-elemntor/

آموزش ابزارک نظر دهی در المنتور

یکی از مهم‌ترین فاکتورهای اعتمادسازی در سایت‌ها، به‌ویژه فروشگاه‌های اینترنتی، بخش نظرات کاربران است. مشتریان پیش از خرید، معمولاً تجربه دیگران را بررسی می‌کنند و همین موضوع نقش مستقیمی در تصمیم‌گیری آن‌ها دارد. المنتور با ابزارک نظر دهی یا Review Widget این امکان را فراهم می‌کند که شما یک سیستم ساده، زیبا و کارآمد برای نمایش بازخورد کاربران در سایت خود ایجاد کنید.

چرا بخش نظر دهی اهمیت دارد؟

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

مراحل افزودن ابزارک نظر دهی در المنتور

برای استفاده از این قابلیت، کافی است ابزارک Review را از کتابخانه المنتور به بخشی از صفحه بکشید و تنظیمات آن را شخصی‌سازی کنید. دو بخش اصلی برای تنظیمات این ابزارک وجود دارد: محتوا و استایل.

تنظیمات محتوا

• در این بخش می‌توانید تصویر، نام، عنوان و امتیاز کاربر را مشخص کنید.

• آیکن امتیازدهی (مثلاً ستاره‌ها) قابل تغییر است و می‌توانید ظاهر دلخواه خود را اعمال کنید.

• امکان افزودن لینک به شبکه‌های اجتماعی یا بخش‌های دیگر سایت وجود دارد.

• می‌توانید تعداد اسلایدهای نمایش داده‌شده، عرض باکس‌ها (بر اساس درصد یا پیکسل) و نوع صفحه‌بندی (نقطه‌ای، نوار پیشرفت یا کسر) را تنظیم کنید.

• همچنین قابلیت نمایش خودکار اسلایدها و تنظیم سرعت جابه‌جایی وجود دارد.

تنظیمات استایل

این بخش به شما اجازه می‌دهد ظاهر قسمت نظر دهی را متناسب با طراحی کلی سایت تنظیم کنید:

• فاصله بین اسلایدها، حاشیه‌ها و شعاع گوشه‌ها قابل تغییر است.

• رنگ پس‌زمینه، رنگ متن و آیکن‌ها به‌دلخواه تنظیم می‌شوند.

• می‌توانید نوع نمایش متن (زیرخط‌دار، خط‌خورده، ساده و …) و همچنین فاصله خطوط را تغییر دهید.

• تصاویر کاربران یا آیکن‌ها را می‌توان کوچک‌تر یا بزرگ‌تر کرد و حتی برای آن‌ها قاب یا استایل اختصاصی تعریف کرد.

• در بخش جداکننده‌ها نیز امکان فعال یا غیرفعال کردن خطوط جداکننده و تعیین رنگ و ضخامت آن‌ها وجود دارد.

جمع‌بندی

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

منبع : https://ofoghweb.com/add-comment-widgets-in-elmantor/

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

لایت‌باکس (Lightbox) یکی از ویژگی‌های پرکاربرد در طراحی وب‌سایت‌های مدرن است که به کمک آن می‌توان تصاویر، ویدیوها و محتوای چندرسانه‌ای را در یک قاب بازشو جذاب به نمایش گذاشت. این قابلیت در المنتور به‌سادگی قابل اجراست و تجربه کاربری سایت را حرفه‌ای‌تر می‌کند.

لایت‌باکس چیست و چرا مهم است؟

لایت‌باکس قاب یا جعبه‌ای است که هنگام کلیک روی یک دکمه یا عنصر، محتوای مورد نظر شما را به‌صورت برجسته روی صفحه نمایش می‌دهد. این ویژگی به‌ویژه برای نمایش گالری تصاویر، ویدیوهای تبلیغاتی یا معرفی خدمات بسیار پرکاربرد است. استفاده از لایت‌باکس باعث می‌شود کاربر بدون خروج از صفحه اصلی، محتوای مهم را مشاهده کند.

مراحل ساخت لایت‌باکس در المنتور

برای ایجاد یک لایت‌باکس حرفه‌ای در المنتور کافی است مراحل زیر را گام‌به‌گام اجرا کنید:

۱. انتخاب قالب آماده

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

۲. افزودن دکمه به صفحه

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

۳. تنظیمات ویدیو

اگر می‌خواهید لایت‌باکس شما ویدیویی نمایش دهد، در بخش تنظیمات نوع محتوا را روی ویدیو بگذارید. سپس لینک ویدیوی موردنظر خود (از یوتیوب یا هر پلتفرم دیگر) را وارد کنید. با کلیک روی دکمه، ویدیو در لایت‌باکس اجرا می‌شود.

۴. تنظیمات تصویر

برای نمایش تصویر در لایت‌باکس، دوباره روی همان دکمه کلیک کرده و این بار نوع محتوا را روی تصویر بگذارید. تصویر مورد نظر را از کتابخانه رسانه انتخاب کنید و تغییرات را ذخیره نمایید. حالا با کلیک روی دکمه، تصویر به‌صورت لایت‌باکس نمایش داده می‌شود.

نکات کلیدی در استفاده از لایت‌باکس

• این قابلیت محدود به دکمه‌ها نیست؛ می‌توانید روی آیکون‌ها، هدینگ‌ها، لینک‌ها یا حتی تصاویر صفحه هم لایت‌باکس قرار دهید.

• برای جذابیت بیشتر می‌توانید از تصاویر و ویدیوهای باکیفیت استفاده کنید.

• لینک‌های یوتیوب و سایر پلتفرم‌های ویدیویی نیز به‌خوبی در المنتور پشتیبانی می‌شوند.

• ترکیب لایت‌باکس با انیمیشن‌ها و افکت‌های حرکتی المنتور می‌تواند تجربه بصری کاربر را به سطح بالاتری برساند.

جمع‌بندی

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

منبع : https://ofoghweb.com/making-a-light-box-in-elmantor/

آموزش اضافه کردن نقشه سایت با المنتور

نمایش موقعیت مکانی در سایت یکی از مهم‌ترین اقداماتی است که هر کسب‌وکار آنلاین باید انجام دهد. کاربران با مشاهده آدرس و نقشه، راحت‌تر می‌توانند شما را پیدا کنند و همین موضوع باعث افزایش اعتماد و بهبود تجربه کاربری می‌شود. در المنتور، امکان ایجاد نقشه سایت و سفارشی‌سازی کامل آن وجود دارد.

تاثیر افزودن موقعیت مکانی بر سایت

وجود نقشه در سایت، هم برای کاربران و هم برای موتورهای جستجو اهمیت زیادی دارد. از یک سو مشتریان شما با جستجو در گوگل سریع‌تر محل کارتان را پیدا می‌کنند و از سوی دیگر، موتورهای جستجو از طریق نقشه و ساختار سایت، ایندکس بهتری انجام می‌دهند. این موضوع به بهبود سئو و افزایش بازدید سایت کمک می‌کند. در واقع نقشه سایت، دسترسی به بخش‌های مختلف را هم برای کاربران و هم برای ربات‌های گوگل ساده‌تر می‌سازد.

نحوه ایجاد نقشه سایت با المنتور

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

تنظیمات محتوا

در بخش محتوا می‌توانید ستون‌ها و آیتم‌های نقشه را مدیریت کنید. این تنظیمات شامل اضافه کردن یا حذف بخش‌ها، تعیین تعداد ستون‌ها در هر ردیف، و انتخاب تگ‌های عنوان (h1 تا h6) است. همچنین در این قسمت می‌توانید مشخص کنید که نقشه برای موتورهای جستجو نمایش داده شود یا خیر؛ توصیه می‌شود گزینه نوفالو را غیرفعال نکنید تا ایندکس بهتری داشته باشید.
در ادامه می‌توانید نوع نمایش را بر اساس پست‌ها یا دسته‌بندی‌ها تغییر دهید. همچنین امکان مرتب‌سازی بر اساس آیدی یا نام وجود دارد و می‌توانید ترتیب را صعودی یا نزولی کنید. حتی آیتم‌های خالی را نیز می‌توان از طریق بخش «نمایش یا پنهان‌سازی» مدیریت کرد.

تنظیمات استایل

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

جمع‌بندی

افزودن نقشه سایت در المنتور، نه تنها باعث افزایش راحتی کاربران در یافتن موقعیت مکانی شما می‌شود، بلکه نقش مهمی در بهبود سئو و ایندکس بهتر وب‌سایت دارد. با استفاده از تنظیمات محتوایی و استایل المنتور می‌توانید نقشه‌ای دقیق، زیبا و کاملاً هماهنگ با طراحی وب‌سایت خود ایجاد کنید. این قابلیت یک ابزار قدرتمند برای تقویت اعتماد مشتریان و رشد برند آنلاین شما محسوب می‌شود.

منبع : https://ofoghweb.com/add-sitemap-with-elementor/

آموزش طراحی صفحه تماس با ما در المنتور

صفحه تماس با ما در وب‌سایت، قلب ارتباط میان شما و کاربران محسوب می‌شود. اگر این صفحه طراحی مناسبی نداشته باشد، ممکن است بازدیدکنندگان از برقراری ارتباط منصرف شوند. المنتور به‌عنوان یکی از قدرتمندترین صفحه‌سازهای وردپرس، امکان ساخت یک صفحه تماس زیبا، ساده و کاربردی را بدون نیاز به دانش کدنویسی فراهم می‌کند. در ادامه نسخه دوم این آموزش را با توضیحات تکمیلی مرور می‌کنیم.

مراحل ساخت صفحه تماس در المنتور

برای شروع، کافی است یک سکشن جدید ایجاد کرده و عنوان آن را "تماس با ما" قرار دهید. سپس المان‌های لازم مانند دکمه‌ها یا آیکون‌های شبکه‌های اجتماعی را اضافه کنید. برای مثال، اگر بخواهید یک دکمه تماس تلفنی بسازید، کافی است روی دکمه کلیک کنید، در بخش تنظیمات گزینه URL تماس را انتخاب کرده و نوع آن را روی تلفن بگذارید. سپس شماره خود را وارد کنید و به‌روزرسانی را بزنید. به این ترتیب هر کاربری تنها با لمس این دکمه می‌تواند مستقیم با شما تماس بگیرد.

اگر بخواهید ارتباطات گسترده‌تری ایجاد کنید، می‌توانید یک سکشن دیگر برای شبکه‌های اجتماعی اضافه کنید. کافی است آیکون شبکه‌های اجتماعی موردنظر را وارد کنید و لینک پروفایل خود را در قسمت تنظیمات قرار دهید. همچنین با انتخاب گزینه پیام‌رسان می‌توانید امکان تماس سریع در واتساپ، تلگرام یا دیگر پیام‌رسان‌ها را فعال کنید.

اضافه کردن نقشه گوگل مپ یا Waze

برای نمایش آدرس دقیق محل کار یا دفتر، می‌توانید از ویجت نقشه استفاده کنید. در تنظیمات آن، برچسب پویا را انتخاب کرده و گزینه URL تماس را روی Google Maps یا Waze تنظیم کنید. سپس آدرس دقیق خود را وارد کنید. این کار باعث می‌شود کاربران بتوانند موقعیت شما را روی نقشه مشاهده کرده و مسیر را به‌راحتی پیدا کنند.

درج آدرس شبکه‌های اجتماعی

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

افزودن ایمیل به صفحه تماس

برای قرار دادن ایمیل، وارد بخش برچسب پویا شوید، در قسمت اقدامات، URL تماس را انتخاب کنید و نوع آن را روی «ایمیل» بگذارید. سپس آدرس ایمیل خود را وارد نمایید. در بخش ایمیل‌ساز المنتور این امکان وجود دارد که موضوع و متن پیش‌فرض پیام‌ها را هم اضافه کنید تا کاربر هنگام ارسال ایمیل، یک الگوی آماده داشته باشد.

جمع‌بندی

با المنتور می‌توانید یک صفحه تماس کامل شامل دکمه تماس مستقیم، شبکه‌های اجتماعی، موقعیت مکانی روی نقشه و ایمیل بسازید. چنین صفحه‌ای علاوه بر اینکه به حرفه‌ای‌تر دیده شدن وب‌سایت کمک می‌کند، اعتماد کاربران را هم افزایش داده و ارتباط با شما را ساده‌تر می‌سازد. طراحی درست این صفحه نشان‌دهنده اهمیت شما به ارتباط با مشتریان است و می‌تواند تعاملات بیشتری برای کسب‌وکار به همراه داشته باشد.

منبع : https://ofoghweb.com/contact-url-elementor/