Сміливий стайлінг
Основи - огляд
GeneratePress
GeneratePress керує основними елементами теми – типографікою та навігацією.
GeneratePress Elements
Елементи заголовка, елементи макета та елементи хука використовуються на всьому сайті. Елементи знаходяться в Dashboard > Appearance > Elements.
Дізнатися більше про елементи можна тут.
Elementor Free
Фронтальна сторінка та статичні сторінки побудовані за допомогою Elementor Free. Окрім навігації, всі сторінки можна редагувати в Elementor. Пам’ятайте, що типографіку, а також кольори тексту та заголовків можна встановлювати глобально в кастомізаторі (крім тих, які були спеціально стилізовані в Elementor).
WP Show Posts
Оскільки в Elementor Free у нас немає віджета „Posts“, ми використовуємо дивовижний WP Show Posts для відображення сіток публікацій на будь-якій статичній сторінці. Дізнатися більше про WP Show Posts можна тут.
Редактор блоків Гутенберга
У нас встановлено плагін Gutenberg Plugin, тож ми маємо останню версію редактора Block, який використовується в наших окремих публікаціях.
Безпечний SVG
Цей плагін потрібен для того, щоб дозволити нам завантажувати SVG-зображення. Вони використовуються для розділу логотипів на головній сторінці.
Кастомне стилізування - додатковий CSS
CSS для будь-яких користувацьких стайлінгів можна знайти в Кастомізаторі > Додатковий CSS.
Зверніть увагу, що на сайті використовуються деякі CSS-властивості, які не синтаксично обробляються кастомізатором WP Customizer. Такі як mix-blend-mode – помилку, яку вони генерують, можна сміливо ігнорувати.
Основи - налаштування Elementor
Типографіка та кольори типографіки
У межах Elementor > Settings ми вимкнули шрифти та кольори за замовчуванням. Усі шрифти тепер стилізуються з розділу „Типографіка та кольори“ у Customizer >. Зверніть увагу, що Elementor не поважає висоту рядка типографіки для заголовків, які були налаштовані в редакторі Elementor.
Повноширокі сторінки з елементом GP Layout
За допомогою елемента „Макет“ ми встановили для наших титульних сторінок, статичних сторінок і шаблонів Elementor повну ширину та прибрали деякі елементи теми. Отже, під час створення нової сторінки не потрібно вибирати полотно Full Width Canvas.
Якщо ви хочете змінити ці правила, або, можливо, ви хочете виключити сторінку з цього макета, просто відредагуйте елемент макета і змініть його правила відображення.
Інтервал між віджетами
За замовчуванням Elementor додає 20 пікселів простору між кожним віджетом. Це було зменшено в глобальних налаштуваннях Elementor. До мінімальних 10 пікселів.
Custom CSS
Додавання користувацького CSS здійснюється шляхом вибору розділу, стовпця або віджета та додавання назви класу в полі „Класи CSS“ на вкладці „Додатково“. Потім CSS буде додано до Customizer > Additional CSS.
Шаблони
Щоб полегшити роботу, сайт містить 3 збережені шаблони сторінок, які можна просто імпортувати для титульної сторінки, сторінки „Про сайт“ та „Сервіси“.
Основи - навігація як заголовок
Якщо не вказано інше, елементи, стилізовані темою, налаштовуються в кастомізаторі. Інші варіанти – за допомогою користувацького CSS або там, де використовується GP-елемент. Скрізь, де згадуються елементи, їх можна знайти в Елементах зовнішнього вигляду
Навігація як заголовок
Сайт використовує навігацію як Header. Наразі в ньому відображається заголовок сайту. Відредагувати заголовок або додати логотип можна в кастомайзері > „Ідентичність сайту“. Потім можна вибрати, який брендинг (заголовок або логотип) відображати в Кастомізаторі > Layout > Header.
Основна навігація - один пост
Основний стиль навігації задається в кастомізаторі. Шрифти, кольори та ефекти наведення можна вибрати звідти
Об'єднаний хедер (Header Element) - Pages & Blog
Нашим Сторінкам і Блогу присвоєно об „єднаний елемент заголовка. На вкладці “Заголовок сайту” в елементі заголовка ми встановили для заголовка значення “Об” єднаний“ і змінили кольори навігації на прозорий і білий.
Mega Menu
Наша категорія „Послуги“ використовує просте мегаменю CSS. Детальніше про те, як налаштувати мега-меню, читайте тут.
CSS вже додано до Кастомізатора > Додатковий CSS. З невеликим доопрацюванням, щоб мега-меню розширювало ширину навігації.
Off Canvas Panel - мобільна навігація
Оскільки сайт розрахований на велике меню з безліччю підкатегорій, для нашого мега-меню ми обрали панель Off Canvas. У кастомайзері ви можете змінити її макет, а також типографіку та кольори.
Макет єдиного посту та блогу
Custom Post Hero ( Hook Element )
Цей хук використовує певний користувацький PHP для створення рядка з 2 стовпцями. Це розміщує заголовок публікації та категорію (використовуючи клас текстового підсвічування ) у першій колонці, а вибране зображення – у другій колонці. Використання сітки CSS для створення стовпців із перекриттям.
Ліва бічна панель для одного поста
Ліва бічна панель містить порожній HTML-віджет. Це робиться для того, щоб „Бічна панель“ завжди відображалася. Авторське вікно зачеплено над ним.
Author Box - Single Post Left Sidebar ( Hook Element )
Ми використовуємо елемент хука, щоб за допомогою невеликого обсягу HTML та PHP відобразити граватар, ім’я, опис та посилання “Читати далі” автора. Щоб відредагувати посилання “Читати далі”, відредагуйте хук бокової панелі одного поста
Custom Blog Hero ( Hook Element )
Цей хук-елемент створює користувацького героя, який витягує з вибраного зображення першого заголовка тло, яке накладається на нього та поєднується з фоном за допомогою CSS.
Заголовок запису в блозі H2
Для зменшення розміру заголовка H2 для блогів та архівів було використано невеличкий користувацький CSS. Шрифт також було змінено, щоб наслідувати текст Body.
Герой Елементора
text-highlighter
Custom Styling CSS - Elementor
Кілька елементів стилізовано за допомогою Custom CSS. Весь необхідний CSS міститься в кастомайзері > Додатковий CSS
Анімація Slide In Up
Анімація входу Slide Up використовується в розділах героя та заклику до дії (а також у діаграмах, що використовуються на сторінці послуг). Ми зменшили відстань цієї анімації. Це також застосовано до анімації FadeIn Up, якщо ви хочете використовувати її замість неї.
Ефект, який виглядає так, ніби елемент вислизає з-за наступного елемента, досягається просто додаванням суцільного кольорового фону елементу, що знаходиться під ним.
Кнопки наведення
Наші кнопки стилізовано за допомогою тіні Box Shadow та анімації Hover Float Animation. Обидва вони встановлюються на вкладці Buttons > Style. Кнопка має CSS-клас:
no-hover-shadow
Наш кастомний CSS зменшує відстань ефекту наведення та прибирає тінь, коли кнопка не наведена.
Спеціальне підкреслення
У разі виділення рядка тексту та вибору пункту Підкреслення він обгортає текст у <u></u> теги. Використаний CSS орієнтується на теги U, щоб видалити підкреслення (працює тільки на front end) і додає кольорову облямівку.
Підсвічування тексту
Додавання класу text-highlightighter до віджета заголовка дає ефект, показаний вище. У редакторі Elementor потрібно встановити білий колір тексту.
Клацає по ящиках
Оскільки ми використовуємо Elementor Free, у нас немає фліп-боксів або CTA, тому ми створили свої власні. Продовжуйте читати далі, щоб дізнатися більше про клік-бокси.
Переповнення Приховане
Необов’язковий клас overflow-hidden можна додати до будь-якого стовпця або розділу, який використовує анімацію. Це зробить анімацію обмеженою своїм контейнером, тобто. більше ніяких потворних елементів, що прилітають з краю екрана.
WP Show Post
Дописи, показані нижче, додаються за допомогою шорткоду WP Show Posts Shortcode. Ви можете редагувати та створювати їх на інформаційній панелі > WP Show Posts. Потім додайте їх за допомогою віджета Shortcode Widget в Elementor або Gutenberg Editor
Sorry, no posts were found.
Колір встановлюється на Background. Зображення додано до розділу Background Overlay.
Користувацькі поля для кліків
Я - клікбокс
Ці стовпці містять CSS-клас: click-box Для його роботи потрібна кнопка всередині стовпця.
Натисніть попередній перегляд Box
Попередній перегляд мене з фронт-енду. Попередній перегляд Elementor поводиться не так, як під час перегляду на живому сайті.
На мобільному
За замовчуванням я використовую вигляд, який ви бачите тут. Оскільки Mobile не робить ефектів наведення.
Custom CSS
Я використовую Custom CSS. Єдине, що ви можете захотіти змінити, – це колір наведення. Решта кольорів контролюється в Elementor
Рівні обслуговування
Діаграми рівня обслуговування
Трохи халтурно, але трохи весело, використовуючи секцію з кількома стовпчиками, заповнену віджетами-розпірниками. Потрібно трохи математики та ручного підбору розміру кожного розпірки. Але це весело.
Постарайтеся, будь ласка, не зламати, додавання анімації до 15 елементів – це трохи копітка справа
