There are 11 content options and many customizations you can include in your landing pages. We'll dive into each below!
Contents:
To add content to your layout, simply drag and drop the box you'd like to add. Once in the layout, click into the content to bring up the customization options in the right hand column.
Desktop vs. Mobile Customization
At the top of each Content box's customization options, there are tabs for Desktop vs. Mobile views. It is recommended to customize in the Desktop tab first, because Desktop will offer you all styling options. If you prefer the page to look different in Mobile view, you can make those edits in the Mobile tab.
COLUMNS
Drag and drop a new column into the template. Customizations appear in the right-hand column of the builder.
Columns
Click on the type of column you would like added.
Column Properties
Select background color, padding and border for each column. If the item you are working on has more than one column, click into the column tabs to update the properties:
Toggling the "More Options" button will allow you to adjust the padding and border specific to the top, right, left and bottom:
Row Properties
Select the row background color, content background color and upload an image as the background.
Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom:
Please note that if you need to make changes to a column at a later time click on the outside of the column section. There you will find the column's properties.
Responsive Design
Toggle the buttons to turn on or off for Hide on Desktop, Hide on Mobile and Do Not Stack on Mobile.
When Hide on Desktop option is enabled, it will simply hide that row on desktop devices.
Make use of Do Not Stack on Mobile and Hide on Mobile feature to further optimize your landing page display on mobile devices.
When Do Not Stack on Mobile is enabled, it will keep all columns inline within a single row, instead of cascading each column one after the other. This setting only applies to mobile view. [This setting is only found in the Mobile customization tab.]
When Hide on Mobile option is enabled, it will simply hide that row on mobile devices. [This setting is only found in the Mobile customization tab.]
In the layout, you will see the columns available and "No content here. Drag content from right." in blue box(es). This row and the columns in it are now ready for content.
Use the "X" in the formatting bar to close:
BUTTON
Drag and drop a button into the template. Customizations appear in the right hand column of the builder.
Action
Choose the Action Type for your button link:
Enter the URL in the box provided, and choose if this button link should open in the same tab or a new tab:
Button Options
Select text and background colors, button width and alignment for the button:
Toggling the Auto Width button will allow you to customize the width.
Alignments allow you to choose left, center or right-aligned text.
Spacing
Line Height puts more or less space between lines of text.
Select the border and padding specific to the top, right, left and bottom.
The Rounded Border allows you to customize the rounded corners.
General
Adjust the container padding for the button. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that button on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that button on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
DIVIDER
Drag and drop a divider into the template. Customizations appear in the right hand column of the builder.
Line
Use the slider to adjust the width of the divider. Line options include solid, dotted or dashed, and you can adjust the weight and color. Align allows you to choose a left, center or right-aligned divider.
General
Adjust the padding of the container the divider is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that divider on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that divider on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
HEADING
Drag and drop Heading into the template. Customizations appear in the right hand column of the builder.
Clicking into the text box will allow you to edit the text, and provides formatting options for the text itself.
Text
Select Font Family, Font Size and Color of heading.
Heading Type allows you to choose the general sizing of each heading.
Text Align allows you to choose to left, center or right-align the text.
Line Height puts more or less space between lines of text.
Links
You will make text hyperlinked in the text block itself. The option provided here allows you to use the inherit body styles of the page for the links included.
General
Adjust the padding of the container the text is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that heading on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that heading on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
HTML
Drag and drop HTML into the template. Customizations appear in the right hand column of the builder.
HTML
Inject HTML in the box provided.
General
Adjust the padding of the container the HTML is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that HTML block on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that HTML block on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
IMAGE
Drag and drop an image into the template. Customizations appear in the right hand column of the builder.
Image
Click Upload Image to find previously uploaded images or to upload a new image.
Apply Effects & More allows you to place filters, crop, add text, etc. to the image selected.
Toggling the Auto Width button will allow you to customize the width.
Align allows you to choose to left, center or right-align the image.
Add Alternate Text to the image as a placeholder. Using keywords in ALT text will be helpful for SEO.
Action
Choose if this image should link to a URL.
If so, choose the Action Type for your image link:
Enter the URL in the box provided, and choose if this image link should open in the same tab or a new tab:
General
Adjust the padding of the container the image is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that image block on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that image block on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
MENU
Drag and drop Menu into the template. Customizations appear in the right hand column of the builder.
Menu Items
Select Add New Item to add each new link to your menu.
Include the Text of your menu item.
Choose the Action Type for your menu item:
Enter the URL in the box provided, and choose if this menu item should open in the same tab or a new tab:
Styles
Select Font Family, Font Size and Color of text.
Align allows you to choose to left, center or right-align the text.
Layout allows you to choose if menu layout is horizontal or vertical.
Adjust the Padding of the text. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
General
Adjust the Padding of the container the menu is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that menu on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that menu on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
SOCIAL
Drag and drop social into the template. Customizations appear in the right hand column of the builder.
Icons
Simply click into the social icon(s) you would like to add to the page. When you do, a box will appear allowing you to add your direct URL.
The Icon Type drop down allows you to choose the formatting of the icons.
Align allows you to choose to left, center or right-align the social icon.
Icon Spacing allows you to choose the choose the spacing between social icons.
General
Adjust the padding of the container the social icons are in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide the social icon(s) on desktop devices.
When Hide on Mobile option is enabled, it will simply hide the social icon(s) on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
TEXT
Drag and drop text into the template. Customizations for the text box appear in the right hand column of the builder.
Clicking into the text box will allow you to edit the text, and provides formatting options for the text itself.
Text
Adjust the Color of the text by selecting the color box.
Text Align allows you to choose to left, center or right-align the text.
Line Height puts more or less space between lines of text.
Links
You will make text hyperlinked in the text block itself. The option provided here allows you to use the inherit body styles of the page for the links included.
General
Adjust the padding of the container the text is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that text block on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that text block on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
VIDEO
Drag and drop video into the template. Customizations for the video appear in the right hand column of the builder.
Video
Add a video URL to automatically generate a preview image on the page. The image will link to the provided URL.
General
Adjust the padding of the container the video image is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide that video block on desktop devices.
When Hide on Mobile option is enabled, it will simply hide that video block on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.
FORM
Fields
Required Form Fields
Email Address -- BenchmarkONE uses email address to match to existing contacts in the system, so this field is always required.
Hidden Fields
Sales Rep & Contact Status -- These are required fields, but will be hidden from the visitor. The selection chosen for these fields will be the same for all contacts who submit the form.
You have the option to add a Tag as a hidden field, by selecting to Add New Hidden Field. Note that the tag field is hidden from the visitor and the same tag will be applied for all contacts who submit the form.
Additional Field Options
To add additional field options, choose from the Add New Field drop down. You will see standard contact information and custom fields.
To edit the fields, use the pencil icon to the right of the field name.
A modal box will appear to update the field. Change the label and placeholder text, and choose if the field should be required.
Select Update Field when changes are complete.
Selecting "Show More Options" will provide border, padding, color and font options for the fields.
Layout
Layout Type allows you to choose the layout of your form fields.
Stacked layout will stack the form fields in one column, with one field on each row.
Grid layout allows you to customize the layout by placing multiple fields and/or the submit button in a row.
Grid Layout
If Grid layout is chosen, you will be given the option to still Stack On Mobile. Toggle this option on/off.
Your Form Fields and Button Layout will now allow you to customize the placement of each field/button.
Layout Options
Use the slider to adjust the Width of the form.
Form Alignment allows you to choose left, center or right-aligned fields.
Space Between Fields will put more or less space between each field.
Labels
Choose the font size, font family, color and alignment of the labels.
Selecting "Show More Options" will provide padding options for the fields.
Button
Choose colors for your text, background and hover text. Change the Text for your button in the box provided.
Button Layout will only be shown if you have chosen the Grid form layout. This allows you to further customize the placement of your button.
Alignments allow you to choose left, center or right-aligned text. Use the slider to adjust the Width of the button.
Choose Font Size and Font Family of your button.
Selecting "Show More Options" will provide border, padding and margin options for the button.
General
Adjust the padding of the container the button is in. Toggling the "More Options" button will allow you to adjust the padding specific to the top, right, left and bottom.
Responsive Design
When Hide on Desktop option is enabled, it will simply hide the form on desktop devices.
When Hide on Mobile option is enabled, it will simply hide the form on mobile devices. [This setting is only found in the Mobile customization tab.]
Use the "X" in the formatting bar to close.