HET WORDPRESS ZONDER GEDOE STUDIEPAKKET

Transcriptie

1 X Theme customizer HET WORDPRESS ZONDER GEDOE STUDIEPAKKET De Instructie E-Books om zonder gedoe zelf je WordPress website te maken

2 INHOUD P 1 P 2 P 3 P 4 P 5 P 6 X Theme Stack: Integrity Stack: Renew Stack: Icon Stack: Ethos Welke Stack ga je gebruiken? Customizer P 7 Stack Integrity P 8 Instellingen Integrity P 9 Design Options P 10 Background Options P 11 Blog Options P 12 Portfolio Options P 13 Stack Renew P 14 Widgets Renew P 15 Instellingen Renew P 16 Design Options P 17 Background Options P 18 Typhography Options P 19 Blog Options 1 P 20 Blog Options 2 P 21 Stack Icon P 22 Widgets Icon P 23 Instellingen Icon P 24 Background Options P 25 Blog Options P 26 Stack Ethos P 27 Widgets Ethos P 28 Instellingen Ethos P 29 Design Options P 30 Background Options P 31 Post Carousel P 32 Post Carousel - Screen Display P 33 Post Slider - Blog P 34 Post Slider - Archives P 35 Navbar Options / Blog Options X Theme customizer

3 INHOUD P 36 Typography: Google Fonts P 37 Logo Font P 38 Logo Font kleur P 39 Logo Font aanpassen P 40 Navbar Font P 41 Headings Font P 42 Body and Content P 43 Site Links P 44 Buttons P 45 Header P 46 Logo and Navigation P 47 Logo P 48 Search P 49 Alignment P 50 Widgetbar P 51 Miscellaneous P 54 Blog 1 P 55 Blog 2 P 56 Archives P 57 Blog Content P 58 Portfolio P 59 Portfolio Labels P 60 Social P 61 Site Icons P 62 Custom P 63 Widgets: Main Sidebar P 64 Widgets: Header 1 en 2 P 65 Widgets: Footer 1, 2 en 3 P 66 Wordt vervolgd! P 52 Footer P 53 Scroll Top Anchor X Theme customizer

4 X Theme Je hebt bij ons een Doe het zelf Website besteld en daar horen onze E-Books bij. Het is belangrijk dat je onze gratis E-books deel 2, 3 en 4 met goed gevolg hebt afgerond voordat je in dit E-book gaat duiken! Met de Gebruikersnaam en het Wachtwoord die je van WP Academy Nederland hebt gekregen kan je inloggen in het WP-Dashboard van je website. Wij hebben er al voorbeeldpagina s en widgets in geplaatst. Met het E-book X customizer ontdek je de vele mogelijkheden die de customizer van het WordPress Thema X je biedt. Uiteraard is X Responsive! Ben je ingelogd? Dan gaan we beginnen. Succes! X Theme customizer 1

5 Stack: Integrity Eerst wil ik je een indruk geven van het thema X dat wij gebruiken voor WP Academy Nederland. In X zitten eigenlijk 4 verschillende thema s (Stack s) waar je, wanneer je met je website gaat beginnen, een keuze uit gaat maken. De eerste Stack heet: Integrity. Je hebt een Light en een Dark versie. De afbeelding toont de Light versie. Voor een frisse, professionele website die geschikt is voor vele doeleinden. Op de afbeeldingen zie je de startpagina s. X Theme customizer 2

6 Stack: Renew Een zogenaamd plat ontwerp ontdaan van alle toeters en bellen zoals kaders en schaduwen. X Theme customizer 3

7 Stack: Icon Voor als je een eenvoudig ogend en minimalistisch ontwerp voor je website wilt hebben. X Theme customizer 4

8 Stack: Ethos Heel geschikt wanneer je een gelikte nieuws- of magazine website wilt maken. X Theme customizer 5

