Avada theme tutorial: how to use Image Carousel elements to create the home page of the image rotation effect

In web design.Photo RotationAvada's Image Carousel element can help you quickly realize a beautiful image rotation effect without writing code. This article will show you how to use the Avada Builder Create an image rotation that takes you step by step through all the settings to easily enhance the visual appeal of your website.

I. What is the Avada Image Rotation Element?

Avada in the Image Carousel element (Image Carousel) Allows you to add multiple images to a page, with flexible settings for automatic or manual scrolling display, support forLight box effect,Link Settings,responsive design, suitable for display:

• Product Pictures
• Project Cases
• Client Logo
• Photography
• Other visual content presentations

Second, the detailed steps to create a picture rotation

1. Adding an image rotation element

Go to the page you need to edit and use Avada Builder to open the page:

• Click to add a new ContainerThe
• Container Layout Optionsfull widthThe width of the content is set to100%The
• In the container click "+" Adding Elements

• Adding a container to theImage Carousel Elements.

2. Batch uploading of images

Avada offers two types of uploadsphotographWay:

• "Add Image" option: only one image can be uploaded at a time.
• "Bulk Add"Options:Direct batch upload of imagesThe

3. Setting the basic parameters of image rotation

In "General" tab, you can make the following settings:

4. Setting up scrolling effects

• Scroll Items(Scroll Number): set the number of pictures to be displayed in each scroll, recommend setting it to "2" or leave it blank (leave it blank to scroll the current visible number by default).
• Navigation(Navigation arrows): If autoplay is not turned on, it is recommended that the navigation arrows be turned on.
• Mouse Scroll(Mouse scrolling): Recommended to be turned off in case it affects the page viewing experience.

5. Setting up the lightbox effect (Lightbox)

Light box effect: A full-screen or floating window pops up when the user clicks on an image, showing a larger version of the image.

• Image Lightbox option YesThe

tip::
If a jump link is added for an image, the lightbox effect will be disabled for that image.

Effect Preview

Save the page after completing the settings and preview the front end:

• Photo RotationThe content of the image you have selected will be displayed.
• Users can scroll through the images using the navigation arrows, or click on the image to open the lightbox and enjoy the details of the image.

III. Cautions and optimization recommendations

• suggestionImage Size and ScaleKeep it consistent so that the rotation display works best.
• If you have different sized pictures, use the"Auto" modeadaptiveDisplay, but pay attention to the overall visual effect.
• utilizationLight box effectIt can enhance the user interactive experience and is suitable for product catalogs, photography portfolios and other scenarios.
• photograph Alt TextHelps SEOIt is recommended that each image be filled out with the appropriate description.

summarize

Using Avada Builder's Image Rotation element, you can easily create visually appealing image rotation displays. The detailed steps and tips presented in this article will not only optimize the visual appearance of the page, but also enhance the overall experience of visitors. To learn moreAvada Theme Related TutorialsStay tuned!Photon fluctuation networkThe