طراحی سایت

۲۱ مطلب در شهریور ۱۴۰۴ ثبت شده است

  • ۰
  • ۰

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

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

افکت‌ها تنها برای زیبایی نیستند، بلکه می‌توانند هدفمند هم باشند. مثلاً:

  • ایجاد پس‌زمینه محو (Blur) برای برجسته کردن متن روی تصویر.

  • تغییر رنگ یا اشباع (Saturation) برای هماهنگی بهتر با رنگ‌بندی سایت.

  • افزایش کنتراست برای جلب توجه کاربر به یک بخش خاص.

  • تنظیم روشنایی برای ایجاد حال‌وهوای تیره یا روشن متناسب با موضوع سایت.

این تغییرات کوچک، تفاوت بزرگی در تجربه کاربری ایجاد می‌کنند.

مراحل اعمال افکت در المنتور

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

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

  2. تصویر موردنظر خود را انتخاب کنید.

  3. از بخش Style روی گزینه CSS Filters کلیک کنید.

  4. در این قسمت می‌توانید فیلترهای مختلفی را تنظیم کنید:

    • Brightness (روشنایی): کنترل میزان نور تصویر.

    • Contrast (کنتراست): برجسته‌تر کردن جزئیات.

    • Saturation (اشباع): تقویت یا کاهش شدت رنگ‌ها.

    • Blur (تارشدگی): ایجاد پس‌زمینه نرم و محو.

    • Hue (رنگ): تغییر طیف رنگی تصویر.

نکاتی برای استفاده هوشمندانه از افکت‌ها

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

  • برای جلب توجه به یک محصول یا بخش خاص، Contrast یا Brightness را کمی افزایش دهید.

  • همیشه تعادل را حفظ کنید؛ استفاده بیش‌ازحد از افکت‌ها می‌تواند باعث غیرطبیعی شدن طراحی شود.

  • افکت‌ها را با هویت بصری برندتان هماهنگ کنید تا سایت یکپارچه به نظر برسد.

جمع‌بندی

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

منبع : https://ofoghweb.com/css-filters-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

مراحل فعال‌سازی اسکرول افقی در المنتور

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

  1. به بخش استایل (Style) بروید و گزینه‌ی پس‌زمینه (Background) را فعال کنید.

  2. در قسمت حالت عادی (Normal)، جایگاه تصویر، اندازه و نحوه تکرار آن را مشخص کنید.

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

  4. در پایان، گزینه اسکرول افقی را روشن کنید و بر روی دکمه‌ی به‌روزرسانی (Update) کلیک کنید.

قابلیت‌های تکمیلی برای زیباسازی اسکرول افقی

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

  • تنظیم سرعت حرکت برای ایجاد حس روان‌تر یا پویاتر.

  • ترکیب افکت اسکرول با هاور برای جذابیت بصری بیشتر.

  • استفاده از چند تصویر یا گرادیان رنگی به‌عنوان پس‌زمینه.

  • هماهنگی با دیگر انیمیشن‌ها برای ایجاد تجربه کاربری یکپارچه.

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

نتیجه‌گیری

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

منبع: https://ofoghweb.com/horizontal-scrolling-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

چرا Dark Mode برای المنتور مهم است؟

  • حفاظت از بینایی: کاهش نور آبی و شدت روشنایی، فشار کمتری به چشم وارد می‌کند.

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

  • محیط کار مدرن‌تر: ظاهر رابط کاربری حرفه‌ای‌تر و شیک‌تر می‌شود.

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

مراحل فعال‌سازی حالت تیره در المنتور

برای روشن کردن حالت تاریک در المنتور کافی است این مراحل را دنبال کنید:

  1. وارد داشبورد وردپرس شوید.

  2. به بخش Elementor → Settings بروید.

  3. از قسمت Preferences یا تنظیمات عمومی، گزینه Editor Dark Mode را پیدا کنید.

  4. حالت Dark را فعال کرده و تغییرات را ذخیره کنید.

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

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

  • می‌توانید هر زمان بخواهید بین حالت روشن (Light) و تاریک (Dark) جابه‌جا شوید.

  • این قابلیت بیشتر به محیط ویرایشگر مربوط است و ظاهر سایت شما برای بازدیدکنندگان تغییر نخواهد کرد.

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

