Kennisbank
Handleidingen
Academy
Instructievideo's
Probeer te zoeken naar:
Recent bekeken artikelen:

Op deze pagina

Instant Site-ontwerp configureren (verouderd)

U kunt een responsief Instant Site-sjabloon gebruiken om snel aan de slag te gaan met de online verkoop van uw producten. Uw site zal er professioneel uitzien op alle apparaten, desktop, tablet en mobiel. U kunt het uiterlijk van Instant Site gemakkelijk naar eigen smaak wijzigen. Als u geen techneut bent, kunt u kiezen uit de vooraf ingestelde opties voor het uiterlijk in de Ecwid-beheerder → Website. Ervaren gebruikers met programmeervaardigheden kunnen in de CSS-wijzigingen duiken om een uniek uiterlijk aan de winkel te geven.

Dit artikel is voor de oude versie van Instant Site die niet langer beschikbaar is voor nieuwe Ecwid-gebruikers. Als u op zoek bent naar richtlijnen voor het bewerken van het ontwerp van de hoofdversie van de Instant Site (nu standaard beschikbaar voor nieuwe gebruikers), bekijk dan het artikel over het configureren van het Instant Site-ontwerp →

Volgorde van secties

Instant Site bestaat uit de volgende secties:

  • Omslag (de eerste tegel)
  • Winkel
  • Verhaal (waarom voor ons kiezen)
  • Over
  • Klantengetuigenissen
  • Locatie
  • Contactgegevens 

U kunt elke sectie van de Instant Site verbergen en de volgorde ervan naar wens wijzigen. Ga hiervoor naar de Ecwid-beheerder → Website, klik op Bewerken en vervolgens op Secties rangschikken:

Screen_Capture_on_2019-10-11_at_21-51-23.gif

Als u bijvoorbeeld net uw winkel aan het opzetten bent, kunt u de sectie Klantengetuigenissen verbergen tot u feedback van uw klanten heeft verzameld. Als uw bedrijf seizoensgebonden is, kunt u het winkelgedeelte gemakkelijk verbergen binnen uw Instant site en het weer openen als u terug bent. Indien u uw omslagafbeelding lager wilt weergeven, kunt u het onder een andere sectie van uw Instant site plaatsen, enz.

Als u geen omslag nodig heeft, kunt u er een smal menu bovenaan van maken.

Thema's voor de omslag

De omslagsectie stelt uw winkel voor aan uw klanten. U kunt een van de 79 thema's kiezen voor de omslagafbeelding van uw winkel. Ga hiervoor in de Ecwid-beheerder naar Website → Site-uiterlijk → klik op Bewerken → Thema's. Kies het thema dat het beste bij uw bedrijf past:

Choose_a_design_theme_for_instant_site.png

U kunt het gekozen thema ook bewerken: upload uw eigen omslagafbeelding, wijzig de typografie, enz. U kunt dit doen in de daarvoor bestemde secties van de Instant Site Editor. 

Omslagachtergrond

In het menu Achtergrondopties kunt u kiezen uit de achtergrondtypes Kleur, Kleurovergang, Afbeelding of Video voor de eerste tegel van uw Instant Site:

Achtergrondtype voor Instant Site-omslag

De optie Kleur is goed voor een minimalistisch uiterlijk of voor een combinatie met een omslagafbeelding (zie omslaglay-outs hieronder). U kunt elke kleur instellen als omslagachtergrond:

Achtergrondkleur voor Instant Site-omslag

Voor een fantasievolle uitstraling kunt u het type Kleurovergang als uw omslagachtergrond gebruiken. U kunt een kleurivergabg kiezen uit de galerij of een mix maken van twee willekeurige kleuren met een gewenste hoek:

Achtergrondlkleurovergang voor Instant Site-omslag

Voor de Omslagafbeelding kunt u een foto van u of uw winkelteam, een afbeelding van uw goederen of een andere foto uploaden die uw potentiële klanten aantrekt en hen een positieve indruk van uw bedrijf geeft. De aanbevolen bestandsgrootte voor de omslagafbeelding is 1400x1050 pixels of groter, in indeling JPG, PNG of GIF:

Achtergrondafbeelding voor Instant Site-omslag

Als u geen goede foto's heeft voor de omslag, kunt u een paar mooie foto's vinden op stock-websites, zoals Shutterstock, Depositphotos, Pixabay en andere.

Pas een overlay toe op uw achtergrondafbeelding om de tekst erop gemakkelijk leesbaar te maken (en tevens een bepaalde sfeer te scheppen). Het kan een overlay in één kleur zijn of een kleurovergang met een aangepaste hoek:

Overlay voor omslagafbeelding in Instant Site

U kunt eenvoudig een Youtube-/Vimeo-video toevoegen als omslagachtergrond om uw beste producten te laten zien of om uw Instant Site voor een evenement te animeren. Plaats gewoon de link voor uw video in het tekstveld, sla de wijzigingen op en de video wordt zonder geluid afgespeeld in uw omslagachtergrond:

Video als omslagachtergrond in Ecwid

