The Design section on the Appearance tab lets you match every slider to your brand without writing CSS: colors for the arrows, dots, captions and accents, rounded corners, a fixed image shape, the gap between slides, the arrow size and the caption style. This guide explains each option.
What You’ll Learn
- How empty fields keep the standard look
- The seven colors and what they change
- Image shape, corners, spacing and arrow size
- Caption position and background
Only What You Set Is Changed
Go to Gallery Slider > Appearance and scroll to the Design section. Every field starts empty, which keeps the standard look. Only the fields you fill in are added to the page, so you can change one color without touching anything else. Empty a field to go back to the standard look.
The Gallery block preview in the editor keeps the standard look; your design shows on the front end.
Colors
- Arrow background and Arrow icon
- Dots and Active dot
- Caption background and Caption text
- Accent – the progress bar, the current thumbnail and the video play button
Shape and Spacing
- Image Shape – Natural (each image keeps its shape), Square (1:1), Landscape (4:3 or 3:2), Widescreen (16:9) or Portrait (3:4). A shape crops the images to fill it, so all slides are the same size – useful when your photos have mixed sizes.
- Corner Radius – rounds the corners of the slides.
- Space Between Slides – for sliders that show several slides at once. The fade and coverflow layouts keep their own spacing.
- Arrow Size – makes the arrows bigger or smaller. The arrow style (circle, rounded square, chevron) is on the Behavior tab.
Captions
Choose whether captions sit At the top of the image or At the bottom of the image, and set the Background Opacity used with the caption background color, so the image shows through as much as you like.
Design controls are available in Gallery Slider Suite Pro.