Дизайн и настройка сайта, созданного в Web Presence Builder

Дизайн сайта

Для изменения структуры вашего сайта в конструкторе есть раздел «Дизайн». В нем вы можете менять внешний вид вашего сайта, цветовую гамму, ширину сайта, настраивать боковые панели, добавлять или изменять границы элементов, а также создавать шаблоны внешнего вида или использовать существующие. Подробная информация о смене шаблона сайта, его импорте и экспорте содержится в статье Создание сайта в конструкторе Web Presence Builder.

В разделе «Дизайн» вам также доступны следующие подразделы:

Разметка

Разметка вашего сайта может состоять из следующих элементов:

• 1.

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

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

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

  • изменить ее высоту;
  • разбить ее на несколько колонок. Для этого перетащите новые модули к левой или правой границе основного содержимого и вставьте их;
  • изменить расположение колонок, переместив их содержимое влево или вправо;
• 3.

  Боковые панели. Это столбцы, в которые можно поместить все виды модулей: как сквозные, так и страничные. С боковыми панелями можно выполнить следующие действия:

  • добавить одну боковую панель и поместить ее слева или справа от основного содержимого;
  • добавить две боковые панели. Они будут размещены слева и справа от основного содержимого;
  • изменить высоту и ширину боковых панелей;
  • переместить боковые панели вверх страницы и расположить их слева или справа от верхнего колонтитула;
  • поменять боковые панели местами;
• 4.

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

  • уменьшить его высоту до 25 пикселей, удалив из него все элементы;
  • растянуть фон или колонтитул на всю ширину экрана.

Изменение разметки сайта

Перейдите на вкладку «Дизайн» > «Разметка», затем выполните следующие действия:

• 1 Выберите количество боковых панелей: в разделе Боковые панели выберите Нет, Одна или Две.
• 2

  Выберите расположение боковых панелей:

  • чтобы перенести боковую панель на другую сторону сайта или поменять местами две боковые панели, нажмите Поменять местами;
  • чтобы переместить боковые панели вверх страницы, щелкните по ним в схематической модели сайта;
• 3

  Задайте размер элементов страницы:

  • Чтобы задать общую ширину страниц, в разделе Ширина сайта выберите один из следующих вариантов:

    • фиксированная: размер сайта не будет зависеть от размера окна браузера. В этом случае вам нужно указать желаемую ширину сайта в пикселях;
    • тянущаяся: размер сайта будет меняться в зависимости от текущего размера окна браузера. В этом случае укажите ширину вашего сайта в процентах от размера окна браузера.
  • Чтобы сделать ширину верхнего колонтитула, нижнего колонтитула и основного блока с содержимым равной ширине страницы, щёлкните по соответствующим элементам в схематической модели сайта;
  • В разделе Минимальная высота укажите высоту основного блока с содержимым и каждой из боковых панелей. Это значение показывает высоту элементов вашего сайта без содержимого. Когда вы добавите содержимое в боковые панели и центральную часть, они растянутся по высоте, чтобы уместить содержимое;
  • Чтобы обеспечить вертикальное выравнивание боковых панелей и области с основным содержимым, поставьте галочку Растянуть боковые панели и область с содержимым до нижнего колонтитула;
  • Если у вас есть боковые панели, в разделе Ширина укажите ширину каждой из них. Размер центральной части страницы будет определён автоматически;
  • В разделе Размер полей укажите размер вертикальных и горизонтальных полей. Поле — это пространство между границами соседних элементов;
• 4 Нажмите OK, чтобы сохранить изменения.

Готово, вы изменили разметку сайта.

Схема

Чтобы выбрать основную цветовую схему сайта:

• 1 Перейдите на вкладку Дизайн > Схема;
• 2 Выберите набор стилей в меню;
• 3 Вы увидите четыре цвета, образующих цветовую гамму вашего сайта;
• 4 Чтобы изменить один из цветов, щелкните в поле напротив нужного цвета и внесите изменения в шестнадцатеричный код или воспользуйтесь палитрой. Обратите внимание, что эти изменения отменят все предыдущие цветовые настройки отдельных элементов, установленные на вкладке Цвета;
• 5 Нажмите OK, чтобы сохранить изменения.

