Utilising Digital Publishing, you can easily create attractive banners and scenic layouts without the need of external graphic software or HTML knowledge. This module helps to create banners containing HTML text or buttons, alongside images or coloured areas, all neatly organised in stackable layers, directly from your Shopware backend.
This extension can be found in our Shopware Store, the easiest way to find a specific plugin is the search-bar. Complete the order process and login to the backend of your store. Navigate to Configuration > Plugin manager > My purchases. You need to login and click the refresh button. Your new extension is now listed and can be installed. After installing the extension go to the menu entry installed and refresh. Activate the extension. Finally delete the cache under Settings > Cache/Performance > Clear Shop Cache and refresh the backend.
A banner created using Digital Publishing basically consists of three “working surfaces” lying on top of each other:
Once opened, the module appears as follows:
An unlabeled tab will open when you create a new banner. Once the banner is assigned a name, this tab will automatically adopt the assigned name.
The tab splits into two sections. The banner can be configured on the left-hand side; the preview on the right-hand side.
The banner is the fundamental surface of Digital Publishing. It specifies the framework for layers and elements and contains the background colour / image.
Layers are design surfaces that lie within the banner. One or several elements can be placed on each banner. Several layers can be stacked one on top of another; the order can be changed using drag & drop in the layer tree. You can define where elements are placed on the banner with the help of layers.
Elements always cover all of a layer's width and are added to a layer by stacking them on top of each other. You can arrange the elements' positions and order by using drag & drop in the layer tree. Additionally, moving elements between layers works the same way.
When defining background colours (i.e. on banners or layers) you can make use of colour gradients. However, be aware that not every browser is able to handle CSS gradients (especially older versions of Internet Explorer). You can learn more about CSS gradients here. To work with gradients, you just have to enter the colour values without a semicolon, i.e. linear-gradient (to right, #547faf 0%,#6bc6bf 100%).
We will now reconstruct the banner shown at the beginning of this article and test how it behaves in different sizes. This is to mimic the banner's behaviour on different devices.
Click the Unlabeled banner first, assign a name and choose a background colour or image. In this example we are assigning an image, which we already uploaded into our Media Manager.
Now we create the first layer of our banner. This will be the turquoise box that acts as background for our main tagline.
Click New layer and set orientation to the lower-left corner of the banner. We now create a margin for the layer not being too close to the bottom or side of the background image. Set the maximum width to 500px (it’s important to include the unit (px) here). The maximum width will always be wider than the text contained within, however the size is ultimately determined by the text elements (which we will create in the next step). Set the margin to 40px on the sides and 60px on the bottom and assign the colour rgba(92, 154, 171,0.75).
Since the background won’t appear until a text element is added, it makes sense to return to this page later and make final adjustments then, if required.
We now add the first text element and begin formatting the text. We recommend increasing the row height so that there is space between the text when it breaks towards the second row (in this example, we used 1.2). We will also adjust the padding so that the text has enough room within the element – 25px on the sides, 20px on the top. Now it might be feasible to test the text's behaviour in diffently sized output formats, by playing around with the image and closely watching the live preview.
Here we follow the same procedure used for the first text element, only that the margins-differs so that it appears lower on the banner. We set the padding to: 10px on the top, 25px on the sides and 40px on the bottom.
When you change the width of the banner in the preview, you can see how the banner behaves in smaller sizes and how the text wraps or breaks.
The second layer is positioned at the bottom-right corner of the banner. Slightly lower than the first banner, but with the same padding as on the sides. This layer will be a call-to-action button, linking the customer to a specific category in the online shop. The background of this layer is set to #bdab8a with a maximum width of 300px.
Here we add text once again, also with some space around the element. For this text element, we set the colour to #3e6b7cand set the margins to 20px on the top and bottom, 25px on the sides.
With the help of the live preview, you can now test how the banner will behave in different sizes and make last-minute adjustments to perfect its final appearance. When everything is in place, you can finally save the banner and use it, for example, in Shopping Worlds.
The banner you just created can now be used e.g. in Shopping Worlds. Within the Shopping Worlds module, there are two elements which can be used to support your banner: Digital Publishing and Digital Publishing Slider. These basically have the same function as the Banner and Banner Slider elements, only that they support images taken from the Digital Publishing plugin.
For users with programming experience, there are additional opportunities to develop the Digital Publishing module even further. More on that? See our wiki pages, e.g.: DevDocs.