Content Controls
Content
The Content section lets users dynamically manage the textual components of the Dual Heading, allowing for creative heading presentations. The ‘Words’ control enables the input of primary and secondary text, offering a unique dual-style appearance. The ‘Tag’ control determines the HTML tag used, impacting SEO and semantics.
- Words – Add or modify the words in the dual heading.
- Text – Type in the text for each part of the dual heading.
- Secondary Style – Toggle to apply a different style to the second part of the heading.
- Tag – Select the HTML tag for your heading, such as h1, h2, etc., affecting its importance in page structure.
Design Controls
Size
The Size section provides controls for defining the heading’s width, crucial for layout consistency and responsive design. Adjusting the ‘Width’ ensures that the heading fits well within different container sizes and displays consistently across various devices.
- Width – Adjust the width of the dual heading, ensuring it aligns with your design layout.
Both
This section contains typography controls that apply to both Primary and Secondary parts of the dual heading, ensuring uniformity in design elements and style.
Primary
The Primary section controls the appearance of the Primary part of the dual heading. Typography settings allow for precise control over font, size, and style, while the ‘Annotate’ and ‘Effect’ features offer creative text embellishments for more eye-catching headings.
- Typography – Customize the font, size, weight, and more for the primary part of the heading.
- Annotate – Toggle this to enable additional styling effects on the primary heading.
- Effect – Add creative effects to the primary text. This control becomes available when ‘Annotate’ is enabled.
- Type – Choose the type of effect, like underline, strikethrough, or overline.
- Color – Pick a color for the effect to match your style or brand.
- Duration – Set how long the effect lasts if it’s animated.
- Stroke Width – Define the thickness of the effect, such as underlines or strikethroughs.
- Multiline – Toggle to enable the effect on multi-line text.
- Iterations – Specify the number of times an animated effect should repeat.
- RTL – Change the direction of the effect’s animation.
- Brackets – Add bracket effects around your text. This control is available when the ‘Type’ of effect is set to ‘bracket’.
- Left – Toggle to add a bracket on the left side of the text.
- Right – Toggle to add a bracket on the right side of the text.
- Top – Toggle to add brackets on the top side of the text.
- Bottom – Toggle to add brackets on the bottom side of the text.
Secondary
The Secondary section governs the design of the Secondary part of the dual heading, with controls similar to the Primary section. It allows for independent styling, making the secondary heading visually distinct yet complementary to the primary heading.
- Typography – Adjust the typography settings specifically for the secondary part of the heading.
- Annotate – Enable or disable additional visual effects on the secondary heading.
- Effect – This section allows for various text effects on the secondary heading, enabled when ‘Annotate’ is toggled on.
- Type – Select the type of creative effect you want to apply.
- Color – Change the color of the effect to suit your design needs.
- Duration – Control how long an animation lasts, if applicable.
- Stroke Width – Set the width of the effect line for more visual impact.
- Multiline – Allow effects to be applied across multiple lines of text.
- Iterations – Determine how many times an animated effect repeats.
- RTL – Change the direction of the effect’s animation.
- Brackets – Use brackets for creative emphasis. This is available when the ‘Type’ is ‘bracket’.
- Left – Add a creative bracket effect to the left side of your secondary text.
- Right – Add a creative bracket effect to the right side of your secondary text.
- Top – Apply bracket effects above your text for emphasis.
- Bottom – Apply bracket effects below your text for emphasis.
Spacing
The Spacing controls are essential for achieving a balanced and well-organized layout in your dual headings. By adjusting the ‘Margin Top’ and ‘Margin Bottom,’ you can ensure your headings don’t feel cramped and maintain a harmonious relation with other page elements.
- Margin Top – Increase or decrease the space above the dual heading, helping to set it apart from other page elements.
- Margin Bottom – Adjust the space below the dual heading to prevent it from merging with other content.
