How to use design components, reusable templates, synced patterns

Later or earlier, you will find that you need reusable items on pages. It can be a good-styled CTA box, product card, or Info box. In WordPress, you can use Reusable Templates the (new name is Synced Patterns). Practically, you can call them design components. It’s the same thing but with different names. Greenshift has many improvements on top of core reusable template features. Let me show some of them

First of all, you need to know if you want to use Local component (it’s when you plan to use them ONLY on one local page and you don’t need them on any other places) or Global (when you plan to reuse them on different pages of site)

Local Style Components

So, for Local components, usage is quite simple. And we made video for this

Find more about Local Style Components

Global Components

For Global Components, you need to use a more advanced route. First of all, create the synced pattern, you can do this from two places:

First – When you build your content, click on three dot icons in the toolbar and create to a pattern from the current block

    Screenshot

    Second – visit the Reusable Templates section and add a new Pattern.

    In both cases, you must enable the “Synced” option if you plan to synchronize all instances on-site with the main general instance. This means that you can put this block anywhere on site, but later, you may edit your pattern and it will be updated on all places where you used it.

    Pattern Override or partially synced pattern

    Each pattern can have a dynamic part that you can change in each instance. For this, WordPress has a special feature, “Override”. Currently, it’s available in the following core blocks: Heading, paragraph, Image, and Button. These blocks are not Greenshift blocks, it’s core blocks, so they have limited design options. However, you can still use Greenshift options to design them; for this, click on the block icon and enable Conversion to Element. When you do this, the block will be wrapped with a Greenshift block from which you can control styling.

    Find more about Pattern Override

    Override Style for Instance of synced pattern

    There are many scenarios when you want to use a synced pattern but want to override some styles in it. Maybe color of text or button to match better current page. But you can’t do this directly in a pattern because the style will be changed on all pages.

    In Greenshift, we have a special feature – Style Controller for Instance. To use it, edit your pattern and add any classes to blocks that you plan to override for styles. You can add classes in Advanced panel

    Screenshot

    Now, you can enable style controller for instance. See how it works

    Now, you can easily add specific styles to elements of the pattern without touching styles of pattern.

    Please, note, that some items can have high specificity, so, when you edit them in class system, you may need to enable special icon “Specificity” to increase specificity for this class

    Screenshot
    «