Elementos: código del HTML

Última actualización: 14 de julio de 2024
  • 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

HerramientaIconoDescripción
Mover Icono de mover Mueve el contenedor Código de HTML a otro lugar válido de la página.
Configuración Icono de configuración Abre la página Editar código de HTML, donde puede cambiar las propiedades del contenedor.
Hide Ocultar icono Oculta el contenedor Código de HTML.
Mostrar Mostrar icono Muestra el contenedor de código de HTML oculto.
Duplicar Icono duplicado Realiza una copia del contenedor Código de HTML.
Eliminar Quitar icono 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.

    <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

  5. Pase el ratón sobre el contenedor del HTML para ver la caja de herramientas y elija el icono Configuración ( Configuración ).

  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

  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.