Мастер-класс
по изменению внешнего вида на шаблоне AB-Inspiration

Цветовая гамма:

#eef4f7
Фон
#8f8f8f
Меню
#8dbdce
Меню
#6aa9bf#3b859e#5b5b5b


Внешний вид:

Для того, чтобы создать такой блог Вам понадобятся:

  1. Шаблон AB-Inspiration последней версии - http://mlmcentr.ru
  2. плагин WP-Form "Живая форма+Слайдер" - http://wpform.ru
  3. Плагин "Отзывы" - http://wptestimonials.ru/
  4. Плагин "Входная страница" - http://wphomepage.ru

Инструкция

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

Стиль блога:

Ширина блога: 1100px
Отсуп: 20
Фон вокруг блога: цвет - #ffffff, картинка - texture.gif(Повторять все/Сверху по центру/Прокручивается)
Фон внутри блога цвет - #ffffff, картинка - нет
Граница: нет
Закругления углов границы блога: 0px
Тень: без тени

Стиль шапки

Высота: 200
ширина: 1100px
отступ: 0
Фон снаружи: цвет - нет, картинка: нет
Фон внутри: цвет - #ffffff, картинка - dotted_border.gif: повторять по горизонтали/внизу по-центру/прокручивается
Размер фона (картинки) в шапке: Исходный размер
Граница: 0px

Настройка логотипа в виде изображения:
Отметить галочкое если хотите загрузить логотим: поставить галочку
Пимер логотипа: logo.png
Отступ сверху: 40
Отступ слева: 380

Настройка заголовка блога в виде текста (Если название блог в виде текста):
Стиль шрифта заголовка блога: 60px/Mark Script/Обычный/#3b859e,
При наведении мышки: #5b5b5b,
Трансформация букв: С Большой Буквы,
Отступ сверху: 30,
Отступ слева: 400

Настройка описания блога в виде текста:
Стиль шрифта заголовка блога: 16px/Arial/Обычный/#5b5b5b
Трансформация букв: нет
Расстояние между буквами: 0
Отступ сверху: 0,
Отступ слева: 400


Стиль меню в шапке

Отображать меню в шапке? поставить галочку
Расположение меню по вертикали: внизу
Расположение пунктов меню по горизонтали: по-центу
Высота меню: 50
Основной фон: нет
При наведении мышки: нет
Выпадающее: #8dbdce
Закругления углов меню: 0px
Прозрачность фона: нет
Стиль: 14px/Arial/Обычный/#5b5b5b
При наведении мышки: #8dbdce,
Выпадающее меню: #ffffff,
Трансформация:: нет


Стиль основного меню

Отображать основное меню?: убрать галочку


Стиль плавающее меню

Отображать плавающее меню?: убрать галочку


Стиль контента

Ширина общего поля вокруг статей и виджетов: 1100px
Отступ сверху: 0
Отступ снизу: 0
Фон вокруг статей и виджетов: цвет: #ffffff, картинка: нет
Отображать границу вокруг статей и виджетов?: нет
Отображать разделитель между статьями: убрать галочку
Шрифт текста на всем блоге: Arial


Стиль Статьи

Фон внутри статей: цвет - #ffffff, картинка - нет
Отображать границу вокруг статей?: нет
Размер шрифта текста в статьях и на страницах: 14px

Заголовки Стиль заголовков статей: 30px/Arial/Обычный/#5b5b5b,
При наведении мышки: #6aa9bf,
Цвет заголовка на внутренней странице: #5b5b5b,
Шрифт заголовков в тексте статей: Arial

Ссылки
Цвет ссылок: #3b859e
При наведении мышки: #6aa9bf
Посещенная ссылка: #3b859e

Кнопки
Цвет кнопок: #3b859e
Цвет текста на кнопках: #ffffff

Комментарии
Фон комментариев: #ffffff
Фон комментариев автора: #ffffff


Стиль Виджетов

Расположение боковой колонки: справа
Фон внутри виджета: цвет - #ffffff, картинка - нет
Отображать границу вокруг виджетов?: нет
Стиль заголовков виджетов: 26px/Arial/Обычный/#5b5b5b,
Трансформация букв: нет,
Цвет фона заголовка виджетов: #ffffff,


Стиль виджет в футер

Фон вокруг виджетов в футер: цвет - #ffffff, картинка: dotted_border.gif: Повторять по вертикали/Сверху по центру/ Прокручивается
Фон внутри виджета: цвет: нет, картинка - нет
Граница: 0px
Закругления углов виджетов: 0px
Стиль заголовков виджетов: 26px/Arial/Обычный/#5b5b5b,
Трансформация букв: нет,
Цвет фона заголовка виджетов: #ffffff,


Стиль Футер

Ширина нижней части: 100%
Фон нижней части блога footer: цвет - #3b859e, картинка - нет
Цвет текста в footer: #ffffff


Настройка статей

Размер миниатюры: маленькая
Настройка стиля изображений: с границе (третья с лева)


Форма в виджите

Форма в виджете: Напишите текст в поле
Общий стиль шрифта заголовка: 16px/Arial/Обычный/#5b5b5b
Трансформация букв: С Большой Буквы

Использование HTML для отдельного слова: <span style="font-size: 50px; color: #3b859e;"> УЗНАЙТЕ! </span>

