# Extended Section Widget
One of the most time consuming part of web-design process is making the overall design look consistent. This includes consistent negative spacing and color themes across all the website. The challenge becomes even bigger nowdays to due huge variety of screens sizes which require different margins and paddings to look nice.
Rhye theme supports a very handy extension which simplifies web-design process. It offers the presets for paddings, margins and color themes. Those presets are available from standard Elementor Section
widget in Advanced
tab.

Using those options you can set the consistent spacing rules for all your sections and make them look nice and professional.

And the greatest advantage of this feature is that you don't need to care about different screen sizes. Those 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 those presets more precisely – that's possible to do from WordPress Customizer → General Style → Paddings & Margins
. You need to define just 2 values per each preset – the minimum spacing value that will be used for 320px
mobile screens and the maxium spacing value that will be used for 1920px
desktop screens and wider.

And the intermediate values from 320px
to 1920px
are calculated automatically.
# Configuring Color Presets
When you change color theme of the outer section, it automatically adjusts colors for the inner elements, like typography, decoration elements, curtains, etc.

And of course you don't have to stick with default theme color palette. You can easily adapt theme colors according to your brand styleguide from WordPress Customizer → General Style → Colors
.

# Switching Color Theme on Scroll
To bring more attention to a certain content you can turn on a color theme change effect when visitor is starting to scroll a section.
# ▶️️️️️ Step 1.
Select a section on the page and turn on the effect under 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 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 theme frontend.
# Uniting Multiple Galleries
If a section contains multiple galleries inside, you can enable a pass-through navigation between them in lightbox. This may be useful in case 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 Inner Section
Elementor default widget to place a section inside another one.
# ▶️️️️️ Step 2.
Enable lightbox mode on each of the grid widget.

# ▶️️️️️ Step 3.
Click on the parent section section toggle and open Advanced
tab. There you will find 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 visitors experience you may need to have the different columns ordering on low resolution responsive devices. By default the columns placed from left -> right
on desktop screens will be stacked to top -> bottom
on mobiles screens.

To override that behavior select a column inside a default Elementor Section
and adjustResponsive Column Order
field. This field accepts integers which create an ordering relation between the adjacent columns inside a section. This Elementor control is reponsive so you can define the columns order for mobiles and tables separately.
