Components

Designing with Components (New interface Exclusive)

Components are a powerful feature, available starting in H5mag V3, designed to help you establish and maintain visual consistency and editing efficiency across your entire edition.

How Components Work

When you intend to reuse the same design elemen such as icons, navigation buttons, or standard footer in various articles, the Component acts as the single source of truth. This principle ensures that any modification you perform is automatically reflected everywhere the element appears, guaranteeing a unified user experience.

Key Concepts

• Component: The original design element. It is the object that defines the definitive appearance and behavior for all duplicates.

• Instance: A replicate created from the Component. An Instance is linked to its Component, inheriting all its attributes by default. Edits made to the Component are automatically propagated to all Instances.

Creating and Managing Components

Defining a Component

To make a Component from an area, simply Right-click on the area you wish to standardize and select “Save as Component.” Note that all elements nested within the selected area become part of the Component's definition.

Identifying Instances

Instances are visually distinguished by a blue text highlight in your Area Tree and are organized for easy access within the Reusable Tab of your resource library.

Quick Instance Modification

You can apply general modifications, such as styling or animations, directly to an Instance. To apply these changes back to the original Component and synchronize them across all other Instances, Right-click the modified Instance and choose “Update Component with Changes.”

Advanced Component Editing

For more significant structural revision (specifically moving, adding, or removing elements within the design structure of the Componen), you must access Component Edit Mode.

1. Enter Edit Mode: Right-click an Instance and select “Edit Component.”

2. A dedicated Edit Bar will appear, clearly identifying the Component you are modifying and offering the controls to Discard Changes or Update Component with Changes..

3. While in this mode, you retain the full suite of customization tools (styling, animation, etc.) for precise control over the design's internal structure.

4. The Area Tree clearly indicates modifiable internal areas by marking them with a blue background, facilitating surgical revisions.