{"id":2646,"date":"2019-05-28T14:29:26","date_gmt":"2019-05-28T14:29:26","guid":{"rendered":"https:\/\/croissant.huysmans.me\/documentation\/modules\/hero-banner-module\/"},"modified":"2019-06-09T22:26:38","modified_gmt":"2019-06-09T22:26:38","slug":"hero-banner-module","status":"publish","type":"manual_documentation","link":"https:\/\/croissant.huysmans.me\/nl\/documentation\/modules\/hero-banner-module\/","title":{"rendered":"Hero banner module"},"content":{"rendered":"<p>Als je hiervoor kiest, kies je voor een duidelijke hoofd-banner voor jouw winkel. Hier kun je grote, indrukwekkende introductieafbeeldingen, carrousels en zelfs video&#8217;s plaatsen om zo je gebruikers te verwelkomen.<\/p>\n<p>Er zijn twee typen lay-out voor de hero banner: in een vak en over de volledige breedte. In beide gevallen kun je zowel afbeeldingen, als een video of carrousel gebruiken.<\/p>\n<div class=\"row\">\n<div class=\"col-md-6\">\n<h4>In een vak<\/h4>\n<p><img decoding=\"async\" class=\"img-responsive img-thumbnail\" src=\"https:\/\/croissant.huysmans.me\/wp-content\/uploads\/2019\/04\/Screen-Shot-2019-05-27-at-11.41.31-AM-1024x521.png\" alt=\"\" \/><\/p>\n<\/div>\n<div class=\"col-md-6\">\n<h4>Over de volledige breedte<\/h4>\n<p><img decoding=\"async\" class=\"img-responsive img-thumbnail\" src=\"https:\/\/croissant.huysmans.me\/wp-content\/uploads\/2019\/04\/Screen-Shot-2019-05-27-at-11.42.16-AM-1024x541.png\" alt=\"\" \/><\/p>\n<\/div>\n<\/div>\n<p>Je kunt hier kiezen voor een carrousel (als je meer dan \u00e9\u00e9n afbeelding hebt). In dit geval kun je deze automatisch laten afspelen en de snelheid hiervan instellen. Heb je meer dan \u00e9\u00e9n slide? Dan kun je ze in meerdere kolommen weergeven, met een maximum van drie kolommen.<\/p>\n<div class=\"row\">\n<div class=\"col-md-4\">\n<h4>1 kolom<\/h4>\n<p>Hero beeldformaat: <strong>3020px x 1344px<\/strong><\/p>\n<\/div>\n<div class=\"col-md-4\">\n<h4>2 kolommen<\/h4>\n<p>Hero beeldformaat: <strong>1680px x 1444px<\/strong><\/p>\n<\/div>\n<div class=\"col-md-4\">\n<h4>3 kolommen<\/h4>\n<p>Hero beeldformaat: <strong>994px x 1344px<\/strong><\/p>\n<\/div>\n<\/div>\n<h4>Meerdere slides in een hero banner<\/h4>\n<p>In een carrousel kun je maximaal drie slides toevoegen. Iedere slide heeft eigen instellingen. Wil je maar \u00e9\u00e9n afbeelding of video weergeven? Vul dan alleen de opties in van die ene slide en activeer die.<\/p>\n<p>Er kan maar <strong>\u00e9\u00e9n video<\/strong> in de carrousel zitten. Dit heeft te maken met de prestatie en bruikbaarheid van de website. Om die reden kun je alleen van de eerste slide een video maken. Wil je een video gebruiken? Het wordt aanbevolen om dan slechts \u00e9\u00e9n dia te gebruiken.<\/p>\n<p>Om een video-slide te maken, ga je naar B<strong>ackoffice &gt; Hulpprogramma&#8217;s &gt; Bestanden<\/strong> en upload je de .MP4-video die je wilt gebruiken. Het geluid wordt automatisch uitgeschakeld en de video automatisch herhaald voor een betere gebruikerservaring. Gebruik bij voorkeur een korte en kleine video met een resolutie van 720p of 1080p. Hoe kleiner het bestand, hoe beter.<\/p>\n<p>Wat betreft het plaatsen van de tekst: ook hier zijn meerdere opties voor. Kies die plaatsing die het beste bij jouw afbeelding past. Je kunt hier ook een titel, ondertitel, knop en een URL toevoegen om aan deze pagina te linken.<\/p>\n<p>Tekstkleur is hier erg belangrijk. Kies de kleur die het meest contrasteert met de achtergrondafbeelding. De tekst moet altijd leesbaar zijn.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive img-thumbnail\" src=\"http:\/\/voila.huysmans.me\/images\/img-hero-options.png\" alt=\"\" \/><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2499,"menu_order":7,"template":"","manualdocumentationcategory":[61],"manual_doc_tag":[],"class_list":["post-2646","manual_documentation","type-manual_documentation","status-publish","hentry","manualdocumentationcategory-themendokumentation"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/manual_documentation\/2646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/manual_documentation"}],"about":[{"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/manual_documentation\/2646\/revisions"}],"predecessor-version":[{"id":2717,"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/manual_documentation\/2646\/revisions\/2717"}],"up":[{"embeddable":true,"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/manual_documentation\/2499"}],"wp:attachment":[{"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/media?parent=2646"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/manualdocumentationcategory?post=2646"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/croissant.huysmans.me\/nl\/wp-json\/wp\/v2\/manual_doc_tag?post=2646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}