Van uw idee naar een gedetailleerd paginaontwerp
Twicart Page Builder geeft u uitgebreide vrijheid om uw ontwerpidee sectie voor sectie uit te werken. Maak in dezelfde editor een eenvoudige introductiepagina, een beeldrijke homepage, productpresentaties of inhoud met meerdere kolommen.
Bouw de indeling met secties en kolommen, voeg inhoud toe via componenten en werk details uit met kleuren, afbeeldingen, animaties en interacties. Kant-en-klare ontwerpen, handmatig bewerken, AI-ontwerp en Code bij Pro-abonnementen bieden verschillende werkwijzen. Geef zowel het uiterlijk als het gebruik door bezoekers vorm.
Waar kun je het gebruiken?
Ontwerp verschillende delen van je winkel met dezelfde sectie-, kolom- en componentstructuur in Page Builder.
Vertel je merkverhaal op een pagina, pas de productpresentatie op je homepage aan of maak de indeling van je footer.
Bekijk in de Twi AI-handleiding welke onderdelen tijdens de eerste installatie worden gemaakt.
Een presentatie per product, een ervaring per categorie
Elk product heeft een eigen verhaal. Presenteer een designstoel met grote afbeeldingen, licht een technisch product toe met uitgebreide specificaties of introduceer een collectie met een opvallend openingsgedeelte. Met Twicart Page Builder ontwerpt u product- en categoriepagina’s rond deze verschillende behoeften.
| Abonnement | Ontwerp van product- en categoriepagina’s |
|---|---|
| Basic | Productpagina’s gebruiken het ontwerp van het thema. Basic bevat geen eigen productpaginaontwerp. |
| Standart | U kunt product- en categoriepagina’s ontwerpen. Maak de weergave met Page Builder. |
| Pro | Maak meerdere ontwerpen voor productpagina’s en categoriepagina’s. Wijs de ontwerpen toe aan producten of categorieën voor verschillende presentaties. |
Pro: meerdere ontwerpen toewijzen aan producten en categorieën
Met Pro maakt u verschillende productpaginaontwerpen voor verschillende producten en verschillende categoriepaginaontwerpen voor verschillende categorieën. Maak het ontwerp en wijs het toe aan het betreffende product of de categorie. Geef elk deel van uw catalogus een presentatie die past bij de inhoud en de gewenste winkelervaring.
Maak voor meubels een productpagina met veel beelden en een merkverhaal, en voor een technisch artikel een pagina die beschrijvingen en specificaties benadrukt. Maak voor een nieuwe collectie een beeldrijke categoriepagina en voor technische producten een informatieve presentatie. Met Pro wijst u deze ontwerpen toe aan de betreffende producten en categorieën.
SEO-gericht ontwerp: benadruk de juiste inhoud op elke pagina
Ontwerpvrijheid geeft u ruimte om inhoud doelgericht te presenteren voor uw SEO-werk. Maak nuttige productinformatie zichtbaar met productspecifieke beschrijvingen, duidelijke koppen, specificaties en links naar relevante pagina’s. Verwerk op categoriepagina’s introducties en uitleg over de productgroep in het ontwerp.
In Twicarts SEO-gerichte aanpak vullen paginaontwerp en SEO-velden elkaar aan. Page Builder bepaalt hoe inhoud wordt gepresenteerd; product- en categoriebeheer bieden beschrijvingen en metadata voor die pagina’s. Producten hebben ook aparte index- en follow-instellingen. Met meerdere Pro-ontwerpen stemt u deze aanpak af op producten en categorieën.
Drie ontwerpmodi
Handmatig: plaatsen en bewerken.
Voeg zelf secties, kolommen en componenten toe. Verplaats elementen met slepen en neerzetten en pas ze aan via de bewerkingsopties.
AI: beschrijf het en laat AI ontwerpen.
Vertel de AI wat voor pagina je wilt. Maak je ontwerp door instructies te geven.
Maak kennis met Snelle aanpassing voor bewerkingen via beschrijvingen en markeringen.
Geef je ontwerp vorm met de eigen programmeertaal van Twicart. Deze modus is bedoeld voor gebruikers die aangepaste ontwerpen met code willen maken.
Lees de deelhandleiding voor Twicart Code Editor.
Paginastructuur
Een pagina heeft drie bouwstenen: secties, kolommen en componenten. Een sectie vormt een paginagedeelte, kolommen bepalen de indeling en componenten bevatten de zichtbare inhoud.
Voeg kolommen toe binnen een sectie. Kolommen kunnen zowel componenten als andere kolommen bevatten, zodat je binnen één sectie verschillende inhoudsgroepen kunt maken.
Ontdek ontwerpen met code in de Twicart Code Editor-handleiding.
Slepen, neerzetten en bewerken
Verplaats secties, kolommen en componenten met slepen en neerzetten. Het penpictogram boven elk element opent de bewerkingsopties; het verwijderpictogram verwijdert het element uit het ontwerp.
De bovenbalk bevat Desktop en de gezamenlijke weergave Mobiel en Tablet om uw ontwerp in verschillende schermindelingen te bekijken. Hier kiest u ook Handmatig, Ontwerp met AI of Code en gebruikt u Publiceren wanneer uw ontwerp klaar is.
Lees hoe het livevoorbeeld werkt wanneer je met AI ontwerpt.
Twicart besteedt bijzondere aandacht aan de winkelervaring van bezoekers op mobiel en tablet. Het intensieve dagelijkse gebruik van deze apparaten speelt een belangrijke rol in de ontwerpaanpak van Page Builder. We richten ons op leesbare inhoud, overzichtelijke indelingen en gebruiksvriendelijke pagina’s op mobiel en tablet. Bekijk uw ontwerp in de gezamenlijke weergave Mobiel en Tablet en stem het af op hoe bezoekers producten ontdekken, informatie lezen en links en acties op de pagina gebruiken.
Achtergronden en animaties voor secties en kolommen
Achtergronden gelden niet alleen voor de hele pagina. Voeg achtergrondkleuren, achtergrondafbeeldingen of animaties toe aan afzonderlijke secties en kolommen om elk onderdeel een eigen uiterlijk te geven. Open de instellingen via het potloodpictogram van het te bewerken element.
| Instelling | Gebruik in uw ontwerp |
|---|---|
| Achtergrondkleur | Laat een sectie opvallen met uw merkkleur of onderscheid een kolom visueel van de overige inhoud. |
| Achtergrondafbeelding | Plaats een afbeelding achter een sectie of kolom voor een campagne, merkverhaal of productpresentatie. |
| Animatie | Voeg beweging toe aan secties en kolommen en combineer deze met tekst en afbeeldingen. |
Voeg twee kolommen aan een sectie toe. Gebruik een effen achtergrond met kop en beschrijving in de eerste en een achtergrondafbeelding voor het product in de tweede. Voeg animatie toe aan de betreffende sectie of kolom voor beweging.
Sticky kolommen die zichtbaar blijven tijdens scrollen
U kunt kolommen sticky maken. Tijdens het scrollen kan de geselecteerde kolom zichtbaar blijven volgens het scrollgedrag binnen de indeling. Zo blijft belangrijke informatie in beeld naast langere inhoud.
- Plaats een korte productsamenvatting naast een lange beschrijving.
- Maak een indeling die contact- of navigatie-inhoud naast een inhoudskolom in beeld houdt.
- Bekijk de sticky kolom in Desktop en de gezamenlijke weergave Mobiel en Tablet.
Open een modal vanuit uw ontwerp
U kunt vanuit een Page Builder-ontwerp een modal openen. Hiermee biedt u extra inhoud op dezelfde pagina. Ontwerp ook de modalinhoud met Page Builder, zodat deze aansluit bij de stijl van de pagina.
Ontwerp bijvoorbeeld een modal voor extra productinformatie, een contactformulier of campagnegegevens. De inhoud ontwerpen en deze vanuit de pagina openen zijn twee onderdelen van dezelfde ervaring: bereid de inhoud voor en stel daarna de bijbehorende modalaanroep in uw ontwerp in.
Componentenbibliotheek
Kies een component die bij je inhoud past. De onderstaande namen komen overeen met de labels in de editor.
Producten en categorieën
Tekst en basisinhoud
Beeld en bewegende inhoud
Contact en bezoekersinteractie
Extra ontwerpcomponenten
Kant-en-klare ontwerpen met Magic Design en Hero Banner
Page Builder biedt meer dan losse basiselementen. Componenten zoals Magic Design en Hero Banner bevatten veel kant-en-klare ontwerpen. Kies een passende presentatie en pas de inhoud en ontwerpinstellingen aan uw merk aan.
| Instelling | Gebruik in uw ontwerp |
|---|---|
| Magic Design | Gebruik kant-en-klare ontwerpen voor verschillende inhoudspresentaties. Personaliseer de gekozen indeling met eigen teksten en afbeeldingen. |
| Hero Banner | Maak een opvallend openingsgedeelte met kant-en-klare ontwerpen. Presenteer hier uw merkboodschap, campagne of product. |
Kant-en-klare componentontwerpen vullen het importeren van secties en volledige pagina’s aan. Kies een componentontwerp voor één onderdeel of gebruik een sectie of pagina als grotere basis.
Kant-en-klare ontwerpen en archieven
Importeer een kant-en-klare sectie of pagina.
Voeg kant-en-klare Twicart-secties toe of importeer een volledige kant-en-klare pagina. Het geïmporteerde ontwerp vormt het uitgangspunt voor je eigen pagina.
Archiveer je eigen ontwerp.
Archiveer je pagina via het archiefgedeelte onderaan de editor en gebruik deze later opnieuw. Zo hoef je dezelfde indeling niet telkens opnieuw te maken.
Browservriendelijke HTML op uw website
Ontwerpen uit Page Builder worden op uw website weergegeven als HTML die browsers kunnen tonen. Koppen, tekst, afbeeldingen en interacties vormen de werkelijke pagina-inhoud. De secties, kolommen en componenten uit de editor worden de webpagina die bezoekers zien.
Deze aanpak combineert visuele ontwerpvrijheid met de inhoudsstructuur van een webpagina. Werk tijdens het ontwerpen ook koppen, beschrijvingen en links uit. Vul productinformatie en SEO-velden voor product- en categoriepagina’s aan in de bijbehorende beheerschermen.
Ontdek SEO-instellingen per product
Voorbeeld van een paginaworkflow
Basisstappen voor het maken van een Over ons-pagina in de Handmatige modus:
- Voeg een sectie met twee kolommen toe.
- Voeg Heading en Text Area aan de eerste kolom toe om uw merkverhaal te vertellen.
- Plaats een afbeelding in de andere kolom met de Image-component.
- Voeg achtergrondkleuren, afbeeldingen en gewenste animaties toe aan secties of kolommen.
- Maak bij langere inhoud een geschikte kolom sticky; ontwerp en open een modal als extra inhoud nodig is.
- Versleep elementen en bewerk ze via het potloodpictogram. Bekijk Desktop en de gezamenlijke weergave Mobiel en Tablet.
- Archiveer het ontwerp voor hergebruik. Gebruik Publiceren wanneer u klaar bent.
Lees hoe dit soort paginataken na de eerste installatie worden uitgevoerd.
Veelgestelde vragen
Kan ik ontwerpen zonder code te schrijven?
Ja. Gebruik slepen en neerzetten in de Handmatige modus of beschrijf je ontwerp in de AI-modus.
Kan ik een kolom in een andere kolom plaatsen?
Ja. Kolommen kunnen zowel componenten als andere kolommen bevatten.
Kan ik mijn ontwerpen opnieuw gebruiken?
Ja. Archiveer je pagina onderaan de editor voor later gebruik. Je kunt ook kant-en-klare secties en pagina’s importeren.
Welke abonnementen bevatten de Code-modus?
De Code-modus gebruikt de eigen programmeertaal van Twicart en is alleen beschikbaar met Pro-abonnementen.
Kan ik achtergronden toevoegen aan secties en kolommen?
Ja. Voeg achtergrondkleuren, achtergrondafbeeldingen en animaties toe aan secties en kolommen.
Waar vind ik kant-en-klare ontwerpen?
Componenten zoals Magic Design en Hero Banner bevatten kant-en-klare ontwerpen. U kunt ook secties en volledige pagina’s importeren.
Kan ik kolommen sticky maken en modals openen?
Ja. Maak kolommen sticky en open een modal vanuit uw ontwerp. De modalinhoud kunt u ook met Page Builder ontwerpen.
Hoe verschijnt het ontwerp op mijn website?
Uw ontwerp wordt weergegeven als browservriendelijke HTML. De inhoud en indeling uit de editor worden de webpagina die bezoekers zien.
Kan ik meerdere product- en categoriepaginaontwerpen maken?
Met Pro maakt u meerdere ontwerpen voor product- en categoriepagina’s en wijst u deze toe aan producten of categorieën.
Hoe werkt productpaginaontwerp bij Basic en Standart?
Basic gebruikt het productpaginaontwerp van het thema en bevat geen eigen productpaginaontwerp. Met Standart ontwerpt u product- en categoriepagina’s. Meerdere ontwerpen maken en toewijzen aan producten en categorieën is een Pro-functie.