Elementen

Bij het aanmaken van een nieuwe pagina in een TweeGo website wordt standaard in elke regio van deze pagina een document gezet met daarin een enkel tekst element. De tekst kan worden gewijzigd via een dubbelklik. Op deze manier kan een pagina eenvoudig worden gevuld met tekst. De mogelijkheden voor het vormen van mooie layouts zijn op deze manier enigszins beperkt. Om o.a. deze reden kunnen in een TweeGo website meerdere elementen aan een pagina worden toegevoegd. Zo kunnen losse koppen, afbeeldingen, alinea's en kolommen worden toegevoegd waarbij deze onderling kunnen worden verschoven, vormgegeven en gepositioneerd.

Container elementen

De meeste elementen staan op zichzelf en kunnen geen andere elementen bevatten. Enkele elementen zijn van het type 'container' en kunnen andere elementen bevatten. Het Kolommen element, Container (div) element, Template element, Ongeordende lijst (ul) element en Geordende lijst (ol) element zijn van het type container.

Elementen toevoegen

Nieuwe elementen kunnen worden toegevoegd via het plusje in het snelmenu, door ze te slepen vanuit de element verkenner of door met rechts op een bestaand element te klikken en te kiezen voor de optie 'Nieuw element'. Het nieuwe element wordt onder het bestaande element geplaatst. De volgorde van elementen kan worden gewijzigd door ze te verslepen, via de pijltjes in het snelmenu of door met rechts op een element te klikken en te kiezen voor de optie 'Schuif omhoog/links' of 'Schuif omlaag/rechts':

Elementen wijzigen

De inhoud van een element wordt gewijzigd via een dubbelklik, via het pen-icoon in het snelmenu, of door er met rechts op te klikken en te kiezen voor 'Wijzigen element'. De laatste twee opties worden gebruikt voor het wijzigen van losse links en afbeeldingen met popup omdat een dubbelklik de link/popup opent i.p.v. dat de inhoud wijzigbaar wordt.

Elk type element heeft een eigen editor waarmee de inhoud van het element kan worden gewijzigd. Voor het titel element is dit bijvoorbeeld de volgende editor:

Titel element editor.

Layout element aanpassen

Voor de meeste elementen kan de layout worden aangepast. Met de layout wordt de positie van het element t.o.v. andere elementen aangepast. Links onderin de editor van een element staat de knop 'Layout':

De knop toont de volgende popup:

Layout van een html element wijzigen.

Uitlijning
Via de uitklaplijst 'Uitlijning' kan worden bepaald of het element links of rechts van een onderstaand element moet worden uitgelijnd. Er kan worden gekozen tussen niets(lege waarde), 'Rechts' of 'Links'. Deze optie wordt vooral gebruikt voor het uitlijnen van afbeeldingen. Onderstaande afbeelding toont een titel element welke rechts van een tekst is uitgelijnd d.m.v. de optie 'Uitlijning > Rechts':

Een rechts zwevende titel.

Over het uitlijnen van afbeeldingen met de optie 'Uitlijning' is een tutorial gemaakt.

Versleepbaar
Door het aanvinken van de optie 'Vrij versleepbaar' kan een element vrij versleepbaar worden gemaakt. Deze optie wordt meestal gebruikt voor het positioneren van logo's of titels in de header, maar kan bijvoorbeeld ook worden gebruikt voor het plaatsen van een tekst over een afbeelding:

Vrij versleepbaar element.

Tekst breedte en hoogte
Via de velden 'Breedte' en 'Hoogte' kan een tekst/titel element een vaste hoogte en breedte worden gegeven. Deze velden worden meestal gebruikt voor het inperken van de afmetingen van een tekst en kunnen niet worden gebruikt voor het wijzigen van de afmetingen van een afbeelding. Onderstaande afbeelding toont een tekst element waarvan de breedte is ingeperkt tot 300 pixels:

Html element met beperkte breedte.

Padding en Margin
Via de velden 'Padding' of 'Margin' (vulling of marge) kan extra ruimte aan de boven-, rechter-, onder- en linkerkant van een element worden gegeven. Onderstaande afbeelding toont de titel 'Welkom' met 30 pixels padding aan alle zijden:

Padding en margin aan een element toevoegen.

Vormgeving element aanpassen

Voor de meeste elementen kan ook de vormgeving worden aangepast. Links onderin de editor van een element staat de knop 'Vormgeving':

De knop toont de volgende popup:

Element CSS editor.

CSS klasse(n)
In het veld 'CSS klasse(n)' kunnen één of meerdere css-klassen aan een element worden toegevoegd. Bij het invoeren van meerdere klassen moeten deze door een spatie worden gescheiden. De inhoud van dit veld wordt in het 'class' attribuut van het element gerenderd. Via de stylesheets in het onderdeel css kan het element vervolgens worden vormgegeven.

Vaste stijl
Via de uitklaplijst 'Vaste stijl' kan een stijl voor het element worden geselecteerd. Een vaste stijl werkt ongeveer op dezelfde manier als het zetten van een css klasse. Echter, een css klasse wordt handmatig via een stylesheet in het onderdeel 'css' vormgegeven terwijl een vaste stijl via een grafische css editor in het onderdeel 'designer' wordt vormgegeven. 

De 'Toevoegen' knop toont de volgende popup:

Vaste stijl aan een element toevoegen.

In het veld 'Naam' wordt de naam van de stijl ingevoerd, bv. 'blok-grijze-achtergrond'. Wanneer de wijzigingen aan het element worden opgeslagen opent automatisch de vaste stijl editor uit het onderdeel designer waarmee de vaste stijl wordt bewerkt.

Vrije stijl
Via het veld 'Vrije stijl' kunnen inline styles aan het element worden toegevoegd. De inhoud van dit veld wordt in het 'style' attribuut van het element gerenderd.

Elementen verwijderen

Een element wordt verwijderd via het kruisje in het snelmenu of door met rechts op het element te klikken en te kiezen voor de optie 'Verwijderen element'. Na bevestiging wordt het element verwijderd. Is het element een container element dan worden eventuele elementen in het container element ook verwijderd.

Elementen kopiëren en plakken

Een element kan worden gekopiëerd via het snelmenu of door met rechts op het element te klikken en te kiezen voor de optie 'Kopiëren element'. Hierna kan het element meerdere keren worden geplakt via het snelmenu of door met rechts op een bestaand element te klikken en te kiezen voor de optie 'Plakken element'. Het element wordt inclusief inhoud en eventueel aangebrachte 'Layout' en 'Vormgeving' geplakt onder het bestaande element:

Elementen verplaatsen

Naast het kopiëren van elementen kunnen deze ook worden verplaatst. Een element kan worden verplaatst door het te verslepen. Daarnaast kan een element ook worden verplaatst door het te knippen via het snelmenu of door met rechts op het element te klikken en te kiezen voor de optie 'Knippen element'. Vervolgens kan het element worden geplakt via het snelmenu of door met rechts op een bestaand element te klikken en de optie 'Plakken element'. Het element wordt op zijn originele positie weggehaald en op de nieuwe positie geplaatst:

Twitter icon YouTube icon Facebook icon LinkedIn icon RSS icon