Разное

Css конструктор: 9 бесплатных генераторов CSS — Highload.today

28.07.1989

Содержание

Интерактивный инструмент для генерации верстки основанной на CSS Flexbox

Для запуска этого приложения необходимо включить JavaScript.

Рад представить Вам интерактивный инструмент для генерации верстки основанной на гибких макетах сетки (CSS Flexbox Layout), он позволит наглядно произвести верстку необходимого блока для Вашего сайта. Кроме того, вы сможете максимально быстро обучиться этой технологии верстки, используя встроенные подсказки для каждого CSS свойства, или при необходимости перейти в справочник CSS свойств для получения более детальной информации о конкретном свойстве.

Если Вы ранее не сталкивались с моделью построения макетов страниц Flexbox, но хотите более детально познакомиться с ней, то подробную информацию об этом вы сможете получить в следующих статьях учебника, посвященному CSS:

  • Статья ‘Верстка по Flexbox (работа с контейнерами)’
  • Статья ‘Верстка по Flexbox (работа с элементами)’

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

height ? Определяет высоту контейнера

display ? Определяет как должен отображаться элемент:

  • flex — элемент отображается как блочный флекс контейнер.
  • inline-flex — элемент будет отображаться как строчный флекс контейнер.
flexinline-flex

flex-direction ? Позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера:

  • row — флекс элементы отображаются горизонтально, в виде строки.
    Это значение по умолчанию.
  • row-reverse — флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении.
  • column — флекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз.
  • column-reverse — флекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх).
rowrow-reversecolumncolumn-reverse

flex-wrap ? Определяет, будет ли флекс контейнер однострочным, или многострочным:

  • nowrap — Указывает, что флекс элементы выстраиваются в одну строку. Это значение по умолчанию.
  • wrap — Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения).
  • wrap-reverse — Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap, но формирование строк идёт в обратном порядке.
nowrapwrapwrap-reverse

align-content ? Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально):

  • stretch — строки внутри контейнера равномерно растягиваются, заполняя свободное пространство. Это значение по умолчанию.
  • flex-start — строки внутри контейнера располагаются в начале поперечной оси флекс контейнера.
  • flex-end — строки внутри контейнера располагаются в конце поперечной оси флекс контейнера.
  • center — строки внутри контейнера располагаются по его центру.
  • space-between — строки внутри контейнера равномерно распределяются, при этом первая строка позиционируются в начале поперечной оси, а последняя строка позиционируется с конца поперечной оси.
  • space-around — строки внутри контейнера равномерно распределяются, при этом пространство между двумя соседними строками одинаково, а пустое пространство перед первой строкой и после последней строки равно половине от пространства между соседними строками.
  • space-evenly — размещает четный промежуток между каждой строкой, включая верхний и нижний край контейнера.
stretchflex-startflex-endcenterspace-betweenspace-aroundspace-evenly

justify-content ? Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально):

  • flex-start — элементы позиционируются в начале контейнера.
    Это значение по умолчанию.
  • flex-end — элементы позиционируются в конце контейнера.
  • center — элементы позиционируются в центре строки контейнера.
  • space-between — элементы равномерно распределяются по всей строке, при этом первый элемент позиционируются в начале контейнера, а последний элемент позиционируется в конце контейнера.
  • space-around — элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего элемента равно половине между соседними элементами в контейнере.
  • space-evenly — размещает четный промежуток между каждым элементом, включая начальний и дальний конец контейнера.
flex-startflex-endcenterspace-betweenspace-aroundspace-evenly

align-items ? Производит выравнивание всех элементов внутри флекс контейнера вдоль поперечной оси:

  • stretch — флекс элементы растягиваются по размеру контейнера вдоль поперечной оси. Это значение по умолчанию.
  • center — элементы располагаются по центру строки контейнера (середина поперечной оси, или оси столбца).
  • flex-start — элементы располагаются в начале строки контейнера.
  • flex-end — элементы располагаются в конце строки контейнера.
  • baseline — элементы распологаются по их базовой линии.
stretchcenterflex-startflex-endbaseline

Настройки элементов

count?Количество блоков внутри флекс контейнера.

width?Ширина каждого блока внутри флекс контейнера.

height?Высота каждого блока внутри флекс контейнера.

margin?Внешние отступы каждого блока внутри флекс контейнера.

padding?Внутренние отступы каждого блока внутри флекс контейнера.

Настройка элемента

Выберите любой вложенный элемент для настройки…

width ? Ширина текущего блока внутри флекс контейнера.

height ? Высота текущего блока внутри флекс контейнера.

margin ? Устанавливает величину внешнего отступа от каждого края элемента в одном объявлении.

padding ? Устанавливает величину внутреннего отступа от каждого края элемента в одном объявлении.

order ? Устанавливает порядок следования флекс элемента в контейнере относительно остальных.
Если вы указываете значение для одного флекс элемента в контейнере, то это

значение не будет являться его порядковым номером, а указывает только на «вес» его позиции по отношению к другим элементам. Допускается применение отрицательных значений (значение -1, например, смещает элемент к левому краю родительского контейнера). Значение по умолчанию 0.

align-self ? Задает выравнивание отдельных элементов строки внутри флекс контейнера. Свойство переопределяет значение выравнивания, заданного для контейнера свойством align-items конкретному элементу. Возможные значения:

  • auto — элемент наследует значение его родительского контейнера. Если родительский контейнер не имеет значения, то значение, устанавливается, как stretch. Это значение по умолчанию.
  • stretch — элемент растягивается по размеру строки контейнера вдоль поперечной оси.
  • center — элемент располагается по центру строки контейнера (середина поперечной оси).
  • flex-start — элемент располагается в начале строки контейнера (начало поперечной оси).
  • flex-end — элемент располагается в конце строки контейнера (конец поперечной оси).
  • baseline — элемент распологается по его базовой линии строки контейнера.
autostretchcenterflex-startflex-endbaseline

flex-grow ? Указывает на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере.
Например, если в контейнере все блоки имеют значение свойства равное 1, а один блок имеет значение 2, то это означает, что он будет в два раза больше по отношению к ним (относительное значение). Если мы при этом добавим в контейнер еще один блок, то при этом ширина контейнера не изменится, а блок, который имел значение 2 по прежнему останется в два раза больше остальных, при этом ширина всех блоков пропорционально уменьшится. Значение по умолчанию 0.

flex-shrink ? Определяет, как элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства). Если мы устанавливаем значение равное 0, то мы запрещаем сжиматься элементу до размеров меньше чем его базовая ширина. Значение по умолчанию 1.

flex-basis ? Определяет размер для флекс элемента, установленный по умолчанию перед распределением пространства внутри флекс контейнера. Допускается использование как абсолютных значений (px, em, pt и так далее), так и значения в процентах. Значение по умолчанию auto (если элемент не имеет заданного размера, то размер будет высчитываться в зависимости от содержания элемента).

flex ? Является короткой записью для свойств flex-grow, flex-shrink и flex-basis.
Значение по умолчанию 0 1 auto.

HTML code:

CSS code:

Как вносить изменения в код страниц и настраивать CSS в REG.Site

У страниц, которые созданы с помощью услуги REG.Site, закрытый код. Теоретически редактировать этот код можно. Однако если после редактирования вы воспользуетесь стандартным редактором REG.Site, все правки в коде будут сброшены. Поэтому полноценно работать с кодом в REG.Site нельзя. Если вы хотите создать сайт с нуля с помощью кода, рекомендуем вам приобрести обычный хостинг и установить на него пустой WordPress, где код страниц открыт. 

Однако иногда нужно внести некоторые параметры, которые не предусмотрены в интерфейсе REG.Site. Кроме этого, многие сторонние сервисы требуют от владельца сайта разместить в коде сайта скрипты, метатеги и другие строки кода. Для таких нужд в REG.Site есть специальные инструменты. В этой статье мы сделали обзор возможностей работы с кодом и CSS в REG.Site.

