Slider

The Slider content type will allow you display multiple photos or graphics in one space. Each image will slide left automatically after a preset delay, or the user can click on the left and right arrows to advance the slides manually. Captions are available on the slides, and each slide can link to a different page when clicked if desired.

Slider Screenshot

To add a Slider to your page first, add a new row to your page by clicking Add Row at the bottom of the page building area, or by clicking the plus sign between rows when hovering over already created content.

Then in your block, choose the radio button for Content and choose “Slider” from the Content Select dropdown.

Slider Interface

Once you choose the Slider from the dropdown, you will be able to choose “Screen Width” or “Page Width” from two radio buttons under Page Width Slider. Screen Width will allow your slider to be the full width of the browser (only in a Single Block row layout). Page Width will limit your slider to the width of the row layout you choose. (Note: In Single Block row layout, your Slider will stop at the width of the rest of the content.)

Slider width interface

You can then begin adding your slides. There will be a new Add Slider Item button, and pressing it will add your first slider interface. There you’ll have a field to enter the Slider Image, optional Slider Caption and Slider Link.

Slide interface

In your new slide interface, you’ll add your first slide image by clicking Add Image. This will open the Media Library interface for you to choose your image. All slider images are 400px tall, and there is help text to show you your required image width based on your chosen block size. All slide images in a single slider should be the same size to display consistently. Tips for sizing photos are available here. If you would like your slide to have a caption, enter it under Slider Caption. If you want it to link to a page, enter the full URL (with http://… etc.) under Slider Link. Click Add Slider Item for each new slide in your slider and enter your content.

Note: The Screen Width slider images are “cropped” based on the width of the users’ screen and all images are displayed at the same height, if you have text on these images it could be illegible on narrower screens. Photo editing tips for this crop can be found here. For Page Width sliders the images are scaled instead of cropped so any text is safe from cropping but legibility on mobile screens will need to be considered. Also, all images in the Page Width slider should be the same height to avoid a large blank space below smaller slides, the whole slider will assume the height of the tallest image.

Slide adding interface

You’ll be able to reorder the slides by grabbing the left side of the slide interface near the numbers and dragging and dropping them. You can also add new slides between them by clicking the plus sign or delete them by clicking the minus sign. Edit or delete the images in the slides by hovering over the image and clicking the pencil or X icons that appear.

Slide reorder

Once your content editing is complete, you’ll need to click Publish or Save Draft in the right WordPress menu. If you are making a change to already published content, then click Update in the right WordPress menu and your changes will appear live on the page.