Image text slider
Image sliders bring movement to your site and usually get the most attention.
Last updated
Image sliders bring movement to your site and usually get the most attention.
Last updated
Feature of the Pro version
Images can be added in the Content tab (1). After uploading or selecting the images, the individual Slides (3) with their respective configuration are available in addition to the general slider Settings (2).
Sorting slides per drag & drop. In the Content tab, drag the image (1) over another image (2) for sorting.
Replace the images of the individual slides using the context menu (1). Now select the Replace option (2).
A modal window will appear with the usual options for selecting or uploading an image or video.
The settings tab contains the basic settings of the slider.
With Images display mode (1) you decide how the image should be displayed in the slider:
Standard/Original: The image is displayed in its entirety. The height of the entire slider element is therefore dynamic and automatically adjusts accordingly. Therefore, it is recommended that all images in the slider have the same aspect ratio, otherwise the elements below the slider "jump up and down".
Cover/Cropped: The element is completely filled with the image. For smaller images, this will cause them to be stretched (and possibly appear blurry as a result). For images with an inappropriate aspect ratio, the longer side is cut off, so the full image is not displayed.
Contain/Fixed height: The height of the element is automatically determined based on the highest image. Unlike the default mode, however, it will not be adjusted when switching between different images.
The display mode should be set to cover if a lot of text content is to be displayed in the individual slides. In the standard or contain display mode, there may no longer be enough space for text available on mobile devices, since the slider scales proportionally and also loses height.
The entire slider element can Rotate automatically (2). If this option is activated, the options Pause on mouseover (3) and Autoplay timeout (4) are available. The Autoplay timeout (4) indicates in milliseconds how long the slider should not move, after which it performs a rotational movement with the set Speed (5) in milliseconds. The speed indicates how long it takes for the rotation to change the slides - the higher this value, the slower the rotation movement.
In the Mode (6) area, the slider can be operated as a typical carousel slider or as a gallery with simple slide changes without rotation. In carousel mode, you use the Axis (7) to determine whether the slider should move horizontally or vertically.
The slider can display several elements at once using Display multiple slides (8). As soon as the option is active, you can set the number of slides visible at the same time for each viewport.
Edge padding (9) determines how much space remains between the outer edge of the slider and the visible elements in the slider. This makes it possible to make part of the next or previous element already visible at the edge of the slider, showing the user that there is additional content to navigate through.
The (10) determines the distance between the individual slides when they are visible due to the settings Display multiple sides (8) or Edge padding (9).
The Loop (11) setting ensures that the slider starts again with the first slide after the last slide - the slider then runs visually indefinitely. For this effect, the slides are copied and repeatedly appended at the end.
If the Rewind (12) option is activated, the slider is "wound" back to the beginning after reaching the last slide.
If the Loop (11) and Rewind (12) settings are inactive, the slider stops at the last slide.
Examples:
Slides are the individual items that rotate through the slider element.
With Shopware 6.5 the Sanitizer was introduced in editors, which cleans certain code content from the editor. Therefore, you can now use the Use Code Editor (1) option to switch the WYSIWYG editor to a pure code editor. Your content will not be cleaned in the code editor.
Text content can be placed on the slider using the Text-editor (2). Buttons can also be displayed using the editor.
For the extended formatting of Texts und Buttons in the editor, you can use the content of the Bootstrap Frameworks as a guide. This is implemented in the storefront and can therefore be used to its full extent.
The Link to (3) of the slide is optional - linking of the entire slide can also be omitted in favor of a call-to-action button in the editor.
The Text color (4) can be set using the color picker. Since the text on an image is often written in white and we want to keep it legible in the editor, the basic color of the text can be set using this color picker. However, the color specifications in the editor can overwrite this color specification.
The Background (5) is set for the text element area.
With Background blur (6) everything behind the content area can be blurred with the entered value in pixels. The effect is only visible if a transparent or partially transparent background color (3) was selected using the color picker.
The Vertical alignment (7) in conjunction with the Horizontal alignment (8) determines the basic placement of the text element on the image.
The Min width (9) determines the minimum width of the text element. This setting in connection with the Max width (10) determines the size of the available area of the text element.
Custom paddings (11) determines the spacing in the text element and is mainly noticeable when a Background color (5) has been set.
Custom margins (12) ensure that the text element does not stick to the edge of the image and also determines the exact positioning depending on the Vertical and horizontal alignment (7, 8).
A Border radius (13) is only visible if a Background color (5) has been defined.
The background image is aligned in the element using the Horizontal image align (14) and Vertical image align (15). The setting is only required in display mode (2) Cover in the Settings tab.
With the Overlay background image with color (16), you can mute the background with a partially transparent color as you wish, making the text more readable.
Border radius (17) rounds the corners of the image in the slide. Alternatively, the entire slider element can be given rounded corners in the Settings tab.
An Entrance-animation (18) fades in the animated text content when the slide changes. In conjunction with the Attention animation (19), the element appears less static.
If the text markings as h1, h2, h3, h4, h5, h6 do not seem big enough, you can enlarge the font representations in the editor with the help of additional classes.
If the texts and headings h1, h2, h3, h4, h5, h6 are not large enough, you can use the Enlarge headings (1) and Enlarge texts (2) options in the editor to enlarge the font displays in the preview and storefront.
The fonts scale responsively and are displayed smaller on mobile devices.
Furthermore, the so-called display-headings classes of the underlying Bootstrap framework can of course also be used in the source code of the editor. https://getbootstrap.com/docs/5.2/content/typography/#display-headings
Example:
The display-4 class has been added to the h2 tag, which significantly increases the size of the h2 heading. The classes display-1, display-2, display-3 and display-4 can be used. As of Shopware 6.5, the display-5 and display-6 classes can also be used.
The fonts scale responsively and are displayed smaller on mobile devices.
Example:
In this example, the text in the text element is placed on a partially transparent background color.
To define a partially transparent Background color (1), select a value < 100 in the alpha channel of the background color in the color picker.
In addition to the Vertical alignment (2) and the Horizontal alignment (3), the settings for the Paddings (6) are crucial. The Paddings (6) are marked green in the following image and determine the distance between the text and the inner boundary of the text element.
The Margins (7), marked orange here, are set as a percentage on the left and right. In addition to the general Vertical alignment (2) and Horizontal alignment (3), the text element will always have a distance of 10% to the left and right to the edge of the slider.
Deviating from the previous example, it would be conceivable to overlay the entire slider image with a background color and thus improve the readability of the text on an image.
The field for the Background color (1) as well as Custom padding (2) and Border radius (4) are zeroed or switched off.
Once the option Overlay background image with color (5) has been activated, additional fields for color and visibility are available.
