تجربه من با Elementor – قسمت 1

Elementor Page Builder
Elementor Page Builder

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


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

  1. Inner Section
  2. Heading
  3. Image
  4. Video
  5. Text Editor
  6. Button
  7. Icon
  8. Google Maps
  9. Divider
  10. Spacer
  11. Star rating
  12. Image box
  13. Icon box
  14. Image gallery
  15. Image carousel
  16. Icon list
  17. Social icons
  18. Accordion
  19. Tabs
  20. Shortcode

لیست کامل ویجت‌های نسخه رایگان و همینطور ویجت‌های نسخه Pro رو میتونید از طریق این لینک مشاهده کنید.


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

  • شما نه تنها میتونید کل Layout اون Widget که دارین مینویسین رو مدیریت کنید بلکه خیلی راحت میتونید Styleهاش رو هم مدیریت کنید فقط به شرطی که بدونید چه امکانی رو دراختیار مدیرسایت قرار میدین چون بالاخره ممکنه امکانات زیادی که پیش بینی کردید به یکپارچگی طرح شما صدمه بزنید ( مثلا با دادن یه رنگ جیغ به متن توسط مدیر یا نویسنده وب‌سایت ).
  • میتونید در هر لحظه طرح خودتون رو در سه حالت Mobile, Tablet, Desktop مشاهده کنید تا مطمین باشید طرحتون داره بی‌نقص نمایش داده میشه. همینطور میتونید تنظیمات خودتون رو برای همین 3 حالت شخصی سازی کنید که خب این مورد بیشتر وقتی به کارتون میاد که میخواید Styleها رو ویرایش کنید.
  • می‌تونید بخش‌های مختلف تنظیمات خودتون یعنی Style و Layout رو باز به قسمت‌های مختلف تقسیم بندی کنید تا کاربر در هر لحظه فقط تنظیمات اون موردی رو ببینه که داره ویرایشش میکنه. برای مثال میتونید در قسمت Style یک بخش برای تنظیمات Border داشته باشید مثل رنگ، نوع، ضخامت، … و یک بخش دیگه برای Background و یکی دیگه برای Typography. اینجوری لازم نیست وقتی داریم Border رو درست میکنیم تنظیمات مربوط به Backgroud رو هم ببینیم.

راستی تا یادم نرفته باید بگم که Elementor خودش یه سری ویژگی رو به صورت خودکار به سایت اضافه میکنه برای مثال اگر گزینه نمایش Modal رو در بخش تنظیمات انتخاب کرده باشین بعد از اینکه عکس‌ها رو داخل یه تگ <a> قرار دادین و اون رو به منبع عکس لینک کردید Elementor به صورت خودکار وقتی روی عکس کلیک میشه یه Modal زیبا برای نمایش عکس به کاربر نشون میده. یا اگر برای عکس‌ها مقدار Alt رو وارد کنید Elementor به صورت خودکار یه نوار تیره رنگ که حاوی مقدار Alt می‌باشد برای توضیحات بیشتر در مورد عکس به کاربر نشون میده. مثال:

نمونه‌ای از کد لازم برای داشتن ویژگی‌های بالا
نمونه‌ای از کد لازم برای داشتن ویژگی‌های بالا

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

نویسنده مطلب: امیرحسین دوزنده

منبع مطلب

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

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