Een hero is een grote afbeelding of video die vaak bovenaan je site wordt geplaatst. Het bevat een achtergrondafbeelding, tekst en call-to-action-knoppen. De Hero Widget ondersteunt meerdere slides, waardoor je meerdere berichten kunt presenteren.
hero frames
In dit gedeelte voegt u uw Hero-dia’s toe. Eén frame per dia. Als je maar één Hero hebt, gebruik je maar één frame.
Schuifregelaars
Als u meer dan één frame gebruikt, biedt Slider Controls instellingen voor elementen zoals animatiesnelheid.
Lay-out
Bevat lay-outgerelateerde instellingen zoals hoogte, opvulling en breedte voor desktop en mobiel.
ontwerp
Bevat ontwerpgerelateerde instellingen zoals lettertypen, lettergroottes en kleuren.
hero frames
Klik op de knop Toevoegen om uw eerste frame toe te voegen. De pijl naar beneden aan de rechterkant opent het frame. Het paginapictogram dupliceert het frame en het kruispictogram verwijdert het frame.
inhoud
Het inhoudsveld is waar u uw Hero-tekst, knoppen en, indien nodig, extra afbeeldingen invoegt met behulp van de knop Media toevoegen (niet de achtergrondafbeelding, daar komen we zo op terug).
buttons
Om een knop of knoppen aan je hero toe te voegen, klik je op Toevoegen onder de kop Knoppen. Net als bij de frame-instellingen opent de pijl-omlaag de interface, het paginapictogram dupliceert de knop en de kruispijl verwijdert de knop. Open de knop en voeg uw knoptekst, bestemmings-URL (knoplink) toe en schakel de onderstaande optie in als u de knop in een nieuw venster wilt openen. Hieronder vindt u secties voor een pictogram, ontwerp en lay-out en andere kenmerken en SEO. Dit zijn dezelfde secties als in de zelfstandige knopwidget. Zie de documentatie van de knopwidget voor een compleet overzicht van alle knopinstellingen.
Zodra uw knop of knoppen zijn toegevoegd, kunt u ze invoegen in het inhoudsveld hierboven met behulp van de shortcode:
[buttons]
Inhoud Animatie
De sectie Inhoudsanimatie is toegevoegd als onderdeel van SiteOrigin Premium. Voor elk frame kunnen verschillende instellingen voor inhoudsanimatie worden geselecteerd.
Animatie
Kies uit een lange lijst met animatietypes zoals bounce, flash, pulse en nog veel meer.
Animatie evenement
Selecteer het evenement om te animeren. Kies tussen Element komt op scherm, Element in scherm, Pagina laden, Bij zweven en Frameweergave.
Schermverschuiving
Afstand, in pixels, de inhoud moet zich boven de onderkant van het scherm bevinden voordat er wordt geanimeerd.
Animatie snelheid
Tijd, in seconden, dat de inkomende animatie duurt.
Verbergen voor animatie
Schakel dit in om het element te verbergen voordat het wordt geanimeerd.
Animatie vertraging
Tijd, in seconden, na de gebeurtenis om de animatie te starten.
Achtergrond
Achtergrond afbeelding
Gebruik de achtergrondafbeelding om uw Hero-dia-achtergrondafbeelding in te voegen. Gebruik de knop Media kiezen om een afbeelding te uploaden of kies er een uit uw mediabibliotheek. Met de knop Afbeeldingen zoeken kunt u gemakkelijk rechtenvrije stockfoto’s zoeken. Het veld Externe URL kan worden gebruikt om een afbeelding toe te voegen die niet in uw mediabibliotheek wordt gehost.
Afbeeldingsgrootte
Selecteer de afbeeldingsgrootte die moet worden gebruikt. Gebruikt Volledig of kies uit een van de miniatuurformaten die door uw WordPress-installatie worden geleverd. Als je een nieuwe afbeeldingsgrootte aan de lijst wilt toevoegen, overweeg dan om de plug-in Simple Image Sizes te gebruiken.
Type achtergrondafbeelding
Selecteer het type achtergrondafbeelding. Er is momenteel alleen dekking beschikbaar.
Als u SiteOrigin Premium gebruikt, zijn Parallax en Fixed beschikbaar als opties.
Dekking van achtergrondafbeelding
Stel de dekking van de achtergrondafbeelding in. Gebruik de schuifregelaar om een waarde tussen 0 en 100 in te stellen.
Achtergrond kleur
Stel een achtergrondkleur in.
Bestemmings URL
Koppel de Hero-achtergrondafbeelding. Voer de bestemmings-URL (link) in.
URL openen in een nieuw venster
Schakel deze optie in om de link naar de achtergrondafbeelding in een nieuw venster te openen.
Achtergrondvideo’s
Voeg indien nodig achtergrondvideo’s toe.
Video bestand
Gebruik de knop Media kiezen om uw videobestand te selecteren.
Video URL
Een externe URL van de video. Overschrijft de bovenstaande videobestandsinstelling.
Automatisch afspelen
Momenteel alleen voor YouTube-video’s.
Houd er rekening mee dat automatisch afspelen voor YouTube-video’s alleen werkt op desktopapparaten. Op mobiele apparaten wordt automatisch afspelen automatisch gedeactiveerd, maar gebruikers kunnen tikken om de video af te spelen.
Video formaat
Selecteer het videoformaat. Kies tussen MP4, WebM en Ogg.
Loop dia achtergrondvideo’s
Inschakelen om dia-achtergrondvideo’s voor het frame te herhalen.
Schuifregelaars
Als u meer dan één frame (dia) gebruikt, is de Hero Widget ook een schuifregelaar. De instellingen in dit gedeelte zijn gerelateerd aan de schuifregelaar.
Automatisch afspelen
Verander dia’s automatisch zonder tussenkomst van de gebruiker.
Automatisch afspelen pauzeren bij zweven
Pauzeer automatisch afspelen wanneer u over een dia zweeft.
Animatie snelheid
Stel de animatiesnelheid van de schuifregelaar in milliseconden in. Staat standaard op 800.
Time-out
Hoe lang elk frame wordt weergegeven in milliseconden. Standaard ingesteld op 8000.
Navigatie kleur
De slider-navigatie-elementen zijn de volgende/vorige pijlen en de navigatiestippen die aangeven hoeveel dia’s er in de Hero zitten en welke kant wordt bekeken.
Navigatiestijl
Stel de stijl van het navigatie-element in, standaard ingesteld op dun. De opties zijn Ultradun, Dun, Medium, Dik, Afgerond ultradun, Afgerond dun, Afgerond medium en Afgerond dik.
Navigatiegrootte:
Stel de grootte van de navigatiepijlen in, standaard ingesteld op 25.
Toon altijd navigatie op desktop
Navigatiepijlen en stippen worden weergegeven bij de muisaanwijzer. Schakel in om navigatie-elementen altijd op het bureaublad weer te geven.
Altijd navigatie weergeven op mobiel
Schakel deze instelling in als u wilt dat schuifregelaar-navigatie-elementen altijd zichtbaar zijn op mobiele apparaten.
Veegbediening
Sta gebruikers toe om door frames te vegen op mobiele apparaten. In het geval van een plug-in- of thema-conflict met andere swipe-gerelateerde scripts, kan deze instelling worden uitgeschakeld.
Umute-pictogram
Achtergrondvideo’s van dia’s worden gedempt. Inschakelen om een pictogram voor dempen/dempen weer te geven. Alleen van toepassing op door uzelf gehoste video’s.
Pictogrampositie dempen opheffen
Zichtbaar als de instelling voor het dempen opheffen is ingeschakeld. Kies tussen Rechtsboven, Rechtsonder, Linksonder en Linksboven.
Achtergrondvideo’s van dia’s weergeven op mobiel
Sta dia-achtergrondvideo’s toe op mobiele apparaten die automatisch afspelen ondersteunen.
Houd er rekening mee dat als je een YouTube-video gebruikt, automatisch afspelen niet wordt ondersteund op mobiele apparaten. Omdat YouTube-video’s echter handmatig kunnen worden afgespeeld op mobiele apparaten, wordt de dia-fallback-afbeelding niet gebruikt.
Lay-out
Desktop
De onderstaande instellingen zijn van toepassing op desktopapparaten. Als de instellingen in het gedeelte Mobiel hieronder leeg worden gelaten, zijn de bureaubladinstellingen van toepassing op alle apparaten.
Hoogte
Stel een hoogte in. Als er geen hoogte is ingesteld, past de Hero zich aan de inhoud aan.
Boven- en ondervulling
Stel de inhoud (tekst en knoppen) boven en onder opvulling.
Extra bovenvulling
Extra opvulling toegevoegd aan de bovenkant van de schuifregelaar.
Zijbekleding
Stel de inhoud (tekst en knoppen) zijpadding in.
Maximale containerbreedte
Stel de maximale widgetcontainerbreedte in.
Mobiel
De onderstaande instellingen zijn van toepassing op mobiele apparaten. Als u dit blanco laat, zijn de bovenstaande bureaubladinstellingen van toepassing.
Hoogte
Stel een hoogte in. Als er geen hoogte is ingesteld, past de Hero zich aan de inhoud aan.
Boven- en ondervulling
Stel de inhoud (tekst en knoppen) boven en onder opvulling.
Extra bovenvulling
Extra opvulling toegevoegd aan de bovenkant van de schuifregelaar.
Zijbekleding
Stel de inhoud (tekst en knoppen) zijpadding in.
Dia-inhoud verticaal centreren
Voor een perfecte centrering kunt u overwegen om de instelling Extra bovenvulling op 0 te zetten wanneer u deze instelling inschakelt.
Ontwerp
Koplettertype
Als uw widgetinhoud koppen, kop één, kop twee, kop drie, enz. bevat, kan deze instelling worden gebruikt om het lettertype van die koppen in te stellen. Themalettertype gebruiken is de standaardinstelling.
Kopkleur
Stel de letterkleur in van alle koppen die in de widgetinhoud worden gebruikt.
Kopgrootte
Voer de lettergrootte h1 in. h2 – h6 wordt proportioneel gedimensioneerd op basis van deze waarde.
Gebruik FitText
Pas de lettergrootte van uw kop dynamisch aan op basis van de schermgrootte.
FitText-compressorsterkte
Hoe hoger de waarde, hoe meer uw koppen worden verkleind. Waarden boven de 1 zijn toegestaan.
Kop schaduwintensiteit
Als koppen zijn gebruikt in het inhoudsgebied van de widget, kan deze instelling worden gebruikt om de intensiteit van de slagschaduw van de tekst aan te passen.
Tekst kleur
Stel de kleur in van de alineatekst die in de widget wordt gebruikt. Houd er rekening mee dat deze instelling voorrang heeft op de instelling Widget StylesDesignFont Color.
Lettergrootte
Stel de grootte in van de alineatekst die in de widget wordt gebruikt.
Tekst lettertype
Kies ervoor om het themalettertype te gebruiken of een aangepast lettertype in te stellen voor de alineatekst die in de widget wordt gebruikt.
Intensiteit tekstschaduw
Als alineatekst is gebruikt in het inhoudsgebied van de widget, kan deze instelling worden gebruikt om de intensiteit van de slagschaduw van de tekst aan te passen.
Link kleur
Stel de kleur van de tekstlink in.
Link hover kleur
Stel de zweefkleur van de tekstlink in.
Optimaliseren voor mobiel
De Hero Widget stelt de grootte van de dia-achtergrondafbeelding in om te bedekken. Cover vertelt de browser om ervoor te zorgen dat de afbeelding altijd de hele container bedekt, zelfs als de afbeelding moet worden uitgerekt of een klein beetje van een van de randen moet worden afgesneden. Als uw afbeelding op mobiel wordt afgesneden, overweeg dan een afbeelding te gebruiken met een centrale focus of onderwerp. Om meer van uw afbeelding zichtbaar te maken op mobiel, kunt u overwegen om opvulling op rijniveau in te stellen en die opvulling vervolgens op mobiel te verwijderen door Mobiele opvulling in te stellen op 0 0 0 0.