Building Pages with Blocks and Using Inline Styling

LKF Marketing

Created Dec 27, 2024

Building Pages with Blocks and Using Inline Styling

Whenever possible, control styling from the Styles panel in the Editor.

14
    m

Pages ‹ McConimore 2.0 — WordPress

20 Steps
1

1. Click on Add New Page

Click on Add New Page
2

2. Type Page Name

Type Page Name
3

3. Click on Document Overview

Click on Document Overview
4

4. Click on Toggle block inserter

Click on Toggle block inserter
5

5. To build a fullwidth block with either a solid or an image background, Click on Cover

To build a fullwidth block with either a solid or an image background, Click on Cover
6

6. Click on Upload to add an image to use as the fullwidth block background image. You can also simply select a background color for this block if you don't want to use an image.

Click on Upload to add an image to use as the fullwidth block background image. You can also simply select a background color for this block if you don't want to use an image.
7

7. To create a floating text block, Click on Columns

To create a floating text block, Click on Columns
8

8. Change the column number setting and change the number to the desired amount of columns

Change the column number setting and change the number to the desired amount of columns
9

9. Click on Block: Column (2 of 2)

Click on Block: Column (2 of 2)
10

10. Click on Add block

Click on Add block
11

11. Click on Heading

Click on Heading
12

12. Add content, defining the Headings, Paragraphs, Buttons, and change the background color of the column

Add content, defining the Headings, Paragraphs, Buttons, and change the background color of the column
13

13. To modify the styling of elements within a block, you can highlight that element and click on the Styles icon (black/white circle) and make your changes

To modify the styling of elements within a block, you can highlight that element and click on the Styles icon (black/white circle) and make your changes
14

14. To modify the styling of elements within a block, you can highlight that element and click on the style icon (black/white circle) and make your changes.

Important note: If you change margins or padding of a block, be sure to make those modifications to the uppermost level of the block (example: Group :: Column :: Left Column :: Right Column :: Heading :: Heading :: Paragraph :: Button :: First Button

To modify the styling of elements within a block, you can highlight that element and click on the style icon (black/white circle) and make your changes.
15

15. Make dimension changes at the top most level of the group of elements, in this case the Right Column

Make dimension changes at the top most level of the group of elements, in this case the Right Column
16

16. Type "2"

Type "2"
17

17. Click on Save

Click on Save
18

18. Click on Group

Click on Group
19

19. Click on Save

Click on Save
20

20. To see how the pages renders, click on View Page

To see how the pages renders, click on View Page
Well done!
Create how-to guides like this in a snap. Get Tango now.