Section Level Settings

The design tab gives you control over every design aspect for the current section including background, color, width, spacing, typography and other settings. Let’s go over these settings one by one.

The Basic tab let’s you add a Custom ID or a Custom Class and manage the z-index of the specific section. You can use the custom ID(only in alphabets no numeric IDs) & class to write custom CSS if needed, the z-index property specifies the stack order of an section. An section with greater z-index/stack order is always in front of an section with a lower z-index/stack order.

The Background option lets you add a background color, image, gradient or video.

• You can easily select the color using the color picker.
• You can select multiple colors to create a gradient.
• Image & Video can be selected/uploaded using Media Manager.

(ONLY JD BUILDER PRO FEATURE)

The Particles Background tab helps you in creating attractive background effects with particles moving all over the place in different shapes & sizes with different speeds. Its one of a kind effect for any page builder in Joomla. To know more about its configuration read the article.

The Border tab let’s you manage the border type, width, color and radius of the border on the section. The  icon can be used to clear the selected width, color, radius settings.
You can select from multiple border types including:

• Dotted
• Dashed
• Solid
• Double
• Groove

You can set the border width same for all 4 sides or press the lock button to have a different border for each side.

Border can be set in px, em, rem and percentage.

You can also manage border radius of the section. This is the field that can give your section rounded corners.

You can also give your section a Box shadow.

The Spacing tab can be used to manage Margin and Padding for your section.

The Typography tab gives you control over the basic colors of the section including the headings color, text color, link color and text alignment.

• The heading color lets you set the color for headings 1 through 6 in your section. So any headings appearing (unless specifically overwritten somewhere) inside the section will have the selected color by default.
• The text color is applicable to all text appearing & paragraphs.
• The link & link hover color are applicable to all the links appearing inside the section.
• The text alignment let’s you control the alignment of the any text (including headings, paragraphs & links) appearing inside the paragraph.

(ONLY JD BUILDER PRO FEATURE)

This Shape Divider tab has the options to style your sections by adding different shapes of different size & color. Manage to show the divider above the content or below it, you can also flip the shape of the divider however you want to. With easy customizing options add these shape dividers to make your sections more attractive.

The Custom CSS field let’s you write custom CSS specifically for this section. i.e. writing p {color:green} will change the text color of all paragraphs to green inside the current section.