Deze gids loopt met je door de Design Studio, zodat je weet waar alles zit voordat je gaat bouwen. Hij is bedoeld voor iedereen die de editor voor het eerst opent. Aan het eind herken je de pictogrambalk, het canvas, de bovenbalk, de zwevende werkbalk en de zoombediening, en weet je wat elk onderdeel doet.
Waar de Design Studio voor is
In de Design Studio bouw je een producttemplate. Je plaatst tekst, afbeeldingen, vormen en andere elementen op een canvas en bepaalt daarna welke elementen een klant in de webshop mag wijzigen.
Het canvas vertegenwoordigt het actieve ontwerpgebied. Controleer de werkelijke afmetingen van het vlak van het product, de afloop, de lettertypen en de bedoelde productie-uitvoer voordat je een schermpreview als printklaar artwork beschouwt.
Je kunt de Design Studio op twee manieren openen. Open hem vanuit een product om het ontwerp van dat product te bewerken, of open een zelfstandig ontwerp en koppel het later aan een product.
De pictogrambalk links
De pictogrambalk loopt langs de linkerrand van de editor. Hiermee wissel je tussen de hulpmiddelen en panelen die je het meest gebruikt.
De onderdelen van de balk staan in deze volgorde:
- Elementen: voeg tekst, vormen, graphics en uploads toe.
- Lagen: bekijk en herschik alles wat op het canvas staat.
- Sjablonen: begin vanaf een herbruikbare indeling of sla er een op.
- Kanten: wissel tussen de kanten van het product, kopieer een ontwerp van de ene naar de andere en stel achtergronden in. Bij een product dat in meerdere maten wordt verkocht staat er Maten, en bij een boek Pagina’s.
- Opties: kies hoe de varianten en add-ons van het product er voor klanten uitzien. Hun keuzes, prijzen en foto’s blijven op de productpagina staan. Klik op een onderdeel om het paneel te openen. Het onderdeel waarop je klikte, houdt een wit kaartje. Houd de aanwijzer boven een ander onderdeel om het paneel te bekijken: dat onderdeel wordt grijs terwijl je kijkt, door weg te gaan komt het paneel terug waarop je klikte, en een klik houdt de preview vast. Klik opnieuw op het actieve onderdeel om het paneel te sluiten.
Een leeg canvas laat zien waar je kunt beginnen: Tekst, Foto en Graphics voegen er direct een toe, Elementen toevoegen opent het paneel met al het andere en Achtergrond stelt de kleur achter je ontwerp in.
Om te zoeken, gebruik je het zoekvak bovenaan Elementen, of druk je op Ctrl+K (Cmd+K op een Mac) om acties en de lagen in je ontwerp te doorzoeken. De weergaveopties van het canvas, zoals het raster, vastklikken, linialen en de printhulplijnen, vind je onder Bestand › Weergave.
De bovenbalk, de zwevende werkbalk en de statusbalk
Drie onderdelen omringen het canvas: de bovenbalk erboven, een zwevende werkbalk net onder de bovenbalk en de statusbalk langs de onderkant.
De bovenbalk
De bovenbalk bevat je navigatie en opslagbediening. Van links naar rechts zie je:
- Een pijl Terug om de editor te verlaten.
- Een menu Bestand.
- De ontwerptitel in het midden, waarop je kunt klikken om hem direct te hernoemen, en ernaast of het product in je winkel staat.
- Een pil Ongedaan maken en Opnieuw. Daarna, als er iets bekeken moet worden, het aantal waarschuwingen (lege kanten, foto’s met lage resolutie) en eventuele lettertypen die niet zijn geladen. Klik op de waarschuwingen om de lijst te zien.
- Rechts een knop Opslaan. Die staat op Opslaan als er niet-opgeslagen wijzigingen zijn, op Opslaan… terwijl je werk wordt bewaard en op Opgeslagen als het klaar is. Mislukt het opslaan, dan verschijnt er een foutmelding onder de bovenbalk.
Het dock met het klantformulier, dat je opent via het tabblad aan de rechterrand van het canvas, toont het formulier dat shoppers invullen. Met Voorbeeld probeer je het uit als shopper. Bewerken toont hetzelfde formulier met een klein handvat en een potlood bij elk veld als je het aanwijst: sleep het handvat om het veld omhoog of omlaag te verplaatsen, of klik op het potlood om de instellingen van dat veld te openen. De ronde pijl, Formulier resetten, zet de velden terug naar de standaardwaarden van het ontwerp, en ⋯ opent de eigen instellingen van het formulier, zoals de indeling, stappen en veldvolgorde, in het paneel Customizer in de linkerbalk. Om de customizer van de shopper op volledige grootte in een eigen venster te zien, kies je Bestand › Klantpreview. Controleer de gepubliceerde flow van de shopper apart.
De editor slaat alleen op. Je ontwerp gaat live vanaf de productpagina, waar je het product publiceert.
De zwevende werkbalk
Een zwevende werkbalk staat tussen de bovenbalk en het canvas. Hij heeft altijd dezelfde onderdelen:
- Bewerken, bij elk element als eerste, dat het eigenschappenpaneel opent. Gebruik het als een ander paneel, zoals Lagen, open staat.
- Een paar snelle knoppen voor wat je het meest doet met het geselecteerde element. Tekst krijgt zijn lettertype, grootte, kleur, vet en uitlijning. Een foto krijgt Vervangen, Bijsnijden en Effecten. Een kaart toont zijn plaats. Een knop die een instelling noemt, zoals de plaats, opent het eigenschappenpaneel direct bij die instelling.
- Personaliseerbaar, dat aangeeft of klanten het element kunnen wijzigen en dat in- of uitschakelt. Het staat op Personaliseerbaar maken zolang het uit staat, en ontbreekt bij elementen die klanten niet kunnen wijzigen.
- Meer, de ⋯ aan het einde, met hetzelfde menu als een rechtsklik: dupliceren, vergrendelen, laagvolgorde, spiegelen en verwijderen.
Een vergrendeld element toont alleen Vergrendeld en, als je het zelf hebt vergrendeld, Ontgrendelen. Bij meerdere geselecteerde elementen verschijnen Uitlijnen, Verdelen en Groeperen. Als er niets is geselecteerd, toont de werkbalk de achtergrondkleur en het canvasformaat. Terwijl je een foto bijsnijdt, wordt de werkbalk vervangen door Herstellen, Annuleren en Klaar.
De statusbalk
De statusbalk loopt langs de onderkant van de editor, met de kanten van het product in het midden. Rechts staat, van links naar rechts:
- Het zoompercentage. Klik erop om het canvas passend op het scherm te zetten, wanneer het uit beeld raakt of je het weer gecentreerd wilt. Wijs het aan en er openen een knop Uitzoomen en een knop Inzoomen aan weerszijden.
- Help, het ?, met Sneltoetsen en Hulp en chat. Hulp en chat opent de supportchat, die in de editor geen zwevende knop heeft.
Of afmetingen in millimeters (mm) of pixels (px) worden getoond, is een weergave-instelling: Bestand › Weergave › Eenheden.
Volgende stap
Nu je de indeling kent, kun je tekst toevoegen en opmaken om je eerste element op het canvas te zetten.