{"id":5281,"date":"2025-01-14T10:16:32","date_gmt":"2025-01-14T10:16:32","guid":{"rendered":"https:\/\/www.names.co.uk\/support\/?post_type=ht_kb&#038;p=5281"},"modified":"2025-01-14T10:16:33","modified_gmt":"2025-01-14T10:16:33","slug":"how-to-change-the-background-of-a-section","status":"publish","type":"ht_kb","link":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/","title":{"rendered":"How to Change the Background of a Section"},"content":{"rendered":"\n<div class=\"wp-block-nco-info-block\"><p class=\"nco-info-block-content\"><strong>Info:<\/strong> This article applies to Website Builder purchases made after 14<sup>th<\/sup> January 2025. For further assistance, please contact our support team.<\/p><\/div>\n\n\n\n<p>In the editor, you can <strong>change the background of each section<\/strong>, helping it stand out to visitors. This can also enhance the overall design of your website.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started <\/h2>\n\n\n\n<p>To get started, you first need to log into the web builder through your Online Control Panel. Unsure how to do so? Follow our guide <a href=\"https:\/\/www.names.co.uk\/support\/articles\/how-to-access-your-control-panel\/\">HERE<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step One<\/h2>\n\n\n\n<p>To change the background, hover over the section to reveal the section settings button (gear icon) in the upper right corner. From here, you can choose <strong>Section Background<\/strong> or <strong>Advanced Settings<\/strong>.&nbsp;<\/p>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"219\" src=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289-1024x219.png\" alt=\"\" class=\"wp-image-6095\" srcset=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289-1024x219.png 1024w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289-300x64.png 300w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289-768x164.png 768w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289-50x11.png 50w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289.png 1112w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step Two<\/h2>\n\n\n\n<p>In the Background section, you can choose from the recommended backgrounds or click the <strong>plus <\/strong>button to select a different one or upload your own.&nbsp;<\/p>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"487\" height=\"424\" src=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-36.png\" alt=\"\" class=\"wp-image-5285\" srcset=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-36.png 487w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-36-300x261.png 300w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-36-50x44.png 50w\" sizes=\"auto, (max-width: 487px) 100vw, 487px\" \/><\/figure>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step Three<\/h2>\n\n\n\n<p>Here you can select a background from the gallery or upload your own.&nbsp;<\/p>\n\n\n\n<p>In Advanced settings, you\u2019ll find options for <strong>Content Width<\/strong> and <strong>Decorative Border<\/strong>.&nbsp;<\/p>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"468\" height=\"323\" src=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-37.png\" alt=\"\" class=\"wp-image-5283\" srcset=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-37.png 468w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-37-300x207.png 300w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-37-50x35.png 50w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/figure>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Each section has its own function:&nbsp;<\/p>\n\n\n\n<p><strong>Content width&nbsp;<\/strong><\/p>\n\n\n\n<p>The content width controls the size of elements like forms and photo galleries within the header.&nbsp;<\/p>\n\n\n\n<p><strong>Decorative border<\/strong>&nbsp;<\/p>\n\n\n\n<p>This feature adds a dark border around the title, subheading, and caption located above the title.&nbsp;<\/p>\n\n\n\n<p>Along with the classic sections, you can add heading sections like a <strong>Heading<\/strong> or a <strong>Heading with a button<\/strong>. These sections offer additional setting options, similar to those found in the page header.&nbsp;<\/p>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"472\" src=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-38.png\" alt=\"\" class=\"wp-image-5284\" srcset=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-38.png 582w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-38-300x243.png 300w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-38-50x41.png 50w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/figure>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You can add up to three types of heading (Heading, Subheading, and Title) along with a button, or configure <strong>Advanced settings<\/strong> within the section.&nbsp;<\/p>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"373\" src=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-39-1024x373.png\" alt=\"\" class=\"wp-image-5286\" srcset=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-39-1024x373.png 1024w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-39-300x109.png 300w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-39-768x280.png 768w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-39-50x18.png 50w, https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-39.png 1199w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:1px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Settings<\/h2>\n\n\n\n<p>Clicking <strong>Advanced Settings<\/strong> will display the following options:&nbsp;<\/p>\n\n\n\n<p><strong>Content alignment<\/strong>&nbsp;<\/p>\n\n\n\n<p>Here you set the content alignment within the page header.&nbsp;<\/p>\n\n\n\n<p><strong>Content Width<\/strong>&nbsp;<\/p>\n\n\n\n<p>The content width primarily determines the starting point of the content. For instance, when aligning content to the left, you can specify where the heading begins.&nbsp;<\/p>\n\n\n\n<p><strong>Minimum height<\/strong>&nbsp;<\/p>\n\n\n\n<p>This setting controls the size of the header, allowing you to manage how much of the background image is visible.&nbsp;<\/p>\n\n\n\n<p><strong>Decorative border<\/strong>&nbsp;<\/p>\n\n\n\n<p>This feature enables a dark border around the title, subheading, and the caption located above the title.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-nco-advice-block\"><p class=\"nco-advice-block-content\"><strong>TIP<\/strong>: Page background images can generate data traffic, potentially slowing down your site. We recommend selecting smaller images, particularly for the front and most frequently visited pages.\u00a0<\/p><\/div>\n\n\n\n<p>If you have any further questions, simply&nbsp;<strong><a href=\"https:\/\/admin.names.co.uk\/tech_support\/tracking\/add.php\">raise a support request<\/a><\/strong>&nbsp;from within your Online Control Panel or call us on&nbsp;<strong>0345 363 3634<\/strong>. Our Support team are here to help and ready to assist you with your enquiry.<\/p>\n\n\n\n<p>For assistance raising a support request please follow the following&nbsp;<strong><a href=\"https:\/\/www.names.co.uk\/support\/articles\/how-to-open-a-support-enquiry\/\">guide<\/a>.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the editor, you can change the background of each section, helping it stand out to visitors. This can also enhance the overall design of your website.&nbsp; Getting Started To get started, you first need to log into the web builder through your Online Control Panel. Unsure how to do so? Follow our guide HERE [&hellip;]<\/p>\n","protected":false},"author":28,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[260,154,262],"ht-kb-tag":[153,257],"class_list":["post-5281","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-edit-your-website","ht_kb_category-website-builder","ht_kb_category-website-design","ht_kb_tag-website-builder","ht_kb_tag-xsw"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Change the Background of a Section - Support Centre - names.co.uk<\/title>\n<meta name=\"description\" content=\"Learn how to customise your section backgrounds with ease. Follow our step-by-step guide to create a stunning website.\" \/>\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.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Change the Background of a Section - Support Centre - names.co.uk\" \/>\n<meta property=\"og:description\" content=\"Learn how to customise your section backgrounds with ease. Follow our step-by-step guide to create a stunning website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/\" \/>\n<meta property=\"og:site_name\" content=\"Support Centre - names.co.uk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/namesco\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-14T10:16:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1112\" \/>\n\t<meta property=\"og:image:height\" content=\"238\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@namesco\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/\",\"url\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/\",\"name\":\"How to Change the Background of a Section - Support Centre - names.co.uk\",\"isPartOf\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289-1024x219.png\",\"datePublished\":\"2025-01-14T10:16:32+00:00\",\"dateModified\":\"2025-01-14T10:16:33+00:00\",\"description\":\"Learn how to customise your section backgrounds with ease. Follow our step-by-step guide to create a stunning website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#primaryimage\",\"url\":\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289.png\",\"contentUrl\":\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289.png\",\"width\":1112,\"height\":238},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.names.co.uk\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Change the Background of a Section\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.names.co.uk\/support\/#website\",\"url\":\"https:\/\/www.names.co.uk\/support\/\",\"name\":\"Support Centre - names.co.uk\",\"description\":\"names.co.uk Support Centre\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.names.co.uk\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Change the Background of a Section - Support Centre - names.co.uk","description":"Learn how to customise your section backgrounds with ease. Follow our step-by-step guide to create a stunning website.","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.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/","og_locale":"en_GB","og_type":"article","og_title":"How to Change the Background of a Section - Support Centre - names.co.uk","og_description":"Learn how to customise your section backgrounds with ease. Follow our step-by-step guide to create a stunning website.","og_url":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/","og_site_name":"Support Centre - names.co.uk","article_publisher":"https:\/\/www.facebook.com\/namesco","article_modified_time":"2025-01-14T10:16:33+00:00","og_image":[{"width":1112,"height":238,"url":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@namesco","twitter_misc":{"Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/","url":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/","name":"How to Change the Background of a Section - Support Centre - names.co.uk","isPartOf":{"@id":"https:\/\/www.names.co.uk\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#primaryimage"},"image":{"@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#primaryimage"},"thumbnailUrl":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289-1024x219.png","datePublished":"2025-01-14T10:16:32+00:00","dateModified":"2025-01-14T10:16:33+00:00","description":"Learn how to customise your section backgrounds with ease. Follow our step-by-step guide to create a stunning website.","breadcrumb":{"@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#primaryimage","url":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289.png","contentUrl":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-289.png","width":1112,"height":238},{"@type":"BreadcrumbList","@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-background-of-a-section\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.names.co.uk\/support\/"},{"@type":"ListItem","position":2,"name":"How to Change the Background of a Section"}]},{"@type":"WebSite","@id":"https:\/\/www.names.co.uk\/support\/#website","url":"https:\/\/www.names.co.uk\/support\/","name":"Support Centre - names.co.uk","description":"names.co.uk Support Centre","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.names.co.uk\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"}]}},"_links":{"self":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb\/5281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/comments?post=5281"}],"version-history":[{"count":7,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb\/5281\/revisions"}],"predecessor-version":[{"id":6467,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb\/5281\/revisions\/6467"}],"wp:attachment":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/media?parent=5281"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb-category?post=5281"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=5281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}