Перед тем как мы перейдём к инструкциям, хотим отметить, что некоторые CSS настройки могут не работать или работать некорректно. Это связано с тем, что при создании шаблонов применяется множество стилей. Из-за этого некоторые ваши настройки в конструкторе Divi могут противоречить настройкам, указанным в коде шаблона, что приводит к некорректной работе. Рекомендуем использовать CSS только в крайних случаях и для несложных правок. Функционал REG.Site предлагает множество настроек без ручного внедрения в код. 

Как добавить скрипт или другой код в REG.Site

Чтобы добавить необходимый код на сайт:

  1. Перейдите в админку WordPress.
  2. Перейдите в Divi ― Интеграция:
  3. В этом разделе есть поля <head>, <body> и поля для постов. В каждое из этих полей нужно вводить необходимые строки кода. Чаще всего скрипты и метатеги нужно вводит в область <head>.

    Совет

    Код для внедрения Google Analytics и Яндекс.Метрики лучше добавлять в область <body>.

  4. Нажмите Сохранить изменения.

Готово, код добавится на сайт.

Также скрипты можно добавлять на конкретную страницу сайта через модуль код. Подробнее об этом можно прочитать в статье Модуль «Код» в REG.Site.

Работа с CSS в REG.Site

Кроме вставок HTML-кода, в REG.Site можно работать и с CSS. Однако технология работы немного запутанная. Способ работы с CSS зависит от вашей задачи. Мы разберём несколько кейсов.

Как добавить CSS для конкретного модуля или элемента

Обратите внимание! Возможность добавить CSS-параметры есть у всех модулей, но не у всех элементов модуля. Чем больше элементов входит в модуль (текст, кнопки, картинки, стрелки и др.), тем больше риск, что для него нельзя будет применить CSS-настройку.

Рассмотрим, как настроить CSS модуля и элемента на примере модуля «Слайдер»:

  1. Перейдите в настройки модуля во вкладку Дополнительно ― Пользовательский CSS:

  2. В этом блоке есть несколько полей для ввода параметров CSS. Количество полей зависит от модуля, который вы настраиваете, и элементов, которые в нём размещены. Например, в модуле «Слайдер» есть 10 полей: перед, основной элемент, после, описание слайда, заголовок слайда, кнопка слайда, элементы управления слайда, элементы управления активного слайда, изображение слайда, стрелка слайда.

    Поля «Перед» и «После» отвечают за внешние и внутренние области элемента соответственно.

    Каждому полю автоматически присвоен нужный класс. Чтобы увидеть, какому классу соответствует блок, наведите курсор на поле и кликните на значок со знаком вопроса. Перед вами появится класс CSS. Для индивидуальной настройки CSS эта информация не нужна, но она может понадобиться при массовом изменении параметра для элементов. Об этом мы расскажем ниже:

  3. Введите необходимые настройки в нужные поля.

    Обратите внимание! Так как название класса устанавливается автоматически, записывать его в поле не нужно. Вы просто вписываете свойства. Как показано на скриншоте ниже:

Обратите внимание, функционал добавления CSS очень ограничен. Многие параметры могут не применяться, так как множество настроек уже прописано в коде шаблона.

Как изменить CSS для всей страницы

Также можно вносить общие CSS для одной страницы. Все вписанные параметры будут применяться только на одной странице, а не на всём сайте. Для этого:

  1. Нажмите на три точки и на значок шестерёнки:
  2. Перед вами появится меню настроек страницы. Во вкладке «Дополнительно» можно ввести CSS-параметры так же, как при индивидуальных настройках модуля.

Как настроить CSS сразу для нескольких элементов 

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

Сделать это можно через настройщик темы Divi.

  1. Откройте админку WordPress и перейдите в Divi ― Настройщик темы:
  2. Перед вами появится меню и ваш сайт, где будут отображаться вносимые изменения:
  3. В разделе Дополнительные стили можно увидеть, какие параметры указаны для определённого элемента. Сюда же можно вносить свои изменения.

В настройщике темы Divi можно указать разные параметры для текста, который находится в header, body или footer. Также здесь есть удобная массовая настройка кнопок. Все настройки, которые вы укажете здесь, будут автоматически применяться на добавленный модуль «Кнопка». Таким образом, вам не понадобится настраивать его вручную.

