Innehållskomponenter content-components
När du utformar innehåll för e-post, landningssidor, mallar och visuella fragment använder du Content components för att lägga till visuella designelement. Du kan lägga till så många innehållskomponenter du behöver inuti en eller flera strukturkomponenter, som definierar layouten.
Innehållsbibliotek
Avsnittet Contents längst ned i komponentbiblioteket visar de tillgängliga innehållskomponenterna:
Verktygsfält för innehållskomponent
Varje innehållskomponenttyp visar ett verktygsfält när du markerar den på arbetsytan. De tillgängliga verktygen, som varierar beroende på komponenttyp, är ett enkelt sätt att arbeta med komponenten direkt i det återgivna innehållet. Det innehåller formaterings- och funktionalitetsfunktioner som kan användas för komponenttypen.
Formateringsverktyg
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Använd fet, kursiv, understrykning eller genomstrykning, upphöjd eller nedsänkt till den markerade textsträngen. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Använd en vågrät justeringstyp på komponentinnehållet. Välj vänster, centrerad, höger eller marginaljusterad. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Använd formatering av en ordnad eller osorterad lista på komponenttexten. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Använd formatering på rubriknivå i stycket för markörens plats. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Använd teckenstorlek på markerad text. Klicka på verktyget och välj storlek eller ange px-värdet. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Använd teckenfärg på den markerade texten. Välj en färg i väljaren och använd färgreglaget och färgfältet för att välja färgen. Du kan också ange ett känt RGB-, HSL-, HSB- eller hexadecimalt värde. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Skapa en klickbar länk (extern URL eller landningssida) för den markerade texten eller elementet. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Verktyg | Användning | Komponenter |
|
Ta bort den klickbara länken (extern URL eller landningssida) för den markerade texten eller elementet. |
|
Funktionsverktyg
Lägga till en innehållskomponent i din design
-
Använd en befintlig mall eller lägg till de nödvändiga strukturkomponenterna på en tom arbetsyta för att definiera layouten i den visuella designrymden.
-
I biblioteket Components tar du tag i Draghandtaget
Du kan lägga till flera komponenter i en enda strukturkomponent och i varje kolumn i en strukturkomponent.
-
Justera komponentvisningen med flikarna Settings och Style till höger, eller med kontextverktygsfältet som visas på arbetsytan.
Du kan till exempel ändra komponentens textstil, utfyllnad eller marginal.
När du arbetar med din design kan du även ta bort eller duplicera en komponent.
Inställningar och format för innehållskomponenten
När du har lagt till en komponent markeras den i den visuella designrymden och dess egenskaper visas på den högra panelen. Du kan också när som helst markera en komponent om du vill ändra inställningar och format. Många inställningar och format är specifika för komponenten, men det finns några standardinställningar och format som du kan använda för alla markerade innehållskomponenter.
Visningsalternativ
Om du vill exkludera komponenten från skrivbordet eller mobila enheter ändrar du inställningen Display Options. Standardvärdet, Show on all devices, aktiverar visning på alla enheter. Välj en annan inställning för att göra komponenten exklusiv efter enhetstyp:
- Show only on desktop devices- Välj den här inställningen när du vill visa komponenten på skrivbordsenheter och exkludera den för mobila enheter.
- Show only on mobile devices- Välj den här inställningen när du vill visa komponenten på mobila enheter, som telefoner och surfplattor, och exkludera den för stationära enheter.
Behållare
Använd en behållare för att tillämpa en viss formatering på en grupp innehållskomponenter. Lägg till en Container-komponent och lägg sedan till andra innehållskomponenter i den. Den här komponenten liknar hur du kan använda ett div-element i HTML. Du kan använda ett distinkt format för behållaren som skiljer sig från det format som används för innehållskomponenterna som den innehåller.
Lägg till exempel till en Container-komponent och lägg sedan till enButton-komponent i den behållaren. Du kan använda en särskild ytformatering för behållaren och formatera knappen och dess bakgrund efter behov.
Med fliken Stylesmarkerad på den högra panelen använder du avsnittet Backgroundför att definiera komponentens bakgrundsfärg.
Markera kryssrutan och klicka på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Expandera avsnittet Stylespå den högra panelen med fliken Bordermarkerad och ange alternativen för att visa en kantlinje för komponenten:
-
Flytta reglaget åt höger om du vill aktivera visningsalternativen för kantlinjerna och ange dem enligt dina designvillkor:
- Om du vill ange Border color markerar du kryssrutan och klickar på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Om du vill ange Border size (linjebredd) klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar.
-
Om du vill ange Border style väljer du ett värde i listan med standard-CSS
border-style-värden. -
Om du vill avgöra var kantlinjen visas markerar du varje Border position-kryssruta.
-
För Border radius anger du det numeriska värdet enligt kurvan som du vill använda för hörnen.
Värdet 0 (standard) ger ett fyrkantigt hörn.
Expandera avsnittet Stylespå den högra panelen med fliken Sizemarkerad och ange alternativen för komponentens höjd och bredd:
-
Height - Klicka på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar höjden på elementet efter dess innehåll.
-
Width - Använd växlingsknappen för att ange bredden i pixlar eller procent.
-
Om du vill ange en procentbredd använder du skjutreglaget för att ange procentvärdet. Procentvärdet avgör elementstorleken baserat på innehållsrutan i behållarblocket, som inte inkluderar utfyllnad och kantlinjer. Ett värde på 50 anger till exempel elementbredden till 50 % av den innehållna blockinnehållsbredden.
-
Om du vill ha en pixelbaserad bredd klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar bredden på elementet efter dess innehåll.
-
Expandera avsnittet Stylespå den högra panelen med fliken Marginmarkerad och ange alternativ för marginalavstånd i den strukturella komponenten. Det här formatet replikerar CSS-parametern margin, som styr till utrymmet utanför en komponentkant och separerar den från andra komponenter. Det skapar en lucka runt komponenten för att påverka dess placering och layouten för det omgivande innehållet.
Ange marginalvärdena i pixlar efter dina designbehov. Du kan ange marginalen för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different margin for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för de övre och nedre marginalerna anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster- och högermarginalerna anger du ikonen Låst mellan vänster och höger inställningar. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ställa in varje marginal på ett oberoende värde anger du ikonen Olåst mellan inställningarna för över- och underkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Expandera avsnittet Stylespå den högra panelen med fliken Paddingmarkerad och ange alternativ för utfyllnad i den strukturella komponenten. Det här formatet replikerar CSS-parametern padding, som är mellanrummet mellan innehållet i en komponent och dess kantlinje. Utfyllnaden ger internt avstånd som du kan använda för att styra avståndet mellan innehållet och komponentens kant.
Ange utfyllnadsvärdena i pixlar enligt dina designbehov. Du kan ange utfyllnaden för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different padding for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för utfyllnaden uppifrån och ned anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster och höger utfyllnad anger du ikonen Låst mellan vänster och höger inställning. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ange ett oberoende värde för utfyllnad för varje sida anger du ikonen Olåst mellan inställningarna för överkant och nederkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Knapp
Använd komponenten Button för att infoga en eller flera klickbara knappar i ditt innehåll. Använd knappar för att dirigera om sidvisningsprogram eller e-postmottagare till stödinnehåll (publicerad landningssida eller en extern länk).
Lägga till knapptexten
När knappkomponenten visas på arbetsytan innehåller verktygsfältet alternativ för textformatering samt för anpassning och villkorliga varianter. Mer information om redigeringsverktygets alternativ finns i #.
När du anger knappetikettexten och anger formateringen ändras knappens storlek så att innehållet får plats.
Ange länkalternativ
Använd alternativen för Settingspå fliken Linkför att definiera knapptexten, länkmålet och webbläsarbeteendet för att läsa in målsidan.
-
Ange Type för länken:
-
External link - Välj den här typen om du vill använda en standard-URL som länkmål.
Ange länkens URL i Url. Klicka på ikonen Anpassa (
-
Landningssida - Välj den här typen för att välja en publicerad landningssida i den anslutna Marketo Engage-instansen.
För alternativet Landing Page väljer du den publicerade landningssidan. Klicka på ikonen Markera sida (
-
-
För Label anger du den text som du vill visa inuti knappen.
Knappens storlek justeras enligt den angivna texten och formateringen.
-
För Target väljer du hur det länkade målet ska omdirigeras från e-postmeddelandet eller sidan:
- None- Öppnar länken med standardwebbläsaren eller klientfunktionen (standard).
- Blank- Öppnar länken i ett nytt fönster eller på en ny flik.
- Self- Öppnar länken i samma ram.
- Parent- Öppnar länken i den överordnade ramen.
- Top- Öppnar länken i hela fönstret.
Ange format
Anpassa knappformatet på fliken Styles.
Med fliken Stylesmarkerad på den högra panelen använder du avsnittet Backgroundför att definiera komponentens bakgrundsfärg.
Markera kryssrutan och klicka på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
Expandera avsnittet Stylespå den högra panelen med fliken Textmarkerad och ange alternativ för komponentens textformat:
-
Font family - Klicka på nedpilen för att välja en teckensnittsfamilj för text i komponenten.
-
Font size - Klicka på upp- och nedpilarna för att öka eller minska teckenstorleken eller ange ett värde. För angivna värden kan du använda decimaler.
-
Line height - Klicka på upp- och nedpilarna för att öka eller minska radhöjden eller ange ett värde. För angivna värden kan du använda decimaler.
-
Text styles - Välj ikonen för textformatet: Fet, Kursiv, Understruken eller Genomstruken.
-
Text alignment - Välj ikonen för den vågräta textjusteringen: Vänster, Centrerad, Höger eller Justerad.
-
Font color - Klicka på färgrutan för att välja en teckensnittsfärg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Expandera avsnittet Stylespå den högra panelen med fliken Bordermarkerad och ange alternativen för att visa en kantlinje för komponenten:
-
Flytta reglaget åt höger om du vill aktivera visningsalternativen för kantlinjerna och ange dem enligt dina designvillkor:
- Om du vill ange Border color markerar du kryssrutan och klickar på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Om du vill ange Border size (linjebredd) klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar.
-
Om du vill ange Border style väljer du ett värde i listan med standard-CSS
border-style-värden. -
Om du vill avgöra var kantlinjen visas markerar du varje Border position-kryssruta.
-
För Border radius anger du det numeriska värdet enligt kurvan som du vill använda för hörnen.
Värdet 0 (standard) ger ett fyrkantigt hörn.
Expandera avsnittet Stylespå den högra panelen med fliken Sizemarkerad och ange alternativen för komponentens höjd och bredd:
-
Height - Klicka på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar höjden på elementet efter dess innehåll.
-
Width - Använd växlingsknappen för att ange bredden i pixlar eller procent.
-
Om du vill ange en procentbredd använder du skjutreglaget för att ange procentvärdet. Procentvärdet avgör elementstorleken baserat på innehållsrutan i behållarblocket, som inte inkluderar utfyllnad och kantlinjer. Ett värde på 50 anger till exempel elementbredden till 50 % av den innehållna blockinnehållsbredden.
-
Om du vill ha en pixelbaserad bredd klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar bredden på elementet efter dess innehåll.
-
+++Justering
+++
+++Knappmarginal
+++
Expandera avsnittet Stylespå den högra panelen med fliken Marginmarkerad och ange alternativ för marginalavstånd i den strukturella komponenten. Det här formatet replikerar CSS-parametern margin, som styr till utrymmet utanför en komponentkant och separerar den från andra komponenter. Det skapar en lucka runt komponenten för att påverka dess placering och layouten för det omgivande innehållet.
Ange marginalvärdena i pixlar efter dina designbehov. Du kan ange marginalen för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different margin for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för de övre och nedre marginalerna anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster- och högermarginalerna anger du ikonen Låst mellan vänster och höger inställningar. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ställa in varje marginal på ett oberoende värde anger du ikonen Olåst mellan inställningarna för över- och underkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Expandera avsnittet Stylespå den högra panelen med fliken Paddingmarkerad och ange alternativ för utfyllnad i den strukturella komponenten. Det här formatet replikerar CSS-parametern padding, som är mellanrummet mellan innehållet i en komponent och dess kantlinje. Utfyllnaden ger internt avstånd som du kan använda för att styra avståndet mellan innehållet och komponentens kant.
Ange utfyllnadsvärdena i pixlar enligt dina designbehov. Du kan ange utfyllnaden för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different padding for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för utfyllnaden uppifrån och ned anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster och höger utfyllnad anger du ikonen Låst mellan vänster och höger inställning. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ange ett oberoende värde för utfyllnad för varje sida anger du ikonen Olåst mellan inställningarna för överkant och nederkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Om du vill använda ytterligare CSS-kompatibla attribut med värden använder du formatinställningarna för Advanced. Du kan ändra värdena för befintliga attribut eller lägga till nya. Formateringen tillämpas på komponenten med CSS-arvsmodellen för överordnade-underordnade komponenter (element).
De attribut som visas återspeglar de format som är definierade för komponenten. Du kan ändra värdena enligt CSS-definitioner. Klicka på ikonen Lägg till (+) om du vill lägga till ett nytt formatattribut för komponenten.
Text
Använd komponenten Text för att infoga ett textblock i innehållet. När textkomponenten är markerad på arbetsytan anger du texten och använder verktygsfältsalternativen för att lägga till textbunden formatering och alternativ, inklusive anpassningstoken och villkorsstyrda varianter.
Anpassa textkomponentens format på fliken Styles.
Med fliken Stylesmarkerad på den högra panelen använder du avsnittet Backgroundför att definiera komponentens bakgrundsfärg.
Markera kryssrutan och klicka på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
Dessa format används på hela textblocket. Du kan använda textbunden formatering på en markerad textsträng.
Expandera avsnittet Stylespå den högra panelen med fliken Textmarkerad och ange alternativ för komponentens textformat:
-
Font family - Klicka på nedpilen för att välja en teckensnittsfamilj för text i komponenten.
-
Font size - Klicka på upp- och nedpilarna för att öka eller minska teckenstorleken eller ange ett värde. För angivna värden kan du använda decimaler.
-
Line height - Klicka på upp- och nedpilarna för att öka eller minska radhöjden eller ange ett värde. För angivna värden kan du använda decimaler.
-
Text styles - Välj ikonen för textformatet: Fet, Kursiv, Understruken eller Genomstruken.
-
Text alignment - Välj ikonen för den vågräta textjusteringen: Vänster, Centrerad, Höger eller Justerad.
-
Font color - Klicka på färgrutan för att välja en teckensnittsfärg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Expandera avsnittet Stylespå den högra panelen med fliken Bordermarkerad och ange alternativen för att visa en kantlinje för komponenten:
-
Flytta reglaget åt höger om du vill aktivera visningsalternativen för kantlinjerna och ange dem enligt dina designvillkor:
- Om du vill ange Border color markerar du kryssrutan och klickar på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Om du vill ange Border size (linjebredd) klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar.
-
Om du vill ange Border style väljer du ett värde i listan med standard-CSS
border-style-värden. -
Om du vill avgöra var kantlinjen visas markerar du varje Border position-kryssruta.
-
För Border radius anger du det numeriska värdet enligt kurvan som du vill använda för hörnen.
Värdet 0 (standard) ger ett fyrkantigt hörn.
Expandera avsnittet Stylespå den högra panelen med fliken Sizemarkerad och ange alternativen för komponentens höjd och bredd:
-
Height - Klicka på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar höjden på elementet efter dess innehåll.
-
Width - Använd växlingsknappen för att ange bredden i pixlar eller procent.
-
Om du vill ange en procentbredd använder du skjutreglaget för att ange procentvärdet. Procentvärdet avgör elementstorleken baserat på innehållsrutan i behållarblocket, som inte inkluderar utfyllnad och kantlinjer. Ett värde på 50 anger till exempel elementbredden till 50 % av den innehållna blockinnehållsbredden.
-
Om du vill ha en pixelbaserad bredd klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar bredden på elementet efter dess innehåll.
-
Expandera avsnittet Stylespå den högra panelen med fliken Marginmarkerad och ange alternativ för marginalavstånd i den strukturella komponenten. Det här formatet replikerar CSS-parametern margin, som styr till utrymmet utanför en komponentkant och separerar den från andra komponenter. Det skapar en lucka runt komponenten för att påverka dess placering och layouten för det omgivande innehållet.
Ange marginalvärdena i pixlar efter dina designbehov. Du kan ange marginalen för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different margin for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för de övre och nedre marginalerna anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster- och högermarginalerna anger du ikonen Låst mellan vänster och höger inställningar. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ställa in varje marginal på ett oberoende värde anger du ikonen Olåst mellan inställningarna för över- och underkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Expandera avsnittet Stylespå den högra panelen med fliken Paddingmarkerad och ange alternativ för utfyllnad i den strukturella komponenten. Det här formatet replikerar CSS-parametern padding, som är mellanrummet mellan innehållet i en komponent och dess kantlinje. Utfyllnaden ger internt avstånd som du kan använda för att styra avståndet mellan innehållet och komponentens kant.
Ange utfyllnadsvärdena i pixlar enligt dina designbehov. Du kan ange utfyllnaden för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different padding for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för utfyllnaden uppifrån och ned anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster och höger utfyllnad anger du ikonen Låst mellan vänster och höger inställning. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ange ett oberoende värde för utfyllnad för varje sida anger du ikonen Olåst mellan inställningarna för överkant och nederkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Om du vill använda ytterligare CSS-kompatibla attribut med värden använder du formatinställningarna för Advanced. Du kan ändra värdena för befintliga attribut eller lägga till nya. Formateringen tillämpas på komponenten med CSS-arvsmodellen för överordnade-underordnade komponenter (element).
De attribut som visas återspeglar de format som är definierade för komponenten. Du kan ändra värdena enligt CSS-definitioner. Klicka på ikonen Lägg till (+) om du vill lägga till ett nytt formatattribut för komponenten.
Delare
Lägg till en Divider-komponent för att införliva en linjär delning mellan avsnitt i innehållet.
Med fliken Stylesmarkerad på den högra panelen använder du avsnittet Backgroundför att definiera komponentens bakgrundsfärg.
Markera kryssrutan och klicka på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
+++Linje
+++
Expandera avsnittet Stylespå den högra panelen med fliken Sizemarkerad och ange alternativen för komponentens höjd och bredd:
-
Height - Klicka på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar höjden på elementet efter dess innehåll.
-
Width - Använd växlingsknappen för att ange bredden i pixlar eller procent.
-
Om du vill ange en procentbredd använder du skjutreglaget för att ange procentvärdet. Procentvärdet avgör elementstorleken baserat på innehållsrutan i behållarblocket, som inte inkluderar utfyllnad och kantlinjer. Ett värde på 50 anger till exempel elementbredden till 50 % av den innehållna blockinnehållsbredden.
-
Om du vill ha en pixelbaserad bredd klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar bredden på elementet efter dess innehåll.
-
Expandera avsnittet Alignment och välj den vågräta justering som du vill använda: vänster, mitten eller höger. Det här formatet översätts till ett standard-CSS-format för text-align och påverkar hur komponenten placeras i behållarkomponenten.
Expandera avsnittet Stylespå den högra panelen med fliken Marginmarkerad och ange alternativ för marginalavstånd i den strukturella komponenten. Det här formatet replikerar CSS-parametern margin, som styr till utrymmet utanför en komponentkant och separerar den från andra komponenter. Det skapar en lucka runt komponenten för att påverka dess placering och layouten för det omgivande innehållet.
Ange marginalvärdena i pixlar efter dina designbehov. Du kan ange marginalen för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different margin for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för de övre och nedre marginalerna anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster- och högermarginalerna anger du ikonen Låst mellan vänster och höger inställningar. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ställa in varje marginal på ett oberoende värde anger du ikonen Olåst mellan inställningarna för över- och underkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Expandera avsnittet Stylespå den högra panelen med fliken Paddingmarkerad och ange alternativ för utfyllnad i den strukturella komponenten. Det här formatet replikerar CSS-parametern padding, som är mellanrummet mellan innehållet i en komponent och dess kantlinje. Utfyllnaden ger internt avstånd som du kan använda för att styra avståndet mellan innehållet och komponentens kant.
Ange utfyllnadsvärdena i pixlar enligt dina designbehov. Du kan ange utfyllnaden för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different padding for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för utfyllnaden uppifrån och ned anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster och höger utfyllnad anger du ikonen Låst mellan vänster och höger inställning. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ange ett oberoende värde för utfyllnad för varje sida anger du ikonen Olåst mellan inställningarna för överkant och nederkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Om du vill använda ytterligare CSS-kompatibla attribut med värden använder du formatinställningarna för Advanced. Du kan ändra värdena för befintliga attribut eller lägga till nya. Formateringen tillämpas på komponenten med CSS-arvsmodellen för överordnade-underordnade komponenter (element).
De attribut som visas återspeglar de format som är definierade för komponenten. Du kan ändra värdena enligt CSS-definitioner. Klicka på ikonen Lägg till (+) om du vill lägga till ett nytt formatattribut för komponenten.
HTML
Använd HTML-komponenten för att lägga till delar av din befintliga HTML. Den här komponenten är ett enkelt sätt att skapa modulära HTML-element som återanvänder externt innehåll.
-
Markera komponenten på arbetsytan och klicka på ikonen Visa källkoden i verktygsfältet.
-
Klistra in HTML i textrutan och klicka på Save.
Om HTML är giltigt återges elementet på arbetsytan. Om det är ett element som mappar till en av de andra innehållskomponenterna kan du ändra inställningarna och formaten på den högra panelen enligt komponenttypen. Om så inte är fallet förblir det en HTML-komponent.
För en HTML-komponent kan du ange följande format för hela HTML-komponenten på den högra panelen:
Med fliken Stylesmarkerad på den högra panelen använder du avsnittet Backgroundför att definiera komponentens bakgrundsfärg.
Markera kryssrutan och klicka på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Expandera avsnittet Stylespå den högra panelen med fliken Bordermarkerad och ange alternativen för att visa en kantlinje för komponenten:
-
Flytta reglaget åt höger om du vill aktivera visningsalternativen för kantlinjerna och ange dem enligt dina designvillkor:
- Om du vill ange Border color markerar du kryssrutan och klickar på färgrutan för att välja en färg i väljaren. Du kan välja en färg genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
-
Om du vill ange Border size (linjebredd) klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar.
-
Om du vill ange Border style väljer du ett värde i listan med standard-CSS
border-style-värden. -
Om du vill avgöra var kantlinjen visas markerar du varje Border position-kryssruta.
-
För Border radius anger du det numeriska värdet enligt kurvan som du vill använda för hörnen.
Värdet 0 (standard) ger ett fyrkantigt hörn.
Expandera avsnittet Stylespå den högra panelen med fliken Sizemarkerad och ange alternativen för komponentens höjd och bredd:
-
Height - Klicka på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar höjden på elementet efter dess innehåll.
-
Width - Använd växlingsknappen för att ange bredden i pixlar eller procent.
-
Om du vill ange en procentbredd använder du skjutreglaget för att ange procentvärdet. Procentvärdet avgör elementstorleken baserat på innehållsrutan i behållarblocket, som inte inkluderar utfyllnad och kantlinjer. Ett värde på 50 anger till exempel elementbredden till 50 % av den innehållna blockinnehållsbredden.
-
Om du vill ha en pixelbaserad bredd klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar bredden på elementet efter dess innehåll.
-
Expandera avsnittet Alignment och välj den vågräta och lodräta justering som du vill använda. Justeringsstilarna påverkar hur HTML-komponenten placeras i behållarkomponenten (strukturell eller container).
Den vågräta justeringen översätts till ett standard text-align-CSS-format och du kan välja mellan vänster, mitten eller höger. Den lodräta justeringen översätts till standardformatet för CSS i vertical-align och du kan välja uppifrån, i mitten eller nedåt.
Expandera avsnittet Stylespå den högra panelen med fliken Marginmarkerad och ange alternativ för marginalavstånd i den strukturella komponenten. Det här formatet replikerar CSS-parametern margin, som styr till utrymmet utanför en komponentkant och separerar den från andra komponenter. Det skapar en lucka runt komponenten för att påverka dess placering och layouten för det omgivande innehållet.
Ange marginalvärdena i pixlar efter dina designbehov. Du kan ange marginalen för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different margin for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för de övre och nedre marginalerna anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster- och högermarginalerna anger du ikonen Låst mellan vänster och höger inställningar. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ställa in varje marginal på ett oberoende värde anger du ikonen Olåst mellan inställningarna för över- och underkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Expandera avsnittet Stylespå den högra panelen med fliken Paddingmarkerad och ange alternativ för utfyllnad i den strukturella komponenten. Det här formatet replikerar CSS-parametern padding, som är mellanrummet mellan innehållet i en komponent och dess kantlinje. Utfyllnaden ger internt avstånd som du kan använda för att styra avståndet mellan innehållet och komponentens kant.
Ange utfyllnadsvärdena i pixlar enligt dina designbehov. Du kan ange utfyllnaden för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra:
-
Alla sidor - Om du vill ange ett värde som ska gälla alla sidor avmarkerar du kryssrutan Different padding for each side . Klicka på upp- och nedpilsikonerna för att öka eller minska antalet pixlar.
-
Övre och nedre - Om du vill ange samma värde för utfyllnaden uppifrån och ned anger du ikonen Låst mellan inställningarna för över- och underkant. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Vänster-höger - Om du vill ange samma värde för vänster och höger utfyllnad anger du ikonen Låst mellan vänster och höger inställning. Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
-
Oberoende - Om du vill ange ett oberoende värde för utfyllnad för varje sida anger du ikonen Olåst mellan inställningarna för överkant och nederkant och mellan vänster och höger. För varje inställning klickar du på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar.
Om du vill använda ytterligare CSS-kompatibla attribut med värden använder du formatinställningarna för Advanced. Du kan ändra värdena för befintliga attribut eller lägga till nya. Formateringen tillämpas på komponenten med CSS-arvsmodellen för överordnade-underordnade komponenter (element).
De attribut som visas återspeglar de format som är definierade för komponenten. Du kan ändra värdena enligt CSS-definitioner. Klicka på ikonen Lägg till (+) om du vill lägga till ett nytt formatattribut för komponenten.
Bild
Använd komponenten Image för att infoga en bildresurs i ditt innehåll. När komponenten Bild har valts på arbetsytan kan du lägga till eller ändra den visade bildresursfilen.
Lägg till bildresursen
Välj resurskälltyp och välj en bildfil: