{"id":162,"date":"2020-02-12T10:36:49","date_gmt":"2020-02-12T10:36:49","guid":{"rendered":"https:\/\/www.lcn.com\/support\/knowledge-base\/how-to-style-individual-elements-in-instantsite\/"},"modified":"2020-08-11T08:35:22","modified_gmt":"2020-08-11T08:35:22","slug":"how-to-style-individual-elements-in-instantsite","status":"publish","type":"ht_kb","link":"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/","title":{"rendered":"How to style individual elements in InstantSite"},"content":{"rendered":"\n
\n

Please note:<\/strong>\u00a0This guide is for\u00a0legacy\u00a0InstantSite\u00a0pruchsed\u00a0before the 18th August 2020. If you have our new\u00a0InstantSite\u00a0please see guides specific\u00a0for our new\u00a0builder found\u00a0here<\/a>.<\/span><\/p>\n<\/div>\n\n\n\n

Each element in InstantSite can be individually styled to meet your needs. This guide is designed to show LCN InstantSite<\/a> customers how to style individual elements.<\/p>\n\n

Let\u2019s get started\u2026<\/p>\n\n

Text, Gallery, Form, Map, Embedded Video, Separator<\/h3>\n

Background<\/h4>\n

Not all websites have white backgrounds. The Background<\/strong> option allows you to change the background colour of an element or even add an image as the background.<\/p>\n\n

    \n
  1. Click on the element you\u2019d like to change.<\/li>\n
  2. Click on the Settings<\/strong> icon.<\/li>\n
  3. Click Background<\/strong>.<\/li>\n
  4. To change the background colour;\n
      \n
    • Click the Colour<\/strong> option<\/li>\n
    • Either choose from a predefined colour on the left, or choose a custom colour using the colour picker tool.<\/li>\n<\/ul>\n<\/li>\n<\/br>\n
    • To add a background image;\n
        \n
      • Click Choose image<\/strong><\/li>\n
      • Choose an image from either My images<\/strong>, Template images<\/strong> or Free InstantSite images<\/strong>. If you can\u2019t find an image you like, simply upload your own by clicking Upload image<\/strong> and choosing an image from your computer.<\/li>\n
      • Once you have selected your image, click Confirm<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n

        Alignment<\/h4>\n

        Alignment makes it easier to style your element. You can choose to align your element left, center or right.<\/p>\n

          \n
        1. Click on the element you\u2019d like to change.<\/li>\n
        2. Click on the Settings<\/strong> icon.<\/li>\n
        3. Click Alignment<\/strong>.<\/li>\n
        4. Choose either Align Left<\/strong>, Align Center<\/strong> or Align Right<\/strong>.<\/li>\n<\/ol>\n\n

          Padding<\/h4>\n

          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.<\/p>\n

            \n
          1. Click on the element you\u2019d like to change.<\/li>\n
          2. Click on the Settings<\/strong> icon.<\/li>\n
          3. Click Padding<\/strong>.<\/li>\n
          4. You can add individual padding to the top, bottom, left and right of an element; by clicking on the side you\u2019d like to change and using the slider to increase and decrease the padding.<\/li>\n
          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.<\/li><\/br>\n<\/ol>\n\n
            \n

            Please Note<\/strong> You can choose to apply your padding in px<\/strong> (pixels) or in %<\/strong> (percentage). We\u2019d recommend to use percentage when applying padding, as this will allow the padding to change depending on the device width.<\/span><\/p>\n<\/div>\n\n

            Border<\/h4>\n

            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.<\/p>\n

              \n
            1. Click on the element you\u2019d like to change.<\/li>\n
            2. Click on the Settings<\/strong> icon.<\/li>\n
            3. Click Border<\/strong>.<\/li>\n
            4. You can add an individual border to the top, bottom, left and right of an element; by clicking on the side you\u2019d like to change and then selecting the style, width and colour of the border.<\/li>\n
            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.<\/li>\n<\/ol>\n\n

              Image, Button, Icon<\/h3>\n

              Link<\/h4>\n

              Links can be used to access other content on your website or to link to another page or article on a different website.<\/p>\n

                \n
              1. Click on the element you\u2019d like to change.<\/li>\n
              2. Click on the Settings<\/strong> icon.<\/li>\n
              3. Click Link<\/strong>.<\/li>\n
              4. To link to an external website, click External<\/strong> and then enter the URL of the page you\u2019d like to link to in the URL<\/strong> field.<\/li>\n
              5. To link to an internal page on your InstantSite, click Internal<\/strong> and choose the page you\u2019d like to link to from the Page<\/strong> drop-down.<\/li><\/br>\n<\/ol>\n\n
                \n

                Please Note<\/strong> by default, the page you\u2019re linking to will open in a new browser tab. If you\u2019d prefer to have the page redirect to this link, simply untick the Open link in new tab<\/strong> option.<\/span><\/p>\n<\/div>\n\n

                Background<\/h4>\n

                Not all websites have white backgrounds. The Background<\/strong> option allows you to change the background colour of an element or even add an image as the background.<\/p>\n

                  \n
                1. Click on the element you\u2019d like to change.<\/li>\n
                2. Click on the Settings<\/strong> icon.<\/li>\n
                3. Click Background<\/strong>.<\/li>\n
                4. To change the background colour;\n
                    \n
                  • Click the Colour<\/strong> option<\/li>\n
                  • Either choose from a predefined colour on the left, or choose a custom colour using the colour picker tool.<\/li>\n<\/ul>\n<\/li>\n<\/br>\n
                  • To add a background image;\n
                      \n
                    • Click Choose image<\/strong><\/li>\n
                    • Choose an image from either My images<\/strong>, Template images<\/strong> or Free InstantSite images<\/strong>. If you can\u2019t find an image you like, simply upload your own by clicking Upload image<\/strong> and choosing an image from your computer.<\/li>\n
                    • Once you have selected your image, click Confirm<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n

                      Alignment<\/h4>\n

                      Alignment makes it easier to style your element. You can choose to align your element left, center or right.<\/p>\n

                        \n
                      1. Click on the element you\u2019d like to change.<\/li>\n
                      2. Click on the Settings<\/strong> icon.<\/li>\n
                      3. Click Alignment<\/strong>.<\/li>\n
                      4. Choose either Align Left<\/strong>, Align Center<\/strong> or Align Right<\/strong>.<\/li>\n<\/ol>\n\n

                        Padding<\/h4>\n

                        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.<\/p>\n

                          \n
                        1. Click on the element you\u2019d like to change.<\/li>\n
                        2. Click on the Settings<\/strong> icon.<\/li>\n
                        3. Click Padding<\/strong>.<\/li>\n
                        4. You can add individual padding to the top, bottom, left and right of an element; by clicking on the side you\u2019d like to change and using the slider to increase and decrease the padding.<\/li>\n
                        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.<\/li><\/br>\n<\/ol>\n\n
                          \n

                          Please Note<\/strong> You can choose to apply your padding in px<\/strong> (pixels) or in %<\/strong> (percentage). We\u2019d recommend to use percentage when applying padding, as this will allow the padding to change depending on the device width.<\/span><\/p>\n<\/div>\n\n

                          Border<\/h4>\n

                          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.<\/p>\n

                            \n
                          1. Click on the element you\u2019d like to change.<\/li>\n
                          2. Click on the Settings<\/strong> icon.<\/li>\n
                          3. Click Border<\/strong>.<\/li>\n
                          4. You can add an individual border to the top, bottom, left and right of an element; by clicking on the side you\u2019d like to change and then selecting the style, width and colour of the border.<\/li>\n
                          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.<\/li>\n<\/ol>\n

                            That\u2019s it! You now know how to style all the InstantSite elements.<\/p>\n","protected":false},"excerpt":{"rendered":"

                            Please note:\u00a0This guide is for\u00a0legacy\u00a0InstantSite\u00a0pruchsed\u00a0before the 18th August 2020. If you have our new\u00a0InstantSite\u00a0please see guides specific\u00a0for our new\u00a0builder found\u00a0here. 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\u2019s get started\u2026 Text, Gallery, Form, Map, Embedded Video, […]<\/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-162","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-managing-web-hosting","ht_kb_tag-instantsite"],"yoast_head":"\nHow to style individual elements in InstantSite - LCN.com<\/title>\n<meta name=\"description\" content=\"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.\" \/>\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-style-individual-elements-in-instantsite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to style individual elements in InstantSite - LCN.com\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-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=\"2020-08-11T08:35:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/support-facebook-feed.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"5 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-style-individual-elements-in-instantsite\/\",\"url\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\",\"name\":\"How to style individual elements in InstantSite - LCN.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.lcn.com\/support\/#website\"},\"datePublished\":\"2020-02-12T10:36:49+00:00\",\"dateModified\":\"2020-08-11T08:35:22+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.lcn.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to style individual elements in 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 style individual elements in InstantSite - LCN.com","description":"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.","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-style-individual-elements-in-instantsite\/","og_locale":"en_US","og_type":"article","og_title":"How to style individual elements in InstantSite - LCN.com","og_description":"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.","og_url":"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/","og_site_name":"Customer Support Guides - LCN","article_publisher":"https:\/\/www.facebook.com\/lcndotcom","article_modified_time":"2020-08-11T08:35:22+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.lcn.com\/support\/wp-content\/uploads\/support-facebook-feed.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@lcndotcom","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/","url":"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/","name":"How to style individual elements in InstantSite - LCN.com","isPartOf":{"@id":"https:\/\/www.lcn.com\/support\/#website"},"datePublished":"2020-02-12T10:36:49+00:00","dateModified":"2020-08-11T08:35:22+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.lcn.com\/support\/articles\/how-to-style-individual-elements-in-instantsite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lcn.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to style individual elements in 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\/162","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=162"}],"version-history":[{"count":2,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/162\/revisions"}],"predecessor-version":[{"id":1045,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb\/162\/revisions\/1045"}],"wp:attachment":[{"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-category?post=162"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.lcn.com\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}