9 2 1 Welke Stack ga je gebruiken? Wanneer je naar Weergave Aanpassen gaat, en dan het tabje Stack open klikt, zie je de 4 verschillende Stacks. 1. Selecteer de gewenste Stack. Je ziet direct de verschillen tussen de Stacks in de Preview. 2. Klik op Opslaan & publiceren als je je keuze hebt bepaald en met een bepaalde Stack verder wilt gaan. X Theme customizer 6

10 Customizer X De Customizer van het door ons gebruikte thema X is gebaseerd op die van WordPress zelf. Maar dan met veel meer mogelijkheden! Elke Stack heeft ook weer zijn eigen specifieke mogelijkheden. 1. Als je eenmaal een Stack hebt gekozen zie je dat het tabje onder de Stack veranderd naar de naam van de Stack die je hebt gekozen. Ik begin met het bespreken van de instellingen die bij de verschillende Stack s horen. X Theme customizer 7

11 1. Instellingen Integrity Klik Integrity open en je krijgt de volgende instellingen: Site Layout Maak een keuze uit Fullwidth of boxed. Site Max Width (px) Geef d.m.v. het schuifje de maximale breedte van je website aan in pixels. Site Width (%) Geef d.m.v. het schuifje de maximale breedte van je website aan voor wanneer een beeldscherm kleiner is dan de maximale breedte die je hierboven hebt aangegeven (in procenten). Content Layout Globale instelling voor de Content Layout van je website. Dit kan je eventueel per pagina of bericht aanpassen. Content Width (%) Geef d.m.v. het schuifje de breedte van je Content aan in pixels. Hiermee kan je de verhouding tussen de content en de sidebar bepalen. X Theme customizer 8

12 1. Design Options Design Kies voor de Light of Dark versie. Enable Topbar Transparency Vink aan om de Topbar/sidebar bovenin je website transparant te maken. De achtergrond- kleur of -afbeelding wordt dan niet afgedekt. Om te laten zien wat er gebeurt heb ik een achtergrond afbeelding geplaatst. Enable Navbar Transparency Vink aan om je Navigatiebalk transparant te maken. Enable Footer Transparency Vink aan om je Footer transparant te maken. X Theme customizer 9

13 1. Background Options Background Color Kies de achtergrondkleur, klik op Kleur selecteren en geef de gewenste kleur in. Background Pattern Selecteer of upload een achtergrond patroon (repeterende afbeelding). Background Image Selecteer of upload een achtergrond afbeelding. Background Image Fade (ms) Geef een Fade effect aan in milliseconden voor de achtergrond afbeelding. X Theme customizer 10

14 1. Blog Options Enable Blog Header Vink aan als je een Header wilt boven je blog (titel). Wanneer je deze aanvinkt komen onderstaande opties tevoorschijn: Blog Title Typ hier de titel van je blog in. Blog Subtitle Typ hier de ondertitel van je blog in. X Theme customizer 11

15 Portfolio Options Sort Button Text Typ hier de tekst van de sorteer button (zie afb. 2). Enable Portfolio Index Sharing Vink aan om Social media Sharing (Delen) onder je Portfolio items te tonen (zie afb. 3). X Theme customizer 12

16 Stack Renew Je kiest voor de Stack Renew? 1. Selecteer in de Customizer de Stack Renew. X Theme customizer 13

17 2 1 Widgets Renew Je zal misschien gemerkt hebben dat de sidebar en je zoekfunctie bij het wisselen van Stack verdwenen zijn. Wanneer je veranderd van Stack worden deze widgets gedeactiveerd. Wil je ze graag terug? Volg dan onderstaande stappen. 1. Ga naar Weergave Widgets in het WordPress menu en scrol helemaal naar beneden in dit venster. Je ziet ze dan staan in de Gedeactiveerde widgets. 2. Sleep ze naar boven terug in de Main Sidebar. X Theme customizer 14

