[03] Building the Design System

Today, we're diving into the creation of design systems in Elementor. Previously, you discovered how to use the Elementor Editor for structuring your web pages. Now, let’s explore design systems, an efficient way to keep your website’s look consistent and clear. By using a design system, you’re able to set up a collection of styles that ensures a polished appearance while saving time during the building process.

Think of a design system as a toolkit filled with presets for your website, including colours and typography. It’s like having a design blueprint ready to go. You can create these guidelines using any tool you prefer, such as Adobe XD. When you implement these preset styles in Elementor, such as global settings for colours and fonts, you'll find your site comes together quickly and coherently. Let's take a look at how you can make this magic happen!

Key Takeaways

  • Design systems keep your site’s design consistent.
  • Global styles streamline the building process.
  • Using pre-set elements saves time.

Grasping Design Systems

Value of Consistent Communication

A website works best when it has a clear message. This message is shown in both the text and the design. Using a set of rules helps make sure the message stays the same across your site. This means each part of your site talks to visitors in the same voice, which is important in keeping their trust.

Streamlined Creation and Uniformity

Creating a site is easier and quicker when you have a plan in place. When you set design rules, your building process takes less time, saving you from doing the same work more than once. It keeps the look of your site neat and uniform from page to page. This is helpful since you won't have to start from scratch each time you add new pages or features.

Parts of a Design Blueprint

Design blueprints are collections of pre-made style choices. They usually show the key colours and text styles your site will use. Tools like Adobe XD can help you prepare these elements before putting them on your site. By sticking to a blueprint, you give your website a professional look and help ensure everything fits together naturally.

Building a Style Guide File

Using Programs like Adobe XD

Creating a design system file can start with programs like Adobe XD. This tool allows you to organise the design and elements for your website in one place. The program provides an easy way to set up styles that you can use throughout your site. If Adobe XD isn't your preference, feel free to use any design tool you are comfortable with.

Adapting Tool Choices

It’s important to be flexible with the tools you choose for building your design system. Whether you use Adobe XD or another program, pick a tool that suits your needs and fits well with your workflow. Comfortable tools help you work more efficiently and keep your design process smooth.

Designing for Complexity

Design systems can vary in detail. Depending on the branding and requirements, your design system might be simple or it could be more intricate. Most design systems usually include main colours and font styles. Starting simple can be a good approach and you can expand as needed.

Banner Ad

Adding Design Features in Elementor

When you start implementing design elements in Elementor, you're focusing on creating a system that makes building and styling your website simple. Begin by using a design system, a set of guidelines that ensures your site's messaging is consistent and clear. This system includes pre-set styles that bring a polished look to your site.

First, access the Elementor Editor and use the drag-and-drop feature to add widgets. Each widget can be customised using the style tab, where you can apply global styles. These styles help speed up the process by reducing the need for individual settings, allowing your website to load faster. Look for the global icon, which tells you if a global style is in use—it's blue when active.

To match your design system, head to Site Settings and find the Global Colours option. Here, adjust each colour to align with your design's palette. You can rename these colours by clicking them and typing a new name. Widgets with global styles will update automatically when you make changes.

Next, configure the Global Fonts. This setting allows for customisation across different devices. By clicking “Add Style,” you can create new global styles specifically tailored to your needs.

Through these steps, you establish a cohesive and efficient design system in Elementor, streamlining your site's development. Keep enhancing your design by setting up additional areas, like headers and footers, to maintain consistency throughout your site.

Customising Universal Heading Styles

Modifying Universal Style Settings

To adjust the universal styles for headings, start by accessing the Site Settings. When you enter this mode, the panel header's colour will turn light blue, showing that you are now making global changes. This allows you to ensure consistency across your site.

Steps to Modify:

  1. Access Site Settings: Open the menu and select Site Settings.
  2. Change Global Colours: Select global colours and adjust them to fit your design palette.
  3. Update Global Fonts: Alter the global typography settings and confirm these are applied to each heading.

Any changes you make will automatically update widgets linked to these global styles.

Implementing Universal Styles

When you apply universal styles, you save time and create a uniform design across your website. Use widgets and the style tab to quickly adjust these settings.

Benefits:

  • Streamlined Process: Dragging and dropping widgets simplifies the design work.
  • Consistent Appearance: Ensures headings look the same throughout your site.
  • Fast Updates: Modify styles in one place to see updates everywhere.

Advantages of Universal Styles

Using universal styles enhances website performance and appearance. It requires fewer resources, allowing faster loading times and easy adjustments.

Key Benefits:

  • Efficiency: Makes the process quicker since less CSS loads.
  • Uniformity: Consistent styles contribute to a cohesive site look.
  • Ease of Use: Simple to manage from any page in the Elementor editor.

Changing Website Settings

Tweaking Site-Wide Colours

Begin by opening the menu and selecting the option for site settings. You'll notice a light blue colour in the panel header, which shows that you are making edits that will affect the whole site. Now, click on the global colours to adjust each shade. Ensure they align with your design's palette. If needed, you can change a colour's name by clicking on it and typing a new name. Any changes will automatically update across all widgets using that global style.

Rename Your Colours

To rename a colour, simply select it and begin typing the new name. This lets you keep your names organised and meaningful. As you change any global colour, all linked elements on your site will update to reflect this adjustment.

Setting Up Site-Wide Fonts

Just as with colours, you can access global fonts through the site settings. Choose the font options that suit your design, remembering that global settings help you maintain consistency. By using site-wide fonts, you reduce loading time because there's less CSS code to manage.

Adjust for Different Devices

Responsive customisation allows you to make your site look great on various devices. This involves tweaking global fonts to ensure they appear correctly on different screens. Though the settings aren't covered fully here, it's important to note that you'll later get the chance to test these changes directly within your designs.

Wrapping Up

When building a website in Elementor, creating a design system is a key step. A design system is a set of pre-set styles that help keep your website looking clean and consistent. It simplifies the building process, saving you time and ensuring uniformity.

Start by using tools you're comfortable with to create design files. These typically include a visual list of the primary colours and typographic styles for your site. With Elementor, you can apply these styles globally to elements like headings.

To implement this, you can use the style tab in the Elementor Editor. Global styles speed up your workflow by reducing the need for custom settings. This makes your website load faster too.

Use the Site Settings menu to edit colours and fonts to match your design system. Changes you make apply across the entire website, ensuring all elements stay consistent. You can rename and adjust global styles as needed.

This approach allows you to streamline the design process. It also sets the stage for the next steps, like creating the header and footer.