Step-By-Step Build a Slide Layout

Follow this Step-by-Step guide to build a Slide Layout from scratch.

The Layout you are about to build should look close to this when you are done:

General Layout Structure

Every layout must start from a Row element. Your initial structure should look like this

It’s important because you can save your content as a layout only from the Row element.

Layout Examples

Header H1

Step 1: Add a row on the canvas, then add a column into row, select Row 1 field.

Style
Field: Header H1

Step 2: Select Column 1

Style

Padding:

• Left = 10px

• Right = 10px

• Bottom = 5px

• Top = 5px

Step 3: Add text component to the column

Style

Field: Header
Font

• family = Verdana

• weight = Regular

• size = 28px

• min size = 28

• max size = 33

• color = rgb(62, 62, 62)

Double click on the text field and change the default text to Header H1, after that select the text (Ctrl + A) and choose bold font

Settings

• Make this field mandatory = true

  

  

Step 4: Select the text component with the new name Header

Step 5: Press Ctrl + C (to copy it), after this you should see a notification that the component was successfully copied

Step 6: Select Сolumn 1 and press the key combination Ctrl + V, after which a copy of the text component should appear

Step 7: Select second Header

Style

Field: Sub-header

Font:

• size = 20px

• min size = 20

• max size = 24

Padding:

• top = 10px

Double click on the text field and change the default text to “Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.“

Settings

• Make this field mandatory = False

Step 8: Select Header H1 row, after that click to Style tab, and click to “Save as…” button. Click to Layout button.

After that you will see a modal window with fields that need to be filled in. Since we don't have groups, we will create a group for this layout

Name: Header H1
Layout description: Header with sub-header
Click to “Create new Layout group”

Layout group name: Headers
Layout group description: Headers

After filling in the fields, click on the Save button

After saving the layout, make sure that your layout has been saved.

Go to Add -> Layouts, expand the 'Headers' group and there you should see your layout

Step 9: Remove layout

Go back to “Navigate” tab, go to “Web” tab
Select row Header H1 and press backspace button.

Button

Step 1: Add a row on the canvas, inside the row add column, after this add button inside the column.

Step 2: Select Row 1

Style

Field: Button

Step 3: Select Button 1

Style

Field: CTA Button

H

Foeight = auto
Width = auto
Min height = auto

Font:

• family = Verdana

• weight = Regular

• size = 22px

• color = rgb(255, 255, 255)

• min size = 22

• max size = 26

Background color = rgb(73, 199, 255)

Padding

• top = 17px

• bottom = 17px

• left = 25px

• right = 25px

Border

• Radius = 10px

Step 4: Update button text to “Read more”

Step 5: Save layout

1. Select row (Button)

2. Go to Style tab

3. Click on “Save us…” button

4. Click on “Layout“ button

Name: Button
Description: CTA Button

Create new Layout group

Layout group name: Buttons
Layout group description: Buttons

After this click to “Save“ button

After saving the layout, make sure that your layout has been saved.

Go to Add -> Layouts, expand the 'Buttons' group and there you should see your layout

Step 6: Remove layout
Select row Button and press backspace button.

Card

Step 1: Add a row on the canvas, inside the row add 1 column, inside this column add 3 columns. It should look like this:

Step 2: Select and update column 2

Style

Padding

• left = 20px

• right = 20px

• top = 30 px

• bottom = 30px

  

Step 3: Add Header H1 layout

Go to Add -> Layouts → Headers

Drag the Header H1 layout onto the canvas

Go back to Navigate → Web
You should have this structure

Step 4: Select Header H1 row

Cut (Ctrl + X) Header H1 row and paste (Ctrl + V) to Column 2

Step 5: Select H1 row and go to “Fields” tab

Disable Sub-header field

Step 6: Select Column 2
Style

Padding:

• bottom = 20px

  

  
  

Step 7: Add List to Column 2 and add 3 List item to List

Step 8: Update text in List Items to Link

Step 9: Select and update List 1

Style

Width = 100%
Font:

• family = Verdana

• size = 22px

• weight = Regular

• color = rgb(62, 62, 62)

• min size = 22px

• max size = 22px

Content:

• Margin = 10px

• List style = Numbered

• Bullet/number alignment = Middle

• Text padding left = 5px

• Indication color = rgb(62, 62, 62)

Step 10: Select Column 3

Style

Padding

• bottom = 10px

  

Step 11: Select Column 4

Go to the Settings tab and on “Allow to place Layouts“

Step 12: Select Row 1 and update field name to Card

Style

Field: Card

Step 13: Save layout

1. Select row (Card)

2. Go to Style tab

3. Click on “Save us…” button

4. Click on “Layout“ button

Name: Card

Layout description: Card

After create new Layout group.

Layout group name: Content

Layout group description: Content

After this click to save button

Step 14: Go to the Add → Layouts → Buttons (layout group) and drag Button layout to “Droppable zone”