18 1. Instellingen Renew Klik Renew open en je krijgt de volgende instellingen: Site Layout Maak een keuze uit Fullwidth of boxed. Site Max Width (px) Geef d.m.v. het schuifje de maximale breedte van je website aan in pixels. Site Width (%) Geef d.m.v. het schuifje de maximale breedte van je website aan voor wanneer een beeldscherm kleiner is dan de maximale breedte die je hierboven hebt aangegeven (in procenten). Content Layout Globale instelling voor de Content Layout van je website. Dit kan je eventueel per pagina of bericht aanpassen. Content Width (%) Geef d.m.v. het schuifje de breedte van je Content aan in pixels. Hiermee kan je de verhouding tussen de content en de sidebar bepalen. X Theme customizer 15

19 1. Design Options Navbar Background Mobile Button Color Mobile Button Background Mobile Button Background Hover Footer Background Geef hier de kleur aan voor de navigatiebalk. Geef hier de kleur aan van de button op een mobiel. Geef hier de achtergrondkleur aan van deze button. Geef hier de achtergrondkleur aan bij een Mousse-over van deze button. Geef hier de kleur aan voor de footer. X Theme customizer 16

20 1. Background Options Background Color Kies de achtergrondkleur, klik op Kleur selecteren en geef de gewenste kleur in. Background Pattern Selecteer of upload een achtergrond patroon (repeterende afbeelding). Background Image Selecteer of upload een achtergrond afbeelding. Background Image Fade (ms) Geef een Fade effect aan in milliseconden voor de achtergrond afbeelding. X Theme customizer 17

21 1. Typhography Options Footer Links and Text Hier bepaal je de kleuren voor de links en tekst die in de topbar en de footer. X Theme customizer 18

22 2 1. Blog Options 1 Entry Icons Dit is een icoon die aan de linkerkant van een bericht titel staat. Bepaal de kleur van dit icoon (Zie punt 2). Entry Icon Position Selecteer Creative zodat je deze iconen op een andere manier kan plaatsen. Deze optie werkt alleen als de Site Layout (P15) op Boxed staat, Content Left, Sidebar Right of Fullwidth is geselecteerd in de Content Layout (P15) én de Blog Style moet op Standard staan. Dan krijg je het resultaat zoals op de afbeelding te zien is. X Theme customizer 19

23 2 1. Blog Options 2 Entry Icon Position Selecteer Standard en de iconen komen binnen het bericht te staan naast de titel. Op de afbeelding is voor de Blog instelling gekozen voor Masonry. 2. Blog instellingen De Blog instellingen komen verderop in dit E-book aan bod, maar ik wil je hier alvast een variatie op het Blog laten zien. X Theme customizer 20

24 Stack Icon Je kiest voor de Stack Icon? 1. Selecteer in de Customizer de Stack Icon. X Theme customizer 21

25 2 1 Widgets Icon Je zal misschien gemerkt hebben dat de sidebar, zoekfunctie en de Header widgets nu verdwenen zijn. Wanneer je veranderd van Stack worden deze widgets gedeactiveerd. Wil je ze graag terug? Volg dan onderstaande stappen. 1. Ga naar Weergave Widgets in het WordPress menu en scroll helemaal naar beneden in dit venster. Je ziet ze dan staan in de Gedeactiveerde widgets. 2. Sleep ze naar boven terug in de Main Sidebar. X Theme customizer 22

26 1. Instellingen Icon Klik Icon open en je krijgt de volgende instellingen: Site Layout Maak een keuze uit Fullwidth of boxed. Site Max Width (px) Geef d.m.v. het schuifje de maximale breedte van je website aan in pixels. Site Width (%) Geef d.m.v. het schuifje de maximale breedte van je website aan wanneer een beeldscherm kleiner is dan de maximale breedte die je hierboven hebt aangegeven (in procenten). Content Layout Globale instelling voor de Content Layout van je website. Dit kan je eventueel per pagina of bericht aanpassen. Set Sidebar Width (px) Geef de breedte van je Sidebar aan in pixels. Mijn Sidebar zit, in de voorvertoning van mijn website, aan de onderkant van mijn content omdat mijn beeldscherm te klein is... X Theme customizer 23

