On this page
Overview
Sliders are a great way to advertise for a new event or make your page appear more vibrant with images. Effective use of a slider widget requires careful attention to ensure image transitions are seamless. Continue reading for more information and best practices on using slider widgets.
We don't recommend copying, then pasting, content (e.g. text, images, graphics etc.) from outside sources into any WYSIWYG editor found in MC Professional. If you do, this may bring incompatible code into your website or email client. Content from outside sources may not display as intended.
Adding slider images
To enable the slider widget, please contact the MC Pro support team.
Here’s how you can add new images while minimizing errors:
- Place your cursor and click to the right of the last image found in the text editor.
- Click the Image button at the bottom of the editor to either find and select your new image from the Media Manager or upload it from your computer.
Once you’ve clicked inside the text editor, you don't need to click anywhere else, nor do you need to hit the return key. Use the Image button highlighted above to continue adding images, one after the other.
Common issues with sliders
When uploading images into the slider widget, there are a couple of items to be aware of.
Images overlap or disappear
The most common error encountered with the slider involves the images either disappearing, or overlapping one another when viewed on your website. This occurs for one of two reasons:
- Spacing: The slider is meant to operate with no space between each image. If space is added to the widget, the slider attempts to slide the space as if it were an image, then encounters error once it fails. To remove the space, you'll likely need to edit the widget's code. Common space code is represented by the tags of <p>,</p>,<br>, and actual space created by hitting the space bar. Deleting these out should correct the issue. If you're uncertain how to edit the code, feel free to contact our help team.
- Additional code exists in the widget such as URL links that are no longer in use. Correcting this is similar to the example above in that the extra code needs to be removed from the widget. If you're uncertain how to edit this code, feel free to contact our help team.
Verify the file size
All slider images should use the same width and height (as determined by the size of the first image shown in the text editor). So if your first image uses 980 pixel width by 240 pixel height (980x240), all the following images should use those same dimensions.
Edit the image sizes prior to uploading them into your MC Professional Media Manager. Doing so will allow smooth transitions and uninterrupted movement of the Slider. There are many free online image editors available, such as FOTOR or PIXLR.
Hyperlinking an image
Click on the image from within the editor and then click the Insert/Edit Link icon from the toolbar. In the resulting pop-up window, you can paste or type in your URL.
If you want to apply hyperlinks to a set of images, we recommend that you first insert each image, save your changes, and only then place those links on top of each respective image. This method ensures that your links are applied to the right images.
Review the file name
If an image's file name contains spaces, each of those spaces will be represented by a percentage symbol (%) in the HTML code. Those symbols can result in formatting conflicts.
When editing an image's filename, feel free to replace any spaces with an underscore (_) or a dash (-).
Limitations
- All images must be the same size. You must size your images externally - outside of MC Professional - before uploading them into the Media Manager.
- Image files must be in .jpg format.
- The Slider Images widget cannot contain anything other than images and their respective links (if applicable). Refrain from adding spaces, characters, and styling of any kind.