Transcript
Introduction
In this lesson, we will learn how to override a synced pattern. As a reminder, a synced pattern is a reusable block that updates across all instances when edited. In this example, I am customizing my synced pattern, and once finished, I can click Save. When I return to the page, we will notice that both places where the synced pattern has been used have been updated. You can now add the ability to customize content in synced patterns while keeping stylistic control, also known as overriding synced patterns.
Enabling overrides
So here’s how they work. You can create a pattern centrally and then use it across multiple pages on your site. You can customize the content of these patterns individually where they have been used, but if you want to update the design, you need to do that on the original pattern. And once you make a central design change, it will update everywhere the pattern has been added. Let’s see this in action. In this example, I created a synced team member pattern. To enable the override feature, I need to select the relevant block. The first block we are going to select is the Heading block, and then we go to Advanced in our sidebar settings to enable overrides. Name it appropriately, in this case, “Team Member Name”, and click Enable. Then, we can move on to the next block, the Image block, enable overrides, and add a descriptive name. Then, we can follow the same process for all the other blocks within the pattern. At this stage, we can only override the Heading, Paragraph, Image, and Buttons blocks.
Customization
Now you will see on the right I have added the pattern on a different page and updated the content, without affecting the original pattern. Now, if I change the background color of the original pattern, the change will automatically apply to every instance of the pattern across my site. By refreshing the page, you will see the design update everywhere the pattern is used. Let’s look at another example by updating the Buttons block and changing the background color to black and the text to white. Once again, after saving, we can refresh the page on the right, and we will see that the design has been updated everywhere the pattern has been added. Something else to mention is that you can also add a new block to your central design, in this case, the Separator block, and once added, it will filter through to every instance where it’s been used.
Conclusion
To conclude, overriding a synced pattern will allow users to make content-specific changes without changing the underlying layout or design of the pattern. This feature can be used to create curated editing experiences, improve workflows, enforce design consistency, and more.