Storytelling (Advanced Banners)

Banners voor de pagina's die ertoe doen

De meeste winkels passen voortdurend dezelfde drie plekken aan: de hero op de homepage, de banner voor de campagne van deze week en de header van een categorie. Met Digital Publishing – Layered Banners & Sliders bouwt je marketingteam ze in de Shopware-administratie en publiceert het ze zonder een beeldbewerkingsprogramma te openen of een ticket voor een developer aan te maken.

• Hero op de homepage: een foto over de volle breedte, een grote titel in het lettertype van je merk, een korte regel tekst en een knop naar je nieuwe collectie.
• Campagnebanners: een solden-banner met een gekleurde overlay en een opvallende titel. Dupliceer hem voor de volgende campagne, vervang de teksten en klaar.
• Categorieheaders: een banner bovenaan elke categoriepagina die het assortiment uitlegt en naar de bestsellers linkt.
• Sliders: combineer meerdere banners in een slider en bepaal zelf de volgorde.

Een editor gemaakt voor marketeers

Open Inhoud > Digital Publishing Banners, maak een banner aan en voeg lagen toe vanuit de werkbalk: titel, tekst, afbeelding, rechthoek of video. Sleep ze op hun plaats en pas hun grootte aan op het canvas, en verfijn daarna positie, grootte, ankerpunt en klikactie in de zijbalk. Elke laag kan linken naar een pagina, een product of een externe site.

Titels krijgen een volledig typografiepaneel: de lettertypes van je thema, elk Google Font uit een doorzoekbare lijst, of een eigen lettertype uit je thema, plus grootte, dikte, spatiëring en kleur. Sleep aan de hoeken van een titel om de tekst te schalen. De editor toont Google Fonts zoals ze er echt uitzien. Lettertypes van je thema worden getoond met een vervangend lettertype, dus controleer het eindresultaat in je storefront.

Ga daarna naar Shopping Experiences, voeg een blok Digital Publishing Banner of Banner Slider toe en kies je banners uit een raster met live voorbeelden. In een slider kan je banners naar boven en beneden verplaatsen, ze verwijderen, of er een openen in een nieuw tabblad om hem te bewerken.

Responsive zonder extra werk

Een banner heeft één layout die zich aanpast aan het scherm. Gebruik % voor posities en groottes, en lagen schalen mee met de banner. Titels worden kleiner in smallere banners, zodat een titel van 72px op desktop ook op een smartphone past, en jij bepaalt de minimumgrootte. Lagen die "in container" staan, lijnen op brede schermen uit met de inhoud van je pagina. Bannerblokken in secties over de volle breedte veroorzaken geen horizontale scrollbalk.

Goed voor zoekmachines en toegankelijkheid

Alles op de banner is echte HTML, geen tekst die in een afbeelding gebakken is. Zoekmachines kunnen het lezen en bezoekers kunnen het selecteren. Kies het kopniveau van elke titel (h1–h6) zodat het past in de structuur van je pagina. Afbeeldingen hebben alt-teksten en titels, en links hebben labels voor schermlezers.

Gebruik je een Google Font? Dat wordt geladen van de servers van Google, waardoor de IP-adressen van je bezoekers met Google gedeeld worden. Vermeld het dus in je privacybeleid, of gebruik in de plaats de lettertypes van je thema.

Elke taal

Wissel de inhoudstaal in de editor om teksten, titels, afbeeldingen, alt-teksten en links te vertalen. De layout blijft in elke taal dezelfde, en de vertaalmodus vergrendelt hem zodat er niets per ongeluk verschuift.

Uitbreidbaar

Developers kunnen nieuwe laagtypes registreren in de administratie en er een bijpassende storefront-template aan toevoegen. Ze kunnen elk onderdeel van de storefront-output overschrijven via Twig-blokken, en banners en lagen uitlezen via de Shopware API, inclusief custom fields op lagen.