Как да използвате контейнера Elementor Flexbox [Ръководство за начинаещи]

Нов ли сте в контейнерите Elementor Flexbox? Така че новата структура на оформлението на конструктора на страници може да бъде малко объркваща. Но имаме това, от което се нуждаете.

Elementor Flexbox е новата рамка за оформление, която прави дизайна на уебсайтове по-лесен и удобен за потребителя. Контейнерите Flexbox отбелязват постепенна актуализация на старото оформление на секции и колони, с което всички сме запознати.

Въпреки че оформлението на секции и колони направи дизайна на уебсайта практичен чрез използване на секции, подсекции и колони, все още липсваше гъвкавост по отношение на дизайна.

Секция в Elementor може да има само колони и подсекция. Колкото повече добавяте към една страница, толкова по-бавно ще се зарежда уебсайтът ви.

Да не говорим колко трудно е да се създават удобни за мобилни устройства дизайни с тази стара структура.

Въпреки че оформлението на секции и колони е служило добре на дизайнерите, време е да преминем към по-добър, по-ефективен и по-гъвкав начин за проектиране на уебсайтове с помощта на конструктора на страници Elementor.

Така че, ако искате да овладеете контейнерите Flexbox, маркирайте този блог. В това ръководство за Elementor Flexbox ще ви преведем през всички подробности на тази нова структура на оформлението.

Също така ще разберем с какво е по-добро от старото оформление на раздел-колона.

---

Съдържание

---

Какво представлява контейнерът Elementor Flexbox?

Контейнерите Flexbox на Elementor са имплементацията на CSS шаблона Flexbox на Elementor в техния конструктор на страници. CSS Flexbox или Flexible Box Layout е ново уеб оформление, поддържано от CSS 3.

Той е оптимизиран за производителност и отзивчивост, като предлага оформления, които се адаптират към различни устройства и размери на екрана.

Издадени с актуализацията на Elementor 3.6, контейнерите Flexbox на Elementor ви позволяват да проектирате удобни за устройство уеб страници, като използвате контейнери като Flexbox CSS.

Тези контейнери на Elementor съдържат всички елементи на вашата страница, като текст, изображения, уиджети и др. Но ето най-добрата част: можете да поставите контейнери в контейнери.

Ако сте използвали стандартното оформление секции-колони, вече знаете колко трудно е да работите с множество оформления.

Въпреки че получаваме всякакви оформления като блокове, таблици, редове и т.н., работата с тях е караница и е трудно да се гарантира тяхната отзивчивост.

Но с Flexbox можете безкрайно да поставяте контейнери в контейнери. Това може да създаде безкрайни възможности, когато става въпрос за уникални оформления и дизайни.

Просто казано, контейнерите са вашите нови секции, но те са гъвкави както на индивидуално, така и на глобално ниво. Гъвкавостта се открива в почти всеки аспект на контейнера, независимо дали е подравняване, подплата или позициониране в ред.

Обичайни случаи на употреба за Flexbox контейнери

Ето някои популярни случаи на използване на контейнери Flexbox:

---

Разлика между стари секции и нови контейнери Elementor Flex

Нека да видим основните разлики между контейнера Elementor и раздела за различни настройки.

1. Техническа разлика

Секциите на Elementor осигуряват структурна рамка за организиране на елементи като уиджети, изображения, текст и др. Можете да разделите раздел на колони и да поставите елементи на уеб страница в тях.

Напротив, контейнерите Elementor Flexbox предлагат по-гъвкав и адаптивен начин за организиране на елементи на уеб страници. Контейнерът е като секция, но без предварително дефинирана мрежа.

Вместо това имате възможност да поставите контейнери в контейнер.

Освен това приспособленията в секциите са с пълна ширина, докато в контейнерите са вградени по подразбиране. Следователно можете да поставите колкото искате елементи в родителски контейнер.

И докато добавяте повече елементи, подравняването, позиционирането и размерът на контейнера автоматично ще се променят, за да ги приспособят.

2. Визуална разлика

Следващата стъпка за разликата между контейнера и секцията Elementor са визуалните промени.

Създателят на страници Elementor с контейнери Flexbox запазва класическия потребителски интерфейс на създателя на страници. Но има някои забележителни промени.

Все още имате таблото за управление от лявата страна, където имате достъп до всичките си джаджи, елементи и настройки. Но браузърът вече показва контейнери и елементи отдолу вместо разделения и секции.

Винаги можете да кликнете върху иконата + или плъзнете и пуснете елементи, за да ги добавите към вашата уеб страница. Единствената разлика е, че трябва да изберете контейнер и посока вместо секции и брой колони.

Освен това получавате и нови опции, ориентирани към контейнера, като посока, подравняване, подравняване, междина на елемента, деформация и т.н.

3. Разлика в производителността

Разликата в производителността между контейнерите Flexbox и оформлението на секции-колони е огромна, особено ако дизайнът на уебсайта ви е пълен със сложни оформления и подсекции.

Сигурно сте забелязали, че традиционните секции на Elementor имат свойство за показване, зададено като „ блок ". Следователно, когато добавите нов раздел или джаджа, те се подреждат един върху друг.

Ако искате да ги показвате един до друг, трябва да създадете множество разделяния и DOM, което забавя окончателния ви уебсайт.

От друга страна, Flexbox контейнерите използват свойство за показване, наречено " гъвкав”, като при гъвкави. Така че, когато добавяте нови компоненти към контейнер, можете да ги подредите вертикално или да ги поставите един до друг хоризонтално.

Следователно не е необходимо да се създават допълнителни разделения. По този начин кодът на уеб страницата остава лесен за изпълнение, което значително намалява времето за зареждане.

---

Предимства от използването на контейнери Elementor Flexbox

Има няколко предимства при използването на Flexbox контейнери пред традиционните блокове за дизайн на уебсайтове. Някои от основните предимства са:

---

Как да използвате контейнери Elementor Flexbox (стъпка по стъпка)

Изживяването на конструктора на страници Elementor Flexbox е подобно на стандартния конструктор на блокове Elementor. Така че, независимо дали сте напълно нов в Elementor или преминавате от стария builder, няма да имате проблеми да свикнете с него.

Може да имате предвид различни въпроси, като например: „Как да активирам/активирам контейнер в Elementor?“ Как да използвате контейнери в Elementor? Как да добавите контейнер в Elementor? » Този раздел ще ви помогне да отговорите на тях.

За да ви помогнем да започнете, ето стъпките за използване на контейнери Flexbox за проектиране на уебсайт:

Стъпка 1. Активирайте Flexbox в настройките на Elementor

Първата стъпка към използването на Flexbox в Elementor е да активирате Flexbox. Така че, преминете към настройките на Elementor от таблото за управление на WordPress. След това щракнете върху раздела Experience, превъртете надолу, намерете контейнера Flexbox и изберете опцията Active от падащото меню. Накрая запазете промените и преминете към следващата стъпка.

Забележка: На новите уебсайтове контейнерът Flexbox е активен по подразбиране.

Стъпка 2. Създайте нова уеб страница

Сега трябва да създадем нова страница, както обикновено правим. Отидете в секцията Страници, изберете Всички страници и щракнете Добавете страница.

Стъпка 3. Отворете Elementor

Вече ще имате прозореца за създаване на страници на WordPress на екрана си. Дайте заглавие на тази нова страница и щракнете върху Редактирайте с Elementor за достъп до Flexbox контейнери.

Стъпка 4. Добавяне на нов контейнер

На екрана ви ще се появи познат потребителски интерфейс на конструктора на страници Elementor. Освен това можете да плъзнете и пуснете контейнер от страничната лента, за да добавите нов контейнер, или да щракнете върху иконата + и изберете желаната структура.

Стъпка 5. Оформете контейнера

След като добавите контейнер, имате достъп до много опции за персонализиране. Можете да промените опции като тип контейнер, ширина, височина, посока, подравняване и т.н.