نتیجه‌گیری

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

منبع : https://ofoghweb.com/dark-mode-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

اهمیت داشتن فرم ثبت‌نام در سایت

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

  • کاربران بتوانند به محتوای ویژه یا بخش‌های محدودشده دسترسی پیدا کنند.

  • شما اطلاعات کلیدی مانند ایمیل و شماره تماس را جمع‌آوری کنید.

  • نرخ بازگشت کاربران به سایت افزایش یابد.

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

مراحل ساخت فرم ثبت‌نام در المنتور

برای طراحی یک فرم ثبت‌نام، کافیست مسیر زیر را دنبال کنید:

  1. ورود به صفحه المنتور: به بخشی از سایت بروید که می‌خواهید فرم ثبت‌نام قرار بگیرد و روی Edit with Elementor کلیک کنید.

  2. افزودن ابزارک فرم: ابزارک «Form» را از لیست المنتور جستجو کرده و به صفحه اضافه کنید.

  3. تنظیم فیلدها: فیلدهای ضروری مثل نام، ایمیل و رمز عبور را انتخاب کنید. در صورت نیاز می‌توانید فیلدهای اضافه مانند شماره تلفن یا انتخاب نقش کاربر را هم اضافه کنید.

  4. تنظیم عملکرد دکمه ارسال: متن دکمه را ویرایش کنید و برای آن رنگ یا افکت دلخواه تعیین کنید.

  5. پیکربندی پس از ارسال: در بخش Actions After Submit گزینه‌هایی مثل ارسال ایمیل یا اتصال به سیستم مدیریت کاربر را فعال کنید.

مدیریت محتوای فرم

در بخش محتوای المنتور، امکان کنترل کامل جزئیات فرم وجود دارد:

  • انتخاب نام مناسب برای فرم (مثلاً «عضویت ویژه»).

  • تنظیم تعداد و نوع فیلدها (متنی، انتخابی، چک‌باکس و …).

  • نوشتن توضیحات بالای هر فیلد برای راهنمایی کاربر.

  • شخصی‌سازی متن و طراحی دکمه ارسال.

  • افزودن آیکون‌های جذاب در کنار فیلدها.

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

ظاهر زیبا کاربران را جذب می‌کند. در بخش استایل می‌توانید همه چیز را کنترل کنید:

طراحی کلی فرم

  • تعیین رنگ پس‌زمینه

  • تغییر فاصله بین خطوط و ستون‌ها

  • افزودن حاشیه‌ها و سایه‌ها

فیلدهای ورودی

  • انتخاب فونت خوانا و جذاب

  • تنظیم اندازه و رنگ فیلدها

  • افزودن افکت‌ها برای تعامل بهتر

دکمه‌ها

  • تغییر رنگ و سایز دکمه ارسال

  • طراحی افکت Hover

  • گرد کردن گوشه‌ها برای سبک مدرن

پیام‌ها

  • نمایش پیام موفقیت بعد از ثبت‌نام

  • هشدار خطا در صورت ناقص بودن اطلاعات

  • طراحی ظاهری پیام‌ها متناسب با قالب سایت

افزونه‌های کاربردی برای ارتقای فرم ثبت‌نام

اگر بخواهید امکانات پیشرفته‌تری به فرم اضافه کنید، افزونه‌های زیر پیشنهاد می‌شوند:

  • WPForms → برای ساخت فرم‌های حرفه‌ای و اتصال به ابزارهای بازاریابی

  • Ultimate Member → برای مدیریت کامل کاربران و نقش‌های مختلف

  • Elementor Pro → با امکانات گسترده‌تر نسبت به نسخه رایگان