27 1. Background Options Background Color Kies de achtergrondkleur, klik op Kleur selecteren en geef de gewenste kleur in. Background Pattern Selecteer of upload een achtergrond patroon (repeterende afbeelding). Background Image Selecteer of upload een achtergrond afbeelding. Background Image Fade (ms) Geef een Fade effect aan in milliseconden voor de achtergrond afbeelding. X Theme customizer 24

28 1. Blog Options Je ziet hier een lange lijst van kleuropties voor je Blog. Je kan hier ook elke bericht notatie hun eigen kleur geven. Klik Enable Image Post Custom Colors aan om de kleuren te activeren. Vergeet niet regelmatig om op Opslaan & publiceren te klikken wanneer je tevreden bent met het resultaat! Op de afbeelding zie je de Blog instelling Masonry. De Blog instellingen komen verderop in dit E-book nog aan bod. X Theme customizer 25

29 Stack Ethos Je kiest voor de Stack Ethos? 1. Selecteer in de Customizer de Stack Ethos. X Theme customizer 26

30 2 Widgets Ethos Je zal misschien gemerkt hebben dat de sidebar, zoekfunctie en de Header widgets nu verdwenen zijn. Wanneer je veranderd van Stack worden deze widgets gedeactiveerd. Wil je ze graag terug? Volg dan onderstaande stappen. 1. Ga naar Weergave Widgets in het WordPress menu en scroll helemaal naar beneden in dit venster. Je ziet ze dan staan in de Gedeactiveerde widgets. 2. Sleep ze naar boven terug in de Main Sidebar. X Theme customizer 27

31 1. Instellingen Ethos Klik Ethos open en je krijgt de volgende instellingen: Site Layout Maak een keuze uit Fullwidth of boxed. Site Max Width (px) Geef d.m.v. het schuifje de maximale breedte van je website aan in pixels. Site Width (%) Geef d.m.v. het schuifje de maximale breedte van je website aan wanneer een beeldscherm kleiner is dan de maximale breedte die je hierboven hebt aangegeven (in procenten). Content Layout Globale instelling voor de Content Layout van je website. Dit kan je eventueel per pagina of bericht aanpassen. Content Width (%) Geef d.m.v. het schuifje de breedte van je Content aan in pixels. Hiermee kan je de verhouding tussen de content en de sidebar bepalen. X Theme customizer 28

32 1. Design Options Navbar Background Mobile Button Color Mobile Button Background Mobile Button Background Hover Footer Background Geef hier de kleur aan voor de navigatiebalk. Geef hier de kleur aan van de button op een mobiel. Geef hier de achtergrondkleur aan van deze button. Geef hier de achtergrondkleur aan bij een Mousse-over van deze button. Geef hier de kleur aan voor de footer. X Theme customizer 29

33 1. Background Options Background Color Kies de achtergrondkleur, klik op Kleur selecteren en geef de gewenste kleur in. Background Pattern Selecteer of upload een achtergrond patroon (repeterende afbeelding). Background Image Selecteer of upload een achtergrond afbeelding. Background Image Fade (ms) Geef een Fade effect aan in milliseconden voor de achtergrond afbeelding. X Theme customizer 30

34 2 1. Post Carousel (een speciale optie voor de Ethos Stack) Enable Post Carousel Kies voor een Post Carousel, een element bovenin je website die je berichten laat zien. Klik deze aan om te activeren. Posts Per Page Geef het gewenste aantal berichten aan. Display Most Commented: Berichten met de meeste commentaren tonen. Random: Berichten willekeurig tonen. Featured: Bepaal welke berichten d.m.v. het ID van het bericht. Featured Post ID s Tekstveld waar je de ID s van je berichten invult gescheiden met komma s. Zie punt Waar vind je het ID van je bericht? Ga naar het bericht in je admin en in de URL van je browser staat een nummer. Dit nummer vul je in. X Theme customizer 31

35 1. Post Carousel - Screen Display Selecteer hier hoeveel berichten je wilt laten zien voor verschillende beeldschermformaten. Houd hiermee wel rekening met je instellingen van je pagina! Wanneer je bv.. een Boxed layout hebt gekozen voor je pagina passen er minder berichten in de Post Carousel dan bij Fullwidth. X Theme customizer 32

36 1. Post Slider - Blog Enable Post Slider for Blog De Post Slider komt boven je berichten pagina te staan, waarin je berichten kunt tonen. Klik deze aan om te activeren. Slider Height (px) Bepaal de hoogte van de Slider in pixels. Display Most Commented: Berichten met de meeste commentaren tonen. Random: Berichten willekeurig tonen. Featured: Bepaal welke berichten d.m.v. het ID van het bericht. Zie de ID uitleg bij Post Carousel. X Theme customizer 33

37 1. Post Slider - Archives Enable Post Slider for Archives De Post Slider komt boven je Archive berichten* pagina te staan. De overige instellingen zijn hetzelfde als voor je Blog die ik op de vorige pagina besproken heb. * Wil je speciale berichten (een soort uitgelichte Blog) laten zien voor je Archive Pagina s? Ik heb als voorbeeld de categorie Blog 2 gemaakt en berichten voor deze categorie. Deze categorie heb ik toegevoegd aan het menu (Weergave menu s) en achter Blog geplaatst. De berichten voor deze categorie kan je hier een andere layout geven dan voor het Blog. X Theme customizer 34

38 2 1. Navbar Options Navbar Link Side Padding (px) Verbreedt of versmalt de ruimte tussen links in de navigatiebalk in pixels. 2. Blog Options Enable Filterable Index Wanneer je deze optie aanzet kan je specifieke Categorieën laten opvallen en ze worden gefilterd. Deze optie werkt wederom met ID s die je invult bij optie Category ID s. Zie P31 voor de uitleg hoe je een ID kunt vinden. X Theme customizer 35

39 2 Typography: Google Fonts Er zijn heel veel lettertypes mogelijk. X gebruikt hiervoor Google Fonts. Je kan daar eerst een keuze maken. Let op! Niet alle lettertypes zitten in X omdat er steeds nieuwe Google Fonts bij komen die (nog) niet in X bijgewerkt zijn. 1. In dit veld kan je het woord of zin typen waar je een lettertype voor zoekt. 2. Hier staat de naam van het font en welke stijlen hij heeft (bv. regular, bold, cursief etc.). Regular is standaard. X Theme customizer 36

40 3 1 Logo Font 2 1. Je hebt een lettertype gevonden? Klik dan de Typography tab open en vink de optie Enable Custom Fonts aan. 2. Klik de LOGO tab open. Er verschijnt een hele rits met namen (afb. 3). Selecteer hier het lettertype voor je website titel. TIP! Gebruik niet teveel verschillende soorten lettertypes binnen je website, dat staat niet mooi en wordt erg onrustig! X Theme customizer 37

41 2 3 Logo Font kleur 1. Enable Logo Font Color Vink deze aan om de volgende opties te krijgen: 2. Klik op het kleurvakje Huidige kleur. Er verschijnt een kleurenpalet waarin je een kleur kunt kiezen. 3. Met de schuif ernaast kan je de kleur afzwakken of juist sterker maken. X Theme customizer 38

42 2 Logo Font aanpassen Logo Font Size De grootte van de letters, 54 px is standaard. 2. Logo Font weight De verschillende stijlen van het lettertype. 3. Logo Letter Spacing Hier kan je de ruimte tussen de letters vergroten of verkleinen. Standaard staat deze op -3. Ik heb de letters meer lucht gegeven door deze op 0 te zetten. 4. Enable Uppercase Wil je alles in HOOFDLETTER? Vink deze optie dan aan. X Theme customizer 39

