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 ontwerpen

Lay-out laten ontwerpen door een webdesigner (geavanceerd)

Web design

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

KeywordResultaat
[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.

KeywordResultaat
[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

Starterswiki

Wiki



Veelgestelde vragen Contact