X Theme one page website HET WORDPRESS ZONDER GEDOE STUDIEPAKKET De Instructie E-Books om zonder gedoe zelf je WordPress website te maken
INHOUD P 1 X Theme one page website P 2 Admin Pagina s P 3 Structuur P 4 ID P 5 Sjabloon P 6 Content P 7 One Page menu aanmaken P 8 One Page menu inrichten P 9 Voorbeeld One Page P 10 Extra menu aanmaken P 11 Voorbeeld P 12 Wordt vervolgd! X Theme one page website
X Theme one page website Je hebt bij ons een Doe het zelf Website besteld en daar horen onze E-Books bij. Dit is deel zeven: X Theme one page website. Met dit E-book ga je leren om een one page website te maken. Dat wil zeggen dat je je content op één, de eerste, pagina komt te staan. Natuurlijk kan je binnen deze pagina wel bijv. doorverwijzen naar een andere pagina voor meer info of ervoor kiezen dat je blog of contact gegevens aparte pagina s blijven binnen je website. Kies eerst de gewenste Stack in de Customizer. De kleuren etc. van de website pas je ook aan in de Customizer. Het is ook handig om al een idee te hebben van de structuur die de website gaat krijgen. Succes! X Theme one page website 1
2 Admin Pagina s Ga binnen je admin naar pagina s en maak een nieuwe pagina. In dit voorbeeld heet de pagina Home. 1 1. Scroll naar beneden naar de Page Settings en kies in dit venster One page. Standaard staat deze op Deactvivated. 2. Disable Page Title vink ik aan omdat ik de titel niet wil tonen. X Theme one page website 2
1 2 3 Structuur 1. Scroll weer naar boven en zet de Visual Composer aan door op de knop Backend Editor te klikken. 2. Je kan nu de Structuur van je pagina gaan bepalen van je website. Wat wordt het eerste deel van je pagina? In mijn geval is dit tekst maar het zou bijv. ook een slider kunnen zijn. Wanneer je het weet ga je een rij toevoegen zoals je al hebt geleerd. Klik op de + van de rij en kies het element die je nodig hebt. Voeg je content toe. 3. klik vervolgens op dit potloodje en ga door naar de volgende pagina. X Theme one page website 3
1 2 ID 3 1. Je zit nu in het Bewerken Kolom venster. 2. In dit venster kan je behalve een effect bepalen ook je rij een ID geven. Voor een One Page moet je elke rij die je gaat maken een ID meegeven! Deze eerste rij heet bij mij Home. De volgende rijen die je gaat maken en nodig hebt om je content te tonen geef je ook een duidelijk en uniek ID mee. 3. En natuurlijk Opslaan. X Theme one page website 4
Sjabloon Naar aanleiding van de content en de structuur die je wilt hebben kies je ook een Sjabloon voor je website. 1. In het Pagina-attributen venster kies ik bij Sjabloon: Blank - No Container Header, Footer. 2. In de Customizer kies ik bij Site Layout en bij Content Layout voor Fullwidth. Dit is een persoonlijke keuze, maar ik vind deze optie het mooiste voor een One Pager. 2 1 X Theme one page website 5
2 Content 1 De belangrijkste punten om een One Page website te maken binnen je pagina weet je nu. Je kan nu je content plaatsen in diverse rijen. Elke rij geef je een ID die betrekking heeft met de content. 1. Wanneer je een Layout hebt gekozen met meerdere kolommen hoef je alleen de eerste een ID te geven. 2. Hier kan je elke rij een aparte achtergrondkleur of afbeelding geven en bijv. kiezen voor een Parallax effect. Maar dat wist je natuurlijk al... X Theme one page website 6
1 2 3 One Page menu aanmaken Ga naar Weergave Menu s. 1. Klik op voeg een nieuw menu toe. 2. Geef je menu een naam. 3. Klik op menu aanmaken. X Theme one page website 7
1 5 2 3 Home 4 One Page menu inrichten 1. Klik het Links venster open. 2. In het URL venster verander je http:// voor een # en hierachter de ID van je content. (geen hoofdletters!) 3. Vul de Linktekst (de naam in de navigatiebalk) in. 4. Klik op aan menu toevoegen. 5. In de Menustructuur komen alle items die je op de One page website en navigatiebalk wilt tonen en eventueel in de goede volgorde slepen. X Theme one page website 8
Voorbeeld One Page De One Page Website ziet er nu zo uit, maar ik wil ook nog mijn Blog en Contact op mijn website hebben. Deze kunnen ook op de One Page getoond worden maar het kan ook op aparte pagina s binnen je website. Op de volgende pagina wordt dit uitgelegd. X Theme one page website 9
1 2 3 5 Extra menu aanmaken 4 De Blog en de Contactpagina zijn al gemaakt en de One Page Navigation staat op Deactivated. (Zie punt 1 op pagina 2) Ga naar Weergave Menu s. 1. Klik op maak een nieuw menu en geef deze een naam. 2. Selecteer bij Pagina s Home, Blog en Contact en voeg deze toe aan het menu. 3. Voeg nu de items toe die ook op je One Page staan. Vul bij URL /#IDnaam in en de linktekst. Let op de / voor de ID! Denk aan de juiste volgorde! 4. Klik op aan menu toevoegen. 5. Klik op Menu opslaan. X Theme one page website 10
Resultaat One Page Dit is het uiteindelijke resultaat geworden. Wanneer je nu naar je Blog gaat is dit een aparte pagina geworden. Klik je op de items die in de One Page Navigation staan ga je direct naar dat onderdeel. X Theme one page website 11
Wordt vervolgd! Is de one page website duidelijk geworden? Kom je ergens niet uit? Wij helpen je graag! Mail je vraag naar: support@wpacademy.nl Je krijgt binnen 24 uur antwoord van ons. In ons volgende, voorlopig laatste, E-book ga je leren hoe je een Contactformulier maakt. X Theme one page website 12