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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نحوه ایجاد یک صفحه در افزونه Elementor Page Builder

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

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

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

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

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

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

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

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

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

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

آموزش افزونه 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

امتیاز دادن به این نوشته:
  • خوانایی بالا
  • میزان رضایت کاربران
  • تصاویر مرتبط

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

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

آموزش افزونه a3 Lazy Load

آموزش افزونه a3 Lazy Load برای افزایش سرعت وردپرس

در این مقاله به آموزش افزونه a3 Lazy Load می پردازیم. این افزونه ویژگی های …

دیدگاهتان را بنویسید

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