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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Background.
4. 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.


5. 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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Alignment.
4. 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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Padding.
4. 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.
5. 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.

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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Border.
4. 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.
5. 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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Link.
4. 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.
5. 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.

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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Background.
4. 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.


5. 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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Alignment.
4. 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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Padding.
4. 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.
5. 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.

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.

1. Click on the element you’d like to change.
2. Click on the Settings icon.
3. Click Border.
4. 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.
5. 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.