Grid/Freeform Section in EComposer

Say hello to Freedom Mode in the new EComposer editor. It allows you to freely position and arrange elements within a section, giving you more flexibility to create custom and creative layouts. You can use Freeform when you need a layout that cannot be easily achieved with a standard grid or structured section, such as overlapping elements, custom positioning, or asymmetric designs.

Let’s watch the video to see a demo of us creating a simple section that uses core features such as a heading, text, images, and buttons.

Note: When building a section with a complex layout using Grid, it may require more effort to adjust the layout for tablet and mobile devices, as elements may overlap or become misaligned on smaller screens.

The following section demonstrates the key benefits of using Freeform/Grid. It covers the basic Freeform/Grid settings and their responsive behavior across desktop, tablet, and mobile devices, highlighting the layout that Freeform can help address.

• Content: You can adjust the section’s width and height and add a video background.

• Design: You’ll be able to upload a background, add a background overlay, and customize the border and typography for the content in this section.

• Auto layout preview: This feature will intelligently auto-arrange your layout. To apply the new design, click the checkmark that appears. If you don’t like it, simply click the close icon “X” to dismiss the preview (View it carefully before deciding to use the suggested design)

• Responsive: Modification for Mobile without affecting anything on your Desktop.

• Group: Normally, you can drag and drop each element individually to change its position. However, with the new Group feature, you can move all your grouped elements together as a single unit.
  
  To stop using a group, simply tick any outside of that Group to ungroup. You can watch the video below for more information.

• Advanced features modification: Our team has added several advanced features to the new version, including the ability to make changes directly in Freedom Mode. For example, when you adjust the width or font size of an element, the corresponding settings will be automatically updated in the Design settings.