Homepagina - Logo en favicon plaatsen

Transcriptie

1 Homepagina - Logo en favicon plaatsen

2 Wat leer je in dit hoofdstuk: - Hoe je een logo kunt plaatsen - Hoe je een favicon kunt plaatsen - Hoe je tekst kunt aanpassen in de tabbladen van je browser Inleiding Nadat je de naam weet van je bedrijf en het assortiment en je doelgroep is bepaald ga je een logo maken. Het logo van een bedrijf of andere organisatie is een herkenningspunt. Zo kunnen heel veel mensen direct aangeven welk bedrijven bij de verschillende logo s horen. In het boek van de webshopheld staan in hoofdstuk 5 theorie en opdrachten om een goed logo te ontwerpen. Als je op dat logo klikt, kom je altijd weer terecht op de homepage van de webshop. Een favicon is een icoontje dat geassocieerd is met je webpagina. Zo'n icoontje levert meer aandacht op in bookmarks en het maakt je pagina herkenbaar. Het favicon icoontje zie je in je adresbalk. Een favicon is 16x16 pixels groot. In deze cursus ga je leren hoe je een logo en favicon gaat plaatsen in je webshop. We gaan tevens de tekst aanpassen die je browser laat zien in een tabblad. Voorbereiding Download het logo en het zipbestand van 1. Login op de site van de webshopheld login: webheld4you ww: held01 2. Klik op de link Webshop bouwen met oefenbestanden 3. Download het zipbestand Logo en favicon Sla dit zipbestand op op een plaats dat je het bestand gemakkelijk terug kunt vinden. 4. Klik met je rechtermuisknop op het zipbestand en kies voor Alles uitpakken 5. Kies een locatie, zodat je de bestanden gemakkelijk terug kunt vinden Logo en favicon plaatsen Als je bent ingelogd in je webshop kom je terecht in de Backoffice. Je ziet links een menu waarmee je kunt navigeren naar jouw webshop. Je kunt ook bovenin klikken op het shopnummer.

3 1 1. Klik op je shopnummer Je komt nu op onderstaande pagina terecht. In het linkermenu zie verschillende onderdelen van jouw webshop. In het menu bovenin zie je ook wat verschillende opties zoals: Afbeeldingen- & bestandsbeheer, Orderbeheer, Klantbeheer, etc. Een van de knoppen die je veel zult gebruiken bovenin is de Toon webshop-knop. 2. Klik op de knop Toon webshop of op het oogje

4 Je browser opent nu een nieuw tabblad waarop je jouw webshop kunt zien. Deze is al een klein beetje opgemaakt, maar nog lang niet af. In deze cursussen leren we je hoe je een complete webwinkel kunt inrichten. Je gaat in diverse cursussen de volgende onderdelen aanpakken: 1. Top header 2. Header 3. Navigatiebalk (hoofdmenu) 4. Content op de homepage 5. Footer

5 In de header van de website staat vrijwel altijd het logo. Als je op dat logo klikt, kom je altijd weer terecht op de homepage van de webshop. Zoals je kunt zien is het huidige logo (Webshopheld) niet echt geschikt voor de website van Modesokken. Als eerste zullen we dan ook dat logo gaan aanpassen. 3. Sluit het tabblad met de weergave van je webshop (niet je backoffice!) 4. Klik in het linkermenu op de menuoptie Pagina selecteren 5. Klik in het midden op Homepagina Door de laatste actie klapt het linkermenu uit.

6 6. Klik in het linkermenu op de menuoptie Header 7. Klik in het midden op Logo & favicon 8. Verander het veld Logo linkt naar URL zodat als een klant klikt op je logo dat je klant op de homepagina terecht komt: winkelnummer.mijnwinkel.nl/ 9. Klik op het potloodje om het logo te wijzigen 10. Je gaat het Modesokken logo uploaden. Klik op het tabblad Upload

7 Je gaat nu het logo uploaden. Dat is geen product dus kies je voor General images and files 11. Je gaat het Modesokken logo uploaden. Klik op het tabblad Upload 12. Klik op Selecteer achter het veld General images and files 13. Selecteer het bestand logo_modesokken.png. Dit bestand heb je in de voorbereiding gedownload in het zipbestand, opgeslagen en uitgepakt. 14. Bekijk nu in de winkel het resultaat.

8 Als laatste gaan we het tabblad in je browser aanpakken. Deze ziet er nu zo uit. Je gaat gaan nu zowel de favicon als de tekst aanpassen. Dit doe je uiteraard om de toekomstige bezoeker aan je website te helpen als hij meerdere tabbladen open heeft staan. Zo verklein je de kans dat hij per ongeluk de pagina met je webshop sluit. De tekst is een Meta tag en zorgt er tevens voor dat je beter vindbaar bent in Google 15. Vervang als eerste de favicon. Je weet hoe dit moet! Het gaat op dezelfde manier als bij het logo. Dat moet lukken! Mocht het niet lukken? Geen probleem! Kijk een stukje terug in de cursus, dan zie je hoe het moet 16. Voor het vervangen van de tekst klik je in het menu op SEO overzicht en daarna op Algemeen 17. Klik daarna op het potloodje achter home

9 18. Verander de tekst bij Meta tags bij Titel, Omschrijving en Sleutelwoorden Nu weet je hoe het moet en uiteraard verander je in de toekomst bij elke pagina die je maakt de SEO Metatags! Eindresultaat: