Мастер-класс
по изменению внешнего вида на шаблоне AB-Inspiration
Цветовая гамма:
| #eef4f7 Фон | #8f8f8f Меню | #8dbdce Меню | #6aa9bf | #3b859e | #5b5b5b |
Внешний вид:
Для того, чтобы создать такой блог Вам понадобятся:
- Шаблон AB-Inspiration последней версии - http://mlmcentr.ru
- плагин WP-Form "Живая форма+Слайдер" - http://wpform.ru
- Плагин "Отзывы" - http://wptestimonials.ru/
- Плагин "Входная страница" - 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. Вкладка "Слайды"
2. Заполнить поля "Заголовок", "Подзаголовок", "Описание", "Ссылка"
4. Вкладка "Стиль слайдов"
Граница блока: нет/1px/нет/цвет-нет
5. Вкладка "Стиль текста"
Настройка текста
Стиль заголовка Arial/40px/цвет - #3b859eСтиль подзаголовка - Arial/30px/цвет - #6aa9bf
Стиль описания Arial/16px/цвет - #5b5b5b
Настройка блока
Расположение: СправаШирина: 350
Отступы сверху: 0 снизу: 400
Фон: Убрать галочку
Анимация: Выплывает слева
6. Вкладка "Стиль кнопки"
Текст на кнопке: произвольный
Размер, шрифт, стиль, цвет, тень 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