Section Styles

0:00
Hello everyone, I want to show you how we can work with Section Styles in the Design System. Section Styles are globally prepared styles in WordPress that can then be applied to various elements or groups of elements — with the goal that we can apply them with a single click in a time-saving way, and above all that we can restyle them globally later. It therefore makes a lot of sense

0:27
to work heavily with Section Styles, so that if the entire project is built with 100 subpages and the client says they’d like this box to have a different corner radius or color everywhere, I don’t have to go into every subpage and adjust it manually. Ideally I can update it via the global style. For that I of course need a bit of

0:50
experience, to recognize early on when something should be a style. We have prepared a few things that we need in pretty much every project — and then this is normally either adapted to the specific project, which I’ll show shortly, or of course extended by adding more styles.

1:11
Let’s briefly look at where WordPress organizes Section Styles. I’ll go into the admin area and then into the Theme File Editor. I’m now in the child theme. The parent theme also has styles, but in the child theme we have prepared a bit more so we can customize better. Everything is in the Styles folder, and here we see for example Box 1 and Box 2.

1:38
These are the boxes. In our case Box 1 is white and Box 2 is the grey box. If I grab Section Style Box 1 — that’s Box White — you can see the title is Box White, which relates to — let me go over here and edit this page — that we can select it there.

2:07
It’s set as the default here, so I could also say it should be Box Light Grey — that’s the label in the admin area. We decided to use a visual label (based on appearance) because clients navigate it more easily. In code however we did not name it by appearance.

2:29
But in a way that allows us to represent Box 1 in blue for example. We would just need to change the values so a different style is applied, and change the label — but in code this topic doesn’t change. It’s simply numbered so we stay flexible. These Section Styles always

2:51
apply to various block types. In our case this Section Style works for Groups, Columns, and Column, and then all the properties that are assigned follow — a color, border-radius, and padding.

3:05
The simplest way to change this would actually be centrally right here. If I now want Box 1 to be blue instead of white, I could go in and say background is for example Blue 800, the text color is white, rename it Box Blue, and update the file.

3:33
Since it’s still called Box 1 in code, I can simply reload and all boxes assigned Box 1 have now changed automatically. If I now go to an element and also assign Box White, I’ve not yet reloaded here, and I save,

4:02
that box would of course also be blue with white text. As soon as I reload the admin area, it’s updated there too, and clicking it shows Box Blue. So it’s very easy to adjust this styling, and we have prepared various things to work from — but as I just showed, the adjustment

4:27
must be made in the JSON file if it should really be completely global. If I want to do it via the WordPress admin, I need to look in several places — let me show you what to watch out for. I go back to the JSON file: the blue box is currently valid for Groups, Columns, and Column. If I want to configure this through the Editor, I can do that.

4:57
I go into the Site Editor and into Styles. Now I search for this Section Style — I find it within Blocks, always on the blocks listed in that file, for example on the Group. And here I find it: Box Blue. Clicking it I can

5:19
reconfigure it — for example I could say Box Blue should no longer use Blue 800, but something lighter. Then you’ll notice only this box changed. Why didn’t that one change? Because I only adjusted the Section Style globally for the Group block, not for all blocks linked to it — only in the context of Group. And

5:46
in these patterns this box is applied to a Group element. I’ll save quickly so I can show you better after a reload. Here the style sits on the Group element, and up here it sits on the Column element, which I haven’t edited yet. So in the Site Editor I can actually

6:14
configure this very precisely if I want to. But if I don’t want different styling and really want all boxes to change color, I essentially have two options: either edit each element individually in the no-code approach (via the Site Editor), going and finding the Column too,

6:40
going into Box Blue there too, selecting the lighter shade, and adjusting it. I’d also need to do it for Columns — there were 3 blocks linked to this style — or I decide to do it in the JSON file, where I can do it in one central place. That’s probably the time-saving approach, but it requires going into code.

7:08
Let’s take a quick look at everything I’ve prepared in the Design System overall. I go back to the general Styles and the overview in the Editor in the child theme. There are Box 1 and Box 2 for some variety — that can of course be extended with Box 3, 4, 5. We also prepared an Infobox style that uses

7:37
a yellow background color for example. Then we have various list types with checkboxes or pro-and-contra lists prepared, and we have the Section styles prepared. These are the full content sections, so the entire area at once — white and grey are prepared as Section Styles just like the boxes.

8:05
For sections it’s more about the outer spacing being consistent — top, bottom, and left and right. So if I want everything to be a bit more compact, I’d take this Section Style globally and adjust the padding slightly.