Een hero-sectie ontwerpen.

Learn DXPR BuilderBuild pagesVolg een tutorial

Hier bouw je een hero die het scherm vult: een achtergrondfoto, een kop, één ondersteunende regel en een knop, waarbij de foto langzamer beweegt dan de pagina terwijl bezoekers scrollen. Gebruik hem bovenaan elke pagina. Om de hele pagina eromheen te bouwen, volg je daarna Een marketinglandingspagina bouwen.

De video bouwt de hero van een rapportageproduct.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • De mediabibliotheek bevat een brede foto, minstens 1920 pixels breed.
  • De pagina is open in de builder. Ga voor een nieuwe naar Inhoud > Inhoud toevoegen > Landingspagina (/node/add/landing_page) en klik op Opslaan.

Stap 1: de sectie toevoegen

  1. Klik op Add Elements op de lege pagina en kies Sectie op het tabblad Lay-out. Beweeg erover en open More > Settings.
  2. Kies onder HTML-klassen de optie Align text center, zodat de kop, de tekst en de knop samen centreren.
  3. Zet 100% hoogte aan zodat de hero het scherm vult, en Verticaal centreren zodat de inhoud in het midden staat.
  4. Open het paneel Stijl. Klik onder Achtergrondafbeelding op Afbeelding selecteren, vink een brede foto aan en klik op Geselecteerde invoegen.
  5. Zet Achtergrondstijl op Cover zodat de foto de sectie vult.
  6. Kies een donkere kleur voor Achtergrond, die toont terwijl de foto laadt. Zet Tekstkleur op wit en klik daarna op Opslaan.

Tip

Comprimeer de foto tot onder 500 KB zodat de hero snel laadt.

Stap 2: de knop toevoegen

  1. Klik op + op de sectie en kies Knop op het tabblad Inhoud.
  2. Zet Titel op “Start gratis proefperiode”, Link op /trial, Type op Light voor contrast op de foto en Size op Large, en klik daarna op Opslaan.

Stap 3: de kop toevoegen

  1. Klik opnieuw op + op de sectie en kies Tekst op het tabblad Inhoud. Deze belandt boven de knop, omdat nieuwe elementen bovenaan belanden.
  2. Typ je kop, “Rapportage die je team bijhoudt”, en kies Kop 2 in de kopdropdown. Het thema drukt de paginatitel af als kop 1 van de pagina. Om in plaats daarvan deze kop kop 1 te maken, zie SEO-vriendelijke pagina’s bouwen.
  3. Voeg één ondersteunende regel toe: “Dashboards, waarschuwingen en integraties in één werkruimte. In minuten ingesteld, geen ontwikkelaars nodig.”
  4. Zet in het paneel Stijl de Tekstkleur op wit en klik daarna op Opslaan.

Stap 4: parallax toevoegen

  1. Beweeg over de sectie en open opnieuw More > Settings.
  2. Open het paneel Achtergrondeffecten en zet Achtergrondeffect op Parallax image. Parallaxsnelheid begint bij 20; sleep hem naar 35 voor een sterker effect en klik op Opslaan.

Stap 5: inhoud toevoegen onder de hero

  1. Beweeg over de hero en klik op Sectie hieronder toevoegen, zodat de pagina inhoud heeft om naartoe te scrollen.
  2. Klik op + op de nieuwe sectie en kies Tekst op het tabblad Inhoud. Typ een kop en een korte alinea, zet de eerste regel op Kop 2 en klik op Opslaan.

Stap 6: opslaan en vooraf bekijken

  1. Klik op Opslaan op de werkbalk van de builder.
  2. Open het weergavemenu (het oogpictogram), kies Voorvertoning en scrol naar beneden.

Verder gaan

Niet getoond in de video:

  • Overlay: zet Achtergrondeffect op Gradient en kies een donkere Beginkleur en Eindkleur met een dekking van ongeveer 50%. Tekst blijft leesbaar op elke foto. Het effect heeft één waarde, dus een overlay vervangt parallax.
  • Kortere hero: zet 100% hoogte uit en geef de sectie een eigen boven- en onderpadding in het paneel Stijl, bijvoorbeeld 100 pixels.
  • Brede knop: zet Blokknop aan voor een knop zo breed als zijn kolom.

Variaties

Alternatieven voor de bouw in de video:

Hero met video-achtergrond

  1. Zet in het paneel Achtergrondeffecten Achtergrondeffect op YouTube video.
  2. Plak de video-URL bij YouTube-video-URL.
  3. Vink onder Video-opties Herhalen en Uitschakelen op mobiele apparaten aan; laat audio uit.

Hero met alleen een verloop

Sla de achtergrondafbeelding over en gebruik het effect Gradient met twee effen merkkleuren voor een hero die snel laadt.

Gesplitste hero

  1. Voeg een Rij toe in de sectie; deze komt met twee gelijke kolommen.
  2. Zet de tekst en knop in de linkerkolom en een afbeelding in de rechterkolom.

Wat je ziet

De foto vult het scherm met je kop, ondersteunende regel en knop Start gratis proefperiode gecentreerd in het wit erop. Terwijl je naar de tweede sectie scrolt, beweegt de foto langzamer dan de pagina.

Als je de hero niet ziet zoals getoond

  • De hero is slechts zo hoog als zijn tekst. 100% hoogte staat uit. Zet het aan in de instellingen van de sectie en klik op Opslaan.
  • De foto staat stil terwijl je scrolt. Achtergrondeffect staat nog op Simpele afbeelding, Parallaxsnelheid is 0, of er staat niets onder de hero om naartoe te scrollen. Stel Parallaxafbeelding in, sleep Parallaxsnelheid boven 0 en voeg de tweede sectie van stap 5 toe.
  • De kop blijft donker op de foto. Het Tekst-element heeft geen eigen Tekstkleur. Open het paneel Stijl en zet Tekstkleur op wit.

Wat nu?