The Block editor allows you to customize the welcome page description using a content block system, which consists of textual descriptions that can be accompanied by images, either photos or videos. This way, with the Block Editor, the administrator of the promotion can easily enhance descriptions with images without using HTML codes.

Below, we present an example of a welcome page that has been designed using the block editor.

These are the contents of this tutorial:

1. Features of the block editor

2. Visual examples

3. Configuration options

4. Advanced configuration with CSS

1. Features of the Block editor

The block editor allows you to add as many content blocks as you need and configure them individually. Each block can contain text, images, or GIFs, and they can be combined to build a much more visually pleasing, flexible, and professional welcome page.

The block editor offers the following features:

• Allows you to create descriptive text blocks and align them in different ways.
• Allows you to insert an image or GIF in each block. You can position the media file in different places.
• Images can include a clickable URL. Additionally, you can add a caption to the image.
• You can customize the block proportions to display content in columns.
• For promotions using the White Label version, you can add a CSS class to the block to modify it with advanced styles.

In the following video, we explain in detail how the block editor works:

2. Visual Examples

Below, we present some examples of promotions where the block editor was used to customize the welcome page:

Example 1

On this Welcome Page, 9 content blocks have been added with the following characteristics:

• 3 text + image blocks, configured with a container width proportion of 33% to display the three blocks in 3 columns.
• 2 text-only blocks, configured with a container width proportion of 100% to display each block occupying the full width.
• 3 text + image blocks, configured with a container width proportion of 33% to display the three blocks in 3 columns.
• 1 text-only block, configured with a container width proportion of 100% and centered alignment.

Example 2

On this Welcome Page, 7 content blocks have been added with the following characteristics:

• 1 text block, configured with a container width proportion of 100%.
• 1 image block, configured with a container width proportion of 100%.
• 2 text blocks, configured with a container width proportion of 100%.
• 1 image block, configured with a container width proportion of 50% and aligned to the right.
• 1 text block, configured with a container width proportion of 100%, with the class "banner" applied to visually highlight it.
• 1 text block, configured with a container width proportion of 100%.

Example 3

On this Welcome Page, 7 content blocks have been added with the following characteristics:

• 1 text block, configured with a container width proportion of 100%, to which an <h2> tag has been applied.
• 1 text block, configured with a container width proportion of 100%, to which an <h3> tag has been applied.
• 4 image blocks, configured with a container width proportion of 25% to display the four blocks in 4 columns.
• 1 text block, configured with a container width proportion of 100%.

Example 4

On this Welcome Page, 6 content blocks have been added with the following characteristics:

• 1 text block, configured with a container width proportion of 100% and left-aligned.
• 3 text + image blocks, configured with a container width proportion of 33% to display the three blocks in 3 columns. Additionally, the class force_columns has been applied to force the columns on mobile devices.
• 1 text block, configured with a container width proportion of 100%. Text styles have been applied to differentiate it from the other texts of the page. Additionally, a CSS class has been applied to edit the block background to a green color to highlight it.
• 1 image block with a hyperlink.

3. Configuration options

Below, we explain the steps to use the block editor to customize your welcome page as needed.

Enter the Editor of the promotion > Pages > Welcome and click on the “Use the block editor” link:

2. Next, you will see that the system has created the default description text as a new text block. From here, click the “Add block” button to to start customizing the welcome page and being able to arrange the different blocks as desired.

Each block added to the Welcome page includes different configuration options.

Below, we explain the available configuration options:

• Text: You can add any type of text. Additionally, you can use the text block styles configured in the promotion.
• Text alignment: You can align the text of each of the blocks to the right, left, center, or justify it.

• Media: You can add an image or GIF. The maximum size allowed is 1000px in width (regardless of the height).
• Image URL: You can include a link on the image, making it clickable.
• Media caption: You can add a caption to the image.
• Image position: You can configure the position of the image relative to the text. Available options are top, bottom, right, and left. For all options except placing the image on top, you can adjust the image’s proportion.

• Block width (Columns): You can adjust the width of each block to align them in columns. This allows you to configure the blocks as follows:
  • 100% (1 column): A single column occupying 100% of the width.
  • 50% (2 columns): Two columns, each occupying 50% of the width.
  • 33% (3 columns): Three columns, each occupying 33% of the width.
  • 25% (4 columns): Four columns, each occupying 25% of the width.

By default, on desktop devices, the system allows displaying content blocks in up to 4 columns. On mobile devices, however, the display automatically adapts to 1 column.

If the promotion was created using the White Label version, it is possible to modify this behavior and maintain/force the column configuration defined by the manager. To do this, a specific CSS class must be applied, as explained in the following section of the tutorial.

Note: On screens narrower than 300px, it is not possible to modify this behavior; in such cases, the system always forces the blocks to display in 1 column, to improve the user experience.

4. Advanced configuration with CSS

If the promotion was created in the White Label version, you can apply custom CSS classes to each of the blocks created to achieve a more personalized visual result that better matches the brand’s look & feel.

Through this option, you can for example:

• Force the column layout also on mobile devices.
• Change text colors, background colors, or specific styles of a block.
• Create a CSS class to apply it to multiple blocks.

Below, we list some CSS classes you can use to customize the content blocks.

Force column layout on mobile version

To maintain the column configuration defined by the manager also on the mobile version, you simply need to apply the class force_columns to all content blocks that are configured to be displayed in columns.

Example: In the following promotion, the content blocks are forced to display in 3 columns on mobile as well:

To achieve this, the force_columns class has been applied to all the content blocks we want to display in columns:

How to create a full-color banner or pill

Additionally, to highlight content blocks on the Welcome Page, the manager can use the class banner and, through CSS code, customize the properties of this banner, such as:

• Modify the color of the titles using the <h1> tag
• Modify the color of texts using the <p> tag (paragraphs)
• Modify the background color
• Modify the padding

Example: In the following promotion, the block titled "How to participate?" has been configured with a green background to highlight its content:

To achieve this result, two steps must be followed:

• Step 1: Apply the banner class to this content block:

• Step 2: Modify the CSS styles to customize the banner design. To do this, go to Editor > Design > Advanced, and in the "CSS Styles" field, you can use the following CSS code, adjusting it to your needs:

.banner {
   --h1-color:0, 0, 0, 1;
   --p-color:0, 0, 0, 1;
   --block-bg-color:255, 255, 255, 1;
   --block-padding:1em;
   --block-padding-top:2em;
}

Below, we provide some CSS variables that can be used to customize the appearance of the banner class:

Background color:

--block-bg-color (default: "255, 255, 255, 0"; // transparent)

Padding:

--block-padding (default:0)
--block-padding-top (default: "--block-padding")
--block-padding-right (default: "--block-padding")
--block-padding-left (default: "--block-padding")
--block-padding-bottom (default: "--block-padding")
--block-padding-bottom (default: "--block-padding")

Text color:

--p-color (<p> color)
--h1-color (<h1> color)
--h2-color (<h2> color)
--h3-color (<h3> color)
--all-text-color (applies to ALL texts)