خانه / افزونه وردپرس / آموزش افزونه Elementor Page Builder و ساخت صفحات زیبا در وردپرس

آموزش افزونه Elementor Page Builder و ساخت صفحات زیبا در وردپرس

آموزش افزونه Elementor Page Builder

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

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

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

صفحه سازهایی مانند Elementor به شما کمک می کنند که طرح بندی سفارشی موردنظر خود برای صفحات سایت تان را بدون تسلط به مهارت های کدنویسی، ایجاد کنید. اگر یک سایت وردپرسی داشته باشید و بخواهید صفحات سفارشی برای سایت خود ایجاد کنید مطمئناً به یکی از بهترین افزونه های صفحه ساز وردپرس در سایت وردپرسی خود نیاز خواهید داشت.

صفحه ساز Elementor Page Builder به شما این امکان را می دهد که با رابط کاربری بصری آن، طرح های سفارشی با پیش نمایش زنده ایجاد کنید. این افزونه ماژول های آماده استفاده زیادی برای تمام المان های طراحی وب دارد. این صفحه ساز با تمام قالب ها و افزونه های استاندارد وردپرس سازگار است.

در این آموزش افزونه Elementor Page Builder را بررسی کرده و نحوه کار با آن را توضیح خواهیم داد.

آموزش افزونه Elementor Page Builder و نحوه ساخت یک صفحه در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام المنتور در پیشخوان وردپرس اضافه می شود.

آموزش افزونه Elementor Page Builder

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

آموزش افزونه Elementor Page Builder

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

آموزش افزونه Elementor Page Builder

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

1- محل قرار گرفتن بلوک های محتوا و تنظیم آنها است.

2- عناصر محتوایی که در دسترس هستند در این قسمت نشان داده می شود.

3- محل دسترسی به تنظیمات کلی صفحه (رنگ ها، فونت ها، اصلاحیه ها و …) است.

4- با کلیک بر روی این تب می توانید یک ابزارک را به صورت عمومی ذخیره کنید. این ویژگی تنها در نسخه Pro این افزونه قابل استفاده است.

5- ابزار سوئیچ کردن (دسکتاپ، تبلت، موبایل).

6- تنظیمات. با کلیک بر روی آیکون تنظیمات می توانید تنظیمات عمومی صفحه شامل عنوان صفحه، وضعیت نمایش آن، انتخاب تصویر شاخص برای صفحه و نمایش یا عدم نمایش عنوان را انجام دهید.

آموزش افزونه Elementor Page Builder

برای ساخت یک صفحه با صفحه ساز المنتور ابتدا باید در مورد سلسله مراتب ساختار صفحه که این افزونه از آن استفاده می نماید، اطلاعاتی داشته باشید. در ادامه آموزش افزونه Elementor Page Builder در مورد ساختار صفحه صحبت خواهیم کرد.

نحوه ساخت صفحه در افزونه Elementor Page Builder

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

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

صفحه ← بخش ها ← ستون ها ← محتوا ← استایل دهی

آموزش افزونه Elementor Page Builder

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

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

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

آموزش افزونه Elementor Page Builder

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

آموزش افزونه Elementor Page Builder

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

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

قالب موردنظر خود که بیشترین شباهت را با آنچه که برای طرح صفحه در ذهن دارید، دارا می باشد را انتخاب کنید. با کلیک بر روی هر قالب، پیش نمایشی از آن نشان داده می شود و با کلیک بر روی دکمه “درج” وارد صفحه شما می گردد.

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

آموزش افزونه Elementor Page Builder

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

آموزش افزونه Elementor Page Builder

حال در ادامه آموزش افزونه Elementor Page Builder به شما نشان خواهیم داد که چگونه با یک قالب خالی صفحه موردنظر خود را بسازید.

طرح بندی اصلی افزونه Elementor از سه بلوک ساختمانی تشکیل شده است: بخش ها (Sections)، ستون ها (Columns) و ابزارک ها (Widgets).

بخش ها بزرگترین بلوک های ساختمانی هستند. هر بخش می تواند چندین ستون داشته باشد. ستون ها در بخش ها قرار می گیرند و محل قرارگیری ابزارک ها هستند. ابزارک ها در داخل ستون ها قرار می گیرند. هر بخش و ستون می تواند سبک ها، رنگ ها، محتویات و … خود را داشته باشد.

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

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

