Елемент контейнера раніше був єдиним елементом компоновки в Esl до версії 1.5. Тепер його розширили елементи Секції, Блоку та Дів, щоб забезпечити більш зручний та оптимізований процес створення макета.
Стаття Розуміння макета детально висвітлює, як найкраще використовувати елементи макета в Esl.
Як використовувати контейнер
Контейнер має стандартну ширину 1100px, є центрованим і використовує модель компоновки flexbox. Це забезпечує різні налаштування для легкого управління, вирівнювання та розміщення елементів всередині контейнера.
Ми рекомендуємо використовувати контейнер на кореневому рівні або всередині секції.
Коли ви редагуєте контейнер, ви можете натиснути на значок макета “стовпець” на полотні, щоб швидко вставити попередньо розроблений макет на основі стовпців:
Підтримка CSS grid буде додана в наступних випусках Esl!
Давайте вивчимо можливості контейнера та розглянемо кілька прикладів макета контейнера у відео нижче:
Перетворіть ваш старий макет Esl до контейнерів
Якщо ви створили свій сайт до версії 1.2, використовуючи “стару” секцію, рядок і макет стовпців, спочатку вам потрібно перетворити свої дані на новий макет контейнера.
Esl постачається з вбудованим мігратором контейнерів, який переносить ваші існуючі дані Esl до нового макета контейнера одним кліком. Тож вам не доведеться відновлювати весь сайт з нуля.
Оскільки новий макет контейнера повністю гнучкий і не має попередньо визначеного поняття “секцій”, “рядків” або “стовпців”, вам, ймовірно, доведеться внести деякі ручні корективи після запуску мігратору.
Після оновлення до Esl 1.2 ваші старі дані все ще відображатимуться на фронтенді, але це не є 100% точною репрезентацією вашого існуючого макета секції.
Після оновлення до Esl 1.2+ будь ласка, перетворіть свої існуючі дані Esl якнайшвидше, як вказано у покроковій інструкції з міграції нижче.
Ми настійно рекомендуємо мігрувати ваші сторінки по одній, щоб не пропустити перевірку жодної з мігруваних сторінок.
Як додаткову запобіжну міру ви також можете клонувати свій існуючий сайт або редагувати його на тестовому сервері спочатку і виконати міграцію там (а не на жодному живому сайті).
Міграційний інструмент не видаляє жодних ваших існуючих (секційних) даних Esl. Якщо вам здається, що Esl 1.2 і міграційний інструмент ще не готові для вашого сайту, ви завжди можете завантажити попередню версію Esl (таку як 1.1.3) з вашого облікового запису Esl, щоб повернутися назад і продовжувати використовувати секційний, рядковий, колонковий макет на даний момент.
КРОК #1: Перегляньте свої немігровані дані на екрані типу поста
Всі немігровані пости/сторінки/шаблони тощо позначені міткою “(не мігрували)” за заголовком. Як видно на скріншоті нижче, нам потрібно мігрувати сторінку з назвою “Порожня”:
КРОК #2: Виберіть свою сторінку та запустіть міграційний інструмент
Тепер виберіть сторінку, яку ви хочете мігрувати, натисніть на спадне меню “Масові дії”. Виберіть “Міграція даних Esl” і натисніть “Застосувати”, щоб запустити міграційний інструмент:
КРОК #3: Перегляньте результати міграції
Щоб перевірити результати міграційного інструменту з одним кліком, відредагуйте свою мігрувану сторінку з Esl і виконайте будь-які необхідні коригування всередині системи. Потім також перегляньте свої зміни на фронтенді, щоб переконатися, що ваш макет відповідає вашим очікуванням.
Поради з міграції:
- Відновіть стандартний зовнішній відступ секції в 30 пікселів під: Теми > Загальні > Відступ кореневого контейнера
- Відновіть стандартний зовнішній відступ елемента в 15 пікселів під: Теми > Загальні > Відступ елемента