Building Pages with Blocks and Using Inline Styling

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

Pages ‹ McConimore 2.0 — WordPress

  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