Сайти на WordPress часто створюють на основі готових дизайнів: обирають з бібліотеки на кшталт Starter Templates, а потім замінюють тексти, зображення, кольори тощо. Проте в готових дизайнах може не вистачати потрібної секції або сторінки. А ще буває, що використовувати подібні шаблони взагалі не варіант.
У цій статті розберемо універсальний принцип побудови секцій за допомогою стандартного редактора блоків WordPress. Цей принцип дозволить доповнювати готові дизайни, а також створювати відсутні сторінки або збирати власні макети з нуля.
Підготовка нової сторінки
Після створення порожньої сторінки (розділ «Сторінки – Додати сторінку») варто одразу виконати дві дії:
- вимкнути відображення заголовка;
- налаштувати адресу сторінки.
Вимкніть заголовок сторінки
Заголовок, який ви вводите у верхній частині редактора WordPress, потрібен насамперед для зручної навігації в адмінці. Він допомагає знайти потрібну сторінку серед інших, проте на самому сайті його краще сховати.
Якщо залишити заголовок увімкненим, тема також відобразить його на самій сторінці у спеціальному контейнері. Дизайн цього контейнера не можна налаштовувати у редакторі так само гнучко, як звичайні блоки.
Тому стандартний заголовок зазвичай приховують, і за необхідності додають окремо на титульний банер за допомогою блоку «Заголовок». Це дозволяє зручніше контролювати дизайн сторінки.
У темі «Astra» є зручний вимикач заголовка у вигляді іконки з оком. В інших темах такого перемикача може не бути або він може розташовуватися в іншому місці.
Змініть URL-адресу сторінки
Адреса сторінки має бути короткою та зрозуміло передавати її зміст. Наприклад:
contact— для сторінки «Контакти»;services— для сторінки «Послуги»;about— для сторінки «Про нас».
Щоби підібрати вдалу адресу, можна також подивитися, як оформлені URL відповідних сторінок на сайтах конкурентів.
Поле для зміни адреси сторінки знаходиться на головній боковій панелі WordPress: вкладка «Сторінка», опція «Частина посилання».
Принцип побудови секцій
У створенні секцій вам допоможе простий та універсальний принцип «3К». Це абревіатура для слів «Контейнер, Колонки, Контент», які описують структуру будь-якої секції.
По суті, будь-яку сторінку на будь-якому сайті можна сприймати як набір прямокутних контейнерів. Усередині кожного з них розташована певна кількість колонок, а вже в колонках знаходяться текст, зображення, кнопки та інший контент.
Наприклад, титульний банер на головній сторінці цього сайту, це синій контейнер з однією колонкою, де розташовуються заголовок, підзаголовок та рядок пошуку.
Далі йде контейнер, в якому спочатку одна колонка для заголовка та підзаголовка, а далі дві колонки, в яких розташовуються посилання на статті.
Створення базових секцій
Базовий алгоритм при створенні будь-якої секції складається з таких кроків:
- додати блок «Контейнер» та обрати кількість колонок;
- встановити колір фону секції;
- додати внутрішні відступи.
Додайте блок «Контейнер»
Оскільки серед стандартних блоків WordPress немає блоку «Контейнер», вам знадобиться встановити плагін «Spectra» від розробників теми «Astra». Він додасть у редактор нові блоки, які чудово розширять ваші можливості у створенні сайту.
Стаття на тему 👀
Огляд плагіна Spectra
Одразу після додавання блоку «Контейнер», знадобиться обрати макет з колонками. Щоби визначити потрібну структуру для кожної секції, проаналізуйте ваші улюблені сайти або сайти конкурентів.
Встановіть колір фону секції
Якщо у всіх секцій на вашій сторінці має бути єдиний колір, цей крок можна пропустити. Проте робити різнокольорові секції — це теж популярний варіант, який зустрічається на багатьох сайтах. Зазвичай у таких випадках використовують два, максимум три кольори. Наприклад, білий, світло-сірий та один з яскравих фірмових кольорів бренду.
Параметри фону контейнера знаходяться на вкладці «Стиль», розділ «Background». Треба обрати варіант фону «Суцільний колір», після чого з’явиться опція для вибору кольору.
Додайте внутрішні відступи
Відступи зазвичай потрібні зверху та знизу. Вони не дають тексту, зображенням та іншим елементам притискатися до меж контейнера. Без них секція зазвичай виглядає тісною та неохайною.
Параметри відступів знаходяться на вкладці «Стиль», розділ «Spacing», опція «Padding». За замовчуванням контейнер вже може мати невеликі відступи, наприклад 10 пікселів з кожного боку. Для повноцінної секції цього часто недостатньо, тому значення зверху та знизу варто збільшити.
Щоби встановити різні значення для кожної сторони, натисніть на кнопку з ланцюжком, щоб розірвати зв’язок між полями, та окремо збільшіть значення у полях «Top» та «Bottom». Наприклад, до 50 чи 100 пікселів.
Після базової підготовки секції можна додавати в колонки контент: текст, зображення, кнопки та інші блоки.
Створення більш складних секцій
Коли ви додаєте блок «Контейнер», серед стандартних макетів з колонками може не бути потрібного. Наприклад, візьмемо секцію «Оберіть пристрій» з нашого демонстраційного сайту smartfix.vashdomen.com. В ній заголовок займає всю ширину, а під ним розташовуються чотири картки в один рядок.
Оскільки такого складного макету серед готових варіантів немає, його доведеться збирати вручну. Концептуально це відбуватиметься за таким алгоритмом:
- підготувати основний контейнер;
- додати у нього внутрішні контейнери;
- вказати розміри внутрішніх контейнерів;
- змінити поведінку внутрішніх контейнерів у середині основного.
Крок 1. Створіть основний контейнер
Спочатку підготуйте контейнер, який буде материнським для всієї секції. Оберіть для нього перший макет, налаштуйте колір фону та внутрішні відступи.
Крок 2. Додайте в основний контейнер внутрішні
Після цього додайте всередину ще п’ять контейнерів: один для заголовка, чотири для колонок під ним. На цьому етапі всі вкладені контейнери будуть розташуватися один під одним вертикально. Так і має бути.
Крок 3. Вкажіть розміри внутрішніх контейнерів
Оберіть контейнер, який має стати першою з чотирьох колонок, та відкрийте вкладку «General». У розділі «Container Type» знайдіть опцію «Custom Width». За замовчуванням там буде встановлено значення 100%. Оскільки колонок чотири, логічно буде встановити ширину 25%.
Для першого вкладеного контейнера, в якому має розташовуватися заголовок секції, варто залишити ширину 100%.
Крок 4. Змініть поведінку внутрішніх контейнерів у середині основного
Навіть попри те, що ми змінили ширину внутрішніх контейнерів, вони досі розташовуються у стовпчик. Так відбувається через те, що стати в один рядок їм не дають налаштування основного контейнера.
А конкретно мова про дві опції: «Direction» (напрямок розташування блоків) та «Wrap» (перенесення блоків). Вони знаходяться на вкладці «General», розділ «Layout».
Опція «Direction» визначає напрямок, у якому розташовуються вкладені блоки. За замовчуванням цей напрямок буде зверху вниз. Щоби внутрішні колонки стали в один рядок, потрібно обрати горизонтальний напрямок — зліва направо.
Після зміни напрямку розташування блоків усі п’ять вкладених контейнерів стануть в один ряд, включно з контейнером для заголовка, який має ширину 100%. Це може здаватися нелогічним, проте так відбувається через опцію «Wrap», яка відповідає за налаштування перенесення блоків.
Якщо в цій опції обраний варіант «No wrap» (без перенесення), вкладені блоки не будуть переноситися на наступний рядок, яка б ширина не була у кожного з них.
Оберіть варіант «Wrap» (із перенесенням), щоби увімкнути перенесення блоків відповідно до ширини, що встановлена у їх параметрах. Після цього контейнер заголовка з шириною 100% займе окремий рядок, а чотири контейнери з шириною 25% розташуються під ним.
Єдине, що при ширині у 25% остання колонка не вміститься і все одно перенесеться на новий рядок. Так відбувається через те, що простір між колонками теж враховується і в сумі з ним чотири колонки по 25% займають більше ніж 100%.
Щоб вирішити цю проблему треба трохи зменшити ширину кожної колонки — приблизно до 23%. Це має компенсувати простір між колонками.
У такий спосіб можна створювати будь-які складні структури: секції з картками, списками послуг, тарифами, перевагами, відгуками та іншими елементами.
Дублювання секцій
Корисний лайфхак — робити дублікати секцій, щоби заощадити час і не відтворювати макети щоразу з нуля.
Відкрийте «Огляд документа» на верхній панелі редактора, знайдіть головний контейнер потрібної секції, клацніть на три крапки та оберіть команду «Дублювати». Після цього змініть контент, фон, кількість колонок або інші параметри копії.
Багаторазові шаблонні блоки
Ще один лайфхак — зберігати секції, щоби потім додавати їх на сторінки у декілька кліків. Наприклад, це може бути рекламний блок або будь-яка інша секція чи навіть макет, який ви хочете використовувати повторно.
Спочатку доведіть потрібну секцію до того стану в якому готові її зберегти, потів оберіть її головний контейнер, відкрийте додаткові опції на спливаючій панелі та оберіть «Створити патерн».
Придумайте для патерна чітке ім’я, щоби потім його було легко знайти. Наприклад, «Рекламний блок 1» або щось на кшталт цього.
Після додавання ви можете знайти збережений паттерн у меню додавання блоків. Вкладка «Патерни», розділ «Мої патерни».
Що далі
Сподіваємося, ця стаття допомогла вам у створенні сторінки або необхідної секції. Якщо у вас залишаються якісь питання, поставте їх у коментарях, спробуємо всім допомогти.