Category: cover block

If you want to build a a cover block like the one in this link, then keep reading.

Step 1: Pick the Right Theme

The performance of a WordPress cover block tends to be theme dependent. You want to pick a theme that sets your cover block to an appropriate size based on the screen size that it is being featured on. And you want to pick a theme that can set the text of your block to the far left, to the far right, or to the center. You can spend a lot of time searching for a theme that does this. Or you can just use the Big Media theme.

Step 2: Add Your New Theme

You can add the Big Media theme from your admin dashboard. Go to Appearance > Themes, then click the “Add New” button, then type “Big Media” into the search bar. Next, go to Appearance > Customize. Click the “Change” button in the “Previewing theme” box. Find the “Big Media” theme and click the “Live Preview” button. Feel free to make any changes you want, then click the “Activate & Publish” button.

Step 3: Set Your Image

Next, push the x button to leave the customizer. If you’re using the Big Media theme, you can improve your site’s loading speed by setting the image width of your cover block to 1800. Some other themes will require you to set your cover block to the widest possible screen which can be unpredictable and can cause performance problems. You can reduce the image width in the media section of the admin dashboard.

Step 4: Set Your Cover Block

From the admin dashboard, open the page that you want to add your cover block to. Open a cover block. After you add your image you’ll want to:

1. Set your text out of the way of the most important part of the image. You can do this by selecting the text, then changing the alignment. The alignment dropdown is the middle button with the three horizontal lines above the text block when it is selected. You can use the preview button to see exactly how this will look.
2. You will probably also want to select the text, then look into the block sidebar and change the text color to white.
3. Test your cover block using several different screen sizes. You can do this by opening the page preview then hitting the F12 key. Or if you have a Mac, then you can click on the settings icon of your browser, then look for developer tools (it might be under a menu item labelled “more tools”).
4. Once the new window is open look for a devices icon. It’ll probably look like a pair of monitors and/or a tablet. Click on it. Now you can test different devices and custom screen sizes.
5. As you test your different screen sizes, you should be on the lookout for when the picture doesn’t fit right. You’ll be able to adjust for this back in the block editor when the block is selected in the block sidebar by adjusting the focal point picker.

Step 5: Add a Typing Feature (Optional)

You now have everything you need for a fully functional cover block. But if you want to make something extra special, then you can add a typing feature by reading my typing feature tutorial.