Image Slider

  • Knowledge Base
  • Mobile Website Builder
  • Image Slider
  • Duda Support > Mobile Website Builder > Editing a Site

Overview

The Image Slider displays images in an animated slider.  You can add or remove pictures, as well as add custom titles and links to any image.

Please note that the images in image sliders do not auto-sync when the desktop site changes.

Add Image Slider

  1. From the pages section of the DudaMobile editor, first choose the page you'd like to add the Image Slider to.
  2. Go to the Content section and select the design tab.
  3. Drag the image slider feature into the editing frame.
  4. Once you've placed the feature, you'll need to designate a set of images to display.

Setup

The Image slider feature can draw images from a number of sources, as indicated by the tabs when you select the add image button in the image editing pane.

  • From Site: The images on this tab have been automatically copied from your desktop site.
  • Facebook: The images on this tab have been automatically copied from your facebook page.
  • Gallery: These images are generic images we've collected for anyone to use.
  • Uploaded: These images have been uploaded by you; you can upload additional images by pressing the Upload button. We support PNG, JPG, and GIF filenames.
  • By URL: You can link directly to any image on the internet by using this feature. Simply right-click an image and select copy image URL in your browser. Some images may be copyrighted or have copy protection, and so will not display or will display differently here.

Image Guidelines

We recommend an image width of 400, to accommodate for larger screens.  For best results, use images of the same height in the image slider.

Options

Each Image Slider element has the following display options:

General Add new images, delete images, crop images, add links to images, or add text bars to images by hovering over each individual image and pressing the appropriate button.
Design

Effects: Toggle whether the images fill the slider, autoplay, or display navigation arrows.

Color: Set the image slider's background color and image.

Text Bar

Color: Set the text bar's background color, text color, and image.

Text Style: Change the text style of your selected tab.

More

Spacing: Set the height and margin of the element.

CSS: Change the element's CSS.

HTML: Change the element's HTML.

More help on fitting images in the slider

It's important to optimize images for being viewed through a slider. You can fix this by either changing the image dimensions or by editing the slider to fit the images.

Possible solutions to fitting images into the slider;

  • Fix the height of the slider so that it is smaller. To do this, click the slider >>> edit >>> more >>> change the height accordingly
  • Change it so that the image doesn't fill the slider (which causes it to enlarge). To fix this, click the slider >>> edit >>> design >>> images fill slider (off). See slider options
  • A good image ratio for a slider is around 4:3. While it isn't necessary to have this image ratio, you should at least have all the images in a slider with equal or similar ratios to each other, otherwise, it may be difficult to fit your images into the slider.
×

Priority Phone Support

English phone support is available 18 hours a day,
Monday through Friday, 3am to 9pm (EST).

United States +1 866-776-1550 3am to 9pm (Eastern)
United Kingdom +44 (0)800-011-9071 8am to 2am (London)
France +33 (0)9-75-18-84-74 9am to 3am (Paris)
Israel +972 (0)3-720-8922 10am to 4am (Jerusalem)
Australia +61 (0)2-8880-9166 7pm to 1pm (Sydney)
To schedule a call in French, Portuguese, Hebrew or Russian, please email us at prioritysupport@duda.co
×

Please Log in as a DudaPro

Priority Phone Support is available exclusively to DudaPros. Log in to your DudaPro account now to see our international support numbers.

Log In
Not a DudaPro? Start a free trial now!