Готово, вы выбрали цветовую схему.

Цвета

Основная цветовая схема (или набор стилей) вашего сайта состоит из четырех цветов. Каждый цвет используется сразу для нескольких элементов сайта. Цвета отдельных элементов можно настроить дополнительно.

Чтобы выбрать цвета и фоновые изображения для отдельных элементов сайта:

• 1 Перейдите на вкладку Дизайн > Цвета.
• 2 Выберите нужный элемент сайта в меню Область страницы.
• 3 Щелкните по стрелке в меню Цвет или изображение.
• 4

  Выполните любое из следующих действий:

  • чтобы сделать однотонный фон, оставьте выбранным вариант Сплошной цвет и выберите нужный цвет из цветовой схемы или с помощью палитры;
  • чтобы сделать фон с плавным переходом цветов, выберите вариант Градиент и выберите базовый цвет, а также подходящее направление перехода;
  • чтобы использовать в качестве фона узор, выберите вариант Узор и выберите базовый цвет и один из стандартных узоров или нажмите Загрузить, чтобы добавить собственный узор. Укажите, нужно ли его замостить, обрезать или уменьшить/увеличить и где его следует разместить;
  • чтобы использовать в качестве фона изображение, выберите вариант Изображение и выберите один из предложенных фонов или нажмите Загрузить, чтобы добавить собственное изображение. Укажите, нужно ли его замостить, обрезать или уменьшить/увеличить и где его следует разместить;
• 5

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

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

• 6 Нажмите OK, чтобы сохранить изменения.

Готово, вы изменили цвета отдельного элемента.

Шрифты

Чтобы выбрать шрифты заголовков и основного текста:

• 1 Перейдите на вкладку Дизайн > Шрифты.
• 2 Выберите название и размер каждого типа шрифта.
• 3

  для заголовков также можно выбрать стиль. Вы можете использовать жирный шрифт (кнопка B) и курсив (кнопка I).

  Настройки в этом разделе носят общий характер. Вы всегда можете изменить шрифт отдельных элементов непосредственно на странице.

• 4

  Нажмите OK, чтобы сохранить изменения.

  В конструкторе сайтов Parallels Web Presence Builder отсутствует функционал по добавлению и установке сторонних шрифтов. В качестве решения рекомендуем добавить необходимые шрифты с помощью кода HTML, созданного самостоятельно или найденного на тематических форумах. Для этого переместите модуль Текст и графика на страницу сайта и в меню данного модуля нажмите кнопку html.

Готово, вы выбрали шрифт.

Углы

Чтобы выбрать форму углов (прямые или закругленные) для элементов сайта:

• 1 Перейдите на вкладку Дизайн > Углы.
• 2 В меню Область страницы выберите тот элемент, углы которого вы хотите изменить.
• 3

  Выполните любое из следующих действий:

  • чтобы закруглить углы, поставьте соответствующие галочки;
  • чтобы сделать углы прямыми, уберите соответствующие галочки;
• 4 Нажмите OK, чтобы сохранить изменения.

Готово, вы изменили углы.

Границы

Чтобы выбрать границы элементов сайта:

• 1 Перейдите на вкладку Дизайн > Границы.
• 2 Выберите тип границ для элементов сайта в списке Внутренние границы.
• 3

  Выберите элементы, которые будут иметь границы.

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

• 4 Выберите внешнюю границу сайта из выпадающего списка Внешние границы.
• 5 Нажмите OK, чтобы сохранить изменения.

Готово, вы изменили границу элементов сайта.

Как разместить файл для скачивания

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

Чтобы загрузить файл:

Теперь, если вы хотите, чтобы посетители могли скачать этот файл, вставьте ссылку на него на любой странице.

Чтобы вставить ссылку на файл:

Чтобы удалить загруженный файл:

Как разместить favicon (значок) сайта

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

