# Rich Text

<figure><img src="/files/TEXlqhb8kR4xqTpaqsaS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/aPGIqVf1ARlwehylX9Fq" alt=""><figcaption></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Rich text**".

## Section settings

### General

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section Width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Show top border</td><td>Toggle the top border.</td></tr><tr><td>Show bottom border</td><td>Toggle the bottom border.</td></tr><tr><td>Border color</td><td>Apply a color to the border top and bottom.</td></tr><tr><td>Enable negative top margin</td><td>Toggle to enablenegative top margin.<br><br><em><mark style="color:orange;">Note: Move this section to overlap the section above.</mark></em></td></tr><tr><td>Negative top margin</td><td>Determine the section negative spacing from the top.</td></tr><tr><td>Background color - Background gradient</td><td>Set color (or gradient) for the section background.</td></tr><tr><td>Background image</td><td>Upload/Select an image as the section background.</td></tr><tr><td>Enable column layout</td><td>Toggle Column</td></tr><tr><td>Alignment</td><td>Select the alignment of the content to be either to the Left, Center or to the Right of the section.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="310">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="310">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Block settings

### \[BLOCK] Heading

<table><thead><tr><th width="330">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading</td><td>Enter in the heading for the block.</td></tr><tr><td>Heading Font Size</td><td>Heading font size</td></tr><tr><td>Heading Font Size Mobile</td><td>Heading font size on mobile</td></tr><tr><td>Line height</td><td>Determine the line height of the heading text.</td></tr><tr><td>Heading color</td><td>Apply a color to the heading for the block.</td></tr></tbody></table>

### \[BLOCK] Text

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description on desktop.</td></tr><tr><td>Description font size on mobile</td><td>Specify the font size of the description on mobile.</td></tr><tr><td>Description font weight</td><td>Select the font weight of the description to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td></tr><tr><td>Description line height</td><td>Determine the line height of the description text.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from top.</td></tr><tr><td>Description color</td><td>Apply a color to the description for the block.</td></tr><tr><td>Content width</td><td>Determine the width of the content.<br><br><em><mark style="color:orange;">Note: You can enter the width in units of % or px. For example: 60% or 800px. If content width is left blank, the the content width will be 100% of the container holding the content.</mark></em></td></tr></tbody></table>

### \[BLOCK] Button

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Style</td><td><p>Select the style of the button:</p><p></p><p><mark style="color:orange;"><strong>Primary button</strong></mark><br><mark style="color:orange;"><strong>Secondary button</strong></mark></p></td></tr><tr><td>Label</td><td>Enter the text for the button.</td></tr><tr><td>Link</td><td>Enter URL for the button to redirect to.</td></tr><tr><td>Top margin</td><td>Determine the spacing of the button from top.</td></tr><tr><td>Show button underline</td><td>Toggle to show or hide button underline.</td></tr><tr><td>Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background and border color for both the normal and hover states of the buttons.</td></tr><tr><td>Width (unit % or px)</td><td>Determine the width of the button.<br><br><em><mark style="color:orange;">Note: Default is 270px. You can enter the width in units of % or px. For example: 30% or 270px. If width is left blank, the content width will be 100% of the container holding the content.</mark></em></td></tr></tbody></table>

### \[BLOCK] Social media

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Top margin</td><td>Determine the spacing of the block from top.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the block from bottom.</td></tr><tr><td>Icon color - Background color - Background gradient - Icon hover color - Background hover color - Background hover gradient - Border color</td><td>Set the color, background and ring color for both the normal and hover states of the icons.</td></tr></tbody></table>

### \[BLOCK] Subheading

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Subheading</td><td>Enter in the sub heading for the block.</td></tr><tr><td>Font weight</td><td>Select the font weight of the sub heading</td></tr><tr><td>Subheading font size</td><td>Determine the font size of the sub heading.</td></tr><tr><td>Subheading spacing top</td><td>Determine the spacing of the sub heading from top.</td></tr><tr><td>Subheading color</td><td>Apply a color to the sub heading.</td></tr></tbody></table>

### \[BLOCK] Content

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>First description</td><td>Enter the text for the description top.</td></tr><tr><td>Second description</td><td>Enter the text for the description bottom.<br><br><em><mark style="color:orange;">Note: This content will be displayed when clicking the 'read more' button.</mark></em></td></tr><tr><td>Alignment</td><td>Select the alignment of the block content to be either to the Left, Center or to the Right.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from top.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Content width</td><td>Determine the width of the content.</td></tr><tr><td>Read more</td><td>Enter the text for the Read More button.<br><br><em><mark style="color:orange;">Note: The Read more button is displayed when the second description setting is filled in.</mark></em></td></tr><tr><td>Read less</td><td>Enter the text for the Read Less button.<br><br><em><mark style="color:orange;">Note: This text will replace the text of the read more button when clicked.</mark></em></td></tr><tr><td>Button font size</td><td>Determine the font size of the "Read more/Read less" button.</td></tr><tr><td>Button font weight</td><td>Select the font weight of the "Read more/Read less" button.</td></tr><tr><td>Button top margin</td><td>Determine the spacing of the "Read more/Read less" button from top.</td></tr><tr><td>Button label color - Button border color - Button background color - Button background gradient - Button label hover color - Button border hover color - Button background hover color - Button background hover gradient</td><td>Set the text color, background and border color for both the normal and hover states of the "Read more/Read less" button.</td></tr><tr><td>Button width</td><td>Determine the width of the "Read more/Read less" button.</td></tr><tr><td>Button top padding</td><td>Set the top padding top for the "Read more/Read less" button.</td></tr><tr><td>Button bottom padding</td><td>Set the top padding bottom for the "Read more/Read less" button.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/rich-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.