Content Controls
Content
These controls let you determine and modify the meta information associated with the content.
- Meta Data – Set or adjust the different meta data elements for your content.
- Type – Choose the kind of meta data you want to display.
- Date Format – Pick a date format for your content. Note: This option is only available if the meta data type is set to ‘date’.
- Custom Date Format – Define your own date format. Note: This option appears when the date format is set to ‘custom’.
- Taxonomy – Choose which taxonomy (like tags or categories) to display. Note: This is only available if the meta data type is set to ‘terms’.
- Count – Display the number of terms. Note: This is only available if the meta data type is set to ‘terms’.
- No Comments – Define the text to display when there are no comments. Note: This is only available if the meta data type is set to ‘comments’.
- One Comment – Define the text to display when there is one comment. Note: This is only available if the meta data type is set to ‘comments’.
- Comments – Define the text to display for multiple comments. Note: This is only available if the meta data type is set to ‘comments’.
- Custom – Add custom meta data. Note: This option is available when the meta data type is ‘custom’.
- Before Text – Define any text you want to show before the meta data.
- Link – Toggle to make the meta data clickable.
- Custom URL – Specify a custom link for the meta data. Note: This is only available if the meta data type is ‘custom’.
- Avatar – Show the author’s avatar. Note: This is only available if the meta data type is ‘author’.
- Icon – Add an icon to your meta data. Note: This option is visible when no avatar is set.
Design Controls
Layout
These controls allow you to adjust the overall structure and alignment of the element.
- Width – Set the width of the element.
- Alignment – Align the content horizontally within its container.
- Stack Vertically At – Determine at which screen size the content should stack vertically.
- Alignment When Vertical – Adjust the alignment when content is stacked vertically. Note: This becomes available when a breakpoint for vertical stacking is set.
Graphics
These controls let you modify the visual graphics, such as icons and avatars, associated with the content.
- Icons – Fine-tune the appearance and positioning of the icons.
- Color – Change the color of the icon.
- Size – Adjust the size of the icon.
- Style – Choose between a solid or outlined icon.
- Corners – Decide if the icon should have rounded or sharp corners. Note: This is available for ‘solid’ and ‘outline’ styles.
- Radius – Specify the degree of corner rounding. Note: This is available when custom corners are chosen.
- Padding – Adjust the space around the icon. Note: This is available for ‘solid’ and ‘outline’ styles.
- Background – Choose a background color for the icon. Note: This is available for ‘solid’ and ‘outline’ styles.
- Border – Determine the border color for the icon. Note: This is only available for the ‘outline’ style.
- Outline Width – Set the width of the icon’s outline. Note: This is only available for the ‘outline’ style.
- Nudge – Slightly adjust the position of the icon. Note: This is available for ‘solid’ and ‘outline’ styles.
- X – Move the icon horizontally.
- Y – Move the icon vertically.
- Author Avatar – Adjust the look of the author’s avatar.
- Size – Set the size of the avatar.
- Border Radius – Determine how rounded the avatar’s edges should be.
Typography
These controls let you fine-tune the font styling and appearance of the text in the element.
- Text – Adjust the main text’s typography.
- Before Text – Modify the typography for the text that appears before the meta data.
- Links – Tweak the typography settings for any links in the content.
Spacing
These controls help you set the space between elements, ensuring a balanced and harmonious layout.
- Between Items – Adjust the space between individual items.
- After Graphics – Set the space after any graphics in the content.
- Container – Define the spacing outside the main content container.
- Margin Top – Set the space above the content container.
- Margin Bottom – Set the space below the content container.
