Text banner
From theme version 3.5.0, you can use the text banner element to edit the shopping experiences
Feature of the Pro version
With Text Banner you can create great banners with real text. In contrast to the teaser element, you have an editor available to edit the text.
The search banner element (1) is in the list of selectable elements of the theme.
Settings
Content
In the Content (1) tab there is an editor (2) for creating the text on the Banner image (3). Apart from the ability to create links in the editor, you can also link the entire banner. In the Link-Type (4) you have the option of simply entering a URL or selecting products or categories directly.
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 (2) option to switch the WYSIWYG editor to a pure code editor. Your content will not be cleaned in the code editor.
Various Mouse-Over and Mouse-Out effects (5) let you control the visibility of the content on the banner image. For example, the content can only become visible when the mouse is over or disappear when the mouse is moved over the image, so that the image becomes completely visible.
Content settings
The Text color (2) can be adjusted using the color picker. Since the texts on an image are often in white color and we want to maintain readability in the editor, the basic color of the text can be set using this color picker. However, the color configuration in the editor can overwrite this color information.
The Background (3) is set for the area of the content.
With Background blur (4) 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 Horizontal alignment (5) in conjunction with the Vertical alignment (6) determines the basic placement of the contents on the image.
The Min width (7) determines how wide the content area can be at least. This setting, in conjunction with the Max width (8), creates a dynamic width between minimum and maximum width.
Custom paddings (9) determines the spacing in the content area and is mainly noticeable when a background (3) color has been set.
Custom margins (10) ensures that the content area does not stick to the edge of the image and also determines the exact positioning depending on the vertical and horizontal alignment (5, 6).
Border radius (11) are only visible if a background (3) color has been defined.
Basic settings
In the Display mode (2) setting you decide how the image should be displayed:
Standard: The image is displayed in its entirety. The height of the element is dynamic and automatically adjusts to the aspect ratio of the image. If the width of the image is less than the width of the element, the image will not be stretched to the width of the element.
Cover: The element is completely filled with the image. In the case of smaller images, this causes them to be stretched (and therefore appear blurry). Images with an inappropriate aspect ratio will have the longer side cut off, meaning the full image will not be displayed.
Stretch: The image is displayed completely. The height of the element is dynamic and automatically adjusts to the aspect ratio of the image. In contrast to the Standard mode, the image is stretched to the full available width of the element.
The display mode should be set to Cover if you want to display a lot of content on the banner. The height of the banner is based on the specified minimum height and the height of the content. The image adapts to the size of the element.
In display modes Standard and Stretch, the aspect ratio of the image dictates the height of the banner. Content can be displayed truncated if the image format does not provide enough space in the various viewports.
The Minimum height (3) is only available in display mode (2) Cover. It specifies the minimum height of the element if the content does not stretch the element larger.
Tip: We like to use the unit vh here. The unit stands for viewport height and dynamically renders the height of the element based on the height of the viewport. 50vh would therefore be 50% of the height of your viewport - on every device.
The background image is aligned in the element using the Horizontal image align (4) and Vertical image align (5). The setting is only required in display mode (2) Cover.
The Horizontal alignment (6) and Vertical alignment (7) controls the placement of the element when it is placed next to other elements in a grid of several columns.
Using the Overlay background image with color (8) option, you can tone down the background as desired with a partially transparent color and thus make the text more readable.
The entire element can be displayed with rounded corners using Border radius (9).
Image hover (10) gives you the option to apply a small hover effect to the element.
Oversized texts
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.
Last updated
