Дизайн и настройка сайта, созданного в Web Presence Builder
Для изменения структуры вашего сайта в конструкторе есть раздел «Дизайн». В нем вы можете менять внешний вид вашего сайта, цветовую гамму, ширину сайта, настраивать боковые панели, добавлять или изменять границы элементов, а также создавать шаблоны внешнего вида или использовать существующие. Подробная информация о смене шаблона сайта, его импорте и экспорте содержится в статье Создание сайта в конструкторе Web Presence Builder.
В разделе «Дизайн» вам также доступны следующие подразделы:
Разметка вашего сайта может состоять из следующих элементов:
Верхний колонтитул. Это самая верхняя область сайта, где обычно находятся изображение баннера и логотип компании. С верхним колонтитулом можно выполнить следующие действия:
- переместить изображение баннера и логотип в любое место на странице;
- уменьшить высоту верхнего колонтитула до 25 пикселей, удалив из него все элементы;
- растянуть фон или колонтитул на всю ширину экрана;
Содержимое (текст). Это основная область страницы, где находится большая часть содержимого. С этой областью вы можете выполнить следующие действия:
- изменить ее высоту;
- разбить её на несколько колонок. Для этого перетащите новые модули к левой или правой границе основного содержимого и вставьте их;
- изменить расположение колонок, переместив их содержимое влево или вправо;
Боковые панели. Это столбцы, в которые можно поместить все виды модулей: как сквозные, так и страничные. С боковыми панелями можно выполнить следующие действия:
- добавить одну боковую панель и поместить её слева или справа от основного содержимого;
- добавить две боковые панели. Они будут размещены слева и справа от основного содержимого;
- изменить высоту и ширину боковых панелей;
- переместить боковые панели вверх страницы и расположить их слева или справа от верхнего колонтитула;
- поменять боковые панели местами;
Нижний колонтитул. Это самая нижняя часть страницы, где обычно размещают название компании, контактную или правовую информацию. С нижним колонтитулом можно выполнить следующие действия:
- уменьшить его высоту до 25 пикселей, удалив из него все элементы;
- растянуть фон или колонтитул на всю ширину экрана.
Изменение разметки сайта
Перейдите на вкладку «Дизайн» > «Разметка», затем выполните следующие действия:
Выберите расположение боковых панелей:
- чтобы перенести боковую панель на другую сторону сайта или поменять местами две боковые панели, нажмите Поменять местами;
- чтобы переместить боковые панели вверх страницы, щёлкните по ним в схематической модели сайта;
Задайте размер элементов страницы:
Чтобы задать общую ширину страниц, в разделе Ширина сайта выберите один из следующих вариантов:
- фиксированная: размер сайта не будет зависеть от размера окна браузера. В этом случае вам нужно указать желаемую ширину сайта в пикселях;
- тянущаяся: размер сайта будет меняться в зависимости от текущего размера окна браузера. В этом случае укажите ширину вашего сайта в процентах от размера окна браузера.
Чтобы сделать ширину верхнего колонтитула, нижнего колонтитула и основного блока с содержимым равной ширине страницы, щёлкните по соответствующим элементам в схематической модели сайта;
В разделе Минимальная высота укажите высоту основного блока с содержимым и каждой из боковых панелей. Это значение показывает высоту элементов вашего сайта без содержимого. Когда вы добавите содержимое в боковые панели и центральную часть, они растянутся по высоте, чтобы уместить содержимое;
Чтобы обеспечить вертикальное выравнивание боковых панелей и области с основным содержимым, поставьте галочку Растянуть боковые панели и область с содержимым до нижнего колонтитула;
Если у вас есть боковые панели, в разделе Ширина укажите ширину каждой из них. Размер центральной части страницы будет определён автоматически;
В разделе Размер полей укажите размер вертикальных и горизонтальных полей. Поле — это пространство между границами соседних элементов;
Готово, вы изменили разметку сайта.
Чтобы выбрать основную цветовую схему сайта:
Готово, вы выбрали цветовую схему.
Основная цветовая схема (или набор стилей) вашего сайта состоит из четырёх цветов. Каждый цвет используется сразу для нескольких элементов сайта. Цвета отдельных элементов можно настроить дополнительно.
Чтобы выбрать цвета и фоновые изображения для отдельных элементов сайта:
Выполните любое из следующих действий:
- чтобы сделать однотонный фон, оставьте выбранным вариант Сплошной цвет и выберите нужный цвет из цветовой схемы или с помощью палитры;
- чтобы сделать фон с плавным переходом цветов, выберите вариант Градиент и выберите базовый цвет, а также подходящее направление перехода;
- чтобы использовать в качестве фона узор, выберите вариант Узор и выберите базовый цвет и один из стандартных узоров или нажмите Загрузить, чтобы добавить собственный узор. Укажите, нужно ли его замостить, обрезать или уменьшить/увеличить и где его следует разместить;
- чтобы использовать в качестве фона изображение, выберите вариант Изображение и выберите один из предложенных фонов или нажмите Загрузить, чтобы добавить собственное изображение. Укажите, нужно ли его замостить, обрезать или уменьшить/увеличить и где его следует разместить;
Если элемент содержит текст, настройте цвет шрифта, указав нужное шестнадцатеричное значение или с помощью палитры.
Если после этого вы выберете другую цветовую гамму на вкладке Схема, изменения, внесенные на вкладке Цвета, будут отменены.
Готово, вы изменили цвета отдельного элемента.
Чтобы выбрать шрифты заголовков и основного текста:
для заголовков также можно выбрать стиль. Вы можете использовать жирный шрифт (кнопка B ) и курсив (кнопка I ).
Настройки в этом разделе носят общий характер. Вы всегда можете изменить шрифт отдельных элементов непосредственно на странице.
Нажмите OK, чтобы сохранить изменения.
В конструкторе сайтов Parallels Web Presence Builder отсутствует функционал по добавлению и установке сторонних шрифтов. В качестве решения рекомендуем добавить необходимые шрифты с помощью кода HTML, созданного самостоятельно или найденного на тематических форумах. Для этого переместите модуль Текст и графика на страницу сайта и в меню данного модуля нажмите кнопку html.
Готово, вы выбрали шрифт.
Чтобы выбрать форму углов (прямые или закругленные) для элементов сайта:
Выполните любое из следующих действий:
- чтобы закруглить углы, поставьте соответствующие галочки;
- чтобы сделать углы прямыми, уберите соответствующие галочки;
Готово, вы изменили углы.
Чтобы выбрать границы элементов сайта:
Выберите элементы, которые будут иметь границы.
Вы можете выбрать только один тип внутренних границ для всех элементов сайта, но вы можете указать, какие элементы будут иметь границы, а какие нет.
Готово, вы изменили границу элементов сайта.
Как разместить файл для скачивания
Вы можете загрузить в редактор документы, изображения и другие виды файлов на вкладке Документы и затем размещать ссылки на них на страницах вашего сайта.
Чтобы загрузить файл:
Нажмите Загрузить:
Теперь, если вы хотите, чтобы посетители могли скачать этот файл, вставьте ссылку на него на любой странице.
Чтобы вставить ссылку на файл:
На панели инструментов модуля «Текст и графика» щёлкните по значку «Ссылка»:
Выберите файл и нажмите ОК:
Готово, вы добавили ссылку на скачивание.
Чтобы удалить загруженный файл:
Выберите файл и нажмите Удалить:
Готово, вы удалили загруженный файл.
Как разместить favicon (значок) сайта
Значок сайта — небольшое изображение, которое показывается в адресной строке браузера при посещении сайта, а также рядом с названием сайта в списке закладок. Значок сайта можно создать с помощью любого из многочисленных онлайн-приложений и затем загрузить его по данной инструкции. Этот значок будет виден всем посетителям вашего сайта.
Чтобы загрузить 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, если на нем есть следующие функции:
- Google Analytics;
- встроенное видео;
- модуль «Галерея изображений» (с сервисом Picasa в качестве источника изображений);
- модуль «Онлайн-магазин»;
- модуль «Карта»;
- модуль «Комментарии»;
- модуль «Поделиться»;
- модуль «Скрипт»;
- модуль «Поиск».
Если вы включите уведомление о дополнительных файлах cookie, вашим посетителям нужно будет подтвердить своё согласие с вашей политикой:
После этого уведомление закроется. Вместо уведомления в углу страницы появится значок, и посетитель сможет продолжить просмотр вашего сайта. Если посетитель откажется, он будет перенаправлен на сайт google.com.
Как включить уведомление о файлах cookieНажмите Включить уведомление о файлах cookie:
Поставьте галочку «Показывать уведомление о файлах cookie» и нажмите OK:
Готово, вы включили уведомления о файлах cookie.
Ошибка при добавлении существующего магазина Ecwid в конструктор WPB
Добавляя существующий магазин Ecwid в конструктор Web Presence Builder, при вводе ID магазина вы можете получить сообщение вида:
«Указанный код магазина не подходит, так как зарегистрирован напрямую через Ecwid или через Parallels Presence Builder другого провайдера».
Решить данную проблему можно 2 способами:
1 вариантВы можете установить магазин посредством добавления модуля «Скрипт» и вставкой в него следующего кода:
<div> <script type='text/javascript' src='http://app.ecwid.com/script.js?1234567'> </script> <script type='text/javascript'> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style b-button-square b-button-square_icon_copy b-button-square_color_default b-button-square_size_normal b-clipboard__copy">
Идентификатор 1234567 вам необходимо заменить на ID вашего магазина на Ecwid.
Результат работы кода можно увидеть только на опубликованном сайте.
2 вариантТакже вы можете перенести товары из одного магазина в другой посредством экспорта и импорта всех товаров в CSV-файл следующим образом:
Перейдите в раздел «Каталог» и выберите подраздел «Товары»:
Выберите Экспортировать все или примените фильтры для выбора позиций товаров и нажмите Экспортировать найденное:
Указав «Разделитель» и выбрав колонки для экспорта, нажмите на Выгрузить в CSV-файл, файл будет скачен на ваш локальный компьютер:
Нажмите Выход из учетной записи для смены аккаунта:
Кликните на Импорт товаров:
Выберите сохраненный ранее файл и при необходимости измените автоматически указанные данные:
Для удаления ранее добавленных в этот магазин товаров вы можете поставить галочку в пункте «Удалить все товары/категории перед импортом»:
Готово, вы импортировали товары интернет-магазина.
Узнать более подробную информацию про импорт товаров в Ecwid, а также ознакомиться с устранением возможных неисправностей при импорте вы можете по данному адресу.