De homepage van Bouwshopper aanpassen deel 2 Wat leer je in dit hoofdstuk: - Wat de Pagina-editor is - Welke blokken je op de homepage ziet - Hoe je een slider aanpast Inleiding In de vorige cursus heb je al kunnen werken in het pagina-dashboard. Je hebt toen de header aangepast. In deze cursus ga je de inhoud van de pagina aanpassen. Dit doe je in de pagina-editor. De editor werkt met blokken. Deze blokken zijn erg handig! Deze plaats je op de pagina en het enige wat je nog hoeft te doen is deze blokken in te stellen en plaatjes en/of tekst toevoegen! Om een pagina er mooi uit te laten zien hoef je nu niet meer te kunnen programmeren! Direct onder de header van de webshop bevindt zich de inhoud van de homepage. Je ziet dat de homepage van de bouwshopper bestaat uit een middenblok en een rechterblok. Het middenblok bestaat uit een afbeelding-slider (1), een aantal plaatjes die linken naar subpagina s (2) en ten slotte onderaan nog een productlijst met nieuwe producten. Het rechterblok bestaat uit een productmenu (3), een prijsselector (4) een zoekbalk (5) en nog wat afbeeldingen. 1 2 3 4 5
Je gaat nu de verschillende onderdelen van de homepage bekijken in de backoffice van myshop en deze aanpassen. De afbeelding-slider Een afbeelding-slider is een soort programma dat van verschillende foto s een diavoorstelling maakt. Je stelt in in welke volgorde de foto s getoond worden en of de foto s eventueel linken naar een andere pagina op de website. 1 Banner aan slider toevoegen 1. Download van de site bij de benodigde bestanden het plaatje slider1.jpg Zet dit bestand op je USB-stick of in mijn documenten op je PC of laptop 2. Klik in de backoffice van je webwinkel op Pagina Dashboard en daarna op Pagina Editor
3. Klik op het potloodje van de afbeeldings slider om te kunnen wijzigen Je gaat nu de afbeelding die je hebt gedownload aan de slider toevoegen 4. Klik op het plusje achter Voeg afbeelding toe 5. Klik op het potloodje om een afbeelding te kunnen toevoegen. 6. Klik op Uploaden Figuur
7. Klik achter Layoutafbeelding selecteren op Selecteer bestand. (je gaat immers geen productafbeelding uploaden) 8. Selecteer het gedownloade bestand Slider1.jpg op je PC of USB-stick. 9. Klik op Gebruik afbeelding Het plaatje is nu toegevoegd aan de Afbeelding-slider. Er zijn nu in deze slider vier afbeeldingen. 10. Bekijk je slider in je webshop met het oogje.
2 Instellingen in de slider aanpassen 1. Klik op Pagina Dashboard en daarna op Pagina Editor 2. Klik nu op het potloodje van de Afbeelding-slider en klik nu op het tabblad Afbeeldingsslider 3. Bekijk de slider in je webshop (kruisje om scherm afv te slui9ten en dan rechtsboven klikken op Toon webshop )
4. Ga terug naar de afbeeldingsslider en zet nu alle opties op Nee 5. Bekijk opnieuw de slider met het oogje. Wat is er veranderd? 6. Zet nu de instellingen van Activeer automatische roulatie en Toon navigator afbeelding op JA 7. Bekijk het resultaat in je winkel.wat is er veranderd??
8. Zet nu Toon navigator weer op NEE en zet Afbeelding is klikbaar op JA Je gaat nu een link maken van de slider naar een product of pagina in je winkel. Dat kun je doen door te typen, maar het is gemakkelijker te doen (en zonder fouten!) door in de winkel naar de bewuste pagina te gaan en daarna in de adresbalk de URL te kopiëren. Bijv. het webadres: http://5020000.mijnwinkel.nl/ijzerwaren/ (waarbij 5020000 natuurlijk vervangen moet worden door jouw eigen winkelnummer) 9. Ga naar je webwinkel en klik op het tabblad IJzerwaren 10. Kopieer de url in de adresbalk 11. Klik op het tabblad Block data 12. Ga nu naar het tabblad Block data en kopieer de url onder Link en sluit af met het groene vinkje om op te slaan. Mocht je het overtypen, vervang 5020000 door je eigen winkelnummer! 13. Bekijk en test het resultaat in je winkel
3 Zelf een banner maken en in slider plaatsen 1. Kies nu een product uit de webshop waarvoor je een banner gaat maken. De reden voor de banner is dat het product met 20% korting verkocht gaat worden 2. Open een tekenprogramma waarmee je de banner gaat maken. Programma s om een banner te maken Photoshop, Illustrator of een andere tekenprogramma s zijn erg geschikt om een banner mee te maken. Heb je geen tekenprogramma tot je beschikking? Gelukkig is er online ook het één en ander te vinden. Op bijvoorbeeld http://www.bannerfans.com/banner_maker.php kun je je eigen banner maken. LET OP: de site is Engels. 3. Maak de banner met de afmeting: 700 pixels x 385 pixels. Dit is belangrijk omdat de andere afbeeldingen deze maat ook hebben. Gebruik je andere maten dan wordt de afbeelding in de slider misvormd (uitgerekt of ingedrukt) en dat ziet er niet goed uit. 4. Voeg je eigen banner toe aan de slider. 5. Link je banner naar het juiste product. 6. Bekijk het resultaat en check of de link werkt.. Gefeliciteerd, je bent nu al echt bezig de webshop aan het verbeteren! Einde Deel 2