در ادامه آموزش یک قالب خالی ایجاد کرده و عناصر محتوا را با استفاده از افزونه Elementor Page Builder به آن اضافه می کنیم. بنابراین بر روی آیکون + کلیک کرده و یک بخش دو ستونی را انتخاب می کنیم.

آموزش افزونه Elementor Page Builder

صفحه ای مطابق شکل زیر نمایش داده می شود.

آموزش افزونه Elementor Page Builder

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

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

آموزش افزونه Elementor Page Builder

به عنوان مثال در تصویر بالا ابزارک سربرگ را کشیده و در ستون سمت چپ رها می کنیم.

هنگامی که یک بلوک محتوا را در جای خود قرار دادید می توانید برای تنظیم دقیق تر جزئیاتی که در داخل آن قرار دارد، بر روی آن کلیک کنید.

آموزش افزونه Elementor Page Builder

سپس در ستون سمت راست صفحه می توانید تنظیمات آن را پیکربندی کنید. برای انجام این کار سه تب اصلی در ستون سمت راست وجود دارد: محتوا، استایل و پیشرفته

آموزش افزونه Elementor Page Builder

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

با قرار دادن موس بر روی هر بخش (سکشن)، ستون و ابزارک، آیکون های مربوط به ویرایش و کنترل ظاهر می شوند که می توانید از طریق این آیکون ها که به آنها هندل (handle) می گوییم بخش، ستون و ابزارک مورد نظر خود را ویرایش کنید.

آموزش افزونه Elementor Page Builder

از هندل بخش برای اضافه کردن، کشیدن و حذف کردن بخش ها استفاده می شود. برای ویرایش بخش، ستون یا ابزارک روی هندل آنها راست کلیک کنید.

آموزش افزونه Elementor Page Builder

کلیه کنترل های ویرایش برای هر بخش، ستون و ابزارک با راست کلیک کردن بر روی هندل امکان پذیر است.

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

آموزش افزونه Elementor Page Builder

پس از آن می توانید از همان جا صفحه خود را مشاهده کنید.

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

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

آموزش افزونه Elementor Page Builder

سپس روی ذخیره پیش نویس کلیک کنید.

آموزش تنظیمات افزونه Elementor Page Builder برای موبایل، تبلت و دسکتاپ

بسیاری از ویژگی های قابل ویرایش دارای تنظیمات موبایل، تبلت و دسکتاپ هستند. متداول ترین کاربردها شامل اندازه متن، مارجین و پدینگ المان ها و … هستند.

برای اعمال تنظیمات برای موبایل، تبلت و دسکتاپ به ترتیب زیر عمل کنید:

روی آیکون حالت واکنش گرا کلیک کنید.

آموزش افزونه Elementor Page Builder

سپس روی آیکون های ابزارهای مختلف سوئیچ کرده و تنظیمات آنها را پیکربندی نمایید.

با انتخاب هر ابزار، صفحه ساخته شده در آن ابزار نمایش داده می شود.

آموزش افزونه Elementor Page Builder

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

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

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

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

آموزش افزونه Elementor Page Builder

یکی دیگر از قابلیت های افزونه Elementor نمایش دادن یا پنهان کردن بخش هایی از محتوا در ابزارهای مختلف است. برای این کار به مسیر تنظیمات بخش » پیشرفته رفته و در بخش واکنش گرا، نمایش/عدم نمایش بخش مورد نظر خود تنظیم کنید.

آموزش افزونه Elementor Page Builder

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

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

اگرچه افزونه المنتور بسیار قدرتمند بوده و قابلیت ها بسیار زیادی دارد اما با این حال می توانید از افزودنی (add-on) هایی که مخصوص این افزونه طراحی شده و به صورت رایگان و پرمیوم در اختیار کاربران قرار گرفته استفاده کنید و صفحاتی که با افزونه المنتور ساخته اید را کاربردی تر و تعاملی تر نمایید. تا به حال بیش از 130 افزودنی برای المنتور طراحی و عرضه شده است که ابزارک های کاربردی و بسیار متنوعی را به المنتور اضافه می کنند. در مقاله بهترین افزودنی های المنتور مجموعه ای کامل از بهترین ها را برای شما گرد آورده ایم تا بتوانید انتخاب دقیق تر و راحت تری داشته باشید.

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

دانلود افزونه

درباره ی مینا قدسی

مطلب پیشنهادی

The Plus Addons for Elementor

افزونه The Plus Addons for Elementor | افزودنی اددان پلاس المنتور

در این مقاله افزونه The Plus Addons for Elementor که یکی از افزودنی های قدرتمند …

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *