Creating a pattern in McConimore 2.0 on WordPress

LKF Marketing

Created Dec 27, 2024

Creating a pattern in McConimore 2.0 on WordPress

Build a block completely styled and then save it as a pattern. The difference between a synced pattern and an unsynced pattern is that when you edit a synced pattern those changes are made globally to all duplicated patterns used throughout the site.

24
1

1. To make a pattern that you would like to use several times throughout the website, you must first build the pattern using blocks. The steps below will show how this pattern was built.

To make a pattern that you would like to use several times throughout the website, you must first build the pattern using blocks. The steps below will show how this pattern was built.
2

2. Click on Columns

Click on Columns
3

3. Click on Three columns; equal split

Click on Three columns; equal split
4

4. Click on Change block type or style to wrap the column block into a group.

This is important so you can set a content width for the column block within the group layout/styling panes.

Click on Change block type or style to wrap the column block into a group.
5

5. Click on Group

Click on Group
6

6. Click on Group

Click on Group
7

7. Click on Columns

Click on Columns
8

8. Click on Column

Click on Column
9

9. Click on Add block

Click on Add block
10

10. Type "image"

Type "image"
11

11. Click on Image

Click on Image
12

12. Click on Upload

Click on Upload
13

13. Select an image from file upload menu

Select an image from file upload menu
14

14. Click on Toggle block inserter

Click on Toggle block inserter
15

15. Click on Heading

Click on Heading
16

16. Type Benefits

Type Benefits
17

17. Type Block: Paragraph

Type Block: Paragraph
18

18. Type Block: Paragraph

Type Block: Paragraph
19

19. Click on Document Overview

Click on Document Overview
20

20. Click on Spacer

Click on Spacer
21

21. Set spacer height in pixels

Set spacer height in pixels
22

22. Click on Document Overview

Click on Document Overview
23

23. Click on Toggle block inserter

Click on Toggle block inserter
24

24. Type "button"

Type "button"
25

25. Click on Buttons

Click on Buttons
26

26. Type Button text

Type Button text
27

27. Working through the pattern and use inline styling to set the look and feel you want to attain in the pattern

Be sure to consider the global styling of the site if you are making extensive changes across your pattern builds.

Working through the pattern and use inline styling to set the look and feel you want to attain in the pattern
28

28. Click on Align text center

Click on Align text center
29

29. Repeat the pattern in the other two columns

This can be done quickly by copying the elements within the column in the Document Overview (three line icon) and pasting the elements into the empty columns

Repeat the pattern in the other two columns
30

30. Align the elements to the center

Image can be aligned by clicking on the element and selecting "align center."

Align the elements to the center
31

31. Click on Change text alignment

Click on Change text alignment
32

32. Click on Align text center

Click on Align text center
33

33. Click on Column Cards with Buttons

Click on Column Cards with Buttons
34

34. Click on Options

Click on Options
35

35. Click on Create pattern

Click on Create pattern
36

36. Type "Column Cards with Buttons"

Type "Column Cards with Buttons"
37

37. Type "McConimore"

Type "McConimore"
38

38. Click on Add New Pattern…

Click on Add New Pattern…
39

39. Choose to Unsync by sliding the toggle away from Synced.

Duplicated unsynced patterns can be individually editing without changing the rest of the same pattern across the website.

Choose to Unsync by sliding the toggle away from Synced.
40

40. Click on Add

Click on Add
41

41. Click on Toggle block inserter

Click on Toggle block inserter
42

42. Click on Patterns

Click on Patterns
43

43. Click on My patterns

Click on My patterns
44

44. Click on Column Cards with Buttons

Click on Column Cards with Buttons
45

45. Click on Save

Click on Save
    a

Tango

1 Step
46

46. Click on View Page

Click on View Page
Well done!
Create how-to guides like this in a snap. Get Tango now.