Это поле настроек стилей дублируется в поле, которое находится в разделе Divi ― Настройки темы ― Основное ― Общее. Всё, что добавлено в одно из этих полей, автоматически отображается в другом:

Как создать новый класс и добавить его в модуль

Ещё один вариант быстро применять параметры к модулям и элементам ― создать новый класс в общих настройках CSS и применить его к нужному элементу.

Обратите внимание! Не во всех модулях есть возможность добавить класс.

Для примера у слайдера сделаем внешний отступ и зальём его цветом.  

    1. Сначала перейдите в Divi ― Настройки темы ― Основное ― Общее или в Дополнительные стили в «Настройщике темы». Мы используем первый вариант.
    2. В поле Пользовательский CSS задайте новый класс и укажите его параметры. В примере мы добавили класс .slider_color_indent:
    3. Сохраните изменения.
    4. Теперь перейдите в настройки модуля «Слайдер» во вкладку Дополнительно.
    5. Откройте блок ID и классы CSS
    6. В поле Класс CSS введите название созданного класса без точки в начале. У нас slider_color_indent:
    7. Сохраните изменения.

Готово, теперь к слайду применены параметры указанного класса:

Помогла ли вам статья?

Да

0 раз уже помогла

Генератор flex, flexbox

 Шаблон
  • 1. Контейнер
  • 2. Блоки
  • 3. Результат
  • ?

Вид отображения

Значения для display

flex: Блочный.

inline-flex: Строчный.

display: ?
flexinline-flex

Направление главной оси

Группируется в короткую запись и устанавливается первым значением: «flex-flow: row nowrap».

Значения для flex-direction

row: → Слева направо.

row-reverse: ← Справа налево.

column: ↓ Сверху вниз.

column-reverse: ↑ Снизу вверх.

flex-direction: ?
rowrow-reversecolumncolumn-reverse

Выравнивание по главной оси

Значения для justify-content

flex-start: ← Прижаты к началу.

flex-end: → Прижаты к концу.

center: → ← Прижаты по центру.

space-between: ← → Равномерно распределяются по всей длине. Первый и последний элемент прижаты к своим краям контейнера.

space-around: ← → Равномерно распределены по всей длине. Пустое пространство перед первым и после последнего элемента равно половине пространства между двумя соседними элементами.

justify-content: ?
flex-startflex-endcenterspace-betweenspace-around

Выравнивание по поперечной оси

Значения для align-items

flex-start: ↑ Блоки выровнены в начале поперечной оси контейнера.

flex-end: ↓ Блоки выровнены в конце поперечной оси контейнера.

center: Блоки выровнены по центру (линии поперечной оси) контейнера.

baseline: Блоки выровнены по базовой линии.

stretch: Блоки растянуты на всё пространство контейнера.

align-items: ?
flex-startflex-endcenterbaselinestretch

Многострочная организация блоков

Группируется в короткую запись и устанавливается вторым значением: «flex-flow: row nowrap«.

Значения для flex-wrap

nowrap: В одну линию.

wrap: В несколько строк.

wrap-reverse: В несколько строк, в противоположном направлении указанном в flex-direction.

flex-wrap: ?
nowrapwrapwrap-reverse

Способ выравнивания по вертикали (только многострочный режим)

Значения для align-content

flex-start: ↑ Строки в начале поперечной оси (прижать блоки к верху).

flex-end: ↓ Расположение строк начиная с конца поперечной оси (прижать блоки к низу).

center: Строки по центру контейнера.

space-between: Равномерное распределение строк по всей высоте.

space-around: Равномерное распределение строк по всей высоте с отступом перед первой строкой и после последней, равными половине рсстояния между соседними строками.

stretch: Строки равномерно растянуты.

align-content: ?
flex-startflex-endcenterspace-betweenspace-aroundstretch

Ширина контейнера

width: ?
auto300px600px50%100%

Высота контейнера

height: ?
auto100px300px500px RTL

Общие значения для всех блоков × Очистить

Блоки

—+

Жадность

Отношение размеров у блоков. Блок со значением 2 будет в два раза больше блока со значением 1.

