Inhoudscomponenten content-components
Wanneer u inhoud ontwerpt voor e-mails, bestemmingspagina's, sjablonen en visuele fragmenten, gebruikt u de Content components om visuele ontwerpelementen toe te voegen. U kunt zoveel inhoudscomponenten toevoegen als u nodig hebt binnen een of meer structuurcomponenten, die de lay-out definiëren.
inhoudsbibliotheek
In de sectie Contents onder aan de Componentenbibliotheek worden de beschikbare inhoudcomponenten weergegeven:
Werkbalken van de component Inhoud
Elk type inhoudscomponent geeft een werkbalk weer wanneer u de component op het canvas selecteert. De beschikbare hulpmiddelen, die door het componenttype variëren, verstrekken een gemakkelijke manier om met de component direct in de teruggegeven inhoud te werken. Het omvat het formatteren en functionele mogelijkheden die voor het componenttype van toepassing zijn.
Opmaakgereedschappen
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Pas vette, cursieve, onderstreepte, of doorgehaalde, superscript, of subscript op het geselecteerde tekstkoord toe. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Pas een horizontaal uitlijningstype toe op de inhoud van de component. Kies links, gecentreerd, rechts of uitgevuld. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Hiermee past u geordende of ongeordende lijstopmaak toe op de componenttekst. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Hiermee past u opmaak op kopniveau toe op de alinea voor de cursorlocatie. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Pas doopvontgrootte op een geselecteerde tekst toe. Klik op het gereedschap en kies de grootte of voer de px-waarde in. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Pas fontkleur toe op de geselecteerde tekst. Kies een kleur in de kleurkiezer en selecteer de kleur met de schuifregelaar en het kleurveld. U kunt ook een bekende RGB-, HSL-, HSB- of hexadecimale waarde invoeren. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Maak een klikbare koppeling (externe URL of landingspagina) voor de geselecteerde tekst of het geselecteerde element. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Gereedschap | Gebruik | Onderdelen |
|
Verwijder de klikbare koppeling (externe URL of landingspagina) voor de geselecteerde tekst of het geselecteerde element. |
|
Functionele gereedschappen
Een inhoudscomponent toevoegen aan uw ontwerp
-
In de visuele ontwerpruimte gebruikt u een bestaande sjabloon of voegt u de benodigde structuurcomponenten toe aan een leeg canvas om de lay-out te definiëren.
-
In de Components bibliotheek, pak het handvat van de Belemmering
U kunt meerdere componenten toevoegen aan één structuurcomponent en aan elke kolom van een structuurcomponent.
-
Pas de componentweergave aan met de tabbladen Settings en Style aan de rechterkant of met de contextwerkbalk die op het canvas wordt weergegeven.
U kunt bijvoorbeeld de tekststijl, opvulling of marge van de component wijzigen.
Aangezien u met uw ontwerp werkt, kunt u of ook verwijderen een component.
Instellingen en stijlen van de component Inhoud
Nadat u een component hebt toegevoegd, wordt deze geselecteerd in de ruimte van het visuele ontwerp en worden de eigenschappen ervan weergegeven in het rechterdeelvenster. U kunt ook op elk gewenst moment een component selecteren om de instellingen en stijlen te wijzigen. Veel instellingen en stijlen zijn specifiek voor de component, maar er zijn enkele standaardinstellingen en -stijlen die u op geselecteerde inhoudscomponenten kunt toepassen.
Weergaveopties
Wijzig de instelling Display Options als u de component wilt uitsluiten van de weergave van het bureaublad of het mobiele apparaat. Met de standaardwaarde, Show on all devices, wordt weergave op alle apparaten ingeschakeld. Kies een andere instelling om de component op apparaattype exclusief te maken:
- Show only on desktop devices- Kies deze instelling wanneer u de component wilt weergeven op bureaubladapparaten en deze wilt uitsluiten voor mobiele apparaten.
- Show only on mobile devices- Kies deze instelling als u de component wilt weergeven op mobiele apparaten, zoals telefoons en tablets, en deze wilt uitsluiten voor bureaubladapparaten.
Container
Gebruik een container om specifieke opmaak toe te passen op een groep inhoudcomponenten. Voeg een Container -component toe en voeg vervolgens andere inhoudscomponenten toe. Deze component is vergelijkbaar met het gebruik van een div -element in HTML. U kunt een afzonderlijke stijl op de container toepassen die verschilt van de stijl die is toegepast op de inhoudcomponenten die de container bevat.
Voeg bijvoorbeeld een component Containertoe en voeg vervolgens een componentButton in die container toe. U kunt een specifieke gebiedsstijl voor de container gebruiken, en de knoop en zijn achtergrond opmaken zoals u nodig hebt.
Selecteer de tab Stylesin het rechterdeelvenster en gebruik de sectie Backgroundom de achtergrondkleur voor de component te definiëren.
Schakel het selectievakje in en klik op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Vouw in het rechterdeelvenster met de tab Stylesde sectie Borderuit en stel de opties in om een rand voor de component weer te geven:
-
Verplaats de schakeloptie naar rechts om de weergaveopties voor de randen in te schakelen en stel deze in op basis van uw ontwerpcriteria:
- Als u Border color wilt instellen, schakelt u het selectievakje in en klikt u op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Als u Border size (lijnbreedte) wilt instellen, klikt u op de pictogrammen Pijl-omhoog en Pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Als u de Border style wilt instellen, kiest u een waarde in de lijst met standaard-CSS
border-style-waarden. -
Om te bepalen waar de rand wordt weergegeven, schakelt u elk selectievakje Border position in.
-
Voor Border radius, plaats de numerieke waarde volgens de kromme u voor de hoeken wilt.
Met de waarde 0 (standaardwaarde) wordt een vierkante hoek gemaakt.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Sizeuit en stel de opties voor de hoogte en breedte van de component in:
-
Height - Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de hoogte van het element op basis van de inhoud ervan.
-
Width - Gebruik de schakeloptie om de breedte in te stellen op basis van pixels of percentage.
-
Gebruik de schuifregelaar voor een percentage van de breedte om het percentage in te stellen. Het percentage bepaalt de elementgrootte op basis van het inhoudsvak van het bevattende blok, dat opvulling en randen uitsluit. Met een waarde van 50 stelt u de breedte van het element in op 50% van de breedte van het element dat de breedte van de blokinhoud bevat.
-
Voor een op pixels gebaseerde breedte klikt u op de pijlpictogrammen omhoog en omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de breedte van het element op basis van de inhoud ervan.
-
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Marginuit en stel de opties voor de marge-afstand in de structuurcomponent in. Deze stijl dupliceert de CSS margin -parameter, die de ruimte buiten een componentrand bestuurt en deze van andere componenten scheidt. Er ontstaat een tussenruimte rondom de component om de positionering en lay-out van omringende inhoud te beïnvloeden.
Stel de margewaarden in pixels in op basis van uw ontwerpvereisten. U kunt de marge voor alle zijden, de bovenkant-bodem, de linkerkant, of elke kant van de component onafhankelijk plaatsen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different margin for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodemmarges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste marges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om elke marge aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Paddinguit en stel de opties voor opvulling in de structuurcomponent in. Deze stijl dupliceert de CSS padding -parameter. Dit is de ruimte tussen de inhoud van een component en de rand ervan. De opvulling biedt interne ruimte die u kunt gebruiken om de afstand tussen de inhoud en de rand van de component te bepalen.
Stel de opvullingswaarden in pixels in op basis van uw ontwerpvereisten. U kunt de opvulling voor alle zijden, de bovenkant-bodem, de linkerkant of elke kant van de component onafhankelijk instellen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different padding for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodem het opvullen aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste opvulling aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om het opvullen voor elke kant aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Knop
Gebruik de component Button om een of meerdere klikbare knoppen in te voegen in uw inhoud. Gebruik knoppen om paginaviewers of e-mailontvangers om te leiden naar ondersteunende inhoud (gepubliceerde landingspagina of een externe koppeling).
Knoptekst toevoegen
Wanneer de knopcomponent op het canvas wordt weergegeven, bevat de werkbalk opties voor tekstopmaak, alsook voor het aanpassen van de tekst en voorwaardelijke varianten. Zie # voor meer informatie over de opties op de editor-werkbalk.
Wanneer u de tekst van het knoplabel invoert en de opmaak instelt, wordt de grootte van de knop aangepast aan de inhoud.
Koppelingsopties instellen
Gebruik op het tabblad Settingsde opties van Linkom de knoptekst, het doel van de koppeling en het browsergedrag voor het laden van de doelpagina te definiëren.
-
Stel de Type voor de koppeling in:
-
External link - Kies dit type als u een standaard-URL als doel voor de koppeling wilt gebruiken.
Voer in Url de URL in voor het doel van de koppeling. Klik personaliseren (
-
het Bestaan pagina - kies dit type om een gepubliceerde het landen pagina in de verbonden instantie van Marketo Engage te selecteren.
Selecteer voor de optie Landing Page de gepubliceerde bestemmingspagina. Klik het Uitgezochte pagina pictogram (
-
-
Voer bij Label de tekst in die u in de knop wilt weergeven.
De grootte van de knop wordt aangepast aan de tekst en de stijl die u instelt.
-
Voor Target, kies hoe de verbonden bestemming van e-mail of pagina wordt opnieuw gericht:
- None- De koppeling wordt geopend met het standaardgedrag van de browser of client (standaard).
- Blank- Hiermee opent u de koppeling in een nieuw venster of op een nieuw tabblad.
- Self- Hiermee opent u de koppeling in hetzelfde frame.
- Parent- Hiermee opent u de koppeling in het bovenliggende frame.
- Top- Hiermee opent u de koppeling in de volledige tekst van het venster.
Stijlen instellen
Pas de knopopmaak aan op het tabblad Styles .
Selecteer de tab Stylesin het rechterdeelvenster en gebruik de sectie Backgroundom de achtergrondkleur voor de component te definiëren.
Schakel het selectievakje in en klik op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
Vouw in het rechterdeelvenster met de tab Stylesde sectie Textuit en stel de opties voor de tekststijlen van de component in:
-
Font family - Klik op het pijlpictogram omlaag om een lettertypefamilie voor tekst binnen de component te selecteren.
-
Font size - Klik op de pictogrammen Pijl-omhoog en Pijl-omlaag om de tekengrootte te vergroten of te verkleinen of voer een waarde in. Voor ingevoerde waarden kunt u decimalen gebruiken.
-
Line height - Klik op de pictogrammen Pijl-omhoog en Pijl-omlaag om de regelhoogte te verhogen of te verlagen of voer een waarde in. Voor ingevoerde waarden kunt u decimalen gebruiken.
-
Text styles - selecteer het pictogram voor de tekststijl: Vet, Cursief, Onderstreept, of Doorhalen.
-
Text alignment - selecteer het pictogram voor de horizontale tekstgroepering: Linker, Gecentreerd, Juist, of Uitgelijnd.
-
Font color - Klik op het gekleurde vierkant om een lettertypekleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Vouw in het rechterdeelvenster met de tab Stylesde sectie Borderuit en stel de opties in om een rand voor de component weer te geven:
-
Verplaats de schakeloptie naar rechts om de weergaveopties voor de randen in te schakelen en stel deze in op basis van uw ontwerpcriteria:
- Als u Border color wilt instellen, schakelt u het selectievakje in en klikt u op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Als u Border size (lijnbreedte) wilt instellen, klikt u op de pictogrammen Pijl-omhoog en Pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Als u de Border style wilt instellen, kiest u een waarde in de lijst met standaard-CSS
border-style-waarden. -
Om te bepalen waar de rand wordt weergegeven, schakelt u elk selectievakje Border position in.
-
Voor Border radius, plaats de numerieke waarde volgens de kromme u voor de hoeken wilt.
Met de waarde 0 (standaardwaarde) wordt een vierkante hoek gemaakt.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Sizeuit en stel de opties voor de hoogte en breedte van de component in:
-
Height - Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de hoogte van het element op basis van de inhoud ervan.
-
Width - Gebruik de schakeloptie om de breedte in te stellen op basis van pixels of percentage.
-
Gebruik de schuifregelaar voor een percentage van de breedte om het percentage in te stellen. Het percentage bepaalt de elementgrootte op basis van het inhoudsvak van het bevattende blok, dat opvulling en randen uitsluit. Met een waarde van 50 stelt u de breedte van het element in op 50% van de breedte van het element dat de breedte van de blokinhoud bevat.
-
Voor een op pixels gebaseerde breedte klikt u op de pijlpictogrammen omhoog en omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de breedte van het element op basis van de inhoud ervan.
-
+++Uitlijning
+++
+++Knopmarge
+++
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Marginuit en stel de opties voor de marge-afstand in de structuurcomponent in. Deze stijl dupliceert de CSS margin -parameter, die de ruimte buiten een componentrand bestuurt en deze van andere componenten scheidt. Er ontstaat een tussenruimte rondom de component om de positionering en lay-out van omringende inhoud te beïnvloeden.
Stel de margewaarden in pixels in op basis van uw ontwerpvereisten. U kunt de marge voor alle zijden, de bovenkant-bodem, de linkerkant, of elke kant van de component onafhankelijk plaatsen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different margin for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodemmarges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste marges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om elke marge aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Paddinguit en stel de opties voor opvulling in de structuurcomponent in. Deze stijl dupliceert de CSS padding -parameter. Dit is de ruimte tussen de inhoud van een component en de rand ervan. De opvulling biedt interne ruimte die u kunt gebruiken om de afstand tussen de inhoud en de rand van de component te bepalen.
Stel de opvullingswaarden in pixels in op basis van uw ontwerpvereisten. U kunt de opvulling voor alle zijden, de bovenkant-bodem, de linkerkant of elke kant van de component onafhankelijk instellen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different padding for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodem het opvullen aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste opvulling aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om het opvullen voor elke kant aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Gebruik de stijlinstellingen van Advanced om aanvullende CSS-compatibele kenmerken toe te passen op waarden. U kunt de waarden van de bestaande kenmerken wijzigen of nieuwe kenmerken toevoegen. De opmaak wordt toegepast op de component met behulp van het CSS-overervingsmodel voor bovenliggende en onderliggende componenten (elementen).
De weergegeven kenmerken weerspiegelen de stijlen die momenteel zijn gedefinieerd voor de component. U kunt de waarden volgens CSS definities veranderen. Klik toevoegen (+) pictogram om een nieuw stijlattribuut voor de component toe te voegen.
Tekst
Gebruik de component Text om een tekstblok in te voegen in uw inhoud. Wanneer de tekstcomponent op het canvas is geselecteerd, voert u de tekst in en gebruikt u de werkbalkopties om inline-opmaak en opties toe te voegen, waaronder personalisatietokens en voorwaardelijke varianten.
Pas de opmaak van de tekstcomponent aan op het tabblad Styles .
Selecteer de tab Stylesin het rechterdeelvenster en gebruik de sectie Backgroundom de achtergrondkleur voor de component te definiëren.
Schakel het selectievakje in en klik op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
Deze stijlen worden toegepast op het hele tekstblok. U kunt inline opmaak toepassen op een geselecteerde tekstreeks.
Vouw in het rechterdeelvenster met de tab Stylesde sectie Textuit en stel de opties voor de tekststijlen van de component in:
-
Font family - Klik op het pijlpictogram omlaag om een lettertypefamilie voor tekst binnen de component te selecteren.
-
Font size - Klik op de pictogrammen Pijl-omhoog en Pijl-omlaag om de tekengrootte te vergroten of te verkleinen of voer een waarde in. Voor ingevoerde waarden kunt u decimalen gebruiken.
-
Line height - Klik op de pictogrammen Pijl-omhoog en Pijl-omlaag om de regelhoogte te verhogen of te verlagen of voer een waarde in. Voor ingevoerde waarden kunt u decimalen gebruiken.
-
Text styles - selecteer het pictogram voor de tekststijl: Vet, Cursief, Onderstreept, of Doorhalen.
-
Text alignment - selecteer het pictogram voor de horizontale tekstgroepering: Linker, Gecentreerd, Juist, of Uitgelijnd.
-
Font color - Klik op het gekleurde vierkant om een lettertypekleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Vouw in het rechterdeelvenster met de tab Stylesde sectie Borderuit en stel de opties in om een rand voor de component weer te geven:
-
Verplaats de schakeloptie naar rechts om de weergaveopties voor de randen in te schakelen en stel deze in op basis van uw ontwerpcriteria:
- Als u Border color wilt instellen, schakelt u het selectievakje in en klikt u op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Als u Border size (lijnbreedte) wilt instellen, klikt u op de pictogrammen Pijl-omhoog en Pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Als u de Border style wilt instellen, kiest u een waarde in de lijst met standaard-CSS
border-style-waarden. -
Om te bepalen waar de rand wordt weergegeven, schakelt u elk selectievakje Border position in.
-
Voor Border radius, plaats de numerieke waarde volgens de kromme u voor de hoeken wilt.
Met de waarde 0 (standaardwaarde) wordt een vierkante hoek gemaakt.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Sizeuit en stel de opties voor de hoogte en breedte van de component in:
-
Height - Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de hoogte van het element op basis van de inhoud ervan.
-
Width - Gebruik de schakeloptie om de breedte in te stellen op basis van pixels of percentage.
-
Gebruik de schuifregelaar voor een percentage van de breedte om het percentage in te stellen. Het percentage bepaalt de elementgrootte op basis van het inhoudsvak van het bevattende blok, dat opvulling en randen uitsluit. Met een waarde van 50 stelt u de breedte van het element in op 50% van de breedte van het element dat de breedte van de blokinhoud bevat.
-
Voor een op pixels gebaseerde breedte klikt u op de pijlpictogrammen omhoog en omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de breedte van het element op basis van de inhoud ervan.
-
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Marginuit en stel de opties voor de marge-afstand in de structuurcomponent in. Deze stijl dupliceert de CSS margin -parameter, die de ruimte buiten een componentrand bestuurt en deze van andere componenten scheidt. Er ontstaat een tussenruimte rondom de component om de positionering en lay-out van omringende inhoud te beïnvloeden.
Stel de margewaarden in pixels in op basis van uw ontwerpvereisten. U kunt de marge voor alle zijden, de bovenkant-bodem, de linkerkant, of elke kant van de component onafhankelijk plaatsen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different margin for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodemmarges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste marges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om elke marge aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Paddinguit en stel de opties voor opvulling in de structuurcomponent in. Deze stijl dupliceert de CSS padding -parameter. Dit is de ruimte tussen de inhoud van een component en de rand ervan. De opvulling biedt interne ruimte die u kunt gebruiken om de afstand tussen de inhoud en de rand van de component te bepalen.
Stel de opvullingswaarden in pixels in op basis van uw ontwerpvereisten. U kunt de opvulling voor alle zijden, de bovenkant-bodem, de linkerkant of elke kant van de component onafhankelijk instellen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different padding for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodem het opvullen aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste opvulling aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om het opvullen voor elke kant aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Gebruik de stijlinstellingen van Advanced om aanvullende CSS-compatibele kenmerken toe te passen op waarden. U kunt de waarden van de bestaande kenmerken wijzigen of nieuwe kenmerken toevoegen. De opmaak wordt toegepast op de component met behulp van het CSS-overervingsmodel voor bovenliggende en onderliggende componenten (elementen).
De weergegeven kenmerken weerspiegelen de stijlen die momenteel zijn gedefinieerd voor de component. U kunt de waarden volgens CSS definities veranderen. Klik toevoegen (+) pictogram om een nieuw stijlattribuut voor de component toe te voegen.
Scheidingslijn
Voeg a Scheidingscomponent toe om een lineaire afdeling tussen secties van uw inhoud op te nemen.
Selecteer de tab Stylesin het rechterdeelvenster en gebruik de sectie Backgroundom de achtergrondkleur voor de component te definiëren.
Schakel het selectievakje in en klik op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
+++Lijn
+++
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Sizeuit en stel de opties voor de hoogte en breedte van de component in:
-
Height - Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de hoogte van het element op basis van de inhoud ervan.
-
Width - Gebruik de schakeloptie om de breedte in te stellen op basis van pixels of percentage.
-
Gebruik de schuifregelaar voor een percentage van de breedte om het percentage in te stellen. Het percentage bepaalt de elementgrootte op basis van het inhoudsvak van het bevattende blok, dat opvulling en randen uitsluit. Met een waarde van 50 stelt u de breedte van het element in op 50% van de breedte van het element dat de breedte van de blokinhoud bevat.
-
Voor een op pixels gebaseerde breedte klikt u op de pijlpictogrammen omhoog en omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de breedte van het element op basis van de inhoud ervan.
-
Vouw de sectie Alignment uit en kies de horizontale uitlijning die u wilt gebruiken: links, gecentreerd of rechts. Deze stijl wordt omgezet in een standaard text-align CSS-stijl en bepaalt hoe de component binnen de bevattende component wordt geplaatst.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Marginuit en stel de opties voor de marge-afstand in de structuurcomponent in. Deze stijl dupliceert de CSS margin -parameter, die de ruimte buiten een componentrand bestuurt en deze van andere componenten scheidt. Er ontstaat een tussenruimte rondom de component om de positionering en lay-out van omringende inhoud te beïnvloeden.
Stel de margewaarden in pixels in op basis van uw ontwerpvereisten. U kunt de marge voor alle zijden, de bovenkant-bodem, de linkerkant, of elke kant van de component onafhankelijk plaatsen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different margin for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodemmarges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste marges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om elke marge aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Paddinguit en stel de opties voor opvulling in de structuurcomponent in. Deze stijl dupliceert de CSS padding -parameter. Dit is de ruimte tussen de inhoud van een component en de rand ervan. De opvulling biedt interne ruimte die u kunt gebruiken om de afstand tussen de inhoud en de rand van de component te bepalen.
Stel de opvullingswaarden in pixels in op basis van uw ontwerpvereisten. U kunt de opvulling voor alle zijden, de bovenkant-bodem, de linkerkant of elke kant van de component onafhankelijk instellen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different padding for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodem het opvullen aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste opvulling aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om het opvullen voor elke kant aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Gebruik de stijlinstellingen van Advanced om aanvullende CSS-compatibele kenmerken toe te passen op waarden. U kunt de waarden van de bestaande kenmerken wijzigen of nieuwe kenmerken toevoegen. De opmaak wordt toegepast op de component met behulp van het CSS-overervingsmodel voor bovenliggende en onderliggende componenten (elementen).
De weergegeven kenmerken weerspiegelen de stijlen die momenteel zijn gedefinieerd voor de component. U kunt de waarden volgens CSS definities veranderen. Klik toevoegen (+) pictogram om een nieuw stijlattribuut voor de component toe te voegen.
HTML
Gebruik de HTML-component om delen van uw bestaande HTML toe te voegen. Met deze component kunt u eenvoudig modulaire HTML-elementen maken die uw externe inhoud opnieuw gebruiken.
-
Selecteer de component op het canvas en klik tonen het pictogram van de broncode in de toolbar.
open de coderedacteur om HTML toe te voegen
-
Plak de HTML in het tekstvak en klik op Save .
geef de dialoog van HTML uit
Als de HTML geldig is, wordt het element op het canvas weergegeven. Als het een element is dat aan één van de andere inhoudscomponenten toewijst, kunt u de montages en de stijlen in het juiste paneel volgens het componenttype veranderen. Als dit niet het geval is, blijft het een HTML-component.
Voor een HTML-component kunt u de volgende stijlen instellen voor de gehele HTML-component in het rechterdeelvenster:
Selecteer de tab Stylesin het rechterdeelvenster en gebruik de sectie Backgroundom de achtergrondkleur voor de component te definiëren.
Schakel het selectievakje in en klik op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Vouw in het rechterdeelvenster met de tab Stylesde sectie Borderuit en stel de opties in om een rand voor de component weer te geven:
-
Verplaats de schakeloptie naar rechts om de weergaveopties voor de randen in te schakelen en stel deze in op basis van uw ontwerpcriteria:
- Als u Border color wilt instellen, schakelt u het selectievakje in en klikt u op het kleurvakje om een kleur in de kiezer te kiezen. U kunt een kleur kiezen door een bekende RGB-, HSL-, HSB- of hexadecimale waarde in te voeren. U kunt ook de schuifregelaar Kleur en het kleurveld gebruiken om de kleur te selecteren.
-
Als u Border size (lijnbreedte) wilt instellen, klikt u op de pictogrammen Pijl-omhoog en Pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Als u de Border style wilt instellen, kiest u een waarde in de lijst met standaard-CSS
border-style-waarden. -
Om te bepalen waar de rand wordt weergegeven, schakelt u elk selectievakje Border position in.
-
Voor Border radius, plaats de numerieke waarde volgens de kromme u voor de hoeken wilt.
Met de waarde 0 (standaardwaarde) wordt een vierkante hoek gemaakt.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Sizeuit en stel de opties voor de hoogte en breedte van de component in:
-
Height - Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de hoogte van het element op basis van de inhoud ervan.
-
Width - Gebruik de schakeloptie om de breedte in te stellen op basis van pixels of percentage.
-
Gebruik de schuifregelaar voor een percentage van de breedte om het percentage in te stellen. Het percentage bepaalt de elementgrootte op basis van het inhoudsvak van het bevattende blok, dat opvulling en randen uitsluit. Met een waarde van 50 stelt u de breedte van het element in op 50% van de breedte van het element dat de breedte van de blokinhoud bevat.
-
Voor een op pixels gebaseerde breedte klikt u op de pijlpictogrammen omhoog en omlaag om het aantal pixels te vergroten of te verkleinen. Een lege waarde (Auto) is de standaardwaarde en wijzigt de breedte van het element op basis van de inhoud ervan.
-
Vouw de sectie Alignment uit en kies de horizontale en verticale uitlijning die u wilt gebruiken. De uitlijningsstijlen hebben invloed op de positie van de HTML-component binnen de omvattende component (structuur of container).
De horizontale uitlijning wordt omgezet in een standaard text-align CSS-stijl en u kunt kiezen uit links, gecentreerd of rechts. De verticale uitlijning wordt omgezet in de standaard CSS-stijl van vertical-align en u kunt kiezen uit boven, midden of onder.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Marginuit en stel de opties voor de marge-afstand in de structuurcomponent in. Deze stijl dupliceert de CSS margin -parameter, die de ruimte buiten een componentrand bestuurt en deze van andere componenten scheidt. Er ontstaat een tussenruimte rondom de component om de positionering en lay-out van omringende inhoud te beïnvloeden.
Stel de margewaarden in pixels in op basis van uw ontwerpvereisten. U kunt de marge voor alle zijden, de bovenkant-bodem, de linkerkant, of elke kant van de component onafhankelijk plaatsen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different margin for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodemmarges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste marges aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om elke marge aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Vouw in het rechterdeelvenster met het tabblad Stylesde sectie Paddinguit en stel de opties voor opvulling in de structuurcomponent in. Deze stijl dupliceert de CSS padding -parameter. Dit is de ruimte tussen de inhoud van een component en de rand ervan. De opvulling biedt interne ruimte die u kunt gebruiken om de afstand tussen de inhoud en de rand van de component te bepalen.
Stel de opvullingswaarden in pixels in op basis van uw ontwerpvereisten. U kunt de opvulling voor alle zijden, de bovenkant-bodem, de linkerkant of elke kant van de component onafhankelijk instellen:
-
Alle kanten - om één waarde te plaatsen om op alle kanten van toepassing te zijn, ontruim Different padding for each side checkbox. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te vergroten of te verkleinen.
-
top-bottom - om de bovenkant en bodem het opvullen aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de bovenkant en bodemmontages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
links-recht - om de linker en juiste opvulling aan de zelfde waarde te plaatsen, plaats het Vergrendelde pictogram tussen de linker en juiste montages. Klik op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
-
Onafhankelijk - om het opvullen voor elke kant aan een onafhankelijke waarde te plaatsen, plaats het Ontgrendelde pictogram tussen de bovenkant en bodemmontages en tussen de linkerzijde en het recht. Klik voor elke instelling op de pictogrammen pijl-omhoog en pijl-omlaag om het aantal pixels te verhogen of te verlagen.
Gebruik de stijlinstellingen van Advanced om aanvullende CSS-compatibele kenmerken toe te passen op waarden. U kunt de waarden van de bestaande kenmerken wijzigen of nieuwe kenmerken toevoegen. De opmaak wordt toegepast op de component met behulp van het CSS-overervingsmodel voor bovenliggende en onderliggende componenten (elementen).
De weergegeven kenmerken weerspiegelen de stijlen die momenteel zijn gedefinieerd voor de component. U kunt de waarden volgens CSS definities veranderen. Klik toevoegen (+) pictogram om een nieuw stijlattribuut voor de component toe te voegen.
Afbeelding
Gebruik de component Image om een afbeeldingselement in te voegen in uw inhoud. Wanneer de component van het Beeld in het canvas wordt geselecteerd, kunt u het getoonde dossier van de beeldactiva toevoegen of veranderen.
Afbeeldingselement toevoegen
Kies het type van middelbron 0} en selecteer een beelddossier: