Creating a Slider

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

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

• has a Call to Action (CTA) button on each slide
• can place text over an image
• can hold more images

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

Preparing images

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

To maximise loading speed, upload lightweight images. For best results, we recommend these image specifications:

• maximum width of 600 px
• file size less than 100 kb

 

Previewing the slider

The slider tool is mobile responsive. You can preview your slider to see how it displays on tablet and phone screens, as well as desktop monitors.

To preview your slider:

1. Scroll up to the top of the web page and then click Preview. A new browser tab opens.
2. At the top of the page, select the display device you want to test. The slider content adjusts for each device. 

 

---

 

1  Placing the Slider Component

1. Click WEBSITE on the top menu bar. 
2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
3. Hover your mouse pointer on the Homepage.
4. Click the Edit button. The Edit Content area opens.
5. Drag the Slider Component from the left panel on to the page below the header.
6. Hover the mouse pointer on the Slider Component. The toolbar displays and shows the Settings and Clone buttons along with 5 or 6 round buttons in the middle of the component.

 

 

1.1 Customizing slider settings

There are two different sets of tools you can use to customise the design, appearance, and behaviour of a slider.

a. Content controls

The first set of tools controls the appearance of slider content. You access these customisation tools by clicking the Edit slide button. After opening the Edit panel, you can customize the call to action button, heading, and slider appearance settings.

These customization tools are described in this article.

 

b. Design and behaviour controls

The second set of tools controls the appearance and behaviour of the slider tool. You access these customisation tools by clicking the Settings button on the Slider component toolbar. Those options include slider height, slider rotation speed, and the autoplay feature.

These settings are described in a different article. For more information, see:

• Customizing Slider Component Settings

 

2  Adding the first image

1. Hover the mouse pointer on the Slider Component. The toolbar displays.
2. In the centre of the slide, click the Edit slide button. A blank panel opens with two buttons in the bottom right corner.
3. Click the round Settings button. The Slide Settings panel opens.
4. Click the Inner Background tab. A new panel opens.
5. Click the Image tab. The Image panel opens.
6. To upload an image from your computer, click the Cloud button. You can also drag an image from your computer into the image upload box.
7. To insert an image from the File Manager, click the finger pointer button. 
8. Choose FIT or FILL to size the image on the slide.
9. Click OK.
10. Click Save.

For information about FIT or FILL, see:

• Sizing images

 

 

2.1 Best Practice

Occasionally, the tops of images are chopped off when viewing pictures on a slider. If that problem occurs with your slider images, review this suggested best practice:

• Image Alignment on Sliders and Carousels Best Practices

 

3  Adding background colour

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

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 a slide 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 and the edges of the display area.
6. Repeat changes on each slide.

 

5  Customising the button 

Each slide has a Button Component. You can customise button 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 or phrase into the field. Click the built-in translator to add Simplified Chinese script.

 

Alignment

Adjust the horizontal position of the button text and its background container inside the slide container: align to the left, align to the centre, or align to the right.

Fit to Container

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

Link

Add a link to the button. When the button is clicked, the link is 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 unique name, you can enter that anchor point. Visitors jump to that section when they click the button.
• If you enter a custom URL, include the http:// or https:// prefix.

Appearance

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

• font
• colours
• borders

 

Spacing

Adjust padding and margins.

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

Advanced

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

• Adding CSS

Component Visibility

Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility 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 of the 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. The Settings panel displays.

Appearance

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

Line Space

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

Spacing

Adjust padding and margins.

• Padding is the space between the outside edge of the heading text and the inside walls of the Heading Component.
• A margin is the space between the outside edge of the Heading Component and perimeter of the Slide Component.

Advanced

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

• Adding CSS

Component Visibility

Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility 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 difference. The Add New Slide button does not insert a Button or Heading Component.

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), dragging an image from your computer into the image upload box, or selecting an image from the file manager (finger pointer button).
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. The menu displays.
2. Click the left and right arrows to change the position of a slide in the slider rotation.

10  Deleting a slide

1. Hover the mouse pointer on the Slider Component. The menu displays.
2. Click the Bin button to delete a slide.

 

11  Copying a slider

There are two ways to copy a slider: clone and group. The Clone tool copies a slider and places the new version on the same page. The Group tool places multiple instances of a master version on one or more pages. 

 

11.1  Using the clone tool

Cloning creates a new version of the slider. Each cloned slider works independently; any changes you make to one copy of the slider do not automatically appear in the other versions. You have to customize each copy separately.

1. Hover the mouse pointer on the slider. The toolbar displays.
2. Click the Clone button. A copy of the slider is placed under the original slider.
3. To delete a slider, hover the mouse pointer on a slider and then click the X button on the toolbar.

 

 

11.2  Using the Group tool

Use the Group tool to place multiple instances of one slider on different pages. The Group tool works by creating a master version of the slider. Each copy of the slider is linked to the master. Every time you make a change to the master, the on-page version of the slider changes automatically. 

Before using the Group tool, you need to nest the slider inside a Section. The Group tool creates a master copy of a Section and any content that sits inside. The Group tool cannot create a master copy of the Slider component by itself. 

As such, you must place a Slider component inside a Section component (that's called nesting) if you want to use the Group tool.

For more information about the Group tool, see:

• Creating a Group

 

 

 

Other information

If you find this article useful, you may also be interested in the following: 

• 5 essential tips on how to build a website for China
• 7 tips to increase Chinese website traffic
• Top tips to design a mobile responsive website for China