Need a hand? Get the answers you’re looking for within our easy-to-follow support guides

How to access InstantSite

Welcome to InstantSite. This guide is designed to show LCN InstantSite customers how to access their InstantSite Editor. Let’s get started… Log in to LCN account. Click the Hosting icon from the My Account page of your account. Click Manage site next to your domain name. Click Launch Editor. That’s it! You’ve successfully logged into your InstantSite editor. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

How to preview & publish in InstantSite

This guide will show LCN InstantSite customers how to preview and publish their website. Let’s get started… Previewing your InstantSite It’s useful to be able to preview your site and check how it looks before it goes live. It also provides a chance test the site on mobile and various screen sizes (all InstantSite templates are mobile optimised). To activate one of these previews: Login to the InstantSite control editor. Click Preview in the top right-hand side and click view preview. Please note: A new tab will open showing your site. Only you will be able to see the changes made on this site until the InstantSite is published. Publishing your InstantSite Once you finished designing or making changes to your website, it’s time to share your creation with the world. Make sure you preview your InstantSite before publishing to make sure everything is working correctly, then when you’re ready, follow the instructions below to publish your InstantSite. Login to the InstantSite editor. Click Publish in the top right-hand side. Please note: All changes made in the editor before publishing will become live on the site. If you notice you’ve made a mistake, or would like to roll back your changes; use the undo/redo options in the InstantSite control panel and then publish the site again once the changes have been undone. That’s it! You now know how to preview and publish your InstantSite. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite Understanding Rows & Columns in InstantSite

Understanding Rows & Columns in InstantSite

table { border-spacing: 0; border-collapse: collapse; } .table-responsive { text-align: center; } table.grid td { border: 4px solid white; padding: 6px; } InstantSite is designed using the Bootstrap framework. This allows your site to be responsive to different screen sizes and devices. It’s important to understand the differences between rows and columns in InstantSite and how these are used to ensure your site looks correct in a desktop and mobile environment. Bootstrap Grid System. Bootstrap’s grid system allows you to add up to 12 columns across each row on the page. If you don’t want to use all 12 columns individually, you can use a collection of columns together. Below is an example of the groups of columns that can be used: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1  span 4  span 4  span 4 span 4 span 8 span 6 span 6 span 12 When adding a new element to InstantSite, it automatically creates a container, row and column. The container is simply the box that hold your row. The row is a 12-column bootstrap grid as described above; The column is what holds the element you have added to the page. A column can span anywhere between the 1 and 12 spaces allowed in the 12-column bootstrap grid. The element can then be sized within this column to either be full width or a portion of the 12 columns available. Why Columns and Rows are important When creating your website, you want your content layout to look professional on any device. There’s little point making your website look amazing on a desktop if it is barely usable on mobile. Bootstrap allows a websites design to become responsive despite of the device it’s viewed on. It does this using the 12-column bootstrap grid system described above. For more information about how Bootstrap grids work to make your content responsive, visit getbootstrap.com Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

How to change global fonts and colours on InstantSite

Global styling is used to bulk-change background colours, accent colours, font colours and font styles. This guide is designed to show LCN InstantSite customers how to change the global styling of their site. Let’s get started… Colours Colours are arguably the most important aspect of a website. InstantSite allows you to change the Brand Colour, Background Colour and Default Font Colour in just a few clicks. Login to the InstantSite editor. In the left-hand panel, click Design Settings Click Colours. Click the drop-down colour box next to the option you’d like to change and choose a new colour. Please note: the colour will automatically adjust on the screen in real time. Fonts Picking the right font is an essential part of creating the right look and feel for your website. InstantSite allows you to change your default Heading Font, Nav Font, Generic Font and Font Size in just a few clicks. Login to the InstantSite editor. In the left-hand panel, click Design Settings Click Fonts. Click the drop down menu next to the option you’d like to change and choose a new font. Please note: the font will automatically adjust on the screen in real time. To change the global base font size, simply drag the slider under Base Font Size to the size you require. That’s it! You’ve changed your site colours and fonts in InstantSite. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

