How are admin labels used in Sections, Rows, Columns and Modules?

Sections

In Page Layouts, Sections are named according to the categorisation of the contents within them. If they have any background applied, it is mentioned alongside the Section name.

This is useful for understanding the content hierarchy on the page.

Side note: You can easily drag sections around by moving them up and down the layer tree. The Layers tool is very handy!

The reason why the " Features Section" is orange is because it's a Specialty Section. Read more about Specialty Sections in the Divi Documentation.

On individual sections, the sections are labeled with their corresponding number.

Rows and Columns

Rows and Columns are important building blocks for your designs so it's important to be able to quickly identify them.

I keep almost all Row and Column labels as the default label for this purpose.

The only difference is when Rows or Columns have custom css configured within their Settings → Advanced → Custom CSS editor, it is mentioned in the row or column title.

Similarly, if Rows or Columns have a custom classname applied, it is labeled for easy recognition.

Here's an example:

The first opened row label is describing how the second column in the row has custom css flexbox properties enabled.

You can also see how the column label mentions the custom flexbox css enabled.

Why do you use Custom CSS? I thought Divi Builder settings can do it all?

Divi is an incredible builder but it does not (yet) have the ability to configure all the settings to create a particular interface design or effects.

So by including minimal Custom CSS in the row or column module, you can learn how I've used various CSS properties to achieve the desired effect.

You can of course optionally remove them should you want to take hold of the design yourself.

Modules

Each module starts with what it is and then describes the html hierarchy of the elements in use.

In these examples, "text h2 body" is describing:

A text module
With an h2 title
And body text with a p tag

Another example:

In this example, "blurb h3 title body p with icon top circle" is describing:

A blurb module
With an h3 title
Body text with a p tag
An icon is in use and is positioned above the text and is circled.

Another example:

In this example, "Image 1020x850" is describing:

An image module
With suggested image dimensions of 1020x850 (you can use whatever dimensions you want, these are a guide)
Body text with a p tag
An icon is in use and is positioned above the text and is circled.

What are the benefits of this naming convention?

It is incredibly useful to get a snapshot of how the resultant front-end page is structured from a hierarchical semantic perspective.

Naming modules in this way:

Allows you to catch erroneous uses of various tags, such as h1 tags.
Enables you to build out a solid semantic base.
Helps you understand your design system on the page.

With most users preferring to edit in the Visual Mode, the naming of modules becomes important for quickly identifying the module you need to inspect when inspecting from the Layers View:

Can I rename these labels?

Of course you can!

You may rename them to whatever system you have or prefer.

Renaming the labels will have no effect on the settings of the module or the design.