Content Element
The Content Element outputs the content of the current post or page inside a Layout Builder section. It is the heart of every content layout: the header, title bar, sidebar and footer can come from the layout, while this element shows what the author wrote in the post itself.
It can also show a shortened excerpt instead of the full text, which makes it useful inside Post Card designs and Off Canvas panels. A decorative dropcap for the first letter and its own typography and alignment are available as well.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Content Element
Under Tirenoa > Layouts, open a layout for single posts, pages or another post type and add the Content Element to its content section. Keep Content Display on Full Content to show the whole post. Choose Excerpt for a shortened text, then set the Excerpt Length and whether to Strip HTML From Post Content. Turn on Dropcap to enlarge the first letter of the first paragraph.
On the Design tab set Margin, Alignment and Typography; leave the typography empty to follow the body typography from Global Options. For the dropcap choose Boxed Dropcap, a Dropcap Border Radius (a pixel value or round), the Dropcap Color and, for boxed dropcaps, the Dropcap Text Color.
On single posts and pages the element shows the content of the current item. Inside a Post Card it shows the content or excerpt of each card’s post. On archive pages outside a Post Card it outputs nothing, so use the Archives Element there.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Content Display | Controls if the blog post content is displayed as excerpt, full content or is completely disabled. |
| Excerpt Length | Controls the number of words in the excerpts. |
| Strip HTML From Post Content | Choose to strip HTML from the post content. |
| Dropcap | Set the first letter of first paragraph as a dropcap. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Margin | In pixels or percentage, for example 10px or 10%. |
| Alignment | Select the text alignment. |
| Typography | Controls the title text typography. Leave empty if the global typography for the corresponding heading size (h1-h6) should be used: Global Options Body Typography Settings. |
| Boxed Dropcap | Choose to get a boxed dropcap. |
| Dropcap Border Radius | Choose the radius of the boxed dropcap. In pixels (px), for example 1px, or “round”. |
| Dropcap Color | Controls the color of the dropcap. Leave blank for Global Options selection. |
| Dropcap Text Color | Controls the color of the dropcap letter when using a box. Leave blank for Global Options selection. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Every layout for single items needs a Content Element. Without it, the text of the post never appears on the page.
- For Post Cards, use Excerpt with a short Excerpt Length so all cards keep a similar height.
- The dropcap is only added when the first paragraph starts with a plain letter or digit from A to Z or 0 to 9. A paragraph starting with an accented letter or a quotation mark gets no dropcap.
- A manual excerpt written in the post editor gives better card texts than an automatically shortened one.