НАСТРОЙКИ
Один блок —
множество вариантов
Меняйте внешний вид WPRemark под стиль своего сайта: от минималистичной подсказки до выразительной заметки с рамкой, тенью и иконкой.
01 / ПРЕСЕТЫ
Начните с готового пресета
Не нужно настраивать каждый параметр с нуля. Выберите подходящий пресет и при необходимости измените его под свой сайт.
Дополнительная информация для читателя.
Важный момент, который не стоит пропускать.
Небольшая подсказка по теме.
Добавили иконку из библиотеки WPRemark и увеличили её размер до 50×50px.
Изменили положение иконки и разместили её сверху по центру блока.
Компактная иконка для важной заметки
Уменьшили иконку до 16×16px и расположили её в правом нижнем углу. Отступ установили в 0px.
02 / ИКОНКА
Настройте иконку
Выберите любую иконку из библиотеки, измените её размер, цвет и расположение или загрузите собственную.
В библиотеке WPRemark доступна 581 иконка. Для каждой можно настроить цвет, ширину и высоту, а также отступ от иконки до текста.
А если вы не нашли подходящую иконку, то всегда можно загрузить собственную.
03 / ФОН
Настройте фон
Выберите цвет или изображение для фона, настройте его положение, размер и способ повторения. Фон можно также полностью отключить.
Выбрали яркий фон цвета #FFD1FD, чтобы сделать блок более заметной.
Добавили изображение на фон, разместили его по центру слева и отключили повторение. Размер изображения оставили автоматическим.
Добавили фоновое изображение с повторением по горизонтали. Разместили его по центру сверху, а размер установили Cover, чтобы фон полностью заполнил блок.
Добавили рамку только с левой стороны блока толщиной 8px. Использовали сплошную линию.
Добавили рамку сверху и слева толщиной 4px. Для оформления выбрали двойную линию.
Включили рамку со всех четырёх сторон толщиной 1px и выбрали стиль пунктир, чтобы получить полную обводку блока.
04 / РАМКА
Настройте рамку блока
Выберите стороны, на которых будет отображаться рамка, её толщину и стиль. Можно выделить только одну сторону, создать композицию или добавить обводку по всему периметру.
05 / ТЕНЬ
Добавьте объём с помощью тени
Включайте или отключайте тень и отдельно настраивайте её положение, размытие, растяжение, непрозрачность и цвет.
Добавили мягкую тень со смещением 4px по X и 6px по Y, размытием 16px и растяжением 0px. Непрозрачность установили на 0,2, цвет тени — #808080.
Настроили заметную тень цвета #454545 со смещением 8px по X и Y, размытием 12px и растяжением 2px. Непрозрачность установили на 0,3
Использовали цветную тень #8B5CF6 со смещением 0 px по X и 6 px по Y, размытием 16 px, растяжением 0 px и непрозрачностью 25%.
Включили заголовок и добавили текст «Полезный совет». Выравнивание оставили по левому краю, установили размер 18px и высоту строки 1,5. Цвет — #FFFFFF, начертание — жирное.
Добавили заголовок «Важно знать», выровняли его по центру и установили размер 20px с высотой строки 2,5. Текст сделали жирным и в верхнем регистре, цвет — #FFFFFF.
Добавили заголовок «Обратите внимание», выровняли по правому краю и установили размер 16 px с высотой строки 22 px. Текст сделали курсивным и подчеркнутым, цвет — #005A8F.
06 / ЗАГОЛОВОК
Добавьте и оформите заголовок блока
Заголовок можно включить отдельно, задать свой текст, выравнивание, цвет и начертание, а также настроить размер шрифта и высоту строки.
07 / ТЕКСТ
Настройте оформление основного текста
Выберите выравнивание, цвет текста и ссылок, начертание, размер шрифта и высоту строки. Это позволяет отдельно настроить текст блока под стиль сайта.
Текст выровнен по левому краю, размер шрифта — 16 px, высота строки — 1,5. Цвет текста — #333333, ссылки — #006129.
Текст выровнен по центру, размер шрифта — 18 px, высота строки — 1,6. Цвет текста сделали #C64F14, а цвет ссылок — #FF9700.
Текст выровнен по ширине, размер шрифта — 14 px, высота строки — 180%. Использовали курсив и подчеркнутый текст, цвет — #164C9F, цвет ссылок — #0EA9FF
Настроили внутренние отступы блока отдельно для каждой стороны: сверху и снизу — 20, справа и слева — 30.
Установили внутренние отступы: сверху и снизу — 10, справа и слева — 70. Внешние отступы: сверху и снизу — 40, слева и справа — 0. Благодаря этому блок получил больше свободного пространства вокруг себя.
Внешние и внутренние отступы оставили стандартные. Добавили скругление углов 24, чтобы сделать блок более мягким и визуально отделить его от основного контента.
Для блока выбрали тег blockquote вместо стандартного div, чтобы использовать его для оформления цитаты.
08 / РАСШИРЕННЫЕ НАСТРОЙКИ
Настройте размеры и структуру блока
Изменяйте внутренние и внешние отступы, настраивайте скругление углов и выбирайте HTML-тег для блока.
Для более глубокой кастомизации WPRemark позволяет указать собственные CSS-классы и стили. Например, можно добавить свойствоcolor: red; и изменить цвет текста блока без изменения кода темы.
НАСТРОЙТЕ ПОД СЕБЯ
Создайте свой вариант WPRemark
Начните с готового пресета или настройте каждый параметр самостоятельно. Меняйте цвета, иконки, рамки, тени, отступы и текст — и создавайте блоки, которые идеально впишутся в дизайн вашего сайта.