How to style page with Page Styles Component?

You can globally add styles on a page with our Combo Blocks plugin. We have options to copy styles and paste it anywhere. You can customize the CSS selector, and it is also possible to target different CSS States and add Styles to it.

When you’re building a page with Gutenberg editor, you should see our Post Grid Icon on the top right. Just click on it to get started.

cfYPnrQ

Just click on the “Add” button to add a CSS selector. Then click on the selector to customize it. We have support for regular CSS Class, ID, or Tag.

jQib9Qb

For example, I’m using the “h1” tag as a selector and applying a CSS property called “Background Color.” Since it’s called “page styles,” all the “h1” on this page should get that style.

c8ShkqG

To add another selector, just click on the “Add” button again and customize it with a valid CSS Class, ID, or Tag.

w9j8LHD

And now, to add styles on that selector, click on the “Add Style” button. We have included a maximum number of CSS properties that you can use.

O48XOOU

Also, you can customize CSS states like hover and add styles.

kso3au0

Don’t forget to use our “Copy Styles” features to add the same styles on a different page. First, click on the button to successfully copy the styles.

6hZ1yyc

Then on a different page, you can inherit all the copied styles by clicking the “Paste” button.

v4HUpMb

So, that’s how you can globally add styles on a page. If you still need help, please create a support ticket on our forum.

Related Documentation