Edit page content in a drag and drop area

This article covers how to edit your page content and layout in a drag and drop area. Drag and drop editing is available in pages created with a starter template or a coded template that includes a drag and drop area.

With drag and drop editing, you can easily rearrange your layout and apply custom background styles to different sections of your page. To learn how to edit your page settings and publish your page, check out this article.

How drag and drop editing works

Drag and drop areas are composed of modules, which are blocks of website content. These modules may be arranged in horizontal rows or vertical columns. Rows and columns may be grouped into sections of elements.

By grouping these elements together, you can apply background styles to an entire area of your page. You can also drag and drop entire rows, columns, or sections to rearrange your landing page layout.

1. Module: an individual block of website content. You can edit your page's text and images within an individual module.
2. Column: a vertical stack of multiple modules or rows. You can move or rearrange columns on your page, and apply a background color or style to an entire column.
3. Row: a horizontal row of modules or columns. You can move or rearrange rows on your page, and apply a background color or style to an entire row.
4. Section: a group of multiple rows or columns. You can move an entire section, or apply a background color or style to an entire section.

Edit module content

To customize content within a module, hover your mouse over the module and click the icon for the desired action:

• edit Edit: edit the contents of your module inline directly on the page, or in the left panel. For a more immersive editing experience, you can
• styles Style: manage the styles available on this module within the Style panel on the left. Most module styles can be managed in the Style tab, but some style options specific to your theme may be available within the Options tab.
• clonduplicate Copy: make a copy of this module on your page.
• delete Delete: remove this module from your page.

Edit rows, columns, or sections

To edit the styles for a group of elements:

• Hover over the row, column, or section, then click the dropdown menu and select styles Style [element].
• On the left panel, click Alignment and spacing to customize padding and margin around the row, column, or section.
• Click Background to expand styling options for the background of this section:
  • None: select this to remove any background colors or images.
  • Color: select this to set a single color as the background. Enter a background color value and transparency percentage.
  • Image: select this to set an image as the background. If an image is in the template by default, click Replace to change the image. Click Upload to add an image from your computer, or click Browse images to select an image from your files.
  • Gradient: select this to set two colors fading together as the background. Set the direction of the gradient. Enter a hex value and set the transparency for each color.
• To make a copy of an existing element, hover over the element and click the arrow icon, then select duplicate Copy [element].
• To delete an element from your page, hover over the element and click the arrow icon, then select delete Delete [element].

As you're editing your page, your updates are saved automatically. To access previously saved drafts of your unpublished page, hover over Autosaved in the upper left.

Add modules to your page

You can drag and drop a new module into place to add another element to your page. This makes it easy to adjust the design of a page to fit your content.

Adjust the layout of your page

As you add and edit modules to your layout, you can adjust the width of the elements on your page by clicking and dragging the vertical divider between columns.

Edit page styles

• If you're using a starter template, you can modify the fonts, styles, and colors applied to your text, forms, and buttons in the Design tab on the left panel.
• If you're using a coded template created by a developer with a drag and drop area, you'll see whatever style options were included on your template by your developer.