نحوه استفاده از Elementor Flexbox Container [راهنمای مبتدی]

آیا در ظروف Elementor Flexbox تازه کار هستید؟ بنابراین ساختار طرح‌بندی صفحه‌ساز جدید می‌تواند کمی گیج‌کننده باشد. اما ما آنچه شما نیاز دارید را داریم.

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

اگرچه چیدمان بخش-ستون با استفاده از بخش‌ها، زیربخش‌ها و ستون‌ها، طراحی وب‌سایت را کاربردی کرد، اما هنوز از نظر طراحی انعطاف‌پذیری وجود نداشت.

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

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

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

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

همچنین خواهیم فهمید که چگونه از طرح بندی بخش-ستون قدیمی بهتر است.

---

فهرست مطالب

---

ظرف Elementor Flexbox چیست؟

کانتینرهای Elementor Flexbox پیاده سازی Elementor از الگوی Flexbox CSS در صفحه ساز آنها هستند. CSS Flexbox یا Flexible Box Layout یک طرح بندی وب جدید است که توسط CSS 3 طراحی شده است.

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

Elementor Flexbox Containers که با به‌روزرسانی Elementor 3.6 منتشر شد، به شما امکان می‌دهد صفحات وب سازگار با دستگاه را با استفاده از کانتینرهایی مانند Flexbox CSS طراحی کنید.

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

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

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

اما، با Flexbox، می توانید ظروف را به طور بی پایان در ظروف قرار دهید. این می تواند امکانات بی پایانی را در مورد چیدمان ها و طرح های منحصر به فرد ایجاد کند.

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

موارد استفاده رایج برای ظروف فلکس باکس

در اینجا چند مورد استفاده محبوب برای ظروف Flexbox آورده شده است:

---

تفاوت بین بخش های قدیمی و ظروف Elementor Flex جدید

بیایید تفاوت های اصلی بین کانتینر Elementor و بخش تنظیمات مختلف را ببینیم.

1. تفاوت فنی

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

برعکس، ظروف Elementor Flexbox روشی انعطاف‌پذیرتر و سازگارتر برای سازماندهی عناصر صفحه وب ارائه می‌دهند. یک ظرف مانند یک بخش است اما بدون شبکه از پیش تعریف شده است.

در عوض، شما می توانید ظروف را در یک ظرف قرار دهید.

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

و همانطور که عناصر بیشتری را اضافه می کنید، تراز، موقعیت و اندازه ظرف به طور خودکار تغییر می کند تا آنها را در خود جای دهد.

2. تفاوت بصری

مرحله بعدی تفاوت بین کانتینر و بخش Elementor تغییرات بصری است.

صفحه ساز Elementor با ظروف Flexbox رابط کاربری صفحه ساز کلاسیک را حفظ می کند. اما تغییرات قابل توجهی وجود دارد.

شما همچنان داشبورد را در سمت چپ دارید، جایی که می‌توانید به تمام ویجت‌ها، عناصر و تنظیمات خود دسترسی داشته باشید. اما مرورگر اکنون کانتینرها و عناصر را به جای تقسیم ها و بخش ها در زیر نشان می دهد.

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

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

3. تفاوت عملکرد

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

حتما متوجه شده اید که بخش های سنتی Elementor دارای یک ویژگی نمایشی هستند که به صورت " بلوک ". بنابراین، هنگامی که یک بخش یا ویجت جدید اضافه می کنید، آنها روی هم قرار می گیرند.

اگر می خواهید آنها را در کنار هم نمایش دهید، باید چندین تقسیم و DOM ایجاد کنید که سرعت وب سایت نهایی شما را کند می کند.

از طرف دیگر، ظروف Flexbox از یک ویژگی نمایش به نام " منعطف» همانطور که در انعطاف پذیر است. بنابراین هنگامی که اجزای جدیدی را به یک ظرف اضافه می کنید، می توانید آنها را به صورت عمودی روی هم قرار دهید یا آنها را در کنار هم به صورت افقی قرار دهید.

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

---

مزایای استفاده از ظروف Elementor Flexbox

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

---

نحوه استفاده از ظروف Elementor Flexbox (گام به گام)

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

