Het opbouwen van een pagina start altijd bij het invoeren van de titel en het opslaan ervan. Hiermee heb je een lege pagina gecreëerd die je nu kunt gaan vullen met jouw content.

Je start met het toevoegen van een eerste inhoudsrij. Dit doe je door op de knop ‘Add Row‘ in de Visual Composer te klikken. Hiermee verschijnt de volgende weergave:

Hier vind je het volgende:

  1. Reorder Row: Klik en sleep de rij naar een andere positie.
  2. Edit number of columns: Verdeel de rij in kolommen. Gebruik hiervoor de pre-sets of maak zelf een verdeling (bijvoorbeeld 1/4 + 2/4 + 1/4).
  3. Add Column: Voeg een kolom aan de rij toe.
  4. Templates: Kies een template uit de bibliotheek.
  5. Edit Column: Stel de eigenschappen van een kolom in.
  6. Add Element: Voeg content aan de rij toe of de kolom toe.
  7. Add element of row: Voeg een element in een nieuwe rij óf een nieuwe rij toe.
  8. Delete Column: Verwijder de kolom.
  9. Toggle Row: Klap de rij open of dicht
  10. Edit Row: Stel de eigenschappen van de rij in. Bijvoorbeeld rijhoogte, achtergrondkleur of -afbeelding en tekstkleur.
  11. Copy Row: Kopieer de rij met content en instellingen.
  12. Delete Row: Verwijder de rij, met content en instellingen.

Aanvullende informatie

Iedere rij kun je verdelen in kolommen. De verschillende kolommen worden op desktop en liggende tablet weergegeven zoals ze in de visual composer worden weergegeven. Bij weergave op smartphones worden de verschillende kolommen onder elkaar geplaatst.

Om een rij te verdelen in kolommen doe je het volgende:

  1. Ga met je muis naar her icoon voor kolommen aan de linkerzijde van de rij. Hiermee verschijnt het kolommen pre-set overzicht: manual-wordpress-magazines-columns
  2. Kies een pre-set.

of

  1. Ga met je muis naar her icoon voor kolommen aan de linkerzijde van de rij. Hiermee verschijnt het kolommen pre-set overzicht: manual-wordpress-magazines-columns
  2. Klik op de link ‘Custom Layout‘ om een eigen kolomverdeling in te voeren. Hierdoor verschijnt het volgende venster: manual-wordpress-magazines-columns-custom-layout
  3. Voer in breuken de verdeling in.
  4. Klik op de knop ‘OK‘ om op te slaan.

Hier vind je het volgende:

  1. Column Name: Geef de naam van de kolom op. Deze moet uniek zijn op een pagina. Met een zogenaamde scroll-functie kan naar deze kolom worden gescrolled door bijvoorbeeld op een knop te klikken.
  2. Hide for mobile: Indien aangevinkt, wordt deze kolom verborgen bij weergave op smartphones.

Hier vind je het volgende:

  1. Background color: Selecteer een achtergrondkleur.
  2. Background image: Selecteer een achtergrondafbeelding. Zie ook de pagina ‘Een afbeelding toevoegen
  3. Background Effect: Selecteer wel of geen parallaxeffect voor de afbeelding.
  4. Parallax Direction: Stel de richting van het parallaxeffect in. Kies uit: up, down, left & right.
  5. Parallax Speed: Geef het percentage aan dat de afbeelding moet verplaatsen bij het scrollen (0-100)
  6. Background image position: Geef aan vanuit welke punt de foto geschaald/gecropt moet worden. 
  7. Background fill: Selecteer of de afbeelding de hele oppervlakte moet opvullen (cover) of dat de hele afbeelding in beeld moet zijn (contain)
  8. Padding: Geef de padding op die rondom je kolom moet worden toegepast. 

manual-wordpress-magazines-add-content

Hier vind je het volgende:

  1. Row: Voeg een rij aan een rij of kolom toe.
  2. Text Block: Voeg een tekstblok aan een rij of kolom toe. De teksteditor verschijnt: manual-wordpress-magazines-text-editor-overviewVoor meer informatie info over de teksteditor klik je hier.
  3. Single Image: Voeg een afbeelding aan een rij of kolom toe. Het volgende venster verschijnt: manual-wordpress-magazines-add-content-single-image Voor meer informatie info over een afbeelding toevoegen klik je hier.
  4. Swipeshow: Voeg een slideshow aan een rij of kolom toe. Het volgende venster verschijnt: manual-wordpress-magazines-add-content-swipeshow Voor meer informatie info over een slideshow toevoegen klik je hier.
  5. Video Player: Voeg een video aan een rij of kolom toe. Het volgende venster verschijnt: manual-wordpress-magazines-add-content-video-player Voor meer informatie info over een video toevoegen klik je hier.

Hier vind je het volgende:

  1. Row type: Kies het type rij. Je kunt kiezen uit Smart Height, Fixed Height en Expandable Height. Bij ‘Smart’ wordt de hoogte bepaald door de inhoud van de rij. Bij ‘Fixed’ wordt de hoogte bepaald door een ingevoerde waarde en bij ‘Expandable’ is het een ‘Smart Row’, die open kan klappen. Klik hier voor aanvullende opties bij de verschillende rij typen.
  2. Row width: Kies uit de opties ‘Full Width’ of ‘Grid Width’. Bij ‘Full Width wordt de achtergrond van de rij over de hele breedte van de browser geplaatst. Bij ‘Grid Width’ blijft de breedte binnen de ingestelde Grid Breedte van het account.
  3. Content width: Wanneer de ‘Row Width’ op ‘Full Width’ staat, kun je er voor kiezen om de content of binnen het Grid te plaatsen, of te verdelen over de totale breedte van de browser.Voor de eerste kies je ‘Full Width’. Voor de laatste kies je ‘Grid Width’.
  4. Shift content on mobile: Hiermee forceer je dat content die over een achtergrondafbeelding wordt geplaatst bij mobiel gebruik onder de achtergrondafbeelding wordt geplaatst. Let erop dat je een passende achtergrondkleur selecteert.
  5. Hide for mobile: Indien aangevinkt, wordt deze rij verborgen bij weergave op smartphones.
  6. Tag name: Geef een unieke naam voor deze rij op. Deze kan gebruikt worden voor segmentatie of om naartoe te scrollen
  7. Padding: Geef de padding rondom de rij op.

Hier vind je het volgende:

  1. Background Image: Selecteer een achtergrondafbeelding. Zie ook de pagina ‘Een afbeelding toevoegen’
  2. Background Effect: Selecteer wel of geen parallaxeffect voor de afbeelding.
  3. Parallax Direction: Stel de richting van het parallaxeffect in. Kies uit: up, down, left & right.
  4. Parallax Speed: Geef het percentage aan dat de afbeelding moet verplaatsen bij het scrollen (0-100)
  5. Background image position: Geef aan vanuit welke punt de foto geschaald/gecropt moet worden. 
  6. Background fill: Selecteer of de afbeelding de hele oppervlakte moet opvullen (cover) of dat de hele afbeelding in beeld moet zijn (contain)
  7. Background color: Selecteer een achtergrondkleur.
  8. Font Color: Selecteer een tekstkleur.
  9. Video Background: Selecteer deze optie wanneer je gebruik wilt maken van een video background.
  10. Youtube or Vimeo URL: Geef hier de url van de video aan. Dit kan via Youtube of Vimeo.