Sections are at the top of the grid chain (aka, food chain in JD builder), and hold every element together. Everything that you see on frontend directly or indirectly exists inside a section.
To create a new section, use the green Add new section button at the bottom of any section or if you don’t have anything added yet, you can just click the add section button to create a new section.
Once the section has been added, you can add row/columns/elements inside the section, see the following tutorial for more on how the layout manager works. In this tutorial we are only going to cover the section level settings.
Hover your mouse of the gear icon will expand the settings toolbar and get you all the one click settings available on the section. The icon in itself are pretty self explanatory but we’ll give the basics on the real quick.
- The icon can be used to move the section around in the layout manager. Hold and move the section up/down to the location of your choice.
- The icon gives you all the settings and controls on the section level. Click the icon and a popup would appear giving you control over each aspect of the section.
- The icon lets you delete the section. This action is permanent and can not be undone.
- The icon lets you toggle the visibility of the section. You can use this icon to publish/unpublish sections within the page.
- The icon lets clone the entire section including it’s settings and elements.
- The icon lets save the section to your personal library and you can use the section later in other pages as well.
- The icon lets export the section JSON that can be imported back into JD builder including all it’s settings & elements.
After clicking on the Section Settings icon, you will open up to the following set of options.
Here we have three different tabs General, Design & Advanced. We’ll describe what each of the options under General tab means, let’s get through it:
Here we only have the Layout tab whose options are:-
- Content Width- Adjust the width of the content that is either Fluid, Contained or Custom. On choosing Custom, customize the width over the slider under Width option.
- Section Height- Set the height of the section either Inherit, Fit to Screen or Min Height where you can adjust the minimum height value.
- Content Position- Align the content to the correct position among Inherit, Top(Start), Middle(Center), Bottom(End), Around or Between.
- HTML Tag- Choose under which tag the section will be.