نکات کلیدی در طراحی فرم ثبت‌نام موفق

  • فرم باید کوتاه و ساده باشد؛ از کاربر فقط اطلاعات ضروری را بخواهید.

  • حتماً از کپچا برای جلوگیری از ربات‌ها استفاده کنید.

  • طراحی بصری ساده و کاربرپسند در نظر بگیرید.

  • برای کاربران قدیمی امکان ورود سریع (Login) را فراهم کنید.

جمع‌بندی

فرم ثبت‌نام یکی از اولین بخش‌هایی است که کاربران با آن تعامل دارند، بنابراین طراحی درست آن اهمیت بسیار زیادی دارد. با استفاده از المنتور، شما می‌توانید فرم‌هایی زیبا، کاربردی و هماهنگ با هویت برند خود بسازید. همچنین با کمک افزونه‌های جانبی، قابلیت‌های پیشرفته‌تری مثل اتصال به ایمیل مارکتینگ یا مدیریت نقش کاربران را اضافه کنید. به یاد داشته باشید که هرچه فرآیند ثبت‌نام راحت‌تر و جذاب‌تر باشد، کاربران بیشتری به جمع اعضای سایت شما خواهند پیوست.
منبع : https://ofoghweb.com/registration-form-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

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

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

روش درست درج شورت‌کد در المنتور

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

مراحل انجام کار:

  1. وارد محیط طراحی المنتور شوید.

  2. از لیست ابزارک‌ها، ابزارک Shortcode را جست‌وجو کرده و به بخش موردنظر درگ کنید.

  3. شورت‌کد موردنظر خود را در قسمت مربوطه وارد نمایید.

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

نمونه کاربردی:

فرض کنید می‌خواهید یک فرم ثبت‌نام ساخته‌شده با افزونه WPForms را در صفحه خود نمایش دهید. کافی است شورت‌کد مربوط به آن فرم مانند نمونه زیر را در ابزارک شورت‌کد وارد کنید:

 

[wpforms id="4"]

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

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

  • اطمینان از نمایش صحیح و بدون خطا.

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

  • افزایش انعطاف‌پذیری در طراحی سایت.

  • صرفه‌جویی در زمان و جلوگیری از پیچیدگی‌های کدنویسی.

جمع‌بندی

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

منبع : https://ofoghweb.com/insert-shortcode-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

لیست قیمت در کدام بخش سایت قرار می‌گیرد؟

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

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

  • سایت‌های چندصفحه‌ای: قراردادن لیست قیمت در صفحه سفارشات یا خدمات.

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

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

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

ایجاد یک لیست قیمت در المنتور بسیار ساده است و تنها چند دقیقه زمان می‌برد:

  1. وارد محیط طراحی المنتور شوید.

  2. یک سکشن جدید بسازید و ساختار ستونی مناسب را انتخاب کنید.

  3. ابزارک لیست قیمت (Price List) یا جدول قیمت (Price Table) را جست‌وجو کرده و در محل موردنظر درگ کنید.

  4. اطلاعات هر ستون یا آیتم را وارد کنید، از جمله:

    • نام محصول یا خدمت

    • توضیح کوتاه یا ویژگی‌ها

    • مبلغ یا تعرفه

    • دکمه سفارش یا خرید

شخصی‌سازی ظاهر لیست قیمت

المنتور امکانات کاملی برای طراحی و تغییر ظاهر لیست قیمت در اختیار شما قرار می‌دهد. در بخش Style می‌توانید:

  • رنگ پس‌زمینه، متن و کادر را تغییر دهید.

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

  • فاصله‌گذاری و چینش آیتم‌ها را مدیریت کنید.

  • دکمه‌ها را با رنگ و افکت‌های دلخواه طراحی کنید.

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

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

  • شفافیت در هزینه‌ها: مشتری دقیقاً می‌داند برای چه چیزی چه مبلغی پرداخت می‌کند.

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

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

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

نتیجه‌گیری

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

منبع : https://ofoghweb.com/insert-price-list-in-elemntor/

  • حامد نجفی
  • ۰
  • ۰