Цвет шрифта текста гарантии: #5b5b5b
Изображение для формы: картинка: нет
Отсуп формы от заголовка и картинки: 270
Цвет фона формы подписки вверху - #ffffff
Цвет фона формы подписки внизу - #ffffff
Фон в виде изображения - bg-form-widget.jpg
Расположение фона - Сверху по-центру
Отображать границу вокруг формы - поставить галочку
Цвет границы формы подписки - #eef4f7
Отображать тень вокруг формы? - нет
Закругления формы подписки - 3px
Создать свой стиль кнопки - поставить галочку
Цвет кнопки - #3b859e
При наведении мышкой - #6aa9bf
Закругления углов кнопки - 3px
Отображать тень внутри кнопки? - убрать галочку
Отображать тень вокруг кнопки? - убрать галочку
Граница вокруг кнопки? - убрать галочку
Высота кнопки - 40
Стиль текста на кнопке - 16px/Arial/Обычный/#ffffff


Поделиться в конце статьи

Фон блока: #ffffff
Отображать границу вокруг блока "Поделиться"?: убрать галочку
Стиль шрифта заголовка для кнопок "ПОДЕЛИТЬСЯ": 22px/Arial/Обычный/#5b5b5b
Расположение заголовка: слева


Форма в конце статьи

Поставить галочку: да
Рассыльщик писем: выберите респондер и заполните поля
Цвет фона блоке "Форма подписки": цвет - #ffffff, картинка: background-form.jpg
Отображать границу вокруг блока "Поделиться"?: поставить галочку
Цвет границы: #eef4f7
Закругления углов: 3px
Текст: напишите свой текст заголовка формы
Общий стиль шрифта заголовка: - 18px/Arial/Обычный/#5b5b5b
Изображение: transparent-form.gif
Стиль текста на кнопке - 16px/Arial/Обычный/#ffffff
Цвет фона кнопки: #6aa9bf


Настройки плагина WPForm (Слайды)

1. Активировать слайды

2. Вкладка "Ширина/Высота/Отступы блока"


Где показывать слайды: Только на главной
Ширина блока: 1100px
Высота блока: 550
Отступ внутри блока: сверху: 0 снизу: 0
Отступ за пределами блока: сверху: 0 снизу: 0
Общий фон блока: картинка - нет, цвет - нет

3. Вкладка "Слайды"

1. Загрузить слайды (slide1.jpg, slide2.jpg, slide3.jpg)
2. Заполнить поля "Заголовок", "Подзаголовок", "Описание", "Ссылка"

4. Вкладка "Стиль слайдов"

Стиль смены слайдов: Появление
Граница блока: нет/1px/нет/цвет-нет

5. Вкладка "Стиль текста"

Настройка текста

Стиль заголовка Arial/40px/цвет - #3b859e
Стиль подзаголовка - Arial/30px/цвет - #6aa9bf
Стиль описания Arial/16px/цвет - #5b5b5b

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

Расположение: Справа
Ширина: 350
Отступы сверху: 0 снизу: 400
Фон: Убрать галочку
Анимация: Выплывает слева

6. Вкладка "Стиль кнопки"

Цвет кнопки: #3b859e
Текст на кнопке: произвольный
Размер, шрифт, стиль, цвет, тень Arial/13px/Обычный/#ffffff
С тенью / Без тени? Без тени

Настройки плагина "Входная страница"

Общие настройки для всех уровней

Ширина уровней 1100px
Шрифт для заголовков Arial
Анимация поставить галочку
Отступ сверху 0
Отступ снизу 0
Граница убрать галочку
Закругления границы нет

Настройки контента



Уровень №1

Внешний вид уровня : 1 на всю ширину
Фон уровня: картинка - feature_texture.jpg: Повторять все/Сверху Слева, цвет - #ffffff
Контент : Не важно, на этом уровне мы будем использовать только произвольный текст

Поле для произвольного текста: Поставить галочку, в поле написать текст.
Размер шрифта: 50px, Шрифт: Arial, Расположение: по центру

Изображение, Заголовок, Описание, Кнопка «Читать далее», Произвольная кнопка «Читать далее»: галочку убрать

Уровень №2

Внешний вид уровня : 2 - 50/50
Фон уровня: нет, Цвет фона: #ffffff

Контент: Произвольно
Заполните поля: Заголовок, Текст, Ссылка

Иконки: поставить галочку, Выберите икноки для блоков
Размер иконок: в 4 раза больше
Расположение иконок: Слева внутри контенте
Цвет иконок: #6aa9bf

Поле для произвольного текста: Убрать галочку

Изображение: Убрать галочку

Заголовок: поставить галочку
Размер: 40px, Стиль: нет, Цвет: #5b5b5b, Расположение: Слева, Позиция: Над изображением

Описание: поставить галочку
Размер: 14px, Колчество слов в описании: 15

Кнопка «Читать далее»: поставить галочку
Текст: напишите совй текст,
Размер: 14px, Цвет текста: #ffffff, Расположение: Справа, Цвет кнопки: #3b859e

Произволлная кнопка «Читать далее» - убрать галочку

Уровень №3

Внешний вид уровня : 1 - на всю ширину
Фон уровня: dotted_border1.gif,
Повторять по горизонтали/Сверху Слева
Цвет фона: #ffffff

Контент: Произвольно
Заполните поля: Текст, Изображение - image-homepage.jpg, Ссылка

Иконки: Убрать галочку

Поле для произвольного текста: Поставить галочку
Загрузить изображение - welcome.png или написать просто текстом

Изображение: поставить галочку
Ширина - 500px, Высота - 370, Расположение - Слева,
Отображать стиль картинки - убрать галочку

Заголовок: Убрать галочку
Описание: поставить галочку
Размер: 16px, Колчество слов в описании: 15

Кнопка «Читать далее»: поставить галочку
Текст: напишите совй текст,
Размер: 14px, Цвет текста: #ffffff, Расположение: Справа, Цвет кнопки: #3b859e

Произволлная кнопка «Читать далее» - убрать галочку


Автор: Анфиса Бреус, Изменение внешнего вида блога на шаблоне AB-Inspiration