Как настроить стиль Вашего сайта с помощью Qubely Row CSS используя CSS код? Узнай это сейчас и сделай легко!
Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Исходя из названия данного материала, Вы наверное подумали… Ах, но я же ведь не знаю CSS код и все такое. Не беспокойтесь! Вам не нужно знать все тонкости, за Вас все сделает специальный плагин Qubely, о нем я уже писал в своей статье вот здесь. Давайте прямо сейчас я Вам все расскажу и объясню. Поехали …
WordPress обслуживает многих пользователей Интернета, от новичков до профессиональных пользователей. И чтобы удовлетворить требования всех и каждого, WordPress предоставляет простой пользовательский интерфейс для своих настроек. А также расширенные параметры конфигурации.
Одним из многих способов, которыми WordPress обслуживает своих промежуточных пользователей, являются расширенные возможности настройки. Особенно с его внешним видом раздела. Оттуда пользователи, знакомые с кодировкой, могут в полной мере настроить свой сайт. Включая свойства CSS.
Краткое введение в CSS код
Полная форма CSS – это каскадная таблица стилей. Он взаимодействует с доступным HTML-кодом вашей существующей страницы веб-сайта и добавляет стиль к дизайну Вашего веб-сайта. Это особенно полезно, если Вы хотите отличить внешний вид Вашего сайта от остального.
Если Вы хотите узнать больше о CSS и различных вариантах конфигурации, которые он предоставляет, Вы можете ознакомиться с ресурсами из введения CSS – W3Schools , MDN Docs из Mozilla и т. д. Вы также можете выбрать любые ресурсы, которые можно найти в Интернете. Это легко сделать самостоятельно.
Как работает WordPress и CSS код
Если Вы уже привыкли к экосистеме WordPress, Вы, возможно, уже знаете, что она предоставляет Вам простой способ начать работу над своим сайтом. Но иногда Вам может понадобиться настроить что-то на Вашем сайте WordPress, поэтому Вам необходимо немного знать CSS.
WordPress предлагает Вам расширенные возможности для настройки ваших элементов WordPress так, как Вам нравится. Вы можете установить свои свойства CSS из опции настройщика в разделе внешнего вида или напрямую настроить файл темы из редактора тем. Хорошей практикой является резервное копирование всего на Вашем сайте, прежде чем приступать к каким-либо изменениям структуры кода на Вашем живом сайте.
Qubely продвигает эту возможность еще дальше. Вот заглянуть.
Зачем устанавливать свои свойства CSS
В мире Интернета все борются за внимание пользователей. И если у Вас есть сайт, Вы один из них. Чтобы отделить себя от остальных соревнований, нужно сделать что-то другое.
И один из самых простых способов сделать это – сделать Ваш сайт WordPress уникальным по сравнению с остальным Интернетом. Конфигурирование свойств CSS Вашего сайта позволяет Вам легко выделить его.
Qubely обеспечивает расширенную настройку CSS
Если Вы хотите пойти дальше с опциями настройки блоков Qubely, то у Вас есть возможность установить свой CSS-код в элемент дизайна существующего блока Qubely.
Вы найдете поле для установки CSS блочной строки, которое будет переопределять существующие свойства CSS.
- Обратите внимание, что установленный здесь CSS будет глобальным. Если Вы не хотите устанавливать его глобально, Qubely предоставит Вам простое решение. Вам просто нужно использовать код «{{QUBELY}}» перед предоставленным Вами CSS, который будет гарантировать, что переменные останутся закрытыми только для этого конкретного блока Qubely.
Чтобы начать добавление CSS-кода Qubely Block Row, перейдите в раздел Advanced любого блока Qubely, поскольку в каждом блоке Qubely есть раздел Advanced. После расширения раздела Вы найдете опцию поля ввода Qubely Block Row CSS, которая позволит Вам изменить / применить свойства CSS для этого конкретного блока.
Всего у Вас будет два варианта конфигурации
- Block Row CSS: примените свой CSS, используя это поле для представления, и измените внешний вид Вашего блока. По умолчанию CSS, который Вы здесь применяете, будет глобальным. Если Вы не хотите, чтобы CSS был установлен глобально, просто добавьте {{QUBELY}} перед вашим кодом. И это будет ограничено только этим блоком.
- Дополнительный класс CSS: если Вы хотите добавить дополнительные классы CSS в свой Block Row CSS, Вы можете добавить их отсюда. Вам нужно разделить классы пробелами, чтобы компилятор мог легко их прочитать.
Сценарий использования
Очень сложно что-то понять без правильного сценария использования. Вот почему мы даем Вам пример из реальной жизни – чтобы помочь Вам лучше понять, как Вы можете использовать CSS с дополнительной блок-строкой.
Учитывая, что Вы используете макет Starter Pack от Qubely.
Примечание: Этот макет начального пакета доступен в Pro-версии Qubely. Вы можете узнать больше здесь. Также Вы можете использовать бесплатную версию плагина Qubely, которая доступна в репозитории WordPress.
После добавления макета к Вашему сообщению / странице Вы обнаружите, что все разделы макета Qubely Starter Pack построены с использованием блоков Qubely. И все блоки Qubely имеют расширенный раздел, который позволяет Вам устанавливать CSS Qubely Block Row и добавлять дополнительные классы CSS.
Здесь мы установим выравнивание текста блока Заголовок по центру, применяя пользовательский CSS.
.custom-class h2 {
text-align: center;
}
Приведенный выше фрагмент кода изменит выравнивание глобально. Чтобы применить CSS только для этого конкретного блока, Вы можете использовать следующий фрагмент кода.
{{Qubely}} .custom-class h2 {
text-align: center;
}
Как только Вы добавите его в CSS Block Row, он перезапишет существующий CSS, установив выравнивание заголовка по центру.
И если Вы хотите добавить отдельный дополнительный класс CSS, который будет работать с блочной строкой CSS, Вы можете добавить это в разделе «Добавление класса CSS».
Заключение
Qubely Block Row CSS – это функция, которая позволяет Вам делать больше с плагином Qubely Gutenberg Blocks. Это дает пользователям свободу дизайна так, как они этого хотят. Возможности того, что Вы можете сделать с небольшим количеством CSS, безграничны. Вот почему Qubely расширяет возможности этой функции. Теперь Вы знаете немного больше CSS код! Всем удачи и благополучия! До новых встреч!
