Monochrome Pro theme by StudioPress now has an automatic setup option. (I have more Monochrome Pro tutorials.)
First watch the Monochrome Pro theme setup video. This gives you a good idea of how the automatic setup works.
Monochrome Pro theme homepage settings
Monochrome Pro theme now uses an automatic homepage setup system. You can choose not to setup the homepage automatically if you wish.
You’ll need WordPress 5 and the block editor (Gutenberg) enabled if you want to use this new auto install feature.
After using the Monochrome Pro theme auto install you just change the text and images
When you activate Monochrome Pro, you are given the choice to auto install the homepage and some content. If you do use the auto install the homepage is automatically set up for you.
You need to…
- Click the Edit Page tab in the bar at the top of the screen
- Highlight each section of text, then type to replace the demo text with your own text
- Replace the logo images by selecting each image and clicking the pencil (edit) icon
- Choose a category of blog posts to display in the post listing section (see the video)
Do not click the width buttons!
Container blocks are temperamental. If you change the width settings, you might not be able to change them back to their original settings. So I recommend that you do not click the width buttons of columns blocks inside containers.
How does this new layout system work in Monochrome Pro theme?
In the past, to setup the homepage of a StudioPress theme you placed widgets into widget areas.
With Monochrome Pro theme you place (nest) blocks inside container blocks.
The container block is one of the blocks available after you install Atomic Blocks plugin. Atomic Blocks is automatically installed when you use the auto install feature in Monochrome Pro theme.
Container blocks are like page sections
If you’ve ever used a theme that had page sections, you’ll understand the idea behind the container block.
A container block can be used to isolate each row of the web page.
Container blocks can have white, coloured or photo backgrounds.
You place other blocks, such as heading and paragraph blocks, inside a container block.
Monochrome Pro has a stripy homepage built from container blocks. The container blocks alternate between image or photo backgrounds and plain white backgrounds. Image background, plain white background, image background, plain white background.
The container block has an inner width
- Each container block has several settings…
- Padding top, bottom, left and right
- Margin top and bottom
- Inside Container Max Width (1200px)
- Background image, colour and opacity
- The option to add additional CSS classes to this container block
If you build your own homepage using container blocks, make sure you set an inside container max width. If you do not set a max width, the text in your container block will but right up to the edge of the viewer’s laptop screen. The StudioPress demo site uses an inside container max width of 1200 pixels.
Blocks used in the Monochrome Pro theme homepage auto install
If you use the auto install, all of the settings have been done for you. If you choose to build the homepage yourself, here are some useful tips.
You do not have to use container blocks. If you’re new to WordPress 5 and blocks, you can build a nice looking homepage from less complicated and easier to use blocks instead.
If you’re building the homepage from scratch, not using the auto install method, you will need to already understand how blocks work.
Blocks used on the homepage
- Container block
- Heading block
- Paragraph block
- Separator block
- Columns block
- Image block
- Button block
- Post and Page Grid block
If you haven’t used the block editor before, see these basic tutorials.
CSS Classes used in the auto install homepage
bold-heading-text
bold-text
fade-in-up
brand-logos
light-text
bold-heading-text is applied to the h1 main page heading title. It makes the headline at the top of the page bold and 60 pixels high.
bold-text is applied to h2 headings. It makes the text bold and 48 pixels.
fade-in-up makes the fade up effect. Load the homepage of the demo site and watch the text slowly fade in. The fade-in-up CSS class makes this happen.
brand-logos this class is applied to the logo section. I’m not sure what it does. I think it might resize the logos for retina displays.
light-text this makes headings in the dark containers light coloured.
Screenshots of some containers, blocks and their settings
If you’re using the Monochrome Pro theme auto install these settings are already set for you. I added them here to help people who want to understand how the page is built.
The container block has background options.
Using the container block, you can set a background image, colour and opacity.
Applying additional CSS classes to a container or block
Every block has an Advanced > Additional CSS Class option. The narrow-content CSS class makes the main page headline wrap into a small space. The light-text CSS class makes the headline light coloured, use this class with text displayed over a dark background image.
Inside Max Width setting
Any content placed inside a container block will but up against the edge of the browser window. To avoid this you set an inside container max width. We used 1200px here.
The fancy fade in effect on the home page of Monochrome Pro theme
There are two Additional CSS classes applied to this heading. bold-text makes the headline extra bold. fade-in-up makes the headline fade in as the page loads.
Beware the width setting in columns inside containers
WordPress 5 and the block editor (Gutenberg) are still new. Some things still behave unpredictably. If I change the width setting of a columns block inside a container block, I can’t change back to the original setting. I think this is a bug that will eventually be fixed. But for the time being, I don’t click the width buttons of a columns block that is nested inside a container block.
The Atomic Blocks Post and Page Grid settings
The Monochrome Pro theme demo page uses an AB Post and Page Grid block to display blog posts on the homepage. Click each down arrow to browse through all of the settings. You can show or hide the post title, excerpt, post author, post date and the read more link. There are many more settings. Make sure you read through them all and experiment to see what they do.
This new auto install feature is a big step forward, especially for people who are new to WordPress. It really does save you a lot of time and head scratching 🙂