Designer

Lay-out design Met de designer kan de gekozen template of thema gepersonaliseerd worden. De designer biedt heel veel mogelijkheden om te personaliseren en is daarom minder eenvoudig in gebruik dan standaard lay-outbeheer. Deze pagina beschrijft de functies van de designer.

Navigeer naar Instellingen > Lay-out en klik op het tabblad Designer. Klik daarna op Starten. We raden aan om een groot scherm te gebruiken (minimaal 1920x900 pixels) om optimaal met de designer te kunnen werken.

De designer bestaat uit de voorbeeldversie op de achtergrond, een venster met de mobiele weergave van uw website en het designvenster.

Mobiele weergave

De meeste mensen zullen uw website bezoeken met een smartphone. De mobiele weergave geeft u een voorbeeld van hoe uw website er zal uitzien op een klein scherm. Let erop dat de website niet te breed wordt zodat er geen horizontale scrollbalk wordt weergegeven. Alle templates zijn standaard mobielvriendelijk, maar de designer geeft veel vrijheid waardoor dit kan verstoord worden.

De iconen bovenaan laten u toe om de weergave te bekijken met verschillende resoluties.

Met het Vernieuwen icoon kunt u de scripting in de website vernieuwen om zo de laatste versie te zien.

Designvenster

Ontwerpen

De eerste button geeft u een overzicht van uw gepersonaliseerde ontwerpen.

Ontwerp toevoegen
Met deze button kunt u een nieuw ontwerp toevoegen of een ontwerp kopiëren uit een andere webshop.
Publiceren
Na het Publiceren is het ontwerp live en zichtbaar voor uw bezoekers.
Aanpassen
Hiermee kunnen de naam, opmerkingen en de kopieerrechten van het ontwerp aangepast worden.
Verwijderen
Hiermee kunt u het ontwerp verwijderen. Deze actie kan niet ongedaan gemaakt worden.

Elementen

Elementen vormen de HTML-structuur van uw website. Na het kiezen van een element krijgt u een webformulier waarmee de eigenschappen van het element kunnen worden aangepast.

Er zijn veel elementen en eigenschappen die kunnen aangepast worden met het webformulier. Het hoofdelement is Webpagina. Dit formulier zal automatisch de achterliggende CSS-selector aanpassen.

Eigenschappen die reeds zijn aangepast worden aangeduid met een groene achtergrond in het formulierveld. Door de waarde van een eigenschap leeg te laten, wordt de eigenschap verwijderd.

Subelementen

Sommige elementen bevatten subelementen. Door op de links te klikken, krijgt u een nieuw formulier waarmee de eigenschappen van het subelement kunnen aangepast worden.

Media

Eigenschappen van elementen kunnen enkel van toepassing zijn voor bepaalde schermgroottes of in de afdrukversie. Door op de links te klikken past u de eigenschappen van het element aan voor een bepaald medium.

Opslaan

Gebruik dit icoon om het ontwerp op te slaan. Hiermee wordt het ontwerp niet gepubliceerd.

Structuur

Hiermee kan de HTML-structuur van de website aangepast worden. U kunt objecten toevoegen, verplaatsen en verwijderen.

Er zijn zichtbare objecten (zoekfunctie, winkelmandje, taalkeuze, navigatie) en onzichtbare containers die gebruikt worden voor de structuur van de website. Containers worden doorgaans gebruikt om elementen te groeperen of om achtergronden toe te voegen.

U kunt aanpassingen maken in de structuur door elementen te verslepen of door de Omhoog / Omlaag pijltjes te gebruiken. Een nieuw element toevoegen kan door onderaan op Toevoegen te klikken. Een element verwijderen kan door op het Verwijderen icoon te klikken.

De structuur wordt automatisch aangepast in de ontwerpvoorbeelden. Als de aanpassing niet automatisch gebeurd, klik dan op Opslaan in het designvenster en daarna op Vernieuwen in de mobiele weergave.

CSS aanpassen

Hiermee kunnen de opmaakcodes (CSS-code) van de website aangepast worden. CSS - Cascading Style Sheets is geen programmeertaal maar een stijltaal waarmee de opmaak van een website-elementen kunnen worden vastgelegd.

CSS aanpassen, is dat iets voor een leek?

