Customers with i360 Action Sites have the ability to design pages that display on their website using the drag and drop editor. With this tool you can customize the following:
Add images, videos, text boxes, and buttons
Change existing layouts to fit your needs
Edit text size, fonts, and add hyperlinks
Edit padding, margins, and backgrounds across desktop, tablet, and mobile interfaces
This article covers how to access the editor and an overview of its key functions.
Create a New Action
To use the editor, you'll need to make changes to an existing landing page or create a new one. This can be done from Digital > Web Pages.
Select 'Create Web Page' in the bottom right corner. Fill out the required details including:
Title
Subtitle
Primary Topic
Action Type
Page URL
New to landing pages? View this article for more information: Landing Pages
Make any desired changes on the 'Settings' tab (#1 on the top navigation bar) and select next to move on to 'Content' (#2 on the top navigation bar). Insert text in the text box to elaborate on the action that people will be signing. You can edit this text at any time in the future. Select 'Next' to get to the 'Display' tab.
Display
The Drag & Drop Editor lives on the 'Display' tab within the action site builder. You'll want to begin by selecting a layout option that best fits your needs. Select '+Add layout template' to choose a base option. You'll be able to edit this layout later.
Next, select a featured image. i360 provides dozens for you to choose from, but you can add your own to your library by following the steps in this guide: Add Images to an Action Page
Any edits to your form will be done from this page. Choose which fields to require, add, or remove (first, last name, email, and zip are always required). You can adjust the size, font, and color of this form in the form builder.
'Preview & Edit Landing Page' Access
Select 'Preview & Edit Landing Page' in the bottom right.
Once loaded, the page will display all of the settings and display options that you've selected so far. Hover over and click different items on the page (title, subtitle, form) to interact and make edits.
Below is an overview of all available settings from left to right on the page.
Left Sidebar Icons
Drag and drop any of the icons (elements) onto the landing page to add it to the page. Most icons (aside from the columns) will be floating. We'll cover how to edit and move them into place in the next section.
Icon Name | Image | Description |
Link | 
| Insert this element to add linked text to your landing page. Text can be edited by single or double-clicking. A text editor will appear on the right of the screen to allow you to make formatting edits to the text. |
Image | 
| Insert the image element to select an image from your library. Select an existing image and select "Select Image Size" in bottom bar to edit the image size. Add new images from the bottom bar as well from "Upload New Image". |
Video | 
| Use the Style editor on the right to choose a video provider, source link, and edit other display settings. The video tool supports HTML5, Youtube, and Vimeo. |
Text | 
| Add text on the page and edit the style from the text editor on the right. |
Box | 
| Insert a box element on the page and adjust the size, corner radius, and color from the style editor on the right. |
Button | 
| Use this option to add a button to your landing page. Navigate to 'Style' using the menu on the right to edit the link, open settings, and hover text. The link must start with 'https://" to work. |
Section | 
| Create a single section by dragging and dropping this option onto your landing page. A green line will appear to show where the element will land. |
Two Columns | 
| Create two equal-sized sections using this drag and drop option. The green line will show where the element will drop. |
Three Columns | 
| Create three equal-sized sections using this option. The green line will show where the sections will land. Select each unique column to edit the text or drag in other elements. |
Two Columns 3/7 | 
| Create two columns of different sizes using this element. This is a great option if you want a main area and sidebar area to insert elements. |
Element Settings
Each element you interact with will display different settings. Below is a guide to walk you through the behaviors of all settings. An example of a settings bar is below:
Icon Name | Image | Description |
Adjust Layer | 
| Use this to move to the layer behind the element you selected. An example: you select text but would like to edit the box behind the text. |
Drag Tool | 
| Move the element around the page. This will simply move the element and not move other elements around to make room (use tiled movement instead). |
Delete | 
| Delete the element. |
Resize (Change Padding) | 
| Adjust the sizing of the element with this option. In most cases, double clicking the element will also allow you to resize. |
Tiled Movement | 
| Use this drag and drop feature to insert the element into an existing column. This element will move other items to make room for this one. Use the align and resizing tools to fit it to your needs. |
Align Left | 
| Align the element left. |
Center Horizontally | 
| Center the element horizontally. Use margin and padding from the 'Style' sidebar to adjust the element vertically. |
Align Right | 
| Align the element right. |
Hide | 
| Hide the element from the page. |
Preview Icons
In the top left of the page, three icons appear to display views for desktop, tablet, and mobile. Toggle between each page to preview what your page will look like across different types of devices. In the mobile view, use the drop down to view different sizes of phone screens.
As you make format edits across each device type, those settings will save for each unique device. Adding new elements (links, columns, buttons, etc.) will make changes across all views. We recommend finishing the desktop view prior to making edits to other views to ensure you're satisfied with the look and feel of all options.
Top of Page Icons
The icons at the top of the drag and drop editor will appear when an element is selected. Depending on the element, certain options will appear blue and others will appear gray. If it's gray, it cannot be used for this element. Below is an overview of what each icon accomplishes:
Icon Name | Image | Description |
Fullscreen | 
| Change the preview to fullscreen. The top navigation icons will be available at the top. The sidebars are not viewable in this setting. |
Undo | 
| Undo your last action. |
Redo | 
| Redo a reversed action. |
Remove all changes and restore to original template | 
| Remove any and all custom styling from the page. It will be restored to the original template and layout. This change cannot be undone. |
Delete visual element | 
| Delete the selected element. |
Duplicate | 
| Duplicate the selected element. |
Move section up | 
| Move a selected section up on the page. |
Move section down | 
| Move a selected section down on the page. |
Move section left | 
| Move a section left on the page. |
Move section right | 
| Move a section right on the page. |
Style Editor
The Style editor will look different depending on the element you have selected. In general, it allows you to change the shape, size, color, and spacing of elements.
Shape & Size
W: edit the width in pixels
H: edit the height in pixels
L: add spacing to the left of the element
T: add spacing to the top of the element
Corner Radius: round the edges of the element
Spacing & Border
Padding will add spacing inside the box. If there is a positive number, you'll see the text move more inwards. You can add a negative number to decrease the spacing.
Padding: use this top option to apply padding pixels across top, bottom, left, and right.
Padding Top: create padding at the top of the element
Padding Bottom: create padding at the bottom of the element
Padding Left: create padding to the left of the element
Padding Right: create padding to the right of the element
Margin will add spacing outside of a box. When this number is positive, you'll see the box shrink. Use a negative number to exceed the lines of columns.
Margin: use this top option to apply margins across the top, bottom, left, and right.
Margin Top: create a margin at the top of the element
Margin Bottom: create a margin at the bottom of the element
Margin Left: create a margin to the left of the element
Margin Right: create a margin to the right of the element
Border will add a design and color to your box. Choose from the type of line you want to add (where it says solid), the thickness (1.1px) and the color hex code.
Choose from solid, dotted, dashed, double, groove, ridge, or inset for line type.
Text Casing allows you to edit the capitalization of your element text. Choose from uppercase, capitalized, or lowercase.
Background
Select Image: choose an image from your library to add as a background to the selected element
Background Position: choose where the background is positioned on the element
Background Size: choose the size of the image and how it displays on the page
Background Repeat: decide if you want the image to repeat and in what orientation
Background Color: choose a color for the background to either override an image, or use the next step to make the color transparent
Color Opacity: adjust the transparency of the color to show the image or other color underneath.
Left Sidebar Icon Style Settings
Link & Button Settings
On Hover: This is the text that appears when someone hovers over the link.
Link: Add the hyperlink here. It must begin with "https://".
Open In: Decide if you want to open in the current window or a new window.
Image Settings
Add Alt text to describe the appearance or function of the image.
Scroll down to the bottom of the Style editor to see Image Hyperlink Options.
Title: When a user hovers, they can see the title of the image.
Link: Add a hyperlink to the image. When a person clicks the image, it will navigate to that link.
Target: Refer the link to a new window or stay on the current window.
Video Settings
Provider: Choose the source for the video. Options include HTML5, Youtube, and Vimeo.
Source: Paste the source link here.
Poster: Replace the video image with a different image.
Autoplay: Check this box to enable the video to play on its own when the person accesses the page.
Loop: Check this box to have the video restart once it ends.
Controls: Check this box to show video controls including play/pause, volume, fullscreen, etc.
Layer
The layer section on the right shows the order of layers from top to bottom. You'll see an indent to the right for layers that contain multiple elements (ex. Header Section contains Text, Subtitle, Title). Drag and drop the order of the layers to adjust how they display on the page. You can also use this to hide layers.
Text Editor
The text editor will appear when you have a text box selected. Use this to edit the font, size, and color of your text.
Save Your Progress
It is important that you select 'Save' before leaving the editor. The save button is visible from the bottom right of the screen.
