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

  Автор:
  Комментариев нет
  5830

Вдогонку вчерашнему видео про ширину элементов в шаблоне — конструкторе 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.

 


Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget
Пример изменения внешнего вида блога на шаблоне AB-Inspiration с плагином Живая форма

   4 голоса
Средняя оценка: 5 из 5
Если Вам понравилась статья и Вы нашли её полезной, поделитесь ею в соцсетях! Нажмите на кнопки ниже, чтобы сделать это прямо сейчас.

Анфиса Бреус

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

Оставьте свой комментарий:

Ваш адрес email не будет опубликован. Обязательные поля помечены *