Esl має чотири елементи макета (з версії 1.5), щоб згрупувати та розташувати ваш контент швидким, передбачуваним і спрощеним способом:
- Розділ: Використовуйте для структурування/ділення вашої сторінки (подумайте: одна тема на розділ)
- Контейнер: Утримуйте елементи шириною 1100px (по центру)
- Блок: Flexbox зі 100% шириною (наприклад, колона)
- Div: Простий, неоформлений div (зростає відповідно до внутрішніх елементів)
Якщо ви новачок у веб-дизайні, ми рекомендуємо використовувати елементи Розділ, Контейнер і Блок. Вони мають заготовки, які добре працюють з коробки, не вимагаючи налаштування звичайних параметрів для кожного елемента макета.
Елементи Розділ, Контейнер і Блок – це просто Div з деякими заготовками. Вони всі використовують модель макета flexbox. Таким чином, ви можете легко спрямовувати, вирівнювати та розташовувати елементи всередині них.
Елемент Div – це найосновніший елемент для групування та оформлення вашого контенту. У Esl Div простий (без визначених стилів). Тому ви можете оформити його будь-яким способом.
Ви можете настроїти за замовчуванням будь-який елемент макета у ваших Стилях Теми.
Швидкий огляд основних властивостей кожного елемента макета:
| Елемент | Тег | Відображення | Ширина | Де використовувати |
| Розділ | section |
flex | 100% | Кореневий рівень |
| Контейнер | div |
flex | 1100px | Всередині Розділу |
| Блок | div |
flex | 100% | Всередині Розділу або Контейнера |
| Div | div |
block | – | В будь-якому місці |
Розділ
Використовуйте розділи як найбільш зовнішній будівельний блок. Щоб відокремити та розділити окремі частини вашої сторінки.
Розділ займає 100% доступної ширини. Він регулюється у висоту відповідно до свого вмісту. Розділи розташовані один над одним.
При додаванні нового Розділу, всередині розділу зазвичай додається елемент “Контейнер”.
Ви можете видалити цей Контейнер, якщо не потрібно “утримувати” інші елементи всередині нього. Як ми робили в наступному прикладі героїчного розділу:
Ви можете переписати значення за замовчуванням розділу в налаштуваннях: Налаштування → Стилі теми → Елемент – Розділ.
Щоб розташувати ваші розділи, ви можете задати відступ або паддінг на свій розсуд. Ви також можете змінити значення display та height за замовчуванням.
Дізнатися більше: Елемент розділу
Контейнер
Контейнер зазвичай розташований по центру і має стандартну ширину 1100px. Яку ви можете налаштувати в налаштуваннях: Налаштування → Стилі теми → Елемент – Контейнер.
Помістіть ваш Контейнер всередину Розділу. А елементи Блоку / Диву всередині вашого Контейнера для макета з кількома колонками чи рядками.
Наступний скріншот показує Контейнер (з 60px паддінгом) всередині Розділу (з фоновим зображенням):
Дізнатися більше: Елемент Контейнера
Блок
Елемент Блок надає ті ж керування, що й Контейнер (флексбокс, цикл запитів тощо). Різниця в тому, що Блок використовує стандартну ширину 100% замість попередньо визначеної ширини 1100px, як Контейнер.
Використовуйте елемент Блок, щоб створити рівні макети колонок/рядків всередині Розділу чи Контейнера.
Дізнатися більше: Елемент Блоку
Як створити макети з кількома колонками
Щоб створити макет з трьома колонками всередині Контейнера:
- Виберіть Контейнер
- Змініть “Напрямок” на “Горизонтальний”
- Натисніть на маленьку іконку “+” на полотні 3 рази, щоб вставити 3 елементи Блоку.
Результат повинен виглядати ось так:
Найшвидший спосіб створити макет з кількома колонками – вибрати Контейнер, натиснути на маленьку іконку макета “колони” на canvas та обрати бажаний попередньо визначений макет колони:
За замовчуванням, вставлений макет складається з “Блок” елементів. Назва “Колонка” є просто етикеткою. Цей елемент все ще є Блоком. Видно за іконкою в панелі структури. Ви також можете побачити назву елемента, коли наведете курсор на іконку елемента в панелі структури:
Div
Елемент Div є найбільш загальним елементом для групування та розміщення вашого контенту.
На відміну від інших елементів макета, елемент Div в Esl є абсолютно необробленим. Це дає вам 100% свободу щодо його розмітки та стилізації.
Коли використовується всередині одного з інших елементів макета, Div росте і зменшується відповідно до елементів, які він містить.
Дізнайтеся більше: Елемент Div
Як вставити, обернути та конвертувати елементи макета
Ви можете натиснути правою кнопкою миші на будь-який елемент макета, щоб відкрити контекстне меню. Звідти ви можете “Вставити”, “Обернути” та “Конвертувати” елементи макета одним клацанням.
Скріншот нижче показує, як конвертувати кореневий Контейнер в Секцію, клацнувши правою кнопкою миші на “Hero” Контейнері в панелі структури, а потім вибравши іконку “Секція” під “Конвертувати”:
Редагуючи елемент макета, ви можете вставити будь-який інший елемент макета, навівши курсор на іконку “+” на canvas, що надає вам можливості “Контейнер”, “Блок”, “Div”.
Утримуйте “CMD / CRTL”, щоб вставити елемент після активного елемента.
Дії з елементами: Встановлення елемента за замовчуванням
У розділі “Esl → Налаштування → Двигун → Дії з елементами” ви можете змінити елемент макета, який за замовчуванням використовується для “Вставити”, “Обгорнути” і інструмента “Макет”:
Додатково: Перетворення вашого макета, заснованого на контейнерах
Щоб перетворити ваш існуючий сайт на основі “Контейнера” для використання нових елементів “Розділ” і “Блок”, ви можете запустити Конвертер з увімкненою опцією ‘Перетворити “Контейнер” на нові елементи “Розділ” і “Блок”’: