creating a slider - rwhyte.com fileunlike the carousel tool, a slider: has a call to action (cta)...
TRANSCRIPT
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
✓ ✕