Recognizing page elements

The order form is divided into page elements in the form of sections, rows, and components that you can recognize by the colored frame:

• Sections are mint green

• Rows are royal blue and can contain columns

• Components are sandy yellow

• Sections

  Sections form the basic structure of the order form. You can use them to divide the page into areas, e.g., header, body, and footer. You can set the page width and a background image for each section.

• Rows and columns

  When inserting a row, you choose how many columns it has. Columns cannot be added individually or supplemented later.

  • Rows divide the page into horizontal areas. You can insert multiple rows underneath each other and move them up or down with all contents. This way, you can design rows thematically, e.g., one row for product data, one row for input fields, etc.

  • Columns allow you to display content side by side within rows. For example, you can place address data next to payment data.

• Components

  Components allow you to add specific content. Each component has its own properties and configuration options.

When selecting a frame, frame elements are displayed, which include icon buttons for various actions:

Show and hide page elements

For each section, row, or component, you can set the visibility in the respective settings:

• All: The page element is displayed on all screens.

• Mobile only or Desktop only: The page element is displayed only on the respective screens and hidden on others. For example, you can display a product image prominently on stationary screens but hide it on smartphones to facilitate navigation there. In these cases, the content of the page element is outlined in red and labeled:

  

• Hide: The page element is not displayed at all. This allows you to add content that is not yet to be used. For example, you can add a component for an image that is still awaiting approval.

You can only hide page elements that do not contain mandatory components. Hidden page elements can be made visible again as follows:

1. Press one of the sections, rows, or components buttons in the top bar and then click manage. A sidebar for navigating the respective page elements will be displayed.

2. Page elements with a crossed-eye symbol are hidden. Press it to make the page element immediately visible in the order form. (The change will only be visible externally after publication.)

   

Set up section

• The section's frame elements appear at the edges.

• Press the save icon to save the section as a template.

• Press the plus icon to add new or saved template sections.

• Press the arrow icons to move sections.

• Press the copy icon to immediately insert a copy of the section with all settings and contained rows below. Components are not copied.

• Press the gear icon to make settings. The section sidebar will appear.

Settings

• Top margin

  Adds a transparent margin to the top edge of the page or the section above. The margin is added to the section content but does not widen the content itself (unlike padding, see below).

• Image

  • Background image: Set a background image for the section. This overrides the page background image.

  • Image position: Position the background image within the section.

  • Overlay color: Overlays the background with a color. Use a slider in the color selection window to determine the transparency of the color. For example, you can overlay the selected image with a white veil so that it is still visible but not too distracting.

• Size & position

  • Section width: Set a width to make the page edge wider or narrower, for example.

  • Sticky: Set whether the section should remain in a fixed position when scrolling up or down. This is useful if the section has only minimal content, such as the buy button. You can set it so that the section content is always prominently visible.

• Row size & position

  Here you can make central settings for all rows contained in this section. These take precedence over settings in the individual rows.

• Colors/ background color

  Fills the background with a color. For example, you can embed a background image that does not fully cover the section in a background color and overlay it with an overlay (transparent) color.

• Padding

  Padding means adding distances within the section content. This allows you to adjust the edges between the content and the section frame. Unlike top margin (see above), padding also affects the background image or background color as the display area itself grows.

Settings (advanced)

• Corner radius

  Set whether the section should have rounded corners. This is particularly effective when using a background image or background color.

• Border

  Set whether the section should have a border. The default is no border. When selecting another option, additional fields are displayed. The changes will be noticeable once all fields are filled with values.

• Shadow

  Adds a shadow to the section, making it appear more three-dimensional and prominent.

Set up rows and columns

• The row is fully outlined.

• Columns are separated by a slider.

• Press the save icon to save the row as a template.

• Press the plus icon to add new or saved template rows. A sidebar will appear.

  • Choose the number of columns the row should have under Layout.

  • Alternatively, select a template you have saved under My rows.

• Press the arrow icons to move rows.

• Press the copy icon to immediately insert a copy of the row with all settings and columns below. Components are not copied.

• Press the gear icon to make settings.

Settings

The row settings are the same as those for the section (see above).