Use Case
Imagine you have 100 sections on 100 pages. Each has two H2 headings - totaling up to 200 H2 headings.
Now you want to change the font size of all H2 headings. What would you do?
A: Change 200 headings manually in each section.
B: Change one thing, and every H2 headings will automatically update to match the changes.
This is one of the many use cases of Styling Presets.
Styling Preset is a powerful design tool that helps you maintain consistency in the look and feel of your website. By applying preset styles across multiple pages and elements, you can create a unified brand identity and streamline the design process.
Here are some of the most common use cases and applications of Global Styling.
Brand Identity: By using consistent typography, colors, and other design elements, you create a cohesive visual language that resonates with your target audience and reinforces brand recognition.
Design Efficiency: You can streamline the design process by allowing you to apply preset styles to various elements and pages with just a few clicks. This saves you time and effort when creating new pages or updating existing ones, as you won't need to manually adjust the styling for each individual element.
Ease of Maintenance: If you decide to change a specific style aspect, like the primary color or font, you can easily update the global style settings, and the changes will be applied across your entire site or app. This eliminates the need to edit each element or page individually.
How To Use Styling Presets
Open Styling Presets Settings
In the Weaverse Editor, locate the "Presets" button in the top-right corner.
Click on the "Presets" button to open the Styling Presets settings panel.
Customize Your Styling Presets
In the Styling Presets settings panel, you'll find several categories, including Typography, Colors, and Product Swatches.
Click on each category to expand its options and start customizing your global styles. a. For Typography, you can set the font family, size, and style for various text elements like headings, paragraphs, and links. b. For Colors, you can define your primary and secondary colors, as well as other color-related settings like background, border, and text colors. c. For Product Swatches, you can define Color Swatches or Image Swatches
As you make changes to your presets, you'll see a live preview on the right side of the panel.
Once you're satisfied with your styling presets, click on the "Save" button in the bottom-right corner of the panel to apply the changes across your Weaverse pages.
How Styling Presets Work
Let’s make another example.
You’re building a page and just added a text element. You want this element to have the same font size as the other H2 headings.
Now you can just Select text element > Scale text > and add the same font size as other H2 headings.
But imagine you have more than 01 heading, then doing so would take too much time.
What you can do is Select the text > Styles > Select Heading 2 preset. That’s it.
If this still feels a bit unclear to you, this demo might help: