Elementos: código del HTML

Utilice el Código de HTML tipo de contenido para agregar fragmentos de código de HTML, CSS y JavaScript en la Page Builder stage. Por ejemplo, si desea agregar un HTML personalizado, declare una clase CSS que se pueda aplicar a un elemento de la página. O bien, es posible que desee agregar un fragmento de código para un logotipo, botón o banner que haya recibido de un proveedor de terceros.

Cuadro de herramientas Código HTML

Cuadro de herramientas Código HTML {width="500" modal="regular"}

Herramienta
Icono
Descripción
Mover
Icono Mover {width="25"}
Mueve el contenedor Código de HTML a otro lugar válido de la página.
Configuración
Icono de configuración {width="25"}
Abre la página Editar código de HTML, donde puede cambiar las propiedades del contenedor.
Hide
Icono Ocultar {width="25"}
Oculta el contenedor Código de HTML.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de código de HTML oculto.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia del contenedor Código de HTML.
Eliminar
Icono Eliminar {width="25"}
Elimina el contenedor de código del HTML y su contenido de la fase.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Añadir código de HTML

En el siguiente ejemplo se muestra cómo incrustar Fuente Google codificar y declarar clases de encabezados personalizados que anulen la hoja de estilos actual.

Paso 1: Elegir una fuente de Google

  1. Visite la Google Fonts y elija la familia de fuentes que desea utilizar.

  2. Copie el código generado que se va a incrustar en el <head> de la página y péguela temporalmente en un editor de texto.

    • Incrustar código de fuente
    • Regla CSS
  3. Agregue la regla de la familia de fuentes a cada clase de encabezado, incluyendo las clases de encabezado en una <style> etiqueta.

    Este código se ha pegado en 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>
    

Paso 2: Añadir el código a la página

  1. En el Administrador barra lateral de la tienda, vaya a Content > Elements>Pages.

  2. Busque la página donde la fuente va a estar disponible y ábrala en modo de edición.

  3. Desplácese hacia abajo y expanda Content sección.

  4. En el Page Builder panel, expandir Elements y arrastre un HTML Code marcador de posición a una fila, columna o ficha establecida en el escenario.

    Utilice la guía roja para colocar el divisor antes o después de otro contenedor de contenido en la fila, columna o conjunto de pestañas.

    Arrastrar un marcador de posición de código de HTML al escenario {width="600" modal="regular"}

  5. Pase el ratón sobre el contenedor del HTML para mostrar el cuadro de herramientas y seleccione Configuración ( Icono de configuración {width="20"} ), icono.

  6. En el cuadro de texto, pegue el código incrustado de Google Fonts y las declaraciones de estilo que ha preparado.

    Para facilitar la lectura, puede introducir algunos espacios para sangrar el código.

    Código y estilos del HTML {width="500" modal="regular"}

  7. Actualice los ajustes restantes según sea necesario (consulte Cambio de la configuración de código del HTML para obtener más información).

  8. En la esquina superior derecha, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

    La nueva fuente se procesa cuando la página se ve a través de un explorador.

Paso 3: Previsualizar la página

  1. En el Currently Active ​sección, conjunto Enable Page ​hasta Yes.

    Activación de la página {width="600" modal="regular"}

  2. En la esquina superior derecha, haga clic Save flecha y elija Save & Close.

  3. Busque la página en la cuadrícula y seleccione View en el Actions ​columna.

    Vista previa de los encabezados de página con la nueva familia de fuentes {width="700" modal="regular"}

Cambio de la configuración de código del HTML html-settings

  1. Pase el ratón sobre el contenedor del HTML para mostrar el cuadro de herramientas y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

  2. En el cuadro de texto, edite el código según sea necesario.

    HTML, CSS y código JavaScript son compatibles. Fragmentos de código que pertenecen a <head> de la página se puede introducir aquí.

    El editor también proporciona botones para insertar elementos especiales en el código:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Botón Descripción
    Insertar widget… Haga clic para insertar un widget en la posición del cursor en el cuadro de texto del HTML.
    Insertar imagen… Haga clic aquí para insertar una imagen cargada o una imagen de la Galería en la posición del cursor en el cuadro de texto HTML.
    Insertar variable… Haga clic aquí para insertar una variable en la posición del cursor en el cuadro de texto HTML.
  3. Actualice el Advanced ​ajustes según sea necesario.

    • Para controlar la colocación del código dentro del contenedor principal, elija una Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      Opción Descripción
      Default Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
      Left Alinea la lista a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique.
      Center Alinea la lista en el centro del contenedor principal, con margen para cualquier relleno que se especifique.
      Right Alinea el bloque a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique.

      En el ejemplo siguiente, las opciones se establecen para utilizar una alineación central para el bloque de código procesado.

      Divisor con alineación central {width="600" modal="regular"}

    • Configure las variables Border estilo aplicado a los cuatro lados del contenedor de código:

      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
      Opción Descripción
      Default Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
      None No proporciona ninguna indicación visible de los bordes del contenedor.
      Dotted El borde del contenedor aparece como una línea de puntos.
      Dashed El borde del contenedor aparece como una línea discontinua.
      Solid El borde del contenedor aparece como una línea sólida.
      Double El borde del contenedor aparece como una línea doble.
      Groove El borde del contenedor aparece como una línea ranurada.
      Ridge El borde del contenedor aparece como una línea discontinua.
      Inset El borde del contenedor aparece como una línea de margen.
      Outset El borde del contenedor aparece como una línea de inicio.
    • Si establece un estilo de borde distinto de None, complete las opciones de visualización de bordes:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opción Descripción
      Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente.
      Border Width Introduzca el número de píxeles de la anchura de la línea del borde.
      Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde.
    • (Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarla al contenedor.

      Separe los distintos nombres de clase con un espacio.

    • Introduzca valores, en píxeles, para Margins and Padding para determinar los márgenes externos y el relleno interno del contenedor de código.

      Introduzca los valores correspondientes en el diagrama.

      table 0-row-2 1-row-2 2-row-2
      Área del contenedor Descripción
      Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor. Opciones: Top / Right / Bottom / Left
      Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d