Группируется в короткую запись и устанавливается первым значением: «flex: 0 1 auto».

flex-grow: ?
0123

Сжимаемость

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

Группируется в короткую запись и устанавливается вторым значением: «flex: 0 1 auto».

flex-shrink: ?
0.5123

Базовый размер

Основа блока. Является начальным (базовым) размером элемента. Возможно указывать размер в следующих единицах измерения: px, em, %, mm, pt и т.д..

Группируется в короткую запись и устанавливается третьим значением: «flex: 0 1 auto«.

flex-basis: ?
auto0100px200px

Отступ

Внешний отступ. Значение auto работает как по вертикали так и по горизонтали.

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

Пример: «10px auto«.

margin: ?
auto05px10px20px

Поле

Внутренний отступ.

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

Пример: «10px auto«.

padding: ?
auto05px10px20px

Порядок (вес)

Порядок следования блока. Блоки с меньшим весом располагаются вначале.

order: ?
012510

Выравнивание по поперечной оси

Выравнивание блока текущей строки. Переписывает значение контейнера указанного в align-items.

Значения для align-self

auto: Значение родительского контейнера из align-items.

flex-start: ↑ Блоки выровнены в начале поперечной оси контейнера.

flex-end: ↓ Блоки выровнены в конце поперечной оси контейнера.

center: Блоки выровнены по центру (линии поперечной оси) контейнера.

baseline: Блоки выровнены по базовой линии.

stretch: Блоки растянуты на всё пространство контейнера.

align-self: ?
autoflex-startflex-endcenterbaselinestretch

 Поддержка старых браузеров (префиксы)  Показывать умолчания (переписать стили)

CSS

✂ Копировать

HTML

✂ Копировать

Блок 1

Блок 2

Блок 3

Описание flex генератора

Общие сведения

Основная идея flex генератора сделать удобным процесс разработки flex конструкций: обеспечив наглядность и предоставив широкий набор дополнительных настроек. Данный генератор предоставляется бесплатно и без каких-либо ограничений на сайте cssworld.ru.

Для простоты, здесь и далее, контейнером называется родительский элемент, а блоками называются дочерние элементы flex технологии.

Использование

Каждый параметр имеет возможность выбора предустановленных значений. Значения по умолчанию выделены фоном. Параметры предусматривающие произвольные значения можно изменять самостоятельно.

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

Для удобства, процесс поделен на три последовательные составные части, размещенных в соответствующих вкладках, а также текущий справочный раздел: Контейнер, Блоки, Результат

1. Контейнер

Настройка контейнера flex блоков через установку параметров. Данные настройки имеют отношение исключительно к родительскому элементу flex блоков.

2. Блоки

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

Для установки значений конкретному блоку его необходимо предварительно выделить. Выделение блока возможно по клику на нем. Повторный клик снимает выделение. То же самое делает кнопка «Готово» отображаемая при выделенном элементе, а также переключение на другую вкладку снимает выделение.

У выделенного элемента возможно изменить контент (его текстовое наполнение), а также отдельно для него установить и очистить установленные значения.

3. Результат

Помимо результата, отображающего полный код CSS стилей и HTML, здесь возможно установить ряд настроек совместимости не влияющих на визуализацию.

Поддержка старых браузеров

Поддержка включается во вкладке «Результат» при включенной отметке «Поддержка старых браузеров (префиксы)». Данное действие добавляет предшествующие параметры с префиксами -ms- (только для IE10) и -webkit- (все остальные браузеры).

Блок 1

Блок 2

Блок 3

↑ Выберите блок для задания индивидуальных параметров

Контейнер

✂ Копировать .my-flex-cont { display: flex; height: 100px; }

Блоки

✂ Копировать .my-flex-box { margin: 5px; padding: 5px; flex: 0 1 auto; }

Даты и версии начала поддержки Flex в браузерах

Колонки можно сортировать по дате и названию браузера.

