JD Builder

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 & 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 Astroid Media Manager.

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.

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.