Monochrome Pro theme by StudioPress has been updated and now has a blocks based homepage. (I have more Monochrome Pro tutorials.)
The automatic install homepage of Monochrome Pro now uses the Atomic Blocks container block. The StudioPress demo site and the auto-install homepage look like they are built from page sections.
The sections alternate between a section with an image background, then a section with a plain white background, then another section with an image background. There are several blocks inside each container or page section.
Please note! These Additional CSS classes are already in place if you used the auto install
If you’ve used the theme’s auto install option to set up your Monochrome Pro homepage, these CSS Classes will be already added to the blocks in your page. You don’t need to add them yourself.
These extra styles are useful if you’re building your own homepage
If you didn’t use the auto install and want to build your own custom homepage, you’re almost sure to want to use at least some of the styling and effects that these extra CSS classes offer.
What additional CSS classes are available in Monochrome Pro theme?
- bold-heading-text
- bold-text
- light-text
- narrow-content
- fade-in-up
- brand-logos
When you activate the Monochrome Pro theme you get an option to automatically setup the homepage. If you have done that your new homepage will have all of these CSS classes applied in the right places. You don’t need do worry.
Where do you use these CSS classes and what do they do?
Every block in the WordPress block editor has an advanced tab. If you open the advanced tab you see a text box labeled “Additional CSS Class”. You paste the additional CSS classes into that box.
bold-heading-text
Use this CSS class to make h1 headings bold.
- Select the text
- Make sure it’s a H1
- type the CSS class (bold-heading-text) into the box labeled: Additional CSS Class
You can type more than one CSS class into the Additional CSS Class box. In this case a second CSS class is applied, fade-in-up.
bold-text
Use this CSS class to make h2 headings bold.
- Select the text
- Make sure it’s a H2
- type the CSS class (bold-text) into the box labeled: Additional CSS Class
You can type more than one CSS class into the Additional CSS Class box. In this case a second CSS class is applied, fade-in-up.
narrow-content AND light-text
In the StudioPress demo site and the auto-install homepage, the narrow-content CSS class is used in the top container block.
The light-text CSS class is used on all containers that have a dark photo background. The light-text CSS class makes heading and paragraph text, inside that container block, white.
The narrow-content CSS class makes any h1 headings, and any paragraph text inside the container, narrow. But h2, h3, h4 headings are not affected by the narrow-content CSS class.
fade-in-up
This class is applied to…
- Heading blocks
- Paragraph blocks
- Columns blocks
- Separator blocks
Do NOT apply fade-in-up to individual heading or paragraph blocks inside a columns block.
Just apply the class once to the whole columns block.
brand-logos
I haven’t included this CSS class in this tutorial because I don’t know what it does. It’s applied to the columns block that holds the logos.