Стъпка 6. Плъзнете и пуснете джаджи в контейнери

Добавянето на джаджи към контейнери също е лесно. Просто изберете желаната джаджа от раздела Елементи, след което я плъзнете и пуснете върху иконата + в контейнера.

Стъпка 7. Персонализиране на Widgets

Подобно на глобалните настройки на контейнера, можете също да персонализирате съдържанието на контейнер. Можете да персонализирате опции като посока, подравняване, подравняване, празнина, обвиване и т.н.

Стъпка 8. Публикувайте първата си уеб страница на Flexbox

Можете да създавате много контейнери, да ги дублирате и да разменяте местоположенията им. Повторете стъпките, докато добавяте още елементи, и след като сте готови, щракнете върху бутона публикувам за да поставите вашата уеб страница онлайн. Можете също да щракнете върху бутона Преглед, за да взаимодействате с вашата нова уеб страница Flexbox.

---

Как да конвертирате базирана на секции страница Elementor в контейнер Flexbox?

Можете лесно да конвертирате структура секция-колона в контейнер Flexbox. Просто следвайте тези прости стъпки:

Стъпка 1. Изберете секцията

Изберете секцията, която искате да конвертирате в контейнер, като щракнете върху шестте точки в горната част на секцията. Като алтернатива можете също да изберете секцията в изскачащия прозорец на Elementor Navigator.

Стъпка 2. Преобразувайте секцията в контейнер

След като изберете раздел, ще видите бутона КОНВЕРТИРАНЕ в раздела Оформление. Кликнете върху него, за да преобразувате секцията в контейнер.

Стъпка 3. Актуализирайте оформлението

След като преобразуването завърши, ще видите две отделни версии на избрания раздел. Горната секция е оригиналната, а долната е новият контейнер. Изтрийте оригиналния раздел и щракнете върху Актуализиране, за да запазите оформлението.

Повторете стъпките за всяка секция, която планирате да конвертирате в контейнер.

---

Мога ли да комбинирам добавките на Elementor с новия контейнер flexbox?

Да, можете да комбинирате добавки на Elementor с контейнери Flexbox. Няма нужда от заобиколно решение, тъй като контейнерите Flexbox се интегрират безпроблемно с добавки и плъгини на трети страни.

Всъщност добавките са необходими за активиране на разширени функции и опции за персонализиране в конструктора на страници Elementor. Можете да инсталирате

---

ресурси сроден

• Как да използваме глобални шрифтове в Elementor
• Как да създадете плаващ бутон с Elementor Z Index
• Как да създадете страница 404 в Elementor
• Как да създадете акордеон на изображение с JetTabs в Elementor
• Как да създадете меню на цял екран в Elementor 

Заключение

Flexbox контейнерът на Elementor е мощен инструмент, който трансформира начина, по който проектирате и структурирате вашите уеб страници. С неговите гъвкави функции можете да управлявате подравняването, разпределението иорганизация на вашите елементи с изключителна прецизност. Независимо дали искате да създадете сложни оформления или просто да подобрите отзивчивостта на вашите дизайни, Flexbox предлага елегантно и интуитивно решение.

С помощта на контейнера Flexbox имате достъп до набор от контроли, които улесняват управлението на пространства и подравнявания, като същевременно опростяват корекциите, необходими за безпроблемно представяне на всички устройства. Това ниво на персонализиране не само подобрява потребителското изживяване, но също така оптимизира процеса на проектиране, като прави вашите страници по-динамични и адаптивни.

Чувствайте се свободни да проучите различните опции, предлагани от Flexbox, за да откриете как те могат да обогатят вашите проекти в Elementor. С правилното използване на тези инструменти можете да създадете гладки и професионални оформления, които завладяват и ангажират посетителите ви. Продължете да експериментирате и се възползвайте от възможностите, предлагани от Elementor, за да извлечете максимума от вашия уеб дизайн.

Така че! Току-що ви показахме как да използвате контейнера Elementor Flexbox. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в рамките на Връзка.

Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

---

често задавани въпроси