Пример изменения внешнего вида блога на шаблоне AB-Inspiration с плагином Живая форма

  Автор:
  2127

Вдогонку вчерашнему видео про ширину элементов в шаблоне AB-Inspiration сегодня записала еще один пример изменения внешнего вида блога на шаблоне AB-Inspiration.

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

Мы будем использовать шаблон AB- Inspiration + плагин Живая форма.

Вот так выглядит шаблон AB-Inspiration 6.0 плюс плагин Живая форма по умолчанию:

primer-3more2

А вот такой дизайн мы создадим:

primer-3more1

Такой внешний вид я называю «Уютный». Блог с границей и фоном по краям создает ощущения уюта. А если еще добавить узорчатый фон, то он вообще выглядит по домашнему, как теплая комната с обоями :).

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

Итак, краткий план действий:

1. Найти изображение для фона формы подписки под шапкой (плагин Живая форма)

2. Сгенерировать палитру из изображения в специальном сервисе cssdrive.com/imagepalette

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

4. Затем для основного цвета сгенерировать еще одну палитру от темного до белого colllor.com

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

5. Настроить форму подписки под шапкой. Загружаем фоновое изображение, регулируем высоту, ширина на 1100px, настраиваем заголовок, подзаголовок и форму.

6. Настроить шаблон:
— Ширина блога 1100px, устанавливаем цвет фона блога снаружи (основной), цвет блога внутри белый, тень вокруг.
— В шапке настраиваем цвета заголовка и описания.
— В основном меню устанавливаем цвета фона, при наведении и выпадающее меню (используем основной и второстепенный цвета).
— В стиле статей — убираем границу, указываем цвет заголовков, ссылок, кнопок, списков
— В стиле виджетов — граница цвет самый светлый от основного цвета, цвет заголовков основной
— Форма в виджете и в конце статьи по желанию. Используем основной и второстепенный цвета.

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

Подробная инструкция на видео:

Ну что, понравился дизайн? И согласитесь совсем не сложно :).

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

P.S. Данный материал написан в рамках конкурса «Самый эффектный дизайн блога на шаблоне AB-Ispiration». Больше о конкурсе можно узнать здесь: Конкурс на самый эффектный дизайн блога на шаблоне AB-Inspiration. Здесь же вы найдете все ссылки на вспомогательные инcтрукции по дизайну и другие примеры создания внешнего вида на шаблоне AB-Inspiration.

Пример изменения внешнего вида блога на шаблоне AB-Inspiration с плагином Живая форма

   4 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ

Комментарии в Фейсбук
Комментарии в Вконтакте