DocumentaciónCommercePage Builder

Elementos: código del HTML

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

Utilice el tipo de contenido Código de HTML para agregar fragmentos de código de HTML, CSS y JavaScript en Page Builder fase. 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 de código de HTML

Herramienta
Icono
Descripción
Mover
Icono de 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
Ocultar icono {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 duplicado {width="25"}
Realiza una copia del contenedor Código de HTML.
Eliminar
Quitar icono {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 ejemplo siguiente se muestra cómo incrustar código Google Font y declarar clases de encabezado personalizadas que invalidan la hoja de estilos actual.

Paso 1: Elegir una fuente de Google

  1. Visite el sitio Google Fonts y elija la familia de fuentes que desee usar.

  2. Copie el código generado que se va a incrustar en la sección <head> de la página y péguelo 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 etiqueta <style>.

    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 la barra lateral de Admin de su 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 la sección Content.

  4. En el panel Page Builder, expanda Elements y arrastre un marcador de posición HTML Code a una fila, columna o conjunto de pestañas 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.

    Arrastrando 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 ver la caja de herramientas y elija el icono Configuración ( Configuración {width="20"} ).

  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.

    estilos y código de HTML {width="500" modal="regular"}

  7. Actualice la configuración restante según sea necesario (consulte Cambiar la configuración del código de HTML para obtener detalles).

  8. En la esquina superior derecha, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

    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 la sección Currently Active, establezca Enable Page ​en Yes.

    Habilitando la página {width="600" modal="regular"}

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

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

    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 ver la caja de herramientas y elija el icono Configuración ( Configuración {width="20"} ).

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

    El HTML, CSS y el código JavaScript son compatibles. Los fragmentos de código que pertenecen a la sección <head> de la página se pueden escribir 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 la configuración de Advanced ​según sea necesario.

    • Para controlar la colocación del código dentro del contenedor principal, elija un 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 al centro {width="600" modal="regular"}

    • Establezca el estilo Border 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 borde:

      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 aplicarlos al contenedor.

      Separe los distintos nombres de clase con un espacio.

    • Escriba valores, en píxeles, para que Margins and Padding determine 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