Как добавить пользовательские классы CSS в WordPress (3 простых способа)

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

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

Что такое классы CSS и как они помогают?

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

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

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

Способы добавления классов CSS в WordPress

Вы можете добавить классы CSS на веб -сайт WordPress несколькими способами, в зависимости от вашего мастерства в использовании CSS. Я покажу вам, как это сделать, используя WordPress Customizer и плагин, такой как простой пользовательский CSS, но оба эти метода требуют от вас писать CSS.

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

1. Использование настройки WordPress

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

Добавление CSS в каждую кнопку займет вам значительное время, так как вам придется повторить процесс восемь раз. Но с классами CSS вы можете просто назначить один и тот же класс CSS на каждую кнопку и написать CSS только один раз. Давайте назваем наш класс CSS ' Custom-A' . В окне редактора страницы WordPress нажмите на любую кнопку> Настройки (Значок передачи)> Переверните расширенную опцию. Теперь напишите имя класса в дополнительных классах CSS.

Повторите процесс для каждой кнопки и сохраните. Чтобы добавить код стиля в эти кнопки, вам придется перейти к WordPress Customizer> Дополнительный CSS.

Чтобы сделать пограничный навитый синий и фоновое небо синее, вы вставьте здесь свои CSS.

Обратите внимание, что имя класса CSS, которое мы выбрали, приходит до правил стиля в коде. Это гарантирует, что код применяется к каждому элементу, на котором присваивается имя этого класса.

После того, как вы нажимаете на публикацию и предварительно просмотреть свою страницу, кнопки стили будут выглядеть так:

Это просто - если вы знаете CSS.

WordPress Customizer также отлично подходит для небольших изменений. Тем не менее, проблема в том, что CSS добавил, что там привязана к теме, что означает, что она может быть потеряна, если вы переключите темы. Так что, если вам нравится тестировать разные темы на вашем веб -сайте, вам придется обновлять код каждый раз, когда вы переключаетесь на другую тему, что не весело. В этом случае установка плагина для обеспечения безопасности ваших стилей класса CSS является гораздо лучшим вариантом.

2. Использование плагина, такого как простой пользовательский CSS

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

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

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

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

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

3. Использование строителя веб-сайтов без кода, такого как Divi

Красота использования современного строителя веб-сайтов без кодов, такого как Divi, заключается в том, что вам не нужно писать CSS (или любой код вообще), чтобы применить последовательные стили на вашем сайте. С помощью визуального интерфейса вы можете назначить стили разделам, строкам, столбцам и модулям, просто выбирая и настраивая настройки дизайна.

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

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

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

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

Скачать Divi 5

Посмотрим, что я имею в виду более подробно ниже

Профилаемые Divi's Option Group облегчают добавление классов CSS

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

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

Это более быстрый, более простой и более интуитивно понятный способ поддержания последовательного дизайна вашего сайта. Вот как:

• Повторные стили между элементами: вам не нужно настраивать каждый элемент вручную. Сохраните стили групп опций в качестве пресетов и примените их к любому элементу.
• Глобальные обновления с одним редактированием: изменить предварительную установку один раз, и все элементы, использующие эту предустановку, автоматически обновляются. Это делает корректировки дизайна быстрыми и эффективными на всем вашем веб -сайте.
• Комбинируйте несколько пресетов: слой и смешивайте различные пресеты (например, границы, тени, стили текста) на любом элементе для гибкой и творческой комбинации дизайна, не запускаясь с нуля.
• Настройте предустановки по умолчанию для базовых стилей: Сохраните пресеты в качестве по умолчанию, чтобы автоматически применить их ко всем соответствующим элементам.

Узнайте больше о пресетах группы опционов

Как использовать Divi для добавления классов CSS в WordPress без кодирования

Теперь, когда вы знаете, что такое пресеты Divi's Option Group и что вам не нужно знать кодирование, чтобы работать с ними, я хотел показать вам, как именно это работает в Divi Builder. Что вам нужно сделать, чтобы создать, сохранить и применять групповые предустановки к любым параметрам опции, такими как фон, граница, ящики и т. Д. Для нашего примера давайте настроим страницу ценообразования.

Изменение фона кнопки

Предположим, я хочу изменить фон кнопки на фиолетовый, чтобы соответствовать цвету страницы. Итак, я настраиваю кнопку первого столбца и сохраняю настройки в качестве предварительной установки кнопки «Первичная кнопка света» . (Черный цвет в настройках пользовательского интерфейса показывает, что вы редактируете предварительную установку настройки. Если вы выбрали темный режим, он будет противоположным.)

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

Изменение тени колонны

Давайте добавим тень коробки ко всем столбцам. Я добавлю тень коробки в первый столбец и сохраняю ее в качестве предустановки Shadow Box Shadow.

Чтобы применить ту же тень на двух других столбцах, я просто зайду коробку Shadow Preset на Shadow .

Изменение текстовых пресетов

Вы также можете изменить стили для текстовых элементов, таких как H1 и H2S. Вот как работает обновление столбцов H3 Preset:

После сохранения, вот как будет выглядеть страница цены:

Хотя я внес небольшие изменения, чтобы показать вам, как это работает, вы можете представить себе возможности. Благодаря пресетам Divi Option Group, редактирование пользовательских стилей групп так же просто, как нажатие кнопки. Но это только верхушка айсберга. Вы также можете:

• Установите предустановки по умолчанию для групп опций, чтобы автоматически на этом сайте базовые элементы, такие как заголовки или кнопки. Как только вы поймете, как работают пресеты по умолчанию, вы никогда не вернетесь к использованию старых методов.
• ПРЕДУПРЕЖДЕНИЯ ОБСЛУЖИВАНИЯ ПРЕДУПРЕЖДЕНИЯ В ПРЕДУПРЕЖДЕНИЕХ ПРЕДУПРЕТЫ, чтобы добавить дополнительное внимание - например, применение общего фона, а затем укладывая тень или стиль границы, чтобы выделить определенные элементы.

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

Узнайте больше о пресетах группы опционов

Divi-это изменение игры для системы дизайна на основе классов

Профилаки Divi's Option Group представляют мощность классов CSS для всех. Независимо от того, проектируете ли вы соло или сотрудничаете с командой, пресеты ускоряют ваш рабочий процесс, прекрасно масштабируются по мере роста вашего сайта и делают постоянный стиль. Они быстрее, более эффективны и гораздо более интуитивно понятны, чем традиционные рабочие процессы CSS.

Начните с Divi 5 сегодня

Divi 5 находится в режиме полного обновления. Мы запускаем новые функции каждую неделю, как и Presets Option Group, рекомендуется знать о передовых единицах, переменных дизайна CSS и многих других, которые изменяют то, как вы подходите к разработке любого веб -сайта.

Узнайте больше о Divi 5

Divi 5 - это мощная структура дизайна с такими мощными инструментами, как Divi Dash, Divi Quick Sites и Divi AI, созданная, чтобы помочь вам создать пользовательские, профессиональные веб -сайты, не касаясь одной строки кода. Вас ничего не ограничивает, готовый пройти тестовую драйв в будущее дизайна веб -сайта?

Скачать Divi 5