Text
Perfect for headings and titles.
Last updated
Was this helpful?
Perfect for headings and titles.
Last updated
Was this helpful?
The Text Component is an ideal choice for a wide range of text elements, from headings and taglines to smaller text areas. It provides flexibility for styling text to suit various design needs, making it perfect for creating visually impactful headings, standout taglines, and highlighted phrases.
With the Text Component, you can easily create bold, eye-catching headings enhanced by background images, gradients, or color overlays, adding depth and style to your design. The component’s versatility means it works seamlessly in both minimal and complex layouts, allowing you to design text elements that grab attention without overpowering your overall look.
Whether you’re looking to create subtle text accents or prominent, styled headers, the Text Component has you covered.
The following video will teach you the basics on using the Text Component.
The following video will show you how to make your text resposive.
This is an advaced feature that allows you to apply Tailwind CSS Classes to any of your text in the Text Component.
Under the General settings in the inspector you'll find options to style the entire block of text.
The Tag helps create a semantic structure so search engines understand the hierarchy and relationship of your content. For example, the main heading on the page choose would be "Heading 1", your body text would be set "Paragraph".
Align your text, left, center and right. You may need to also set the aligment of the parent item to get the desired alignment.
Text styles include size, line height, letter spacing, and weight. You can override some of these settings inline by choosing the "Override" option.
Set the weight of your text.
Set the spacing of the text.
Set the line height of the text.
Make the text italic.
Choose from None, Uppercase, Lowercase, and Capitalise.
Choose from None, Underline, Overline, and Line Through.
Choose between colour, background image, and gradient for your text. Each different type of style has a set of sub options.
Color: Choose a solid colour from the theme studio, also supports opacity.
Image: Choose an image, along with positioning, sizing, and repeat.
Gradient: Supports up to 3 colours, set position and oapcity of each colour independently.
Default and HOver
Below we have included a few sample classes that were featured int he video. To learn more you can .
Choose a font family, these are managed by the .
Choose a text size, these are managed by the .
Choose a shadow for yoru text, these are managed by the .
Choose a shadow for yoru text, these are managed by the .
