one which is available by default. This element inherits the width of the default section that has been setup. You can drop other elements inside the section element.
How to Add and Manage Section Element
1. To add the section element, drag the element’s icon from the list of elements then drop it in the position you prefer inside the content area.
2. You can manage the element by clicking on it first and confirm that a bounding box encloses the area covered by the element.
3. Resizing the section element can be achieved by dragging the square dots in line with the blue bounding box. However, it is important to note that doing so will also resize the default section.
4. To edit the settings of the section element, click the gear icon which is the first among the 5 icons available to manage the element. Doing this will enable the display of the section settings in the right panel.
• Margin and Padding. To set the margin and padding of the section element, click the tab Margin & Padding to view and configure the settings.
• Top Margin. Using the slider or by directly typing the numerical value in the input field, set the top margin of the section element from the preceding element.
• Bottom Margin. Using the slider or by directly typing the numerical value in the input field, set the bottom margin of the section element from the next element.
• Vertical Padding. Using the slider or by directly typing the numerical value in the input field, this will determine the left and right space inside the section element.
• Horizontal Padding. Using the slider or by directly typing the numerical value in the input field, this will determine the top and bottom space inside the section element.
• Background. Click the tab labeled Background to view and configure the background settings of the element section.
• If you would like to set the background of the section element to be transparent, tick the checkbox labeled Transparent Background Color. Otherwise, leave it uncheck to set your preferred custom background.
• Background Color. Use the built-in color picker to select the
background color of your preference to apply to the section element.
• Background Image. Supply the complete url of the image’s location you wish to use as background image or use the blue action button to upload your own image, use pre-made patterns or search for images you can use. Once an image is supplied in the background image field, the buttons edit and remove will then be enabled. Click edit to
enhance the background image selected or remove it by clicking the remove button.
• Background Image Style. Select from the dropdown how you would like the background image to be displayed on the section element.
• Background Image Position. Choose from the dropdown in what position you would like to be the background image’s starting point of display.
• Background Image Attachment. When Scroll is selected, the
background image scrolls along with the other elements of the page.
While the Fixed option will stick your background image no matter how deep the scrolling may get.
• Borders. The borders tab contains settings to apply borders and its corresponding styling to the section element.
• Border Color. Choose the color of your preference you would like to apply to the borders of the section element using the built-in color picker.
• Style. From the dropdown, select what style you would like to use for the borders.
• Thickness. Use the built-in slider to set the thickness of the borders or simply enter the numerical value in pixels inside the input field.
• To configure each border individually, tick the checkbox labeled Setup Border Individually. The above mentioned options will then be available for each border: left, right, top and bottom border.
• Rounded Corners. The rounded corners tab allows you to add curves to every edge of your section element. Click the tab title to access the settings area for rounded corners.
• Top Corners. Use the built-in slider or enter in the input field a
numerical value that corresponds to the radius of the top left and top right corners of the section element.
• Bottom Corners. Use the built-in slider or enter in the input field a numerical value that corresponds to the radius of the bottom left and bottom right corners of the section element.
• Opacity and Shadow. This section holds the settings to further enhance the layout of the section element by adding shadow effects and
configuring the visibility of the element.
• Shadow Type. Select from the dropdown whether you would like to apply a shadow effect to the section element. By default it is set to none. Other options are inset where the shadow is casted inwards and outset which is the opposite of inset and the shadow is casted outwards.
• Shadow Color. Using the built-in color picker, select the color of the shadow you would like to apply to the section element.
• Horizontal Shadow. Use the built-in slider to set which side the shadow will be prominently casted. A positive value will cast the shadow more on the right and negative value to the left.
• Vertical Shadow. Use the built-in slider to set the shadow will
prominently casted above or below the element. A positive value will cast the shadow more on the bottom and negative value to the top.
• Box Opacity. This field determines how visible the element is in the page.
• Display Delay. This section offers options to enable a slight delay in the display of this element on the page. Click the tab to configure the settings.
• Enable Display Delay. Tick the checkbox if you would like to enable this feature to the section element. Enabling this feature will display the sliders that you can set to configure the delay period in hours, minutes and seconds.
• Effect. Click this tab to set an animated effect to the section element the moment the page is loaded for the first time.
• Display Animation. From the dropdown, select the animation of your choice that you would like to be applied on the section element.
5. To copy or duplicate the section element along with its settings, click the copy icon located right next to the gear icon. When clicked, it will duplicate the current element which in this case is the image.
6. The next icon is the remove column icon which by default is disabled and will only be available for usage once the section has more than one column to manage.
7. The fourth icon is the add column icon which adds a column to the section when clicked.
8. To remove the element, click the trash icon.