DocumentatieCommercePage Builder

Elements - HTML-code

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Beginner
  • tussenpersoon
  • Gebruiker

Gebruik het inhoudstype van de Code 0} HTML {om fragmenten van HTML, CSS, en code van JavaScript in het Page Builder stadiumtoe te voegen. U kunt bijvoorbeeld aangepaste HTML toevoegen, een CSS-klasse declareren die op een element op de pagina kan worden toegepast. Of u wilt een codefragment toevoegen voor een logo, knop of banner die u van een externe provider hebt ontvangen.

Gereedschap HTML-code

toolbox van de Code van HTML

Gereedschap
Pictogram
Beschrijving
Verplaatsen
pictogram van de Beweging {width="25"}
Verplaatst de container van de Code van de HTML naar een andere geldige plaats op de pagina.
Instellingen
pictogram van Montages {width="25"}
Hiermee opent u de pagina HTML-code bewerken, waarin u de eigenschappen van de container kunt wijzigen.
Verbergen
het pictogram van de Huid {width="25"}
Verbergt de container van de Code van de HTML.
Tonen
toon pictogram {width="25"}
Toont de verborgen container van de Code van HTML.
Dupliceren
Dupliceer pictogram {width="25"}
Hiermee maakt u een kopie van de container HTML Code.
Verwijderen
verwijder pictogram {width="25"}
Hiermee verwijdert u de container HTML Code en de inhoud ervan uit het werkgebied.
NOTE
Verborgen elementen worden opgeslagen in de database en onzichtbaar voor klanten. Deze elementen zijn echter zichtbaar voor zoekmachines en andere bots die uw site kruipen. Ze worden ook geretourneerd als onderdeel van de inhoud als ze worden opgevraagd via een API-aanroep met een kenmerk van onzichtbaarheid, tenzij u ze uit het werkgebied verwijdert.

HTML-code toevoegen

Het volgende voorbeeld toont aan hoe te om ]1 code in te bedden van de Doopvont van Google [ en de klassen van de douanerubriek te verklaren die de huidige stylesheet met voeten treden.

Stap 1: Kies een Google-lettertype

  1. Bezoek de plaats van de Doopvonten van Googleen kies de doopvontfamilie die u wilt gebruiken.

  2. Kopieer de gegenereerde code die moet worden ingesloten in de sectie <head> van de pagina en plak deze tijdelijk in een teksteditor.

    • Fontcode insluiten
    • CSS-regel

  3. Voeg de regel font-family toe aan elke kopklasse en sluit de kopklassen in een <style> -tag in.

    Deze code wordt geplakt in Page Builder .

    code language-html 
    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

Stap 2: Voeg de code toe aan de pagina

  1. In Admin sidebar van uw opslag, ga Content > Elements>Pages.

  2. Zoek de pagina waar het lettertype beschikbaar moet zijn en open het in de bewerkingsmodus.

  3. Schuif omlaag en vouw de sectie Content uit.

  4. Vouw in het deelvenster Page Builder Elements uit en sleep een tijdelijke aanduiding HTML Code naar een rij, kolom of tabset in het werkgebied.

    Gebruik de rode hulplijn om de scheidingslijn voor of na een andere inhoudscontainer in de rij, kolom of tabset te plaatsen.

    slepend een placeholder van de Code van de HTML aan het stadium {width="600" modal="regular"}

  5. Beweeg over de container van de HTML om toolbox te tonen en de Montages te kiezen ( pictogram van Montages {width="20"}), pictogram.

  6. Plak in het tekstvak de code en stijldeclaraties voor Google-fonts insluiten die u hebt voorbereid.

    U kunt een paar spaties invoeren om de code te laten inspringen, zodat u deze eenvoudiger kunt lezen.

    HTML code en stijlen {width="500" modal="regular"}

  7. Werk de resterende montages zoals nodig bij (zie {de codecontages van de HTML van 0} Verandering đź”— voor details).

  8. Klik in de rechterbovenhoek op Save om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .

    Het nieuwe lettertype wordt weergegeven wanneer de pagina via een browser wordt weergegeven.

Stap 3: Voorvertoning van de pagina weergeven

  1. Stel Enable Page in op Yes in de sectie Currently Active.

    toelatend de pagina {width="600" modal="regular"}

  2. Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

  3. Zoek de pagina in het raster en selecteer View in de kolom Actions.

    Voorproef de paginakoppen met de nieuwe doopvontfamilie {width="700" modal="regular"}

Instellingen voor HTML-code wijzigen html-settings

  1. Beweeg over de container van de HTML om toolbox te tonen en de Montages te kiezen ( pictogram van Montages {width="20"}).

  2. Bewerk in het tekstvak de code naar wens.

    HTML-, CSS- en JavaScript-code worden ondersteund. Codefragmenten die in de sectie <head> van de pagina horen, kunnen hier worden ingevoerd.

    De redacteur verstrekt ook knopen om speciale elementen in de code op te nemen:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Knop Beschrijving
    Widget invoegen… Klik om een widget in te voegen op de positie van de cursor in het tekstvak HTML.
    Afbeelding invoegen… Klik om een geüploade afbeelding of een afbeelding uit de galerie in te voegen op de positie van de cursor in het tekstvak HTML.
    Variabele invoegen… Klik om een variabele op de positie van de cursor in het tekstvak HTML in te voegen.

  3. Werk de instellingen van Advanced ​naar wens bij.

    • Kies een Alignment als u de positie van de code binnen de bovenliggende container wilt bepalen:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      Optie Beschrijving
      Default Hiermee past u de standaardinstelling voor uitlijning toe die is opgegeven in het stijlblad van het huidige thema.
      Left Hiermee lijnt u de lijst uit langs de linkerrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.
      Center Hiermee lijnt u de lijst in het midden van de bovenliggende container uit, rekening houdend met de opgegeven opvulling.
      Right Hiermee lijnt u het blok uit langs de rechterrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.

      In het volgende voorbeeld worden de opties zo ingesteld dat ze een uitlijning in het midden gebruiken voor het gerenderde codeblok.

      Scheidingsverdeler met een centrumgroepering {width="600" modal="regular"}

    • Stel de Border -stijl in die op alle vier zijden van de codecontainer wordt toegepast:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2
      Optie Beschrijving
      Default Past de standaardrandstijl toe die door het bijbehorende stijlblad wordt gespecificeerd.
      None Geeft geen zichtbare indicatie van de containerranden.
      Dotted De containerrand wordt weergegeven als een stippellijn.
      Dashed De containerrand wordt weergegeven als een onderbroken lijn.
      Solid De containerrand wordt weergegeven als een effen lijn.
      Double De containerrand wordt weergegeven als een dubbele lijn.
      Groove De containerrand wordt weergegeven als een gegroefde lijn.
      Ridge De containerrand wordt weergegeven als een afgeronde lijn.
      Inset De containerrand wordt weergegeven als een inzetlijn.
      Outset De containerrand wordt weergegeven als een omtreklijn.

    • Als u een andere randstijl dan None instelt, voert u de weergaveopties voor de rand in:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Optie Beschrijving
      Border Color Geef de kleur op door een staal te kiezen, op de kleurkiezer te klikken of door een geldige kleurnaam of een gelijkwaardige hexadecimale waarde in te voeren.
      Border Width Voer het aantal pixels in voor de lijnbreedte van de rand.
      Border Radius Voer het aantal pixels in om de grootte te bepalen van de straal die wordt gebruikt om elke hoek van de rand te afronden.

    • (Optioneel) Geef de namen van CSS classes op uit de huidige stijlpagina die u op de container wilt toepassen.

      Scheid meerdere klassennamen met een spatie.

    • Voer in pixels waarden in voor de Margins and Padding om de buitenste marges en binnenopvulling van de codecontainer te bepalen.

      Voer de overeenkomende waarden in het diagram in.

      table 0-row-2 1-row-2 2-row-2
      Containergebied Beschrijving
      Margins De hoeveelheid lege ruimte die wordt toegepast op de buitenrand van alle zijden van de container. Opties: Top / Right / Bottom / Left
      Padding De hoeveelheid lege ruimte die wordt toegepast op de binnenrand van alle zijden van de container. Opties: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d