Настройка темы Jannah
В тренде

Ваш стиль сайта на WordPress, настройки внешнего вида

С помощью этого руководства вы сможете настроить Ваш стиль сайта на WordPress, создать внешний вид, как у профессионалов — или даже лучше 🙂

Стили, одна из самых сильных сторон темы Jannah и это самый простой способ настроить стиль вашего сайта. С помощью настроек вы можете сделать:

  • Преобразовать свой сайт в темный вид одним щелчком мыши.
  • Настроить цвета для каждого раздела вашего сайта: header’a  и footer’a, основного и вторичного меню, контента, мобильного меню и многое другое.
  • Выбрать один из предопределенных скинов, чаще всего вам понравится один из них.
  • Хотите больше фантазии, вы можете написать свой собственный стиль в разделе кодов.

Ну а теперь давайте выясним кое-какие моменты, которые выглядят как очевидные:

Настройки стиля


Ваш стиль сайта

1. Dark Skin — подключить или отключить темный вид сайта. Быстрый просмотр здесь.

2. Lazy Load For Images — ленивая загрузка картинок задерживает загрузку их на длинных веб-страницах. Изображения вне области просмотра не загружаются, пока пользователь не прокрутит их. Это противоположно предварительной загрузке изображения. Использование Lazy Load на длинных веб-страницах сделает загрузку страницы быстрее. В некоторых случаях это также может помочь снизить нагрузку на сервер.

lazy load

3. Apply custom styling by inline code (Применить ваш стиль с помощью встроенного кода), отметьте эту опцию, если у вас есть проблемы со стилями из-за разрешений на перезапись файла стиля.

Пользовательские классы сайта


класс сайта

Добавьте пользовательский класс или что-то ещё (разделяя тему пробелами) к тегу body для дополнительной настройки.

Основной цвет


основной цвет сайта

1. Predefined Skins — выберите ваш любимый скин из 15 предопределенных скинов, после выбора одного из вариантов оформления ниже автоматически будут заполнены все настройки.

2. Custom Primary Color — основной цвет сайта.

Body


оформление body сайта

1. Disable Boxed/Framed Layout Shadows — Включить / отключить тени вокруг сайта, возможно только в boxed и framed шаблонах сайта.

2. Highlighted Text Color — фон текста при выделении мышью некоторых слов или символов.

3. Links Text Color — цвет всех ссылок в нормальном состоянии (не при наведении или фокусе). Это переопределит пользовательский цвет в новостных блоках.

4. Links text HOVER color — цвет всех ссылок при наведения, это переопределит пользовательский цвет блоков новостей.

5. Borders Color — это один из самых мощных и фантастических параметров в настройках стиля, позволяющий изменить цвет всех рамок на всем сайте на тот, который вы пожелаете (классная штука :).

Вспомогательное меню


Вы можете изменить цвет фона Secondary Nav, цвет текста, цвета ссылок и breaking news label background.

Вы можете контролировать положение Secondary Nav (над header’om или под ним) или скрыть его совсем, также изменить компоненты по своему усмотрению с помощью настройки header’a по пути: Jannah options > Header > Secondary Nav Settings.

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

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

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

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

Header


настройки хедера

1. Rainbow Line Above Header — включить / отключить радужную линию над заголовком.

настройки хедера

2. Background Color — цвет фона хедера.

настройка хедера для

3. Background Image — параметры фоновой картинки хедера.

картинка хедера

4. Disable Header Shadows — включить / отключить тени ниже заголовка.

тени для хедера

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


Вы можете управлять позицией Main Nav (над хедером или под ним), можете скрыть его или изменить компоненты по своему усмотрению в настройках Jannah options > Header > Main Nav Settings.

настройка главного меню

  • 1. Background Color — цвет фона главного меню.
  • 2. Text Color — цвета текста в главном меню, в метаданных постов и в мега меню.
  • 3. Links Color — цвета всех ссылок.
  • 4. Links Color on mouse over — цвет ссылок при наведении мыши.
  • 5. Main Nav Border Top Color — Вы можете нарисовать границу над главным меню и контролировать ее цвет отсюда.
  • 6. Main Nav Border Top Width — целое число без дробей, например 1, 2, 3.
  • 7. Main Nav Border Bottom Color — цвет нижней границы меню.
  • 8. Main Nav Border Bottom Width — целое число без дробей, например 1, 2, 3.

настройки главного меню

Стиль основного контента


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

1. Background Color — цвет фона главного контента.

цвет фона главного сонтента

2. Background image — вы можете установить фоновое изображение вместо предыдущего серого цвета.

3. In Post Links-Colorцвет всех ссылок в области содержимого статьи.

4. In Post Links-Color on mouse over — цвет всех ссылок в области содержимого статьи при наведении мыши.

Футер и область копирайта


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

Также вы можете установить цвет фона и изображение для копирайта, изменить цвет текста и ссылок.

настройка стиля футера

настройка стиля копирайта

На картинке ниже показаны параметры настройки стиля футера и области авторского права.

футер и его стиль

Меню для мобильных и смартфонов


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

Вариант 1.

мобильное меню

Вариант 2.

меню мобильное

Настройки мобильного меню


настройки мобильного меню

1. Mobile Header Background Color — Установите цвет фона для заголовка мобильного меню.

2. Mobile Header Background Image — Установите картинку фона для мобильного меню.

3. Mobile Menu Icon — контролирует цвет иконки мобильного меню.

иконка мобильного меню

 

 

 

 

4. Links Color — контролирует цвет ссылок меню.

5. Social Icons Color — контролирует цвет иконок меню.

6. Search Button color — контролирует  цвет кнопки «Поиск».

7. Mobile Menu Background — выберите фон между сплошным цветом, градиентом или картинкой.

8. Background Gradient Color 1 — первый цвет градиента.

9. Background Gradient Color 2 — второй цвет градиента.

Пользовательский CSS


Для дополнительной настройки, тема Jannah предлагает место, где можно добавить свой стиль.

пользовательский css

  • 1. Custom CSS — код, встроенный в эту область, будет работать на всех экранах, за исключением того, что вы указываете во фрагменте кода внутри медиазапроса.
  • 2. Tablets — работает только на планшетах разрешением 768px на 1024px.
  • 3. Phones — работает только на мобилах от 0 до 768.

Как настроить шрифты используемые на сайте WordPress

Общий рейтинг поста

Общий дизайн
Качество контента
Картинки
Дружелюбность

Итоговая оценка

Поставьте и Вы свою оценку ниже 🙂

Как добавить иконку на сайт WordPress в главное меню?
User Rating: 5 ( 1 votes)
Тэги
Показать больше

Похожие статьи

Добавить комментарий

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

Close
Close