نوار پیشرفت (Progress Bar) یکی از المان‌هایی است که علاوه بر زیبایی بصری، نقش مهمی در ارائه اطلاعات دارد. این ابزار به شما کمک می‌کند وضعیت یک پروژه، میزان فروش یا حتی سطح مهارت‌هایتان را به‌طور شفاف و ساده به کاربر نشان دهید. همین نمایش گرافیکی باعث می‌شود مخاطب ارتباط بهتری با داده‌ها برقرار کند و درک واضح‌تری از عملکرد شما داشته باشد.

کاربردهای اصلی نوار پیشرفت

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

  • نمایش درصد پیشرفت پروژه‌های کاری یا شخصی.

  • ارائه نتایج نظرسنجی‌ها یا رأی‌گیری‌ها.

  • نمایش درصد موفقیت کمپین‌های تبلیغاتی یا فروش ویژه.

  • معرفی مهارت‌ها در صفحه رزومه یا "درباره من".

  • اطلاع‌رسانی درباره روند رشد یا آمار یک مجموعه.

محل مناسب برای قرارگیری نوار پیشرفت در سایت

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

  • صفحه درباره ما برای معرفی توانایی‌ها و مهارت‌ها.

  • بخش خدمات برای نمایش وضعیت پروژه‌های انجام‌شده.

  • فوتر سایت جهت ارائه خلاصه‌ای از پیشرفت‌ها یا دستاوردها.

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

مراحل ساخت نوار پیشرفت با المنتور

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

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

  2. در لیست ابزارک‌ها، گزینه Progress Bar را جست‌وجو کنید.

  3. آن را در بخش دلخواه صفحه درگ و رها کنید.

  4. در تنظیمات محتوا موارد زیر را سفارشی کنید:

    • عنوان نوار پیشرفت

    • تعیین درصد پیشرفت

    • انتخاب نوع و سبک نوار

    • افزودن متن توضیحی

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

مزایای استفاده از نوار پیشرفت در المنتور

  • ارائه اطلاعات به‌صورت بصری و جذاب.

  • ایجاد اعتماد و شفافیت در ارتباط با کاربران.

  • افزایش زیبایی و حرفه‌ای‌تر شدن ظاهر صفحات.

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

نتیجه‌گیری

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

منبع : https://ofoghweb.com/learn-how-to-insert-a-progress-bar-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

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

چه مواردی را می‌توان در بخش نویسنده قرار داد؟

  • یک جمله معرفی شخصی یا توضیح کوتاه درباره تیم.

  • اشاره‌ای کوتاه به تجربه کاری یا حوزه فعالیت.

  • بیان اهداف و انگیزه‌ها به‌صورت ساده و قابل فهم.

  • استفاده از جمله‌ای خلاق یا الهام‌بخش برای متمایز شدن.

  • نمایش تصویر پروفایل برای ارتباط انسانی‌تر با مخاطب.

بهتر است متن این بخش ساده، واقعی و بدون اغراق باشد تا کاربر به‌راحتی با شما ارتباط برقرار کند.

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

مرحله اول: ورود به قالب Single Post

از پیشخوان وردپرس وارد بخش Templates شوید و قالب Single Post را باز کنید تا بتوانید بخش نویسنده را در مقالات نمایش دهید.

مرحله دوم: افزودن ابزارک Author Box

در محیط المنتور ابزارک Author Box را جست‌وجو کرده و آن را به محل موردنظر (معمولاً انتهای مقاله) درگ کنید.

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

  • افزودن نام نویسنده

  • درج توضیحات یا بیوگرافی کوتاه

  • انتخاب و نمایش تصویر پروفایل

  • قرار دادن لینک شبکه‌های اجتماعی

مرحله چهارم: تنظیمات ظاهری (Style)

  • تغییر رنگ متن، پس‌زمینه و کادر

  • ویرایش فونت و تایپوگرافی متن معرفی

  • تغییر اندازه و استایل تصویر نویسنده

  • افزودن حاشیه یا سایه برای باکس نویسنده