Misschien wilt u een overlay toevoegen aan uw achtergrondvideo, zodat de tekst erop gemakkelijk te lezen is. U kunt een voorgestelde kleur gebruiken of een willekeurige kleur of kleurovergang kiezen voor een overlay.

Lay-out omslag

In Layout omslag kunt u kiezen welk deel van de eerste tegel uw omslag moet innemen. Er zijn zers opties om uit te kiezen:

Lay-out omslag in Ecwid Instant Site

Als u kiest voor een lay-out met een half scherm of een zijbalk met een omslagafbeelding op de achtergrond, is de aanbevolen grootte voor de omslagafbeelding respectievelijk 1800х700 pixels of 1200х1200 pixels.

Als u geen omslag op uw site nodig heeft, kies dan de optie Menu bovenaan om er een smalle koptekst van te maken.

U kunt ook de titel en beschrijving plaatsen en uitlijnen om de beste plaats ervoor op uw omslag te vinden.

Knop Oproep tot actie

De knop Oproep tot actie brengt de klanten rechtstreeks naar de productlijst. Standaard is het ingeschakeld en zegt het "Nu winkelen":

Knop Oproep tot actie op de Instant Site-omslag

U kunt de tekst in het veld Knoplabel wijzigen en een andere naam naar wens gebruiken. Als u bijvoorbeeld online kaartjes verkoopt, kunt u het "Nu boeken" noemen. Voor digitale producten zoals e-boeken, afbeeldingen of ander downloadbaar materiaal kan de knop zeggen "Nu downloaden".

Typografie op de omslag

Als u een andere kleur en grootte wilt instellen voor de knop Oproep tot actie en een ander lettertype wilt gebruiken voor het label, dan kunt u deze wijzigen aanbrengen in het menu Typografie dat daarna volgt. De kleur van het lettertype past zich automatisch aan de gekozen kleur van de knop aan, zodat het label gemakkelijk te lezen is.

Bovendien kunt u in Typografie wijzigen hoe de titel en de Instant Site-beschrijving verschijnen. Kies het gewenste lettertype uit een vervolgkeuzemenu met meer dan 60 voorgestelde lettertypen, vergroot of verklein hun lettertypegrootte en kies een willekeurige lettertypekleur.

Typografie in de Instant Site Editor

Om bijpassende kleuren voor omslagelementen te vinden, kunt u sites als Canva en Color Hunt gebruiken voor een kleurenpalet, of uw omslagafbeelding uploaden naar een dienst als Image Color Picker om de exacte codes voor de kleuren ervan te vinden.

Winkellogo

U kunt een logo uploaden dat op uw winkeletalagepagina's wordt weergegeven. Dit logo wordt ook standaard gebruikt in uw e-mailmeldingen, facturen en als een favicon.

Als u later het winkellogo wijzigt, moet u ook handmatig het nieuwe logo uploaden in de instellingen voor e-mailmeldingen en facturen

Het winkellogo moet minimaal 140x140 pixels groot zijn (of minstens 280x280 pixels voor een goede weergave op Retina). U kunt een grotere afbeelding uploaden. In dat geval verkleint Ecwid het automatisch zodat het in het logoblok van 480x140 pixels past.

De ondersteunde afbeeldingsindelingen zijn JPEG, PNG, GIF.

Om een logo aan uw winkeletalage toe te voegen: 

  1. Ga in de Ecwid-beheerder naar Website en klik op Bewerken.
  2. Op de geopende pagina, klik op Titel en omslagafbeelding.
  3. Scroll naar beneden naar en klik op Winkellogo
  4. Klik op Logo uploaden.
  5. In het vervolgkeuzemenu Positie logo, kies waar u het logo wilt weergeven. Er is ook een optie om het logo te verbergen en het alleen voor het favicon te gebruiken.
  6. Als u uw logo rond wilt maken, schakel dan de optie Rond logo in.

    Upload_store_logo.png
Als u nog geen logo heeft, lees dan onze blogpost voor meer informatie over hoe u een geweldig logo voor uw merk kunt maken.

Als u de favicon wilt gebruiken en het logo wilt verbergen, kunt u dat doen met een CSS-code:

  1. Ga in de Ecwid-beheerder naar Ontwerp.
  2. Klik op Thema bewerken als u een actief aangepast CSS-thema heeft of scroll omlaag en klik op Thema makenNieuw CSS-thema toevoegen.
  3. Plak de volgende code in uw CSS-thema:
    div.cover__logo { display: none;}
  4. Sla de wijzigingen op.

Vernieuw de winkeletalagepagina om de wijzigingen te zien.

Scrollpijl

Onder het menu Scrollpijl kunt u de pijl verbergen dat de bezoekers naar de winkelsectie brengt, of er een tekst voor toevoegen die de mensen aanmoedigt uw winkel te bezoeken:

Scrollpijl op de Instant Site-omslag

Menu bovenaan 

Onder Menu bovenaan kunt u het uiterlijk van de balk bovenaan van uw Instant Site wijzigen en kiezen welke gegevens u in de koptekst wilt weergeven: telefoonnummer, openingstijden, locatie, sociale media-links, enz.

