Overzicht van rich text-element - Webflow help
Gebruik een rich text-element (RTE) om lange inhoud te maken.
Een rich text-element (RTE) is het perfecte element voor het maken van lange inhoud zoals blogposts, over-pagina's, biografieën, enz. In plaats van individuele koppen, alinea's, lijsten of afbeeldingelementen toe te voegen, kun je dubbelklikken op een rich text-element om tekst, aangepaste code en media-elementen te maken en op te maken.
Hoe voeg je een rich text-element toe aan je site
Je kunt een rich text-element toevoegen door het vanuit het Toevoegen-paneel (A) naar het canvas van de Designer te slepen. Om de inhoud toe te voegen of te bewerken, dubbelklik je op het rich text-element of selecteer je het element en druk je op Enter of Return op je toetsenbord.
Je kunt de volgende elementen binnen rich text-elementen toevoegen:
- Alinea's
- Koppen (H1-H6)
- Afbeeldingen
- Bijschriften van afbeeldingen
- Alt-attributen van afbeeldingen
- Aangepaste code
- Blokcitaten
- Ongeordende lijsten (met opsommingstekens)
- Geordende lijsten (genummerd)
- Video's (YouTube, Vimeo)
- Rijke media (Google Maps, SoundCloud, Imgur, Giphy, Codepen en meer)
Je kunt ook extra opmaak toevoegen aan tekstelementen:
- Links (URL, pagina, e-mail, enz.)
- Vetgedrukte tekst
- Cursieve tekst
- Superscript en subscript tekst
- Code
Slash-opdrachten
Wanneer je inhoud bewerkt in een RTE, kun je slash-opdrachten gebruiken om snel tekst te genereren met de Webflow AI Assistant of nieuwe inhoudselementen toe te voegen. Om slash-opdrachten te gebruiken, druk je op / (schuine streep) op je toetsenbord en klik je op Meer tekst genereren om contextueel relevante tekst toe te voegen met de AI Assistant, selecteer je het gewenste element uit het Toevoegen-menu, of begin je te typen om de lijst met elementen te filteren:
- Kop (H1–H6)
- Genummerde lijst
- Lijst met opsommingstekens
- Alinea
- Blokcitaat
- Afbeelding
- Video
- Rijke inhoud
- HTML insluiten
- Codeblok
Hoe tekstinhoud toe te voegen en op te maken
Je kunt beginnen met typen in de RTE en vervolgens opmaak aan de tekst toevoegen om koppen, blokcitaten, vet of cursief, superscript of subscript tekst en links te maken.
Tekstinhoud genereren met de Webflow AI Assistant
Om snel contextueel relevante tekst toe te voegen aan een RTE met behulp van de AI Assistant:
- Rechtsklik op de RTE
- Kies Kopie aanpassen uit het contextmenu
- (Optioneel) Voer een prompt in die de tekst beschrijft die je wilt genereren
- Klik op het pictogram "Prompt indienen"
- Klik op Gereed om de gegenereerde tekst te accepteren
Lees meer over het gebruik van de Webflow AI Assistant om inhoud te genereren en te bewerken.
Hoe alinea's toe te voegen
Net als bij elke andere teksteditor, zal het indrukken van Enter op je toetsenbord een nieuwe alinea op een nieuwe regel creëren waar je verder kunt typen. Om meerdere alinea's toe te voegen, druk je op Enter aan het einde van een alinea. Je kunt ook de Webflow AI Assistant gebruiken om tekst voor je toe te voegen en te verfijnen.
Hoe koppen en blokcitaten toe te voegen
Om een kop te maken, selecteer je een tekst in een alinea en kies je een kop (H1-H6) optie. Hetzelfde geldt voor het maken van blokcitaten.
Hoe tekst op te maken en links toe te voegen
Elk deel van een tekstelement (bijv. koppen, alinea's, bijschriften, enz.) kan worden opgemaakt met vet, cursief, superscript, subscript en links door een deel van de tekst te selecteren en je gewenste opmaakopties toe te passen. Lees meer over inline tekstopmaak.
Wanneer je een link maakt binnen een RTE, heb je de optie om een URL, pagina, paginasectie, e-mail of telefoonnummer te kiezen.
Toetsenbord sneltoetsen
Deze toetsenbord sneltoetsen kunnen je helpen om snel rich text content te formatteren:
- Voeg een niet-afbrekende spatie in: Shift + Spatie
- Voeg een regelafbreking in: Shift + Enter
- Vetgedrukte tekst: Command + B (Control + B op Windows)
- Cursieve tekst: Command + I (Control + I op Windows)
- Voeg hyperlink in: Command + K (Control + K op Windows)
Tijdens het bewerken in de RTE kun je de schuine streep opdracht sneltoets (“/**”) gebruiken om snel inhoudselementen toe te voegen. Je kunt ook Markdown sneltoetsen gebruiken:
- Cursieve tekst:
*tekst*of_tekst_ - Vetgedrukte tekst:
**tekst**of__tekst__ - Vetgedrukt & cursief:
***tekst***of___tekst___ - Voeg hyperlink in:
[hyperlink tekst](https://www.url.com) - Kop 1:
#+ Spatie - Kop 2:
##+ Spatie - Kop 3:
###+ Spatie - Kop 4:
####+ Spatie - Kop 5:
#####+ Spatie - Kop 6:
######+ Spatie - Blokcitaat:
>+ Spatie - Ongeordende lijst:
-+ Spatie - Geordende lijst:
1.+ Spatie
Hoe media-inhoud, aangepaste code en lijsten toe te voegen
Wanneer je tekstcursor op een nieuwe regel staat, verschijnt er een “plus” knop. Door op deze knop te klikken, wordt een invoegmenu weergegeven met opties om afbeeldingen, video's, andere rijke media, aangepaste code en opsommingstekens of genummerde lijsten toe te voegen.
Afbeeldingen, video's en rijke media toevoegen
Alle media-elementen in de RTE zijn responsief en respecteren de beeldverhouding van de inhoud. YouTube-, Vimeo- en Dailymotion-video-ondersteuning is verbeterd om aangepaste starttijden toe te staan. Hier is een lijst van enkele ondersteunde rijke mediatypen:
- YouTube
- Vimeo
- Instagram post
- Facebook post
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Imgur albums
- Google maps
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Spotify afspeellijsten en hitlijsten
- Giphy
- SoundCloud
- En meer!
Media-instellingen
Elk media-element kan worden geschaald met behulp van de presets in de afbeeldingsinstellingen of ingesteld op een specifieke pixel- of percentagewaarde door op het "moersleutel"-pictogram in de werkbalk te klikken. Een optioneel onderschrift kan ook onder afbeeldingen worden toegevoegd.
Alt-tekst
Om alt-tekst aan afbeeldingen toe te voegen, selecteer de afbeelding, klik op het "moersleutel"-pictogram en typ vervolgens je alt-tekst. Meer informatie over het schrijven van beschrijvende alt-tekst.
Hoe aangepaste code toe te voegen
Het invoegmenu bevat een knop om aangepaste code toe te voegen. Je kunt aangepaste code gebruiken om tabellen en scheidingslijnen te maken met HTML, delen van je inhoud te stijlen met CSS, de functionaliteit van je site uit te breiden met JavaScript en inhoud van derden in te sluiten.
Stappen:
- Plaats je cursor waar je code wilt toevoegen
- Klik op het "plus"-pictogram om het invoegmenu te openen en klik op de knop voor aangepaste code
- Voeg je code toe
Hoe lijsten toe te voegen
Het invoegmenu biedt opties om ongeordende (bullet) en geordende (genummerde) lijsten toe te voegen. Je kunt ook lijsten nesten of ont-nesten.
- Bulletlijst: gebruik het invoegmenu of typ een streepje
-gevolgd door een spatie. - Genummerde lijst: gebruik het invoegmenu of typ een geheel getal gevolgd door een punt en een spatie.
- Een lijst nesten: selecteer item en druk op Tab. Ont-nesten: selecteer en druk op Shift + Tab.
Hoe rijke tekstinhoud van andere bronnen toe te voegen
Je kunt rijke tekst van andere sites of tekstverwerkers (zoals Google Docs) plakken. Opmaak, links en afbeeldingen blijven behouden als ze in de Designer of CMS-rijke tekstveld worden geplakt.
Hoe elementen te herschikken en verwijderen
Elementen in een Rich text element kunnen worden herschikt via slepen en neerzetten op het canvas of Navigator, of via toetsenbord sneltoetsen. Elementen kunnen worden verwijderd door te selecteren en op Backspace of Command + X (Control + X op Windows) te drukken.
Hoe RTE-inhoud te stijlen
Individuele elementen binnen een Rich text element stijlen
Stijl elementen binnen het Rich text element zoals elk Webflow-element: selecteer op het canvas, ga naar Stijl paneel, pas een klasse toe of maak er een, en stijl.
Elementen binnen een Rich text element stijlen met HTML-tags
RTE-elementen erven stijlen van HTML-tags. Je kunt stijlen via geneste selectoren, waarbij standaardstijlen worden beperkt tot RTE's met dezelfde klasse.
Stappen:
- Selecteer RTE op canvas
- Geef RTE een klasse
- Selecteer element in RTE
- Ga naar Stijl paneel (S)
- Klik in het Selector veld
- Selecteer HTML-tag
- Klik op Nest selector binnen “klassennaam”
- Stijl naar wens
Hoe dynamische rich text te stijlen
Rich text elementen kunnen worden gekoppeld aan rich text velden in een Collectie. Stijlen is het beste door los te koppelen, te stijlen en opnieuw te verbinden—of door een klasse toe te passen, te stijlen en verbonden te houden. Meer informatie over dynamische rich text.