Uncode version 2.9.0 introduces three new features to the Heading module, enhancing its functionality and design flexibility: the ability to add a Stroke effect to the text, the use of an Indent property, including the option to use a Foreword text, and the possibility to set a creative Blend Mode.
Stroke Effect
The Stroke effect, also known as text outline, allows you to add a distinctive outline to your headings, making them stand out against any background. This simple yet powerful tool enhances readability while adding sophistication and flair. It is important to note that not all fonts work with this property; depending on how the font is designed, you might see artifacts. This issue is not caused by the theme but by the way the font has been designed.
Apply the Stroke:
- Open the settings of the Heading module and apply a custom hexadecimal color (note that the Dtroke effect can only be applied with this type of coloring), screenshot ;
- In the Additional tab, a new option called Text Stroke will now be available, screenshot .
Indent
Applying indentation to your headings helps to clearly delineate sections, providing a cleaner and more organized look. This feature is especially useful for long-form content, educational materials, or complex information architectures where a clear distinction between topics is crucial. This option has been used in recent years in the creation of creative and high-impact typographic sites.
Apply the Indent:
- Simply enter your value in px, percentage, clamp, or any other CSS value, screenshot .
Note that in addition to this option, a Foreword option has been added to the Additional tab. If you enter text in the Subheading and pair it with the Foreword option, this text will be printed before the main text. This solution has been widely used recently and creates a modern introductory design, screenshot .
Blend Modes
Blend modes allow you to mix your text’s colors with the background in innovative ways, creating striking visual effects that captivate your audience. Blend modes are especially effective on websites that emphasize visual storytelling or need to establish a strong mood and tone. Start experimenting with blend modes:
- In the Additional tab choose one of the the Blend Mode options, screenshot .
Note: Please note that if a z-index is applied to a Heading with Blend Mode, the Blend Mode will not function because the element is removed from the natural stack of elements. This is a problem that occurs outside of Uncode as well: https://jsfiddle.net/fkzpL8y0/1/
Comments
0 comments
Article is closed for comments.