Самый популярный по опросу оказался третий вариант внешнего вида блога (дизайна) на WordPress c шаблоном — конструктором AB-Inspiration, с фоном на весь экран на главной странице, плагином «Живая форма+Слайдер» и «Входная страница». Мне тоже он очень нравится.
Все современные дизайны именно так и построены. Главная страница яркая и презентабельная, с большим качественным изображением, формой подписки или просто переходом на какую-либо страницу и уровни с выводом информации с блога (страницы, статьи, отзывы, произвольный контент, товары из каталога).
А внутренние страницы блога более сдержанные, просто с цветной шапкой и меню.
Такие блоги я называю Бренд-Блоги.
Подобные дизайны используют гуру рунета. Посмотрите блоги Владимира Довганя, Виталия Кузнецова, Олеся Тимофеева и многих других бизнесменов, которые являются брендами своих компаний и проектов.
Стоимость таких индивидуальных блогов может доходить до нескольких тысяч долларов, по времени могут занять несколько недель.
Посмотрела я блоги гуру, а также тенденции в дизайне (я записала отдельное видео по тенденциям современных дизайнов блогов. Можно посмотреть здесь: Что значит современный и эффектный внешний вид блога ) и вдохновилась создать подобный внешний вид на шаблоне — конструкторе AB-Inspiration.
И вот что у меня получилось.
Исходный шаблон вот такой:
И мы создадим вот такой:
Ну что, нравится? Кто смелый и готов создать такой дизайн на своем блоге?
Видео инструкцию я разбила на 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:
а также, хостинг Beget:
Средняя оценка: 5 из 5
Какая же вы молодец, очень красивые блоги получаются на вашем шаблоне. На свой сайт не нарадуюсь, хотя все еще он в процессе.
Раиса, спасибо большое за тёплые слова. Мне очень приятно. Ну а ваш блог не устаю повторять, верх стиля и аккуратности:)
Это ж надо так профессионально и просто показать такие важные нюансы для гармоничного блога. (пересмотрела все видео в статье).
Однозначно теперь проанализирую свои 3 блога и буду менять или корректировать дизайн.
В связи с этим вопрос, может где по этому поводу уже есть видео у тебя Анфиса, какой размер изображения делать в фотошоп именно как фоновое под весь блог.
Т.е я хочу совместить шапку блога и фоновое изображение, а потом уже донастроить в шаблоне под это изображение все остальное.
Если на всю ширину, лучше не менее 1280px, а ещё лучше 1600px
А максимальная ширина самого блога у нас 1140 ?
Я хочу например сделать на фоновом изображении картинки вставки вокруг блога как показано синими прямоугольниками на скрине
Анфиса, спасибо за уроки! Я изменила свой блог, правда. он не шикарный.
Но я старалась для участия в конкурсе. мой блог http://stranica-o.ru
Посмотрите, пожалуйста.
Здравствуйте Анфиса.
Все хорошо и уроки отличные, загорелась я.
Меня подвела работа в фотошопе, что-то я упускаю.
Надеюсь внуки помогут разобраться и свой блог доведу.
Спасибо Вам большое!
Анфиса, почему при просмотре часто отключается видео?
Вера, не могу сказать. У нас все показывает без отключения. Возможно дело в интернет. Когда интернет прерывается загрузка останавливается. Затем снова возобновляется.
Вот переделал свой дизайн по шагам в уроках. Участвовать в конкурсе не успел, но получилось переделать свой дизайн. Анфиса и Василий, спасибо Вам за четкие инструкции и руководство, все доходчиво и ясно. Не всегда все получается с первого раза, но если прикладывать усилия, то видешь результат своих усилий. С уважением, Виктор
Виктор: спасибо большое за отзыв. Вот это преображение :). Получилось здорово!
несколько подсказок:
1. Чтобы убрать белое поле под формой подписки на главной, нужно в настройках формы уменьшить высоту блока
2. На главной странице внизу (Входная страница) отображаются 2 пустых уровня: Отзывы и Каталог. Если вы не используете эти плагины, то уровни можно пока отключить. Просто уберите галочку в настройках Входной страницы в уровне «Отзывы» и «Каталог»
Анфиса, добрый день! А не подскажете, где и как можно у Вас приобрести этот шаблон? Давно ищу для своего блога что-то подобное, что можно гибко настраивать под свои вкусы и при этом без технических сложностей. Но что-то не могу найти у Вас на сайте, где можно купить этот шаблон, так что буду благодарна за ссылку
спасибо заранее!
Добрый день Наталья! Спасибо за доверие. Приобрести шаблон можно здесь: http://mlmcentr.ru Если нужно срочно, прямо сейчас то цена 8999 рублей. Но, обратите внимание, в конце каждого месяца мы проводим акцию «Счастливая неделя», и делаем скидку на комплект с шаблоном 40%. Стоимость будет 5399 рублей.
Благодарю, Анфиса, за такое руководство по дизайну блога. Просто великолепно. Мне теперь аж хочется писать на свой блог. AB-Inspiration улучшился в сотни раз с момента как я его приобрел. С Вами очень приятно иметь дело.