How to add page elements using InstantSite

An element is an individual component of a web-page; this could be an image, form or text box for example. This guide is designed to show LCN InstantSite customers what each type of element is used for and how to add elements to a page.

If you are looking for more information regarding a specific element, you can choose from the list below:

• Text
• Image
• Gallery
• Form
• Button
• Map
• Embedded Video
• Icon
• Separator

Let’s get started…

Text

A text element creates a textbox in which you can add sentences and paragraphs anywhere on a page. You can change the style of the text element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click Text from the drop-down menu.
   4. The text box will be placed in the currently selected row and column. If no row or column is selected the text box will be added to the bottom of the page.

1. 1. To edit the text in your text element, simply double click the text box. This will open the text editor and allow you to change the text, font size, format and much more.

1. Once you have made you text edits, either click the Save button on the text editor or click off of the text field and the changes will be saved automatically.

Image

The image element is used to add images. You can choose from our library of free images or upload your own. You can change the style of the image element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click Image from the drop-down.
   4. Choose an image from either My images, Template images or Free InstantSite images. If you can’t find an image you like, simply upload your own by clicking Upload image and choosing an image from your computer.
   5. Once you have selected your image, click Add to page.
   6. The image will be placed in the currently selected row and column. If no row or column is selected, the image will be added to the bottom of the page.

1. You can resize the image by simply clicking and dragging the green border around the image section.

Gallery

Sometimes one image just doesn’t cut it. The gallery element is used to add a gallery of images to your website. You can add either a grid of images or a carousel of scrolling images. You can change the style of the gallery element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click gallery from the drop-down.
   4. The gallery will be placed in the currently selected row and column. If no row or column is selected, the gallery will be added to the bottom of the page.

1. Click Add image from within the gallery element.
2. Choose multiple images from either My images, Template images or Free InstantSite images. If you can’t find any images you like, simply upload your own by clicking Upload image and choosing multiple images from your computer.
3. Once you have selected all the images you’d like in the gallery, click Confirm.
4. You can resize the gallery by simply clicking and dragging the green border around the gallery element.

Form

The form element can be used to add a contact form to any page of your InstantSite. You can use this element to create a email contact form or to collect email addresses from your customers. You can change the style of the form element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click Form from the drop-down.
   4. The form will be placed in the currently selected row and column. If no row or column is selected, the form will be added to the bottom of the page.

1. The name of each field can be changed by double clicking on the text.
2. To add more fields, click the cog in the top right of the form element and click Add new field. Select either an Input field or a Text area.
   • Input fields are used for simple fields such as Name, Email or Phone Number where the answer is likely to be short and in the same format.
   • Text areas are used for longer sentences and paragraphs. This would typically be used for your customer to describe a problem or to explain why they are contacting you.
3. The button used to submit your form can be change by clicking the cog in the top right of the form element and entering new text into the Button text field. For example Submit.
4. Finally, you’ll need to change the address the contact form is sent to when submitted. This can be changed by clicking the cog in the top of the Form element and entering your email address in to the Email to field.

Button

The button element is used to add clickable buttons to your InstantSite. Often used for call-to-actions they are a great way to tell your customers what action they should take on a page. You can change the style of the button element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click Button from the drop-down.
   4. The button will be placed in the currently selected row and column. If no row or column is selected, the button will be added to the bottom of the page.

1. You can resize your button by simply clicking and dragging the green border around the button element.
2. You can change the text in the button by clicking the cog in the top of the button element and changing the text in the text field.

Map

The map element is used to add a map to your InstantSite. Often used for contact/about-us pages, the map element is an easy way to show your customers where your business is based. You can change the style of the map element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click Map from the drop-down.
   4. The map will be placed in the currently selected row and column. If no row or column is selected, the map will be added to the bottom of the page.

1. To change the location on the map, click the cog in the top of the map element and enter your postcode in the Locations field. Click the Search button next to the field and the map will automatically adjust to your location.
2. You can also enter additional text to pop-up over your location icon by entering a description in the Popup descriptions field under the cog in the top right of the Map element.

Embedded Video

The embedded video element allows you to add videos that are hosted on other platforms such as YouTube, to your InstantSite. You can change the style of the embedded video element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click Embedded Video from the drop-down.
   4. In the Embed code field, enter the embed URL provided by the platform hosting the video. For example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/-3Rx4qONJhQ?ecver=1" frameborder="0" allowfullscreen></iframe>

1. 1. From the Aspect ratio drop-down, select either 16:9 or 4:3.

1. Click Confirm to add your embedded video.
2. The embedded video will be placed in the currently selected row and column. If no row or column is selected, the embedded video will be added to the bottom of the page.

Icon

The icon element is a great way to add attention-grabbing visuals to your website. They are often used next to phone number and email addresses, allowing your visitors to scan your web page and easily find what they’re looking for. You can change the style of the icon element by following our How to style individual elements in InstantSite guide.

1. 1. Login to the InstantSite editor.
   2. In the left hand panel, click the Plus .
   3. Click Icon from the drop-down.
   4. Look for icon you want to add from the list provided and click Confirm.
   5. The icon will be placed in the currently selected row and column. If no row or column is selected, the icon will be added to the bottom of the page.

Separator

The separator element is used to separator the sections on your InstantSite. They provide a solid line across the page. You can change the style of the separator element by following our How to style individual elements in InstantSite guide.

1. Login to the InstantSite editor.
2. In the left hand panel, click the Plus .
3. Click Separator from the drop-down menu.
4. The separator will be placed in the currently selected row and column. If no row or column is selected, the separator will be added to the bottom of the page.

That’s it! You now know how all the InstantSite element work and how to add them.