{"id":173,"date":"2020-02-12T10:36:49","date_gmt":"2020-02-12T10:36:49","guid":{"rendered":"https:\/\/www.lcn.com\/support\/knowledge-base\/how-to-add-page-elements-using-instantsite\/"},"modified":"2021-05-21T14:24:20","modified_gmt":"2021-05-21T14:24:20","slug":"how-to-add-page-elements-using-instantsite","status":"publish","type":"ht_kb","link":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/","title":{"rendered":"How to add page elements using InstantSite"},"content":{"rendered":"\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please note:<\/strong>&nbsp;This guide is for&nbsp;legacy&nbsp;InstantSite&nbsp;pruchsed&nbsp;before the 18th August 2020. If you have our new&nbsp;InstantSite&nbsp;please see guides specific&nbsp;for our new&nbsp;builder found&nbsp;<a href=\"https:\/\/support.multiscreensite.com\/hc\/en-us\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/span><\/p>\n<\/div>\n\n\n<p>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 <a href=\"https:\/\/www.lcn.com\/instantsite\" target=\"_blank\" rel=\"noopener noreferrer\">LCN InstantSite<\/a> customers what each type of element is used for and how to add elements to a page.<\/p>\n<p>If you are looking for more information regarding a specific element, you can choose from the list below:<\/p>\n<ul>\n<li><a href=\"#text\">Text<\/a><\/li>\n<li><a href=\"#image\">Image<\/a><\/li>\n<li><a href=\"#gallery\">Gallery<\/a><\/li>\n<li><a href=\"#form\">Form<\/a><\/li>\n<li><a href=\"#button\">Button<\/a><\/li>\n<li><a href=\"#map\">Map<\/a><\/li>\n<li><a href=\"#embedded_video\">Embedded Video<\/a><\/li>\n<li><a href=\"#icon\">Icon<\/a><\/li>\n<li><a href=\"#separator\">Separator<\/a><\/li>\n<\/ul>\n<p>Let\u2019s get started\u2026<\/p>\n<p><a name=\"text\"><\/a><\/p>\n<h3>Text<\/h3>\n<p>A <strong>text<\/strong> element creates a textbox in which you can add sentences and paragraphs anywhere on a page. You can change the style of the <strong>text<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Text<\/strong> from the drop-down menu.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>To edit the text in your <strong>text<\/strong> 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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information about how the text editor works and the customisation it offers, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-use-the-text-editor-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to use the text editor in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Once you have made you text edits, either click the <strong>Save<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/605\/inline\/original\/1506077571\/save.jpg\" \/> button on the text editor or click off of the text field and the changes will be saved automatically.<\/li>\n<\/ol>\n<p><a name=\"image\"><\/a><\/p>\n<h3>Image<\/h3>\n<p>The <strong>image<\/strong> 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 <strong>image<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Image<\/strong> from the drop-down.<\/li>\n<li>Choose an image from either <strong>My images<\/strong>, <strong>Template images<\/strong> or <strong>Free InstantSite images<\/strong>. If you can\u2019t find an image you like, simply upload your own by clicking <strong>Upload image<\/strong> and choosing an image from your computer.<\/li>\n<li>Once you have selected your image, click <strong>Add to page<\/strong>.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>You can resize the image by simply clicking and dragging the green border around the <strong>image<\/strong> section.<\/li>\n<\/ol>\n<p><a name=\"gallery\"><\/a><\/p>\n<h3>Gallery<\/h3>\n<p>Sometimes one image just doesn\u2019t cut it. The <strong>gallery<\/strong> element is used to add a gallery of images to your website. You can add either a <strong>grid<\/strong> of images or a <strong>carousel<\/strong> of scrolling images. You can change the style of the <strong>gallery<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>gallery<\/strong> from the drop-down.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Click <strong>Add image<\/strong> from within the <strong>gallery<\/strong> element.<\/li>\n<li>Choose multiple images from either <strong>My images<\/strong>, <strong>Template images<\/strong> or <strong>Free InstantSite images<\/strong>. If you can\u2019t find any images you like, simply upload your own by clicking <strong>Upload image<\/strong> and choosing multiple images from your computer.<\/li>\n<li>Once you have selected all the images you\u2019d like in the gallery, click <strong>Confirm<\/strong>.<\/li>\n<li>You can resize the gallery by simply clicking and dragging the green border around the <strong>gallery<\/strong> element.<\/li>\n<\/ol>\n<p><a name=\"form\"><\/a><\/p>\n<h3>Form<\/h3>\n<p>The <strong>form<\/strong> 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 <strong>form<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Form<\/strong> from the drop-down.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>The name of each field can be changed by double clicking on the text.<\/li>\n<li>To add more fields, click the <strong>cog<\/strong> in the top right of the form element and click <strong>Add new field<\/strong>. Select either an <strong>Input<\/strong> field or a <strong>Text area<\/strong>.\n<ul>\n<li><strong>Input fields<\/strong> 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.<\/li>\n<li><strong>Text areas<\/strong> 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.<\/li>\n<\/ul>\n<\/li>\n<li>The button used to submit your form can be change by clicking the <strong>cog<\/strong> in the top right of the form element and entering new text into the <strong>Button text<\/strong> field. For example <strong>Submit<\/strong>.<\/li>\n<li>Finally, you\u2019ll need to change the address the contact form is sent to when submitted. This can be changed by clicking the <strong>cog<\/strong> in the top of the <strong>Form<\/strong> element and entering your email address in to the <strong>Email to<\/strong> field.<\/li>\n<\/ol>\n<p><a name=\"button\"><\/a><\/p>\n<h3>Button<\/h3>\n<p>The <strong>button<\/strong> 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 <strong>button<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Button<\/strong> from the drop-down.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>You can resize your button by simply clicking and dragging the green border around the <strong>button<\/strong> element.<\/li>\n<li>You can change the text in the button by clicking the <strong>cog<\/strong> in the top of the <strong>button<\/strong> element and changing the text in the <strong>text<\/strong> field.<\/li>\n<\/ol>\n<p><a name=\"map\"><\/a><\/p>\n<h3>Map<\/h3>\n<p>The <strong>map<\/strong> element is used to add a map to your InstantSite. Often used for contact\/about-us pages, the <strong>map<\/strong> element is an easy way to show your customers where your business is based. You can change the style of the <strong>map<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Map<\/strong> from the drop-down.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>To change the location on the map, click the <strong>cog<\/strong> in the top of the <strong>map<\/strong> element and enter your postcode in the <strong>Locations<\/strong> field. Click the <strong>Search<\/strong> button next to the field and the map will automatically adjust to your location.<\/li>\n<li>You can also enter additional text to pop-up over your location icon by entering a description in the <strong>Popup descriptions<\/strong> field under the <strong>cog<\/strong> in the top right of the <strong>Map<\/strong> element.<\/li>\n<\/ol>\n<p><a name=\"embedded_video\"><\/a><\/p>\n<h3>Embedded Video<\/h3>\n<p>The <strong>embedded video<\/strong> 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 <strong>embedded video<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Embedded Video<\/strong> from the drop-down.<\/li>\n<li>In the <strong>Embed code<\/strong> field, enter the embed URL provided by the platform hosting the video. For example:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<pre class=\"prettyprint linenums\">&lt;iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/-3Rx4qONJhQ?ecver=1\" frameborder=\"0\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>From the <strong>Aspect ratio<\/strong> drop-down, select either <strong>16:9<\/strong> or <strong>4:3<\/strong>.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: 16:9 aspect ratio is what is traditionally known as widescreen, whilst 4:3 would be what your old TV set from the 90s would have used.<\/span><\/p>\n<\/div>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Click <strong>Confirm<\/strong> to add your embedded video.<\/li>\n<li>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.<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<p><a name=\"icon\"><\/a><\/p>\n<h3>Icon<\/h3>\n<p>The <strong>icon<\/strong> 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\u2019re looking for. You can change the style of the icon element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li style=\"list-style-type: none;\">\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Icon<\/strong> from the drop-down.<\/li>\n<li>Look for icon you want to add from the list provided and click <strong>Confirm<\/strong>.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<p><a name=\"separator\"><\/a><\/p>\n<h3>Separator<\/h3>\n<p>The <strong>separator<\/strong> 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 <strong>separator<\/strong> element by following our <a href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to style individual elements in InstantSite<\/a> guide.<\/p>\n<ol class=\"\u201dstep_by_step\u201d\">\n<li>Login to the InstantSite editor.<\/li>\n<li>In the left hand panel, click the <strong>Plus<\/strong> <img decoding=\"async\" style=\"max-width: 35px; display: inline;\" src=\"\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>.<\/li>\n<li>Click <strong>Separator<\/strong> from the drop-down menu.<\/li>\n<li>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.<\/li>\n<\/ol>\n<div class=\"container row col-md-24 support-article panel panel-default panel-body\" style=\"background-color: #f6e9db; border-color: #ead9c7; border: 1px solid #ddd; border-radius: 4px; padding: 1% 2%; background-image: url('\/images\/my_account\/highlight.png'); background-position: left top; background-repeat: repeat-x;\">\n<p><span style=\"font-size: 17px;\"><strong style=\"color: #e77600 !important; font-size: 18px;\">Please Note<\/strong>: For more information on how rows and columns work in InstantSite, visit our <a href=\"https:\/\/www.lcn.com\/support\/articles\/understanding-rows-and-columns-in-instantsite\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding Rows and Columns in InstantSite<\/a> guide.<\/span><\/p>\n<\/div>\n<p>That\u2019s it! You now know how all the InstantSite element work and how to add them.<\/p>\n\n\n<style>\r\n.hkb-article__content.entry-content img {\r\n    margin: auto auto;\r\n}\r\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Please note:&nbsp;This guide is for&nbsp;legacy&nbsp;InstantSite&nbsp;pruchsed&nbsp;before the 18th August 2020. If you have our new&nbsp;InstantSite&nbsp;please see guides specific&nbsp;for our new&nbsp;builder found&nbsp;here. 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 [&hellip;]<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[4],"ht-kb-tag":[20],"class_list":["post-173","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-managing-web-hosting","ht_kb_tag-instantsite"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to add page elements using InstantSite - LCN.com<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add page elements using InstantSite - LCN.com\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/\" \/>\n<meta property=\"og:site_name\" content=\"Customer Support Guides - LCN\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/lcndotcom\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-21T14:24:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lcn.com\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@lcndotcom\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/\",\"url\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/\",\"name\":\"How to add page elements using InstantSite - LCN.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#website\"},\"datePublished\":\"2020-02-12T10:36:49+00:00\",\"dateModified\":\"2021-05-21T14:24:20+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.lcn.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add page elements using InstantSite\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.lcn.com\/support\/#website\",\"url\":\"https:\/\/www.lcn.com\/support\/\",\"name\":\"Customer Support Guides - LCN\",\"description\":\"- LCN\",\"publisher\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.lcn.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.lcn.com\/support\/#organization\",\"name\":\"LCN.com\",\"url\":\"https:\/\/www.lcn.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg\",\"contentUrl\":\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg\",\"width\":461,\"height\":461,\"caption\":\"LCN.com\"},\"image\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/lcndotcom\",\"https:\/\/x.com\/lcndotcom\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add page elements using InstantSite - LCN.com","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/","og_locale":"en_US","og_type":"article","og_title":"How to add page elements using InstantSite - LCN.com","og_description":"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.","og_url":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/","og_site_name":"Customer Support Guides - LCN","article_publisher":"https:\/\/www.facebook.com\/lcndotcom","article_modified_time":"2021-05-21T14:24:20+00:00","og_image":[{"url":"https:\/\/www.lcn.com\/support\/articles\/attachment\/601\/inline\/original\/1506076827\/Add_Eelement.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@lcndotcom","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/","url":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/","name":"How to add page elements using InstantSite - LCN.com","isPartOf":{"@id":"https:\/\/www.lcn.com\/support\/#website"},"datePublished":"2020-02-12T10:36:49+00:00","dateModified":"2021-05-21T14:24:20+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-add-page-elements-using-instantsite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lcn.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to add page elements using InstantSite"}]},{"@type":"WebSite","@id":"https:\/\/www.lcn.com\/support\/#website","url":"https:\/\/www.lcn.com\/support\/","name":"Customer Support Guides - LCN","description":"- LCN","publisher":{"@id":"https:\/\/www.lcn.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lcn.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.lcn.com\/support\/#organization","name":"LCN.com","url":"https:\/\/www.lcn.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg","contentUrl":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/2020\/02\/ZF_-hcc3.jpg","width":461,"height":461,"caption":"LCN.com"},"image":{"@id":"https:\/\/www.lcn.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/lcndotcom","https:\/\/x.com\/lcndotcom"]}]}},"_links":{"self":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":5,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/173\/revisions"}],"predecessor-version":[{"id":1527,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/173\/revisions\/1527"}],"wp:attachment":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/media?parent=173"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-category?post=173"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}