Översikt över Rich text-element - Webflow hjälp
Använd ett Rich Text Element (RTE) för att skapa långt innehåll.
Ett Rich text-element (RTE) är det perfekta elementet för att skapa långt innehåll som blogginlägg, om-sidor, biografier, etc. Istället för att lägga till enskilda rubriker, stycken, listor eller bildelement kan du dubbelklicka på ett Rich text-element för att skapa och formatera text, anpassad kod och medieelement.
Hur man lägger till ett Rich text-element på din webbplats
Du kan lägga till ett Rich text-element genom att dra det från Lägg till-panelen (A) till Designer-duken. För att lägga till eller redigera innehållet, dubbelklicka på Rich text-elementet eller välj elementet och tryck på Enter eller Return på ditt tangentbord.
Du kan lägga till följande element inom Rich text-element:
- Stycken
- Rubriker (H1-H6)
- Bilder
- Bildtexter
- Bild alt-attribut
- Anpassad kod
- Blockcitat
- Oordnade listor (punktlistor)
- Ordande listor (numrerade)
- Videor (YouTube, Vimeo)
- Rika medier (Google maps, SoundCloud, Imgur, Giphy, Codepen, och mer)
Du kan också lägga till ytterligare formatering till textelement:
- Länkar (URL, sida, e-post, etc.)
- Fet text
- Kursiv text
- Upphöjd och nedsänkt text
- Kod
Snedstreckskommandon
När du redigerar innehåll i en RTE kan du använda snedstreckskommandon för att snabbt generera text med Webflow AI Assistant eller lägga till nya innehållselement. För att använda snedstreckskommandon, tryck på / (snedstreck) på ditt tangentbord och klicka på Generera mer text för att lägga till kontextuellt relevant text med AI Assistant, välj önskat element från Lägg till-menyn, eller börja skriva för att filtrera listan över element:
- Rubrik (H1–H6)
- Numrerad lista
- Punktlista
- Stycke
- Blockcitat
- Bild
- Video
- Rikt innehåll
- HTML-inbäddning
- Kodblock
Hur man lägger till och formaterar textinnehåll
Du kan börja skriva i RTE och sedan lägga till formatering till texten för att skapa rubriker, blockcitat, fet eller kursiv text, upphöjd eller nedsänkt text och länkar.
Generera textinnehåll med Webflow AI Assistant
För att snabbt lägga till kontextuellt relevant text till en RTE med AI Assistant:
- Högerklicka på RTE
- Välj Ändra text från snabbmenyn
- (Valfritt) Ange en prompt som beskriver texten du vill generera
- Klicka på ikonen "Skicka prompt"
- Klicka på Klar för att acceptera den genererade texten
Läs mer om att använda Webflow AI Assistant för att generera och redigera innehåll.
Hur man lägger till stycken
Precis som i vilken annan textredigerare som helst, kommer du att skapa ett nytt stycke på en ny rad genom att trycka på Enter på ditt tangentbord där du kan fortsätta skriva. För att lägga till flera stycken, tryck på Enter i slutet av ett stycke. Du kan också använda Webflow AI Assistant för att lägga till och förfina text åt dig.
Hur man lägger till rubriker och blockcitat
För att skapa en rubrik, markera valfri text i ett stycke och välj ett rubrikalternativ (H1-H6). Samma gäller för att skapa blockcitat.
Hur man formaterar text och lägger till länkar
Vilken del som helst av ett textelement (t.ex. rubriker, stycken, bildtexter, etc.) kan formateras med fetstil, kursiv, upphöjd, nedsänkt och länkar genom att markera en del av texten och tillämpa dina önskade formateringsalternativ. Läs mer om inline-textformatering.
När du skapar en länk inom en RTE kan du välja en URL, sida, sektionssida, e-post eller telefonnummer.
Kortkommandon
Dessa kortkommandon kan hjälpa dig att snabbt formatera innehåll i rik text:
- Infoga ett fast mellanslag: Shift + Space
- Infoga radbrytning: Shift + Enter
- Fet text: Command + B (Control + B på Windows)
- Kursivera text: Command + I (Control + I på Windows)
- Infoga hyperlänk: Command + K (Control + K på Windows)
När du redigerar i RTE kan du använda snedstreckskommando (“/**”) för att snabbt lägga till innehållselement. Du kan också använda Markdown genvägar:
- Kursivera text:
*text*eller_text_ - Fet text:
**text**eller__text__ - Fet & kursiv:
***text***eller___text___ - Infoga hyperlänk:
[hyperlänk text](https://www.url.com) - Rubrik 1:
#+ Space - Rubrik 2:
##+ Space - Rubrik 3:
###+ Space - Rubrik 4:
####+ Space - Rubrik 5:
#####+ Space - Rubrik 6:
######+ Space - Blockcitat:
>+ Space - Oordnad lista:
-+ Space - Ordning lista:
1.+ Space
Hur man lägger till medieinnehåll, anpassad kod och listor
När din textmarkör är på en ny rad visas en “plus”-knapp. Genom att klicka på denna knapp visas en infogningsmeny med alternativ för att lägga till bilder, videor, annat rikt medieinnehåll, anpassad kod och punkt- eller numrerade listor.
Lägg till bilder, videor och rikt medieinnehåll
Alla medieelement i RTE är responsiva och kommer att respektera innehållets bildförhållande. YouTube, Vimeo och Dailymotion-videostöd har förbättrats för att tillåta anpassade starttider. Här är en lista över några stödda rika medietyper:
- YouTube
- Vimeo
- Instagram-inlägg
- Facebook-inlägg
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Imgur-album
- Google maps
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Spotify spellistor och listor
- Giphy
- SoundCloud
- Och mer!
Mediainställningar
Varje medieelement kan storleksändras med hjälp av förinställningarna i bildinställningarna eller ställas in på ett specifikt pixel- eller procentvärde genom att klicka på "skiftnyckel"-ikonen i verktygsfältet. En valfri bildtext kan också läggas till under bilder.
Alt-text
För att lägga till alt-text till bilder, välj bilden, klicka på "skiftnyckel"-ikonen och skriv in din alt-text. Läs mer om att skriva beskrivande alt-text.
Hur man lägger till anpassad kod
Infogningsmenyn innehåller en knapp för att lägga till anpassad kod. Du kan använda anpassad kod för att skapa tabeller och avdelare med HTML, styla delar av ditt innehåll med CSS, utöka webbplatsens funktionalitet med JavaScript och bädda in tredjepartsinnehåll.
Steg:
- Placera markören där du vill lägga till kod
- Klicka på "plus"-ikonen för att öppna infogningsmenyn och klicka på knappen för anpassad kod
- Lägg till din kod
Hur man lägger till listor
Infogningsmenyn erbjuder alternativ för att lägga till oordnade (punkt) och ordnade (numrerade) listor. Du kan också nästla eller avnästla listor.
- Punktlista: använd infogningsmenyn eller skriv ett bindestreck
-följt av ett mellanslag. - Numrerad lista: använd infogningsmenyn eller skriv ett heltal följt av en punkt och ett mellanslag.
- Nästla en lista: välj objekt och tryck på Tab. Avnästla: välj och tryck på Shift + Tab.
Hur man lägger till rikt textinnehåll från andra källor
Du kan klistra in rikt textinnehåll från andra webbplatser eller ordbehandlare (som Google Docs). Formatering, länkar och bilder kommer att bibehållas om de klistras in i Designer eller CMS-riktextfältet.
Hur man omorganiserar och tar bort element
Element i ett Rich text-element kan omorganiseras genom att dra och släppa på duken eller Navigatorn, eller via tangentbordsgenvägar. Element kan tas bort genom att välja och trycka på Backspace eller Command + X (Control + X på Windows).
Hur man stylar RTE-innehåll
Styling av individuella element i ett Rich text-element
Styla element inom Rich text-elementet som vilket Webflow-element som helst: välj på duken, gå till Style panel, tillämpa eller skapa en klass och styla.
Styling av element i ett Rich text-element med HTML-taggar
RTE-element ärver stilar från HTML-taggar. Du kan styla via inbäddade selektorer, vilket begränsar standardstilar till RTE med samma klass.
Steg:
- Välj RTE på duken
- Ge RTE en klass
- Välj element i RTE
- Gå till Style panel (S)
- Klicka i Selector-fältet
- Välj HTML-tagg
- Klicka på Nest selector inside “class name”
- Styla som önskat
Hur man stylar dynamisk rich text
Rich text-element kan kopplas till rich text-fält i en Collection. Styling görs bäst genom att koppla bort, styla och återkoppla—eller genom att tillämpa en klass, styla och hålla den kopplad. Lär dig mer om dynamisk rich text.