В темі Astra є простий, але дуже потужний конструктор шапки та підвалу. З його допомогою можна створювати цілі багаторівневі структури, де буде не просто логотип та меню, а ще й багато інших корисних елементів. В цій статті розглянемо як влаштований цей конструтор.
Як знайти конструктор шапки
Конструктор знаходиться в настроювачі теми — розділ «Вигляд – Налаштувати» у консолі WordPress. Розділ «Заголовок» — це конструктор шапки, а розділ «Підвал» — конструктор підвалу. Обидва конструктори однакові, тому в статті покажемо лише конструктор шапки.
Огляд конструктора
Конструктор складається з трьох рядків, у кожному з яких по три колонки. Себто з темою Astra ваша шапка може складатися з трьох рівнів.
У кожну з колонок можна додавати заздалегідь заготовлені елементи. Частина елементів доступна тільки в платній версії теми, проте найважливіші з них доступні в безкоштовній версії: меню, кнопки соцмереж, пошук, кнопка…
Також можна додати у шапку будь-який блок WordPress або Spectra за допомогою двох елементів «Widget». Наприклад, кнопку зі спливаючим вікном за допомогою блоку «Modal» або перемикач мов від плагіну Polylang.
Дизайн елементів змінюється на боковій панелі ліворуч. На вкладці «General» розташовані параметри вмісту (ширина, видимість на пристроях, відображення тих чи інших частин елементу), на вкладці «Design» розташовані параметри зовнішнього вигляду (кольори, відступи, стиль тексту тощо).
Параметри рядка
Дизайн рядка, в якому знаходяться елементи, можна змінити, якщо клацнути по шестерні в боковій частині рядка. Зазвичай — те, що ви будете хотіти тут змінити, це висота рядка на вкладці «General», а також колір фону на вкладці «Design». Ще може знадобитися прибрати межу, якщо хочете, щоби шапка зливалася з титульним банером.
Якщо плануєте додати це один рівень шапки, непоганою ідеєю може бути — обрати для нього інший колір. Щоби цей рівень почав відображатися, треба додати у нього хоч якийсь елемент.
Взагалі, щоби отримати ідеї для дизайну шапки, перегляньте сайти конкурентів. Можливо, побачите там щось цікаве в плані оформлення.
Елементи конструктора
Далі розглянемо окремі елементи конструктора, з яких можна збирати шапку: їх параметри та нюанси роботи.
Логотип та іконка
Щоб завантажити логотип, оберіть елемент та натисніть на боковій панелі «Обрати лого» або «Змінити», якщо у вас тут вже є якийсь шаблонний логотип.
Далі у спливаючому вікні на вкладці «Завантажити файли» можна відкрити провідник на комп’ютері та обрати потрібний файл. Якщо треба, WordPress дозволяє його також обрізати. Наприклад, щоби позбавитися полів по бокам.
Під вікном для завантаження лого можна змінити його ширину, якщо зображення занадто велике. Можна навіть зробити різну ширину для різних планшетів та смартфонів, якщо клацнути на іконку з зображенням комп’ютера. Зазвичай на смартфонах роблять розмір лого трошки менше, ніж на комп’ютерах та планшетах.
Щоби приховати назву сайту, якщо вона відображається, але ви цього не хотіли би, треба просто вимкнути всі пристрої в опції «Видимість назви сайту».
Також в самому низу є підрозділ для додавання іконки сайту. Вона відображатиметься у вкладці браузера. Процес завантаження у неї такий самий як і з логотипом.
Після внесення змін не забувайте натискати кнопку «Опублікувати» зверху на боковій панелі, щоби не втратити їх.
Меню
Далі — елемент «Основне меню». Перед тим як налаштовувати сам елемент, спочатку треба створити меню як сутність. Для цього треба вийти з настроювача теми назад до консолі WordPress та перейти у розділ «Вигляд – Меню».
Якщо ви завантажили готовий шаблон, тут буде перелік меню доступних для цього шаблону. Якщо не завантажували, тут скоріше за все буде порожньо. Непотрібні меню можна видалити, якщо обрати їх та натиснути «Видалити» в самому низу сторінки.
Щоб створити нове меню, придумайте просту і зрозумілу назву на кшталт «Меню шапки» або «Верхнє меню» та оберіть область, в якій воно має бути. Потім натисніть внизу «Створити». В темі Astra меню шапки має назву «Основне меню».
Після створення меню як сутності, треба додати туди сторінки. Для цього ліворуч є секція «Додайте елементи меню». Щоправда, якщо ви тільки почали створювати сайт, можливо, доведеться спочатку створити сторінки в розділі «Сторінки». Якщо вже створили, але не бачите потрібну сторінку, запевніться, що ви знаходитеся на вкладці «Все».
Якщо хочете, щоби при наведенні на елемент меню під ним з’являлося випадаюче вікно з дочірніми варіантами, треба взяти дочірні сторінки мишкою та перетягнути під потрібний елемент. Щоб вони стали конкретно під ним як на скріншоті. Місце, куди приземлиться елемент, відзначається пунктирною лінією.
Коли меню буде готове, збережіть зміни та поверніться до конструктора шапки. Тепер елемент «Головне меню» відображатиме щойно створене меню. Залишиться тільки налаштувати його зовнішній вигляд.
Зазвичай те, що ви будете хотіти змінити, це колір елементів при наведенні та колір активного елемента. Це все можна змінити на вкладці «Design». Перший колір — за замовчуванням, другий — при наведенні, третій — колір активного елемента меню.
При бажанні також можна змінити стиль меню при наведенні за допомогою опції «Стиль меню при наведенні» вверху. Наприклад, додати підкреслення.
Якщо одразу після вибору стилю ефект не буде відображатися, просто опублікуйте зміни та оновіть сторінку. Колір підкреслення буде таким самим, як і колір тексту в опції «Текст/Посилання».
Widget
Як ви вже зрозуміли, за допомогою блоків «Widget 1» та «Widget 2» можна додати у шапку або підвал будь-який блок з редактору WordPress. Це може бути корисним інструментом для додавання того, чого немає серед елементів конструктора.
Щоб продемонструвати як це працює, додамо у шапку кнопку зі спливаючим вікном, де буде контактна форма. Як на сайтах локальних бізнесів, які продають послуги не через стандартний функціонал корзини, а через оформлення заявок.
Після додавання елементу «Widget» натисніть на шестерню в цьому елементі і побачите, що він по суті являє собою міні-редактор блоків WordPress. Кнопку зі спливаючим вікном можна додати за допомогою блоку «Modal». Цей та багато інших блоків можна додати у редактор WordPress, встановивши плагін Spectra від розробників Astra.
Оскільки місце для редагування блоку обмежене, можна закріпити спливаючу панель з опціями, щоби вона не плавала, а завжди була зверху. Для цього натисніть на три крапки біля кнопки з плюсом та оберіть «Верхня панель інструментів».
Щоб відкрити параметри для налаштування блоку, клацніть на три крапки вже на панелі нижче та оберіть «Показати додаткові налаштування».
Зрозуміло, що це не дуже зручно — працювати в такому обмеженому просторі. Якщо вам ок, значить ок. Але якщо ні, можете створити нову сторінку, підготувати кнопку чи інший блок в повнорозмірному редакторі, а потім скопіювати його та вставити сюди. Можливо, так буде зручніше.
Іконки соцмереж
В цьому елементі у кожної соцмережі є назва, іконка та посилання на ваш профіль. В доступі є іконки всіх популярних соцмереж. Якщо треба, можна навіть завантажити свою. Опція «Показати мітку» вмикає текстову назву соцмережі з поля «LABEL».
На вкладці «Design» можна змінити розмір та колір іконок. Можна навіть увімкнути офіційні кольори. Або можна задати власні — під стиль вашого сайту. Як завжди: перший колір — за замовчуванням, другий — при наведенні.
HTML
Цей елемент трохи схожий на «Widget» тим, що дозволяє додати багато різних штук. Зазвичай це HTML-код. Наприклад, щоб підключити таким чином якийсь сторонній сервіс. Але можна додавати і просто текст. Наприклад, клікабельний номер телефону.
Ідея в тому, що ви додаєте номер телефону як текст, а потім перетворюєте текст на посилання у форматі «tel двокрапка +380 та номер телефону». Тоді при натисканні на цей текст смартфон відвідувача відкриватиме меню дзвінка.
Дизайн на маленьких екранах
Окремий момент — мобільне меню. Воно виглядає інакше. Щоб побачити як, перейдіть на боковій панелі внизу у режим перегляду з планшету або смартфону та оберіть елемент «Меню випадної панелі».
Спочатку в елементі «Меню випадної панелі» знадобиться безпосередньо призначити правильне меню. Для цього натисніть «Налаштувати меню» та в опції «Меню випадної панелі» оберіть «Головне меню».
Далі — так само як і з елементом «Основне меню» — ви мабуть захочете змінити кольори тексту чи фону, якщо вони виглядають погано. Як завжди, перший колір — колір за замовчуванням, другий — при наведенні, третій — колір активного елементу.
За дизайн самої іконки мобільного меню відповідає елемент «Кнопка перемикання». У його параметрах є декілька стилів. Можна поклацати і обрати такий, який більше подобається. А на вкладці «Design» — змінити кольори та розмір іконки.
Висновок
Конструктор шапки Astra — це потужний інструмент, який дозволяє без коду створювати шапки та підвали зі складними макетами: з одного, двох або навіть трьох рівнів.
Для цього у конструкторі є такі елементи як от логотип, меню, кнопка, пошук, іконки соцмереж тощо. За потреби можливості конструктора можна розширити за допомогою блоків Widget та HTML. Головне після налаштування перевірити, як шапка виглядає не лише на комп’ютері, а й на планшетах та смартфонах.
У цьому матеріалі ми розглянули можливості, доступні у безкоштовній версії теми. В Astra Pro конструктор прокачується ще більше. Коротко про це, а також про інші відмінності платної версії, можна прочитати у нашій іншій статті.
Статия по темі 👀
Огляд теми Astra