# Extended Section Widget
One of the most time-consuming parts of the web design process is making the overall design look consistent. This includes consistent negative spacing and color themes across the entire website. The challenge becomes even bigger nowadays due to the huge variety of screen sizes, which require different margins and paddings to look nice.
Rhye theme supports a very handy extension that simplifies the web design process. It offers presets for paddings, margins, and color themes. These presets are available from the standard Elementor Section widget in the Advanced tab.
Using these options, you can set consistent spacing rules for all your sections and make them look nice and professional.
The greatest advantage of this feature is that you don't need to worry about different screen sizes. These spacing presets scale smoothly from mobile to desktop screens automatically! No more messing with margins and paddings values using the page builder.
# Configuring Spacing Presets
If you'd like to adjust these presets more precisely, you can do so from WordPress Customizer → General Style → Paddings & Margins. You need to define just two values per preset – the minimum spacing value that will be used for 320px mobile screens and the maximum spacing value that will be used for 1920px desktop screens and wider.
The intermediate values from 320px to 1920px are calculated automatically.
# Configuring Color Presets
When you change the color theme of the outer section, it automatically adjusts colors for the inner elements, like typography, decoration elements, curtains, etc.
You don't have to stick with the default theme color palette. You can easily adapt theme colors according to your brand style guide from WordPress Customizer → General Style → Colors.
# Switching Color Theme on Scroll
To bring more attention to certain content, you can turn on a color theme change effect when a visitor starts to scroll a section.
# ▶️️️️️ Step 1.
Select a section on the page and turn on the effect under the Advanced tab in On Scroll Color Theme.
# ▶️️️️️ Step 2.
Choose a color theme you'd like to apply to the section on scrolling and adjust other parameters.
# ▶️️️️️ Step 3.
Click Save and preview the effect on the frontend.
TIP
Elementor editor won't show the actual color theme change when you scroll. Please save your document first and preview the effect on the theme frontend.
# Uniting Multiple Galleries
If a section contains multiple galleries inside, you can enable pass-through navigation between them in the lightbox. This may be useful if you need to place several Masonry galleries with different layouts (e.g., 2 + 3 + 1 + 3 columns) and keep the seamless gallery navigation when previewing the images in full size.
# ▶️️️️️ Step 1.
Make sure to have Masonry Grid Elementor widgets placed in one common parent section. You can use the Inner Section Elementor default widget to place a section inside another one.
# ▶️️️️️ Step 2.
Enable lightbox mode on each of the grid widgets.
# ▶️️️️️ Step 3.
Click on the parent section toggle and open the Advanced tab. There you will find the Unite Inner Image Galleries toggle, which you should enable.
# ▶️️️️️ Step 4.
Save changes to preview the page. If you open a lightbox, you should be able to navigate through all the images in the united gallery.
# Responsive Columns Order
To improve the visitor's experience, you may need to have different column ordering on low-resolution responsive devices. By default, the columns placed from left -> right on desktop screens will be stacked to top -> bottom on mobile screens.
To override that behavior, select a column inside a default Elementor Section and adjust the Responsive Column Order field. This field accepts integers, which create an ordering relation between the adjacent columns inside a section. This Elementor control is responsive, so you can define the columns order for mobiles and tablets separately.