Чтобы загрузить favicon:

Если при добавлении значка сайта возникает ошибка, проверьте, чтобы иконка сайта была в формате .ico (переконвертировать изображение в .ico можно на сайте favicon.ru) и чтобы файл назывался favicon.ico.

Чтобы удалить favicon:

Как добавить теги в раздел «head»

Как сделать мобильную версию сайта

Для включения автоматической оптимизации сайта под мобильные устройства перейдите в конструкторе на вкладку «Настройки» в раздел «Другие» и поставьте галочку напротив пункта «Оптимизировать сайт для мобильных устройств». Теперь при открытии сайта через мобильное устройство, Presence Builder автоматически подстроит его внешний вид, структуру и элементы навигации под экран небольшого размера. Также появятся кнопки для переключения между мобильной и полной версиями сайта.

Для отключения автоматической оптимизации и открытия полной версии сайта по умолчанию независимо от используемого устройства уберите галочку напротив пункта «Оптимизировать сайт для мобильных устройств»:

Предварительный просмотр мобильной версии сайта в конструкторе

Для проверки отображения сайта на мобильном устройстве нажмите на стрелку выпадающего списка рядом с кнопкой «Опубликовать» и выберите пункт «Мобильная версия»:

В режиме просмотра мобильной версии сайта можно выбрать одно из популярных устройств, которое будет эмулировано, нажав на выпадающий список «Устройство» и выбрав нужный из представленных вариантов. Также есть возможность переключения ориентации выбранного мобильного устройства между портретной и альбомной при помощи кнопки «Повернуть»:

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

Оптимизация структуры и содержимого сайта

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

Создание страниц, невидимые и защищенные паролем страницы

Чтобы добавить новую страницу на свой сайт:

Создание/правка мета-тегов Description и Keywords на продвигаемых страницах

Описание и ключевые слова страницы (Description и Keywords) необходимо добавлять для каждой страницы отдельно.

Для этого откройте меню «Страницы», пункт «Изменить описание и ключевые слова страницы»:

Если вносить изменения в «Описание веб-сайта» (Description) и «Ключевые слова» (Keywords) для всего сайта в разделе «Настройки» > «Общие», они будут прописаны только для вновь созданных страниц.

Создание постраничной навигации

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

Удаление страницы

Чтобы удалить страницу:

Как изменить язык меню конструктора WPB

Чтобы изменить язык интерфейса конструктора сайтов, необходимо сменить язык в панели управления:

Смена языка меню конструктора WPB возможна в случае заказа хостинга сайтов с конструктором Web Presence Builder. При заказе отдельной услуги конструктора сайтов данная возможность не предоставляется.

Как поменять язык сайта

Изменить язык сайта можно в разделе Настройки, на вкладке Языки. Это повлияет на локализацию определенных элементов сайта, относящихся к сторонним компонентам, таким как Поиск Google. Выбор языка с написанием справа налево также переключит ваш сайт в режим письма справа налево:

Мультиязычная версия сайта

К сожалению, в конструкторе данный функционал не предусмотрен.

Создать версию сайта на другом языке вы можете вручную на поддомене (например, en.mydomain.com), а на основном сайте (mydomain.com) разместить на нее ссылку.

Основной сайт:

Создание ссылки:

Сайт на другом языке:

Включение уведомлений о файлах cookie

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

Файлы cookie — это небольшие файлы, сохраняемые веб-сервером на компьютерах посетителей. Они могут использоваться для разных целей: от запоминания личных настроек до наблюдения за поведением пользователей для повышения эффективности контекстной рекламы.

Дополнительные файлы cookie — это файлы, наличие которых не обязательно для нормальной работы сайта. Например, сюда относятся cookie-файлы сервисов статистики и контекстной рекламы, таких как Google Analytics и Google AdSense.

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

Если вы включите уведомление о дополнительных файлах cookie, вашим посетителям нужно будет подтвердить своё согласие с вашей политикой:

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

Как включить уведомление о файлах cookie

Для этого: