Fase 2

1. Overzicht: wat zie je op je scherm?

• Website naam, gekoppelde domein
• Site settings, design settings en media library
• Lijst van alle website pagina’s
• Lijst van alle blog templates
• Lijst van alle site canvassen
• Gebruikers profiel
• Mobiel en desktop weergave
• Canvas raster instellingen
• Zoom buttons
• Tekst elementen
• Design elementen (rectangle, icons, embed code, video, gallery)
• Media library
• Undo en Redo buttons
• Individuele canvas informatie
• Preview en publish buttons

2. Account instellingen

Wanneer je ingelogd bent in showit, vind je de account instellingen linksonder je scherm. Hier zie je je gebruikers profiel, al je websites, kun je een nieuwe site starten, je gedeelde designs vinden, een nieuw design toevoegen aan je bibliotheek, je domeinen managen en je abonnement wijzigen.

1. View user profile: Hier vind je de berichten die mensen hebben gestuurd vanuit je contactformulier. Je vind hier ook je profiel en account instellingen. 
2. My sites: Je vind hier alle sites die je hebt. De websites die gepubliceerd zijn en de websites waar je aan werkt. Als je in 1 site design werkt en je wilt wisselen naar een ander, dan doe je dit hier. Het kan zijn dat je een keer opnieuw begonnen bent. Dan vind je de versies ook hier. 
3. Create new site: Als je met een hele nieuwe website wilt beginnen, kun je hier starten. Als je wilt beginnen met een website template van Studio Above moet je deze toevoegen aan je Library en dan vind je hem in designs. 
4. View shared designs: Hier vind je de share keys van de designs die je zelf hebt gedeeld met anderen. 
5. Add design to library: Als je wilt starten met een nieuw design, zoals onze website templates, is dit de plek waar je de share key in zult vullen. 
6. Manage domains: Je kunt hier je (sub)domeinen in- en uitschakelen. Een subdomein noemen ze een plus site. Dit is bij mij bijv. Deze handleiding, https://www.handleiding.studioabove.nl/. Dit is een subdomein van studioabove.nl. 
7. Manage subscription: Dit is waar je je abonnement kunt wijzigen of bekijken. Ook kun je de facturen downloaden en je aankoopgeschiedenis van Showit inzien. 
8. Log out: En als laatste, kun je hier uitloggen.

3.Site settings

Linksboven je scherm vind je de ‘site settings’. Hier kun je alle informatie vinden over je gekoppelde domein. 

1e tab ‘site info’:

1. Site name: De naam van je website, waarschijnlijk je bedrijfsnaam
2. Custom domain: Hier kun je je domein koppelen aan Showit of dit aanvragen. 
3. Favicon: Een favicon is een icon geassocieerd met een specifiek website, meestel zie je die in je adresbalk of het tabblad van je browser. Als je een website toevoegt aan je favorieten zie je dit icon ook. Upload een png van 32x32px voor het beste resultaat. Dit is meestal een beeldmerk van je logo of een versimpelde versie van je logo. Zorg dat het niet te veel detail heeft, want dan is het in de kleine weergave niet zo duidelijk. 
4. Vanity URL Slug: Een vanity URL is een beschrijvende, gedenkwaardige en uitspreekbare URL die gewoonlijk wordt gebruikt om URL’s om te leiden van de ene locatie naar de andere. Je gebruikt de Vanity URL om je website te checken wanneer je aanpassingen hebt gemaakt, voordat je het publiceert. 
5. Share: Links onderin vind je een share button. Als je je website wilt delen met een andere showit gebruiker, kun je dit hier doen. Dit is waar je je share key vindt. Dit zou je kunnen doen wanneer je van een account naar een nieuw account overstapt. 

2e tab ‘blog’

1. Blog domain: Dit is waar je je blog kunt koppelen. Wil je weten hoe bloggen i.c.m. Showit werkt? Klik hier voor de handleiding van Showit. of klik hier voor onze video handleiding.

3e tab ‘third party’

1. Hier kun je je google analytics account koppelen of je Facebook account. 

Sluit de instellingen pop-up via de button rechtsonder en ga terug naar je site. 

4e tab ‘social’

Dit is een nieuwe functie in Showit en zit daarom niet in al mijn website templates verwerkt.

Wanneer dit in je template verwerkt is:

1. Je kunt hier al je social media linkjes vanaf 1 plek invullen. Automatisch wordt het overal aangepast.
2. Let op: pas je een icoontje aan? Dan moet je zelf de ‘click action’ ‘link to’ aanpassen naar het gewenste sociale medium

Wanneer dit nog niet in je template verwerkt is kun je deze leeg laten of het zelf instellen:

1. Vul hier je social media linkjes in
2. Pas alle links van elk social media linkje in je website (icoontjes, tekst, afbeeldingen) aan naar ‘social link’
3. Kom je er niet uit? Lees er hier meer over in deze handleiding van Showit. (Het is handig om eerst wat te hebben gewerkt in Showit, dan is deze stap makkelijker. Pas eerst wat pagina’s aan en ga dan opnieuw naar deze stap).

4. Design Settings

Links boven in je scherm (onder ‘site settings’) vind je de design settings. Hier kun je jouw huisstijl kleuren en lettertypen instellen. 