Screenshot_2020-10-06_at_10.11.32.png

Om de koptekst te wijzigen en het een traditioneler uiterlijk te geven, schakel de optie Navigatie weergeven in. De navigatie bevat links naar de volgende secties van uw Instant Site van één pagina: Winkel, Over ons, Locatie, Contact:

Navigatie weergeven in menu bovenaan Instant Site

Vooraf ingestelde ontwerpopties voor uw winkel

U kunt het uiterlijk van uw winkel wijzigen en het de uitstraling geven die het best bij uw merk past. Hier ziet u hoe u bij de ontwerpinstellingen komt:

U kunt de winkelontwerpopties openen in de Ecwid-beheerder, ga naar WebsiteBewerkenWinkel.

Overzicht winkelontwerp

De opties voor het winkelontwerp bootsen de instellingen na van de pagina Ontwerpen in de Ecwid-beheerder. De wijzigingen die u hier aanbrengt zijn van invloed op al uw winkeletalages.

U kunt de Miniatuurgrootte, Beeldverhoding, Tekstuitlijning en Productkaartrand beheren met behulp van de overeenkomstige opties:

Winkeloontwerp in de Instant Site Editor

Grote afbeeldingen zijn een goede keuze om uw producten tot in de kleinste details te laten zien. Middelgrote afbeeldingen zijn geschikt voor de meeste producten, terwijl u met kleine afbeeldingen meer producten op een pagina kunt plaatsen. Verschillende opties voor de beeldverhouding bieden een flexibele manier om horizontale, verticale of vierkante afbeeldingen het best weer te geven.

Productlijst en categorieën

Open het menu Productenlijst en categorieën om het uiterlijk van de pagina's die uw producten bevatten aan te passen. U kunt de zichtbaarheid van de productnaam, de prijs, het artikelnummer, de knop "Nu kopen" en de extra productafbeelding wijzigen:

Instellingen productlijst in Ecwid-winkel

Als u een luchtiger uiterlijk wenst, kunt u de knoppen Artikelnummer en de Nu kopen uitschakelen, of ze alleen weergeven als de muis erover beweegt.

Als u categoriekaarten op de startpagina van de winkel heeft weergegeveb, kunt u de positie van de Categorienamen aanpassen.

In het blok Navigatie kunt u de opties Broodkruimels en "Sorteren op" in- en uitschakelen:

Navigatie in de Ecwid-winkel

Hieronder kunt u de optie Afbeeldingen achtergrond donkerder maken inschakelen om ze meer op te laten vallen op de achtergrond van de winkel.

Productpagina

In het menu Productpagina vindt u vooringestelde ontwerpopties om het uiterlijk van pagina's met gedetailleerde informatie over uw producten aan te passen. Hier kunt u de elementen Paginalay-out, Afbeeldinggalerijlay-out en Zijbalk wijzigen:

Instellingen productpagina in de Ecwid-winkel

Als u de volgorde van de blokken in de zijbalk wilt wijzigen, kunt u de elementen in de lijst verslepen.

U kunt extra productafbeeldingen uploaden om uw artikel vanuit de beste hoek te laten zien. Voor galerijbeelden kunt u ingezoomde foto's uploaden die de meest essentiële details van het artikel laten zien, zij- en achteraanzichten, foto's van bijpassende producten of extra accessoires.

Diversen

In het menu Diversen kunt u de zichtbaarheid aanpassen van de pictogrammen die onder uw productlijsten verschijnen. U kunt het menu Voettekst, link "Aanmelden" en Broodkruimels uitschakelen:

Navigatie in productlijst in de Ecwid winkel

Alles bij elkaar geven de vooraf ingestelde opties voor het uiterlijk u veel vrijheid bij het bouwen van een unieke, professioneel ogende webpagina die uw producten op een opmerkelijke manier laat zien.

Als uw winkeletalage geavanceerd aangepast moet worden en u bekend bent met CSS, kunt u uw eigen CSS-thema bouwen vanaf nul of klare CSS-tweaks (in het Engels) uit het Ecwid-helpcentrum gebruiken. Als u niet zo handig bent met programmeren, maar een aangepast CSS-thema voor uw winkel wilt, kunnen onze experts tegen betaling een aangepast ontwerp voor u maken.

Gerelateerde artikelen

Uw domein verbinden met Ecwid Instant Site
Aanpassingsopties in Ecwid

Was dit artikel nuttig?

Fantastisch! Bedankt voor uw feedback!

Bedankt voor uw feedback!

Wat vervelend! Wat ging er mis?
Aantal gebruikers dat dit nuttig vond: 29 van 46
10
We gebruiken cookies en vergelijkbare technologieën om uw voorkeuren te onthouden, de effectiviteit van onze campagnes te meten en gedepersonaliseerde gegevens te analyseren om onze site beter te laten werken. Door «Accepteren» te kiezen, stemt u in met het gebruik van cookies.
Cookies accepteren Afwijzen