CSS kan eenvoudig worden aangeleerd. We raden deze methode aan voor gebruikers die zelf hun website willen personaliseren en tijd willen investeren om zich in CSS te verdiepen.

Handige links met informatie over CSS:

Hulp bij CSS aanpassingen

Voor aanpassingen aan CSS-codes kan onze helpdesk geen ondersteuning bieden. CSS-support toevoegen zou betekenen dat we maatwerk leveren en dat zou EasyWebshop veel duurder maken. We beschikken echter over een aantal goede contacten met webdesigners die tegen betaling kunnen helpen met het aanpassen van de CSS.

We raden af om webdesigners direct te laten inloggen in uw webshop of met een beheerdersaccount. Dit leidt soms tot discussies over aanpassingen die niet gewenst waren. Laat enkel personen inloggen in uw webshop die u vertrouwd! In plaats hiervan kan de webdesigner zelf een Basic webshop aanmaken en in deze webshop de lay-out ontwerpen. Daarna kunt u de lay-out kopiëren naar uw webshop met de kopieerfunctie.

Voorkeuren

U kunt hier de donkere modus, volledig scherm en de syntaxmarkering van de CSS-code in- en uitschakelen. Er is ook een optie om het designvenster transparant te maken. De voorkeuren hebben betrekking op het designvenster; dus niet op de website.

Hoe pas ik eigenschap X aan?

Achtergrond aanpassen

Kies het gewenste element, bijvoorbeeld Webpagina. Bij Achtergrondafbeelding, klik op het icoon Afbeelding aanpassen. Kies een afbeelding in de lijst of Upload een nieuwe afbeelding.

U kunt ook een afbeelding aankopen via Gallerij. Als u de afbeelding wil gebruiken op een pagina, raden we het Webformaat aan. Voor achtergronden raden we een Groot formaat aan.

Klik op Invoegen om de afbeelding als achtergrond in te stellen. Nadat de achtergrondafbeelding is ingesteld, verschijnt er eveneens een icoon Afbeelding verwijderen.

Buttons aanpassen

Kies het element Webpagina en het subelement Buttons. In het formulier kunnen eigenschappen aangepast worden zoals kleur, grootte, randstijl, etc.

Met het subelement Buttons muis-over kunt u de stijl van de buttons aanpassen wanneer er met de muis over wordt bewogen. De button kan bijvoorbeeld een lichtere kleur krijgen.

Kleuren aanpassen

Kleuren kunnen het eenvoudigst in de CSS-code worden aangepast. Kleurcodes zien eruit als #ffffff of rgba(255, 255, 255, 0.5). Bij de laatste notatie is de laatste parameter (0.5 in het voorbeeld) de transparantie.

Handige links om kleuren samen te stellen:

Lettertype aanpassen

U kunt het lettertype aanpassen door een element te selecteren en Lettertype aan te passen in het formulier.

Standaard hebben al onze templates één lettertype dat is ingesteld voor het hoofdelement Webpagina. Het is mogelijk om verschillende lettertypes in te stellen voor verschillende elementen. We raden wel aan om het geheel overzichtelijk te houden.

Mogelijke problemen

Ik zie nog steeds de oude versie
Dit komt meestal doordat de oude versie nog in de cache van de webbrowser zit. Een webbrowser (Internet Explorer, Firefox, Google Chrome, ...) bewaart webpagina's en afbeeldingen op de harde schijf. Zo kan bij een volgend bezoek de webpagina sneller worden weergegeven. Als u de pagina bezoekt, wordt de versie op uw harde schrijf getoond en niet de live versie van uw webshop.

Om het probleem te verhelpen: bekijk de webshop pagina, en klik op Pagina vernieuwen of Reload / Refresh page.

Of gebruik de sneltoetsen: F5 of CTRL + R. (Command + R op Mac)

De nieuwste versie van de webpagina wordt nu ingeladen.
Het favicon wordt niet weergegeven
Gebruik een recente webbrowser. In sommige oude versies van Internet Explorer wordt geen favicon weergegeven.
Koppel een domeinnaam aan de webshop. Sommige browsers geven de favicon van EasyWebshop weer als er geen domeinnaam is gekoppeld.

Volgende pagina: Teksten en webpagina's bewerken (CMS) >>>

Overzicht