Дата ↓Браузер ↓ВерсияТип поддержки
04.09.2012 IE10-ms- Поддерживает только 2012 синтакс
17.10.2013 IE11Поддерживает с некоторыми багами, см. ниже
29.07.2015 Edge12Полная
24.10.2006 Firefox2-moz- Поддерживает только старую спецификацию и не поддерживает wrapping
14.05.2013 Firefox22-webkit- Не поддерживает: flex-wrap, flex-flow, align-content
18.03.2014 Firefox28Полная
25. 01.2010 Chrome4-webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
26.06.2012 Chrome21-webkit-
18.07.2013 Chrome29Полная
18.03.2008 Safari3.1-webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
22.10.2013 Safari7-webkit-
01.10.2015 Safari9Полная
05.11.2012 Opera12.1Полная
02.07.2013 Opera15-webkit- (Поскольку Opera перешла на движок Blink как у Chrome)
08. 08.2013 Opera17Полная
03.04.2010 iOS Safari3.2-webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
10.03.2014 iOS Safari7-webkit-
16.09.2015 iOS Safari9Полная
16.03.2015 Opera Mini1Полная (С версии 8 на iOS использует iOS Safari движок)
26.10.2009 Android Browser2.1-webkit- Поддерживает только старую спецификацию и не поддерживает wrapping
09.12.2013 Android Browser4.4Полная

Особенности старых браузеров IE

По умолчанию в IE10 параметр flex имеет значение «-ms-flex: 0 0 auto» вместо «flex: 0 1 auto«. Третье значение, flex-basis, в параметре «flex: 0 1 auto» для IE11 обязательно. Некорректно рассчитывается высота при установленных у блоков значений min-height и вертикальное выравнивание для IE10 и IE11.

Рекомендации

Также рекомендуем статью: Понимание flex.

Как добавить пользовательский CSS в Thrive Theme Builder

Существует два способа добавления пользовательского CSS в Thrive Theme Builder, в зависимости от того, где вы хотите его применить.

Вы можете добавить пользовательский CSS на отдельную страницу или публикацию из шаблона Thrive Theme Builder или добавить его ко всей теме.

Добавить пользовательский CSS на страницу/публикацию с помощью шаблона

Чтобы добавить пользовательский CSS на определенную страницу, вы должны сначала получить доступ к примененному к ней шаблону. на панели инструментов Thrive Theme Builder перейдите к Раздел «Шаблоны» на левой боковой панели:

Доступ к редактору Thrive Theme Builder

Затем наведите указатель мыши на шаблон, примененный к странице/сообщению, для которого вы хотите добавить пользовательский CSS, и нажмите «Редактировать» , чтобы получить доступ к редактору Thrive Theme Builder:

После того, как шаблон откроется в редакторе, вам нужно найти класс элемента, для которого вы хотите добавить пользовательский CSS.

Для этого предварительно просмотрите страницу, нажав на значок 9.0009 Кнопка «Предварительный просмотр» в нижней средней части редактора:

Откройте DevTools и найдите класс элемента

В предварительном просмотре выберите элемент, для которого вы хотите добавить пользовательский CSS. В качестве примера я выберу заголовок. Затем щелкните его правой кнопкой мыши, и появится небольшой список параметров. Из этого списка выберите «Проверить» :

Инструменты разработчика откроются на новой вкладке.

В качестве примера я изменю цвет заголовка .

Для этого я сначала изменю цвет на вкладке инструментов разработчика. Чтобы сделать это, убедитесь, что выбран элемент (в данном случае заголовок). На вкладке DevTools вы увидите выделенный раздел.

В правой части вкладки вы можете найти класс и некоторые опции для выбранного элемента:

Во-первых, я изменю цвет заголовка. Для этого я нажму на маленькое поле цвета рядом с кодом «Цвет»:

Откроется цветное всплывающее окно. Чтобы изменить цвет, вы можете либо выбрать его с помощью палитры цветов, либо ввести HEX-код в специальное поле:

После выбора цвета щелкните в любом месте за пределами всплывающего окна выбора цвета.

Доступ к редактору Thrive Architect

Затем вам нужно вернуться в редактор Thrive Theme Builder. Поскольку в этом редакторе нет опции «Пользовательский CSS», вам потребуется получить доступ к редактору Thrive Architect . Для этого нажмите на символ Thrive Architect на правой боковой панели:

