Дизайн сайта в Parallels Web Presence Builder

3 Июл 2017 - Жукова Татьяна Нет комментариев
Просмотров: 2816

Дизайн сайта в Parallels Web Presence Builder — вещь очень простая. А для людей творческих, не желающих пользоваться стереотипными шаблонами, еще и интересная. В этой статье мы подробно рассмотрим, как сделать свой неповторимый дизайн сайта в Parallels Web Presence Builder.

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

За все это отвечает единственная вкладка редактора Parallels Web Presence Builder — ДИЗАЙН. Рассмотрим ее подробнее.

Подраздел РАЗМЕТКА

разметка сайта

На скриншоте вы видите, как просто в этом конструкторе делать разметку сайта.

Верхний и нижний колонтитулы

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

Основной контент

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

Читайте также:  Оптимизация сайта и самые распространенные ошибки

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

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

Боковые панели

Также в этой вкладке вы можете редактировать боковые панели (сайдбары) вашего сайта: сделать один сайдбар или два, в один клик поменять их местами, задать ширину и высоту сайдбаров или убрать совсем, сделав сайт во всю ширину экрана — никаких сложностей!

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

Следующий подраздел вкладки ДИЗАЙН —

Схема

Этот подраздел позволяет задать цветовое решение для вашего сайта.

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

цветовая схема сайта

  1. Переходите в подраздел СХЕМА.
  2. Выбираете понравившийся вам набор цветов.
  3. И перед вами 4 основных цвета, которые будут задавать цветовую гамму вашего сайта.
  4. Подкорректировать любой из цветов по ваши предпочтения вы можете просто изменив шестнадцатеричный код или воспользоваться палитрой цветов.

цветовая схема сайта

Подраздел ЦВЕТА

Основная палитра вашего сайта состоит из четырех цветов. Каждый из них будет использован для различных элементов вашего сайта. Но это совсем не значит, что их нельзя изменять и можно использовать только четыре. Эти четыре цвета просто автоматически раскрасят элементы вашего сайта, но вы всегда сможете их подкорректировать в подразделе ЦВЕТА, причем задать нужный цвет можно любому элементу в визуальном режиме.

Читайте также:  Как начать работать в конструкторе Parallels Web Presence Builder

цвет

  1. Переходим в подраздел Цвета;
  2. Выбираем в выпадающем списке Область страницы элемент сайта, который мы будем менять;
  3. Щёлкаем по стрелке в выпадающем списке Цвет или изображение;
  4. Здесь мы можем выбрать:
  • однотонный фон — в этом случае следует оставить вариант Сплошной цвет и выбрать желаемый цвет из схемы или с использованием цветовой палитры;
  • фон с плавным переходом цветов — необходимо выбрать вариант Градиент и базовый цвет, а также нужное вам направление градиента;
  • узор — выбираем вариант Узор, назначаем желаемый цвет узора и один из предлагаемых стандартных вариантов. Кроме того, вы можете загрузить собственный узор, нажав на соответствующую кнопку. Вы можете указать, нужно ли его замостить, обрезать или уменьшить/увеличить, а также, где его следует размещать;
  • изображение. Если вы хотите использовать в качестве фона картинку или фото, то выбирайте вариант ИзображениеВам будет предложено несколько десятков стандартных фонов, либо загрузить собственное изображение. Так же как и в предыдущем случае можно указать как расположить фоновое изображение: замостить, обрезать или уменьшить/увеличить;

цвет сайта

5. Если настраиваемый элемент содержит текст, то вы можете настроить цвет шрифта, задать цвет ссылок и заголовков.

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

 Подраздел ШРИФТЫ

В этом разделе мы можем задать шрифты заголовков и основного текста для сайта в целом.
шрифты
  1. Переходим в подраздел Шрифты.
  2. Выбираем в выпадающих списках стиль шрифта и его размер для текста и заголовков.
  3. Задаем стиль: жирный шрифт или курсив

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

Подраздел УГЛЫ

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

Читайте также:  Уникализация картинок для продвижения сайтов

углы

  1. Переходим в подраздел Углы,
  2. В выпадающем списке выбираем элемент сайта, у которого вы хотите закруглить углы.
  3. Ставим галочки в нужном месте.

Подраздел ГРАНИЦЫ

Здесь мы можем задать стиль границ вашего сайта.

границы сайта

  1. Переходим в подраздел Границы
  2. Выбираем в выпадающем списке Внутренние границы тип границ для элементов вашего сайта
  3. Выбираем, где показывать границу: контент, колонтитулы, боковые панели. Задать разный вид границ для разных элементов сайта здесь не получится, но можно выбрать, какие элементы будут иметь границы, а какие — нет.
  4. Выбираем тип внешней границы вашего сайта в выпадающем списке Внешние границы.

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

Всем удачи! и до новых встреч!


Посмотрите другие статьи из этой рубрики:




Хотите быть в курсе новостей блога?

Подпишитесь на бесплатную рассылку новых статей
Ваш e-mail:

Есть что сказать? Оставьте комментарий!