Last updated:
If you’ve been doing the steps as you work through this course, you’ve already got one heck of a website well started — maybe even finished!
But maybe you’ve found that the color palette of your theme isn’t quite right. Or maybe you have custom colors for your brand that you want to apply throughout your site.
As you’ve explored different blocks, you likely came across some of the block specific color setting options that are available. This is a perfectly acceptable means of applying style customizations on a per block basis.
However, if you’ve got the Explorer plan or higher, you may find that the Styles feature of the Site Editor can really help to streamline your customizations.
You can get to the Styles section by going to Appearance > Editor > Styles.
The Styles link in the Design panel of the Site Editor may open a panel that displays some pre-set color variations provided by your theme and a pencil icon to get to the full Styles settings, or it may take you directly into the template and open the Styles section as a sidebar on the right.
When you’re already in the editor for a template, you can open the Styles section by clicking the half-moon icon in the top right corner.
Once you have the Styles section open as the sidebar on the right, you can start to explore the many site-wide customization options that are available.
To thoroughly investigate all the available options, we recommend reviewing our Styles support guide.
One of the powerful aspects of the Styles section is the convenience of being able to set both site and block defaults.
You can start by defining your base defaults for your color palette, your typography appearance, and even certain layout features such as the width of your main content area, padding, and block spacing.
From there, you can move on to block specific defaults. Say for example, you’ve set all of the links within your site to be gray, but you want your linked post titles to be black. This is the type of block specific default customizations that you can set up.
Not all blocks offer the ability to customize defaults, but the blocks offering this option is a long list. It’s best to browse or search this list to see if the block you want to set a default for is available.
The important thing to remember when working with Styles is the hierarchy, or order of operations.
The base, global defaults in the main Styles section are your zoomed out, site-wide defaults. These are the settings that will apply if there are no other settings in place to override them.
The block defaults are next in line, and they will override global defaults (such as the example above with link colors).
Then we have the block specific settings. These will override both the global styles and the block defaults.
For example, in the scenario above, we have a global setting to make all links gray. We then have a block default to make linked post titles black. If we were to add a Query Loop block to display posts of a featured category, and for this one Query Loop block we want those linked post titles to be red, we can apply that setting at the block level for this particular instance and it will override both the block default for post titles and the global link default — without affecting any other links or post titles throughout the site.
This is just one example of the level of granular control and convenience that you can achieve by utilizing the Styles, block defaults, and per block settings.
Just remember that if you’ve applied a block-level style and then you change global style settings, the block-level styles will take precedence over the global settings, unless you reset the block-level settings back to their defaults on a per block basis.
When planning out your style customizations it’s best to start with the overarching, site-wide defaults you want in place for the site as a whole. Then move on to any block specific defaults you want to override the site-wide defaults. Then as you’re building out your content, decide if you want to apply a single instance, block-specific customization to override your other defaults.
You can explore and try out global Styles with any WordPress.com hosting plan, but you will need the Explorer plan↗︎ or higher to apply global style customizations and block defaults to your live site. Per block customizations can be applied on any WordPress.com hosting plan, including Free.
As you can see, these features are incredibly powerful and open up so much more control and opportunity for you and your site, simply by using blocks. We encourage you to play, explore, and get creative!
Back to top