Page layout

To create page designs using Creative Elements, it is essential to understand the elements that make up your layout: Containers, Sections, Columns, and Widgets. These building blocks allow you to organize content, create responsive layouts, and customize the appearance and behavior of individual elements.

Creative Elements supports two layout systems: the newer Flexbox Container system and the traditional Section and Column system. Both allow you to build pages using Widgets, but they organize content differently.

Flexbox Container Layout

Containers are the primary building blocks of the newer layout system. A Container can hold Widgets, other Containers, or a combination of both, allowing you to create flexible and nested layouts without relying on a fixed Column structure.

Containers use CSS Flexbox to control the direction, alignment, distribution, and spacing of their child elements. You can arrange content horizontally or vertically and adjust the layout for different screen sizes.

A Container-based layout can follow a structure such as:

• Parent Container
  • Child Container
    • Heading Widget
    • Text Editor Widget
    • Button Widget
  • Child Container
    • Image Widget

Flexbox Container Layout

Unlike traditional Sections, Containers can be nested directly inside one another. This gives you greater control over complex layouts while reducing the need for additional structural elements.

Section and Column Layout

The traditional layout system uses Sections and Columns to organize your content.

Sections serve as the main structural elements of a page. Each Section contains one or more Columns, and the Columns hold your Widgets.

A traditional layout follows this structure:

• Section
  • Column
    • Heading Widget
    • Text Editor Widget
    • Button Widget
  • Column
    • Image Widget

Section and Column Layout

Sections and Columns remain available for editing existing designs. You can continue working with them or convert an existing layout to Containers.

Widgets

Widgets are the individual content and functionality elements that populate your page. They can display text, images, buttons, products, navigation menus, and other types of content.

In a Container-based layout, Widgets can be placed directly inside Containers. In a traditional layout, Widgets are placed inside Columns.

Each Widget has its own settings, allowing you to customize its content, style, and advanced properties independently of the surrounding layout.

Element Handles

Each layout element has a handle that allows you to select and manage it directly on the canvas.

Element handle icons

The available handle actions depend on the selected element. You can use them to:

• Edit an element and open its settings.
• Move an element to another position in the layout.
• Duplicate an element to reuse its content and styling.
• Add new layout elements or Widgets.
• Save an element as a reusable template, where supported.
• Delete an element that is no longer needed.

You can also right-click an element to access its context menu and additional editing actions.

Converting Sections to Containers

If you have existing pages built with Sections and Columns, you do not need to recreate them manually to start using Containers.

Creative Elements provides a Convert to container feature that converts traditional layouts into the newer Container structure.

You can convert an individual Section from its Layout settings or convert the Sections in an entire document from Page Settings → Settings → Convert to container.

The conversion preserves the original Sections and Columns while creating a new Container-based version of the layout, allowing you to review the result before removing the old structure.