Friday , November 22 2024
Home > Magento Tips & News > Magento 2 Tutorials > Content > Magento Page Builder: All About the Slider Content Type

Magento Page Builder: All About the Slider Content Type

Magento Page Builder Slider content type
* To get more useful tutorials on Magento Page Builder, follow our series.

Magento Page Builder Slider is an effective tool for creating visually appealing slideshows that feature images, videos, or content. Like banners, sliders are often found on the home page to capture visitors’ attention and prompt them to take your desired action. In this article, you’ll discover how to create an interactive slider for your Magento site. Okay, let’s get started.

A visually stunning slider created with Magezon Page Builder

Where to Find Slider Content Type in Magento Page Builder

  • To begin, open the Magento Page Builder workspace of the page, block, or dynamic block where you want to place the slider.
  • In the left panel, expand Media to show the Slider content type.
Find Slider content type in Magento Page Builder
Master Media content types in Magento Page Builder:
How to Add Video With Magento Page Builder
How to Create Banner With Magento Page Builder
Magento Page Builder: All About the Map Content Type
Magento Page Builder: All About the Image Content Type

Explain Toolboxes in Magento Page Builder Slider

In Magento Page Builder Slider, there are two separate toolboxes, each with its own set of controls. One is used for the entire slider and displayed in the upper center of the slider on hover. One is used for an individual slide and is visible at the bottom of this slide. Below are the detailed descriptions for each toolbox.

Toolboxes in Magento Page Builder Slider
Magento Page Builder Slider Toolboxes

1. Individual slide toolbox

 Individual slide toolbox
ControlsIcon Description
LabelSlide 1Indicate the order number of the current slide. If you move Slide 1 to the place of Slide 2, then its name will turn into Slide 2.
SettingsOpen the Edit Slide page to change the slide settings.
DuplicateDuplicate the current slide.
RemoveDelete the current slide.
MoveChange the position of the individual slide in the slider by clicking and dragging the Move icon.

2. Slider toolbox

Magento Page Builder Slider toolbox
ControlsIconDescription
MoveMove the slider to any position on the stage.
AddAdd a new slide to the slider.
LabelSliderIndicate the current container name, which is Slider.
SettingsOpen the Edit Slide page to edit the slider and its container.
ShowShow the slider that was previously hidden.
HideHide the slider that is currently visible.
DuplicateDuplicate the current slider.
RemoveRemove the current slider.

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.

How to Add and Customize an Individual Slide

  • From the left panel under Media, drag a Slider placeholder to a full-bleed row on the stage. Of course, you can choose another Layout content type like Column or Tabs.
  • This newly-added slider now includes a single slide. This slide has its own editor allowing you to add and format the slide content directly from the stage. To show the text editor, click anywhere in the slider container. This is particularly useful when you need to make quick changes to any content in the editor. 
A slide has its own text editor

However, if you want to change other slide content settings like buttons or overlays, open its Setting page which covers all slide settings. 

  • We’ll change the content settings as well as other settings in Appearance, Background, and Advanced. To begin, click the dot navigation right below the slide. Then the individual slide’s toolbox appears. Click the Setting icon on the toolbox to access the Edit Slide page.
  • You are landing on the Edit Slide page with 4 sections to be dealt with:

+ Appearance

+ Background

+ Content

+ Advanced

Let’s start with the Appearance section.

1. Appearance

Appearance section on the Edit Slide page
  • Select an option to place the content container on the slide. Note that the content container is the defined area that includes the text and button. We have applied a transparent overlay so that you’ll see the content container more clearly.

+ Poster: Vertically center the content on the slide. If you apply an overlay to this slide, it’ll take up 100% of the slide width.

Poster appearance

+ Collage Left: Horizontally align the content container to the left side of this slide. When you apply an overlay to the slide, it’ll cover this area only.

Collage Left in Appearance

+ Collage Center: Horizontally center the content container on the slide. When you apply an overlay to the slide, it’ll cover this area only.

