Freelancer website
Section 1 + 2

Stap 1: Pagina aanmaken en Breakdance starten

  1. Ga in je WordPress-dashboard naar Pagina's > Nieuwe pagina.

  2. Geef de pagina een naam (“Freelancer”).

  3. Klik op Bewerken in Breakdance.

Stap 2: Hero-sectie toevoegen

De hero-sectie is het gedeelte met de achtergrondkleur, tekst (“Hi, I’m Erika...”), een knop en een grote afbeelding.

  1. Klik op de ‘+ Add’ knop linksboven in Breakdance om een nieuwe Section toe te voegen.

  2. Voeg binnen deze section een 2-koloms grid of container toe:

    • Linkerdeel voor tekst en knop

    • Rechterdeel voor de afbeelding

 

A. Tekst toevoegen (linkerkant):

  • Voeg een Heading toe met de tekst “Hi. I’m Erika. I design awesome websites.”

    • Maak “I’m Erika.” extra opvallend door ‘Erika’ te voorzien van de juiste opmaak (stel in via de tekst editor).

  • Voeg een Text element toe voor de subtekst.

    • “I am a website designer based in the heart of Camden Town, London.”

  • Voeg een Button element toe:

    • Zet de tekst op “Watch Presentation Video”.

    • Kies het juiste icoon (play), pas kleur en vormgeving aan (rond/primary).

B. Afbeelding toevoegen:

  • Upload de achtergrondfoto en stel deze in als 'Background' in de sectie.

Stap 3: "What I do the best" blok (services)

  1. Voeg een nieuwe Section toe onder de hero-sectie.goldpenguin

  2. Plaats hier een Heading (“What I do the best”) en een subtitel (optioneel).

    • Voeg een Text element onder de heading voor de korte toelichting.

(Screenshot: Nieuwe section geselecteerd met heading en toelichting)

Servicekolommen maken:

  • Kies een Grid/Columns element met 3 kolommen.

  • Voeg in elke kolom de volgende elementen toe:

    • Icon (bijvoorbeeld een medaille, gereedschap, paraplu; kies wat het beste lijkt op het origineel).

    • Heading met de titel:

      • “Website Design”

      • “Web Development”

      • “Online Marketing”

    • Text voor de korte toelichting.

      • Gebruik voorbeeldtekst uit de afbeelding of eigen tekst.

Stap 4: Stijlen en lay-out optimaliseren

  • Werk met tussenruimtes (padding/margin) zodat alles netjes en ‘luchtig’ oogt.

  • Pas kleuren en lettertypes aan zodat deze lijken op het voorbeeld (gebruik global styles via de drie puntjes rechtsboven voor consistentie).

  • Zorg dat knoppen, secties en teksten op desktop netjes uitgelijnd zijn.

Stap 5: Responsiviteit testen

  • Gebruik het apparaat-menu in Breakdance om te schakelen tussen desktop, tablet en mobiel weergave.

  • Pas waar nodig lettergroottes en marges aan.    

    Uitleg Video

Stap 6: Publiceren en controleren

  • Klik op Save en bekijk de pagina in de Frontend.

  • Vergelijk het resultaat met het origineel en pas aan waar nodig.

Tips en Extra's

  • Kopieer/dupliceer elementen om sneller identieke blokken te maken.

  • Experimenteer met animaties of kleine hover-effecten op knoppen of iconen voor meer interactie.

  • Bekijk voor inspiratie de video’s en documentatie op de officiële Breakdance website. Documentatie Breakdance

Voorbeeld structuur in Breakdance

Sectie Elementen (Breakdance) Layout
Hero/Header Section > Columns (2) Tekst + Foto
Services Section > Grid (3) Services-kaarten
 
 

Benodigde screenshots

  • Pagina aanmaken en ‘Bewerken in Breakdance’

  • Hero-section opzet in editor

  • Kolommen/services inrichten

  • Global styles/kleuren aanpassen

  • Responsiviteit testen

Toelichting per Breakdance-element

  • Section: Altijd als container voor andere elementen gebruiken. Uitleg Video

  • Grid/Columns: Voor horizontale indelingen, kies Columns voor simpele layouts, Grid voor meer geavanceerde mogelijkheden.

  • Heading/Text: Voor alle tekstblokken.

  • Button/Image/Icon: Voor knoppen, foto’s, icoontjes.

  • Style-tab: Hier kun je voor elk element kleuren, margins, fonts en meer instellen. Uileg Video