Tuesday , April 16 2024
Home > Magezon Extensions > Magezon Page Builder Tutorials > How to Create Magento Image Carousel by Magezon Page Builder

How to Create Magento Image Carousel by Magezon Page Builder

How to make a stunning image carousel with Magezon Page Builder

In Magezon Page Builder, Image Carousel is known as the powerful tool which allows you to display dozens of gorgeous images on your page. Often, you take advantage of this element to create banners or autoplay sliders. But do you really know well how to make a stunning image carousel with Magezon Page Builder, particularly a product slider? If the answer is no, this blog post is definitely for you.

To illustrate, we will show you an example of the Image Carousel element in our restaurant landing page. Please go over the section “Restaurant Menu” before getting to the point.

Magezon Page Builder's Image Carousel in Restaurant Menu section
Image Carousel in Restaurant Menu section

Bear in mind, in this tutorial, we will focus on 3 tabs only in the Image Carousel settings. It is because they own the key features which make your page carousel stunning. So, what are they?

  • Images
  • Image
  • Carousel Options
3 selected tabs in Image Carousel Setting
3 selected tabs in Image Carousel Setting

Without any more delay, now let’s go into details!

1. Images Tab

Step 1: Upload the relevant Image. Alternatively, you can select the image from your media gallery if you have already uploaded it.

Step 2: Type Title as the dish name and Description as its price.

Step 3: In this case, we use the link for each dish so that clients can know well about that dish. To do it, choose Open Custom Link on the On Click Action field. 

Step 4: Click Select URL. Copy and paste the link of the dish on the URL bar. Plus, select the Open link in a new tab. 

Here is the back-end setting of the Images tab:

Images setting in Image Carousel of Magezon Page Builder
Images setting in Image Carousel

And below is Insert/edit link in Select Url (Step 4):

Insert/Edit link in Select URL of Image Carousel
Insert/Edit link in Select URL

Note:

  • Beautiful images can be found on photo stocks such as Unplash.com, Behance.net.
  • To resize images for better UX and SEO, use Snagit software and Tinypng.net.
  • Trash bin: By clicking this icon, you can remove the entire image. Besides, right below the trash bin is a blank bar. You can change the order of the image by filling the desired number in it.

2. Image Tab

On Image tab, put your focus on Image Size, Hover Effect, Display Content on Hover. Let me show you why these factors contribute to your stunning image carousel.

  • Image Size: Our Image Size setting is 300×220. This means all selected images are cropped to the same size to ensure the image quality on display. 
  • Hover Effect: Zoom in effect, in particular, will highlight the dish on hover by enlarging its image.
  • Display Content on Hover: Content here is the name and price of the dish. Only when customers hover over the dish will the content appear. The sole purpose is that it can not cover the image. 

Below is the Image Setting:

Image Setting in Image Carousel
Image Setting in Image Carousel

Step 1: Fill the number of the displayed images as you want. 

Step 2: Then, choose the following fields:

  • Dots Navigation: Toggle on to give users better control of the slider
  • Loop: It repeats the image slider, which creates a lively effect.
  • Autoplay – Autoplay Timeout (2500): Instead of switching to another image manually, choose Autoplay slider with a reasonable Auto Timeout at 2500.
  • Pause on Mouse Hover: This feature enables us to stop the slider from running when hovering over a dish. Much more convenient, right?
  • Lazyload: Lazyload ensures that images will not be loaded until users scroll down to them, which accordingly increases load speed and UX.

And here is the setting of the last tab, Carousel Options:

The setting of Carousel Options in Image Carousel
The setting of Carousel Options in Image Carousel

Time to Get to Work

After the detailed tutorial on how to make a stunning image carousel with Magezon Page Builder Magento 2.3, you sure are ready to take action, right? We are really honored to see it with the help of Magezon Page Builder.

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

About Nga Dong

Nga Dong
A content writer and marketer in Magezon

Check Also

Copy paste content

How to Copy Content Between Pages or Domains in Magezon Page Builder

When building a website, you will need a consistency in design. It’s the vital key …

Leave a Reply