Доступ к редактору Thrive Architect. На правой боковой панели этого редактора перейдите к настройкам (значок шестеренки):

В открывшихся параметрах нажмите «Дополнительные параметры» :

Затем откроется список дополнительных параметров. Нажмите «Пользовательский CSS» :

Прочтите эту статью, если хотите узнать больше о том, как добавить пользовательский CSS в запись или страницу Thrive Architect.

Пользовательский макет CSS появится на вашем экране. Теперь вы можете начать печатать. В моем примере при изменении цвета заголовка мне нужно ввести класс, а затем цвет. Для этого я вернусь на вкладку DevTools.

Я скопирую класс и цвет и вставлю их во всплывающее окно пользовательского макета CSS, например:

Затем, чтобы сохранить пользовательский CSS и выйти из этого всплывающего окна, вы можете нажать на зеленую галочку из правого верхнего угла:

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

Вот как вы можете применить пользовательский CSS к странице или публикации из шаблона Thrive Theme Builder.

Если вы хотите, чтобы пользовательский CSS был добавлен ко всей теме, выполните следующие действия:

Доступ к параметрам «Настроить»

В панели администратора WordPress на левой боковой панели наведите курсор на «Внешний вид» :

В открывшемся небольшом меню выберите параметр «Настроить» :

Откроются параметры настройки. В правой части открывшейся страницы вы увидите предварительный просмотр вашего веб-сайта, а на левой боковой панели есть несколько вариантов темы.

Последняя доступная здесь опция называется «Дополнительный CSS». Нажмите на стрелку рядом с ним, чтобы развернуть параметр:

Вставьте пользовательский CSS в специальное поле

Когда раздел «Дополнительный CSS» расширится, вы можете просто вставить свой пользовательский CSS в это поле:

В качестве Например, я вставил тот же CSS, что и в примере выше. Цвет заголовка изменится автоматически:

Примечание: При желании можно использовать «Комментарий» опция пользовательского кода CSS в формате: (/* Пример */) , для записи комментария относительно кода, что может помочь вам, если вы вставляете несколько пользовательских кодов CSS в это поле:

Наконец, не забудьте сохранить свою работу, нажав «Сохранить черновик» или «Опубликовать», в зависимости от действия, которое вы хотите предпринять:

Вот как вы можете добавить настраиваемый CSS для отдельной страницы/сообщения через шаблон или для всей темы.

Если вы хотите узнать больше о различных функциях Thrive Theme Builder , обязательно ознакомьтесь с разделом специальной базы знаний.

Надеюсь, эта статья была для вас полезной. Если да, пожалуйста, оцените его с улыбкой ниже 🙂

Tailwind Builder | Создание шаблонов Tailwind за считанные минуты

Перенаправление на PayPal

Единственный продукт для Tailwind CSS , который включает визуальный редактор, более 15 красивых стилей и более 3300 компонентов пользовательского интерфейса.

Попробуйте демо

1 Выберите компоненты пользовательского интерфейса

Используйте готовые компоненты пользовательского интерфейса из универсальной библиотеки, сгруппированной в 20 наиболее часто используемых категорий.

2 Настройка стилей Tailwind

У нас есть 290 переменных CSS Tailwind в тематически связанных категориях, чтобы вы могли работать эффективно.

3 Скачать исходный код

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

Строитель попутного ветра

Предназначен для занятых разработчиков

Простота использования

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

Библиотека компонентов

Создание шаблонов из библиотеки компонентов CSS Tailwind, сгруппированных по 20 наиболее часто используемым категориям, включая навигацию, заголовки и многое другое. Выберите правильные компоненты и сосредоточьтесь на деталях.

Компиляция Tailwind онлайн

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

Удобные средства выбора

Все типы настроек включают интерфейс для более быстрой реализации значений (выбор цвета, автозаполнение Google Fonts, построитель теней и т. д.).

Редактирование в реальном времени

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

Общий предварительный просмотр

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

Экспортируемые исходники

