Робота с WordPress шаблонами.Частина 3: Наповнення макету новими елементами

Від картинок і тексту до галерей, карт і кнопок – Upfront дозволяє наповнювати ваш сайт різними елементами. Ми розглянемо кожен з них, а також з’ясуємо, як вони працюють, та які опції і налаштування мають.

Елементи сайту демонструють ключові його можливості і різноманітний функціонал.
Всього є 16 доступних елементів, які дозволяють створити все що завгодно – починаючи від простих блоків з текстом до більш складних користувацьких рішень.

Ми ж на конкретному прикладі покажемо, як кастомізувати Upfront тему:

• Частина 1: Основні налаштування, Колір теми і Типографіка
• Частина 2: Управління областями сайту
• Частина 3: Наповнення макету новими елементами
• Частина 4: Створення адаптивного дизайну для різних типів пристроїв
• Частина 5: Робота зі сторінками і публикаціями

Елементи Upfront

Текст

Текстовий елемент дозволяє створити нову область з текстом в будь-якому місці вашого сайту. Додавши елемент, просто двічі клацніть мишкою на ньому для додавання тексту.

Більше інформації про стилізацію тексту і використання панелі інструментів для роботи з текстом ви можете отримати в статті Частина 1: Основні налаштування, Колір теми і Типографіка.

Зображення

Щоб додати зображення на сайт, просто перетягніть елемент туди, де б ви хотіли його розмістити. Меню елемента запропонує вам додати нове зображення. Ви можете завантажити його на сайт або ж використовувати існуючу в медіа-галереї картинку.

Дозвіл картинки буде вказано у верхньому лівому кутку, тому ви зможете змінити розмір зображення до необхідного вам.

Також доступні й додаткові опції – обрізка зображення, вставка посилання, зміна зображення і заміна поточного зображення.

Галерея

Даний елемент дозволяє розмістити галерею зображень на сторінці сайту.

Після того як ви розмістили елемент і додали зображення для нього, вам буде доступно безліч опцій для стилізації:

• фільтрація за мітками: коли опція ввімкнена, іконка “редагувати мітки” з’явиться в налаштуваннях кожного зображення. Після додавання міток до зображень, вони будуть відображені у верхній частині галереї;
• співвідношення сторін мініатюр: оберіть одне з трьох стандартних співвідношень – 1:1, 2:3 або 4:3;
• розмір мініатюр: перетягуйте повзунок для зміни розміру мініатюр. Розмір буде відображатися нижче під повзунком, тож ви зможете спостерігати за його зміною;
• відстань між мініатюрами: перетягуйте відповідний повзунок для зміни відстані між мініатюрами;
• налаштування підписів: ви можете додати підпис до зображень і розмістити їх на самих зображеннях чи під ними.

Ввімкнувши опцію перемикання сортування, можна змінити порядок зображень, просто перетягнувши їх.

Так само як для окремих зображень, для картинок з галереї доступні свої налаштування для обрізки або заміни картинок в галереї. У зображення галереї можна додати посилання на іншу статтю, сторінку, сайт або просто на збільшену версію елемента.

Карта

Тепер більше не потрібно витрачати багато часу, щоб додати карту на ваш сайт. Все що потрібно – це перетягнути елемент “Карта” в потрібне місце вашого сайту, ввести адресу (або використовувати поточну позицію) і натиснути Enter. Карта буде додана з необхідним місцем розташування.

Для карти доступні наступні налаштування:

• місцезнаходження на карті: введіть нову адресу, щоб оновити позицію на карті;
• рівень масштабування: використовуйте повзунок для збільшення або зменшення поточної позиції;
• стиль карти: оберіть один з наступних стилів – дорожня карта, супутник, гібрид або місцевість;
• налаштування карти: додайте на карту елементи для її управління – панорама, збільшення, тип карти, масштаб, вид вулиці, огляд карти;
• нарта, що переміщується: ввімкніть цю опцію, для того щоб відвідувачі сайту могли натискати на карту і переміщатися по ній;
• приховати маркери: приховати червоний маркер поточного положення на карті.

Like Box

Або ж, лайки з Facebook. Просто перетягніть елемент на сторінку сайту, введіть адресу вашої сторінки на Facebook і натисніть Enter. Чим більше буде розмір елемента, тим більше користувачів Facebook в ньому буде відображено.

YouTube

Якщо вам потрібно додати на сайт одне або кілька відео –скористайтеся елементом YouTube. При додаванні відео вам буде запропоновано додати тільки одне або відразу кілька відео. Виберіть необхідне і здійсніть налаштування:

Одне відео:

• посилання на відео;
• назва: оберіть, скільки символів з назви буде відображатися;
• опис: оберіть, скільки символів з опису відео буде відображатися;

