Работа с 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. При добавлении видео вам будет предложено добавить только одно или сразу несколько видео. Выберите необходимое и внесите настройки:

Одно видео:

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

Несколько видео:

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

Вкладки

Если вам нужно отобразить больше информации на меньшем пространстве, вкладки как раз то что вам нужно. По-умолчанию вкладки идут со стандартным стилем. Изменить стиль вкладок очень просто и для этого есть множество опций.

Виджеты

Вы можете добавить виджет в любом месте на вашем сайте.

После того, как вы перетащили элемент на страницу сайта, перейдите в настройки элемента и выберите какой именно виджет нужно добавить.

Код

Использование элемента Код предоставляет две опции: Вставить сторонний код и Вставить пользовательский код. Вставить сторонний код — опция позволяет добавить код для вставки приглянувшихся элементов со сторонних сайтов. Вставить пользовательский код — опция позволяет вам написать свой собственный элемент для сайта.

Логин

При помощи данного элемента вы можете разместить форму авторизации в любом месте вашего сайта.

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

Связь

Данный элемент позволяет вам разместить на сайте простую форму обратной связи с полями Имя, Email и Сообщение.

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

Меню

Элемент позволяет отобразить меню в любом месте вашего сайта. Просто перетащите элемент и выберите опции, которые в нем нужно отобразить.

Выпадающее меню

Как и элемент вкладки, Выпадающее меню отличное решение для того, что бы разместить небольшое количество информации на небольшом участке сайта.

По умолчанию меню идет со стандартным стилем, зависящим от установленной темы, но всегда можно кастомизировать стиль на свое усмотрение в настройках элемента.

Кнопка

Этот элемент пригодится вам если нужно красиво оформить ссылку на другую страницу на вашем сайте или ссылку,  где пользователи сайта смогут скачать необходимые материалы.

Как и с остальными элементами, просто перетащите его в нужно место на сайте, и кнопка со стилем по-умолчанию будет добавлена на сайт. Дважды клацните на кнопке для изменения текста на ней или перейдите в настройки для создания своего дизайна кнопки.

Слайдер

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

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

Записи

При помощи данного элемента вы можете разместить на сайте как одну запись так и список постов. Так же можно выбрать что именно из поста отображать — его отрывок или весь полностью.

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

Удаление элементов

Для удаления элемента просто нажмите на красную кнопку «х» в правом верхнем углу элемента.

Клонирование элементов

Если вам необходимо добавить несколько похожих элементов на сайт — не обязательно добавлять все их по отдельности. Вы можете добавить один, и потом просто клонировать его несколько раз. Для клонирования элемента нажмите на нем правой кнопкой мыши и выберите из выпадающего меню пункт «Клонировать». «Клон» элемента будет закреплен за курсором мыши и будет помещен там, где вы клацнете.

При создании клона, будет создана точна копия клонируемого элемента.

Выводы

Итак, давайте подитожим чего мы достигли, собирая наш сайт:

• узнали как удалять ненужные элементы;
• научились добавлять любой необходимый элемент в любом месте на сайте;
• узнали как стилизировать стандартные элементы под свои потребности.

Если у вас есть какие-либо вопросы по поводу того, что мы рассмотрели в этой статье, вы можете обратиться в нашу техподдержку.