43 Navbar Font 1. Navbar Font Het lettertype voor je navigatiebalk. 2. Navbar Links De kleur van je Links (titels navigatiebalk). 3. Navbar Links Hover De kleur van de Mousse-over. 4. Navbar Font Size De grootte van het lettertype. 5. Navbar Font Weight De stijl van het lettertype. 6. Enable Uppercase Wil je alles in HOOFDLETTER? Vink deze optie dan aan. X Theme customizer 40

44 2 3 Headings Font 4 Hier bepaal je het lettertype en kleur voor de titels van o.a. pagina s en widgets en de koppen (h1 t/m h6) in je teksten. Deze is gekoppeld aan de grootte van Body and Content, bij mij lopen de titels er nu uit maar dat ga ik nog aanpassen, komt dus goed! 5 1. Headings Font Kies het lettertype. 2. Headings Font Color Kies de kleur van de letter. 3. Headings Font Weight Kies de stijl van de letter. 4. Headings Letter Spacing Kies de ruimte tussen de letters. 5. Enable Uppercase Wil je alles in HOOFDLETTER? Vink deze optie dan aan. X Theme customizer 41

45 Body and Content De opties voor Pagina s, Berichten (Content), widgets en sidemenu s (Body) Body Font Kies het lettertype. 2. Enable Body Font Color Vink aan voor de kleur opties: 3. Body Font Color Kies de kleur van de letter. 4. Body Font Size Kies de grootte voor het Body lettertype. 5. Content Font Size Kies de grootte voor het Content lettertype. 6. Content Font Weight Kies de stijl voor het Content lettertype. X Theme customizer 42

46 5 1 2 Site Links De kleuren voor je links bepalen. Zorg ervoor dat het een kleur is die je aanspreekt want hij wordt ook gebruikt voor elementen binnen je website Site Links Kies je kleur. 2. Site Links Hover Kies de Mousse-over kleur. 3. Site Links Hover Voorbeeld in de website. 4. Site Links Voorbeeld in de website. 5. Voorbeeld Een element in de website die nu ook de oranje kleur heeft. X Theme customizer 43

47 2 4 3 Buttons Ga binnen de voorvertoning van je website naar de contact pagina. Je ziet onder het contactformulier een Verzenden button (6) Button Style Kies hier de stijl. 2. Button Shape Kies hier de vorm. 3. Button Size Kies hier de grootte. 4. Colors Kleur voor de tekst, achter grond, kader en de 3D-onderkant. 5. Hover Colors De Mousse-over kleuren. X Theme customizer 44

48 Header Met dit onderdeel ga je de bovenste onderdelen van je website Customizen. Probeer de verschillende opties uit om te zien wat er gebeurt! 1. Navbar Position : De positie van de navigatiebalk van je website. Static Top : Navigatiebalk blijft vast zitten aan de bovenkant. Fixed Top : Navigatiebalk blijft aan de bovenkant ook met scrollen. Fixed Left : Navigatiebalk vast aan de linkerkant. Fixed right : Navigatiebalk vast aan de rechterkant X Theme customizer 45

49 2 Logo and Navigation 1. Layout: Inline Logo aan de linkerkant van de navigatiebalk. Stacked Logo gecentreerd boven de navigatiebalk. 2. Navbar: Navbar Top Height (px): De hoogte van je navigatiebalk. X Theme customizer 46

50 2 Logo 1. Upload Your Logo: Klik selecteer een bestand. Er verschijnt een venster, selecteer je logo. Klik op open, rechts onderin, en je logo wordt geüpload en toegevoegd. 2. Logo Width (px): Geef je logo hier de gewenste afmeting. X Theme customizer 47

51 2 1 Search 1. Enable Navbar Search: Voor een zoekfunctie binnen je menu. 2. Rechts bovenin in de navigatiebalk van je website zit het vergrootglas icoontje van de zoekfunctie. Wanneer je op dit icoontje klikt ga je naar dit venster binnen je website. In de voorvertoning werkt deze optie niet optimaal. Wil je hem werkend wilt zien kijk dan naar je website. Vergeet dan niet eerst de op de button Opslaan & Publiceren te klikken in de customizer. X Theme customizer 48

52 Alignment 1. Navbar Top Logo Alignment Ruimte boven het logo ingeven. 2. Navbar Top Link Alignment Hoogte van de menu items. 3. Mobile Navbar Button Alignment Hoogte mobiel button. 4. Mobile Navbar Button Size Grootte van de button. 5. Voor een Mobiel voorvertoning: Verklein je browser tot mobiel formaat en je navigatiebalk veranderd in deze button. X Theme customizer 49

53 Widgetbar 1. Header Widget Areas Kies hier voor geen of meerdere widgets voor het uitklapvenster bovenin je website. 2. Widgetbar Button Background Kies de kleur voor de button. 3. Widgetbar Button Background Hover Kies de kleur voor de button mousse-over. X Theme customizer 50

54 Miscellaneous 1. Enable Topbar Vink aan voor een tekst en Social Media ( zie P. 32). boven je navigatiebalk. 2. Topbar Content Plaats hier de tekst voor in de Topbar. 3. Enable Breadcrumbs Klik deze aan en je ziet een weergave van je Breadcrumbs menu onder je navigatiebalk. Deze komt niet op de Home pagina te staan. Breadcrumbs zijn handig om snel terug te navigeren als je veel submenu s in je website hebt. X Theme customizer 51

55 1 Footer Footer Widget Areas Kies voor geen of meerdere widgets aan de onderkant (Footer) van je website. 2. Enable Bottom Footer Aanvinken wanneer je nog andere items in je Footer wilt hebben zoals: Enable Footer Menu Een extra Footer menu. Enable Footer Social Social media iconen (nog niet actief in de website). Enable Footer Content De keuze of je bv. copyright tekst wilt plaatsen. 3. Footer Content Tekstvenster om bv. copyright tekst in te typen. X customizer 52

56 2 3 Scroll Top Anchor 1. Enable the Scroll Top Anchor Kies voor een scroll naar boven knop. 2. Scroll Top Anchor Position Positie kiezen voor deze knop. 3. When to Display the Scroll Top Anchor (%) Geef een percentage aan wanneer deze tevoorschijn moet komen tijdens het naar beneden scrollen. X Theme customizer 53

57 2 Blog 1 Hier vind je verschillende opties voor het uiterlijk van je Blog. Op de afbeelding zijn de instellingen: 1. Style Gekozen voor Standard 2. Layout Gekozen voor Use Global Content Layout Gekozen voor Standard en Use Global Content Layout, dan is er ruimte voor een sidebar. X Theme customizer 54

58 2 3 Blog 2 Op de afbeelding zijn de instellingen: 1. Style Gekozen voor Masonry 2. Layout Gekozen voor Fullwidth 3. Columns Gekozen voor 2 rijen naast elkaar. Kies je voor Masonry en Fullwidth, dan is er geen ruimte voor een sidebar. X Theme customizer 55

59 Archives 1. Wil je een andere stijl voor je Archive Pagina s (pagina s met één bepaalde categorie berichten)? Dan kun je dat hier veranderen. Ik heb als voorbeeld de categorie WordPress gemaakt en berichten voor deze categorie. Deze categorie heb ik toegevoegd aan het menu (Weergave menu s) en achter Blog geplaatst. De berichten voor deze categorie kan je hier een andere layout geven dan voor het Blog. X Theme customizer 56

60 2 3 Blog Content 1. Enable Post Meta Kies voor Vermelding van Auteur, datum, categorie en commentaar. 2. Enable Full Post Content on Index Wanneer je deze aanzet komt het hele Blog bericht op de verzamel pagina. 3. Excerpt Length Kies het aantal woorden die je op de verzamel pagina van je blog wilt laten zien en dan Lees verder. X Theme customizer 57

