Elemento de Código Personalizado (Custom Code)

Acerca del elemento Código Personalizado

El elemento Código Personalizado (Custom Code) en GemPages Editor V7 le brinda la flexibilidad de agregar su propio código HTML, CSS, JavaScript y Liquid directamente en su página. Es un elemento poderoso que le permite:

• Personalizar con facilidad: Agregue elementos de diseño únicos o características interactivas que los elementos regulares de GemPages no admiten.
• Integrar fácilmente aplicaciones de terceros: Incruste aplicaciones externas, widgets, códigos de seguimiento o scripts en su tienda Shopify sin codificación complicada.
• Mejorar las características de la tienda: Agregue comportamientos e interacciones personalizadas para mejorar el aspecto y el funcionamiento de su tienda para sus clientes.

Agregar un elemento Código Personalizado a su página

Siga estos sencillos pasos para insertar el elemento Código Personalizado:

Paso 1: Acceda al Panel de Control de GemPages, luego seleccione su página objetivo para abrir el editor.

Paso 2Arrastre y suelte el elemento Código Personalizado desde la barra lateral izquierda, bajo la pestaña Avanzado , al área deseada.

Haga clic en el elemento para revelar la configuración, incluyendo la pestaña Configuración y la pestaña Avanzada. 

Configurar la Pestaña de Configuración

El Configuración le permite configurar cómo se comporta y aparece su elemento Código Personalizado en la página. Así es como funciona cada sección:

Código

Inserte su propio código personalizado haciendo clic en el botón "+ Agregar…". Se mostrará un cuadro de diálogo de Editor de Código donde puede ingresar fragmentos de código HTML/Líquido, CSS o JavaScript .

Una vez hecho esto, pulse el botón Guardar .

Nota: En la pestaña HTML, también puede insertar el código de instalación de terceros para mostrar contenido.

Fondo

En la pantalla Fondo , tiene la opción de modificar la apariencia visual seleccionando un color de la paleta proporcionada o insertando una imagen de fondo. 

Color

Elija un color sólido o gradiente para aplicar como fondo del elemento. Puede:

• Ingresar manualmente un código HEX (por ejemplo, # E2E2E2)
• Elegir entre colores recientes o sugeridos
• Ajustar la opacidad usando el control deslizante de porcentaje

Imagen 

Use esta opción para agregar una imagen de fondo si es necesario.

Haga clic en “+ Agregar…” en la sección Imagen para cargar o seleccionar una imagen de fondo.

Una vez que se agrega una imagen, tendrá opciones de configuración avanzadas:

• Fuente: Muestra la URL de la imagen o le permite seleccionar de la galería de medios.
• SCALE: Elija cómo se escala la imagen dentro del bloque (por ejemplo, Cubrir, Contener, Auto).
• Posición: Establezca el punto focal (centro, superior izquierda, inferior derecha, etc.).
• Repetición: : Defina si y cómo se repite la imagen (No repetir, Repetir, Repetir-X/Y).
• Adjunto: : Establezca el comportamiento de desplazamiento de la imagen (Desplazar o Fijo).
• Optimizar Pintura con contenido más grande (LCP o Largest Contentful Paint): Recomienda al navegador que priorice esta imagen para el rendimiento, seleccione Precarga = Sí i si este elemento se carga en la parte superior de la página.

Nombre

Renombre su elemento para una fácil identificación en el editor, especialmente útil para diseños complejos o páginas de múltiples secciones.

Alineación

Este parámetro le permite determinar cómo se posiciona el elemento en su página. Hay tres opciones para elegir: alineado a la izquierda, centrado y alineado a la derecha.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.

Paso 1: Encuentre el elemento de GemPages donde desea aplicar código personalizado, luego haga clic derecho y seleccione “Código Personalizado”.

Paso 2: Abra la pestaña apropiada para CSS y Script, e inserte el fragmento de código en el cuadro de diálogo. Pulse "Guardar" cuando termine.

Cómo eliminar Código Personalizado o Liquid Personalizado

Si ya no necesita el código personalizado que ha añadido, puede eliminarlo de dos maneras:

1. Elimine elemento de Código Personalizado

Paso 1: En el Editor, haga clic en el elemento Código Personalizado que desea eliminar.

Paso 2: Pulse el icono de la papelera (Eliminar) en la barra superior o haga clic con el botón derecho del ratón en el elemento y seleccione Eliminar.

2. Elimine Liquid Personalizado/Código Personalizado dentro de un elemento existente

Paso 1: Haga clic con el botón derecho del ratón en el elemento donde se ha añadido el código personalizado → seleccione Código Personalizado

Paso 2: Elimine el código dentro del campo CSS, Script.

Paso 3: Haga clic en Guardar.