افزونه Elementor

افزونه Elementor Page Builder چیست؟

افزونه Elementor Page Builder یکی از بهترین و پرطرفدارترین صفحه سازهای موجود در سیستم مدیریت محتوای وردپرس می‌باشد که که دارای قابلیت‌های پیشرفته‌ای می‌باشد و در زمینه ساخت صفحات گرافیکی در وردپرس مشابه صفحه‌ساز visual composer عمل می‌کند، این پلاگین با بیش از 5 میلیون نصب فعال بهترین امتیاز را به خود اختصاص داده است و در دو نسخه رایگان و پرمیوم ارائه شده است، در ادامه از سری آموزش صفر تا صد طراحی رایگان سایت به معرفی و آموزش افزونه Elementor خواهیم پرداخت.

ویژگی­‌های افزونه Elementor Page Builder

• قابلیت طراحی به صورت زنده
• بهینه بودن افزونه
• دارای سرعت بالا
• قابلیت ساخت صفحات “به زودی” و “در دست ساخت”
• قابلیت طراحی ساخت صفحات به صورت زنده
• وجود بیش از 100 قالب و الگوی آماده
• قابلیت سازگاری با ووکامرس
• امکان تهیه نسخه پشتیبان از ویرایش‌­های قبلی 
• دارای 30 آیتم مختلف برای استفاده در صفحات 
• قابلیت کدنویسی استاندارد
• پشتیبانی از زبان فارسی 
• راهنمای بصری طراحی سایت (پرمیوم)
• طراحی پاپ آپ­‌های حرفه­‌ای (پرمیوم)
• دارای بیش از 80 ویجت (پرمیوم)
• سازگار با هر نوع قالب و افزونه (پرمیوم)

نحوه کار با صفحه ساز المنتور

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

شما می‌توانید از بخش استایل رنگ متن خودتان را به‌راحتی تغییر دهید. کار جالب دیگری که در افزونه Elementor وجود دارد این است که قابلیت ردیف کردن صفحات در آن وجود دارد. بنابراین ابتدا شما می‌توانید تمامی آیتم‌ها را با کلیک راست روی آنها حذف کنید. سپس روی افزودن ( دکمه +) کلیک کنید تا یک ردیف جدید برای شما ایجاد شود.

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

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

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

استایل

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

پیشرفته

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

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

ولی می‌توانید برای واردکردن متن‌های خود از تب سربرگ اضافه کنید و سپس در می‌توانید در تب استایل با کلیک روی گزینه تایپوگرافی اندازه متن خودتان را تغییر دهید و همچنین ارتفاع متن را تغییر دهید. امکان کم کردن وزن فونت نیز توسط این قسمت امکان‌پذیر است.

آشنایی با امکانات کلی المنتور

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

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

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

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