Section: Rich text

Everything you will need to know on how to setup your rich text section

Jalal avatar
Written by Jalal
Updated over a week ago

The Rich Text section makes it possible for you to add a nice section with a text block, title and button block,

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on 'add section' which can be found in your left sidebar

2) Scroll down, or search for 'Rich text', then click on 'Rich text'

3) Done, your Rich Text section is added.

General settings

The general settings contains the settings for the styling and layout of the 'Rich Text' section.
Simply click on the 'section' to open the settings.

On the right sidebar, the following settings will show

Color scheme:
Select the color scheme for the background + text. You can select the color pallets here.

Text alignment:
Configure the alignment of the text in this section. You can choose between left and center.

Banner height:
Choose the height of the section; small, medium or large.

Banner width:
Choose the width of the section, do you want full width or regular width?

Spacing

Bottom spacing desktop/mobile:

Set the spacing on the bottom for desktop and mobile.

That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.


How to configure the Rich Text content?

By default, there are 3 elements added, you can edit them, remove them or add more elements.
The following elements are added:
- Title
- Textfield
- Button

1. Editing the Rich Text
To edit the elements you simply click on the element you want to edit in your sidebar on the left of your screen.


1.1 Title/Heading block
After you clicked on the title block, on the right of your screen the following sidebar will open.

Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal. The heading size you choose here is only applied to desktop view, you can customize the mobile heading size globally in the general theme settings under "Typography".

Heading:
This will be the heading of the Rich Text section. For this example we're going to use the text" 'About Xtra'

1.2 Spacing
After you added a spacer block, on the right of your screen the following sidebar will open.

The spacer is a new and advanced option we've developed!
You can determine the whitespace between the elements! What is the height of your spacer? Play with this setting to find the perfect height between the elements.
Xtra tip: Add some more spacers between your elements to create more whitespace where needed!
In the image below the spacer is set to 160px.


1.3 Text block
After you clicked on the text block, on the right of your screen the following sidebar will open.

Content:
Select your premade content page, if you have about us page for example, just select it here! No need to retype the same content!

Text:
This will be the text of the Rich Text section if you don't select a page. For this example we're going to use the text: 'Theme Xtra is a new developed theme, we are very proud to release this theme!'

1.4 Button block
After you clicked on the button block, on the right of your screen the following sidebar will open. Tip: When you add multiple button blocks below each other, they will show in a row in the section.

Button label:
Fill in the name for the button, for example: 'Read more'

Link:
Here you can fill in the link to a page where the button will redirect to when clicked on.

Button color scheme:
Select the color scheme for the button. You can select the color pallets here.


2. How to remove a part of the section?
Don't want to use a certain element in the Rich Text section? Just remove them!
To remove a block you simply click on the block you want to remove in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.

Simply click on this button and your block will be deleted.

3. How to add a new part (extra field, extra button)?
Do you want to use more blocks? That's possible, no worries!
To add blocks you simply click on the 'Add block' button in your sidebar on the left of your screen.

After you clicked on 'Add block', you can select the block you want to add.

After you've selected your block, you can edit the block like explained in step 1.

Did this answer your question?