Text
How to add, edit and style text.
Last updated
Was this helpful?
How to add, edit and style text.
Last updated
Was this helpful?
A good portion of your app will be text, so it's important you know about adding and formatting text, and the different types of text sections available to help you layout your app.
Location in the Parts Library: Most used parts > Texts
To add a text part, click "+" to add a part, and you'll see "Texts" under the most used parts.
Select "Texts" to see the range of text sizes. Texts in sizes H1 (largest) through to H6 also have responsive versions, meaning that the texts have been preconfigured to reduce in size the smaller the device size.
Choose the appropriate one, and then add it to your page.
Select the text part to replace the placeholder text with your own, then go to the Text Editor in the right menu. There you'll replace the value with the text you'd like to see.
To edit placeholder text of any other part you've added, the process is the same. Just select the text part, go to the Text Editor, and replace the value.
This is an example of a Call To Action section:
The fonts are set up in the Settings menu, and there are four to choose from - primary, secondary, accent, and neutral.
To change the font for a text part, select the text, open the Font Editor, and the "Family" tab is where you can select your font.
To change text size, select the text, open the Font Editor, and the "Size" tab is where you can select the size of your text.
Note that you can change the size of your text to be appropriate across the different device sizes. When using sections and pages from the parts library, they are already configured to be responsive. However, when you edit your app and replace various elements with your own, it's important that every part is responsive.
For example, you might find that on a large screen, an H1 or H2 heading is perfect, but on a mobile device that might be too big.
To change the weight of the font, select the text, open the Font Editor, and the "Weight" tab is where you can select the size of your text.
The default font weight is Normal (400).
To change the line height of your text, select the text, open the Font Editor, and the "Line Height" tab is where you can select the line height of your text.
Here's an example:
Text style is where you can change the case of your text, as well as underline, overline, line through, and italic.
To change the style of your text, select the text, open the Font Editor, and the "Style" tab is where you can select the style of your text.
When it comes to underline, overline, and line through, you can choose the style of line to be applied - solid, double, dotted, dashed, or wavy.
You can also make the text italic, or change the case of your text to uppercase, lowercase, or capitalized.
Want to restrict the number of lines of text that are visible? Then the Line Clamp editor may be handy for you. You can restrict the number of lines of text shown from anywhere between one and six. Here's how it looks:
The Text Indent Editor will indent your text (move it to the right). You can select how far you want to indent the text between one and ten and can change this based on the device size.
The Type and SEO Editor allows you to change your text to a block of text (e.g. pieces of text that were on top of each other to be next to each other forming a block of text), or to paragraphs (e.g. pieces of text that were next to each other to be on top of each other, forming paragraphs).
You can also assign pieces of text an H1, H2, or H3 tag. These tags, when used appropriately on a web page, are essential for SEO because they help search engines understand the content's relevance, improve keyword optimization, enhance user experience, increase the likelihood of being featured in search results, and ensure accessibility for all users. Assigning these tags does not alter the size of the text.
There should ideally be only one H1 tag per page. The H1 tag typically represents the main heading or title of the page and should succinctly summarize the overall content or topic.
Using multiple H1 tags can confuse search engines and dilute the significance of each heading. It's best to reserve the H1 tag for the most important heading on the page.
You can have multiple H2 and H3 tags on a page, as they are used to represent subheadings and organize content into sections.
Each H2 tag should introduce a new section or topic within the page, providing a clear and logical structure for readers.
A H3 tag ideally represents a subsection within a H2 topic.
While there is no strict limit on the number of H2 and H3 tags, it's generally recommended to use them judiciously to maintain clarity and avoid overwhelming the reader with too many subsections.
The goal is to create a well-structured and organized page that is easy for both users and search engines to navigate. You should use heading tags strategically to divide content into meaningful sections, ensuring that each heading accurately reflects the topic it introduces. It's also important to prioritize readability and user experience, so avoid excessive use of headings that may disrupt the flow of the content.
Some specific text-based sections have been pre-built and are designed so that you can add content to your app quickly, in formats that have already been laid out and optimized to be responsive.
These include content sections, text blocks, and action panels. There are also pre-built blog posts that are available as Full Pages. All you need to do is add them to your page and start editing.
Locations in the Parts Library:
Page Sections > Content
Page Sections > Text Blocks
Page Sections > Action Panels
When editing text parts, the Font Editor in the right menu is going to be very handy. The Font Editor is where you can change the font family for your selected text (). In the Font Editor, you can also set the size of the text, the weight, the line height, and the style.
Sizing
Alignment
