Пример создания красивого внешнего вида бренд — блога на WordPress c шаблоном — конструктором AB-Inspiration

  Автор:
  9592

Самый популярный по опросу оказался третий вариант внешнего вида блога (дизайна) на WordPress c шаблоном — конструктором AB-Inspiration, с фоном на весь экран на главной странице, плагином «Живая форма+Слайдер» и «Входная страница«. Мне тоже он очень нравится.

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

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

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

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

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

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

Создай свой сайт на WordPress сегодня

 

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

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

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

design3

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

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

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

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

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

Подбор цвета, настройка шапки профессионального сайта/блога  на WordPress и премиум плагина «Живая форма + слайдер«

Настройка премиум плагина «Входной страницы«

Как создать внешний вид сайта на WordPress с премиум плагином «Входная страница» (AB-Inspiration)

Настройка шаблона — конструктора AB-Inspiration

Настройка внешнего вида (дизайна) внутренних страниц сайта на WordPress с шаблоном — конструктором AB-Inspiration

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

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

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

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

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

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

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

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

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

9. Настройка шаблона — конструктора AB-Inspiration

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

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

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

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

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

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

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

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

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

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

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

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

Создай свой сайт на WordPress сегодня

Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:

Анфиса Бреус

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

Как создать свой сайт на WordPress с закрытыми и отрытыми онлайн - курсами, с универсальным интернет - магазином, профессиональным блогом и высоко конверсионными лендингами для заработка в интернете 2021
Комментарии на Блог
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 улучшился в сотни раз с момента как я его приобрел. С Вами очень приятно иметь дело.

Оставьте ваш комментарий или вопрос