Работа с WordPress шаблонами. Часть 2: Управление областями сайта

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

Если Вы  наполняете сайт новыми элементами при помощи Upfront, то при построении областей сайта вам будет доступно все необходимое для создания, полноэкранных заголовков (хедеров), встроенных элементов, боковых панелей (сайдбаров) и футеров (элементы в нижней части областей сайта).

Как и в прошлой части, мы продолжаем работать с темой Spirit и полностью переделываем ее под свои потребности.

Удаление областей

Начнем с удаления нескольких областей.

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

1

 

 

 

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

 

  • В верхнем левом углу отображается разрешение области
  • В правом верхнем углу расположено две кнопки:  красная кнопка «х» для удаления области и под ней зеленая кнопка со значком шестеренки для для управления настройками области
  • Четыре желтых кнопки «+» — для добавления новой области
  • Зеленая кнопка «Завершить редактирование фона» — для сохранения внесенных изменений в настройки области

2

После нажатия на красную кнопку удаления области появится диалоговое окно для подтверждения удаления. Подтверждаем, нажимая «ОК».

Обратите внимание. что удаляя область, вы удаляете и весь ее контент.

 

Добавление областей

Добавить новую область просто. Все что вам нужно — после нажатия на кнопку редактирования (иконка с изображением карандаша) нажмите на одну из желтых кнопок «+». После этого на страницу сайта будет добавлена новая область.

Новая область будет автоматически выделена и при нажатии на кнопку для ее настройки (зеленая иконка с изображением шестеренки) вы сможете управлять ее настройками.

 

Есть несколько типов областей, которые вы можете добавить на сайте.

Рассмотрим их.

  • Полноэкранная

3

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

Данный тип области предоставляет две следующие опции:

Добавить подраздел

Данная опция позволяет добавить новый подраздел в пределах  имеющегося хедера.

 

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

В полноэкранном хедере для данной опции можно установить значения «Сохранить позицию» или «Сохранить соотношение».

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

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

 

  • 100% в ширину

4

 

Отображение области на всю ширину экрана, слева направо (но не сверху донизу).

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

 

 

 

 

  • Содержание

При помощи данной опции вы сможете наполнить ваш сайт широкоэкранными элементами. Управлять шириной элемента можно в настройках темы в меню Фон общей темы => Настройки общего фона

5

Можно так же изменить общий фон до монотонного цвета, своего изображения, или, даже, видеоролика, который будет отображаться на сайте.

  • Тип фона

Upfront позволяет использовать следующие виды фонов:

  1. Сплошной цвет — в качестве фона возможно выбрать любой необходимый цвет. Можно использовать как код цвета, так и палитру для составления необходимого цвета.
  2. Изображение — загрузив изображение, вы можете выбрать его расположение (на всю ширину, плиткой, фиксированная позиция).
  3. Видео — добавление видеоролика в качестве фона области.
  4. Слайдер изображений — добавление слайдера с необходимым количеством изображений.
  5. Карта — вставка карты Google Maps. Все что нужно — выбрать адрес, степень увеличения (зум), стиль карты (дорожная, спутник, гибрид, местность) и элементы управления, которые будут отображены (панорама, увеличить, тип карты, масштаб, вид улицы, обзор карты).

Добавим видео в качестве фона области.

В качестве источника видео можно выбрать ролик с таких популярных сервисов как YouTube, Vimeo и Wistia.

Доступны опции масштабирования и обрезки видеоизображения, отключения звука при просмотре и воспроизведения видео при загрузке страницы.

6

 

Другие настройки областей.

Автоматическое изменение размера

Опция доступна при выборе типа области «100% в ширину» или «Содержание».

Позволяет автоматически изменять размер всей области при добавлении/изменении размера контента внутри самой области.

Переименование областей

Для удобства вы можете изменять название областей.7

 

 

 

 

Закрепить раздел

8Вы можете сделать область закрепленной на странице, — таким образом она всегда будет видна на странице, даже при ее прокрутке.

 

Боковые меню (Сайдбары)