مرحله پنجم: تنظیمات پیشرفته

  • کنترل فاصله‌گذاری (Margin و Padding)

  • انتخاب نوع قاب (دایره‌ای یا مربعی) برای تصویر

  • افزودن انیمیشن یا موشن‌گرافیک

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

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

  • اعتمادسازی: وقتی کاربر بداند پشت مقاله چه کسی قرار دارد، راحت‌تر به محتوا اعتماد می‌کند.

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

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

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

جمع‌بندی

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

منبع : https://ofoghweb.com/authors-information-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

وقتی بازدیدکننده یک شمارشگر معکوس را در سایت می‌بیند، ناخودآگاه با «ترس از دست دادن فرصت» روبه‌رو می‌شود. در نتیجه برای اینکه پیشنهاد یا تخفیف ویژه‌ای را از دست ندهد، زودتر دست به اقدام می‌زند.

موارد استفاده از شمارشگر معکوس

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

  • اطلاع‌رسانی درباره پایان تخفیف‌ها و جشنواره‌های فروش.

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

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

  • معرفی و انتشار محصولات یا خدمات جدید.

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

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

مراحل ساخت شمارشگر معکوس در المنتور

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

  1. وارد محیط طراحی المنتور شوید.

  2. در بخش ابزارک‌ها، گزینه Countdown را جست‌وجو کرده و در سکشن موردنظر قرار دهید.

  3. شمارشگر پیش‌فرض ظاهر می‌شود و شما می‌توانید آن را ویرایش کنید.

  4. در بخش تنظیمات، زمان شروع و پایان را مشخص کرده و در صورت نیاز متن‌های همراه تایمر را تغییر دهید.

  5. در قسمت استایل، رنگ‌ها، فونت‌ها و ظاهر تایمر را متناسب با طراحی کلی سایت تنظیم کنید.

  6. امکان حذف یا افزودن واحدهای زمانی (روز، ساعت، دقیقه و ثانیه) نیز وجود دارد.

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

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

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

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

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

نتیجه‌گیری

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

منبع : https://ofoghweb.com/reverse-counter-elemntor/

  • حامد نجفی
  • ۰
  • ۰

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

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

  • بهبود تجربه کاربری (UX): کاربر به‌سرعت به محتوای موردنظر خود دسترسی پیدا می‌کند.

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

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

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

مراحل افزودن فهرست مطالب در المنتور

برای اضافه کردن فهرست مطالب کافی است مراحل زیر را دنبال کنید:

  1. در صفحه موردنظر یک سکشن جدید بسازید.

  2. ابزارک فهرست مطالب (Table of Contents) را جست‌وجو کرده و در بخش دلخواه قرار دهید.

  3. تنظیمات موردنیاز خود را روی آن اعمال کنید.

این ابزارک سه دسته تنظیمات اصلی دارد:

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

  • وارد کردن عنوان اصلی فهرست.

  • انتخاب سطح تیترها (H1 تا H6) برای نمایش در فهرست.

  • امکان مدیریت ترتیب نمایش یا حذف برخی بخش‌ها.

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

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

  • تعیین حاشیه‌ها، عرض و ظاهر جعبه.

  • تغییر رنگ نشانگر هنگام فعال شدن هر بخش.

  • تنظیم فاصله و سایز برای خوانایی بهتر.

۳. تنظیمات پیشرفته

  • کنترل فاصله داخلی (Padding) و خارجی (Margin).

  • تنظیم مکان قرارگیری جعبه در صفحه.

  • امکان فعال کردن حالت Floating برای ثابت ماندن فهرست هنگام اسکرول.

نکات مهم در طراحی فهرست مطالب

  • همیشه تیترها را با تگ‌های درست (H1، H2، H3 و …) قرار دهید تا در فهرست نمایش داده شوند.

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

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

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

جمع‌بندی

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

منبع : https://ofoghweb.com/content-widget-widget-ele-mntor/

  • حامد نجفی