Pro templates. Copyright Starteenwinkel.nl

Pro templates

Copyright © Starteenwinkel.nl

Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer
 4. Template Editor 5. Sliders aanpassen
 6. Sliders doorlinken
 7. Extra sliders aanmaken
 8. Extra sliders aanmaken Clean en Grijs
 9. Adblocks/saleblocks aanpassen
 10. Back-up maken PRO template
 11. Wat is een favicon en hoe maak je die? 12. Werken met HTML code in (PRO templates
 13. Social media toevoegen aan footer

17

1. PRO templates; voor wie geschikt? PRO templates zijn geschikt voor ervaren gebruikers met kennis van HTML en CSS, waarbij je aan de hand van volledig aan te passen templates zelf het design van je webshop samenstelt. Heb je geen HTML- en CSS-kennis, maar wil je toch een PRO template? Starteenwinkel.nl kan je helpen bij het aanpassen van kleuren, extra sliders en andere kleine aanpassingen. Uiteraard bieden wij jou als klant van Starteenwinkel.nl de beste prijs.

2. Hoe te beginnen? Je kunt voor een PRO template kiezen door in de backend van je webshop te navigeren naar Vormgeving > Uitleg & Keuze. Bekijk de diverse voorbeelden van PRO templates en maak vervolgens je keuze. Heb je een mooi template uitgekozen? Klik dan op Selecteren.

3. Template Designer In het menu Template Designer (Vormgeving > Template Designer) kun je, wanneer je dat zou willen, eventueel nog kiezen voor een ander template. Mocht je al je een logo hebben geüpload, dan kun je hier gelijk zien hoe dit logo wordt getoond in het nieuwe template.

Bij de tweede optie (in de verticale zwarte balk) kun je de teksten (labels) op de homepage wijzigen zoals het telefoonnummer, naam van de winkelwagen, teksten in de footer of ad- en saleblocks. Je kunt het hier gelijk voor meerdere talen aanpassen, mocht je meerdere talen hebben aangegeven bij Instellingen > Talen.

Bij de optie Instellingen (tandwieltje) kun je je logo en je favicon uploaden. Elders in deze handleiding wordt uitgelegd wat een favicon is en hoe je een favicon kunt creëren.

4. Template Editor Via Vormgeving > Template Editor kun je veel items wijzigen, waaronder ook de afbeeldingen in de sliders, saleblocks en adblocks. Denk bijvoorbeeld aan het veranderen van de grootte van de slider, wijzigen van kleuren, lettertype, etc. In de map scss/partials kun je in de .scss bestanden de kleuren, lettertype, hyperlinks en dergelijke wijzigen.

5. Sliders aanpassen Je kunt de sliders vervangen door je eigen afbeeldingen. Ga naar de map Images > Slider en kies voor header 1, 2 en 3.

Tip! Houdt dezelfde formaten aan als het voorbeeld. Dan worden de afbeeldingen aan de voorkant van je webshop netjes in dezelfde grootte afgebeeld. Gebruik scherpe foto’s met maximaal een afmeting van 1200 pixels breed.

Rechtsboven tref je de button aan waarmee je de standaard afbeelding kunt vervangen door jouw afbeelding. Na het kiezen van de nieuwe afbeelding wordt deze direct vervangen.

6. Sliders doorlinken Wil je de sliders doorlinken naar een pagina, categorie of product? Kopieer dan de link (url) van de pagina waar je de bezoeker van je webshop naar toe wilt laten linken. Ga vervolgens in de backend naar Vormgeving > Template Editor > Shared en kies de map slider.liquid. Je ziet hier onder de code van het bestand /views/shared/slider.liquid. De rode tekst is de toevoeging, hoe je een image kunt doorlinken. Je ziet hier de url terug die je hebt gekopieerd en de toevoeging voor deze url en aan het eind van de url tag . <section class=”slider”>

7. Extra sliders aanmaken In de meeste PRO templates tref je sliders aan waarin grote afbeeldingen elkaar afwisselen. Het kan zijn dat je twee of drie sliders te weinig vindt. Voor het aanmaken van een extra slider moet je eerst de afbeelding uploaden. Ga daarvoor naar Vormgeving > Template Editor en navigeer naar de map assets/images/sliders en klikt op het plus-teken (+). Je kunt nu een extra slider uploaden.

Ga nu opnieuw naar de map waar je nieuwe slider is toegevoegd en klik daar op de bestandsnaam van je nieuwe slider. Deze wordt nu rechts getoond. In het midden zie je nu de padnaam waar de afbeelding is geüpload. Deze kopieer je en plak je vervolgens in het slider. liquid bestand.

Om deze afbeelding te tonen ga je naar Vormgeving > Template Editor en navigeer je naar de map /views/shared/slider.liquid. Let op: deze werkwijze is voor de meeste PRO templates behalve de template Clean en Grijs. De werkwijze voor Clean en Grijs volgt hierna. Je kopieert de regel die hieronder in het groen staat en plakt deze direct onder de regel die je hebt gekopieerd.

Nu ziet dit er zo uit: <section class=”slider”>

• 
• 
• 

Nu plak je de url van je nieuwe afbeelding op de plek van je gekopieerde regel tussen de rode ‘aanhalingstekens’. Sla dit bestand op, de extra slider is nu in je webshop zichtbaar voor bezoekers.

8. Extra sliders aanmaken Clean en grijs Om deze afbeelding te tonen ga je in de backend naar Vormgeving > Template Editor en navigeer je naar de map /views/shared/slider.liquid. Je kopieert de regel die hieronder in het groen staat en plakt deze direct onder de regel die je hebt gekopieerd.

<section class=”slider”> Vervolgens pas je alle blauw-gekleurde cijfers aan naar 3 en je plakt de url van de afbeelding die je net hebt gekopieerd over de code van /images/slider/header2.jpg.

De sliders van deze template bevatten beheerbare teksten. Deze zijn aangemaakt voor de bestaande templates maar wanneer je dit ook wilt voor de nieuw aangemaakte sliders dan moet je nog even het volgende aanpassen: je gaat naar de map Configs en daar open je het bestand label.nl-nl.json. Kopieer hier vervolgens de tekst die rood omlijnt is en plak die direct daaronder. Je past nu het gekopieerde gedeelte aan naar slider3.

Je kunt nu bij Vormgeving > Template Designer de teksten aanpassen die je graag wilt hebben bij de derde slider.

9. Adblocks /Saleblocks aanpassen Enkele templates hebben nog extra afbeeldingen in hun lay-out staan. Deze worden adblocks of soms saleblocks genoemd. Deze afbeeldingen kun je ook vervangen. De afbeeldingen staan tevens in de map Images. Ze zijn op dezelfde manier te vervangen als de sliders. Ook hier geldt het advies om deze te vervangen met dezelfde formaten als de afbeelding zelf. Je hebt ook de mogelijkheid een link in de saleblocks te plaatsen. De bezoeker wordt dan doorverwezen naar de door jou gewenste pagina.

Je kunt de link plaatsen voor de adblocks in het bestand adblocks.liquid, welke in de map Shared zit. Wanneer je het #-teken vervangt door jou gewenste link dan zal je adblock de bezoekers naar de gewenste bestemming brengen.

De templates Fashion, Klassiek, Happy en Grijs hebben saleblocks in plaats van een adblock. Ook deze saleblocks kun je aanklikbaar maken. Je kunt de link plaatsen in het bestand saleblocks.liquid welke in de map Shared zit. Wanneer je het #-teken vervangt door jou gewenste link, dan zal de saleblock de bezoekers van je webshop naar de gewenste bestemming brengen.

10. Back up maken Pro template Wil je je PRO template aanpassen? Het is verstandig om dan eerst een back-up te maken van je huidige template voordat je wijzigingen gaat doorvoeren. Onderin je scherm vind je de functie ‘Maak een back-up van je template’. Deze optie is alleen beschikbaar in de twee betaalde versies van Starteenwinkel.nl. Je kunt maximaal 5 back-ups maken van je template.

Als je terug wilt gaan naar de vormgeving van je eerder opgeslagen back-up, klik dan op het ‘go back’ icoon. Je webshop wordt dan teruggezet naar die betreffende back-up. Het icoon ernaast zorgt ervoor dat je een zip-file kunt maken van je template en deze zip kunt bewaren. Wanneer je aan het maximum aantal back-ups zit, dan kun je back-ups verwijderen met het prullenbak icoon.

Wanneer je je PRO template terug wilt zetten naar het oorspronkelijke begin, dan kies je voor de functie ‘Reset dit bestand naar de basisinstellingen’. Let op: je bent dan wel al je eigen opgemaakte HTML en CSS kwijt! Je begint dan dus echt weer met een schone lei.

11. Hoe maak je een favicon, en wat is een favicon? Een favicon is een kleine afbeelding (meestal van je logo) in de browser van je internetpagina, linksboven in het tabblad van je internetbrowser. Het doel van de favicon is dat je bezoeker – wanneer hij meerdere vensters open heeft staan – in één oogopslag kan zien welk tabblad bij welke website hoort. Een favicon maken is heel eenvoudig met een favicon creator. Starteenwinkel.nl heeft goede ervaringen met de favicon creator van http://www.favicon.cc/. Heb je inmiddels een favicon gemaakt? Dan kun je deze uploaden in de backend van je webshop. Je kiest voor de optie Import Image, kiest je bestand en klikt op Upload Logo.

Daarna klik je op de optie Download Favicon. Je nieuwe favicon kun je terugvinden in
de map Downloads. Je kunt de favicon toevoegen aan je template bij Vormgeving > Template Creator bij de laatste
instelling in de zwarte balk instellingen. Het kan soms even duren (lang) voordat je favicon wordt getoond in je venster.

12. Werken met HTML code in de Pro templates Om een kleur of lettertype-grootte aan te passen in je PRO template, is kennis van HTML of CSS nodig. We leggen je hier in het kort uit hoe je dit op de juiste wijze kunt aanpassen. Ons content management systeem (CMS) werkt het best met Google Chrome. Daarom maken wij bij de uitleg van Element Inspector ook gebruik van Google Chrome. Ga naar de ‘voorkant’ van je webshop (wat de bezoekers zien) en klik met je rechtermuis op de plek waar je het lettertype wilt aanpassen. In het menu dat verschijnt, kies je voor de optie Element Inspecteren. Je beeldscherm zal nu worden opgedeeld in twee helften. De bovenkant is je webshop en de onderkant de HTML en CSS van je webshop.

We geven een voorbeeld: je wilt graag je lettertype een andere kleur geven. Je klikt met je rechtermuis op de tekst van categorie ‘Jacks’. Rechts onderin zie je nu de kleurnummers verschijnen van je tekst (color: #d69a90 en background: #323232) De ‘color’ is de kleur van je tekst en de ‘background’ de kleur achter je tekst. Je moet nu echter wel de kleurnummers weten waarmee je de huidige kleuren wilt vervangen. Tip: je vindt vele kleuren en kleurnummers onder andere op http://www.webkleuren.be/kleuren. html.

Wanneer je de nieuwe kleurcode over de huidige kleurcode typt, dan zie je de kleur bovenin veranderen. Is het resultaat naar wens?

Pas dan de HTML code aan: klik op de rechterlink die begint met app.css.

Links onderin je scherm zie je de kleurcode die aangepast moet worden, in welke regel en in welk bestand.

In de backend (de ‘achterkant’ van je webshop) ga je naar Vormgeving > Template Editor, kies je de map SCSS > Partials en klikt op de map _main.scss.

Je kunt ervoor kiezen om de zoekfunctie .menu li a:hover in te typen zodat je gelijk naar regel 391 schiet of je scrolt naar regel 391 om daar de kleurcode aan te passen. Nadat je de kleur hebt aangepast kun je kiezen voor Opslaan.

Op deze manier kun je stapsgewijs door je webshop lopen om kleuren aan te passen naar jouw wens.

12. Toevoegen Social media aan de footer. In de PRO templates kun je social media afbeeldingen (Facebook, Twitter, e.d.) toevoegen met daarbij een doorlink naar de betreffende social media pagina. Je kunt daarvoor het best onderstaande code kopiëren en plakken in kladblok. Deze HTML code gaan we namelijk aanvullen met de bestandsnamen van de afbeeldingen.

<section class=”block links-item”>

Social media

We gaan nu de afbeeldingen uploaden in je afbeeldingen-map om deze later te kunnen gebruiken in de code van de footer. Navigeer in de backend naar Vormgevoming > Images. Upload vervolgens de afbeelding door te klikken op het plus-teken (+) naast deze map.

Kies van je eigen computer
het icoon wat je graag wilt gebruiken voor je social media pagina. Wij hebben in dit voorbeeld gekozen voor een icoon van Facebook, welke wij eerder op het bureaublad van onze pc hadden opgeslagen.

Kopieer de padnaam, want deze heb je straks nodig om in de footer.liquid (voettekst) je social media icoon te kunnen laten tonen.

Je gaat nu naar Vormgeving > Template Editor en gaat via de mappenstructuur naar Shared > Map _footer.liquid. Hier gaan we zo de aangepaste code aan
de bestaande code toevoegen. Het gemakkelijkste is om onderstaande code in Kladblok te plaatsen en daar je link in te plakken. Wanneer je deze code bekijkt, zie je in één regel drie keer een #-teken. Je past het #-teken voor het volgende aan: #1: Hier plaats je de link van je Facebook-pagina, Twitter of Instragram. Dit kun je natuurlijk ook voor Youtube etc gebruiken.
 #2: Hier plaats je de link welke je net hebt gekopieerd tijdens het uploaden van je afbeelding. #3: Hier kun je de naam van je webshop invullen voor de zoekvindbaarheid. <section class=”block links-item”>

Social media

Nu je deze code hebt aangepast, gaan we deze plaatsen in het bestand _footer.liquid. Je scrolt helemaal naar beneden en zoekt de laatste regel op die eindigt op . Hierachter plak je de aangepaste HTML code voor de social media footer.

Sla het bestand nu op en bekijk aan de voorkant van je webshop of het goed is gegaan. Heb je na het lezen van deze handleiding nog vragen? Mail of bel het supportteam van Starteenwinkel.nl via [email protected] of tel. 0299-200850.