Side-by-side Images Slider

About Shine Theme Side-by-side Images SliderClick to copy 2222

The Shine Theme Side-by-side Images Slider section is an amazing way to visually showcase drastic changes while using your products in a two-grid collage.

With the Shine theme, you can easily customize the Side-by-side Images Slider both on desktop and mobile screens without any coding skills.

Side-by-side Images Slider

Access Shine Theme Side-by-side Images SliderClick to copy 2222

From any page in the Shine Admin Dashboard, click on the Add section button > Search for Side-by-side Images Slider > Click on it to add the Side-by-side Images Slider section to your page.

Side-by-side Images Slider

Shine Theme Side-by-side Images Slider ConfigurationClick to copy 2222

To configure the Side-by-side Images Slider section, click on the section to access the configuration settings.

GeneralClick to copy 2222

Under the Color Scheme, you can choose a specific scheme for the Side-by-side Images Slider section. To modify or add a new color scheme, go to Theme Settings > Color.

Side-by-side Images Slider

You can apply content to the Subheading, Heading, and Description by adding text on the placeholder. If you want to hide it, leave the text box empty.

Side-by-side Images Slider

Note: ​​To highlight the Heading, place them between ‘[‘ and ‘]’ in the heading input field. Example: [Free shipping]

You can also adjust the size of the Heading:

  • H2
  • H3
  • H4
  • H5

Side-by-side Images Slider

ImageClick to copy 2222

In the Image option, you can image for the First image and Second image.

Click on the Select image to upload the image for large and mobile screens. Or choose an existing image on the media manager. You can set images separately for large and mobile screens.

Side-by-side Images Slider

If you set the background image for the large screen and don’t upload the image for mobile screen, the mobile view will automatically inherit the image of the large screen.

If you set the background image only for the mobile screen, the large screen will not inherit the image of the mobile screen.

The recommended size for background images is 2000x1200px and for mobile background images is 1200x1200px.

Note: The second image has the same dimensions as the first image.

You can also add text by adding content on the text box.

Side-by-side Images Slider

Large ScreenClick to copy 2222

The section offers four Section heading position options:

  • Top left

Side-by-side Images Slider

  • Top center

Side-by-side Images Slider

  • Inline

Side-by-side Images Slider

You can adjust the position for the text and slider, which can be changed at Section ordering:

  • Text first

Side-by-side Images Slider

  • Slide first

Side-by-side Images Slider

Mobile ScreenClick to copy 2222

You can set the Section heading position for smaller screens, such as mobile devices:

  • Top center

Side-by-side Images Slider

  • Top left

Side-by-side Images Slider

The settings for the Section ordering on the mobile screen is the same on the large screen.

Side-by-side Images Slider

SpacingClick to copy 2222

The Spacing option will decrease the top/bottom margin of a section, thereby bringing it nearer to the sections above and below it. You can choose to customize the outer spacing top/bottom of the Side-by-side Images Slider section.

  • Remove outer spacing top
  • Remove outer spacing bottom

Side-by-side Images Slider

Navigate this category

Previous