# 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.

Extended options for standard Section widget

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.

No need to adjust spacing for mobiles – they scale down automatically.

# 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.

Preview all your spacing adjustments immediately before saving changes

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.

Adjust color theme per each section on the page

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.

Preview all your colors adjustments immediately before saving changes

# 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.

In the example on that page there are 4 separate galleries with a single image per each widget

# 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.