Logo
Logo

Using Preset Control Sections

Introduction to Using Presets in Element Studio

This tutorial demonstrates how to effectively use presets within Element Studio to streamline the process of adding complex control sets to new elements. Presets are pre-made sections of controls that can be reused across different elements, enhancing efficiency and consistency in design.

Creating an Element with Presets

Adding a Preset to an Element

  1. Start by creating a new element in Element Studio or select an existing one.
  2. Instead of manually adding individual control sections, navigate to the design controls and select ‘Add Preset’.
  3. Choose a preset such as ‘typography with effects and align’ from the dropdown menu to apply comprehensive design controls related to typography and alignment.

Integrating Preset Controls into the Element

Once the preset is added, integrate its controls into the element’s design:

  1. Drag the newly created element with the preset onto your page.
  2. Utilize the provided macro commands in Element Studio to render CSS for the controls included in the preset.
  3. Test various settings such as color, font size, weight, and effects using the integrated controls to customize the element’s appearance dynamically.

Exploring Built-in Presets and Customization

Understanding and Locating Presets

Element Studio features a variety of built-in presets used across different elements. These can be explored by examining built-in elements like sections, divs, and wrapper links, where repetitive control patterns suggest the use of presets.

Code Help and Preset Management

To find specific presets and their settings:

  1. Open a built-in element such as a section to view its presets like ‘simple layout’ or ‘fancy background’.
  2. Use the code help feature by clicking the curly braces icon to generate the necessary CSS for these presets directly within your project’s stylesheet.

Additional Notes

This method ensures that you leverage the full power of Element Studio to maintain a consistent and efficient design workflow. Presets not only save time but also help maintain a uniform look across various parts of your website, making it easier to manage and update designs.