61 2 3 Portfolio Dit zijn een speciaal soort berichten die je als een Portfolio kunt weergeven. Zie ook het E-book X portfolio. 1. Custom URL Slug De URL vriendelijke naam voor je portfolio. 2. Enable Cropped Featured Images De afbeeldingen in dezelfde grootte naast elkaar. 3. Content: Enable Post Meta Vermelding Auteur, datum etc. X Theme customizer 58

62 Portfolio Labels Tag List Title Optie voor een Tag titel. 2. Launch Project Title Optie voor een Project titel. 3. Launch Project Button Text Optie voor een Button die naar een project verwijst, bv. een website. Ingegeven bij je Portfolio bericht. 4. Share Project Title Titel boven de Social Media iconen. 5. Sharing: Opties voor verschillende Social Media die je wilt weergeven. 6. Plaats waar de Portfolio tags worden weergegeven X Theme customizer 59

63 2 1 3 Social 1. Hier kan je een hele rits URL s van accounts die je hebt op Social Media gebied invullen. Deze kan je gebruiken in de Topbar (2) en Footer (3). Alleen een link ingeven en deze worden automatisch gelinkt aan de bijbehorende icoon. Doe er niet teveel, dat gaat niet passen en voor je bezoeker ook niet prettig! X Theme customizer 60

64 6 2 Site Icons Favicon Een Icoontje in het tabblad naast de website titel. 2. Favicon (Set Path to Image Below) Upload via het WordPress menu Media Nieuw bestand je Favicon in.ico of.png formaat van 32x32 px. Klik op bewerken onderaan in dit venster of selecteer het bestand in de Mediabibliotheek. In het venster rechts heeft je media een URL gekregen. Zie afb. 6. Kopieer de URL hierin. 3. Touch Icon (ios and Android) Icoon voor op o.a. de iphone: gebruik een.png bestand van 152x152 px. 4. Tile Icon (Microsoft) Voor Windows 8 Metro: gebruik een.png bestand van 144x144 px. 5. Tile Icon Background Color Geef de achtergrond kleur in. X Theme customizer 61

65 3 2 Custom 1. CSS CSS code ingeven voor bv. een kleine stijl verandering. Alleen voor gevorderden! 2. JavaScript De plek om een Google Analytics script te plaatsen. WP academy Nederland vult deze al voor je in. 3. Google Analytics Wanneer je bent ingelogd kan je via een browser naar Google Analytics om een schat aan informatie te krijgen over bv. het aantal bezoekers van je website. Je hebt daarvoor wel een Google (G-mail) account nodig. X Theme customizer 62

66 1 2 3 Widgets: Main Sidebar Bij X kan je via de Customizer op diverse plaatsen in je website Widgets plaatsen om snel te kunnen werken. 1. Widgets: Main Sidebar Deze wordt standaard meegeleverd aan de rechterkant van je website met 3 Widgets. 2. Verwijderen/Sluiten van de Widget 3. Toevoegen/Volgorde aanpassen van een Widget X Theme customizer 63

67 2 1 2 Widgets: Header 1 en 2 1. Header 1 De eerste plaats in het uitklapvenster van de header om een Widget te plaatsen. 2. Header 2 De tweede plaats in het uitklapvenster van de header om een Widget te plaatsen. Verwijderen of aanpassen? Zie pagina 63. X Theme customizer 64

68 2 3 Widgets: Footer 1, 2 en 3 1. Footer 1 De eerste plaats in de Footer om een Widget te plaatsen. 2. Footer 2 De tweede plaats in de Footer om een Widget te plaatsen. 3. Footer 3 De derde plaats in de Footer om een Widget te plaatsen. Verwijderen of aanpassen? Zie pagina 63. X Theme customizer 65

69 Wordt vervolgd! Is de Customizer duidelijk geworden? Kom je ergens niet uit? Wij helpen je graag! Mail je vraag naar: Je krijgt binnen 24 uur antwoord van ons. In ons volgende E-book ga je de vele mogelijkheden van Pagina s ontdekken! X Theme customizer 66