Пример создания дизайна бренд-блога на шаблоне AB-Inspiration 6.0 с плагинами Живая Форма и Входная Страница

  Автор:
  3440

Самый популярный по опросу оказался третий вариант дизайна, с фоном на весь экран на главной странице, плагином Живая форма и Входная страница. Мне тоже он очень нравится.

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

А внутренние страницы блога более сдержанные, просто с цветной шапкой и меню.

Такие блоги я называю Бренд-Блоги.

Подобные дизайны используют гуру рунета. Посмотрите блоги Владимира Довганя, Виталия Кузнецова, Олеся Тимофеева и многих других бизнесменов, которые являются брендами своих компаний и проектов.

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

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

И вот что у меня получилось.

Исходный шаблон вот такой:
Шаблон AB-Inspiration 6.0 по умолчанию

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

design3

Ну что, нравится? Кто смелый и готов создать такой дизайн на своем блоге?

Видеоинструкцию я разбила на 3 части:

1. Подбор цвета, Настройка шапки и Живой формы
2. Настройка Входной страницы
3. Настройка шаблона

Ссылки на инструменты:
http://www.cssdrive.com/imagepalette — создание палитры цветов с изображения
http://colorscheme.ru/ — подбор цветов
http://colllor.com/ — палитра основного цвета от темного до белого

Ну что, поехали?

Подбор цвета, Настройка шапки и «Живой формы»

Настройка «Входной страницы»

Настройка шаблона

Давайте еще раз повторим шаги.

1. Подобрать большое изображение, или использовать свое. Если фотографируетесь в студии вы должны на фотошрафии находиться справа или слева, чтобы была возможность разместить форму подписки с противоположной стороны. Изображение не менее 1600px в ширину.

2. Загрузить изображение в сервис http://www.cssdrive.com/imagepalette и сгенерировать палитру цветов.

3. Выбрать цвет, который будет основным и скопировать его

4. В сервисе http://colorscheme.ru подобрать второстепенный цвет

5. В сервисе http://colllor.com создать моно палитру основного цвета

6. Найстройка шапки, заголовка блога и меню в шапке

7. Настройка формы подписки под шапкой (Плагин Живая Форма)

8. Настройка входной страницы (Плагин Входная страница)

9. Настройка шаблона

Главная задача:
1. Основной цвет использовать для заголовков, выделить фон уровня на главной
2. Второстепенный контрастный цвет для акцентов (меню, кнопки, ссылки)
3. Использовать не больше 3-х цветов
4. Подогнать все заголовки под один шрифт
5. Можно усилить или уменьшить насыщенность второстепенного цвета
6. В монополитре основного цвета выбирать самые светлые оттенки для фонов и текстов на темном фоне

Если есть вопросы, не стесняйтесь, пишите в комментариях. Буду рада если вы реализуете подобный дизайн на своем блоге. Кто же готов похвастаться дизайном, пишите адреса блогов в комментариях :)

Это уже второй пример изменения внешнего вида блога в рамках канкурса на самый эффектный дизайн блога на шаблоне AB-Inspiration. В первом варианте мы посмотрели пример как создать дизайн блога с помощью одного изображения в шапке и 2-х цветов.

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

Оставайтесь на связи!

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

Вот вспомогательные материалы для создания дизайна блога на шаблоне AB-Inspiration:

Что значит современный и эффектный внешний вид блога

3 способа найти классное изображение для фона блога

Как скачать фоновое изображение с сайта и скопировать код цвета

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

Как подготовить портрет для  фона блога

Пример создания дизайна бренд-блога на шаблоне AB-Inspiration 6.0 с плагинами Живая Форма и Входная Страница

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

  2. Это ж надо так профессионально и просто показать такие важные нюансы для гармоничного блога. (пересмотрела все видео в статье).
    Однозначно теперь проанализирую свои 3 блога и буду менять или корректировать дизайн.
    В связи с этим вопрос, может где по этому поводу уже есть видео у тебя Анфиса, какой размер изображения делать в фотошоп именно как фоновое под весь блог.
    Т.е я хочу совместить шапку блога и фоновое изображение, а потом уже донастроить в шаблоне под это изображение все остальное.

  3. Анфиса, спасибо за уроки! Я изменила свой блог, правда. он не шикарный.
    Но я старалась для участия в конкурсе. мой блог http://stranica-o.ru
    Посмотрите, пожалуйста.

  4. Здравствуйте Анфиса.
    Все хорошо и уроки отличные, загорелась я.
    Меня подвела работа в фотошопе, что-то я упускаю.
    Надеюсь внуки помогут разобраться и свой блог доведу.
    Спасибо Вам большое!

  5. Анфиса, почему при просмотре часто отключается видео?

    • Вера, не могу сказать. У нас все показывает без отключения. Возможно дело в интернет. Когда интернет прерывается загрузка останавливается. Затем снова возобновляется.

  6. Вот переделал свой дизайн по шагам в уроках. Участвовать в конкурсе не успел, но получилось переделать свой дизайн. Анфиса и Василий, спасибо Вам за четкие инструкции и руководство, все доходчиво и ясно. Не всегда все получается с первого раза, но если прикладывать усилия, то видешь результат своих усилий. С уважением, Виктор

    • Виктор: спасибо большое за отзыв. Вот это преображение :). Получилось здорово!
      несколько подсказок:
      1. Чтобы убрать белое поле под формой подписки на главной, нужно в настройках формы уменьшить высоту блока
      2. На главной странице внизу (Входная страница) отображаются 2 пустых уровня: Отзывы и Каталог. Если вы не используете эти плагины, то уровни можно пока отключить. Просто уберите галочку в настройках Входной страницы в уровне «Отзывы» и «Каталог»

  7. Анфиса, добрый день! А не подскажете, где и как можно у Вас приобрести этот шаблон? Давно ищу для своего блога что-то подобное, что можно гибко настраивать под свои вкусы и при этом без технических сложностей. Но что-то не могу найти у Вас на сайте, где можно купить этот шаблон, так что буду благодарна за ссылку :) спасибо заранее!

    • Добрый день Наталья! Спасибо за доверие. Приобрести шаблон можно здесь: http://mlmcentr.ru Если нужно срочно, прямо сейчас то цена 8999 рублей. Но, обратите внимание, в конце каждого месяца мы проводим акцию «Счастливая неделя», и делаем скидку на комплект с шаблоном 40%. Стоимость будет 5399 рублей.

  8. Благодарю, Анфиса, за такое руководство по дизайну блога. Просто великолепно. Мне теперь аж хочется писать на свой блог. AB-Inspiration улучшился в сотни раз с момента как я его приобрел. С Вами очень приятно иметь дело.

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