This guide explains how to adjust spacing (padding and margins) in sections within the Page Builder to control the visual layout for desktop, tablet, and mobile views.
Step 1 – Log in and Access Page Builder
Log in to the backend, navigate to the Event Content dropdown, and click Page Builder.
Step 2 – Select the Section
Click the Page Builder button and choose the desired section. In this example, we will select the Hero section from the dropdown.
Note: This feature is available only in sections that have the “Section Styling” option. Currently, it is supported in Hero, Custom, Image with Text, Multi-Column, About, Agenda, Speakers, Sponsors, FAQs, Video, Slider, and Gallery sections.
Step 3 – Open Section Styling
Click the Section Styling button to open the styling settings.
Step 4 – Enable and Adjust Spacing Controls
Enable the spacing controls. You will see sliders to adjust the padding and margins for the top, bottom, left, and right of the section in pixels (px). These settings can be applied separately for Desktop, Tablet, and Mobile views.
Step 5 – Save the Changes
Once the sliders are adjusted to your preference, click the Back button, then click Save Changes.
Outcome
The section’s layout will now reflect the padding and margin configuration you set, ensuring better visual balance and responsiveness across devices.