TIP: Bekijk voordat je deze gaat instellen de video hieronder. Klaar? Ga dan door naar de stappen onder de video.

1e tab ‘site style’

1. Color palette: Als je je eigen kleurenpalet hebt, is dit waar je de kleuren instelt van de website. Dit scheelt je een heleboel tijd wanneer je start met het vormgeven van je website, want je kunt heel makkelijk in 1x de kleuren van de hele website aanpassen. Maar weet: Als je het kleuren palet wijzigt tijdens het bouwen, zullen alle kleuren secties in je website waar kleuren staan ingesteld, mee wijzigen. 
2. Type styles: Selecteer 1 van 3 punten en kies de fonts je die je wilt gebruiken op mobiel en desktop. Ook de grootte pas je aan en hoe een link binnen een tekst eruit moet zien. 

2e tab ‘fonts’

1. Google fonts: Kies een font (lettertype) van Google en voeg het toe aan je geselecteerde fonts. Verwijder de fonts rechts, die je niet gebruikt. 
2. Custom fonts: Als je een font in je huisstijl gebruikt die niet beschikbaar is in Google Fonts, kan je het hier toevoegen. Zorg dat je het eerst hebt omgezet in een wegfont en hebt geupload in je media library. (om naar de library te gaan, sluit het design settings scherm en kies ‘media library’ onder ‘design settings’ linksboven in je scherm).

5. ‘Site’ elementen

De site elementen vind je linksboven in je scherm en bevat pagina’s, blog templates en site canvases. We lopen er doorheen in dit hoofdstuk:

1. Pages: De eerste sectie is ‘pages’. Dit is de plek waar je alle pagina’s van je website vindt. 
2. Blog templates: Dit is de plek waar je de blog templates vindt. Je kunt hier alles lezen over de blog. 
3. Site canvases: De laatste sectie van je site elementen zijn de site canvases. Een site canvas helpt je om een canvas (deel van een pagina) te maken die je in verschillende pagina’s terug wilt laten komen, bijvoorbeeld je footer. Weet dat wanneer je iets aanpast in een site canvas, dit op alle plekken in je website mee veranderd waar je dit site canvas hebt ingesteld. 

Wil je meer weten over het verschil tussen pagina’s en canvases? Klik hier. 

6. ‘Page’ elementen

Linksboven zie je een 2e tab met de tekst ‘page’ (direct naast de tab van het vorige onderdeel: ’site’). Selecteer 1 van de canvassen en je vind nu wat nieuwe opties, rechts in je scherm. We zullen er stap voor stap doorheen lopen:

a. Tab: Canvas 

1. 1. Name: Schrijf hier de naam van je canvas. De naam die je hier neerzet zal verschijnen in je scherm onder de tab ‘page’. Zorg dat het een herkenbare naam is. Wanneer je meerdere canvassen hebt op 1 pagina, is het handig om een duidelijke naam te hebben, zodat je makkelijk naar de goede sectie gaat. Dit is ook handig als je de mobiele weergave gaat aanpassen. 
   2. Slug: Dit wordt gebruikt voor SEO (google vindbaarheid) doeleinden. 
   3. Stacking order: Wanneer je wilt dat dit canvas boven andere canvases komt te staan (bij overlap), kun je met dit cijfer instellen welke bovenaan komt. Hoe hoger het getal, hoe verder het naar boven komt. Lees meer over staking order hier. 
   4. Canvas type: Kies 1 van de opties in de dropdown:
      1. Normal: Bij deze instelling bepaalt de hoogte van je canvas wat je hieronder invult. 
      2. Window Height: De hoogte van je canvas wordt even hoog als het scherm, onafhankelijk van welk scherm je hebt (mobiel, verschillende laptop schermen). 
      3. Grow with height: Deze optie wordt vooral gebruikt voor blog templates en posts wanneer je WordPress voor je blogs gebruikt. 
   5. Initial Height: Dit is de hoogte van het canvas wanneer canvas type op ‘normal’ staat ingesteld.
   6. Sticky: Wanneer je een element wilt laten plakken aan de onderkant of bovenkant van je scherm. Dit doen we vaak met bijv. Een back to top button. 

Lees hier meer over de verschillende canvas typen.

b. Tab: Canvas Background

Wanneer je de achtergrond van je canvas wilt aanpassen, dan is dit waar je moet zijn! Je kunt kiezen tussen een kleur, afbeelding of video.

1. 1. Type: Kies wat je wilt, een kleur, afbeelding of video. Stel daarna de verschijnende opties in. 

c. Tab: Animation

1. Voeg animaties toe aan je canvas met gebruik van de dropdown. 

d. Tab: View transitions

1. Je kunt het type transitie (hoe het in beeld verschijnt) van je canvas hier vinden, zoals fade, slide of bounce. Je kunt dit ook gebruiken voor een tekst element, foto of icoon.

e. Tab: Scroll actions

1. Voeg een scroll animatie toe zodat bepaalde elementen een bezoeker ‘activeert’ wanneer hij/zij over de pagina scrollt. Gebruik dit niet te veel, want dan zal het de bezoeker niet ‘activeren’, maar gek maken.