Изменение цветов и шрифтов сайта с помощью глобальных настроек
Настройки, которые вы делаете здесь, отразятся на всем вашем веб-сайте. Доступные параметры: типографика (ваши шрифты), цвета, контейнер и кнопки. Эти настройки будут автоматически использоваться (по умолчанию) для всего содержимого вашего веб-сайта, за исключением тех элементов, в которые вы вносите отдельные изменения.
Типография
Возможно, иногда вы даже не заметите, но использование отличных шрифтов на веб-сайте действительно имеет огромное значение. Здесь вы можете решить, какие шрифты вы хотели бы использовать для различных элементов, размеров шрифта, веса и т. д.
Базовая типографика
Давайте начнем с выбора шрифта Family для вашего сайта. Это должно быть доминирующее семейство для вашего веб-сайта (хотя вы можете использовать на своем веб-сайте более одного семейства).
Если у вас еще нет предопределенного шрифта, потратьте некоторое время на просмотр шрифтов и выбор правильного. Вы можете сделать это, щелкнув раскрывающееся меню «Семейство» и прокрутив список шрифтов вниз или введя имя в поле поиска.
Выбор широк, так как помимо системных шрифтов вы можете выбрать любой из Google Fonts , крупнейшего каталога бесплатных веб-шрифтов с открытым исходным кодом. Список можно еще расширить с помощью наших плагинов:
- Пользовательские шрифты Adobe (Typekit) для встраивания шрифтов Adobe ;
- Пользовательские шрифты позволят вам использовать любые пользовательские шрифты , которые вам нужны — просто загрузите файл шрифта, и он будет добавлен в список шрифтов.
Теперь, когда вы выбрали семейство шрифтов, давайте перейдем к конкретике. Выбор всех вариантов сэкономит вам время и клики — если вы выберете, например, вариант «700 Курсив», каждый раз, когда вы помечаете свой текст курсивом, он автоматически получит вес 700.
Затем установите размер текста по умолчанию (в пикселях), вес и, если вам это нужно, преобразование текста (например, использование заглавных букв для каждого слова на вашем веб-сайте).
Последние два параметра будут влиять на то, сколько места займет ваш текст. Высота строки задает высоту каждой строки текста, а нижнее поле абзаца определяет пространство, добавляемое внизу каждого абзаца. Вы можете установить эти значения, введя значение размера или перемещая ползунок влево и вправо.
Заголовки
Заголовки помогают посетителям вашего сайта понять важность различных разделов страницы или публикации. WordPress использует заголовки от H1 до H6.
Самый важный заголовок на каждой странице или публикации — H1, и он должен предоставлять поисковым системам информацию о содержании этой страницы или публикации (о чем она вообще). Таким образом, в каждой публикации или странице должно быть только одно из них.
При необходимости можно использовать другие заголовки. Чем выше номер заголовка, тем менее он важен (поэтому H6, если он используется, обозначает наименее важный контент).
Здесь вы можете установить почти все параметры, как в базовой типографике, для каждого заголовка отдельно, придав им особый и акцентированный вид.
Цвета
Не то чтобы у вас уже был готов набор типографики, пришло время придать ей немного цвета. Здесь вы можете установить цветовую схему, чтобы сделать ее привлекательной и создать настроение. При правильном использовании цвета многое говорят пользователям о типе веб-сайта, который они просматривают, и о самом бренде.
Мы объясним, что делает каждый цветотип:
Цвет текста — цвет основного текста (весь ваш обычный текст) и описаний на веб-сайте;
Цвет темы — цвет всех элементов темы, таких как кнопки, цвет фона выбранного текста и т. д.;
Цвет ссылки – цвет всего текста, к которому добавлена ссылка;
Цвет при наведении ссылки — цвет всего текста, к которому добавлена ссылка при наведении указателя (цвет при наведении).
Чтобы изменить любой цвет, нажмите на цветной кружок рядом с названием цветового типа. Вы сможете визуально выбрать свой цвет, нажав на палитру цветов и установив непрозрачность (прозрачность), если вам это нужно. Альтернативно вы можете добавить значение цвета в форматах HEX, HSL или RGB.
Чтобы удалить изменения и вернуть цвет к цвету по умолчанию, нажмите кнопку «Очистить» или щелкните значок «Вернуться к умолчанию».
Здесь у вас также есть возможность установить фон для всего сайта:
Фон — у вас есть три варианта выбора: цвет, градиент или изображение. Какой бы вариант вы ни выбрали, он будет применен в качестве фона к телу всего сайта.
Вы также можете одновременно установить и цвет, и изображение — в этом случае обязательно отрегулируйте непрозрачность цвета (менее 100%), чтобы изображение было видимым, поскольку цвет будет использоваться в качестве наложения.
Контейнер
Теперь пришло время настроить содержимое вашего сайта. Контейнер — это область, в которой весь ваш контент отображается на каждой странице или в публикации.
Область контента и боковая панель являются частями контейнера. Область контента технически называется основным контейнером, тогда как боковая панель — вторичным контейнером.
Ширина контента
Это значение установит максимальную ширину вашего контейнера. Это определит, сколько места будет занимать ваш контент и боковые панели (если вы их установите) на страницах и сообщениях.
Макет
Установив макет контейнера, вы сможете выбрать, как ваш контент, боковая панель и виджеты, верхний и нижний колонтитулы и фон будут объединяться на вашем веб-сайте. У вас есть 4 типа макетов контейнеров:
- В штучной упаковке — в этом макете будут отображаться отдельные контейнеры, а виджеты появятся в полях. Это оставляет пространство вокруг каждого блока со всех сторон — таким образом, вы сможете видеть фон сайта.
- Content Boxed — при этом только ваш контент отображается в коробочном формате, а боковая панель и виджеты отображаются на простом фоне.
- Полная ширина/Содержание : ваш контент и боковая панель будут помещены в один контейнер. Этот контейнер будет отображаться по ширине контейнера, оставляя пространство слева и справа.
- Полная ширина/Растянутый — при использовании этого макета ваш контент и боковая панель будут отображаться в одном контейнере, растянутом от края до края экрана.
Тема Izumrud позволяет вам установить различный макет сайта в зависимости от ваших потребностей:
Макет — выбранный здесь макет будет макетом по умолчанию для всего веб-сайта. Для остальных вариантов макета этот макет будет выбран автоматически. При необходимости вы можете изменить макет для следующих типов сообщений:
Макет страницы – для страниц
Макет публикации в блоге — для архива блога и страниц с отдельными публикациями в блоге.
Расположение архивов – все архивы
Кроме того, в зависимости от других плагинов, которые вы можете использовать на своем веб-сайте, вы найдете варианты настройки макета для их выделенных страниц, например, WooCommerce Layout или LearnDash Layout .
Кнопки
Последняя глобальная опция используется для настройки внешнего вида кнопок веб-сайта по умолчанию. Сделаем краткий обзор доступных опций и для чего они используются:
Цвет текста – установите обычный цвет текста кнопки и цвет при наведении;
Цвет фона – установите обычный цвет и цвет при наведении кнопки (фона);
Ширина границы – если вы хотите добавить рамку к кнопкам, просто установите здесь ширину границы;
Цвет границы – установите обычный цвет границы кнопки и цвет при наведении;
Border Radius – добавление радиуса сделает ваши кнопки более округлыми; по мере увеличения значения радиуса ваши кнопки изменят форму с прямоугольника на круг.
Шрифт кнопки — доступные здесь настройки оформления будут применяться только к тексту кнопки.
Отступы – это добавит внутреннее отступы к вашей кнопке; Чем больше отступы, тем больше будет ваша кнопка.
Заключительные замечания по глобальным настройкам:
Опцию со значком «адаптивного редактирования» рядом с ней можно редактировать отдельно для настольного компьютера, планшета и мобильного телефона. Применение изменений в каждом представлении приведет к изменению настроек только для текущего активного представления. С другой стороны, изменение настроек параметров без значка «адаптивного редактирования» приведет к применению одних и тех же изменений ко всем представлениям.
Имейте в виду, что некоторые глобальные параметры не будут применены к вашему контенту, поскольку они могут быть заменены настройками, которые вы задаете в конструкторе страниц. Это будет зависеть от вашего выбора Page Builder для вашего веб-сайта.
Комментарии
Найдите свой шаблон для сайта среди 300+ вариантов
Все шаблонные сайты
Один ответ на “Изменение цветов и шрифтов сайта с помощью глобальных настроек”
Спасибо за просмотр! Оставляйте свои комментарии и вопросы!