A Detailed text component (DTC) is the ideal element for crafting extensive content such as articles, page descriptions, profiles, and more. Instead of inserting individual titles, sections, paragraphs, or visuals, you can double-tap on a Detailed text component to produce and style text, tailored code, and media components.
Within this guide, you will understand:
- How to introduce a Detailed text component to your platform
- How to insert and design textual content
- How to include media content, tailored code, and listings
- How to reorganize and erase components
- How to customize DTC content
How to introduce a Detailed text component to your platform
You can incorporate a Detailed text component by moving it from the Add panel (A) to the Designer canvas. To include or adjust the content within, double-tap the Detailed text component or opt for the component and hit Enter or Return on your keyboard.
You can attach the following components within Detailed text components:
- Paragraphs
- Headings (H1-H6)
- Visuals
- Visual depictions
- Visual descriptors
- Tailored code
- Block quotes
- Disordered listings (bulleted)
- Ordered listings (numbered)
- Videos (Youtube, Vimeo)
- Detail-rich media (Google maps, SoundCloud, Imgur, Giphy, Codepen, and more)
You can also implement additional styling to textual components:
- Connections (URL, page, email, etc.)
- Strong text
- Emphasized text
- Upper-index and lower-index text
- Code
How to insert and design textual content
You can initiate typing within the DTC and then customize the text to form headings, block quotes, bold or emphasized text, and connections.
Insider tip: You can rapidly adjust text (e.g., bold, italicize, attach a hyperlink) and block components (e.g., headings, listings) using Markdown.
How to insert paragraphs
Similar to any text editor, pressing Enter on your keyboard will craft a new paragraph on a fresh line where you can proceed to write. To attach multiple paragraphs, hit Enter at the conclusion of a paragraph.
How to insert headings and block quotes
To establish a heading, select any text within a paragraph and opt for a heading (H1-H6) selection. The same applies to creating block quotes.
How to style text and attach connections
Any segment of any text element (e.g., headings, paragraphs, depictions, etc.) can be styled with strong, emphasized, upper-index, lower-index, and connections by selecting a portion of the text and applying your chosen styling choices. Get further information about inline text styling.
When crafting a connection within a DTC, you have the alternative to choose a URL, page, page segment, email, or phone number.
Keyboard shortcuts
These keyboard shortcuts can expedite your content creation:
- Insert a non-breaking space ( ): Shift + Space
- Insert a line break (<br>): Shift + Enter
- Strong text: Command + B (Control + B on Windows)
- Emphasized text: Command + I (Control + I on Windows)
- Attach hyperlink: Command + K (Control + K on Windows)
You can also implement Markdown shortcuts to swiftly style text (e.g., bold, italicize, attach a hyperlink) and block components (e.g., headings, listings) as you type:
- Emphasize text: *text* or _text_
- Strong text: **text** or __text__
- Emphasize and strengthen text: ***text*** or ___text___
- Attach hyperlink: [hyperlink text](https://www.url.com)
- Attach Heading 1: # + Space
- Attach Heading 2: ## + Space
- Attach Heading 3: ### + Space
- Attach Heading 4: #### + Space
- Attach Heading 5: ##### + Space
- Attach Heading 6: ###### + Space
- Attach Blockquote: > + Space
- Attach unordered (i.e., bulleted) list: – + Space
- Attach ordered (i.e., numbered) list: 1. + Space
How to insert media content, tailored code, and listings
When your text cursor is on a fresh line, a “plus”button emerges. Tapping this button uncovers an insert menu with options to add visuals, videos, diverse rich media, tailored code, and bulleted or numbered listings.
Add visuals, videos, and rich media
All media features in the DTC are adaptive and will maintain the aspect ratio of the content. YouTube, Vimeo, and Dailymotion video support has been improved to allow personalized initiation durations. Here’s a compilation of some of the supported rich media variations:
- YouTube
- Vimeo
- Instagram post
- Facebook post
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Imgur albums
- Google maps
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Spotify playlists and charts
- Giphy
- SoundCloud
- And more!
Media configurations
Each media feature can be sized using the presets in the image settings or sized to a specific pixel or percentage value by tapping the “wrench” icon in the toolbar. An optional caption can be appended below depictions.
Alt text
To append alt text to your depictions, select the depiction you desire to include alt text to, tap the “wrench” icon in the toolbar, then insert your alt text. Learn more about crafting descriptive alt text.
How to add tailored code
The insert menu embraces a button to include tailored code. You can utilize tailored code to establish tables and dividers with HTML, style segments of your detailed text content with aimed CSS, expand your platform’s functionality with JavaScript (like customized Google Maps or Google AdSense ads), and engage your audience with interactive third-party content (like embeds from Twitter, Soundcloud, Airtable, etc.).
Here’s how:
- Position your cursor where you aim to include your tailored code
- Tap the “plus” icon to reveal the insert menu and tap the tailored code button
- Add your code
How to add listings
The insert menu incorporates choices to include unsorted (bullet) and organized (numbered) listings. You can also nest or de-nest listings.
You can include a bullet list from the insert menu or by typing a dash (-) accompanied by a space.
To establish organized listings, you can utilize the insert menu or type an integer followed by a period and a space (e.g., 1. , 3. , 10. ). This is particularly useful when you want to continue an organized list after you’ve included some media between the listing items – you can type the subsequent number in the sequence, followed by a period and a space.
To nest a list, opt for the listing item you want to nest, then hit Tab. To de-nest a list, opt for the item youwish to extract and push Shift + Tab.
Steps for inserting enriched text material from external sources
You have the option to insert enriched text material from various websites or a word processor like Google Docs. All styles and hyperlinks will be embedded within the enriched text block. Pictures will also be brought in when pasting enriched text in the Designer or in a text field in the CMS.
Important note: Pictures won’t be brought in from enriched content pasted into a text block in the Editor.
It’s crucial to remember that pasting enriched text from external sources might also import undesired styles, such as background colors or concealed characters – hence exercise caution when pasting enriched text from external sources.
To prevent unwanted styles from being imported, you can paste the enriched text content into a plain text editor initially, then copy and paste it into the text block, or utilize the keyboard shortcut to paste unstyled text (Command + Option + Shift + V on Mac, or Control + Shift + V on Windows). Keep in mind that this keyboard shortcut will remove all styles including bold, italics, and hyperlinks.
Manipulating and removing elements
You can rearrange the elements within a text block by dragging them onto the canvas or into the Navigator, or by utilizing keyboard shortcuts. Note that you cannot drag and drop elements into or out of the text block.
You can eliminate child elements from text blocks without affecting the other elements within it. Choose the element on the canvas and press Backspace on your keyboard or utilize Command + X (Control + X on Windows).
Customizing RTE content styling
Note: Content editors or team members with the Can edit role can format text (e.g., bold, italics, etc.) and create and delete text and media elements within RTEs, but can’t style elements within RTEs.
Styling individual elements within a text block
Note: Conditional visibility can also be set on individual elements within text blocks.
Styling elements within a text block using HTML tags
Text block elements obtain their styles from their respective HTML tags. You can style elements within text blocks with their HTML tags to establish the default styling for groups of elements. Note that styles applied to HTML tags will affect all elements on your site with those HTML tags.
However, by incorporating a class to your text block element, you can utilize HTML tags with a nested selector to define the default styling for elements within text blocks sharing the same class as the text block. This method helps in confining default styles to text blocks with the identical class to prevent the styles from cascading to other elements on your site.
To set styles using HTML tags within text blocks:
- Select the text block on the canvas
- Assign a class to the text block
- Select any element in the text block
- Go to the Style panel (S)
- Access the Selector field
- Pick the HTML tag (e.g., All paragraphs) from the menu
- Click Nest selector within “class name”
- Style the element as required
Note: Applying styles to nested tags will impact elements within elements sharing the same applied class, not solely text blocks with the specified class. To create styles exclusively for nested tags within text blocks having a particular class, it’s advisable to create a class specifically for text blocks, or use combo classes.
Customizing dynamic enriched text
Enriched text elements can be linked to enriched text fields in a Collection. Once an RTE is bound (i.e., connected), editing text elements becomes restricted, except within the CMS which acts as the source for the RTE content.
Pro tip: Establish a Rich text element in a Style guide page for styling elements within the RTE without the need to connect and disconnect it from the CMS each time a design change is required. Align the class on the RTE in the Style guide as on your Collection page. Subsequently, when updating the style of the elements within the Rich text element on a Collection page, head to the Style guide page and style those elements within the corresponding RTE.
- Include or eliminate Workspace spots and members - April 15, 2024
- Centering box summary - April 15, 2024
- Store a site for future reference - April 15, 2024
EN 
ZH 
ZH_CN 
KO 
JA