Elementor — потужний плагін для WordPress, що дозволяє створювати красиві веб-сторінки без необхідності програмування. Однак, для досягнення більш детальної настройки і покращення візуальних ефектів, корисно застосовувати власні стилі CSS. У цій статті ми розглянемо, як застосовувати CSS в Elementor, використовуючи запропонований код.
Основи CSS в Elementor
CSS (каскадні таблиці стилів) — це мова, яка використовується для опису зовнішнього вигляду документа, написаного на HTML. Завдяки CSS ви можете керувати кольорами, шрифтами, відступами та багатьма іншими аспектами дизайну.
Приклад CSS коду:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.elementor-location-footer {
margin-top: auto;
}
Цей код виконує наступні функції:
- min-height: 100vh; — встановлює мінімальну висоту елемента
body, рівну 100% висоти видимої області браузера. - display: flex; та flex-direction: column; — застосовують флексбокс для вертикального розташування елементів всередині
body. - .elementor-location-footer { margin-top: auto; } — дозволяє нижньому колонтитулу (footer) розташовуватись внизу сторінки, навіть якщо контенту недостатньо для заповнення всієї висоти.
Як додати користувацький CSS в Elementor
- Відкриття редактора Elementor: Перейдіть на сторінку, яку хочете редагувати, і відкрийте редактор Elementor.
- Додавання користувацького CSS:
- Виберіть елемент (секцію, колонку або віджет), до якого хочете застосувати CSS.
- Перейдіть на вкладку “Розширені”.
- Знайдіть розділ “Користувацькі CSS” і вставте ваш код.
Переваги використання користувацького CSS
- Гнучкість: Ви можете точно налаштувати зовнішній вигляд елементів на сторінці, створюючи унікальний стиль.
- Унікальність: Завдяки CSS можна створити стиль, який виділяє ваш сайт серед конкурентів.
- Керованість: Легко змінювати стилі відповідно до ваших потреб та уподобань.
Висновок
Використання користувацького CSS в Elementor відкриває широкі можливості для налаштування дизайну вашого сайту. З допомогою простих стилів можна значно покращити зовнішній вигляд і функціональність сторінок. Не бійтеся експериментувати з різними властивостями CSS, щоб досягти бажаного результату.