При добавлении новой области, слева и справа нажмите на желтые иконки «+» что бы создать сайдбары. В настройках Вы можете изменить их фон, позицию, ширину и т.д.

 

Глобальные (общие) области

Использование общих областей  это отличный способ использовать один и тот же хедер или футер (или даже оба их) на всех страницах сайта, избегая дублирования контента.

9Upfront автоматически распознает верхние и нижние области сайта как хедер и футер, так что в настройках данных областей опция «Сделать общим» будет автоматически доступна.

 

Выводы

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

  • Мы удалили группу областей для изменения стиля нашего сайта
  • Мы отредактировали верхнюю область сайта (хедер) для отображения нашего собственного изображения
  • Мы добавили видео на сайте во всю ширину страницы

Читайте следующую статью из этой серии: Часть 3: Наполнение макета новыми элементами

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

 

Как создать WordРress сайт с помощью конструктора Upfront:

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

  • Алина Милош

    Здравствуйте! 1). Как настроить форму подписки, которая уже есть в шаблоне (в виде всплывающего окна). Куда будут отправляться эмейлы?
    2) как изменить названия кнопок в форме обратной связи с англ на русский язык? Просто навести и выделить текст для исправления не получается, а в левой колонке где редактируем форму поля текста кнопки нет…
    3) как настроить кнопки социальных сетей на нужную страницу (не на профиль). И как добавить новую кнопку, например, ВКонтакте, Ютуб, Одноклассники…
    Тема FIXER.

  • HostPro.ua

    Добрый день!
    В шаблоне существует перетаскиваемый элемент «Связь» он и есть формой обратной связи, но статической (это не всплывающее окно).
    1) Для того, что бы указать на какую почту прийдут заявки нажмите на иконку Настройки. Справа появится окно, где в поле «Отправить содержимое формы на», можно вписать необходимый email.
    2) Чтобы поменять текст кнопки кликните дважды (возможно не отреагирует так быстро, как хочется. попробуйте еще раз). https://uploads.disquscdn.com/images/5102cffaf0d830f50f9aac6c1409da2f102e5685582502ce0c0a6a36fd1169b2.png
    https://uploads.disquscdn.com/images/1a704299a46f408984abc8ae45de0f13273eef7f2edb7505426dc5445a13b990.png

  • HostPro.ua

    3) Так как это европейский шаблон, в нем нет специальных кнопок для Однокласников и ВК.
    Самым простым вариантом будет найти иконки для соцсетей, которые вам нужны в поисковике. Например, я для примера выбрала круглые. Загружаем их в Медиафайлы.
    Далее действуем так:
    1. Берем перетаскиваемый элемент Изображение и перетаскиваем на то место, которое нас интересует.
    2. Нажатием на «+» добавляем иконку.
    3. Скорее всего по размеру она нам не подойдет, поэтому мы ее подгоним по размеру — этот пункт вы увидите при нажатии трех точек в меню, сразу после загрузки изображения. https://uploads.disquscdn.com/images/d0f8f56175d11ce9dd20f1146928a6bc3143af9851d12117249489d6bbddb694.png
    4. Чтобы привязать ссылку после публикации вам сново нужно нажать в меню (…). Выберите иконку для добавления ссылки и в выпадающем меню «URL». Вставьте в поле необходимую ссылку. https://uploads.disquscdn.com/images/8a516f49b32e24a4fb88d63fd7a9289e001aa4a8237c6ed84bbe405bce9b5551.png

  • Алина Милош

    Спасибо за Ваши ответы! Но жаль, что красиво вставить сторонние картинки не получается таким способом… Пришлось выкручиваться из того, что имеется. А вот что получилось в результате на основе этого шаблона http://videoroliki.top/

  • Алина Милош

    Спасибо, но я имела в виду — подписку на рассылку, а не обратную связь. Форма обратной связи работает нормально. А через установленный в конструкторе плагин Hastle письма не отправлялись. Решение такое — в сервисе рассылок mailchimp сделала форму и кнопку сделала ссылкой на эту форму. Все работает! Потратила на эту головомойку 3 дня, а решение было как теперь кажется довольно простым))