Collage Center in Appearance

+ Collage Right: Horizontally align the content container to the right side of the slide. When you apply an overlay to the slide, it’ll cover this area only.

Collage Right in Appearance
  • Slide Name: Give the slide a name. The slide name appears as a tooltip when you hover over the navigation dot right below this slide. However, it is not visible on the storefront.
Magento Page Builder slide name
  •  Minimum Height: Set the minimum height for the slide. You must enter a number followed by a valid CSS unit (e.g., 100px, 100%, 100em, 100vh) or calculation (e.g.,100vh – 100px). 

By default, Minimum Height is set to 300px. You can adjust it to show the full height of the background image or background video for a visually stunning look. 

Note: If the slide’s height is greater than the parent slider’s height, the parent slider will expand to fit the slide’s height. The value previously entered in the Minimum Height field remains unchanged, though.

2. Background

There are various background types for a slide, including Background Color/Image/Video. Also, you are offered a handful of advanced effects to make the background more lively.

Let’s start with the Background Color.

  1. Background Color

Pick a color for the slide background using one of the methods below:

  • Selecting a swatch from the color panel
  • Picking your favorite color using the color picker
  • Directly entering a color name or a valid hex color value

You may also adjust the opacity of the colors by dragging the slider beneath the color picker.

Set the background color for the slide
  1. Background Type

There are two more background types: Image and Video. Because Background Type is set to Image by default, the image settings are on display. If you select to use Video as the background, all image settings are replaced with video settings.

Image Background settings

Image Background

Let’s start with the Image Background.

Image Background settings 1

Stock Source: Pablo Merchán Montes

  • Background Image: Select the background image for the slide by:
Uploaduploading an image file from your device.
Select from Galleryselecting the image from your media library if you have previously uploaded it.
dragging  the image you want to the camera icon or browse for it from your local file system.

  • Background Mobile Image: Select a responsive background image for mobile devices. Use the same methods as the background image.
Select a responsive background image for mobile devices
  • Background Size: Adjust the scales of the background image in relation to the slide width. You have three options to choose from.

+ Cover: When you choose Cover, the background image occupies 100% of the slide width. 

Select Cover as the background size

+ Contain: When you choose Contain, the background image is limited to the slide width.

Select Contain as the background size

+ Auto: The background image is determined by the current theme’s stylesheet. Because we’re applying the Luma theme, the image dimensions stay the same.

Select Auto as the background size
  • Background Position: Select the initial horizontal position for the background image. There are nine options available to choose from.
TopCenterBottom
Left, Center, RightLeft, Center, RightLeft, Center, Right

This setting is commonly used when you want the main object in the image to be the focus of attention.

Here are two specific examples of the background image set to Top Left and Bottom Left.

+ Top Left

Seletc Top Left as Background Size

+ Bottom Left

Select Bottom Left as Background Size
  • Background Repeat: Toggle Yes to repeat the background image so that it’ll fill the slide’s space, especially used when Background Size is set to Contain.
Background repeat

Video type settings

When you choose Video as the slide background, all video settings are displayed in place of image settings. 

Background Video Settings
  • Video URL: Enter a video URL from Youtube, Vimeo, or linking valid video files with valid video extensions (.mp4 is recommended).
Background Video URL
  • Overlay Color: Choose a color as a transparent overlay over the video. 
  • Infinite Loop: Choose No to make the video play once. Choose Yes to repeat the video endlessly.
  • Lazy Load: Choose Yes to make the video load only when it’s visible. Choose No to make the video load with the page even when it’s not visible on the screen. 
  • Play Only When Visible: Choose Yes if you want the video to play only when it’s visible on the screen. Choose No if you want the video to begin playing as soon as it loads.
  • Fallback Image: Apply an image to cover the video before this video loads. This case, the image is called a fallback image, and it serves as a perfect replacement for the video that isn’t loading. 

You can either upload the fallback image from your devices or choose an existing image from your media gallery. Another option is to browse for the image or drag it to the camera icon.

