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

  Автор:
  4426

Вдогонку вчерашнему видео про ширину элементов в шаблоне – конструкторе 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
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик многофункционального шаблона "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов разного назначения на WordPress. Основатель клуба "Мастер WordPress" и автор курсов по создании и применению сайтов на WordPress. Фрилансер. Предприниматель. Спикер.

Как создать сайт онлайн-школы на WordPress с интернет - магазином, профессиональным блогом и лендингами
Оставьте свой комментарий:

на Блоге
в Фейсбук
в Вконтакте