Elementen zijn de bouwstenen van jouw websitemaker website. In dit artikel zullen wij het "Tabs" element toelichten.
Waar kan ik het Tabs element vinden?
Hoe plaats ik het Tabs element?
Wat kan ik doen met het Tabs element?
Waar kan ik het Tabs element vinden?
Het "Tabs" element is te vinden in het "Elementen" menu, in de linkerbalk van je websitemaker bij de +. Je kan hem terugvinden onder de categorie "Basis" óf het zoekveld gebruiken.
Hoe plaats ik het Tabs element?
Je kan het "Tabs" element plaatsen door deze te slepen naar de gewenste plek. Simpel dus!
Wat kan ik doen met het Tabs element?
Het bewerken van elementen verdelen we meestal in twee aparte categorieën. Zo kan je de inhoud van een element bewerken, maar ook het ontwerp. Zowel de inhoud als het ontwerp van een element kan je aanpassen door simpelweg op het element te klikken in je websitemaker.
Inhoud Bewerken
In de bovenstaande afbeelding zie je terug wat je kan instellen binnen het inhoud venster. Hier kan je tabbladen toevoegen óf verwijderen én ervoor kiezen om een afbeelding te weergeven of niet.
Wanneer je op één van de tabbladen klikt, zal er een nieuw venster verschijnen. Zie onderstaande afbeelding :
- Label van tabblad
Vul hier de titel van je tabblad in. Het standaard 'Tabblad' zal dan vervangen worden met jouw nieuwe titel.
- Type labelkop
Selecteer hier het type labelkop dat je wilt gebruiken. Standaard zal deze op 'h4' staan, maar je kan hier bijvoorbeeld ook een "h1" van maken om deze een stuk groter (en belangrijker voor je SEO!) te maken.
- Titel
Vul hier de 'Beschrijvingstitel' in van het specifieke tabblad.
- Beschrijving
Hier plaats je de beschrijving van je artikel / tabblad.
- Knop Weergeven
Hier kan je kiezen of je een knop wilt hebben op je tabblad of niet. Staat alle informatie die je wilt overbrengen al in het tabblad? Dan kan je deze waarschijnlijk uitzetten. Wil je mensen activeren iets te doen aan de hand van de inhoud van je tabblad? Dan wil je deze waarschijnlijk aan hebben staan.
- Link toevoegen
Hier kan je de knop 'linken' naar een andere plek. Bijvoorbeeld je eigen contact pagina, een pagina met meer informatie, maar ook een externe website, e-mail of download link behoren tot de mogelijkheden!
- Tekst op knop
Gebruik dit tekstveld om je knop een andere naam te geven.
Ontwerp Bewerken
In de bovenstaande afbeelding zie je enkele instellingen terug die het ontwerp venster jouw Tabblad element te bieden heeft.
Via "Lay-out" kan je een ontwerp kiezen. Er zijn 4 ontwerpen waaruit je kunt kiezen.
"Alle tabbladen" stelt je in staat het uiterlijk van jouw Tabs element te wijzigen. Selecteer hier je gewenste lettertype, lettergrootte en de kleur.
De B, U en I knoppen stellen je in staat de tekst dik, onderstreept óf schuin te drukken. Ook kan je de uitlijning van de tekst én de tekstrichting wijzigen.
Via Achtergrondkleur kan je de achtergrondkleur van de daadwerkelijke 'tabs' wijzigen. Met Rand kan je deze een extra rand meenemen. Ook de rand kan je een kleur meegeven.
Tot slot kan je Richting van tabbladen omdraaien gebruiken om de volgorde van je tabbladen om te draaien.
Via "Geselecteerd tabblad en aanwijzen" wijzig je het uiterlijk van het actieve tabblad van de bezoeker.
Selecteer hier de gewenste lettertype, lettergrootte en kleur voor het tabblad dat actief is.
De B, U en I knoppen stellen je in staat de tekst dik, onderstreept óf schuin te drukken. Ook kan je de uitlijning van de tekst én de tekstrichting wijzigen.
Wijzig hier de "Achtergrondkleur", "Rand" en "Randkleur" om het actieve tabblad te onderscheiden van de inactieve tabbladen. Over het algemeen ervaren bezoekers dit als prettig.
Via "Stijl Beschrijving" wijzig je het uiterlijk van zowel de titel beschrijving als de algemene tekst.
Selecteer hier de gewenste lettertype, lettergrootte en kleur voor de Titel en de Beschrijving.
De B, U en I knoppen stellen je in staat de tekst dik, onderstreept óf schuin te drukken. Ook kan je de uitlijning van de tekst én de tekstrichting wijzigen.
Wijzig hier de "Achtergrondkleur", "Rand" en "Randkleur" om het uiterlijk van het venster te wijzigen. Dit wijzigt alles behalve de daadwerkelijke "Tabs".
Via "Knopstijl" kan je de eigenschappen van de knop wijzigen, mits je de knop aan hebt staan natuurlijk.
Zet de "Positie van knoppen omdraaien" schuifknop aan om de positie van je knop te wijzigen.
Met behulp van de "Breedte" en "Hoogte" schuifregelaars, pas je deze eigenschappen van je knop aan. Heb je een mooie verhouding voor je knop gevonden, maar wil je nog een beetje met het precieze formaat van de knop spelen? Zet dan de "Verhouding Bewaren" schuifknop aan om de knopverhoudingen te waarborgen terwijl je het formaat van de knop zelf wijzigt.
Bij "Knoptekst" kan je aanpassingen maken in de tekstopmaak van je knop.
Selecteer hier het gewenste lettertype, lettergrootte en de kleur voor de knop.
De B, U en I knoppen stellen je in staat de tekst dik, onderstreept óf schuin te drukken. Ook kan je de uitlijning van de tekst én de tekstrichting wijzigen.
Wijzig "Kleur lettertype aanwijzen" om de letters een andere kleur te geven wanneer bezoekers hun muis op de knop plaatsen. Let op: Dit werkt enkel voor de desktop versie van je website.
Klik op "Meer ontwerpopties" om de "Achtergrondkleur" en "Randkleur" bij het aanwijzen te wijzigen. De "Afgeronde hoeken" schuifregelaar laat je de hoeken van jouw knop aanpassen.
Tot slot kan je met de "Schaduw" schuifknop een schaduw toevoegen aan je knop om deze zo een mooie '3d' effect te geven.
Bij "Stijl van afbeelding" kan je enkele dingen wijzigen aan de afbeelding van je tabblad, mits je een afbeelding gebruikt natuurlijk.
Gebruik "Breedte" en "Hoogte" om het formaat van je afbeelding te wijzigen.
Met behulp van de "Positie van afbeeldingen omdraaien" en "Afbeelding en tekst naast elkaar" schuifknoppen kan je de positie van de afbeelding wijzigen.
Met behulp van de "Breedte" schuifregelaar onder "Framestijl" kan je het formaat van het gehele element aanpassen. Deze kan nooit groter zijn dan de kolom waar het element in staat!
Via "Animatie" kan je de knop laten bewegen. Zo kan je een "Trigger" kiezen, dit is de oorzaak voor het bewegen (Bijvoorbeeld het laden van de pagina) en een "Animatie", wat dus de daadwerkelijke animatie van de knop bepaalt.
"Ruimten" kan je gebruiken om de ruimten in én rondom je "Tabs" element aan te passen.
Wil je binnen de kaders van je Tabs element meer ruimte creëren? Pas dan de waarden in het binnenste vierkantje in.
Wil je meer ruimte rondom het Tabs element creëren? Pas dan de waarden in het buitenste vierkantje aan.