How to choose an InstantSite template.

Getting started on InstantSite couldn't be easier. Simply choose a template that you like and start editing, it’s that simple. If you’ve already started designing don’t worry, you can also change your existing template by following this guide. Let’s get started… Login to the InstantSite editor. Click Preview under each template to see a larger preview. Once you’ve found your perfect template, click Select followed by Continue, to start editing. That’s it! You’ve successfully chosen your InstantSite template. Please Note: Your template is the basic layout of your site. Most of the elements on each template can be customised to your needs. When choosing a template, it’s important to consider the logo, navigation and social media icon positions. These elements can all be customised, but can’t be moved. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

How to use the text editor in InstantSite.

The InstantSite text editor allows you to add rich text elements to your website. To start using the text editor, simply login to the InstantSite editor click the text you want to edit and the text editor will appear. If you’re looking to learn more about a specific section of the text editor, you can choose from the sections below: Format Bold Italics Underline Align Link Font Size Font Family Font Colour Line Lists Tables Icons Let’s get started… Format The format option is used to automatically format your text to a pre-defined layout. When clicking on the Format icon a drop down menu will appear containing the following options: Normal text Quote Code Heading1 Heading2 Heading3 Heading4 Heading5 These work just like the formatting options in popular text editors such as Microsoft Word. The format option allows you to quickly and easily manage the way your websites headers, titles and text appears. Bold Bold test is often used to emphasise a word in a sentence You get this by hovering over the text you want to make bold and click the Bold icon Italics Italics are used to more subtly emphasise words in a sentence. To make your text appear in italics, hover over the text and click the Italics icon Underline The underline option in the text editor allows you to underline your text elements. Hover over the text you want to underline and click the Underline icon to achieve the effect. Align The Align option is used to align text. Text can be aligned Left, Right, Centre or Justify. Hover over the text you want to align and click the Align icon Link Links or hyperlinks are used to link to other relevant pages on your website, or to link to another website. The Link option is used to add a link to a word or sentence. Add an External link: Select the text you would like to link. Click the Link icon Click Insert link. To add a link to an external site, click External. Enter the URL of the page you would like the link to link to. Tick if you want to Open link in new tab. Click Insert. Add an Internal link: Select the text you would like to link. Click the Link icon Click Insert link. To add a link to an external site, click Internal. Select the page you would like to link to from the Page drop down. Tick if you want to Open link in new tab. Click Insert. Font Size The Font Size option is used to change font sizes of different text elements. Simply click the Font Size icon and select the font size you’d like from the drop down menu. Font Family The Font Family option is used to change your font type. Simply click the Font Family icon and select the font of your choice from the drop down. Font Colour Changing the colour of your InstantSite font couldn't be easier! Simply select the text you want to change, click the Font Colour icon and select the colour you’d like to use. Always make sure your selected font colour is easily distinguished from your site background colour. Lines A line is a great tool to separate a body of text and make your web page more readable. The line option in InstantSite allows you to add a horizontal line across the entire text element. To add a line, simply place the cursor just before where you’d like the line and click the Line icon Lists Whether listing products or services, making a step by step guide or organisation your content, a list can be a useful addition to your site. InstantSite provides two types of lists; Ordered lists Unordered lists Ordered List: By default ordered lists will be shown in numeric categories, for example: 1, 2, 3,. Adding an ordered list to InstantSite is simple. Hover over the text you would like to turn into a list. Click the Lists icon Select Ordered List. Please note: The text will automatically be added to a list that breaks to a new number on each new line. If you would like to Indent or Outdent your list, simply click the Lists icon and select either Outdent or Indent. Unordered List: By default, unordered lists will be shown with bullet points. Adding an unordered list to InstantSite is simple. Hover over the text you would like to list. Click the Lists icon Select Unordered List. If you would like to Indent or Outdent your list, simply click the Lists icon and select either Outdent or Indent. Tables To add a Table to your InstantSite, simply click where you would like your table, click the Table icon and select Insert table. By default, a table with 3 columns and 2 rows will be added. Columns, rows, and header rows can all be added and removed from your table by following the instructions below: Adding and removing rows To add a new row to your table: Click on your table Click the Table icon Select Insert row above or Insert row below, depending on where you want your new row. To remove a row from your table: Click on the row you’d like to remove from your table Click the Table icon Select Delete row. Adding and removing columns To add a new column to your table: Click on your table Click the Table icon Select Insert column left or Insert column right, depending on where you want your new row. To remove a column from your table: Click on the column you’d like to remove from your table Click the Table icon Select Delete column. Adding and removing header rows A header row is a title section for your table. By default, it will cover the entire width of your table and will be styled with a dark grey background. To add a header to your table; Click on your table Click the Table icon Select Add head. To remove a header from your table: Click on your table Click the Table icon Select Delete head. Icons InstantSite provides two ways to add icons; either via the Icon element, or via the Icons option in the text editor. To add Icons using the text editor: Click where you’d like to add your icon. Click the Icons icon Either scroll through the list of options or search for your icon in the Search for icons field. Click the icon you would like to add. Click Insert. That’s it! You now know how to use the text editor in InstantSite. Related guides Getting started with InstantSite How to style individual elements in InstantSite Understanding Rows & Columns in InstantSite How to preview & publish in InstantSite

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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Text from the drop-down menu. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. 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. Please note:For more information about how the text editor works and the customisation it offers, visit our How to use the text editor in InstantSite guide. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Image from the drop-down. 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. Once you have selected your image, click Add to page. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click gallery from the drop-down. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. Click Add image from within the gallery element. 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. Once you have selected all the images you’d like in the gallery, click Confirm. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Form from the drop-down. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. The name of each field can be changed by double clicking on the text. 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. 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. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Button from the drop-down. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. You can resize your button by simply clicking and dragging the green border around the button element. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Map from the drop-down. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. 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. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Embedded Video from the drop-down. 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> From the Aspect ratio drop-down, select either 16:9 or 4:3. Please note: 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. Click Confirm to add your embedded video. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Icon from the drop-down. Look for icon you want to add from the list provided and click Confirm. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. 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. Login to the InstantSite editor. In the left hand panel, click the Plus . Click Separator from the drop-down menu. 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. Please note: For more information on how rows and columns work in InstantSite, visit our Understanding Rows and Columns in InstantSite guide. That’s it! You now know how all the InstantSite element work and how to add them. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

How to add and remove pages and change settings in InstantSite

As your business grows, so will your website. Adding pages, removing them, and changing settings on your InstantSite is simple. If you’re just looking to do one of the above, you can use the links below to jump to the specific section: Adding an InstantSite Page Changing an InstantSite Page Settings Removing an InstantSite Page Let’s get started… Adding a Page You can add a new page in just two clicks once you’ve logged in! Login to the InstantSite editor. Click the Page drop down menu from the top of the page. Click Add New Page. Please note: The new page will automatically open and be added to the navigation bar. To rename your new page, click the Page drop down menu at the top of the page. Click the Rename icon In the field provided, enter your new page name. Click the green tick to save. Changing Page Settings Page settings are used to add Meta information to your page. Metadata will not be displayed on the page, but will be seen by search engines when crawling your site. Meta elements are typically used to specify page descriptions, keywords, titles, and other metadata. Login to the InstantSite editor. In the left-hand panel, click Page Settings In the Title field, enter the title of your page. For example: LCN.com: Domains, Hosting, Cloud Servers, and SSL In the Description field, enter the description of your page. For example: “Great prices and amazing UK support are just some of the reasons why over 200000 customers choose us when they need web hosting and domain names.” You can also add any additional meta tags in the Custom meta tags section. Simply add your custom meta tag and click the plus icon. . For example: <meta name="keywords" content="LCN,Domains,Hosting,Cloud Servers, SSL"> Removing a page You can remove pages from your site once you’ve logged in with two simple clicks. Login to the InstantSite editor. Click the Page drop down menu from the top of the page. Click the Delete Page icon . Please note: The page will automatically close and will be removed from the navigation bar. That’s it! You can now add and remove pages and change page settings in InstantSite. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

