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

  Автор:
  14 комментариев
  10253

Самый популярный по опросу оказался третий вариант внешнего вида блога (дизайна) на 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 способа найти классное изображение для фона блога

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

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

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

 


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

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

 

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

   3 голоса
Средняя оценка: 5 из 5
Находите эту информация полезной и интересной? Тогда смело жмите на кнопки соцсетей и поделитесь этой информацией со своими друзьями и знакомыми:

Анфиса Бреус

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

Подпишись на меня в Telegram! Только важные новости и лучшие статьи
Оставьте свой комментарий:

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

Добавить комментарий для Виктор Отменить ответ

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