{"id":7471,"date":"2025-02-09T23:24:48","date_gmt":"2025-02-09T23:24:48","guid":{"rendered":"https:\/\/tableberg.com\/?p=7471"},"modified":"2025-02-09T23:24:48","modified_gmt":"2025-02-09T23:24:48","slug":"comment-changer-la-couleur-de-fond-dun-bloc-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/","title":{"rendered":"Comment changer la couleur d'arri\u00e8re-plan d'un bloc dans WordPress"},"content":{"rendered":"\n<p>If you want to create a visually pleasing WordPress website, changing the background colors can help you highlight important content, create a clear visual hierarchy, and make your site more engaging. However, with so many blocks available in the WordPress Block Editor, it can be confusing to figure out how to change the background color for each one.<\/p>\n\n\n\n<p>While some blocks come with built-in background color settings, others require a slightly different approach. The good news is that most WordPress core blocks support native background color customization, and for those that don\u2019t, there are simple workarounds like the Group block and Cover block.<\/p>\n\n\n\n<p>In this guide, we\u2019ll walk you through three easy methods so you can confidently style any block on your site. We\u2019ll cover blocks that support direct color changes, show how to use the Group block and explore the Cover block for advanced designs like hero sections and banners. Let\u2019s get started.<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" style=\"max-width: -moz-fit-content; \" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents ub_table-of-contents-collapsed\" id=\"ub_table-of-contents-2a7461a2-d0c1-4bca-bb5d-2bec3d85e961\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"false\"><div class=\"ub_table-of-contents-header-container\" style=\"background-color: #DEC9FF; \">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\"><strong>Change the Background Color of a Block<\/strong><\/div>\n\t\t\t\t<div class=\"ub_table-of-contents-header-toggle\">\n\t\t\t<div class=\"ub_table-of-contents-toggle\" style=\"\">\n\t\t\t\u00a0[<a class=\"ub_table-of-contents-toggle-link\" href=\"#\" style=\"background-color: #DEC9FF; \">show<\/a>]\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column ub-hide\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#0-method-1-direct-background-color-native-support-\" style=\"\">Method 1: Direct Background Color (Native Support)<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#1-step-1-select-the-block-\" style=\"\">Step 1: Select the Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#2-step-2-open-the-block-settings-sidebar-\" style=\"\">Step 2: Open the Block Settings Sidebar<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#3-step-3-adjust-the-background-color-\" style=\"\">Step 3: Adjust the Background Color<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#4-applies-to-\" style=\"\">Applies to<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#5-notes-\" style=\"\">Notes<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#6-method-2-wrap-in-a-group-block-\" style=\"\">Method 2: Wrap in a Group Block<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#7-step-1-identify-and-target-the-specific-block-\" style=\"\">Step 1: Identify and Target the Specific Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#8-step-2-group-the-block-\" style=\"\">Step 2: Group the Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#9-step-3-select-the-group-block-\" style=\"\">Step 3: Select the Group Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#10-step-4-apply-the-background-color-\" style=\"\">Step 4: Apply the Background Color<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#11-step-5-adjust-spacing-optional-\" style=\"\">Step 5: Adjust Spacing (Optional)<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#12-applies-to-\" style=\"\">Applies to<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#13-notes-\" style=\"\">Notes<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#14-method-3-use-a-cover-block-\" style=\"\">Method 3: Use a Cover Block<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#15-step-1-add-a-cover-block-\" style=\"\">Step 1: Add a Cover Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#16-step-2-choose-a-background-color-\" style=\"\">Step 2: Choose a Background Color<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#17-step-3-insert-content-inside-the-cover-block-\" style=\"\">Step 3: Insert Content Inside the Cover Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#18-applies-to-\" style=\"\">Applies to<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#19-notes-\" style=\"\">Notes<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/fr\/how-to-change-the-background-color-of-a-block-in-wordpress\/#20-summary-table-blocks-amp-methods-\" style=\"\">Summary Table: Blocks &amp; Methods<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-1-direct-background-color-native-support-\"><strong>Method 1: Direct Background Color (Native Support)<\/strong><\/h2>\n\n\n\n<p>Many WordPress core blocks come with native support for background color changes. This means you can directly apply colors without adding extra blocks or custom code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-1-select-the-block-\"><strong>Step 1: Select the Block<\/strong><\/h3>\n\n\n\n<p>Start by clicking on the block you want to customize within the editor. This will activate the block, and its settings will appear in the <strong>Block Settings<\/strong> panel on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.1-1024x468.png\" alt=\"Select the Block\" class=\"has-border-color wp-image-7482\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.1-1024x468.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.1-300x137.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.1-768x351.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.1-1536x702.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.1.png 1681w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-2-open-the-block-settings-sidebar-\"><strong>Step 2: Open the Block Settings Sidebar<\/strong><\/h3>\n\n\n\n<p>If the settings panel isn\u2019t already visible, click the <strong>Settings<\/strong> button located at the topmost corner on the right side of the editor. Under the <strong>Block Settings<\/strong> panel, locate the <strong>Styles<\/strong> section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"434\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.2-1024x434.png\" alt=\"Open the Block Settings Sidebar\" class=\"has-border-color wp-image-7483\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.2-1024x434.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.2-300x127.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.2-768x325.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.2-1536x651.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.2-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.2.png 1674w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-3-adjust-the-background-color-\"><strong>Step 3: Adjust the Background Color<\/strong><\/h3>\n\n\n\n<p>From the Styles settings panel, you will find the <strong>Color<\/strong> section. Under <strong>Color Settings<\/strong>, find <strong>Background<\/strong>. Now, just choose a color from the palette, work with the color picker, or enter a custom HEX\/RGB\/HSL code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"436\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.3-1024x436.png\" alt=\"Adjust the Background Color\" class=\"has-border-color wp-image-7484\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.3-1024x436.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.3-300x128.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.3-768x327.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.3-1536x653.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.3-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/1.3.png 1890w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-applies-to-\"><strong><strong>Applies to<\/strong><\/strong><\/h3>\n\n\n<ul style=\"padding-left: 0.9em; text-align: left; --ub-list-item-icon-top: 0px;; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-cd4cd146-b231-4a89-ac40-ad41752c2a96\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-0818494c-07ad-486a-9e74-0366b5a142bd\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Text &amp; Content Blocks<\/strong>: Paragraph, Heading, List, Quote, Pullquote, Code, Preformatted, Verse<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-906d37ae-bc38-4313-a3fe-a43c7b4f23d8\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Layout Blocks<\/strong>: Group, Columns, Cover, Media &amp; Text<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-c83ca131-a7a1-48a9-915e-a77489da0e06\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Interactive\/Widget Blocks<\/strong>: Buttons, Calendar, Latest Posts, Categories, Tag Cloud, Social Icons, Navigation, File, Audio, Video, RSS, Search, Login\/Out, Page List<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-2aa4aa61-c500-460b-909f-ed970625518c\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Site\/Post Blocks<\/strong>: Site Title, Site Tagline, Post Title, Post Content, Post Excerpt, Post Date, Post Author, Post Categories, Post Tags, Comments, Next\/Previous Post, Read More<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-ea0c7f31-f5fc-4eb6-a8a8-a78e17506bdb\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Utility Blocks<\/strong>: Spacer (limited), Separator (limited), Table (entire table only).\u00a0<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"5-notes-\"><strong>Notes<\/strong><\/h3>\n\n\n<ul style=\"padding-left: 0.9em; text-align: left; --ub-list-item-icon-top: 0px;; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-9d391933-9a62-4fe8-a9e4-86de41c518a2\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-5f18ef2e-3708-4a63-9771-23f2dc96f7d3\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Cover Block:<\/strong> Instead of a background, you\u2019ll find the Overlay option. You can adjust overlay color along with opacity settings for layered effects.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-17d3f902-30f9-4095-b6e4-d8e70fba62b6\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Buttons Block:<\/strong> The background color applies to the button itself, while the text color option changes the button\u2019s text.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-d3508843-4101-42ad-abc6-f5ae38f77557\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Social Icons:<\/strong> The background color affects the icon container only.\u00a0<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-477ed6df-5bc7-4edd-bf7a-ccf881365e93\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Table Block<\/strong>:<\/span>\n\t\t\t<\/div>\n\t\t\t\n<ul style=\"padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-fa-li-top: 3px; \" class=\"wp-block-ub-styled-list ub_styled_list_sublist\" id=\"ub_styled_list-3acfc3ac-9e08-4738-a60e-96af3aa6bd61\"><div class=\"ub-block-list__layout\" style=\"text-align: left; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-90035384-a7e8-4098-9b8e-f4360dc2aa94\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">To change the <a href=\"https:\/\/tableberg.com\/how-to-change-table-background-color-in-wordpress\/\">background color of the entire table<\/a>, select the Table block and apply the color in the settings panel.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-4fed400d-36fc-471a-91a4-d7d76a3ebba0\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">You can have different colors for rows, but it&#8217;s limited to the default option. Go to the <strong>Styles<\/strong> section and choose the <strong>Stripes<\/strong> option, but the stripe color is predefined and cannot be customized natively.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n\t\t<\/li>\n<\/div><\/ul>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-method-2-wrap-in-a-group-block-\"><strong>Method 2: Wrap in a Group Block<\/strong><\/h2>\n\n\n\n<p>For blocks that don\u2019t have native background color options, such as media, legacy, or utility blocks, you can use a <strong>Group block <\/strong>to act as a flexible container. By wrapping content inside the Group block, you can apply background colors to the entire section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-step-1-identify-and-target-the-specific-block-\"><strong>Step 1: <\/strong><strong>Identify and Target the Specific Block<\/strong><\/h3>\n\n\n\n<p>Click on the block that doesn\u2019t support the background color directly. Once you do that, it will pop up the block toolbar above that particular block.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.1-1024x543.png\" alt=\"Identify and Target the Specific Block\" class=\"has-border-color wp-image-7485\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.1-1024x543.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.1-300x159.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.1-768x407.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.1-18x10.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.1.png 1528w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-2-group-the-block-\"><strong>Step 2: Group the Block<\/strong><\/h3>\n\n\n\n<p>Now, click the <strong>Options menu<\/strong> (three dots) on the far right in the block toolbar, and select <strong>Group<\/strong> from the dropdown menu. This wraps the selected block inside a Group block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"545\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.2-1024x545.png\" alt=\"Group the Block\" class=\"has-border-color wp-image-7486\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.2-1024x545.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.2-300x160.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.2-768x408.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.2-1536x817.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.2-18x10.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.2.png 1651w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9-step-3-select-the-group-block-\"><strong>Step 3: Select the Group Block<\/strong><\/h3>\n\n\n\n<p>Click on the outer edge of the Group block, and as the toolbar appears, select the parent group block on the far left. This will highlight the whole section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.3-1024x495.png\" alt=\"Select the Group Block\" class=\"has-border-color wp-image-7487\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.3-1024x495.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.3-300x145.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.3-768x371.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.3-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.3.png 1533w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-step-4-apply-the-background-color-\"><strong>Step 4: Apply the Background Color<\/strong><\/h3>\n\n\n\n<p>Straight away, navigate to the <strong>Block Settings panel<\/strong>, scroll to the <strong>Color<\/strong> section, and choose a background color, or use the color picker for custom shades.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"438\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.4-1024x438.png\" alt=\"Apply the Background Color\" class=\"has-border-color wp-image-7488\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.4-1024x438.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.4-300x128.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.4-768x328.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.4-1536x657.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.4-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.4.png 1845w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-step-5-adjust-spacing-optional-\"><strong>Step 5: Adjust Spacing (Optional)<\/strong><\/h3>\n\n\n\n<p>If the content inside your group block takes the whole width of the block, you may need to adjust the content width to make the background color visible. Select the <strong>Group<\/strong> block (as we did in step 3), move to the <strong>Block Settings<\/strong>, scroll down to <strong>Content Width<\/strong>, and set a custom width to create space between the content and the colored background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.5-1024x506.png\" alt=\"Adjust Spacing (Optional)\" class=\"has-border-color wp-image-7489\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.5-1024x506.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.5-300x148.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.5-768x379.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.5-1536x759.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.5-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.5.png 1634w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-applies-to-\"><strong>Applies to<\/strong><\/h3>\n\n\n<ul style=\"padding-left: 0.9em; text-align: left; --ub-list-item-icon-top: 0px;; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-aa900f51-62e3-4c50-89ac-2070d57b7b22\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-de6e6846-bd5e-4bc4-b871-47fdf5ac5281\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Media Blocks Without Direct Support:<\/strong> Image (if not converted to Cover), Video, Audio<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-fccb7429-4706-488c-a201-8b2368162dc1\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>Legacy\/Utility Blocks:<\/strong> Shortcode, Classic, More, Custom HTML, Legacy Widget, Template Part, Page Break, Archives, Embed (YouTube, Twitter, etc.), Avatar, Comments Query Loop, Spacer (for advanced control), Separator (for added flexibility)<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"13-notes-\"><strong>Notes<\/strong><\/h3>\n\n\n<ul style=\"padding-left: 0.9em; text-align: left; --ub-list-item-icon-top: 0px;; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-3e5ab901-2000-4b9e-b1b5-6e8d59e4c572\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-a008e526-28ad-4e0c-ac56-c84eb8f0bacd\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">The Group block is ideal for creating sections with uniform background colors.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-94d0534e-db26-494b-af14-b429b31f10a8\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">You can nest multiple blocks inside a Group block to style them as a cohesive section.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-0e4be5d7-216b-4c23-9492-bb9b18e98a21\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Adjust the layout settings (like alignment and padding) for better control over spacing and content flow.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14-method-3-use-a-cover-block-\"><strong>Method 3: Use a Cover Block<\/strong><\/h2>\n\n\n\n<p>When you need advanced design options, like overlay effects or layered backgrounds, the <strong><a href=\"https:\/\/tableberg.com\/how-to-use-the-cover-block-in-wordpress\/\">Cover block<\/a><\/strong> is the perfect solution. It allows you to add background colors or images with customizable opacity to make it perfect for hero sections, banners, or featured content areas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"15-step-1-add-a-cover-block-\"><strong>Step 1: Add a Cover Block<\/strong><\/h3>\n\n\n\n<p>Simply start by clicking the <strong>+ <\/strong>button in the editor, search for <strong>Cover<\/strong>, and insert it into your content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"459\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1-1024x459.png\" alt=\"Add a Cover Block\" class=\"has-border-color wp-image-7492\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1-1024x459.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1-300x134.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1-768x344.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1-1536x688.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1.png 1700w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"16-step-2-choose-a-background-color-\"><strong>Step 2: Choose a Background Color<\/strong><\/h3>\n\n\n\n<p>From the initial setup, select a background color or add an image. Whether you\u2019re using an image or a color, you can change the overlay color and adjust the overlay opacity. To do that, go to the <strong>Color <\/strong>section under the <strong>Styles<\/strong> tab in the <strong>Block Settings<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"364\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1-1024x364.png\" alt=\"Choose a Background Color\" class=\"has-border-color wp-image-7491\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1-1024x364.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1-300x107.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1-768x273.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1-1536x547.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1-18x6.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"17-step-3-insert-content-inside-the-cover-block-\"><strong>Step 3: Insert Content Inside the Cover Block<\/strong><\/h3>\n\n\n\n<p>To insert the content inside the cover block, you can simply use the <strong>block toolbar<\/strong> to drag the block(s) you want to style (like Paragraphs, Headings, or Images) into the Cover block or add new blocks directly inside it using the <strong>block inserter<\/strong> (+ button).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.3-1024x510.png\" alt=\"Insert Content Inside the Cover Block\" class=\"has-border-color wp-image-7490\" style=\"border-color:#c9eff8;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.3-1024x510.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.3-300x149.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.3-768x383.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.3-1536x765.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.3-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.3.png 1592w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"18-applies-to-\"><strong>Applies to<\/strong><\/h3>\n\n\n<ul style=\"padding-left: 0.9em; text-align: left; --ub-list-item-icon-top: 0px;; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-562c7db5-3ad3-4245-a616-3b5e64b77dc8\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-72db6da2-ba55-4e6e-b786-ca7dc262bdb0\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><strong>For Advanced Design Needs:<\/strong> Any block that requires layered background effects, such as Paragraphs, Headings, Images, Buttons, or even multiple combined blocks.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"19-notes-\"><strong>Notes<\/strong><\/h3>\n\n\n<ul style=\"padding-left: 0.9em; text-align: left; --ub-list-item-icon-top: 0px;; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-spacing: 0px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-1a31b714-3944-4310-915d-e663b3c7b368\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-9055fe35-b58f-4b75-a3d8-58643a43b993\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">The Cover block is perfect for <strong>hero sections<\/strong>, <strong>call-to-action areas<\/strong>, and <strong>banners<\/strong>.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-36d1776e-30b3-4dbc-9d1e-83ff048c9fdc\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">You can layer text over background colors or images for striking visual effects.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 0px; --ub-list-item-icon-size: 0.7em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-247fe2a9-202c-4b25-bb14-c6ae57f0c687\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.7em\" height=\"0.7em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\">Adjust the opacity for subtle overlays or bold color blocks.<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"20-summary-table-blocks-amp-methods-\"><strong>Summary Table: Blocks &amp; Methods<\/strong><\/h2>\n\n\n<div class=\"wp-block-tableberg-wrapper wp-block-tableberg-table\" >\n\t\t\t<div class=\"tableberg-table-wrapper\" style=\"\">\n\t\t\t\t<table class = \"has-inner-border\" style=\"--tableberg-header-bg: #ac1be0; border-spacing: 0 0; --tableberg-inner-border-top: none; --tableberg-inner-border-right: 1px solid #000000; --tableberg-inner-border-bottom: 1px solid #000000; --tableberg-inner-border-left: none; --tableberg-inner-border-top-first: 1px solid #000000; --tableberg-inner-border-left-first: 1px solid #000000; \" data-tableberg-header=\"converted\" data-tableberg-footer=\"\"  ><colgroup><col style=\"\"\/><col style=\"\"\/><\/colgroup><tbody><tr class=\"tableberg-header\" style=\"\">\n<th data-tableberg-row=\"0\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-base-color has-text-color has-link-color wp-elements-0d80894f910cb656f109b2e0430325e0\">Block Category<\/p>\n<\/div><\/th>\n\n<th data-tableberg-row=\"0\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-base-color has-text-color has-link-color wp-elements-169a23f34647af5efe577ed5b49788e8\">Method<\/p>\n<\/div><\/th>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"1\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Text\/Content Blocks (e.g., Paragraph, Heading, List)<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"1\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Method 1<\/p>\n<\/div><\/td>\n<\/tr><tr class=\"tableberg-even-row\" style=\"\">\n<td data-tableberg-row=\"2\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Media Blocks (e.g., Image, Video, Audio)<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"2\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Method 2 or 3<\/p>\n<\/div><\/td>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"3\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Layout Blocks (e.g., Columns, Group, Cover)<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"3\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Method 1, 2, or 3<\/p>\n<\/div><\/td>\n<\/tr><tr class=\"tableberg-even-row\" style=\"\">\n<td data-tableberg-row=\"4\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Interactive Blocks (e.g., Buttons, Social Icons)<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"4\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Method 1<\/p>\n<\/div><\/td>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"5\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Widget Blocks (e.g., Search, Calendar)<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"5\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Method 1<\/p>\n<\/div><\/td>\n<\/tr><tr class=\"tableberg-even-row\" style=\"\">\n<td data-tableberg-row=\"6\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Legacy\/Utility Blocks (e.g., Shortcode, Classic)<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"6\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Method 2<\/p>\n<\/div><\/td>\n<\/tr><\/tbody><\/table>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h4>\n\n\n\n<p>The easiest way to have a big impact on your website\u2019s overall look and feel is probably by changing the background color of the WordPress core blocks you use. Your choice of delivering content using the right background color will definitely attract your website viewers. It\u2019s a simple yet powerful hack to improve user experience and make your site stand out. Whether you choose the native background color settings, use the Group block method, or choose the Cover block approach, at the end of the day, it\u2019s not just about adding color; it\u2019s about creating an environment where your content speaks louder. So go ahead, experiment with colors, and see how small changes can transform your website into a more effective platform.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to create a visually pleasing WordPress website, changing the background colors can help you highlight important content, create a clear visual hierarchy, and make your site more engaging. However, with so many blocks available in the WordPress Block Editor, it can be confusing to figure out how to change the background color [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":7480,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-7471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Change-the-Background-Color-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/fr\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/7471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/comments?post=7471"}],"version-history":[{"count":13,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/7471\/revisions"}],"predecessor-version":[{"id":7497,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/7471\/revisions\/7497"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/7480"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=7471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=7471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=7471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}