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 Vormgever 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 18
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 Vormgever 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 app.css kun je in het css bestand de kleuren, lettertype, logo formaat 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. Je navigeert hiervoor naar Vormgeving > template designer > instellingen en daar vind je links of slider. Hier kun je de url plakken voor de verschillende sliders.
Enkele templates hebben deze optie niet en dit moet dan in de HTML geplaatst moeten worden. 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 <a href= # > en aan het eind van de url tag </a>. <section class= slider > <div class= flexslider > <ul class= slides > <li> <a href= http://www.starteenwinkel.nl/category/142138/producten-little-naturals ><img src= {{ /images/slider/header1.jpg asset_url }} ></a> </li> <li> <a><img src= {{ /images/slider/header2.jpg asset_url }} ></a> </li> </ul> </section>
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.
<li> </li> <img src= {{ /images/slider/slide2.jpg asset_url }} > Nu ziet dit er zo uit: <section class= slider > <div class= wrapper > <div class= flexslider > <ul class= slides > <li> <img src= {{ /images/slider/slide2.jpg asset_url }} > </li> <li> <img src= {{ /images/slider/slide2.jpg asset_url }} > </li> </ul> </section> 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 > <div class= flexslider > <ul class= slides > <li> <a><img src= {{ /images/slider/header1.jpg asset_url }} ></a> <div class= slider-topic topic1 > <div class= border > <div class= slider-info > <p class= text1 >{{ custom_labels.slider1_text1 }}</p> <h2>{{ custom_labels.slider1_text2 }}</h2> <p class= text2 >{{ custom_labels.slider1_text3 }}</p> <a class= btn-shopping href= # >{{ custom_labels.slider1_text4 }}</a> </li> <li> <a><img src= {{ /images/slider/header2.jpg asset_url }} ></a> <div class= slider-topic topic3 > <div class= slider-info > <span class= text1 >{{ custom_labels.slider2_text1 }}</span> <h2>{{ custom_labels.slider2_text2 }}</h2> <p class= text2 >{{ custom_labels.slider2_text3 }}</p> <p class= text3 >{{ custom_labels.slider2_text4 }}</p> <a class= btn-shopping href= # >{{ custom_labels.slider2_text5 }}</a> </li> <li> <a><img src= {{ /images/slider/header2.jpg asset_url }} ></a> <div class= slider-topic topic2> <div class= slider-info > <span class= text1 >{{ custom_labels.slider2_text1 }}</span> <h2>{{ custom_labels.slider3_text2 }}</h2> <p class= text2 >{{ custom_labels.slider2_text3 }}</p> <p class= text3 >{{ custom_labels.slider2_text4 }}</p> <a class= btn-shopping href= # >{{ custom_labels.slider2_text5 }}</a> </li> </ul> 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 Vormgever 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 Boeken. Rechts onderin zie je nu de kleurnummers verschijnen van je tekst (color: #323232) De color is de kleur van 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: Als het gewenste effect is bereikt dan kun je dit aanpassen in de app.css. Je ziet rechts een regel die begint met app.css. Dit is het bestand waar je moet zijn om het in de CSS aan te passen. De regel waar je dit in aan kunt passen wordt aangegeven achter de dubbele punt: In dit geval is het regel 5833. In de backend (de achterkant van je webshop) ga je naar Vormgeving > Template Editor, kies je het bestand app.css en je past nu op regel 5775 de kleurcode aan.
Je kunt ervoor kiezen om de zoekfunctie.menu l in te typen zodat je gelijk naar regel 5775 schiet of je scrolt naar regel 5775 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.) met daarbij een doorlink naar de betreffende social media pagina. Deze zelfde methode werkt ook voor betalingslogo s zoals ideal, Paypal etc maar ook post.nl etc. 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 Vormgeving > 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 hebben opgeslagen.
Kopieer het bestandsnaam, 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. <section class= block links-item > <h4>social media</h4> <div class= widget-content > <br> <a href= #1 target= _blank > <img src= {{ #2 ALT= facebook #3 WIDTH= 35 HEIGHT= 35 asset_url }} ></a> <a href= #1 target= _blank > <img src= {{ #2 ALT= twitter #3 WIDTH= 35 HEIGHT= 35 asset_url }} ></a> <a href= #1 target= _blank ><img src= {{ #2 ALT= instagram #3 WIDTH= 35 HEIGHT= 35 asset_url }} ></a> </br> </section> 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.
Of je gebruikt deze code wanneer je alleen afbeelding wilt tonen van een betaalmogelijkheid of verzendlogo. De namen van de afbeeldingen kunnen anders zijn van de afbeeldingen die zelf hebt. Wat hieronder dik gedrukt zijn, kun je dan vervangen voor de naam van jouw afbeelding. <section class= block links-item > <h4>betaalmogelijkheden</h4> <div class= widget-content > <img src= {{ /images/mrcash-logo.png asset_url }} WIDTH= 100 HEIGHT= 60 ></a> <img src= {{ /images/paypal.jpg asset_url }} WIDTH= 100 HEIGHT= 35 ></a> <img src= {{ /images/visa-mastercard-logo.jpg asset_url }} WIDTH= 60 HEIGHT= 75 ></a> <img src= {{ /images/ideal-logo.png asset_url }} WIDTH= 120 HEIGHT= 80 ></a> <img src= {{ /images/afterpay.png asset_url }} WIDTH= 100 HEIGHT= 30 ></a><br> </section> 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 </section>. 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 info@starteenwinkel.nl of tel. 0299-200850.