How to adjust your Site settings using InstantSite

Your site settings are used to change your company information, logo and social icons across your entire site. This guide is designed to show LCN InstantSite customers how to adjust their Site settings using InstantSite. If you are looking to edit a specific section of the site settings, you can choose the section below: Info Logo Social Icons Let’s get started… Info / Site Information Login to the InstantSite editor. At the top of the page, click the cog . Click Info from the drop-down menu. Fill in each field with your relevant company information, for example: Site Name: LCN Address: Units H, J, K, Gateway 1000, Whittle Way, Stevenage, Hertfordshire, SG1 2FP, UK Phone number: 01438 342 490 Email: example@lcn.com If you don’t want any of these fields visible on the website, click visible next to each field to toggle these options on and off. Logo Login to the InstantSite editor. At the top of the page, click the cog . Click Logo from the drop-down. Click Change image. 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. Once you have selected your image, click Confirm. Your image will automatically be added to the logo section of your InstantSite template. Please note: If you do not want a logo to be visible on the website, click visible to toggle your logo on and off. Social Icons Login to the InstantSite editor. At the top of the page, click the cog . Click Social Icons from the drop-down. You can choose to show your Social Icons on the header and footer of your website. Simply click the box next to Show in header and Show in footer to toggle the Social icons on and off. Enter your social media addresses into each relevant box. For example: Facebook: https://www.facebook.com/lcndotcom Twitter: https://twitter.com/lcndotcom That’s it! You’ve successfully completed your Site Settings for your InstantSite. Please Note: If you don’t want a Social Icon visible on your website, simply leave the field blank and that Social Icon will not be visible on the website. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

How to change an InstantSite template

Changing your InstantSite template is simple. This guide is designed for customers who have already started using InstantSite and would like to change their template. If you haven’t started designing your InstantSite, you can find out how to choose a template by following our How to choose an InstantSite template guide. Let’s get started… Changing an InstantSite template Login to the InstantSite editor. At the top of the page, click the cog . Choose Open template library from the bottom of the dropdown. Once you have found your perfect template, click Select followed by Continue, to start editing the template. That’s it! You’ve successfully chosen your InstantSite template. Please Note: Your template is the basic layout of your site. Most of the elements on each template can be customised to your needs. When choosing a template, it’s important to consider the logo, navigation and social media icon positions. These elements can all be customised, but cannot be moved. Related guides Getting started with InstantSite How to style individual elements in InstantSite How to use the text editor in InstantSite How to preview & publish in InstantSite

Getting started on InstantSite

Welcome to InstantSite. InstantSite is a drag and drop website builder created and hosted by LCN to make website design simple. The InstantSite editor is designed to be as easy as possible for non technical users to build their own website in minutes. Although we have made the InstantSite editor easy to use, we have also provided support guides to walk you though the whole process from accessing InstantSite to publishing your first live website. By following our InstantSite guide in the order laid out below, you'll get set up and learn how to use InstantSite in the fastest possible way. Get stuck in and start learning about InstantSite now! How to access InstantSite How to choose an InstantSite template How to adjust your site settings How to add, remove and change page settings How to change global fonts and colours Understanding row and column How to add an element How to use the text editor How to preview and publish your InstantSite That's it! You're now ready to build your own InstantSite.

How to style individual elements in InstantSite

