How to style individual elements in InstantSite
Please note: This guide is for legacy InstantSite pruchsed before the 18th August 2020. If you have our new InstantSite please see guides specific for our new builder found here.
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.