Кілька відео:

• стиль відображення: галерея чи список;
• обмежити назву відео: оберіть, скільки символів з назви буде відображатися;
• розмір мініатюри: перетягніть повзунок для зміни розміру.

Вкладки

Якщо вам потрібно відобразити більше інформації на меншому просторі, вкладки – якраз те, що вам потрібно. За замовчуванням вкладки йдуть за стандартним стилем. Змінити стиль вкладок дуже просто і для цього є чимало опцій.

Віджети

Ви можете додати віджет в будь-якому місці на вашому сайті.

Після того як ви перетягнули елемент на сторінку сайту, перейдіть в налаштування елемента й оберіть, який саме віджет потрібно додати.

Код

Використання елемента Код надає 2 опції: Вставити сторонній код і Вставити користувацький код. Вставити сторонній код – опція дозволяє додати код для вставки елементів, що сподобалися, зі сторонніх сайтів. Вставити призначений користувацький код – опція дозволяє вам написати свій власний елемент для сайту.

Логін

За допомогою даного елементу ви можете розмістити форму авторизації в будь-якому місці вашого сайту.

При доданні форма авторизації буде розміщена в стандартному вигляді. Але в налаштуваннях ви можете зробити цю форму випадною, якщо не хочете щоб вона займала занадто багато місця на сайті. Так само ви можете змінити текст на кнопці авторизації і розмістити кнопку для виходу.

Зв’язок

Даний елемент дозволяє вам розмістити на сайті просту форму зворотнього зв’язку з полями Ім’я, Email і Повідомлення.

У налаштуваннях ви можете ввести Email-адресу, на яку будуть надсилатися повідомлення з форми. Так само в налаштуваннях ви можете додати поле Тема в форму і додати перевірку CAPTCHA.

Меню

Елемент дозволяє відобразити меню в будь-якому місці вашого сайту. Просто перетягніть елемент і виберіть опції, які в ньому потрібно відобразити.

Випадне меню

Як і елемент вкладки, Випадне Меню – відмінне рішення для того, щоб розмістити невелику кількість інформації на невеликій ділянці сайту.

За замовчуванням меню йде зі стандартним стилем, залежним від встановленої теми, але завжди можна кастомізувати стиль на свій розсуд в налаштуваннях елемента.

Кнопка

Цей елемент стане вам в нагоді, якщо потрібно красиво оформити посилання на іншу сторінку на вашому сайті або посилання, де користувачі сайту зможуть скачати необхідні матеріали.

Як і з іншими елементами, просто перетягніть його в потрібне місце на сайті і кнопка зі стилем за замовчуванням буде додана на сайт. Двічі натисніть на кнопку для зміни тексту на ній або перейдіть в налаштування для створення свого дизайну кнопки.

Слайдер

При доданні слайдера на сторінку сайту ви можете вибрати опції розміщення зображень в ньому: тільки зображення, з текстом на зображеннях, з текстом під зображеннями або з текстом збоку зображень.

За необхідності в налаштуваннях слайдера так само можна змінити його стиль, швидкість зміни зображень, а також схему їх зміни (вгору, вниз, праворуч, ліворуч). Кнопки управління слайдером так само можуть бути включені, відключені або з’являтися при наведенні курсору на слайдер.

Записи

За допомогою даного елементу ви можете розмістити на сайті як один запис, так і список постів. Так само можна обрати, що саме з посту відображати – його уривок чи весь повністю.

Тепер найцікавіше – ви можете обрати, що саме із запису потрібно показувати: заголовок публікації, контент запису, дату публікації, мітки, категорії т.д..

Так само, якщо в налаштуваннях ввімкнено нумерацію сторінок, ви можете додати нумерацію сторінок посту в налаштуваннях.

Видалення елементів

Для видалення елементу просто натисніть на червону кнопку “х” в правому верхньому кутку елемента.

Клонування елементів

Якщо вам потрібно додати кілька схожих елементів на сайт – не обов’язково додавати їх окремо. Ви можете додати один, і потім просто клонувати його кілька разів. Для клонування елементу натисніть на нього правою кнопкою миші і виберіть з випадного меню пункт “Клонувати”. “Клон” елемента буде закріплений за курсором миші і буде поміщений там, де ви клацнете.

Так буде створена точна копія клонованого елемента.

Висновки

Отже, підсумуємо, чого ми досягли, збираючи наш сайт: 

• дізнались, як видаляти непотрібні елементи;
• навчилися додавати будь-який необхідний елемент в будь-якому місці на сайті;
• дізналися, як стилізувати стандартні елементи під свої потреби.

Якщо у вас є питання з приводу того, що ми розглянули в цій статті, ви можете звернутись в нашу техпідтримку.