Each element in InstantSite can be individually styled to meet your needs. This guide is designed to show LCN InstantSite customers how to style individual elements. Let’s get started… Text, Gallery, Form, Map, Embedded Video, Separator Background Not all websites have white backgrounds. The Background option allows you to change the background colour of an element or even add an image as the background. Click on the element you’d like to change. Click on the Settings icon. Click Background. To change the background colour; Click the Colour option Either choose from a predefined colour on the left, or choose a custom colour using the colour picker tool. To add a background image; Click Choose image 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. Once you have selected your image, click Confirm. Alignment Alignment makes it easier to style your element. You can choose to align your element left, center or right. Click on the element you’d like to change. Click on the Settings icon. Click Alignment. Choose either Align Left, Align Center or Align Right. Padding Padding allows you to generate space around your content (inside of your border). This allows you to position an element and its content exactly where you want it. Click on the element you’d like to change. Click on the Settings icon. Click Padding. You can add individual padding to the top, bottom, left and right of an element; by clicking on the side you’d like to change and using the slider to increase and decrease the padding. You can add padding to all sides at once; by clicking on the center of the padding option and using the slider to increase and decrease the padding. Please note: You can choose to apply your padding in px (pixels) or in % (percentage). We’d recommend to use percentage when applying padding, as this will allow the padding to change depending on the device width. Border The border option allows you to add and change the width of a border. It also allows you to round the edges of your borders using border radius. Click on the element you’d like to change. Click on the Settings icon. Click Border. You can add an individual border to the top, bottom, left and right of an element; by clicking on the side you’d like to change and then selecting the style, width and colour of the border. You can also add borders to all sides at once; by clicking on the center of the border option and then selecting the style, width and colour of the borders. Image, Button, Icon Link Links can be used to access other content on your website or to link to another page or article on a different website. Click on the element you’d like to change. Click on the Settings icon. Click Link. To link to an external website, click External and then enter the URL of the page you’d like to link to in the URL field. To link to an internal page on your InstantSite, click Internal and choose the page you’d like to link to from the Page drop-down. Please note: by default, the page you’re linking to will open in a new browser tab. If you’d prefer to have the page redirect to this link, simply untick the Open link in new tab option. Background Not all websites have white backgrounds. The Background option allows you to change the background colour of an element or even add an image as the background. Click on the element you’d like to change. Click on the Settings icon. Click Background. To change the background colour; Click the Colour option Either choose from a predefined colour on the left, or choose a custom colour using the colour picker tool. To add a background image; Click Choose image 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. Once you have selected your image, click Confirm. Alignment Alignment makes it easier to style your element. You can choose to align your element left, center or right. Click on the element you’d like to change. Click on the Settings icon. Click Alignment. Choose either Align Left, Align Center or Align Right. Padding Padding allows you to generate space around your content (inside of your border). This allows you to position an element and its content exactly where you want it. Click on the element you’d like to change. Click on the Settings icon. Click Padding. You can add individual padding to the top, bottom, left and right of an element; by clicking on the side you’d like to change and using the slider to increase and decrease the padding. You can add padding to all sides at once; by clicking on the center of the padding option and using the slider to increase and decrease the padding. Please note: You can choose to apply your padding in px (pixels) or in % (percentage). We’d recommend to use percentage when applying padding, as this will allow the padding to change depending on the device width. Border The border option allows you to add and change the width of a border. It also allows you to round the edges of your borders using border radius. Click on the element you’d like to change. Click on the Settings icon. Click Border. You can add an individual border to the top, bottom, left and right of an element; by clicking on the side you’d like to change and then selecting the style, width and colour of the border. You can also add borders to all sides at once; by clicking on the center of the border option and then selecting the style, width and colour of the borders. That’s it! You now know how to style all the InstantSite elements. Related guides Getting started with InstantSite How to choose an InstantSite template How to use the text editor in InstantSite How to preview & publish in InstantSite

Need a hand? Search over a hundred step-by-step support guides