HTML5/CSS lay-out op maat
Lay-out zelf ontwerpen (eenvoudig)
Met de ingebouwde lay-outbewerker kunt u zelf een lay-out creëren door de vormgeving en kleuren te kiezen. Er zijn voldoende mogelijkheden zodat u zich goed kunt onderscheiden van andere websites. Dit is de eenvoudigste en de voordeligste optie.
Tip: houd de lay-out eenvoudig en upload duidelijke productfoto's. Dat is waar uw klanten naar op zoek zijn, niet naar een drukke lay-out.
Lay-out laten ontwerpen door een webdesigner (geavanceerd)
Mocht u met de lay-out bewerker niet het gewenste resultaat bereiken, dan kunt u de lay-out op maat laten ontwerpen door een webdesigner. Wij doen zelf geen maatwerk ontwerp, maar we hebben goede contacten met betrouwbare partners hiervoor.
U kunt ook zelf op zoek gaan naar een webdesigner. Ga na of de persoon competent is, vraag naar referenties!Wanneer de webdesigner module gebruikt wordt zonder de nodige technische kennis, dan kunnen de volgende problemen opduiken:
- Wegvallen van functionaliteiten (bijvoorbeeld: klanten kunnen niet meer bestellen)
- Navigatie die niet werkt en/of 404 pagina's
- Foutieve weergave op telefoons en tablets (scrolbalken)
- Verlies van resultaten in zoekmachines
- Langere laadtijden door scripting-fouten
Wij kunnen geen support leveren of zelf aanpassingen op maat uitvoeren in de HTML en CSS codes. Wij kunnen u wel in contact brengen met een webdesigner.
Webdesigners
Op deze pagina verzamelen we alle nuttige info en vragen voor webdesigners.Deze pagina is niet bedoelt om HTML5 of CSS te leren, daarvoor kunt u terecht op W3Schools. (maar dat wist u uiteraard al als webdesigner)
U kunt dit onderdeel vinden bij Instellingen > Webdesigners > Codebewerker.Als Webdesigners niet in het menu staat, pas dan eerst het gebruikersniveau aan naar Expert, bij Instellingen > Gebruikersniveau.
De webdesigner module is een expert module. We gaan uit van voorkennis van HTML5, CSS en een basis Javascript.
CSS aanpassen
Gebruik deze methode om aanpassingen te maken aan een vooraf gekozen template.
- Kies een template bij Instellingen > Lay-out > Template
- Personaliseer de lay-out zoveel mogelijk naar wens
- Activeer de CSS module (verificatiecode hieronder)
U kunt nu zelf aanpassingen maken in de CSS code.De CSS die u invult heeft voorrang op de lay-out instellingen. Zolang deze module actief is, zullen de meeste lay-out instellingen niet meer werken.
Om opnieuw te beginnen: maak het tekstveld leeg en sla op. De standaard CSS code van de gekozen template wordt dan terug weergegeven. Deactiveer de module als u terug de eenvoudige lay-out instellingen wil gebruiken.
De activatiecode voor deze module is MODCSS.
HTML aanpassen
Gebruik deze methode om zelf een template te ontwerpen.
- Activeer de module (verificatiecode hieronder)
- Gebruik keywords (zie tabel hieronder) om webshop objecten in te voegen
Het is toegestaan om een EasyWebshop design te kopiëren en u hierop te baseren. U kunt inline CSS invoegen in de HTML code of aparte CSS bestanden uploaden.
De activatiecode voor deze module is MODL.
De codebewerker
De codebewerker heeft de volgende functies:
- Opslaan
- Opslaan via AJAX
- Ongedaan maken
- Laatste actie ongedaan maken
- Herhalen
- Ongedaan gemaakte actie terugbrengen
- Uitzoomen
- Tekst verkleinen
- Inzoomen
- Tekst vergroten
- Contrast
- Switchen tussen witte of zwarte achtergrond
- Volledig scherm
- Switchen tussen volledig scherm of compacte weergave
- Upload
- Eigen bestanden uploaden
Eigen Javascript, CSS, SVG en foto's uploaden
Met het upload icoon kunt u zelf bestanden uploaden:
- .js - eigen scripting
- .css - eigen opmaak
- .svg - SVG afbeeldingen
- .jpg, .gif, .png - afbeeldingen, logo's en achtergronden
Klik na het uploaden op Invoegen om het bestand in te voegen in de HTML code.
Javascript, CSS en SVG bestanden die u zelf toevoegt kunt u eveneens bewerken met de code bewerker. Deze komen automatisch in het dropdown menu.
Tips
Standaard Javascript en CSS
Elke webshop bevat een bestand shop.js voor Javascript en shop.css voor CSS.Deze bevatten de scripting en opmaak voor alle objecten.U kunt uw eigen CSS toevoegen onder dit bestand en op deze manier regels in shop.css overschrijven.
- shop.js - gecomprimeerd
- https://www.ewimg.com/scripts/shop.js
- shop.js - code met commentaar
- https://www.ewimg.com/scripts/src/shop.js
- shop.css - gecomprimeerd
- https://www.ewimg.com/scripts/shop.css
- shop.css - code met commentaar
- https://www.ewimg.com/scripts/src/shop.css
Browser tabbladen
Als u verschillende bestanden tegelijk wil bewerken, open dan meerdere tabbladen met de codebewerker en een tabblad met de webshop om het resultaat te bekijken.
Layout map aanmaken
Als u met meerdere personen aan de webshop werkt, dan kan het interessant zijn om een map layout te maken voor scripting, CSS, logo's en achtergronden. Op deze manier ontstaat er geen verwarring als iemand anders foto's bij producten of op pagina's invoegt.
Back-ups maken
Bewaar de bestanden eveneens op uw pc. Op deze manier kunt u de lay-out eenvoudig herstellen als een bestand per ongeluk verwijderd wordt, en u kunt de code hergebruiken voor meerdere webshops.
HTML keywords
Keyword | Resultaat |
---|---|
[WEBSHOP_HEADER] | Titel en meta tags, afhankelijk van de pagina, vereist |
[WEBSHOP_CONTENT] | Pagina inhoud, vereist |
[WEBSHOP_SHOPNAME] | Webshop naam |
[WEBSHOP_SLOGAN] | Slogan |
[WEBSHOP_SHOPPINGCART] | Winkelmandje |
[WEBSHOP_NAVIGATION] | Navigatie |
[WEBSHOP_CATEGORYLIST] | Categorieën |
[WEBSHOP_BREADCRUMB] | Navigatie: Breadcrumb |
[WEBSHOP_LANGUAGE] | Taalkeuze menu |
[WEBSHOP_CURRENCY] | Valutakeuze menu |
[WEBSHOP_SEARCHBOX] | Zoekbox |
[WEBSHOP_CMSHEADER] | CMS: Hoofding |
[WEBSHOP_SIDEPANEL] | CMS: Zijpaneel |
[WEBSHOP_FOOTER] | CMS: Voetnoot |
[WEBSHOP_BACKLINK] | Teruglink EasyWebshop, vereist |
[WEBSHOP_FOOTSCRIPTS] | Scripting onderaan de pagina voor functionaliteit webshop, vereist |
Als u [WEBSHOP_BACKLINK] wil verwijderen, gebruik de backlink removal module.
CMS en e-mail keywords
Deze keywords kunnen gebruikt worden in CMS. Zorg ervoor dat de betreffende module geactiveerd is.
Keyword | Resultaat |
---|---|
[WEBSHOPAPP_AppName] | HTML5 app invoegen |
[WEBSHOP_BLOG] | Blog |
[WEBSHOP_FEEDBACK] | Klanten feedback |
[WEBSHOP_GUESTBOOK] | Gastenboek |
[WEBSHOP_PAGEURL] | HTTP adres van de huidige pagina |
[WEBSHOP_PAYMENTLOGOS] | Betaallogo's |
[WEBSHOP_NEWSLETTER] | Nieuwsbrief registratie |
[WEBSHOP_SLIDESHOW1] | Slideshow 1 (maximum = 25) |
[WEBSHOP_SOCIAL] | Logo's sociale netwerken |
Mogelijke problemen
- Fotozoomer, lazy loading en shopping gallery werken niet meer
- Vergeet het [WEBSHOP_FOOTSCRIPTS] keyword niet.
- De modules worden automatisch uitgeschakeld
- De CSS en HTML modules kunnen niet tegelijk gebruikt worden: wanneer één module geactiveerd wordt, dan wordt de andere module automatisch uitgeschakeld. Gebruik CSS om een ingebouwde template aan te passen, gebruik HTML om uw eigen template te creëren en eigen CSS toe te voegen.
- Keywords komen in tekstvorm op de website
- Controleer of ze juist gespeld zijn, in hoofdletters. Haal HTML, CMS en e-mail keywords niet door elkaar. Controleer of de module geactiveerd is. Verouderde keywords worden gefaseerd uit de software verwijderd: [WEBSHOP_PARTNERS], [WEBSHOP_CATEGORYLIST2], [WEBSHOP_LANGUAGE_*], [WEBSHOP_CURRENCY_*]. Gebruik enkel de keywords in de lijst hierboven.
Volgende pagina: E-mail en webmail
Wiki
- Introductie
- Product beheer
- Webshop configuratie
- Account en webshop Instellingen
- Betaalmethoden en Betaalproviders
- Facturen, algemene voorwaarden en BTW
- Verzendkosten instellen
- Kortingen en toeslagen instellen
- Domeinnamen registreren en verhuizen
- Meertalige webshop
- Apps installeren
- Webadressen personaliseren
- Meerdere webshops beheren (Multishop)
- Automatische e-mails naar klanten
- Een mooie lay-out ontwerpen
- Bestellingen beheer
- Marketing
- Modules
- Back-ups nemen en gegevens exporteren
- HTML5/CSS lay-out op maat
- E-mail en webmail
- Beheerdersaccounts
- Grote productfoto's uploaden
- Twee factor authenticatie
- Labels
- Meta tags - Website verificatie
- Chatfunctie
- Slideshow
- Bezoekers analyse - Google Analytics
- Filters
- Kassasysteem (POS)
- Formuliervelden
- Digitale of virtuele producten
- Symcalia reserveringssysteem
- Gastenboek
- De helpdesk contacteren