{"id":1173,"date":"2026-05-28T09:38:52","date_gmt":"2026-05-28T09:38:52","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&p=1173"},"modified":"2026-06-12T09:59:03","modified_gmt":"2026-06-12T09:59:03","password":"","slug":"hintergruende","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/hintergruende\/","title":{"rendered":"Backgrounds"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Application<\/h2>

Add as many backgrounds as you like, divided into light and dark variants. This makes it easier for you to perfectly match text and box colors to the respective background. In the following 6 steps, we will show you how to manage your backgrounds and add new ones.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Find background overview<\/h2>

To manage your backgrounds, click on the fourth item, \u201eBackgrounds\u201c.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Backgrounds<\/div>\n
Select backgrounds to see more settings.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Backgrounds Overview<\/h2>

In the backgrounds overview, you can find all your existing backgrounds. Simply click on a background to customize it, or on the trash can icon to delete it. If you have more than one background, you can flexibly change their order via drag-and-drop\u2014this changes the arrangement of the background selection in the top right.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Light backgrounds<\/div>\n
You can find the light backgrounds right at the top of the editing window. Add only light backgrounds with a light color tone there.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Dark backgrounds<\/div>\n
You can find the dark backgrounds directly below the light variants in the editing window. Only add dark backgrounds with a dark color tone there.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Change backgrounds<\/div>\n
Swap the pre-set backgrounds here to test them directly.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 1 \u2013 Light Backgrounds<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Name<\/div>\n
Click on a background and rename it so that it remains clear for you.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 2 \u2013 Add new background<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Add background<\/div>\n
Click on \u201eAdd background\u201c to create another one.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 3 \u2013 Adjust fill color<\/h2>

After adding a new background and giving it a clear name, all that is missing is the most important part: the color. Take a look at the hotspots to see what options are available to you here.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Color field<\/div>\n
Intuitively determine your desired color using the free color field to visually select the appropriate shade.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Fill, Gradient & Eyedropper<\/div>\n
Switch flexibly between a solid surface and a gradient, or use the eyedropper to sample any color directly from your screen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Hue & Opacity<\/div>\n
Using the sliders, you can precisely adjust both the hue and the opacity of your selection.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Color values & favorites<\/div>\n
Enter your exact HEX or RGB values directly to match brand colors precisely, or quickly access the most frequently used colors at the bottom.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 4 \u2013 Set gradient<\/h2>

Switch to the tab \u201eHistory<\/strong>\u201c, to use a dynamic gradient. Combine one or more colors to create modern or abstract backgrounds.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Adjust gradient angle<\/div>\n
Determine the direction in which the gradient should flow using the degree field (e.g., 45\u00b0).<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Color dots<\/div>\n
Click the points on the progress bar to adjust each color of the transition separately. Add as many points as needed by simply clicking in the bar to make the gradient even smoother.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 5 \u2013 Set dark backgrounds<\/h2>

The exact same applies to dark backgrounds as to light ones: You have access to precisely the same features and configuration options. By default, a single dark color is also pre-configured here first. You can edit this and set it as your primary background.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Dark backgrounds<\/div>\n
Give the background a distinct name and, as in steps 3 and 4, set either a solid color fill or a dynamic gradient.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Change backgrounds<\/div>\n
As we can see here, our list of the backgrounds we've set has populated. Hover your mouse over a color before clicking to check the name of the background.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 6 \u2013 Check backgrounds<\/h2>

Review all the backgrounds and check if your entries are really correct. Don't worry: even after saving, you can change the colors at any time using the Theme Builder.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Primary background<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Secondary background<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Bright course<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Gray tone<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Primary Dark<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Secondary Dark<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Dark gradient<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Anwendung F\u00fcge beliebig viele Hintergr\u00fcnde hinzu, unterteilt in helle und dunkle Varianten. Das erleichtert dir die Arbeit, Text und Box Farben perfekt auf den jeweiligen Hintergrund abzustimmen. In den folgenden 6 Schritten zeigen wir dir, wie du deine Hintergr\u00fcnde verwaltest und neue hinzuf\u00fcgst. Hintergr\u00fcnde \u00dcbersicht finden Um deine Hintergr\u00fcnde zu verwalten, klicke auf den vierten […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[20],"doc_tag":[],"class_list":["post-1173","docs","type-docs","status-publish","hentry","doc_category-theme-builder"],"year_month":"2026-09","word_count":627,"total_views":"1","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Theme Builder","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/theme-builder\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=1173"}],"version-history":[{"count":80,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1173\/revisions"}],"predecessor-version":[{"id":4359,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1173\/revisions\/4359"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=1173"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=1173"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=1173"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}