Creating a SliderSinorbis Knowledge base Adding Content to a Page

This article shows you how to create and customise a slider.A slider is an image display tool that rotates a collection ofpictures on the screen.

Sliders are similar to carousels, but there two di�erences.Unlike the carousel tool, a slider:

has a Call to Action (CTA) button on each slidecan place text over an imagecan hold more images

Sliders on the Homepage just below the header are popularon Chinese websites. We recommend using a carousel orslider, but not both.

Preparing images

The Slider Component displays an unlimited number ofimages. However, we recommended a maximum of 4pictures. Studies suggest click-through rates decline as thenumber of rotating images goes beyond 4.

To maximise loading speed, upload lightweight images. Forbest results, we recommend these image speci�cations:

maximum width of 600 px�le size less than 100 kb

Search🔍 Contact us

 

 

1  Placing the Slider Component

1. Go to the Edit Content area of the Homepage.2. Drag the Slider Component from the left panel on to the

page below the header.3. Hover the mouse pointer on the Slider Component. The

toolbar displays along with 5 or 6 round buttons in themiddle of the component.

2  Adding the �rst image

1. Hover the mouse pointer on the Slider Component. Thetoolbar displays.

2. In the centre of the slide, click the Edit Slide button. Ablank panel opens with two buttons in the bottom rightcorner.

3. Click the round Settings button. The Slide Settings panelopens.

4. Click the Inner Background tab to open a panel.5. Click the Image tab. The Image panel opens.6. To upload an image from your computer, click the Cloud

button. To insert an image from the File Manager, click the3 Dots button.

7. Choose FIT or FILL to size the image on the slide.8. Click OK.9. Click Save.

For information about FIT or FILL, see:

Sizing images

3  Adding background colour

You can place a colour background on a slide instead of animage. It’s not possible to place an image on a colourbackground.

1. Hover the mouse pointer on the Slider Component.2. Click the Edit Slide button. A blank panel opens with two

buttons in the bottom right corner.3. Click the round Settings button.4. Click the Inner Background tab.5. Click the colour square to open the Color Pallet.6. Choose one of your branding colours (if selected) or a

colour from the palette.

4  Adjusting button and heading spacing

Change the position of the button and heading text on aslide by adjusting the Spacing settings.

1. Hover the mouse pointer on the Slider Component.2. Click the Edit Slide button. 3. Click the round Settings button. 4. Click the Spacing tab.5. Click the plus (+) or minus (-) boxes to increase or

decrease the padding around the button and heading andthe edges of the display area.

6. Repeat changes on each slide.

 

5  Customising the button 

Each slide has a Button Component. You can customisebutton text appearance and behaviour.

1. Hover the mouse pointer on the Slider Component.2. Click the Edit Slide button.3. Hover the mouse pointer on the Button Component. The

toolbar displays.4. Click the Settings button.5. The Button Settings panel opens with 7 options to

control button text appearance and behaviour.

Button Text

Change the text inside the button. Type an English word orphrase into the �eld. Click the built-in translator to addSimpli�ed Chinese script.

Alignment

Adjust the horizontal position of the button text and itsbackground container inside the slide container: align to theleft, align to the centre, or align to the right.

Fit to Container

Check the box to expand the width of the container behindthe button text to the full width of the slide.

Link

Add a link to the button. When the button is clicked, the linkis opened. To add a link:

1. Click the Link tab. That opens the Link panel.2. Click the Pencil button. The Link Picker panel opens.3. Choose the type of link: webpage Section, existing Website

Page, or Custom URL.4. Check the Open in New Tab box to open the link in a new

window.5. Click OK.

If a webpage has a Section Component with a uniquename, you can enter that anchor point. Visitors jump tothat section when they click the button.If you enter a custom URL, include the http:// or https://pre�x.

Appearance

Click the Appearance tab to customise 3 design features ofthe button:

fontcoloursborders

Spacing

Adjust padding and margins.

Padding is the space between the outside edge of the textand the inside walls of the text container.A margin is the space between the outside edge of thetext container and perimeter of the Slide Component.

Advanced

To learn about custom styling with ID and Class Nameselectors, see:

Adding CSS

Component Visibility

Con�guring visibility lets you control which devices displaythe content. The default is all devices. To learn aboutvisibility settings, see:

Customising Visibility

  

6  Customising heading text

You can customise the heading directly above the button. 

1. Hover the mouse pointer on the Slider Component.2. Click the Edit Slide button.3. Hover the mouse pointer on the heading. The Heading

Component toolbar displays.4. Type text and then highlight those words with the mouse

pointer. A black menu bar menu displays.5. Click a button on the menu bar to adjust the text

appearance and behaviour.6. Click Save.

To learn about the style features on the black menu bar,see:

Customising Heading Settings

 

7  Customising the Heading Component

In addition to the text, you can customise the appearance ofthe Heading Component.

1. Hover the mouse pointer on the Slider Component.2. Click the Edit Slide button.3. Hover the mouse pointer on the heading. The Heading

Component toolbar displays.

4. Click the Settings button in the top left corner. TheSettings panel displays.

Appearance

Choose the background colour behind the heading text.Click the box to open the Colour Picker. Choose one of yourbranding colours (if selected) or a colour from the palette.

Line Space

Click the plus (+) or minus (-) button to increase or decreasethe height of the heading background.

Spacing

Adjust padding and margins.

Padding is the space between the outside edge of theheading text and the inside walls of the HeadingComponent.A margin is the space between the outside edge of theHeading Component and perimeter of the SlideComponent.

Advanced

To learn about custom styling with ID and Class Nameselectors, see:

Adding CSS

Component Visibility

Con�guring visibility lets you control which devices displaythe content. The default is all devices. To learn aboutvisibility settings, see:

Customising Visibility

 

8  Adding Slides

There are two ways to add slides to the Slider Component.

Click Add New Slide button.Click Duplicate Slide button.

Both buttons insert a new slide. There is one di�erence. TheAdd New Slide button does not insert a Button or HeadingComponent.

Add new slide

1. Hover the mouse pointer on the Slider Component.2. Click the green Plus button. A blank slide is added.3. Click Save.4. Repeat Step 2 above to insert an image by clicking the

Cloud (upload) or 3 Dots (insert) buttons.

Duplicate a slide

To insert a new slide with a heading and CTA button:

1. Click the Duplicate slide button.2. Click the round Settings button in the corner to open the

Image Settings panel.3. Click the Image tab. The Image panel opens.4. Repeat Step 2 above to replace the existing image with a

new picture by clicking the Cloud (upload) or 3 Dots(insert) buttons.

5. Repeat Step 5 above to change the button link.6. Repeat Step 6 above to change the heading text.7. Click OK.8. Click Save.

 

9  Changing slide order

1. Hover the mouse pointer on the Slider Component. Themenu displays.

2. Click the left and right arrows to change the position of aslide in the slider rotation.

10  Deleting a slide

1. Hover the mouse pointer on the Slider Component. Themenu displays.

2. Click the Bin button to delete a slide.

 

Was this article helpful?

Yes No

© 2019 – Sinorbis Holdings Pty Limited – ACN: 605 346 996 - Privacy policy - Terms of use

✓ ✕