{"id":1295,"date":"2026-05-28T12:08:50","date_gmt":"2026-05-28T12:08:50","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&p=1295"},"modified":"2026-06-11T16:05:26","modified_gmt":"2026-06-11T16:05:26","password":"","slug":"kaesten","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/kaesten\/","title":{"rendered":"Boxes"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Application<\/h2>

Adjust the boxes accordingly for each background. Define, in accordance with the corporate design, which colors your surfaces (boxes) should receive. These colors are used for elements such as the big slider, tabs, flip cards, tables, or the accordion.<\/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 overview of boxes<\/h2>

To customize and manage your boxes, click on the fifth item, \u201eBoxes\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
Find boxes<\/div>\n
Select boxes to see further 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

Box Overview<\/h2>

In the box overview, there are three areas: the box colors, the special colors, and the overlay color adjustment. We will go through all areas step by step so that in the end we can design an appealing frontend where all the settings are correct.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\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

Step 1 \u2013 Box colors<\/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
Colors<\/div>\n
Click on one of your backgrounds to customize the colors and other properties of the boxes placed on it.<\/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 Customize box colors<\/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
Color<\/div>\n
Use the color picker to set a color value for your boxes, such as here on a primary light background. This can once again be either a solid area or a gradient.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Contour<\/div>\n
Determine whether your boxes should have a outline or not, and additionally, what color and outline width (thickness) they should have.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Shadow<\/div>\n
Set the color of the shadows. You can change the depth again in the style settings if you want it to be different.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Text<\/div>\n
Determine the color of the text. The values are inherited from the typography 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

Spot colors<\/h2>

Click on the \u201eSpot colors\u201c tab. There you will see three values: \u201ePositive\u201c, \u201eNegative\u201c, and \u201eNeutral\u201c. These colors are particularly important because they are used in quizzes for the evaluation. This allows you to define which colors should be displayed upon passing, failing, or for general hints or warnings. In addition, these colors are also available for the \u201eBox\u201c element.<\/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
Edit spot color<\/div>\n
Click on a color to open and edit it.<\/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 Edit spot colors<\/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
Color<\/div>\n
Set a color value for the positive value using the color picker. This can be either a solid area or a gradient here again.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Color<\/div>\n
Determine whether this value gets an outline or not, and additionally, what color and outline thickness (width) it has.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Shadow<\/div>\n
Determine the color of the shadows. The depth is determined by the style settings.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Text<\/div>\n
Determine the color of the shadows. The depth is determined by the style 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

Step 2 \u2013 Check spot colors<\/h2>

After you have processed all spot colors, check whether your entries are correct. To do this, proceed as follows:<\/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
Review<\/div>\n
Create a sample WBT and assign your theme. This allows you to assign and check the colors for the box element.<\/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

Overlay<\/h2>

Determine how the overlay visually looks in your theme. You have the option to assign all your background colors, which you set in step 4, to the overlay.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\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<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Anwendung Passe f\u00fcr jeden Hintergrund die K\u00e4sten entsprechend an. Lege gem\u00e4\u00df dem Corporate Design fest, welche Farben deine Fl\u00e4chen (K\u00e4sten) erhalten sollen. Diese Farben werden bei Elementen wie dem Big Slider, Tabs, Flipcards, Tabellen oder dem Akkordeon verwendet. K\u00e4sten \u00dcbersicht finden Um deine K\u00e4sten anzupassen und zu verwalten, klicke auf den f\u00fcnften Punkt \u201eK\u00e4sten\u201c. 1 […]<\/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-1295","docs","type-docs","status-publish","hentry","doc_category-theme-builder"],"year_month":"2026-09","word_count":471,"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\/1295","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=1295"}],"version-history":[{"count":73,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1295\/revisions"}],"predecessor-version":[{"id":3431,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1295\/revisions\/3431"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=1295"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=1295"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=1295"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}