Okay, let’s move on to the Content section.

3. Content

On the Settings page, you change not only the content in the text editor but other settings like slide link, button, or overlay.

Content section on the Edit Slide page
  • Message Text: Enter the text that appears on the slide. 
  • Link: Select the destination page to which customers are taken when they click anywhere in the slide. There are four different link types to choose from.
  • URL: Enter any URL attached to the slide. You can enter a relative link (that only has the path) or a fully-qualified link (that includes a protocol (e.g.https), the optional subdomain (e.g., www), domain (magezon.com), and path (which has the directory and slug, e.g.,/magezon-page-builder-for-magento-2). 
A fully-qualified URLhttps://www.magezon.com/magezon-page-builder-for-magento-2.html 
A relative URL/magezon-page-builder-for-magento-2.html 

+ Product: Choose a product page as the destination page using the product name or SKU. Type either a full name or a part of your wanted product on the search bar to find the product quickly. Then choose it from the result list.

Choose a product page as the destination page

+ Category: Choose a category or subcategory page as the destination. You can expand the section in the category tree to take the category or subcategory. To quickly locate the category or subcategory, you can type either a full name or a part of your wanted category or subcategory on the search bar. 

Choose a category or subcategory page as the destination

+ Page: Choose a content page as the destination page. To find the page quickly, type either full name or a partial, then select your desired page from the search results.

Choose a content page as the destination page
Magento doesn’t allow attaching links in Message Text and in the slide simultaneously since the 2.4.1 release due to display issues on the storefront. Simply put, if you add a link to the slide, you can’t do so in Message Text.
Magento doesn’t allow attaching links in Message Text and in the slide simultaneously

Tick the Open in new tab checkbox to avoid visitors leaving your page.

  • Show button: Choose one of the options below to display the button on the slide.
Display the button on the slide

+ Always: When you select this, the button appears on the slide all the time.

+ On Hover: When you select this, the button only appears on the slide when you hover over it.

+ Never show: The button doesn’t show up on the slide when you select this. As a result, the two fields, Button Text and Button Type, will be disabled.

  • Button Text: Add text that is displayed over the button.
  • Button Type: Choose the style for the slide button. You have three styles determined by the current theme (Luma)

+ Primary: Your button appears with a blue background and white text.

Primary button on the Magento Page Builder slide

+ Secondary: Your button appears with white background and dark gray text.

Secondary button on the Magento Page Builder slide

+ Link: Instead of a button, a link shows on the slide.

Link on the Magento Page Builder slide

Read more: How to Add Buttons in Magento Page Builder

  • Show Overlay: Apply an overlay to the content container.

+ Always: The overlay always appears over the content container.

+ Hover: The overlay appears over the content container only when you hover over it.

+ Never Show: The overlay doesn’t appear over the content area.

Apply an overlay to the content container
  • Overlay Color:  Select a color for the overlay over the content container.
Select a color for the overlay over the content container
Overlay color

4. Advanced

  • Alignment: Select an option to align both the text and the button in relation to the content container horizontally: Default, Left, Center, Right.

+ Default: Use the default alignment setting that is specified by the style sheet of the current theme.

the default alignment setting

+ Left: Align the text and the button to the left side of the content container.

the left alignment setting

+ Center: Center- align the text and the button side on the content container.

Center- align the text and the button side on the slide.

+ Right: Align the text and the button to the right side of the content container.

Align the content and button to the right side of the slide

You’re probably confused about why the text is not aligned to the right side of the slide like the button. It’s because the text’s alignment setting in Message Text overrides the one in Advanced. Specifically, we previously aligned the text to the left side of its container in the Message Text editor so the text is always on the left side.

 the text’s alignment setting in Message Text
  • Border: Apply one of the following styles to all slide sides.
Select a style to all slide sides
Border styles for the individual slide
Source: W3

If you select any options apart from None then you can customize the border color and width.

  • Border Color: Set a color for the slide borderline. Use one of the methods below:

+ Pick a swatch in the color panel.

+ Click and drag the cursor inside the color picker.

+ Type a color number or valid hex value.

You can adjust the color opacity of the slide border.

 Color for the slide borderline
  • Border Width: Set the thickness for the slide border. (Unit: px)
  • Border Radius: Set the round degree for the slide border’s corner. (Unit: px)
  • CSS Classes: Enter the names of CSS classes that you want to apply to the slide. To separate many class names, use a space. This is optional.
  • Margins and Padding: Set the slide’s outer margins and inner padding.

+ Margin: It’s the blank space outside the border of the slide.

+ Padding: It’s the blank space between the slide’s border and its content container’s border.

Set the slide’s outer margins and inner padding

Okay, we’re done. I’m pretty sure you’ve gained a good understanding of adding and customizing an individual slide. But that’s just the beginning. When you’re going to use the Slider element, you are more likely to create a slider with multiple slides, not just an individual one. So, let’s continue!

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.

How to Add Multiple Slides

To create multiple slides, use one of the following approach:

Method 1: Duplicate the slide I’ve created before.

This method saves you time because you just need to duplicate the existing slide that you have already configured. So, here are steps:

  • Click on the navigation dot right below the slide, then a toolbox with Duplicate control appears. Select the Duplicate icon on the toolbox handle.
Duplicate the slide
  • To edit the slide, click on the navigation dot below the new slide to show its toolbox. Select the Settings icon. Then, change the individual settings as guided above.
  • Click Save when you’re finished. You can create more slides using the above method.

Method 2: Create a New Slide

  • Mouse over the slide container in the middle top to show its toolbox. Click the Add icon.
Click the Add icon to add more slides
  • After that, the slider has one more individual slide with its own toolbox and navigation dot. This new slide is completely blank.
The newly created individual slide with its own toolbox and navigation dot

How to Edit Slider Settings

The Edit Slider page is divided into 2 main sections: Slider Settings and Advanced.

  1. Slider Settings
  • Mouse over the slider container to display its toolbox. Then click on the Settings icon on the toolbox handle.
The slider container with its toolbox
  • Minimum Height: Set the minimum height for the slider. You need to enter a number followed with a valid CSS unit (e.g. 50px, 50%, 100em, 100vh), or a calculation (e.g., 100vh – 100px). Otherwise, a yellow notification will show up.
Set the minimum height for the slider
  • Autoplay: When you choose Yes, the slider will automatically play once the page loads. When you choose No, the slider won’t automatically play; therefore, customers have to click on the navigation dots or arrows to see the next slide.
  • Auto Speed: If you set Autoplay for your slider, you can adjust the auto speed which is the delay in a number of milliseconds between slides. By default, the time-out is 4000ms (4s). 

Note: Setting the time-out too long may cause the page to load slowly. Also, don’t set it too short, as it may negatively affect the user experience.

  • Fade: Toggle Fade to Yes to make the transition between slides smoother. The fade keeps the slides in place while the content transitions smoothly from one slide to the next.

If you don’t use the fade effect between slides, you’ll see a horizontal movement when transitioning them.

  •  Infinite Loop: To make the slider repeat endlessly, toggle this field to Yes.
  •  Show Arrows: Choose Yes to show Next and Previous arrows to the left and right side of each slide. These arrows act as the navigation control for the slider.
Show Next and Previous arrows
  •  Show Dots: Choose Yes to show a small series of navigation dots that appears right below the slider. Each represents an individual slide of the slider.
Show a small series of navigation dots

When finished, click Save to save the changes. Let’s proceed to the last section, Advanced.

  1. Advanced 

All Advanced settings of a slider are quite the same as the ones of an individual slide. The difference here is Alignment

In the Advanced section of a slider, it’s the alignment of the content and button within the content container. Meanwhile, in the individual slide’s one, it’s the alignment of the content container in relation to the slide.

Let’s See How Our Slider Looks

After explaining all settings in the Slider content type of Magento Page Builder, we want to show you a slider that we’ve created. Take a look at the video below.

The slider made with Magento Page Builder Slider

Looks quite good, right? If you want to practice creating this slider from scratch, here are all settings used to build the slider. Hope it helps you a lot.

Parent Row
Row display typeFull-bleed 
Slide
1. Slider settings
AutoplayYes
Autospeed 3000ms (3s)
FadeYes
Infinite LoopYes
Show DotsYes
2. Slide 1 & Slide 2 settings: Image as the slide background
AppearanceCollage Left
Minimum Height750px
Background TypeImage for slide 1 (Source: Pablo Merchán Montes). Image for slide 2 (Source: Loija Nguyen)
The image size is larger so use Tinypng to reduce the file size. As a result, your page loads faster.
Background SizeCover
Background PositionCenter 
Message TextText– Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Format Text– Font size: 14px- Line height: 28px- Font color: White- Alignment: Center
LinkURL https://www.magezon.com/magezon-page-builder-for-magento-2.html   
Open in new tabTick the checkbox
Show buttonAlways
Button TextGet started
Button TypePrimary
Show OverlayAlways
Overlay Colorrgba(240, 240, 240, 0.33)
AlignmentLeft
Top-padding200px
Left-padding100px
3. Slide 3 settings: Video as the slide background
Minimum Height750px
Background TypeVideo (Source: https://www.youtube.com/embed/PZ4pctQMdg4
Infinite LoopYes
Lazy LoadYes
Play Only When VisibleYes
  • Make sure you enable the page that includes this slider.
Enable the page
  • In the Pages grid, select this page. Click the Select dropdown in the Action column, then choose View.
View the page

That concludes our discussion of Magento Page Builder Slider. If you’ve got a good handle on it, then it’s time to roll up your sleeves and get to work. 

In the next part, we would like to promote the Slider element from our Magezon Page Builder, especially useful for those looking for an advanced alternative.

Level up Your Slider With Magezon Page Builder for Magento 2

It can’t be denied that Magento Page Builder Slider has a plethora of features that allow you to create engaging sliders for your website. So why should you consider using the Slider element of our Magezon Page Builder? You might be wondering. Let me tell you why.

  • When you use Magento page Builder Slider to customize multiple slides, you must open each individual slide to change its settings. This takes a lot of time and effort. And the Slider of Magezon Page Builder can save you tons of time. Because the settings of all slides in our builder are gathered in one place (tab Slider), you can customize many slides without switching back and forth.
  • When it comes to the content settings, Magento Page Builder Slider only offers a few customization options for content and buttons. Meanwhile, using Slider or Magezon Page Builder, you can customize heading, content, caption, button, and video, and each of which has its own set of handy features that are well-organized. As a result, you can quickly modify any settings you desire.
Offers plenty of customization options
  • What distinguishes Slider of Magezon Page Builder from Magento Page Builder is a much greater number of carousel options, such as Navigation Position, Navigation Size, Dot Inside, Dot Speed, Margin, Stage Padding, Animation Effects, and so on.
Slider of Magezon Page Builder has a much greater number of carousel options
  • The sliders built with Magezon Page Builder are 100% responsive. It means they can automatically adjust their background image, background video, and content to look good in any screen size. 
  • Other features

We highly recommend trying the demo of Magezon Page Builder to explore what Slider can do for you.

Furthermore, if you want to improve other aspects of your web pages, not just sliders, Magezon Page Builder with more than 50 elements can help you out. 

It’s Time to Roll up Your Sleeves

With a bunch of settings that Magento Page Builder Slider provides, you can absolutely create striking slideshows to attract and engage your site visitors. Now it’s time to get this thing started. Don’t worry if you run into snags because we’re here to help you. When your work is done, please share it with us. 

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

How to Create a Halloween Landing Page in Magento

It’s Halloween today. We’re gonna show you how to create a Halloween landing page using …

Leave a Reply