{"id":28171,"date":"2020-10-13T10:43:40","date_gmt":"2020-10-13T14:43:40","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=28171"},"modified":"2023-12-07T14:11:33","modified_gmt":"2023-12-07T19:11:33","slug":"how-to-change-backgrounds-in-the-post-and-page-builder","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/page-builder\/how-to-change-backgrounds-in-the-post-and-page-builder\/","title":{"rendered":"How to Change Backgrounds in the Post and Page Builder"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p><img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/boldgrid-ppb-horizontal-image.png\" alt=\"Post and Page Builder logo\"><\/p>\n<p>While it&rsquo;s perfectly acceptable to use a single background color for your entire <a href=\"https:\/\/www.boldgrid.com\/\">WordPress website<\/a>, we recommend exploring designs with multiple backgrounds to help organize and break up content.<\/p>\n<p>Varied backgrounds and content give your viewers something interesting to look at on the page, which increases the time they will spend on your site. On average, you only have 15 seconds to convince a new visitor to stay on your site and consume your content. Having a dynamic background design helps make the best first impression and hook those valuable visitors.<\/p>\n<h2 id=\"how-to-change-backgrounds-in-the-post-and-page-builder\">How to Change Backgrounds in the Post and Page Builder<\/h2>\n<p>The Post and <a href=\"https:\/\/www.boldgrid.com\/wordpress-page-builder-by-boldgrid\/\">Page Builder plugin<\/a> provides an easy way to swap out backgrounds. Using the DropTab, you can change the background for the Section, Row, Column, or Column Shape you are currently in. The available options will vary depending on if you are using our BoldGrid theme <a href=\"https:\/\/www.boldgrid.com\/crio-wordpress-theme-for-business\/\">Crio<\/a>, or another theme.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/background-options.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47846\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/background-options.png\" alt=\"Post and Page Builder DropTab Background\" width=\"400\" height=\"216\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/background-options.png 400w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/background-options-300x162.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<h2 id=\"background-options-for-boldgrid-crio\">Background Options for BoldGrid Crio<\/h2>\n<p><em>To see the updated control, you need to use Post and Page Builder version 1.25 or later.<\/em><\/p>\n<p><iframe loading=\"lazy\" title=\"Post and Page Builder - Working with Backgrounds\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/xNJEUtWvD2w?list=PLqNQzP6vlTnyuqeSu3aXcQCXknzkTxCN1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h3 id=\"use-a-solid-background-color\">Use a Solid Background Color<\/h3>\n<p>The active color palette set in the Crio Customizer show in the <strong>Theme Colors<\/strong> section. You can use the top slider and color picker to select any color you want, or input the desired HEX or RGB values. The bottom slider is an alpha slider to adjust opacity. If you start with a theme color and change the opacity, it will update if you change that color in the Customizer.<\/p>\n<p>Above the sliders are several helpful tools &ndash; a <strong>Eye Dropper<\/strong> color picker, <strong>Advanced Controls<\/strong> to adjust Saturation, Lightness, and Brightness, and a <strong>Color Guide<\/strong> that shows complimentary colors.<\/p>\n<p>If you want to save a color for future use, click the <strong>+ icon<\/strong> below the active color box. This color will then be available whenever you open a color control. To delete a saved color, right click on the color in the Saved Colors row.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2023\/08\/ppb-background-color.png\" alt=\"Post and Page Builder Crio Color Background Control\"><\/p>\n<h3 id=\"use-a-gradient-background\">Use a Gradient Background<\/h3>\n<p>If you want a more dynamic color background, you can use a gradient. <strong>Linear<\/strong> and <strong>Radial<\/strong> options are available and you can have as many stops as you need. Adjust the angle by typing in the new number you want to use. The trash icon will delete stops.<\/p>\n<p>The top slider controls the gradient itself. Click on each stop to change the color. Click anywhere on the slider to add a new stop. Once a stop is selected, you can type in the exact stop location if needed. The middle slider controls the color and the bottom slider controls the opacity.<\/p>\n<p><em>Please note that Gradients cannot be saved to Saved Colors.<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2023\/08\/ppb-background-gradient.png\" alt=\"Post and Page Builder Crio Gradient Background Control\"><\/p>\n<h3 id=\"use-a-background-image\">Use a Background Image<\/h3>\n<p>The second option in the Background Panel is for an image. Click the <strong>Add Image<\/strong> button to open the Media Library to choose an existing image in your WordPress install or upload a new one. If you want to add a color or gradient overlay, toggle the <strong>Overlay Effect<\/strong> and navigate back to the Background Color panel to choose the desired color. Be sure to adjust the opacity slider so the image shows.<\/p>\n<p>You can also change the <b>Vertical Position<\/b> of the image on the page, <b>Background Size<\/b> (Cover Area or Tiled), and choose a <b>Scroll Effect<\/b> (Parallax or Fixed) if desired. <em>Please note that Overlay Effects do not work in Parallax images at this time.<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2023\/08\/ppb-background-image.png\" alt=\"Post and Page Builder Crio Image Background Control\"><\/p>\n<h3 id=\"use-a-hover-box\">Use a Hover Box<\/h3>\n<p>If you want the background to change when the user moves their mouse over an area, you an use a <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/hover-boxes\/\">Hover Box<\/a>.<\/p>\n<h2 id=\"background-options-for-other-themes\">Background Options for Other Themes<\/h2>\n<h3 id=\"use-a-background-color\">Use a Background Color<\/h3>\n<p>The colors shown here include the active color palette and several gradients. To use a different color, click the box next to the paint brush icon in the Custom Color row to open a color picker with opacity slider.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-color-background.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28173\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-color-background.png\" alt=\"Post and Page Builder Color Background\" width=\"300\" height=\"321\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-color-background.png 408w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-color-background-280x300.png 280w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Default gradients can be customized by clicking the Settings button at the top of the panel.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradientr-background.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28176\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradientr-background-e1602597375364.png\" alt=\"Post and Page Builder Gradient Background\" width=\"300\" height=\"282\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradientr-background-e1602597375364.png 407w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradientr-background-e1602597375364-300x282.png 300w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>From here you can select two colors to use in the gradient, and if the colors should blend horizontally (side to side) or vertically (up and down).<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradient-background-settings-e1602597407609.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28175\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradient-background-settings-e1602597407609.png\" alt=\"Post and Page Builder Gradient Background Settings\" width=\"300\" height=\"427\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradient-background-settings-e1602597407609.png 407w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-gradient-background-settings-e1602597407609-211x300.png 211w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h3 id=\"use-a-background-image\">Use a Background Image<\/h3>\n<p>The Post and Page Builder includes some stock photos suitable for any website, or click the Add Media button to open the Media Library and select your own. To further customize any image background, click the Settings button at the top of the panel.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-e1602599716960.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28177\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-e1602599716960.png\" alt=\"Post and Page Builder Image Background\" width=\"300\" height=\"445\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-e1602599716960.png 407w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-e1602599716960-202x300.png 202w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>From here you can change the <b>Vertical Position<\/b> of the image on the page, <b>Image Size<\/b> (Cover Area or Tiled), and choose a <b>Scroll Effect<\/b> (Parallax or Fixed) if desired.<\/p>\n<p>Setting the vertical position to 0 will show the top of the image at the top of its container, and setting it to 100 will show the bottom of the image at the bottom of its container. In both cases the height of the image will be determined by the size of the container it is in. By default, the Vertical Height is set to 50 and the image centers in the height of the container.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-overlay.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28179\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-overlay.png\" alt=\"Post and Page Builder Image Background Overlay\" width=\"300\" height=\"576\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-overlay.png 408w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background-overlay-156x300.png 156w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>You can also set an overlay color to help with text contrast on your site. Click the box under the paint brush to open the color picker with an opacity slider to choose your desired color. After clicking the Back button at the top of the panel, the color overlay will show in the image previews at the top of the panel.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background2-e1602597529855.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28178\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background2-e1602597529855.png\" alt=\"Image preview shows overlay\" width=\"300\" height=\"409\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background2-e1602597529855.png 407w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-image-background2-e1602597529855-220x300.png 220w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h3 id=\"use-a-background-pattern\">Use a Background Pattern<\/h3>\n<p>The Post and Page Builder includes over 200 patterns to choose from, and any color can be applied to them. Use the box next to the paint brush icon in the Custom Color row to select any color and opacity.<\/p>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-pattern-background.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-28180\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-pattern-background.png\" alt=\"Post and Page Builder Pattern Background\" width=\"300\" height=\"576\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-pattern-background.png 408w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2020\/10\/post-page-builder-pattern-background-156x300.png 156w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"heading-font branded\" style=\"font-weight: 20px;\">Congratulations!<\/span><br>\nYou should have a better understanding of how to change backgrounds in the Post and Page Builder. Next, you may want to learn <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/saving-blocks\/\">how to add and save BoldGrid Blocks<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>While it&rsquo;s perfectly acceptable to use a single background color for your entire WordPress website, we recommend exploring designs with multiple backgrounds to help organize and break up content. Varied backgrounds and content give your viewers something interesting to look at on the page, which increases the time they will spend on your site. On [&hellip;]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to Change Backgrounds in the Post and Page Builder","bgseo_description":"Wondering how to change backgrounds in the Post and Page Builder? Our WordPress Page Builder plugin provides an easy way to swap out backgrounds. While it\u2019s ok to use a single background color for your entire website, we recommend exploring designs with multiple backgrounds to help organize content.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[],"class_list":["post-28171","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/28171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=28171"}],"version-history":[{"count":19,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/28171\/revisions"}],"predecessor-version":[{"id":120952,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/28171\/revisions\/120952"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=28171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=28171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=28171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}