Tailwind Builder — это инструмент для разработчиков. Наша цель – ускорить вашу работу. Вы можете загрузить исходные файлы, чтобы, например. начните совмещать фронтенд с бэкендом.

Чистый Tailwind CSS

Мы не используем никаких внешних зависимостей, кроме тех, которые используются Tailwind CSS.

Попробуйте демоверсию

3300+ Компоненты пользовательского интерфейса Tailwind *

* Все пользователи Tailwind Builder автоматически получают доступ к Shuffle. Всего это более 6500 компонентов пользовательского интерфейса.

Metis Shuffle для Tailwind

Наша вторая библиотека пользовательского интерфейса для Tailwind уже здесь 😻

Atis Shuffle для Tailwind

Готова первая UI-библиотека с несколькими готовыми стилями!

Премиум-набор №1

Слишком часто у разработчиков нет времени, чтобы идеально реализовать свои проекты.

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

Получите весь набор (Shuffle™) 👇

Разработчик Команда

Самый простой способ создавать красивые шаблоны Tailwind

Годовой платеж (самый популярный!) 99 долларов США
Ежемесячный платеж  24 доллара США

Версия

Team позволяет создавать до пяти учетных записей .

Выбранный план включает годовой пожизненный ежемесячный доступ к Shuffle™.

Годовая подписка лучше всего подходит для тех, кто создает несколько проектов в год.

Пожизненная лицензия лучше всего подходит для тех, кто создает несколько проектов в год.

Ежемесячная подписка лучше всего подходит для тех, кто в настоящее время планирует только один проект.

Купить подписку

Купить подписку

Ваш адрес электронной почты

Придумайте пароль

Выберите способ оплаты

Оплата картой

Оплата через PayPal™

Я согласен с условиями использования и политикой конфиденциальности.

Вы должны согласиться перед отправкой.

Более 40 библиотек пользовательского интерфейса и более 6500 красивых компонентов пользовательского интерфейса.
Работает с Tailwind CSS 3.
Бесплатные обновления с новыми наборами и стилями пользовательского интерфейса.
Сохраняйте неограниченное количество проектов на потом.
Расширение Shuffle для Visual Studio Code со всеми компонентами пользовательского интерфейса.
Доступ к Shuffle™ без дополнительных затрат. Shuffle — это онлайн-редактор для Tailwind CSS, Bootstrap, Bulma и Material-UI.

Что нового?

* Мы ссылаемся на соответствующие сообщения из блога Shuffle.

Мы объединили четыре редактора в Shuffle! Попробуйте новый визуальный редактор!

Расширение Visual Studio Code для компонентов пользовательского интерфейса Shuffle.

ИСПОЛЬЗОВАНИЕ ВНЕШНЕЙ БИБЛИОТЕКИ ИНТЕРФЕЙСОВОГО ИНТЕРФЕЙСА

Интеграция пользовательского интерфейса Tailwind находится в стадии бета-тестирования!

Мы рады сообщить, что выпустили обновление, позволяющее импортировать сразу несколько фрагментов HTML! 😍

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

Чтобы использовать эту функцию, необходимо приобрести соответствующую лицензию на веб-сайте пользовательского интерфейса Tailwind.

Как компоновщик страниц стилизует содержимое

Page Builder применяет стили CSS как к собственным, так и к пользовательским типам контента, создавая наборы правил CSS на основе атрибутов, которые уникальны для каждого типа контента на странице. Page Builder создает и применяет стили к типам контента в четыре этапа:

  • Добавить атрибуты типа содержимого. Компоновщик страниц добавляет атрибут data-pb-style и динамически генерируемое значение к типу контента, чтобы он мог быть однозначно выбран селектором CSS.

  • Создать динамические селекторы CSS. Page Builder создает селектор CSS для типа контента, комбинируя идентификатор страницы html-body и атрибут data-pb-style с уникальным значением типа контента.

  • Создание наборов правил CSS. Page Builder создает набор правил CSS (свойство: значения) для селектора, извлекая значения из редактора форм типа контента.

  • Создать внутренние таблицы стилей. Page Builder создает внутреннюю таблицу стилей для каждой страницы, добавляя