ممکن است سوالات مختلفی در ذهن داشته باشید، مانند: "چگونه ظرف را در Elementor فعال/فعال کنیم؟" چگونه از کانتینرها در المنتور استفاده کنیم؟ چگونه یک ظرف در المنتور اضافه کنیم؟ » این بخش به شما کمک می کند به آنها پاسخ دهید.

برای کمک به شروع، در اینجا مراحل استفاده از کانتینرهای Flexbox برای طراحی وب سایت آورده شده است:

مرحله 1. Flexbox را در تنظیمات Elementor فعال کنید

اولین قدم برای استفاده از Flexbox در Elementor فعال کردن Flexbox است. بنابراین، از داشبورد وردپرس به تنظیمات Elementor بروید. در مرحله بعد، روی تب Experience کلیک کنید، به پایین بروید، ظرف Flexbox را پیدا کنید و گزینه Active را از منوی کشویی انتخاب کنید. در نهایت تغییرات را ذخیره کرده و به مرحله بعد بروید.

توجه داشته باشید: در وب سایت های جدید، کانتینر Flexbox به طور پیش فرض فعال است.

مرحله 2. یک صفحه وب جدید ایجاد کنید

اکنون باید یک صفحه جدید را همانطور که معمولا انجام می دهیم ایجاد کنیم. به قسمت Pages رفته و All Pages را انتخاب کرده و کلیک کنید یک صفحه اضافه کنید.

مرحله 3. المنتور را باز کنید

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

مرحله 4. یک ظرف جدید اضافه کنید

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

مرحله 5. کانتینر را سبک کنید

هنگامی که یک ظرف اضافه می کنید، می توانید به بسیاری از گزینه های سفارشی سازی دسترسی داشته باشید. می توانید گزینه هایی مانند نوع ظرف، عرض، ارتفاع، جهت، تراز و غیره را تغییر دهید.

مرحله 6. ویجت ها را در کانتینرها بکشید و رها کنید

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

مرحله 7. ویجت ها را سفارشی کنید

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

مرحله 8. اولین صفحه وب Flexbox خود را منتشر کنید

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

---

چگونه یک صفحه Elementor مبتنی بر بخش را به یک ظرف Flexbox تبدیل کنیم؟

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

مرحله 1. بخش را انتخاب کنید

با کلیک بر روی شش نقطه در بالای بخش، بخشی را که می خواهید به یک ظرف تبدیل کنید، انتخاب کنید. همچنین می‌توانید بخش را در پنجره Elementor Navigator انتخاب کنید.

مرحله 2. تبدیل بخش به کانتینر

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

مرحله 3. به روز رسانی Layout

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

مراحل را برای هر بخش که قصد دارید به یک ظرف تبدیل کنید، تکرار کنید.

---

آیا می توانم افزونه های Elementor را با ظرف جدید flexbox ترکیب کنم؟

بله، می توانید افزونه های Elementor را با ظروف Flexbox ترکیب کنید. نیازی به راه حلی نیست زیرا ظروف Flexbox به طور یکپارچه با افزونه ها و افزونه های شخص ثالث ادغام می شوند.

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

---

منابع مربوط

• نحوه استفاده از قلم های جهانی در Elementor
• نحوه ایجاد یک دکمه شناور با Elementor Z Index
• نحوه ایجاد یک صفحه 404 در المنتور
• نحوه ایجاد آکاردئون تصویر با JetTabs در المنتور
• نحوه ایجاد یک منوی تمام صفحه در المنتور 

نتیجه

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

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

با خیال راحت گزینه های مختلف ارائه شده توسط Flexbox را بررسی کنید تا کشف کنید چگونه آنها می توانند پروژه های Elementor شما را غنی کنند. با استفاده صحیح از این ابزارها، می توانید چیدمان های روان و حرفه ای ایجاد کنید که بازدیدکنندگان خود را مجذوب و درگیر خود کند. به آزمایش ادامه دهید و از امکانات ارائه شده توسط Elementor برای استفاده حداکثری از طراحی های وب خود استفاده کنید.

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

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

---

سوالات متداول