Custom CSS/Less

In the YOOtheme Pro page builder, you can add custom CSS to individual sections, rows, columns and elements. Each one has its own CSS field with dedicated selectors to style specific parts of the element. YOOtheme Pro automatically scopes your CSS, so your styles stay local and do not affect the rest of the site. Since custom CSS is part of the layout, your styling is preserved when layouts are saved, imported or exported.

For broader customizations, add custom CSS globally in the Settings panel. Advanced users can also use Less to customize the YOOtheme Pro style with variables, nesting and mixins, and hook their own CSS rules directly into existing UI components.

The CSS code fields provide syntax highlighting, line numbers and helpful code completion, making custom CSS easier to write and maintain directly in YOOtheme Pro.

For larger CSS customizations, use a child theme or create your own YOOtheme Pro extension with the starter plugin to keep your code organized and reuse it across different projects.