GOM Sites

En esta página encontrarás toda la documentación necesaria para aprenda los conceptos básicos sobre la instalación de la platilla, los complementos y cómo funciona.

Bienvenido a la documentación oficial de GOM Sites.

Esta guía ha sido creada para ayudarte a sacar el máximo provecho de la plantilla, facilitando su instalación, configuración y uso.

Aquí encontrarás instrucciones claras y detalladas para adaptar la plantilla a tus necesidades, sin importar tu nivel de experiencia técnica, desde usuarios principiantes hasta desarrolladores avanzados.

gom sites web site

Antes de instalar GOM Sites, asegúrate de que tu servidor cumpla con los siguientes requisitos mínimos para un funcionamiento óptimo:

Requerimientos de Servidor

  • WordPress: 6.5 o superior
  • MySQL: 5.6 o superior
  • PHP: 8.2 o superior

Configuración Recomendada de PHP

  • PHP Memory Limit: 512M
  • PHP Post Max Size: 516M
  • PHP Max Input Vars: 1000
  • Upload Max File Size: 256M
  • Max Execution Time: 300
  • Max Input Time: 300

Se recomienda contactar a tu proveedor de hosting si necesitas modificar estos valores.

Antes de instalar la plantilla GOM Sites, es necesario contar con una instalación funcional de WordPress.

Elegir un Proveedor de Alojamiento

En primer lugar, necesitas un proveedor de hosting donde se almacenarán los archivos de tu sitio web.
 Algunas opciones recomendadas son:

Selecciona un plan acorde a tus necesidades y registra un nombre de dominio si aún no dispones de uno.

Descargar WordPress

  1. Visita el sitio web oficial de WordPress.
  2. Descarga la última versión estable de WordPress.
  3. El archivo se descargará en formato .zip.

Subir WordPress al Hosting

  1. Accede al panel de control de tu hosting.
  2. Sube los archivos de WordPress al servidor.
  3. Crea una base de datos MySQL.
  4. Ejecuta el instalador de WordPress desde tu navegador.

Para una guía detallada paso a paso, puedes consultar la documentación oficial de WordPress.

Una vez que WordPress esté instalado, puedes proceder a descargar la plantilla.

Iniciar Sesión en Envato

  1. Abre tu navegador web.
  2. Ve a ThemeForest.
  3. Haz clic en Iniciar sesión.
  4. Ingresa tus credenciales de Envato.

Encontrar la Plantilla Comprada

  1. Coloca el cursor sobre tu nombre de usuario (esquina superior derecha).
  2. Selecciona la opción Descargas.
  3. Busca la plantilla adquirida.
  4. Haz clic en el botón Descargar.

Descargar el Archivo

Se mostrarán dos opciones de descarga:

  • Solo archivo instalable de WordPress
     Recomendado para la instalación directa del tema.
  • Todos los archivos y la documentación
     Incluye archivos adicionales y documentación completa.

Selecciona la opción deseada y guarda el archivo en una ubicación segura de tu computadora. Asegúrate de que la descarga finalice correctamente.

Para más información, puedes consultar la documentación oficial de ThemeForest.

Una vez que WordPress esté correctamente instalado y hayas descargado la plantilla desde ThemeForest, puedes proceder con la instalación del tema GOM Sites.

Acceder al Panel de Administración de WordPress

  1. Abre tu navegador web.
  2. Accede a tu panel de administración de WordPress desde la siguiente URL: yourdomain.com/wp-admin.
  3. Inicia sesión utilizando tu nombre de usuario y contraseña de administrador.

Nota:  Asegúrate de contar con permisos de administrador para instalar y activar temas.

Subir el Tema

  1. Desde el panel de WordPress, dirígete a Apariencia » Temas.
  2. Haz clic en el botón “Agregar nuevo” ubicado en la parte superior.
  3. Selecciona la opción “Subir tema”.
  4. Haz clic en “Elegir archivo”.
  5. Navega hasta el archivo .zip del tema descargado desde ThemeForest .
  6. Selecciona el archivo y presiona “Instalar ahora”.

WordPress comenzará el proceso de carga e instalación del tema.

Activar el Tema

Una vez finalizada la instalación:

  1. Aparecerá un mensaje indicando que el tema se instaló correctamente.
  2. Haz clic en el botón “Activar” para activar el tema en tu sitio web.

Nota: Si deseas aprender más sobre la activación y uso de temas hijos, puedes consultar la documentación oficial de WordPress.

Activación de la Licencia del Tema

Para desbloquear todas las funcionalidades de GOM Sites, como la importación de demos y la instalación de complementos incluidos, es necesario activar la licencia del tema.

Encontrar tu Código de Compra

El código de compra se obtiene desde Envato (ThemeForest).

Consulta esta guía oficial de Envato para localizarlo:
 ¿Dónde está mi código de compra?

Nota:Asegúrate de copiar el código completo, ya que será necesario para la activación.

Introducir el Código de Compra

  1. Desde el panel de administración de WordPress, dirígete a “GOM Site Theme”.
  2. Serás redirigido al Dashboard de GOM Site.

Importante:  Al inicio, el dashboard no mostrará los módulos de importar demo e instalación de plugins.

 

Dashboard de GOM Site

Dentro del dashboard encontrarás tres secciones principales:

  • Licence Code
  • System Info
  • Help Center

También verás un mensaje indicando que debes registrar tu código de compra para desbloquear:

  • La instalación de complementos incluidos
  • Todas las funcionalidades del tema

dashboard gom sites

Activar la Licencia

  1. Accede a la sección “Licence Code”.
  2. Introduce tu código de compra en el campo de texto correspondiente.
  3. Haz clic en el botón “Registrar licencia”.

Una vez registrada la licencia correctamente, se habilitarán todos los módulos y funcionalidades que GOM Site Theme tiene para ofrecerte.

dashboard gom site with code

Instalación de Plugins y Demos

Una vez que el tema GOM Sites esté correctamente instalado y la licencia haya sido registrada, se habilitarán automáticamente los módulos necesarios para la instalación de plugins y demos de tu sitio web.

Estos plugins pueden gestionarse tanto desde el Dashboard de GOM Site como desde la mesa de trabajo de WordPress.

Módulo GOM Sites Theme

Dentro del panel de administración de WordPress, accede al módulo GOM Sites Theme.

Desde este módulo podrás gestionar de forma centralizada la instalación de los complementos requeridos para el correcto funcionamiento del tema.

Instalar Plugins

  1. Dentro del módulo GOM Sites Theme, haz clic en el botón “Install Plugins”.
  2. Serás redirigido a una pantalla que muestra la lista completa de plugins necesarios para el tema.

Lista de Plugins

En esta sección se mostrará una tabla con todos los plugins disponibles, tanto obligatorios como recomendados.

Cada plugin incluirá la siguiente información:

  • Plugin Name
  • Source
  • Type
  • Version
  • Status

Acciones Masivas (Bulk Actions)

En la parte superior de la lista encontrarás la opción “Bulk Actions”.

Esta funcionalidad te permitirá:

  • Instalar múltiples plugins al mismo tiempo
  • Activar varios plugins simultáneamente
  • Actualizar plugins en bloque

Esto facilita y acelera considerablemente el proceso de configuración inicial del sitio.

Nota: Si se genera un error al intentar instalar todos los plugins usando el Bulk actions intenta instalarlos uno por uno.

Plugins sugeridos en el Tema

A continuación, se detallan los plugins que se mostrarán en la lista de instalación:

11.1 Plugins Principales

  • GOM Tools Elementor Addons
     Complementos de la red GOM diseñados específicamente para ampliar las funcionalidades del plugin Elementor.
  • Elementor
     Constructor visual de sitios web con sistema de arrastrar y soltar, diseño responsive y edición en tiempo real.
  • One Click Demo Import
     Permite importar contenido de demostración, widgets y configuraciones del tema con un solo clic.
  • Contact Form 7
     Plugin de formularios de contacto simple, flexible y ampliamente compatible.
  • Envato Market
     Permite recibir actualizaciones automáticas de temas y plugins premium adquiridos a través de Envato Market.
  • LiteSpeed Cache
     Sistema de caché de alto rendimiento y optimización del sitio web para servidores LiteSpeed.
  • WPS Hide Login
     Mejora la seguridad cambiando la URL de inicio de sesión de WordPress.
  • WooCommerce
     Plataforma completa para crear y gestionar tiendas online.
  • Yoast SEO
    Solución SEO todo en uno para optimizar el contenido y mejorar la visibilidad en buscadores.

La importación de demos te permitirá crear rápidamente un sitio web completamente funcional utilizando diseños preconfigurados incluidos en GOM Sites.

Este proceso se realiza mediante el plugin One Click Demo Import (OCDI), el cual ofrece dos métodos de importación.

Modos del Complemento One Click Demo Import

El plugin OCDI cuenta con dos modos de importación:

Importación Manual

En este modo puedes seleccionar manualmente los tipos de contenido que deseas importar, subiendo los archivos correspondientes desde tu computadora.

Este método es ideal cuando:

  • Necesitas importar contenido específico
  • Deseas un mayor control del proceso

Demostraciones Predefinidas

Este modo permite seleccionar una de las demostraciones preparadas por los autores del tema.

Este modo solo está disponible cuando el tema ha sido integrado con el plugin OCDI, como es el caso de GOM Sites.

GOM Sites Demo

Demos Disponibles

GOM Sites se encuentra en constante crecimiento y ofrece una variedad de demos preconfigurados para facilitar la creación de sitios web atractivos y funcionales.

Las demostraciones incluyen:

  • Sitios corporativos
  • Landing pages
  • Portafolios
  • Tiendas online
  • Blogs

Cada demo ha sido diseñada con:

  • Diseño moderno
  • Compatibilidad con editores visuales
  • Opciones de personalización
  • Rendimiento optimizado para SEO y velocidad

Plugins requeridos para instalación del demo

Estos plugins deben estar instalados y activos para garantizar la correcta visualización del contenido y el acceso a todas las funcionalidades del tema. Los plugins requeridos son: 

  • GOM Tools Elementor Addons
  • Elementor
  • One Click Demo Import
  • Envato Market

Selección del Demo

  1. Selecciona la demostración que deseas importar.
  2. Al hacerlo, serás dirigido automáticamente al siguiente paso: Instalación de complementos.

Instalación de Plugins del Demo

Antes de iniciar la importación del contenido, se mostrará una lista de plugins asociados al demo seleccionado.

Plugin recommendations for template installation

Tipos de Plugins

  • Plugins obligatorios
     Identificados con un icono de candado.
     No pueden desmarcarse, ya que son necesarios para el correcto funcionamiento del demo.
  • Plugins recomendados
     No tienen icono de candado y pueden marcarse o desmarcarse según tus necesidades.
  • Plugins ya instalados
    Se identifican con una marca de verificación verde.

Información Importante

  • Si un plugin no se instala correctamente, aparecerá un mensaje de error debajo del mismo.
  • El proceso de importación no se iniciará hasta que el error sea resuelto.
  • Puedes intentar nuevamente haciendo clic en “Continuar e importar”.
  • Si el problema persiste:
    1. Instala y activa el plugin manualmente.
    2. Regresa a esta pantalla.
    3. Continúa con la importación.

Una vez que todos los plugins estén correctamente instalados, comenzará el proceso de importación del demo.

Importación Manual

Si el tema no cuenta con integración directa con OCDI o si deseas importar archivos específicos, se mostrará la opción de Importación Manual.

Desde esta pantalla podrás subir archivos para importar diferentes tipos de contenido:

  • Plantilla
  • Licencia
  • Plugins

Una vez seleccionados los archivos deseados, haz clic en “Continuar e importar” para iniciar el proceso.

one click demo 1

 Información sobre Estilos de Elementor

Para importar correctamente los estilos de Elementor, sigue los pasos a continuación.

Descargar el Paquete del Tema

Descarga el archivo .zip del tema, el cual contiene las siguientes carpetas:

  • Demos-Content
  • Documentation
  • Licensing
  • Plugins
  • Theme

files gom site

Ubicación de los Estilos de Elementor

  1. Asegúrate de que el tema esté instalado.
  2. Verifica que la licencia esté activada.
  3. Accede a la carpeta Demos-Content.

Dentro de esta carpeta encontrarás varias subcarpetas, cada una correspondiente a un demo específico.

Demos content

Seleccionar el Demo

  1. Ingresa a la carpeta del demo que deseas importar.
  2. Dentro encontrarás varios archivos que deberán importarse manualmente en GOM Sites.

Ejemplo: Demo “Business Pro”

A continuación, se describe el proceso usando como ejemplo el demo Business Pro.

Instalación del Archivo demo-theme1-content.xml

  1. Accede a la opción de Importación Manual.
  2. Dirígete al módulo “Manual Demo File Import”.
  3. Haz clic en “Import Content”.

Selecciona el archivo demo-theme1-content.xml ubicado en la carpeta del demo Business Pro.

importar content

Instalación del Archivo demo-theme1-widgets.wie

  1. En el módulo Manual Demo File Import, selecciona “Import Widgets”.
  2. Busca y selecciona el archivo demo-theme1-widgets.wie dentro de la carpeta del demo.

importar wifgets

Instalación del Archivo demo-theme1-customizer.dat

  1. En el mismo módulo, haz clic en “Import Customizer”.
  2. Selecciona el archivo demo-theme1-customizer.dat correspondiente al demo.

importar customizer

Instalación del Archivo ZIP settings

La instalación del ZIP  settings permite aplicar configuraciones globales adicionales del sitio mediante Elementor, garantizando que el diseño y los estilos funcionen correctamente según el demo o la configuración seleccionada.

Acceder al Módulo de Elementor

  1. Desde el panel de administración de WordPress, dirígete a Elementor.
  2. Haz clic en la opción “Tools”.

En esta sección encontrarás varias herramientas disponibles para la gestión del sitio.

Website Templates

  1. Dentro de Tools, selecciona la pestaña “Website Templates”.
  2. Se mostrarán dos opciones:
  • Export this website
  • Apply a Website Template

      3. Selecciona la opción “Apply a Website Template”.

Elementor import

Importar el Archivo ZIP

  1. Haz clic en el botón “Import”.
  2. Serás redirigido a un nuevo módulo.
  3. Carga el archivo .zip  settings del sitio.

Elementor import 1

Selección de Opciones de Importación

Una vez que el archivo haya sido cargado correctamente, se mostrará una pantalla con varias opciones de importación.

  • La opción “Settings & configurations” estará seleccionada automáticamente.
  • Esta opción es la correcta y no debe modificarse.
  • Haz clic en el botón “Import and apply” para continuar.

Elementor import 2

Confirmación de Importación

Al finalizar el proceso, se mostrará una pantalla de confirmación con el siguiente mensaje: “Tus plantillas de sitio web ya están activas en tu sitio”

En esta pantalla podrás visualizar un resumen de la información importada.

Finalizar la Instalación

  1. Presiona el botón “Close”.
  2. El proceso de carga del estilo y configuraciones habrá finalizado correctamente.

Elementor import 3

Resultado Final

Después de completar este proceso:

  • Las configuraciones globales de Elementor estarán aplicadas
  • El sitio reflejará correctamente los estilos definidos
  • El diseño será consistente en todo el sitio web

Recomendaciones Finales

  • Limpia la caché del sitio si utilizas plugins de optimización
  • Revisa los ajustes globales desde Elementor → Ajustes del sitio
  • Verifica la correcta visualización en dispositivos móviles y tabletas

Proceso de Importación

Una vez iniciado el proceso de importación, se mostrará la pantalla de progreso.

Template Installation

Importación Exitosa

Si todo se completa correctamente, aparecerá el mensaje:

“Importación completada exitosamente”

Installed template

Advertencias y Errores

Si ocurre algún problema durante la importación:

  • Se mostrará una pantalla de advertencia
  • Esto indica que la mayoría del contenido fue importado correctamente
  • Algunos elementos pueden no haberse importado

Se mostrará:

  • Una lista de los elementos fallidos
  • Un enlace a un archivo de registro de errores

En el archivo de registro encontrarás:

  • Detalles de los errores
  • Tipo de importación afectada (contenido, widgets, personalizador)
  • Archivos utilizados durante la importación

En esta sección aprenderás cómo personalizar y configurar las diferentes páginas y elementos del tema GOM Site para adaptarlos completamente a tus necesidades.

Se explicará cómo modificar:

  • Estructura de las páginas
  • Diseño visual
  • Funcionalidades clave

Incluyendo elementos como:

  • Encabezados (Headers)
  • Pie de página (Footers)
  • Plantillas personalizadas
  • Bloques de contenido

Además, se mostrará cómo editar y reorganizar contenido utilizando el editor visual Elementor, permitiéndote trabajar de forma eficiente y profesional.

Siguiendo esta guía, lograrás que tu sitio web sea:

  • Atractivo
  • Funcional
  • Coherente con tu identidad de marca

A continuación se explican todas las funcionalidades disponibles en la sección de Header utilizando el plugin GOM Tool Elementor Addons.

Acceder a GOM Tool Elementor Addons

  1. Desde el panel de administración de WordPress, dirígete a la barra lateral izquierda.
  2. Busca la opción “GOM Tool Elementor Addons”.

Al seleccionarla, se mostrarán los siguientes módulos:

  • GOM Tool Elementor Addons
     Módulo principal del plugin.
  • Theme Headers
     Módulo donde se muestra la lista de cabeceras creadas.
  • Theme Footers
     Módulo donde se muestra la lista de pies de página creados.
  • Theme Template
     Módulo donde se muestra la lista de plantillas creadas.

Módulo Theme Headers

  1. Dentro de GOM Tool Elementor Addons, selecciona “Theme Headers”.
  2. Serás redirigido al módulo donde se muestra la lista de headers existentes.

Opciones Disponibles

En la parte superior de la lista encontrarás varias herramientas de gestión:

  • Bulk Actions
     Permite realizar múltiples acciones sobre varios headers al mismo tiempo.
  • Filter
     Permite filtrar y segmentar la lista según diferentes criterios.
  • Search Theme Headers
     Permite buscar un header específico de forma rápida.
  • New Theme Header
     Redirige al módulo para crear un nuevo header.

Creación de un Nuevo Header

Crear Header

  1. Dentro del módulo Theme Headers, dirígete a la parte superior.
  2. Haz clic en el botón “New Theme Header”.
  3. Serás redirigido al módulo “New Theme Header”.

Configuración Inicial del Header

En este módulo encontrarás:

  • Un campo para ingresar el título del header
  • A la derecha, el panel “Post Attributes”, que incluye las siguientes opciones de plantilla:
  • Elementor Canvas
  • Elementor Full Width
  • GOM Tools Elementor Footer
  • GOM Tools Elementor Full Width
  • GOM Tools Elementor Full Header
  • Theme

Seleccionar Plantilla Correcta

  1. Despliega las opciones del campo Post Attributes.
  2. Selecciona “GOM Tools Elementor Header”.

Nota: Esta opción es necesaria para que el header se muestre correctamente en el sitio web.

Publicar el Header

  1. Asigna un título al header.
  2. Haz clic en el botón “Publicar”.

El header quedará creado correctamente.

Editar el Header con Elementor

  1. Una vez publicado, haz clic en el botón “Edit with Elementor”.
  2. Se abrirá el editor visual de Elementor.
  3. Desde aquí podrás diseñar y personalizar el header según tus necesidades.

En esta guía te explicamos detalladamente todas las funciones que ofrecen los widgets para crear y personalizar el header (cabecera) de tu sitio web utilizando Elementor junto con GOM Tools.

Cuando accedes al editor de Elementor, encontrarás en la barra lateral izquierda una lista de elementos que puedes añadir a tu diseño. Estos se dividen en:

  • Elementos nativos de Elementor
  • Elementos adicionales proporcionados por GOM Tools

Los widgets de GOM Tools están organizados por categorías según la sección del sitio que desees construir.

GOM Tools – Header & Footer

Dentro del panel de widgets, dirígete a la categoría:

GOM Tools – Header & Footer

En esta sección encontrarás dos widgets principales:

  • Navbar
  • Links List

En esta documentación nos centraremos en el widget Navbar, que es el encargado de construir y configurar la cabecera de tu sitio web.

Widgets gom Header & footer

Widget Navbar

El widget Navbar te permite crear una cabecera completamente funcional y adaptable tanto para escritorio como para dispositivos móviles.

Con este widget podrás:

  • Agregar y editar el logo
  • Configurar el menú principal (PC)
  • Configurar el menú móvil
  • Añadir submenús
  • Integrar una barra de búsqueda
  • Agregar botones personalizados
  • Ajustar estilos visuales y comportamiento

Este widget ofrece un control total sobre el diseño y la funcionalidad del encabezado.

Header & footer - navbar

Configuraciones de Widget Navbar

Una vez que agregues el widget Navbar a tu diseño, podrás comenzar a personalizarlo desde el panel izquierdo de Elementor.

Todos los widgets de Elementor están divididos en dos grandes secciones:

  • Content (Contenido)
  • Style (Estilo)

A continuación te explicamos cada una en detalle.

Content:

Display Options

Esta sección define el comportamiento estructural y la visibilidad global de los elementos del header.

  • Layout Style: Alterna entre diseños predefinidos para la estructura del encabezado.
  • Scroll Mode: Permite activar el efecto “Sticky” (fijo) o cambiar el estilo del header cuando el usuario hace scroll hacia abajo.
  • Site Title: Opción para mostrar u ocultar el nombre del sitio de forma estática o dinámica.
  • Logo, Site Title, Menu, Search Bar Button: Selectores rápidos para habilitar o deshabilitar globalmente.

Logo Section

Permite una identidad visual consistente tanto en versiones de escritorio como en dispositivos móviles.

  • Default logo: Selector para habilitar o deshabilitar el logo por defecto.
  • Main Logo: Selecciona el logotipo principal que aparecerá por defecto.
  • Mobile Logo: Sube una variante del logotipo (generalmente más compacta o en formato isotipo) optimizada para pantallas pequeñas.

Menu

Selecciona el menu quedeseas que se muestre en tu emcabezado para version de desktop y mobile.

  • Menu Desktop: Selecciona el menú que se mostrara en versiones de escritorio.
  • Menu Mobile: Selecciona el menú que se mostrara para la version mobil. 

Search Bar

Añade una funcionalidad de búsqueda integrada directamente en el encabezado.

  • Search field placeholder: Este campo te permite editar el texto que se muestra en el campo antes de que el usuario ingrese un valor.
  • Form Redirect URL: Este campo te permite editar la dirección web a la que se envía al usuario después de enviar un formulario.

Button

Ideal para resaltar el objetivo principal de la web

  • Link: Este campo te permite editar el enlace del botón que te dirigirá a otra sección del sitio o a un recurso externo.
  • Label: Este campo te permite editar la etiqueta del botón.
  • Icon: Este campo te permite editar el icono que quieras que aparezca en el botón junto al texto.

Style 

Header 

  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del Header. Define la capa visual base del encabezado.
  • Color: Permite seleccionar el color de fondo del Header cuando se utiliza un fondo sólido. Puede configurarse mediante selector visual o valor hexadecimal.
  • Image (Imagen): Permite cargar o seleccionar una imagen como fondo del Header. La imagen ocupa el área completa del contenedor y reemplaza el color si ambos están configurados.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del Header. Incluye un control de intensidad y puede activarse o desactivarse según el diseño.
  • Border Type: Define el estilo de la línea del borde del Header (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del Header. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del Header (logo, menú, botones) y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el Header de otros elementos adyacentes en la estructura de la página. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del Header. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del Header en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Navbar

  •  Horizontal alignment: Permite definir la alineación horizontal del contenido dentro del Navbar (izquierda, centro, derecha o distribución). Afecta la posición de los elementos internos como enlaces o botones.
  • Max width: Define el ancho máximo del contenedor del Navbar en píxeles (px). Limita su expansión en pantallas grandes y permite mantener el contenido alineado dentro de un ancho controlado.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del Navbar. Define la base visual del área de navegación.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del Navbar. Puede activarse cuando se utiliza transparencia o imagen de fondo para mejorar la legibilidad.
  • Border Type: Define el estilo de la línea del borde del Navbar (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del Navbar. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del Navbar y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el Navbar de otros elementos adyacentes dentro del Header o la página. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del Navbar. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Navbar (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del Navbar en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Logo

  • Column width: Define el ancho de la columna que contiene el logo dentro de la estructura del Header. Se configura en píxeles (px) y determina el espacio horizontal asignado al contenedor del logo.
  • Horizontal alignment: Permite establecer la alineación horizontal del logo dentro de su columna (izquierda, centro o derecha). Afecta únicamente la posición interna del logo.
  • Width: Define el ancho del logo en píxeles (px). Controla el tamaño horizontal de la imagen sin modificar la estructura de la columna.
  • Height: Define la altura del logo en píxeles (px). Permite ajustar el tamaño vertical de la imagen de forma independiente al ancho.

Menu

  • Column width: Define el ancho de la columna que contiene el menú dentro del Header. Se configura en píxeles (px) y determina el espacio horizontal asignado al contenedor del menú.
  • Desktop: Horizontal alignment: Permite establecer la alineación horizontal de los elementos del menú en versión escritorio (izquierda, centro, derecha o distribución). Afecta la disposición de los enlaces dentro del contenedor.
  • Desktop: Gap: Define el espacio horizontal entre los elementos del menú en versión escritorio. Se configura en píxeles (px) y controla la separación entre enlaces o ítems.
  • Mobile: Horizontal alignment: Permite establecer la alineación horizontal de los elementos del menú en versión móvil (izquierda, centro o derecha). Afecta la posición del contenido dentro del contenedor móvil.
  • Background Color: Permite definir el color de fondo del contenedor principal del menú. Puede configurarse mediante selector visual o valor hexadecimal.
  • Padding (Relleno): Espacio interno entre los elementos del menú y el borde de su contenedor. Puede configurarse de forma independiente por cada lado (Top, Right, Bottom, Left).

Menu item

  • Normal / Hover / Active: Permite configurar los estilos del ítem del menú según su estado.
  • Width: Define el ancho del ítem del menú en píxeles (px). Controla el tamaño horizontal del elemento individual.
  • Height: Define la altura del ítem del menú en píxeles (px). Controla el tamaño vertical del área clickeable.
  • Horizontal alignment: Permite establecer la alineación horizontal del contenido interno del ítem (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical del contenido dentro del ítem (superior, centrado o inferior).
  • Text alignment: Controla la alineación del texto dentro del ítem (izquierda, centro, derecha o justificado).
  • Background Type: Permite elegir entre un color sólido, degradado o imagen como fondo del ítem del menú.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del ítem. Se utiliza cuando hay transparencia o imagen de fondo.
  • Text color: Define el color del texto del ítem del menú. Puede configurarse mediante selector visual o valores globales.
  • Typography: Permite configurar las propiedades tipográficas del texto del menú (fuente, tamaño, peso, altura de línea, espaciado y transformación).
  • Border Type: Define el estilo de la línea del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto del ítem y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos del menú. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del ítem del menú. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del ítem en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Sub menu 

  • Width: Define el ancho del contenedor del submenú en píxeles (px). Controla el tamaño horizontal del desplegable.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el submenú. Define la base visual del contenedor desplegable.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del submenú. Se utiliza cuando existe transparencia o imagen de fondo para mejorar la legibilidad.
  • Border Type: Define el estilo de la línea del borde del submenú (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del submenú. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los elementos del submenú y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el submenú de otros elementos adyacentes dentro del Header. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del submenú. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del submenú (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del submenú en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Sub menu items

  • Normal / Hover / Active: Permite configurar los estilos del ítem del menú según su estado.
  • Width: Define el ancho del ítem del submenú en píxeles (px). Controla el tamaño horizontal del elemento dentro del desplegable.
  • Height: Define la altura del ítem del submenú en píxeles (px). Controla el tamaño vertical del área clickeable.
  • Horizontal alignment: Permite establecer la alineación horizontal del contenido interno del ítem (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical del contenido dentro del ítem (superior, centrado o inferior).
  • Text alignment: Controla la alineación del texto dentro del ítem (izquierda, centro, derecha o justificado).
  • Background Type: Permite elegir entre un color sólido, degradado o imagen como fondo del ítem del submenú.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del ítem. Se utiliza cuando hay transparencia o imagen de fondo.
  • Text color: Define el color del texto del ítem del submenú. Puede configurarse mediante selector visual o valores globales del sistema.
  • Typography: Permite configurar las propiedades tipográficas del texto del submenú (fuente, tamaño, peso, altura de línea, espaciado y transformación).
  • Border Type: Define el estilo de la línea del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto del ítem y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos dentro del submenú. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del ítem del submenú. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del ítem en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Mobile menu

  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del menú móvil. Define la base visual del panel desplegable en dispositivos móviles.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del menú móvil. Se utiliza cuando hay transparencia o imagen de fondo para mejorar la legibilidad del contenido.
  • Border Type: Define el estilo de la línea del borde del menú móvil (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del menú móvil. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los elementos del menú móvil y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el menú móvil de otros elementos del layout. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del menú móvil. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del menú móvil (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del menú móvil en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Mobile menu trigger

  • Normal / Active / Open: Permite configurar los estilos del botón del menú móvil según su estado.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el botón del menú móvil.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del botón. Se utiliza cuando existe transparencia o imagen de fondo.
  • Icon size: Define el tamaño del ícono del menú móvil en píxeles (px). Afecta únicamente al ícono interno, no al contenedor.
  • Toggle icon color: Permite seleccionar el color del ícono del menú móvil. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border Type: Define el estilo de la línea del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el ícono y el borde del botón. Puede configurarse individualmente por cada lado para ajustar el área clickeable.
  • Margin (Margen): Espacio externo que separa el botón del menú móvil de otros elementos adyacentes dentro del Header. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del botón del menú móvil. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del botón (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del botón en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Mobile sub menu

  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del submenú móvil. Define la base visual del desplegable en dispositivos móviles.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del submenú móvil. Se utiliza cuando existe transparencia o imagen de fondo para mejorar la legibilidad.
  • Border Type: Define el estilo de la línea del borde del submenú móvil (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del submenú móvil. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los elementos del submenú móvil y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el submenú móvil de otros elementos del layout. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del submenú móvil. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del submenú móvil (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del submenú móvil en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Mobile menu items

  • Normal / Active: Permite configurar los estilos del ítem del submenú móvil según su estado.
  • Width: Define el ancho del ítem del menú móvil en píxeles (px). Controla el tamaño horizontal del área clickeable.
  • Height: Define la altura del ítem del menú móvil en píxeles (px). Controla el tamaño vertical del elemento.
  • Horizontal alignment: Permite establecer la alineación horizontal del contenido interno del ítem (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical del contenido dentro del ítem (superior, centrado o inferior).
  • Text alignment: Controla la alineación del texto dentro del ítem (izquierda, centro, derecha o justificado).
  • Background Type: Permite elegir entre un color sólido, degradado o imagen como fondo del ítem del menú móvil.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del ítem. Se utiliza cuando hay transparencia o imagen de fondo.
  • Text color: Define el color del texto del ítem del menú móvil. Puede configurarse mediante selector visual o valores globales del sistema.
  • Typography: Permite configurar las propiedades tipográficas del texto del menú móvil (fuente, tamaño, peso, altura de línea, espaciado y transformación).
  • Border Type: Define el estilo de la línea del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto del ítem y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos dentro del menú móvil. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del ítem del menú móvil. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del ítem en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Mobile sub menu items

  • Normal / Active: Permite configurar los estilos del ítem del submenú móvil según su estado.
  • Background Type: Permite elegir entre un color sólido, degradado o imagen como fondo del ítem del submenú móvil.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del ítem. Se utiliza cuando existe transparencia o imagen de fondo.
  • Text color: Define el color del texto del ítem del submenú móvil. Puede configurarse mediante selector visual o valores globales del sistema.
  • Typography: Permite configurar las propiedades tipográficas del texto del submenú móvil (fuente, tamaño, peso, altura de línea, espaciado y transformación).
  • Border Type: Define el estilo de la línea del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto del ítem y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos dentro del submenú móvil. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del ítem del submenú móvil. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del ítem en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Search bar

  • Column width: Define el ancho de la columna que contiene la barra de búsqueda dentro del Header. Se configura en píxeles (px) y determina el espacio horizontal asignado al contenedor.
  • Horizontal alignment: Permite establecer la alineación horizontal de la barra de búsqueda dentro de su columna (izquierda, centro o derecha). Afecta la posición del campo de búsqueda dentro del Header.

Search form trigger

  • Normal / Hover: Permite configurar los estilos del botón que activa el formulario de búsqueda según su estado..
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el botón del buscador.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del botón. Se utiliza cuando existe transparencia o imagen de fondo.
  • Icon size: Define el tamaño del ícono del buscador en píxeles (px). Afecta únicamente al ícono interno, no al contenedor.
  • Toggle icon color: Permite seleccionar el color del ícono del buscador. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border Type: Define el estilo de la línea del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el ícono y el borde del botón. Puede configurarse individualmente por cada lado para ajustar el área clickeable.
  • Margin (Margen): Espacio externo que separa el botón del buscador de otros elementos adyacentes dentro del Header. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del botón del buscador. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del botón (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del botón en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Search form

  • Width: Define el ancho del formulario de búsqueda en píxeles (px). Controla el tamaño horizontal del contenedor.
  • Height: Define la altura del formulario de búsqueda en píxeles (px). Controla el tamaño vertical del campo y sus elementos internos.
  • Horizontal alignment: Permite establecer la alineación horizontal del contenido interno del formulario (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical de los elementos dentro del formulario (superior, centrado o inferior).
  • Gap: Define el espacio entre los elementos internos del formulario (por ejemplo, campo de texto y botón). Se configura en píxeles (px).
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del formulario de búsqueda.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del formulario. Se utiliza cuando existe transparencia o imagen de fondo.
  • Border Type: Define el estilo de la línea del borde del formulario (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del formulario. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los elementos del formulario y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el formulario de búsqueda de otros elementos dentro del Header. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del formulario de búsqueda. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del formulario (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del formulario en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Search form imput

  • Width: Define el ancho del campo de entrada de búsqueda en píxeles (px). Controla el tamaño horizontal del input dentro del formulario.
  • Height: Define la altura del campo de entrada en píxeles (px). Controla el tamaño vertical del área donde el usuario escribe.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el campo de entrada.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del campo de entrada. Se utiliza cuando existe transparencia o imagen de fondo.
  • Text color: Define el color del texto ingresado en el campo de búsqueda. Puede configurarse mediante selector visual o valores globales del sistema.
  • Border Type: Define el estilo de la línea del borde del campo de entrada (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del campo de entrada. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto del input y el borde del campo. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el campo de entrada de otros elementos dentro del formulario. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del campo de entrada. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del campo de entrada (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del campo de entrada en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Search form submit button

  • Normal / Hover: Permite configurar los estilos del botón de envío del formulario de búsqueda según su estado.
  • Width: Define el ancho del botón en píxeles (px). Controla el tamaño horizontal del botón de envío.
  • Height: Define la altura del botón en píxeles (px). Controla el tamaño vertical del botón.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el botón.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del botón. Se utiliza cuando existe transparencia o imagen de fondo.
  • Icon size: Define el tamaño del ícono del botón en píxeles (px). Afecta únicamente al ícono interno.
  • Toggle icon color: Permite seleccionar el color del ícono del botón. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border Type: Define el estilo de la línea del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del botón (ícono) y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de envío de otros elementos dentro del formulario. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del botón. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del botón (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del botón en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Button

  • Column width: Define el ancho de la columna que contiene el botón dentro del Header. Se configura en píxeles (px) y determina el espacio horizontal asignado al contenedor.
  • Horizontal alignment: Permite establecer la alineación horizontal del botón dentro de su columna (izquierda, centro o derecha).
  • Normal / Hover: Permite configurar los estilos del botón según su estado.
  • Width: Define el ancho del botón en píxeles (px). Controla el tamaño horizontal del elemento.
  • Height: Define la altura del botón en píxeles (px). Controla el tamaño vertical del área clickeable.
  • Typography: Permite configurar las propiedades tipográficas del texto del botón (fuente, tamaño, peso, altura de línea, espaciado y transformación).
  • Horizontal alignment: Permite establecer la alineación horizontal del contenido interno del botón (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical del contenido dentro del botón (superior, centrado o inferior).
  • Text alignment: Controla la alineación del texto dentro del botón (izquierda, centro, derecha o justificado).
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el botón.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del botón. Se utiliza cuando existe transparencia o imagen de fondo.
  • Color: Define el color del texto del botón. Puede configurarse mediante selector visual o valores globales del sistema.
  • Border Type: Define el estilo de la línea del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del botón y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos dentro del Header. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del botón. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del botón (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del botón en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.
  • Width: Define el ancho del ícono en píxeles (px). Controla el tamaño horizontal del elemento gráfico.
  • Extra height: Define una altura adicional en píxeles (px) aplicada al contenedor del ícono. Permite ajustar el área vertical ocupada sin modificar la proporción del gráfico.
  • Toggle icon color: Permite seleccionar el color del ícono. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del ícono.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del contenedor del ícono. Se utiliza cuando existe transparencia o imagen de fondo.
  • Icon color: Define el color principal del ícono. Puede configurarse mediante selector visual o valores globales.
  • Border Type: Define el estilo de la línea del borde del contenedor del ícono (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Icon border radius: Controla la curvatura de las esquinas del contenedor del ícono. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Icon padding: Espacio interno entre el ícono y el borde de su contenedor. Puede configurarse individualmente por cada lado.
  • Icon margin: Espacio externo que separa el ícono de otros elementos adyacentes dentro del Header. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del ícono. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del ícono (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del ícono en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Header & Footer”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

A continuación se explican todas las funcionalidades disponibles en la sección de Footer utilizando el plugin GOM Tool Elementor Addons en WordPress.

Esta guía te permitirá crear, gestionar y editar tus pies de página de forma profesional, asegurando que se integren correctamente en tu sitio web.

Acceder a GOM Tool Elementor Addons

Para comenzar, debes ingresar al panel de administración de WordPress.

  1. Dirígete a la barra lateral izquierda.
  2. Busca la opción “GOM Tool Elementor Addons”.
  3. Haz clic para desplegar sus módulos disponibles.

Al seleccionarla, se mostrarán los siguientes módulos:

  • GOM Tool Elementor Addons
     Módulo principal del plugin.
  • Theme Headers
     Módulo donde se muestra la lista de las cabeceras creadas.
  • Theme Footers
     Módulo donde se muestra la lista de los pies de página creados.
  • Theme Template
     Módulo donde se muestra la lista de las plantillas creadas.

Módulo Theme Footers

Dentro de GOM Tool Elementor Addons, selecciona la opción:

Theme Footers

Serás redirigido al módulo donde se muestra la lista completa de footers existentes en tu sitio web.

Opciones disponibles en Theme Footers

En la parte superior del listado encontrarás varias herramientas de gestión que te permitirán administrar tus footers de forma eficiente:

  • Bulk Actions: Permite realizar múltiples acciones sobre varios footers al mismo tiempo, optimizando la gestión masiva.
  • Filter: Permite filtrar y segmentar la lista según diferentes criterios para facilitar la organización.
  • Search Theme Footers: Permite buscar un footer específico de forma rápida y precisa.
  • New Theme Footer: Redirige al módulo para crear un nuevo footer.

Creación de un Nuevo Footer

Paso 1: Crear Footer

Dentro del módulo Theme Footers:

  1. Dirígete a la parte superior.
  2. Haz clic en el botón “New Theme Footer”.
  3. Serás redirigido al módulo “New Theme Footer”.

En este módulo encontrarás:

  • Un campo para ingresar el título del footer.
  • A la derecha, el panel llamado Post Attributes, que incluye las siguientes opciones de plantilla:
  • Elementor Canvas
  • Elementor Full Width
  • GOM Tools Elementor Footer
  • GOM Tools Elementor Full Width
  • GOM Tools Elementor Full Header
  • Theme

Seleccionar la Plantilla Correcta

Para que el footer funcione correctamente en tu sitio web, debes:

  1. Desplegar las opciones del campo Post Attributes.
  2. Seleccionar la opción:

GOM Tools Elementor Footer

Nota: Esta opción es imprescindible para que el pie de página se muestre correctamente en el sitio web.

Publicar el Footer

Una vez seleccionada la plantilla correcta:

  1. Asigna un título al footer.
  2. Haz clic en el botón “Publicar”.

El footer quedará creado correctamente dentro del sistema.

Editar el Footer con Elementor

Después de publicar el footer:

  1. Haz clic en el botón “Edit with Elementor”.
  2. Se abrirá el editor visual de Elementor.
  3. Desde allí podrás diseñar y personalizar el footer según tus necesidades.

Podrás agregar:

  • Columnas
  • Menús
  • Iconos sociales
  • Formularios
  • Información de contacto
  • Logos
  • Widgets personalizados

Todo completamente editable mediante sistema visual drag & drop.

En esta guía te explicamos detalladamente todas las funciones que ofrecen los widgets para crear y personalizar el footer (pie de página) de tu sitio web utilizando Elementor junto con GOM Tools.

Una vez que estés dentro del editor de Elementor, visualizarás en la barra lateral izquierda una lista de elementos disponibles para agregar a tu diseño.

Estos elementos se dividen en:

  • Widgets nativos de Elementor
  • Widgets adicionales proporcionados por GOM Tools

Los widgets de GOM Tools están organizados por categorías según la sección del sitio web que desees construir (Header, Footer, Templates, etc.).

GOM Tools – Header & Footer

Para crear elementos relacionados con el pie de página:

  1. Dirígete a la barra lateral izquierda del editor.
  2. Busca la categoría “GOM Tools – Header & Footer”.
  3. Dentro de esta categoría encontrarás dos widgets:
  • Navbar
  • Links List

En esta documentación nos enfocaremos en el widget Links List, ideal para la construcción de listas de navegación en el footer.

Widgets gom Header & footer

Widget Links list

El widget Links List, como su nombre lo indica, permite crear listas de enlaces personalizadas.

Es especialmente útil para:

  • Menús secundarios en el footer
  • Enlaces legales (Política de Privacidad, Términos y Condiciones)
  • Listas de categorías
  • Enlaces rápidos
  • Secciones informativas

Este widget está diseñado para mejorar la navegación interna y la estructura del sitio web.

Header & footer - links list

Configuraciones de Widget Links list

Una vez que agregues el widget Links List a tu diseño, podrás personalizarlo completamente desde el panel lateral de Elementor.

Todos los widgets de Elementor están divididos en dos pestañas principales:

  • Content (Contenido)
  • Style (Estilo)

A continuación, te explicamos cada una de ellas.

Content:

Links

  • Add Item: Agrega un nuevo elemento a la lista de enlaces, permitiendo crear múltiples ítems dentro del mismo componente o copiar el link ya creado presionando el botón que aparece en el lado derecho de la sección con el “Titulo del elemento”..
  • Item text: Define el texto identificador interno del ítem dentro del panel. Se utiliza para organizar y distinguir cada elemento en la lista de edición.
  • Label: Define el texto visible que se mostrará al usuario en el enlace. Es el contenido principal clickeable.
  • Link: Permite establecer la URL de destino del enlace. Acepta rutas internas, URLs externas completas o enlaces personalizados.
  • Icon: Permite seleccionar o cargar un ícono asociado al enlace. El ícono se mostrará junto al texto del elemento según la configuración de estilo.

Style

Links

  • List style: Permite seleccionar el estilo visual de la lista de enlaces (por ejemplo, estilo por defecto, con viñetas u otros formatos disponibles según el sistema).
  • List direction: Define la dirección en la que se distribuyen los elementos de la lista (horizontal o vertical).
  • Horizontal alignment: Permite establecer la alineación horizontal del conjunto de enlaces dentro de su contenedor (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical de los elementos dentro del contenedor (superior, centrado o inferior).
  • Gap: Define el espacio entre los elementos de la lista. Se configura en píxeles (px) y controla la separación entre cada enlace.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor de la lista de enlaces.
  • Border Type: Define el estilo de la línea del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de la lista. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los enlaces y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa la lista de enlaces de otros elementos adyacentes. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la lista. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor de la lista (Default, Hidden, Visible, Auto).

Items

  • Normal / Hover: Permite configurar los estilos de cada ítem de la lista según su estado.
  • Horizontal alignment: Permite establecer la alineación horizontal del contenido interno del ítem (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical del contenido dentro del ítem (superior, centrado o inferior).
  • Width: Define el ancho del ítem en píxeles (px). Controla el tamaño horizontal del elemento dentro de la lista.
  • Height: Define la altura del ítem en píxeles (px). Controla el tamaño vertical del área clickeable.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el ítem.
  • Text color: Define el color del texto del ítem. Puede configurarse mediante selector visual o valores globales del sistema.
  • Typography: Permite configurar las propiedades tipográficas del texto (fuente, tamaño, peso, altura de línea, espaciado y transformación).
  • Border Type: Define el estilo de la línea del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos dentro de la lista. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del ítem. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto).
  • Border Radius: Controla la curvatura de las esquinas del contenedor de la lista. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los enlaces y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa la lista de enlaces de otros elementos adyacentes. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la lista. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor de la lista (Default, Hidden, Visible, Auto).

Icons

  • Normal / Hover: Permite configurar los estilos del ícono asociado al ítem según su estado.
  • Width: Define el ancho del ícono en píxeles (px). Controla el tamaño horizontal del elemento gráfico.
  • Height: Define la altura del ícono en píxeles (px). Controla el tamaño vertical del elemento gráfico.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del ícono.
  • Icon color: Define el color del ícono. Puede configurarse mediante selector visual o valores globales del sistema de diseño.
  • Border Type: Define el estilo de la línea del borde del contenedor del ícono (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del ícono. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el ícono y el borde de su contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ícono de otros elementos dentro del ítem. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del ícono. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools – Header & Footer”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

En esta guía te explicamos todas las funcionalidades disponibles en la sección Theme Template del plugin GOM Tool Elementor Addons, integrado con WordPress y el constructor visual Elementor.

La sección Theme Template permite crear plantillas dinámicas para distintas áreas de tu sitio web, como blog, tienda, páginas de búsqueda, categorías, productos y más.

Acceder a GOM Tool Elementor Addons

Para comenzar:

  1. Dirígete al panel de administración de WordPress.
  2. En la barra lateral izquierda, localiza la opción “GOM Tool Elementor Addons”.
  3. Haz clic para visualizar los módulos disponibles.

Se mostrarán las siguientes opciones:

  • GOM Tool Elementor Addons
     Módulo principal del plugin.
  • Theme Headers
     Módulo donde se muestra la lista de cabeceras creadas.
  • Theme Footers
     Módulo donde se muestra la lista de pies de página creados.
  • Theme Template
     Módulo donde se muestra la lista de plantillas creadas.

Módulo Theme Template

Selecciona la opción:

Theme Template

Serás redirigido al módulo donde se muestra la lista completa de templates creados en tu sitio web.

Opciones Disponibles

En la parte superior del listado encontrarás herramientas de gestión que te permitirán administrar tus plantillas:

  • Bulk Actions: Permite realizar múltiples acciones sobre varios templates al mismo tiempo.
  • Filter: Permite refinar o segmentar la lista según diferentes criterios.
  • Search Theme Template: Permite buscar un template específico de forma rápida y precisa.
  • New Theme Template: Te redirige al módulo para crear una nueva plantilla.

Creación de un Nuevo Template

Paso 1: Crear Template

Dentro del módulo Theme Template:

  1. Dirígete a la parte superior.
  2. Haz clic en el botón “New Theme Template”.
  3. Serás redirigido al módulo de creación.

Seleccionar el Tipo de Template

Antes de publicar la plantilla, debes definir qué tipo de template deseas crear.

Dirígete al campo “Setting”, ubicado en el lado derecho del módulo, y despliega las opciones disponibles.

Entre los tipos de template encontrarás:

  • Search: Plantilla para la página de resultados de búsqueda del sitio.
  • Blog: Define la estructura y apariencia general del blog.
  • Categories: Plantilla específica para páginas de categorías.
  • Tags: Página que muestra publicaciones asociadas a una etiqueta específica.
  • Archives: Listado de publicaciones organizadas por:
    • Fecha (mensual o anual)
    • Categoría
    • Etiqueta
    • Autor
    • Tipo de contenido
  • Single Post: Plantilla individual para artículos o entradas del blog.
  • 404: Página que aparece cuando una URL no existe o ha sido eliminada.

Plantillas WooCommerce (WC)

Si tu sitio utiliza tienda online, también podrás crear plantillas para:

  • WC Shop: Plantilla principal de la tienda.
  • WC Categories: Página de categorías de productos.
  • WC Single Product: Página individual de producto.
  • WC Tags: Productos asociados a una etiqueta específica.
  • WC Order Received: Página de confirmación o “Gracias por tu compra” después de finalizar un pedido.

Configurar Post Attributes

Una vez seleccionado el tipo de template:

  1. Dirígete al campo “Post Attributes”, ubicado en la misma columna del campo “Setting”.
  2. Despliega las opciones disponibles:
  • Elementor Canvas
  • Elementor Full Width
  • GOM Tools Elementor Footer
  • GOM Tools Elementor Full Width
  • GOM Tools Elementor Full Header
  • Theme

Seleccionar la Plantilla Correcta

Debes seleccionar:

GOM Tools Elementor Full Width

Esta opción es necesaria para que el template se muestre correctamente dentro de tu sitio web.

Publicar el Template

Después de configurar:

  1. Asigna un título al template.
  2. Haz clic en el botón “Publicar”.

El template quedará creado correctamente.

Editar el Template con Elementor

Una vez publicado:

  1. Haz clic en “Edit with Elementor”.
  2. Se abrirá el editor visual.
  3. Desde allí podrás diseñar y personalizar la plantilla según tus necesidades.

Podrás estructurar:

  • Layout dinámico
  • Widgets personalizados
  • Contenido dinámico (títulos, imágenes, meta datos)
  • Diseños adaptables para blog o tienda
  • Estructuras optimizadas para conversión

En esta sección te explicamos todas las funciones que ofrecen los widgets incluidos en GOM Tool Elementor Addons, diseñados para ampliar las capacidades del constructor visual Elementor dentro de WordPress.

Estos widgets están organizados por categorías según la funcionalidad o sección del sitio web que deseas construir.

Acceso a los Widgets en Elementor

Una vez que ingresas al editor de Elementor:

  1. Visualizarás una barra lateral izquierda.
  2. Allí encontrarás una lista de elementos disponibles.
  3. Los widgets están divididos en:
    • Widgets nativos de Elementor.
    • Widgets adicionales de GOM Tools.

Los widgets de GOM Tools están organizados en módulos para facilitar su uso y localización.

Categorías de Widgets Incluidos

A continuación, se detallan todas las categorías disponibles dentro de GOM Tools:

  • GOM Tools – General
  • GOM Tools – Banners
  • GOM Tools – Imagen
  • GOM Tools – Carousels
  • GOM Tools – Forms
  • GOM Tools – Post
  • GOM Tools – Custom Post Types
  • GOM Tools – Single Post
  • GOM Tools – WooCommerce
  • GOM Tools – Header & Footer

Widgets gom

Cada categoría contiene widgets específicos que cumplen funciones determinadas dentro del sitio web.

GOM Tools – General

Esta categoría incluye widgets básicos y dinámicos para contenido general:

  • Title – Permite insertar títulos personalizados.
  • Links List – Crea listas de enlaces organizadas.
  • Comments – Muestra el sistema de comentarios.
  • Type Write – Efecto de escritura animada.
  • Category Title – Muestra el título dinámico de una categoría.
  • Tag Title – Muestra el título dinámico de una etiqueta.

Widgets gom general

Ideal para páginas informativas, blogs y estructuras dinámicas.

GOM Tools – Banners

Incluye:

  • Banners Carousel – Permite crear carruseles visuales de banners promocionales o informativos.

Widgets gom banners

Perfecto para destacar promociones, servicios o llamados a la acción.

GOM Tools – Imagen

Enfocado en elementos visuales:

  • Images Carousel – Carrusel de imágenes dinámico.
  • Images Gallery – Galería estructurada de imágenes.

Widgets gom images

Optimizado para portafolios, galerías y secciones visuales.

GOM Tools – Carousels

Widgets avanzados tipo slider:

  • Banners Carousel –Permite crear carruseles visuales de banners promocionales o informativos.
  • Cards Carousel – Carrusel de tarjetas que muestra contenido (texto, imágenes, botones) en formato deslizante.
  • Images Carousel – Carrusel enfocado en mostrar únicamente imágenes que se pueden deslizar horizontalmente.
  • WC: Categories Carousel – Carrusel de categorías de WooCommerce que permite navegar visualmente entre diferentes categorías de productos.
  • WC: Products Carousel – Carrusel de productos de WooCommerce que muestra artículos (con imagen, precio, etc.) en formato deslizable.

Widgets gom carousels

Permite mostrar contenido desplazable optimizado para conversión y experiencia de usuario.

GOM Tools – Forms

Widgets orientados a formularios y búsquedas:

  • Search Form – Formulario que permite a los usuarios buscar contenido dentro del sitio web.
  • Contact Form 7 – Plugin/formulario que permite crear y gestionar formularios de contacto personalizados.
  • WC: Search Form – Formulario de búsqueda específico para encontrar productos dentro de WooCommerce.
  • WC: Products Filters – Filtros que permiten a los usuarios refinar productos por categorías, precio, atributos u otras características.

Widgets gom forms

Especialmente útil para sitios corporativos y tiendas online.

GOM Tools – Post

Widgets relacionados con publicaciones y contenido dinámico:

  • Posts – Muestra una lista de entradas (posts) del blog.
  • Posts Categories – Lista o menú de categorías de las entradas.
  • Posts Tags – Muestra las etiquetas asociadas a los posts.
  • Category Title – Muestra el título de la categoría actual.
  • Tag Title – Muestra el título de la etiqueta actual.
  • CPT Categories – Muestra categorías de un tipo de contenido personalizado (Custom Post Type).
  • WC: Products – Muestra una lista de productos de la tienda.
  • WC: Cart – Muestra el carrito de compras del usuario.
  • WC: Checkout – Página/formulario para finalizar la compra.
  • WC: My Account – Panel donde el usuario gestiona su cuenta y pedidos.
  • WC: Order Received – Página de confirmación tras completar un pedido.
  • WC: Single Product Title – Muestra el nombre del producto.
  • WC: Single Product Rating – Muestra la valoración del producto (estrellas).
  • WC: Single Product Image – Muestra la imagen principal del producto.
  • WC: Single Product Add to Cart Form – Formulario para añadir el producto al carrito.
  • WC: Single Product Price – Muestra el precio del producto.
  • WC: Single Product SKU – Muestra el código SKU del producto.
  • WC: Single Product Categories – Muestra las categorías a las que pertenece el producto.

Widgets gom posts

Permite integrar contenido dinámico del blog y la tienda.

GOM Tools – Custom Post Types

Diseñado para sitios que utilizan tipos de contenido personalizados:

  • CPT Categories – Muestra las categorías asociadas a un tipo de contenido personalizado (Custom Post Type).
  • CPT Single Post: Title – Muestra el título de una entrada individual de un CPT.
  • CPT Single Post: Terms – Muestra las taxonomías (categorías, etiquetas u otros términos) del CPT.
  • CPT Single Post: Custom Fields – Muestra campos personalizados (metadatos) asociados a la entrada del CPT.

Widgets gom custom posts types

Ideal para directorios, portafolios o estructuras avanzadas.

GOM Tools – Single Post

Widgets específicos para plantillas individuales de entradas:

  • Single Post: Image – Muestra la imagen destacada del post.
  • Single Post: Title – Muestra el título del post.
  • Single Post: Content – Muestra el contenido completo del post.
  • Single Post: Categories – Muestra las categorías a las que pertenece el post.
  • Single Post: Related Posts – Muestra publicaciones relacionadas con el post actual.
  • Single Post: Author – Muestra el autor del post.
  • Single Post: Published Date – Muestra la fecha de publicación del post.
  • Comments – Muestra la sección de comentarios del post.
  • CPT Single Post: Title – Muestra el título de una entrada individual del CPT.
  • CPT Single Post: Terms – Muestra las taxonomías asociadas al CPT.
  • CPT Single Post: Custom Fields – Muestra los campos personalizados de la entrada del CPT.

Widgets gom single post

Permite construir layouts dinámicos para artículos individuales.

GOM Tools – WooCommerce

Categoría especializada en tienda online mediante WooCommerce:

  • Category Title – Muestra el título de la categoría actual.
  • Tag Title – Muestra el título de la etiqueta actual.
  • WC: Products – Muestra una lista de productos de la tienda.
  • WC: Categories Carousel – Carrusel que muestra categorías de productos.
  • WC: Products Carousel – Carrusel deslizable de productos.
  • WC: Search Form – Formulario para buscar productos en la tienda.
  • WC: Products Filters – Permite filtrar productos por precio, categoría, atributos, etc.
  • WC: Cart – Muestra el carrito de compras del usuario.
  • WC: Checkout – Formulario para completar la compra.
  • WC: My Account – Panel donde el usuario gestiona su cuenta y pedidos.
  • WC: Order Received – Página de confirmación tras realizar un pedido.
  • WC: Notices – Muestra mensajes del sistema (errores, avisos, confirmaciones).
  • WC: Single Product Title – Muestra el nombre del producto.
  • WC: Single Product Rating – Muestra la valoración del producto.
  • WC: Single Product Image – Muestra la imagen del producto.
  • WC: Single Product Tabs – Muestra pestañas con información adicional (descripción, reviews, etc.).
  • WC: Single Product Add to Cart Form – Formulario para añadir el producto al carrito.
  • WC: Single Product Price – Muestra el precio del producto.
  • WC: Single Product SKU – Muestra el código SKU del producto.
  • WC: Single Product Categories – Muestra las categorías del producto.

Widgets gom woocommerce

Estos widgets permiten diseñar completamente la experiencia de compra.

GOM Tools – Header & Footer

Incluye widgets para la estructura global del sitio:

  • Navbar – Barra de navegación principal del sitio (Header) con enlaces a secciones importantes.
  • Links List – Lista de enlaces organizados que dirigen a diferentes páginas o recursos.

Widgets gom Header & footer

Permiten crear cabeceras y pies de página personalizados y totalmente editables.

Title

El widget Title permite añadir encabezados personalizados en cualquier parte del diseño.

Es ideal para:

  • Títulos de sección
  • Encabezados principales (H1)
  • Subtítulos (H2, H3, H4…)
  • Bloques destacados
  • Títulos dinámicos dentro de templates

Este widget ofrece control total sobre el contenido y la apariencia del texto.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Title dentro de la categoría correspondiente.
  3. Arrastra el widget Title hacia el área de diseño.
  4. Colócalo en la sección donde deseas mostrar el encabezado.

Configuración del Widget Title

Una vez agregado el widget al diseño, podrás personalizarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, su configuración está dividida en dos pestañas principales:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Title

  • HTML Tag: Permite seleccionar la etiqueta HTML que se asignará al título (H1, H2, H3, etc.). Define la jerarquía semántica del contenido y su importancia estructural para SEO y accesibilidad.
  • Title text: Define el texto visible del título. Es el contenido principal que se mostrará en el encabezado configurado.

Nota: En la pestaña Content, dentro del campo Title Text, puedes colocar la etiqueta HTML <strong> alrededor de las palabras que deseas modificar para que tengan un estilo diferente al resto, el cual podrás editar en la sección de style.

Style:

  Title

  • Width: Define el ancho del contenedor del título en porcentaje respecto a su elemento padre.
  • Height: Establece la altura fija del contenedor del título en píxeles.
  • Horizontal alignment: Alinea el contenido del título horizontalmente dentro de su contenedor (izquierda, centro, derecha o justificado según opciones disponibles).
  • Text color: Define el color del texto del título.
  • Typography: Permite configurar tipografía completa del título (fuente, tamaño, peso, estilo, transformación, espaciado, interlineado, etc.).
  • Background Type: Define el tipo de fondo del contenedor del título (color sólido o fondo alternativo según opciones disponibles).
  • Blur: Aplica un efecto de desenfoque al fondo del contenedor del título.
  • Border Type: Define el tipo de borde del contenedor (none, solid, dashed, etc., según opciones del sistema).
  • Border radius: Define el redondeo de las esquinas del contenedor. Puede configurarse de forma individual (top, right, bottom, left) o vinculada.
  • Padding: Define el espacio interno entre el contenido del título y el borde del contenedor. Puede configurarse por lado o de forma vinculada.
  • Margin: Define el espacio externo entre el contenedor del título y otros elementos. Puede configurarse por lado o de forma vinculada.
  • Box Shadow: Permite aplicar una sombra al contenedor del título (desplazamiento, desenfoque, color, extensión).
  • Overflow: Controla cómo se comporta el contenido si excede el tamaño del contenedor (visible, hidden, scroll, etc., según configuración).
  • Z-index: Define el nivel de superposición del contenedor respecto a otros elementos. Un valor mayor lo posiciona por encima de elementos con menor valor.

 Title strong

  • Background clip: Define cómo se recorta el fondo respecto al texto (por ejemplo, fondo aplicado al texto o al contenedor completo, según configuración disponible).
  • Text color: Define el color del texto que esté marcado como strong dentro del título.
  • Typography: Permite configurar la tipografía específica del texto en negrita (fuente, tamaño, peso, estilo, espaciado, transformación, interlineado, etc.).
  • Background Type: Define el tipo de fondo aplicado únicamente al texto strong (color sólido u opción alternativa disponible).
  • Blur: Aplica un efecto de desenfoque al fondo del texto strong.
  • Border Type: Define el tipo de borde aplicado al texto strong (none, solid, dashed, etc., según opciones del sistema).
  • Border radius: Define el redondeo de las esquinas del contenedor del texto strong. Puede configurarse por lado o de forma vinculada.
  • Padding: Define el espacio interno entre el texto strong y su borde/fondo. Puede configurarse individualmente o de forma vinculada.
  • Margin: Define el espacio externo alrededor del bloque del texto strong. Puede configurarse por lado o de forma vinculada.
  • Box Shadow: Permite aplicar una sombra al bloque del texto strong (desplazamiento, desenfoque, color, extensión).
  • Overflow: Controla el comportamiento del contenido si excede su contenedor (visible, hidden, scroll, etc.).
  • Z-index: Define el nivel de superposición del texto strong respecto a otros elementos. Un valor mayor lo posiciona por encima de elementos con menor valor.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools“, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Links List

El widget Links List permite insertar una lista personalizada de enlaces dentro de cualquier sección del sitio.

Es ideal para:

  • Enlaces del footer
  • Menús informativos
  • Listas de recursos
  • Enlaces rápidos
  • Secciones de navegación secundaria

Ofrece control total sobre el contenido y la apariencia de cada enlace.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Links List dentro de la categoría correspondiente.
  3. Arrastra el widget Links List al área de diseño.
  4. Colócalo en la sección donde deseas mostrar la lista.

Configuración del Widget Links List

Una vez agregado el widget al diseño, podrás personalizarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, su configuración está dividida en dos pestañas principales:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

Links

  • Add Item: Agrega un nuevo elemento a la lista de enlaces, permitiendo crear múltiples ítems dentro del mismo componente o copiar el link ya creado presionando el botón que aparece en el lado derecho de la sección con el “Titulo del elemento”..
  • Item text: Define el texto identificador interno del ítem dentro del panel. Se utiliza para organizar y distinguir cada elemento en la lista de edición.
  • Label: Define el texto visible que se mostrará al usuario en el enlace. Es el contenido principal clickeable.
  • Link: Permite establecer la URL de destino del enlace. Acepta rutas internas, URLs externas completas o enlaces personalizados.
  • Icon: Permite seleccionar o cargar un ícono asociado al enlace. El ícono se mostrará junto al texto del elemento según la configuración de estilo.

Style

Links

  • List style: Permite seleccionar el estilo visual de la lista de enlaces (por ejemplo, estilo por defecto, con viñetas u otros formatos disponibles según el sistema).
  • List direction: Define la dirección en la que se distribuyen los elementos de la lista (horizontal o vertical).
  • Horizontal alignment: Permite establecer la alineación horizontal del conjunto de enlaces dentro de su contenedor (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical de los elementos dentro del contenedor (superior, centrado o inferior).
  • Gap: Define el espacio entre los elementos de la lista. Se configura en píxeles (px) y controla la separación entre cada enlace.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor de la lista de enlaces.
  • Border Type: Define el estilo de la línea del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de la lista. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los enlaces y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa la lista de enlaces de otros elementos adyacentes. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la lista. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor de la lista (Default, Hidden, Visible, Auto).

Items

  • Normal / Hover: Permite configurar los estilos de cada ítem de la lista según su estado.
  • Horizontal alignment: Permite establecer la alineación horizontal del contenido interno del ítem (izquierda, centro, derecha o distribución).
  • Vertical alignment: Define la alineación vertical del contenido dentro del ítem (superior, centrado o inferior).
  • Width: Define el ancho del ítem en píxeles (px). Controla el tamaño horizontal del elemento dentro de la lista.
  • Height: Define la altura del ítem en píxeles (px). Controla el tamaño vertical del área clickeable.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el ítem.
  • Text color: Define el color del texto del ítem. Puede configurarse mediante selector visual o valores globales del sistema.
  • Typography: Permite configurar las propiedades tipográficas del texto (fuente, tamaño, peso, altura de línea, espaciado y transformación).
  • Border Type: Define el estilo de la línea del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos dentro de la lista. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del ítem. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto).
  • Border Radius: Controla la curvatura de las esquinas del contenedor de la lista. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre los enlaces y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa la lista de enlaces de otros elementos adyacentes. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la lista. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor de la lista (Default, Hidden, Visible, Auto).

Icons

  • Normal / Hover: Permite configurar los estilos del ícono asociado al ítem según su estado.
  • Width: Define el ancho del ícono en píxeles (px). Controla el tamaño horizontal del elemento gráfico.
  • Height: Define la altura del ícono en píxeles (px). Controla el tamaño vertical del elemento gráfico.
  • Background Type: Permite elegir entre un color sólido, degradado o una imagen de fondo para el contenedor del ícono.
  • Icon color: Define el color del ícono. Puede configurarse mediante selector visual o valores globales del sistema de diseño.
  • Border Type: Define el estilo de la línea del borde del contenedor del ícono (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del ícono. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el ícono y el borde de su contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el ícono de otros elementos dentro del ítem. Puede configurarse por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del ícono. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Comments

El widget Comments permite insertar el sistema de comentarios del sitio dentro de cualquier diseño creado con Elementor.

Es ideal para:

  • Plantillas de Single Post
  • Páginas de blog
  • Secciones donde se permita interacción de usuarios

Este widget muestra automáticamente los comentarios asociados al contenido actual.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Comments dentro de la categoría correspondiente.
  3. Arrastra el widget Comments al área de diseño.
  4. Ubícalo en la sección deseada del template.

Configuración del Widget Comments

Una vez agregado el widget al diseño, podrás personalizarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, su configuración se divide en dos pestañas principales:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Comments

  • Title HTML Tag: Permite definir la etiqueta HTML que utilizará el título de la sección de comentarios (por ejemplo, H1, H2, H3, etc.).

  Comments form

  • Form title HTML tag: Permite definir la etiqueta HTML que utilizará el título del formulario de comentarios (por ejemplo, H1, H2, H3, etc.).

Style

  Comments

  • Background color: Define el color de fondo de la sección de comentarios.
  • Border: Permite configurar el grosor del borde de la sección. Puede ajustarse de forma individual (Top, Right, Bottom, Left) o de manera vinculada.
  • Border radius: Define el redondeo de las esquinas del contenedor de comentarios. Puede configurarse por lado o de forma vinculada.
  • Border color: Permite seleccionar el color del borde aplicado a la sección de comentarios.
  • Padding: Define el espacio interno entre el contenido (comentarios) y el borde del contenedor. Puede configurarse individualmente o de forma vinculada.
  • Margin: Define el espacio externo alrededor del contenedor de comentarios respecto a otros elementos. Puede configurarse por lado o de forma vinculada.

  Title

  • Background color: Define el color de fondo del título de la sección de comentarios.
  • Text color: Define el color del texto del título.
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde del título. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del contenedor del título. Puede configurarse por lado o de manera vinculada.
  • Border color: Define el color aplicado al borde del título.
  • Padding: Define el espacio interno entre el texto del título y su borde. Puede configurarse por lado o de forma vinculada.
  • Margin: Define el espacio externo alrededor del título respecto a otros elementos. Puede configurarse por lado o de forma vinculada.

  Comments list

  • Comments list style: Permite seleccionar el estilo visual de la lista de comentarios (según las opciones predeterminadas del sistema).
  • Background color: Define el color de fondo del contenedor de la lista de comentarios.
  • Border: Permite configurar el grosor del borde de la lista de comentarios. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del contenedor de la lista. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde de la lista de comentarios.
  • Padding: Define el espacio interno entre los comentarios y el borde del contenedor. Puede configurarse individualmente o de forma vinculada.
  • Margin: Define el espacio externo alrededor de la lista de comentarios respecto a otros elementos. Puede configurarse por lado o de forma vinculada.

Comments list items

  • Background color: Define el color de fondo de cada ítem individual dentro de la lista de comentarios.
  • Text color: Define el color del texto dentro de cada comentario.
  • Typography: Permite configurar la tipografía del contenido de cada comentario (fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde de cada ítem. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas de cada comentario. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color del borde aplicado a cada ítem de comentario.
  • Padding: Define el espacio interno entre el contenido del comentario y su borde. Puede configurarse por lado o de forma vinculada.
  • Margin: Define el espacio externo alrededor de cada ítem respecto a otros comentarios. Puede configurarse por lado o de forma vinculada.

  Avatar

  • Avatar width: Define el ancho del avatar en píxeles.
  • Avatar height: Define la altura del avatar en píxeles.
  • Background color: Define el color de fondo del contenedor del avatar.
  • Border: Permite configurar el grosor del borde del avatar. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del avatar. Un valor alto permite crear forma circular si ancho y alto son iguales.
  • Border color: Define el color del borde aplicado al avatar.
  • Padding: Define el espacio interno entre la imagen del avatar y su borde.
  • Margin: Define el espacio externo alrededor del avatar respecto a otros elementos del comentario. Puede configurarse por lado o de forma vinculada.

  Comments list links

  • Normal / Hover: Permite configurar los estilos del enlace en estado normal y en estado hover (cuando el cursor pasa sobre el enlace).
  • Background color: Define el color de fondo del enlace dentro del comentario.
  • Text color: Define el color del texto del enlace.
  • Typography: Permite configurar la tipografía del enlace (fuente, tamaño, peso, estilo, transformación, espaciado, etc.).
  • Border: Permite configurar el grosor del borde del enlace. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del enlace. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color del borde aplicado al enlace.
  • Padding: Define el espacio interno entre el texto del enlace y su borde.
  • Margin: Define el espacio externo alrededor del enlace respecto a otros elementos dentro del comentario. Puede configurarse por lado o de forma vinculada.

  Replay buttons

  • Normal / Hover: Permite configurar los estilos del botón de respuesta en estado normal y en estado hover (cuando el cursor pasa sobre el botón).
  • Background color: Define el color de fondo del botón de respuesta.
  • Text color: Define el color del texto del botón.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, transformación, espaciado, etc.).
  • Border: Permite configurar el grosor del borde del botón. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del botón. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del botón.
  • Padding: Define el espacio interno entre el texto del botón y su borde.
  • Margin: Define el espacio externo alrededor del botón respecto a otros elementos dentro del comentario. Puede configurarse por lado o de forma vinculada.

  Comments sub list

  • Comments sub list style: Permite seleccionar el estilo visual de la sublista de comentarios (respuestas anidadas), según las opciones predeterminadas del sistema.
  • Background color: Define el color de fondo del contenedor de la sublista de comentarios.
  • Border : Permite configurar el grosor del borde de la sublista. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del contenedor de la sublista. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde de la sublista de comentarios.
  • Padding: Define el espacio interno entre los comentarios anidados y el borde del contenedor.
  • Margin: Define el espacio externo alrededor de la sublista respecto a otros elementos del comentario principal. Puede configurarse por lado o de forma vinculada.

  Comments sub list items

  • Background color: Define el color de fondo de cada comentario dentro de la sublista (respuestas anidadas).
  • Text color: Define el color del texto del contenido de cada respuesta.
  • Typography: Permite configurar la tipografía del texto de las respuestas (fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde de cada ítem de la sublista. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas de cada respuesta anidada. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde de cada comentario dentro de la sublista.
  • Padding: Define el espacio interno entre el contenido de la respuesta y su borde.
  • Margin: Define el espacio externo alrededor de cada respuesta respecto a otros elementos dentro del hilo de comentarios. Puede configurarse por lado o de forma vinculada.

  Comments sub list avatar

  • Avatar width: Define el ancho del avatar en las respuestas anidadas.
  • Avatar height: Define la altura del avatar en las respuestas anidadas.
  • Background color: Define el color de fondo del contenedor del avatar en la sublista.
  • Border: Permite configurar el grosor del borde del avatar. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del avatar. Si el ancho y alto son iguales, un valor alto permite hacerlo circular.
  • Border color: Define el color aplicado al borde del avatar.
  • Padding: Define el espacio interno entre la imagen del avatar y su borde.
  • Margin: Define el espacio externo alrededor del avatar dentro del comentario anidado. Puede configurarse por lado o de forma vinculada.

  Comments sub list links

  • Normal / Hover: Permite configurar los estilos del enlace dentro de comentarios anidados en estado normal y en estado hover (cuando el cursor pasa sobre el enlace).
  • Background color: Define el color de fondo del enlace dentro de la sublista de comentarios.
  • Text color: Define el color del texto del enlace en la sublista.
  • Typography: Permite configurar la tipografía del enlace (fuente, tamaño, peso, estilo, transformación, espaciado, interlineado, etc.).
  • Border: Permite configurar el grosor del borde del enlace. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del enlace. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del enlace.
  • Padding: Define el espacio interno entre el texto del enlace y su borde.
  • Margin: Define el espacio externo alrededor del enlace respecto a otros elementos dentro del comentario anidado. Puede configurarse por lado o de forma vinculada.

  Sub list replay buttons

  • Normal / Hover: Permite configurar los estilos del botón de respuesta dentro de comentarios anidados en estado normal y en estado hover (cuando el cursor pasa sobre el botón).
  • Background color: Define el color de fondo del botón de respuesta en la sublista.
  • Text color: Define el color del texto del botón.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, transformación, espaciado, interlineado, etc.).
  • Border: Permite configurar el grosor del borde del botón. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del botón. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del botón.
  • Padding: Define el espacio interno entre el texto del botón y su borde.
  • Margin: Define el espacio externo alrededor del botón dentro del comentario anidado. Puede configurarse por lado o de forma vinculada.

  Comments form

  • Background color: Define el color de fondo del contenedor del formulario de comentarios.
  • Border: Permite configurar el grosor del borde del formulario. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del contenedor del formulario. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del formulario.
  • Padding: Define el espacio interno entre los campos del formulario y el borde del contenedor.
  • Margin: Define el espacio externo alrededor del formulario respecto a otros elementos de la página. Puede configurarse por lado o de forma vinculada.

  Form title

  • Background color: Define el color de fondo del título del formulario de comentarios.
  • Text color: Define el color del texto del título.
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde del título. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del contenedor del título. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del título.
  • Padding: Define el espacio interno entre el texto del título y su borde.
  • Margin: Define el espacio externo alrededor del título respecto a otros elementos del formulario. Puede configurarse por lado o de forma vinculada.

  Form Labels

  • Background color: Define el color de fondo aplicado a las etiquetas (labels) del formulario.
  • Text color: Define el color del texto de las etiquetas.
  • Typography: Permite configurar la tipografía de las etiquetas (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde de las etiquetas. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas de las etiquetas. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde de las etiquetas.
  • Padding: Define el espacio interno entre el texto de la etiqueta y su borde.
  • Margin: Define el espacio externo alrededor de cada etiqueta respecto a otros campos del formulario. Puede configurarse por lado o de forma vinculada.

  Form fields

  • Normal / Focus: Permite configurar los estilos de los campos del formulario en estado normal y en estado focus (cuando el usuario hace clic o activa el campo).
  • Background color: Define el color de fondo del campo de entrada.
  • Text color: Define el color del texto ingresado en el campo.
  • Placeholder color: Define el color del texto placeholder (texto de ayuda que aparece cuando el campo está vacío).
  • Typography: Permite configurar la tipografía del contenido del campo (fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde del campo. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del campo. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del campo.
  • Padding: Define el espacio interno entre el texto del campo y su borde.
  • Margin: Define el espacio externo alrededor del campo respecto a otros elementos del formulario. Puede configurarse por lado o de forma vinculada.

  Form Checkbox/Radio

  • Background color: Define el color de fondo del campo checkbox o radio.
  • Text color: Define el color del texto asociado al campo (si aplica en el diseño).
  • Placeholder color: Define el color del texto placeholder cuando el campo lo permita (según configuración o tipo de campo).
  • Typography: Permite configurar la tipografía asociada al campo (fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde del campo checkbox o radio. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del campo. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del campo.
  • Padding: Define el espacio interno dentro del área del campo (si el diseño lo permite).
  • Margin: Define el espacio externo alrededor del campo respecto a otros elementos del formulario. Puede configurarse por lado o de forma vinculada.

  Form Checkbox/Radio labels

  • Background color: Define el color de fondo aplicado a las etiquetas de los campos checkbox y radio.
  • Text color: Define el color del texto de las etiquetas asociadas a checkbox y radio.
  • Border: Permite configurar el grosor del borde de las etiquetas. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas de las etiquetas. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde de las etiquetas de checkbox y radio.
  • Padding: Define el espacio interno entre el texto de la etiqueta y su borde.
  • Margin: Define el espacio externo alrededor de cada etiqueta respecto a otros elementos del formulario. Puede configurarse por lado o de forma vinculada.

  Form submit button

  • Normal / Hover: Permite configurar los estilos del botón de envío en estado normal y en estado hover (cuando el cursor pasa sobre el botón).
  • Background color: Define el color de fondo del botón de envío.
  • Text color: Define el color del texto del botón.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Border: Permite configurar el grosor del borde del botón. Puede ajustarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Border radius: Define el redondeo de las esquinas del botón. Puede configurarse por lado o de forma vinculada.
  • Border color: Define el color aplicado al borde del botón.
  • Padding: Define el espacio interno entre el texto del botón y su borde.
  • Margin: Define el espacio externo alrededor del botón respecto a otros elementos del formulario. Puede configurarse por lado o de forma vinculada.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Type Write

El widget Type Write permite mostrar texto con un efecto de escritura progresiva (como si se estuviera tecleando en tiempo real).

Es ideal para:

  • Secciones principales (Hero)
  • Frases promocionales
  • Presentaciones dinámicas
  • Mensajes llamativos
  • Landing pages

Este efecto mejora el impacto visual y capta la atención del usuario.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Type Write dentro de la categoría correspondiente.
  3. Arrastra el widget Type Write al área de diseño.
  4. Colócalo en la sección donde deseas mostrar el efecto.

Configuración del Widget Type Write

Una vez agregado el widget, podrás personalizarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, su configuración se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Type Write

  • Loop: Activa o desactiva la repetición automática del efecto de escritura. Si está en “Yes”, el texto se reproduce en bucle continuo.
  • Cursor: Permite definir el estilo del cursor que acompaña el efecto de escritura (por ejemplo, barra vertical, guion, etc.).
  • Character write delay: Define el tiempo de retraso (en milisegundos) entre la aparición de cada carácter durante el efecto de escritura.
  • Item: Contenedor que agrupa cada texto que participará en la animación.
  • Type write text: Nombre interno del ítem dentro de la lista.
  • Text: Define el contenido que se mostrará con el efecto de escritura.
  • Text url: Permite asignar un enlace al texto animado.
  • Pause for (ms): Define el tiempo de pausa (en milisegundos) después de que el texto se haya escrito completamente antes de continuar con el siguiente ítem o reiniciar.
  • Delete characters: Define cuántos caracteres se eliminan durante la animación de borrado antes de mostrar el siguiente texto.
  • Add Item: Permite añadir un nuevo texto a la secuencia de animación.

Style

  Container

  • Alignment: Define la alineación horizontal del contenido dentro del contenedor (izquierda, centro o derecha, según las opciones disponibles).
  • Background Type: Permite seleccionar el tipo de fondo del contenedor (color sólido, degradado, imagen u otras opciones disponibles en el sistema).
  • Border Type: Define el tipo de borde aplicado al contenedor (none, solid, dashed, etc., según opciones disponibles).
  • Border radius (px): Define el redondeo de las esquinas del contenedor. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Padding (px): Define el espacio interno entre el contenido y el borde del contenedor. Puede configurarse por lado o de forma vinculada.
  • Margin (px): Define el espacio externo alrededor del contenedor respecto a otros elementos. Puede configurarse por lado o de forma vinculada.
  • Box Shadow: Permite aplicar una sombra al contenedor (desplazamiento horizontal y vertical, desenfoque, expansión y color).
  • Overflow: Controla el comportamiento del contenido cuando excede los límites del contenedor (visible, hidden, scroll, etc., según configuración).

  Text

  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Color: Define el color del texto.
  • Background Type: Permite seleccionar el tipo de fondo aplicado al bloque de texto (color sólido, degradado, imagen u otras opciones disponibles).
  • Border Type: Define el tipo de borde aplicado al bloque de texto (none, solid, dashed, etc., según opciones del sistema).
  • Border radius: Define el redondeo de las esquinas del bloque de texto. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Padding: Define el espacio interno entre el texto y su borde.
  • Margin: Define el espacio externo alrededor del bloque de texto respecto a otros elementos.
  • Box Shadow: Permite aplicar una sombra al bloque de texto (desplazamiento, desenfoque, extensión y color).
  • Overflow: Controla el comportamiento del contenido si el texto excede los límites del contenedor (visible, hidden, scroll, etc.).

  Cursor

  • Typography: Permite configurar la tipografía aplicada al cursor del efecto (tamaño, peso, estilo, etc., si el cursor es un carácter tipográfico).
  • Color: Define el color del cursor.
  • Background Type: Permite seleccionar el tipo de fondo aplicado al área del cursor (color sólido, degradado, imagen u otras opciones disponibles).
  • Border Type: Define el tipo de borde aplicado al cursor (none, solid, dashed, etc., según configuración).
  • Border radius: Define el redondeo de las esquinas del contenedor del cursor. Puede configurarse por lado o de forma vinculada.
  • Padding: Define el espacio interno alrededor del cursor dentro de su contenedor.
  • Margin: Define el espacio externo alrededor del cursor respecto al texto u otros elementos.
  • Box Shadow: Permite aplicar una sombra al cursor (desplazamiento, desenfoque, extensión y color).
  • Overflow: Controla el comportamiento del cursor si excede los límites de su contenedor (visible, hidden, scroll, etc.).

  Links

  • Normal / Hover: Permite configurar los estilos del enlace en estado normal y en estado hover (cuando el cursor pasa sobre el enlace).
  • Background Type: Permite seleccionar el tipo de fondo aplicado al enlace (color sólido, degradado, imagen u otras opciones disponibles).
  • Typography: Permite configurar la tipografía del enlace (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Text color: Define el color del texto del enlace.
  • Border Type: Define el tipo de borde aplicado al enlace (none, solid, dashed, etc., según opciones disponibles).
  • Border radius: Define el redondeo de las esquinas del enlace. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Padding: Define el espacio interno entre el texto del enlace y su borde.
  • Margin: Define el espacio externo alrededor del enlace respecto a otros elementos.
  • Box Shadow: Permite aplicar una sombra al enlace (desplazamiento, desenfoque, extensión y color).
  • Overflow: Controla el comportamiento del contenido si el enlace excede los límites de su contenedor (visible, hidden, scroll, etc.).

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Category Title

El widget Category Title muestra automáticamente el nombre de la categoría que el usuario está visualizando.

Es ideal para:

  • Plantillas de categorías del blog
  • Páginas de archivo
  • Templates dinámicos
  • Secciones donde se requiera el nombre de la categoría actual

El contenido se actualiza de forma automática según la categoría activa.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Category Title dentro de la categoría correspondiente.
  3. Arrastra el widget Category Title al área de diseño.
  4. Ubícalo dentro de la plantilla de categoría o archivo.

Configuración del Widget Category Title

Una vez agregado el widget, podrás configurarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Title

  • HTML Tag: Permite seleccionar la etiqueta HTML del título (H1, H2, H3, etc.), definiendo su jerarquía semántica dentro de la estructura del documento y su impacto en SEO y accesibilidad.
  • Prepended text: Define el texto que aparecerá antes del título principal. Se muestra como contenido adicional previo al texto central.
  • Appended text: Define el texto que aparecerá después del título principal. Se utiliza como complemento o extensión del contenido del título.

Style

  Title

  • Alignment: Define la alineación horizontal del título (izquierda, centro o derecha).
  • Background Type: Permite seleccionar el tipo de fondo aplicado al título (color sólido, degradado, imagen u otras opciones disponibles).
  • Text color: Define el color del texto del título.
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Border Type: Define el tipo de borde aplicado al título (none, solid, dashed, etc., según opciones disponibles).
  • Border radius: Define el redondeo de las esquinas del contenedor del título. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Padding: Define el espacio interno entre el texto del título y su borde.
  • Margin: Define el espacio externo alrededor del título respecto a otros elementos de la página. Puede configurarse por lado o de forma vinculada.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Tag Title

El widget Tag Title muestra automáticamente el nombre de la etiqueta que el usuario está visualizando.

Es ideal para:

  • Plantillas de etiquetas del blog
  • Páginas de archivo por etiquetas
  • Templates dinámicos
  • Secciones donde se requiera el nombre de la etiqueta actual

El contenido se actualiza automáticamente según la etiqueta activa.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Tag Title dentro de la categoría correspondiente.
  3. Arrastra el widget Tag Title al área de diseño.
  4. Ubícalo dentro de la plantilla de etiqueta o archivo.

Configuración del Widget Tag Title

Una vez agregado el widget, podrás configurarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

Title

  • HTML Tag: Permite seleccionar la etiqueta HTML del título (H1, H2, H3, etc.), definiendo su jerarquía semántica dentro de la estructura del documento y su impacto en SEO y accesibilidad.
  • Prepended text: Define el texto que aparecerá antes del título principal. Se muestra como contenido adicional previo al texto central.
  • Appended text: Define el texto que aparecerá después del título principal. Se utiliza como complemento o extensión del contenido del título.

Style

  Title

  • Alignment: Define la alineación horizontal del título (izquierda, centro o derecha).
  • Background Type: Permite seleccionar el tipo de fondo aplicado al título (color sólido, degradado, imagen u otras opciones disponibles).
  • Text color: Define el color del texto del título.
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo, transformación, interlineado, espaciado, etc.).
  • Border Type: Define el tipo de borde aplicado al título (none, solid, dashed, etc., según opciones disponibles).
  • Border radius: Define el redondeo de las esquinas del contenedor del título. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma vinculada.
  • Padding: Define el espacio interno entre el texto del título y su borde.
  • Margin: Define el espacio externo alrededor del título respecto a otros elementos de la página. Puede configurarse por lado o de forma vinculada.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Banners Carousel

El widget Banners Carousel permite mostrar múltiples banners en formato carrusel deslizante.

Es ideal para:

  • Promociones destacadas
    Ofertas especiales
  • Anuncios informativos
  • Presentación de productos o servicios
  • Secciones principales del sitio

Ofrece una experiencia visual dinámica e interactiva.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Banners Carousel dentro de la categoría correspondiente.
  3. Arrastra el widget Banners Carousel al área de diseño.
  4. Ubícalo en la sección donde deseas mostrar el carrusel.

Configuración del Widget Banners Carousel

Una vez agregado el widget, podrás configurarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Banners

  • Item: Contenedor individual que agrupa la configuración de cada banner.
  • Item title: Nombre interno del banner dentro de la lista. No necesariamente es visible en el frontend.
  • Skip image lazyload: Permite desactivar la carga diferida (lazy load) de la imagen. Si está en “No”, la imagen se cargará bajo comportamiento estándar.
  • Default image: Imagen principal del banner. Se utiliza si no se define una versión específica por dispositivo.
  • Desktop image: Imagen específica para mostrarse en dispositivos de escritorio.
  • Tablet image: Imagen específica para mostrarse en dispositivos tablet.
  • Mobile image: Imagen específica para mostrarse en dispositivos móviles.
  • Image alt text: Texto alternativo de la imagen para accesibilidad y optimización SEO.
  • Title: Texto principal del banner que se mostrará superpuesto a la imagen.
  • Title Tag: Define la etiqueta HTML del título (H1, H2, H3, etc.), afectando la jerarquía semántica.
  • Content: Área de texto enriquecido del banner. Permite agregar contenido con formato (párrafos, negritas, cursivas, enlaces, listas, etc.).
  • CTA: Campo para definir el enlace principal del botón de llamada a la acción.
  • Label: Texto visible del botón CTA.
  • CTA icon: Permite añadir un icono visual al botón CTA.
  • Add Item: Permite agregar un nuevo banner a la lista.

  Carousel

  • Loop: Activa o desactiva la reproducción continua del carrusel. Si está en “Yes”, vuelve al inicio al llegar al último slide.
  • Direction: Define la dirección del desplazamiento de los slides (por ejemplo, de izquierda a derecha).
  • Drag free: Permite arrastrar los slides libremente sin ajustarse automáticamente a una posición fija.
  • Align: Define la alineación de los slides dentro del contenedor (por ejemplo, Center).
  • Axis: Define el eje del desplazamiento del carrusel (Horizontal o Vertical).
  • Start slide: Define el número del slide que se mostrará inicialmente al cargar el carrusel.
  • Auto height: Ajusta automáticamente la altura del carrusel según el contenido del slide activo.
  • Behavior: Define el comportamiento general del carrusel (por ejemplo, Autoplay).
  • Autoplay: Activa o desactiva la reproducción automática de los slides.
  • Add fade effect: Activa una transición de desvanecimiento (fade) entre slides en lugar de desplazamiento tradicional.
  • Start delay (ms): Define el tiempo de espera en milisegundos antes de iniciar el autoplay.
  • Delay (ms): Define el tiempo en milisegundos entre cada transición automática.
  • Stop on mouse enter: Detiene el autoplay cuando el cursor pasa sobre el carrusel.
  • Show controls: Muestra u oculta los controles de navegación (flechas).
  • Left control icon: Permite definir el icono personalizado para la flecha izquierda.
  • Right control icon: Permite definir el icono personalizado para la flecha derecha.
  • Show dots: Muestra u oculta los indicadores de navegación (puntos inferiores).

Style

  Carousel

  • Background color: Permite definir el color de fondo del contenedor completo del carrusel.
  • Border: Permite configurar el grosor del borde en píxeles (Top, Right, Bottom, Left) de forma individual o enlazada.
  • Border radius: Permite definir el radio de las esquinas (en px) para redondear el contenedor del carrusel.
  • Border color: Permite seleccionar el color del borde aplicado al carrusel.
  • Padding: Define el espacio interno entre el contenido del carrusel y sus bordes (Top, Right, Bottom, Left).
  • Margin: Define el espacio externo alrededor del carrusel, separándolo de otros elementos (Top, Right, Bottom, Left).

  Items

  • Background color: Permite definir el color de fondo individual de cada ítem dentro del carrusel.
  • Border: Permite configurar el grosor del borde (en px) para cada lado del ítem (Top, Right, Bottom, Left), de forma independiente o enlazada.
  • Border radius: Permite ajustar el redondeado de las esquinas de cada ítem.
  • Border color: Permite seleccionar el color del borde aplicado a los ítems.
  • Padding: Define el espacio interno dentro de cada ítem, separando el contenido de sus bordes.
  • Margin: Define el espacio externo alrededor de cada ítem, separándolo de otros elementos.
  • Gap: Define el espacio de separación entre los distintos ítems del carrusel.

  Items image

  • Image width: Permite definir el ancho de la imagen del ítem (en px). Puede ajustarse mediante el slider o introduciendo un valor manual.
  • Image height: Permite definir la altura de la imagen del ítem (en px).
  • Object fit: Define cómo se adapta la imagen al contenedor (por ejemplo, cubrir, contener, ajustar, etc.). Controla el comportamiento de escalado.
  • Object position: Define la posición de la imagen dentro de su contenedor (por ejemplo, centro, arriba, abajo, izquierda, derecha).
  • Desktop full screen image: Si se activa, la imagen ocupará el ancho completo de la pantalla en dispositivos de escritorio.
  • Tablet full screen image: Si se activa, la imagen ocupará el ancho completo en dispositivos tablet.
  • Mobile full screen image: Si se activa, la imagen ocupará el ancho completo en dispositivos móviles.

  Items caption

  • Content vertical alignment: Permite alinear verticalmente el contenido del caption (arriba, centro o abajo).
  • Horizontal alignment: Permite alinear horizontalmente el contenido del caption (izquierda, centro o derecha).
  • Position: Define la posición del caption respecto a la imagen (por ejemplo, posición inicial o personalizada según configuración).
  • Background color: Permite definir el color de fondo del área del caption.
  • Border: Permite configurar el grosor del borde (en px) para cada lado del caption (Top, Right, Bottom, Left), de forma individual o enlazada.
  • Border radius: Permite ajustar el redondeado de las esquinas del contenedor del caption.
  • Border color: Permite definir el color del borde aplicado al caption.
  • Padding: Define el espacio interno entre el contenido del caption y sus bordes.
  • Margin: Define el espacio externo alrededor del caption, separándolo de otros elementos.

  Items title

  • Alignment: Permite definir la alineación horizontal del título dentro del ítem (izquierda, centro o derecha).
  • Background color: Permite establecer un color de fondo para el área del título.
  • Text color: Permite definir el color del texto del título.
  • Typography: Permite configurar las propiedades tipográficas del título, como fuente, tamaño, peso, estilo, interlineado, espaciado, etc.
  • Border: Permite configurar el grosor del borde (en px) para cada lado del contenedor del título (Top, Right, Bottom, Left).
  • Border radius: Permite ajustar el redondeado de las esquinas del contenedor del título.
  • Border color: Permite definir el color del borde aplicado al título.
  • Padding: Define el espacio interno entre el texto del título y sus bordes.
  • Margin: Define el espacio externo alrededor del título, separándolo de otros elementos del ítem.

Items content

  • Alignment: Permite definir la alineación horizontal del contenido dentro del ítem (izquierda, centro o derecha).
  • Background color: Permite establecer un color de fondo para el área del contenido.
  • Text color: Permite definir el color del texto del contenido.
  • Typography: Permite configurar las propiedades tipográficas del contenido, como fuente, tamaño, peso, estilo, interlineado y espaciado.
  • Border: Permite configurar el grosor del borde (en px) para cada lado del contenedor del contenido (Top, Right, Bottom, Left).
  • Border radius: Permite ajustar el redondeado de las esquinas del contenedor del contenido.
  • Border color: Permite definir el color del borde aplicado al contenido.
  • Padding: Define el espacio interno entre el texto del contenido y sus bordes.
  • Margin: Define el espacio externo alrededor del bloque de contenido, separándolo de otros elementos del ítem.

Items CTA

  • Pestañas: Normal / Hover: Permite configurar los estilos del botón CTA en estado normal y cuando el usuario pasa el cursor por encima (hover).
  • Horizontal alignment: Define la alineación horizontal del botón dentro del ítem (izquierda, centro o derecha).
  • Vertical alignment: Define la alineación vertical del botón dentro de su contenedor.
  • CTA width: Permite definir el ancho del botón (en px).
  • CTA height: Permite definir la altura del botón (en px).
  • Background color: Define el color de fondo del botón.
  • Text color: Define el color del texto del botón.
  • Typography: Permite configurar fuente, tamaño, peso, estilo, interlineado y espaciado del texto del botón.
  • Text alignment: Define la alineación del texto dentro del botón.
  • Border: Permite configurar el grosor del borde (Top, Right, Bottom, Left) del botón.
  • Border radius: Permite ajustar el redondeado de las esquinas del botón.
  • Border color: Permite definir el color del borde del botón.
  • Padding: Define el espacio interno entre el texto y los bordes del botón.
  • Margin: Define el espacio externo alrededor del botón.
  • Icon width: Permite definir el ancho del ícono (en px).
  • Icon height: Permite ajustar la altura del área del ícono si se maneja de forma independiente.
  • Icon background color: Define el color de fondo del contenedor del ícono.
  • Icon color: Define el color del ícono.
  • Icon border: Permite configurar el grosor del borde del ícono (Top, Right, Bottom, Left).
  • Icon border radius: Permite ajustar el redondeado de las esquinas del contenedor del ícono.
  • Icon border color: Define el color del borde del ícono.
  • Icon padding: Define el espacio interno entre el ícono y sus bordes.
  • Icon margin: Define el espacio externo alrededor del ícono respecto al texto del botón u otros elementos.

  Carousel controls

  • Position: Define la posición general de los controles (flechas) dentro del carrusel.
  • Normal / Hover: Permite configurar estilos diferentes para el estado normal del control y para cuando el usuario pasa el cursor por encima (hover).
  • Controls Width: Define el ancho del botón de control en píxeles (px). Afecta al contenedor completo del botón.
  • Controls Height: Define la altura del botón de control en píxeles (px).
  • Vertical Alignment: Permite alinear verticalmente los controles dentro del carrusel (arriba, centro o abajo).
  • Horizontal Alignment: Permite alinear horizontalmente los controles (izquierda, centro o derecha).
  • Background Color: Permite seleccionar el color de fondo del botón de control. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Icon Color: Define el color del ícono (flecha) dentro del botón de control.
  • Controls Icon Width: Define el ancho del ícono en píxeles (px). Afecta únicamente al ícono interno, no al contenedor.
  • Controls Icon Height: Define la altura del ícono en píxeles (px).
  • Border: Permite configurar el grosor del borde en píxeles (px). Se puede establecer de forma independiente para Top, Right, Bottom y Left, o vincular los valores.
  • Border Radius: Controla la curvatura de las esquinas del botón de control. Puede configurarse de forma independiente por lado o enlazada.
  • Border Color: Permite definir el color del borde del botón de control.
  • Padding (Relleno): Espacio interno entre el ícono y el borde del botón. Puede configurarse individualmente por cada lado para ajustar el área clickeable.
  • Margin (Margen): Espacio externo que separa el botón de control del carrusel u otros elementos cercanos.

Carousel dots

  • Position: Define la posición de los dots (indicadores) dentro del carrusel. Puede configurarse como relativa u otra opción disponible según el diseño.
  • Vertical Alignment: Permite alinear verticalmente el contenedor de los dots (arriba, centro o abajo).
  • Horizontal Alignment: Permite alinear horizontalmente los dots (izquierda, centro o derecha).
  • Background Color (contenedor): Permite seleccionar el color de fondo del contenedor de los dots. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border (contenedor): Permite configurar el grosor del borde en píxeles (px). Se puede establecer de forma independiente para Top, Right, Bottom y Left o vincular los valores.
  • Border Radius (contenedor): Controla la curvatura de las esquinas del contenedor de los dots. Puede configurarse de forma independiente por lado o enlazada.
  • Border Color (contenedor): Permite definir el color del borde del contenedor de los dots.
  • Padding (Relleno – contenedor): Espacio interno entre los dots y el borde del contenedor. Puede configurarse individualmente por cada lado.
  • Margin (Margen – contenedor): Espacio externo que separa el contenedor de los dots de otros elementos del carrusel.
  • Normal / Hover / Active: Permite configurar estilos diferentes para el estado normal del dot, cuando el usuario pasa el cursor por encima (hover) y cuando el dot está activo (slide actual).
  • Dots Width: Define el ancho de cada dot en píxeles (px).
  • Dots Height: Define la altura de cada dot en píxeles (px).
  • Background Color (dot): Permite seleccionar el color de fondo individual de cada dot según su estado (Normal, Hover o Active).
  • Border (dot): Permite configurar el grosor del borde de cada dot (Top, Right, Bottom, Left), de forma independiente o enlazada.
  • Border Radius (dot): Controla la curvatura de las esquinas de cada dot. Permite crear dots circulares si se ajusta adecuadamente.
  • Border Color (dot): Permite definir el color del borde de cada dot.
  • Padding (Relleno – dot): Espacio interno dentro de cada dot.
  • Margin (Margen – dot): Espacio externo entre los dots, permitiendo controlar la separación entre ellos.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Images Carousel

El widget Images Carousel permite mostrar varias imágenes en formato carrusel deslizante.

Es ideal para:

  • Galerías de fotos
  • Portafolios
  • Showcase de productos
  • Logotipos de marcas
  • Presentaciones visuales

Aporta dinamismo y mejora la experiencia visual del usuario.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Images Carousel dentro de la categoría correspondiente.
  3. Arrastra el widget Images Carousel al área de diseño.
  4. Colócalo en la sección donde deseas mostrar el carrusel.

Configuración del Widget Images Carousel

Una vez agregado el widget, podrás configurarlo desde el panel lateral izquierdo.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Images

  • Item: Contenedor individual de cada imagen dentro del bloque. Permite configurar los datos específicos de cada elemento.
  • Item Title: Nombre interno del ítem. Se utiliza para identificarlo dentro del panel de edición (no necesariamente visible en el frontend).
  • Title: Texto visible asociado a la imagen. Puede generarse manualmente o mediante la opción “Write with AI”.
  • Image: Permite seleccionar o subir la imagen que se mostrará en el ítem.
  • Skip Image Lazyload: Permite desactivar la carga diferida (lazy load) para esta imagen. Si se activa, la imagen se cargará inmediatamente al abrir la página.
  • CTA: Campo para definir el enlace asociado a la imagen. Permite añadir una URL y configurarla mediante el icono de ajustes (por ejemplo, abrir en nueva pestaña, atributos, etc.).
  • Add Item: Botón para agregar un nuevo ítem de imagen al bloque.

  Carousel

  • Loop: Activa o desactiva la reproducción continua del carrusel. Si está habilitado, al llegar al último slide volverá automáticamente al primero.
  • Direction: Define la dirección del desplazamiento de los slides (por ejemplo, de izquierda a derecha).
  • Drag Free: Permite arrastrar los slides libremente sin que se ajusten automáticamente a una posición fija.
  • Align: Define la alineación de los slides dentro del contenedor (por ejemplo, centro).
  • Axis: Define el eje del movimiento del carrusel (Horizontal o Vertical).
  • Start Slide: Define el número del slide que se mostrará inicialmente al cargar el carrusel.
  • Auto Height: Ajusta automáticamente la altura del carrusel según el contenido del slide activo.
  • Behavior: Define el comportamiento general del carrusel, como reproducción automática (Autoplay).
  • Autoplay: Activa o desactiva el cambio automático de slides.
  • Add Fade Effect: Aplica una transición de desvanecimiento (fade) entre slides en lugar del desplazamiento tradicional.
  • Start Delay: Define el tiempo en milisegundos (ms) antes de que comience el autoplay.
  • Delay: Define el intervalo en milisegundos (ms) entre cada transición automática.
  • Stop on Mouse Enter: Detiene el autoplay cuando el cursor pasa sobre el carrusel.
  • Show Controls: Muestra u oculta las flechas de navegación del carrusel.
  • Left Control Icon: Permite seleccionar o personalizar el ícono de la flecha izquierda.
  • Right Control Icon: Permite seleccionar o personalizar el ícono de la flecha derecha.
  • Show Dots: Muestra u oculta los indicadores de navegación (dots) debajo del carrusel.

Style

  Carousel

  • Background Color: Permite seleccionar el color de fondo del contenedor del carrusel. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border: Permite configurar el grosor del borde en píxeles (px). Se puede establecer de forma independiente para Top, Right, Bottom y Left o vincular los valores para aplicar el mismo grosor en todos los lados.
  • Border Radius: Controla la curvatura de las esquinas del carrusel. Puede configurarse de forma independiente por lado o enlazada para aplicar el mismo valor en todas las esquinas.
  • Border Color: Permite definir el color del borde del carrusel.
  • Padding (Relleno): Espacio interno entre el contenido del carrusel y su borde. Puede configurarse individualmente por cada lado para un ajuste preciso.
  • Margin (Margen): Espacio externo que separa el carrusel de otros elementos de la página. Puede configurarse por cada lado de forma independiente o enlazada.

  Items

  • Items Width: Define el ancho de cada ítem dentro del carrusel en píxeles (px). Controla cuánto espacio ocupa cada elemento en el contenedor.
  • Background Color: Permite seleccionar el color de fondo de cada ítem del carrusel. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border: Permite configurar el grosor del borde del ítem en píxeles (px). Se puede ajustar de forma independiente para Top, Right, Bottom y Left o vincular los valores.
  • Border Radius: Controla la curvatura de las esquinas de cada ítem. Puede configurarse por lado o de forma unificada.
  • Border Color: Permite definir el color del borde de cada ítem.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde. Puede ajustarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa cada ítem de otros elementos. Se puede configurar por lado de forma independiente.
  • Gap: Define el espacio entre los ítems del carrusel. Permite controlar la separación horizontal o vertical entre elementos.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.

  Items image

  • mage Width: Define el ancho de la imagen en píxeles (px). Controla cuánto espacio horizontal ocupa dentro del ítem.
  • Image Height: Define la altura de la imagen en píxeles (px). Permite ajustar la proporción o tamaño vertical del elemento visual.
  • Horizontal Alignment: Permite alinear la imagen horizontalmente dentro de su contenedor (izquierda, centro o derecha).
  • Vertical Alignment: Permite alinear la imagen verticalmente dentro de su contenedor (arriba, centro o abajo).
  • Background Color: Permite establecer un color de fondo para el contenedor de la imagen. Puede configurarse mediante color sólido o valores globales.
  • Border: Permite definir el grosor del borde de la imagen en píxeles (px). Se puede configurar por cada lado (Top, Right, Bottom, Left) o de forma unificada.
  • Border Radius: Controla la curvatura de las esquinas de la imagen. Puede ajustarse individualmente por lado o de manera global.
  • Border Color: Permite seleccionar el color del borde de la imagen.
  • Padding (Relleno): Espacio interno entre la imagen y su borde. Se puede configurar por cada lado de forma independiente.
  • Margin (Margen): Espacio externo que separa la imagen de otros elementos del diseño.
  • CSS Filters: Permite aplicar efectos visuales a la imagen como desenfoque (blur), brillo, contraste, saturación, entre otros ajustes avanzados.

  Carousel controls

  • Position: Define la posición del contenedor de los controles dentro del carrusel (por ejemplo: relative, absolute, etc.), afectando cómo se ubican respecto a otros elementos.
  • Controls Width: Define el ancho total de los controles de navegación en píxeles (px).
  • Controls Height: Define la altura de los controles de navegación en píxeles (px).
  • Vertical Alignment: Permite alinear los controles verticalmente dentro del carrusel (arriba, centro o abajo).
  • Horizontal Alignment: Permite alinear los controles horizontalmente (izquierda, centro o derecha).
  • Background Color: Permite establecer el color de fondo de los controles. Puede configurarse mediante color sólido o valores globales.
  • Icon Color: Permite definir el color de los íconos de navegación (flechas u otros indicadores).
  • Controls Icon Width: Define el ancho del ícono dentro de los controles en píxeles (px), afectando su escala horizontal.
  • Controls Icon Height: Define la altura del ícono dentro de los controles en píxeles (px), ajustando su tamaño vertical.
  • Border: Permite definir el grosor del borde de los controles en píxeles (px). Puede configurarse por cada lado o de forma global.
  • Border Radius: Controla la curvatura de las esquinas de los controles. Se puede configurar individualmente o de forma unificada.
  • Border Color: Permite seleccionar el color del borde de los controles.
  • Padding (Relleno): Espacio interno entre el contenido (íconos) y el borde del control. Puede configurarse por lado.
  • Margin (Margen): Espacio externo que separa los controles del resto de los elementos del carrusel.

  Carousel dots

  • Position: Define la posición del contenedor de los puntos (dots) dentro del carrusel (por ejemplo: relative, absolute), afectando su comportamiento respecto a otros elementos.
  • Vertical Alignment: Permite alinear los dots verticalmente dentro del carrusel (arriba, centro o abajo).
  • Horizontal Alignment: Permite alinear los dots horizontalmente (izquierda, centro o derecha).
  • Background Color: Permite establecer el color de fondo del contenedor de los dots. Puede configurarse mediante color sólido o valores globales.
  • Border: Define el grosor del borde del contenedor en píxeles (px). Se puede configurar por cada lado o de forma global.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de los dots. Puede configurarse de forma independiente o unificada.
  • Border Color: Permite seleccionar el color del borde del contenedor.
  • Padding (Relleno): Espacio interno entre los dots y el borde del contenedor. Puede ajustarse por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de los dots de otros elementos del carrusel.
  • Normal / Hover / Active: Permite definir estilos distintos para los dots según su estado: normal (reposo), hover (al pasar el cursor) y active (cuando está seleccionado el slide).
  • Dots Width: Define el ancho de cada dot en píxeles (px), afectando su tamaño horizontal.
  • Dots Height: Define la altura de cada dot en píxeles (px), controlando su tamaño vertical.
  • Background Color: Permite establecer el color de fondo de cada dot según el estado seleccionado.
  • Border: Define el grosor del borde del dot en píxeles (px). Se puede configurar por cada lado o de forma global.
  • Border Radius: Controla la curvatura de las esquinas del dot. Valores altos pueden convertirlos en círculos.
  • Border Color: Permite seleccionar el color del borde del dot.
  • Padding (Relleno): Espacio interno dentro del dot. Ajusta cómo se distribuye su contenido si lo tuviera.
  • Margin (Margen): Espacio externo entre cada dot y los elementos adyacentes, controlando la separación entre ellos.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Images Gallery

El widget Images Gallery permite mostrar múltiples imágenes en formato de galería.

Es ideal para:

  • Galerías fotográficas
  • Portafolios
  • Proyectos visuales
  • Catálogos de imágenes

Permite organizar el contenido visual en bloques claros y ordenados.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Images Gallery dentro de la categoría correspondiente.
  3. Arrastra el widget Images Gallery al área de diseño.
  4. Ubícalo en la sección donde deseas mostrar la galería.

Configuración del Widget Images Gallery

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Images

  • Item: Permite gestionar cada elemento individual dentro del bloque de imágenes. Desde aquí puedes crear, editar o duplicar cada ítem.
  • Item title: Campo interno para nombrar el elemento dentro del editor. No se muestra en el frontend, pero ayuda a organizar los ítems.
  • Title: Define el título visible del elemento. Puede generarse manualmente o mediante la opción “Write with AI”.
  • Image: Permite seleccionar o subir la imagen que se mostrará en el ítem. Es el contenido visual principal del bloque.
  • Skip image lazyload: Activa o desactiva la carga diferida (lazy load) de la imagen. Si se desactiva, la imagen se carga inmediatamente al renderizar la página.
  • Add Item: Botón que permite agregar nuevos elementos al listado de imágenes, creando múltiples ítems dentro del mismo componente.

  Gallery

  • Images size: Define el tamaño en el que se mostrarán las imágenes dentro de la galería (por ejemplo: Thumbnail, Medium, Large, Full). Afecta la resolución y proporción de carga.
  • Images aspect ratio: Permite establecer la proporción de las imágenes (relación ancho/alto). Puede mantenerse en “Default” o ajustarse para lograr una presentación uniforme dentro de la galería.

Style

  Carousel

  • Background Type: Permite elegir el tipo de fondo del contenedor de la galería (color sólido, degradado o imagen). Define el estilo visual base del bloque.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite configurar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la galería. Puede configurarse de forma individual (Top, Right, Bottom, Left) o enlazada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido de la galería (imágenes) y los bordes del contenedor. Se puede ajustar por cada lado de forma independiente.
  • Margin (Margen): Espacio externo que separa la galería de otros elementos de la página. Permite ajustar la distancia superior, inferior, izquierda y derecha.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la galería. Se pueden configurar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto). Controla si el contenido se recorta o se muestra fuera del área.

  Items

  • Horizontal Alignment: Permite alinear horizontalmente los elementos dentro del contenedor (izquierda, centro, derecha o distribución uniforme). Controla cómo se posicionan los ítems en el eje horizontal.
  • Items Width: Define el ancho de cada elemento en píxeles (px). Afecta directamente al tamaño horizontal de los ítems dentro del contenedor.
  • Items Height: Define la altura de cada elemento en píxeles (px). Controla el tamaño vertical de los ítems.
  • Background Type: Permite elegir el tipo de fondo de cada ítem (color sólido, degradado o imagen). Define la apariencia visual base de cada elemento.
  • Border Type: Define el estilo del borde de los ítems (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de cada ítem. Puede configurarse de forma individual (Top, Right, Bottom, Left) o enlazada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno dentro de cada ítem, entre su contenido y el borde. Permite ajustar el área interna de forma independiente por lado.
  • Margin (Margen): Espacio externo que separa cada ítem de otros elementos. Permite controlar la distancia entre ítems o respecto al contenedor.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto). Controla si el contenido se recorta o se desborda fuera del contenedor.

  Items image

  • Horizontal Alignment: Permite alinear horizontalmente la imagen dentro de su contenedor (izquierda, centro, derecha o distribución). Controla su posición en el eje horizontal.
  • Vertical Alignment: Permite alinear verticalmente la imagen dentro del contenedor (arriba, centro o abajo). Define cómo se posiciona en el eje vertical.
  • Border Type: Define el estilo del borde de la imagen (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la imagen. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o enlazada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre la imagen y su borde. Permite ajustar la separación interna de forma individual por cada lado.
  • Margin (Margen): Espacio externo alrededor de la imagen que la separa de otros elementos. Puede configurarse por cada lado de forma independiente.
  • Box Shadow: Permite aplicar una sombra alrededor de la imagen. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el contenedor de la imagen (Default, Hidden, Visible, Auto). Controla si el contenido se recorta o se muestra fuera del área visible.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Cards Carousel

El widget Cards Carousel permite mostrar contenido en formato de tarjetas deslizantes.

Es ideal para:

  • Servicios
  • Testimonios
  • Productos
  • Features o características
  • Contenido destacado

Ofrece una forma dinámica e interactiva de presentar información.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Cards Carousel dentro de la categoría correspondiente.
  3. Arrastra el widget Cards Carousel al área de diseño.
  4. Colócalo en la sección donde deseas mostrar el carrusel.

Configuración del Widget Cards Carousel

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Images

  • Item Title: Permite definir el nombre interno del card dentro del listado de elementos. No siempre es visible en el frontend, pero facilita la organización en el editor.
  • Show Image: Activa o desactiva la visualización de la imagen dentro del card. Al desactivarlo, el bloque se mostrará sin imagen.
  • Skip Image Lazyload: Permite deshabilitar la carga diferida (lazy load) de la imagen. Si está desactivado, la imagen se cargará inmediatamente.
  • Image: Campo para seleccionar o cargar la imagen principal del card. Es el elemento visual destacado.
  • Title: Permite ingresar el título del card. Puede escribirse manualmente o generarse con la opción “Write with AI”.
  • Title Tag: Define la etiqueta HTML del título (por ejemplo, H1, H2, H3). Afecta la jerarquía SEO y la accesibilidad.
  • Content: Editor de contenido enriquecido donde se puede agregar texto, enlaces, formato (negrita, listas, etc.) y otros elementos.
  • CTA (Call To Action): Campo para definir la URL a la que dirigirá el botón o enlace del card.
  • Label: Texto visible del botón o enlace CTA. Puede generarse manualmente o con ayuda de IA.
  • CTA Icon: Permite seleccionar o cargar un ícono que acompañará al botón CTA, mejorando la claridad visual y la interacción.
  • Add Item: Botón que permite agregar un nuevo card al listado, replicando la estructura configurada.

  Carousel

  • Loop: Permite activar la repetición infinita del carrusel. Cuando está habilitado, los elementos vuelven a comenzar automáticamente al finalizar.
  • Direction: Define la dirección del desplazamiento del carrusel (por ejemplo, de izquierda a derecha o viceversa).
  • Drag Free: Permite que el usuario arrastre libremente los elementos del carrusel sin necesidad de que encajen automáticamente en una posición fija.
  • Align: Define la alineación de los elementos dentro del carrusel (por ejemplo, centrado, izquierda o derecha).
  • Axis: Establece el eje de desplazamiento del carrusel, generalmente horizontal o vertical.
  • Start Slide: Indica el número del slide con el que comenzará el carrusel al cargarse.
  • Auto Height: Ajusta automáticamente la altura del carrusel según el contenido de cada slide.
  • Behavior: Define el comportamiento general del carrusel, como reproducción automática (Autoplay) u otros modos disponibles.
  • Autoplay: Activa o desactiva el desplazamiento automático de los slides sin interacción del usuario.
  • Add Fade Effect: Aplica un efecto de transición suave tipo “fade” entre los slides en lugar de un desplazamiento tradicional.
  • Start Delay: Define el tiempo de espera inicial (en milisegundos) antes de que comience el autoplay.
  • Delay: Establece el intervalo de tiempo (en milisegundos) entre cada transición de slide durante el autoplay.
  • Stop on Mouse Enter: Detiene automáticamente el autoplay cuando el usuario pasa el cursor sobre el carrusel.
  • Show Controls: Permite mostrar u ocultar los controles de navegación (flechas).
  • Left Control Icon: Permite seleccionar o personalizar el ícono del control izquierdo (anterior).
  • Right Control Icon: Permite seleccionar o personalizar el ícono del control derecho (siguiente).
  • Show Dots: Activa o desactiva la visualización de indicadores de navegación (puntos) debajo del carrusel.

Style

  Carousel

  • Background Color: Permite definir el color de fondo del carrusel. Puede configurarse con un color sólido o mediante valores globales del sistema de diseño.
  • Border: Define el grosor del borde del carrusel en píxeles (px). Se puede configurar de forma independiente para cada lado (Top, Right, Bottom, Left) o de manera uniforme.
  • Border Radius: Controla la curvatura de las esquinas del carrusel. Puede ajustarse individualmente por cada lado o de forma vinculada para mantener un valor uniforme.
  • Border Color: Permite seleccionar el color del borde del carrusel. Puede configurarse mediante color sólido o valores globales.
  • Padding (Relleno): Define el espacio interno entre el contenido del carrusel y su borde. Se puede ajustar por cada lado para un control más preciso.
  • Margin (Margen): Establece el espacio externo alrededor del carrusel, separándolo de otros elementos. Puede configurarse individualmente por cada lado.

  Items

  • Items Width: Define el ancho de cada elemento (item) dentro del carrusel en píxeles (px). Controla cuánto espacio horizontal ocupa cada ítem.
  • Background Color: Permite establecer el color de fondo de cada ítem. Puede configurarse con un color sólido o mediante valores globales del sistema de diseño.
  • Border: Define el grosor del borde de cada ítem en píxeles (px). Se puede ajustar de forma independiente para cada lado (Top, Right, Bottom, Left) o de manera uniforme.
  • Border Radius: Controla la curvatura de las esquinas de cada ítem. Puede configurarse individualmente por lado o de forma vinculada para mantener consistencia.
  • Border Color: Permite seleccionar el color del borde de los ítems. Puede configurarse con un color sólido o valores globales.
  • Padding (Relleno): Define el espacio interno dentro de cada ítem, separando el contenido de sus bordes. Se puede ajustar por cada lado.
  • Margin (Margen): Establece el espacio externo alrededor de cada ítem, separándolo de otros elementos. Puede configurarse individualmente por lado.
  • Gap: Define el espacio entre los ítems del carrusel. Permite controlar la separación horizontal (o vertical, según el layout) entre elementos.

  Items image

  • Image Width: Define el ancho de la imagen dentro del ítem en píxeles (px). Permite controlar cuánto espacio ocupa horizontalmente la imagen.
  • Alignment: Permite alinear la imagen dentro de su contenedor. Puede ajustarse a la izquierda, centro o derecha según la distribución del diseño.
  • Background Color: Define el color de fondo del contenedor de la imagen. Puede configurarse con un color sólido o valores globales del sistema de diseño.
  • Border: Establece el grosor del borde alrededor de la imagen en píxeles (px). Se puede configurar de forma independiente por cada lado (Top, Right, Bottom, Left) o de manera uniforme.
  • Border Radius: Controla la curvatura de las esquinas de la imagen o su contenedor. Puede ajustarse individualmente por lado o de forma vinculada.
  • Border Color: Permite definir el color del borde de la imagen. Puede configurarse mediante un color sólido o valores globales.
  • Padding (Relleno): Define el espacio interno entre la imagen y su borde. Se puede configurar individualmente por cada lado.
  • Margin (Margen): Establece el espacio externo alrededor de la imagen, separándola de otros elementos del layout. Puede ajustarse por cada lado.

  Items caption

  • Content Vertical Alignment: Permite alinear verticalmente el contenido dentro del caption (arriba, centro o abajo), controlando su posición en relación al contenedor.
  • Horizontal Alignment: Define la alineación horizontal del contenido (izquierda, centro o derecha), afectando la disposición del texto o elementos internos.
  • Position: Determina la posición del caption respecto a la imagen o contenedor. Puede configurarse en distintos modos (como Initial) según el comportamiento deseado.
  • Background Color: Establece el color de fondo del caption. Puede configurarse mediante un color sólido o valores globales del sistema de diseño.
  • Border: Define el grosor del borde del caption en píxeles (px). Permite configurarlo individualmente por cada lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Border Radius: Controla la curvatura de las esquinas del caption. Puede ajustarse por cada lado o de manera vinculada.
  • Border Color: Permite definir el color del borde del caption, utilizando colores sólidos o configuraciones globales.
  • Padding (Relleno): Define el espacio interno entre el contenido del caption y su borde. Se puede ajustar de forma independiente por cada lado.
  • Margin (Margen): Establece el espacio externo alrededor del caption, separándolo de otros elementos. Puede configurarse individualmente por cada lado.

  Items title

  • Alignment: Permite definir la alineación del título del ítem (izquierda, centro o derecha), controlando cómo se posiciona el texto dentro de su contenedor.
  • Background Color: Establece el color de fondo del título del ítem. Puede configurarse mediante un color sólido o utilizando valores globales del sistema de diseño.
  • Text Color: Define el color del texto del título, permitiendo mantener coherencia visual con el diseño general o aplicar estilos personalizados.
  • Typography: Permite configurar las propiedades tipográficas del texto, como la fuente, tamaño, peso (bold), estilo, altura de línea y espaciado entre letras.
  • Border: Define el grosor del borde del título en píxeles (px). Puede ajustarse de manera uniforme o de forma independiente para cada lado (Top, Right, Bottom, Left).
  • Border Radius: Controla la curvatura de las esquinas del contenedor del título. Puede configurarse globalmente o por cada esquina de forma individual.
  • Border Color: Permite establecer el color del borde del título, ya sea mediante un color sólido o valores globales.
  • Padding (Relleno): Define el espacio interno entre el contenido (texto) y el borde del título. Se puede configurar por cada lado de forma independiente.
  • Margin (Margen): Establece el espacio externo alrededor del título del ítem, separándolo de otros elementos. Puede ajustarse individualmente por cada lado.

  Items content

  • Alignment: Permite definir la alineación del contenido dentro del ítem (izquierda, centro o derecha), controlando cómo se distribuyen los elementos en su contenedor.
  • Background Color: Establece el color de fondo del contenido del ítem. Puede configurarse con un color sólido o mediante valores globales del sistema de diseño.
  • Text Color: Define el color del texto dentro del contenido, permitiendo mantener coherencia visual o aplicar estilos personalizados.
  • Typography: Permite configurar las propiedades tipográficas del contenido, como la fuente, tamaño, peso, estilo, altura de línea y espaciado entre letras.
  • Border: Define el grosor del borde del contenedor del contenido en píxeles (px). Puede ajustarse de forma uniforme o individual para cada lado (Top, Right, Bottom, Left).
  • Border Radius: Controla la curvatura de las esquinas del contenedor del contenido. Puede configurarse globalmente o por cada esquina de manera independiente.
  • Border Color: Permite establecer el color del borde del contenedor del contenido, usando colores sólidos o valores globales.
  • Padding (Relleno): Define el espacio interno entre el contenido y el borde del contenedor. Se puede ajustar individualmente por cada lado.
  • Margin (Margen): Establece el espacio externo alrededor del contenedor del contenido, separándolo de otros elementos. Puede configurarse por cada lado de forma independiente.

  Items CTA

  • Normal / Hover: Permite configurar estilos diferentes para el estado normal y cuando el usuario pasa el cursor sobre los controles.
  • Alignment: Permite definir la alineación del botón CTA dentro del contenedor (izquierda, centro o derecha).
  • CTA width: Controla el ancho del botón CTA en píxeles (px), permitiendo ajustar su tamaño horizontal.
  • CTA height: Define la altura del botón CTA en píxeles (px), afectando su tamaño vertical.
  • Background Color: Establece el color de fondo del botón CTA, configurable con colores sólidos o valores globales.
  • Text color: Define el color del texto del botón, asegurando contraste y legibilidad.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, etc.).
  • Text alignment: Determina la alineación del texto dentro del botón (izquierda, centro o derecha).
  • Border: Define el grosor del borde del botón en píxeles (px), configurable por cada lado.
  • Border radius: Controla la curvatura de las esquinas del botón.
  • Border color: Permite establecer el color del borde del botón.
  • Padding: Define el espacio interno entre el texto del botón y su borde.
  • Margin: Establece el espacio externo alrededor del botón.
  • Icon width: Define el tamaño del icono dentro del botón en píxeles (px).
  • Icon height: Controla la altura del icono del botón.
  • Icon background color: Establece el color de fondo del icono.
  • Icon color: Define el color del icono.
  • Icon border: Permite configurar el grosor del borde del icono.
  • Icon border radius: Controla la curvatura de las esquinas del contenedor del icono.
  • Icon border color: Define el color del borde del icono.
  • Icon padding: Establece el espacio interno entre el icono y su borde.
  • Icon margin: Define el espacio externo alrededor del icono.

  Carousel dots

  • Position: Define la posición de los controles del carrusel (por ejemplo, relative, absolute, etc.), determinando cómo se ubican dentro del contenedor.
  • Normal / Hover: Permite configurar estilos diferentes para el estado normal y cuando el usuario pasa el cursor sobre los controles.
  • Controls width: Ajusta el ancho total de los controles en píxeles (px).
  • Controls height: Define la altura de los controles en píxeles (px).
  • Vertical alignment: Permite alinear verticalmente los controles (arriba, centro o abajo).
  • Horizontal alignment: Define la alineación horizontal de los controles (izquierda, centro o derecha).
  • Background color: Establece el color de fondo de los controles.
  • Icon color: Define el color de los iconos dentro de los controles.
  • Controls icon width: Controla el ancho de los iconos de los controles.
  • Controls icon height: Define la altura de los iconos de los controles.
  • Border: Permite configurar el grosor del borde de los controles en cada lado.
  • Border radius: Ajusta la curvatura de las esquinas de los controles.
  • Border color: Define el color del borde de los controles.
  • Padding: Establece el espacio interno dentro de los controles.
  • Margin: Define el espacio externo alrededor de los controles.

Carousel controls

  • Position: Define la posición de los puntos (dots) del carrusel dentro del contenedor (por ejemplo, relative, absolute, etc.).
  • Vertical alignment: Permite alinear verticalmente los dots (arriba, centro o abajo).
  • Horizontal alignment: Define la alineación horizontal de los dots (izquierda, centro o derecha).
  • Background color: Establece el color de fondo del contenedor de los dots.
  • Border: Permite configurar el grosor del borde del contenedor en cada lado.
  • Border radius: Ajusta la curvatura de las esquinas del contenedor de los dots.
  • Border color: Define el color del borde del contenedor.
  • Padding: Establece el espacio interno dentro del contenedor de los dots.
  • Margin: Define el espacio externo alrededor del contenedor.
  • Normal / Hover / Active: Permite configurar estilos distintos para los dots en estado normal, al pasar el cursor (hover) y cuando están activos.
  • Dots width: Ajusta el ancho de cada dot.
  • Dots height: Define la altura de cada dot.
  • Background color (dots): Establece el color de fondo de los dots según el estado seleccionado.
  • Border (dots): Permite configurar el borde de cada dot.
  • Border radius (dots): Ajusta la forma de los dots (por ejemplo, circular si el radio es alto).
  • Border color (dots): Define el color del borde de cada dot.
  • Padding (dots): Establece el espacio interno dentro de cada dot.
  • Margin (dots): Define el espacio entre los dots.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Categories Carousel

El widget WC: Categories Carousel permite mostrar las categorías de productos de WooCommerce en un carrusel interactivo.

Es ideal para:

  • Tiendas online
  • Mostrar categorías destacadas
  • Mejorar la navegación del usuario
  • Promocionar secciones específicas del catálogo

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Categories Carousel dentro de la categoría correspondiente.
  3. Arrastra el widget WC: Categories Carousel al área de diseño.
  4. Colócalo en la sección donde deseas mostrar las categorías.

Configuración del Widget WC: Categories Carousel

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Categories filters

  • Hide empty categories: Permite ocultar las categorías que no tienen elementos asociados. Al activarlo (Yes), solo se mostrarán categorías con contenido.
  • Hide sub categories: Oculta las subcategorías dentro del listado principal cuando está activado.
  • Include categories: Permite seleccionar manualmente qué categorías incluir en el filtro. Solo se mostrarán las categorías elegidas.
  • Exclude categories: Permite excluir categorías específicas del filtro, incluso si cumplen otras condiciones.
  • Order by: Define el criterio de ordenación de las categorías (por ejemplo: nombre, ID, cantidad de elementos, etc.).
  • Order: Establece la dirección del orden (Ascending para ascendente o Descending para descendente).

  Categories

  • Show categories thumbnail: Permite mostrar u ocultar la imagen destacada de cada categoría. Si está en Hide, no se visualizarán miniaturas.
  • Show categories title: Activa o desactiva la visualización del nombre de cada categoría.
  • Title tag: Define la etiqueta HTML del título (por ejemplo, H1, H2, H3…). Esto afecta principalmente al SEO y a la jerarquía del contenido.
  • Truncate title: Permite limitar la longitud del título por número de caracteres. Útil para evitar textos demasiado largos en el diseño.
  • Show categories description: Muestra u oculta la descripción de cada categoría.
  • Show categories call to action: Activa un botón o enlace de acción (CTA) dentro de cada categoría, como “Ver más”.
  • Use category name as label?: Si se activa, el nombre de la categoría se reutiliza como etiqueta o label en otros elementos del diseño.

  Carousel

  • Loop: Activa o desactiva la reproducción continua del carrusel. Si está habilitado, al llegar al último slide volverá automáticamente al primero.
  • Direction: Define la dirección del desplazamiento de los slides (por ejemplo, de izquierda a derecha).
  • Drag Free: Permite arrastrar los slides libremente sin que se ajusten automáticamente a una posición fija.
  • Align: Define la alineación de los slides dentro del contenedor (por ejemplo, centro).
  • Axis: Define el eje del movimiento del carrusel (Horizontal o Vertical).
  • Start Slide: Define el número del slide que se mostrará inicialmente al cargar el carrusel.
  • Auto Height: Ajusta automáticamente la altura del carrusel según el contenido del slide activo.
  • Behavior: Define el comportamiento general del carrusel, como reproducción automática (Autoplay).
  • Autoplay: Activa o desactiva el cambio automático de slides.
  • Add Fade Effect: Aplica una transición de desvanecimiento (fade) entre slides en lugar del desplazamiento tradicional.
  • Start Delay: Define el tiempo en milisegundos (ms) antes de que comience el autoplay.
  • Delay: Define el intervalo en milisegundos (ms) entre cada transición automática.
  • Stop on Mouse Enter: Detiene el autoplay cuando el cursor pasa sobre el carrusel.
  • Show Controls: Muestra u oculta las flechas de navegación del carrusel.
  • Left Control Icon: Permite seleccionar o personalizar el ícono de la flecha izquierda.
  • Right Control Icon: Permite seleccionar o personalizar el ícono de la flecha derecha.
  • Show Dots: Muestra u oculta los indicadores de navegación (dots) debajo del carrusel.

Style

  Carousel

  • Background Color: Permite seleccionar el color de fondo del contenedor del carrusel. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border: Permite configurar el grosor del borde en píxeles (px). Se puede establecer de forma independiente para Top, Right, Bottom y Left o vincular los valores para aplicar el mismo grosor en todos los lados.
  • Border Radius: Controla la curvatura de las esquinas del carrusel. Puede configurarse de forma independiente por lado o enlazada para aplicar el mismo valor en todas las esquinas.
  • Border Color: Permite definir el color del borde del carrusel.
  • Padding (Relleno): Espacio interno entre el contenido del carrusel y su borde. Puede configurarse individualmente por cada lado para un ajuste preciso.
  • Margin (Margen): Espacio externo que separa el carrusel de otros elementos de la página. Puede configurarse por cada lado de forma independiente o enlazada.

  Items

  • Items Width: Define el ancho de cada ítem dentro del carrusel en píxeles (px). Controla cuánto espacio ocupa cada elemento en el contenedor.
  • Background Color: Permite seleccionar el color de fondo de cada ítem del carrusel. Puede configurarse mediante color sólido o valores globales del sistema de diseño.
  • Border: Permite configurar el grosor del borde del ítem en píxeles (px). Se puede ajustar de forma independiente para Top, Right, Bottom y Left o vincular los valores.
  • Border Radius: Controla la curvatura de las esquinas de cada ítem. Puede configurarse por lado o de forma unificada.
  • Border Color: Permite definir el color del borde de cada ítem.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde. Puede ajustarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa cada ítem de otros elementos. Se puede configurar por lado de forma independiente.
  • Gap: Define el espacio entre los ítems del carrusel. Permite controlar la separación horizontal o vertical entre elementos.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).

  Items image

  • CSS Filters: Permite aplicar efectos visuales a la imagen como desenfoque (blur), brillo, contraste, saturación, entre otros ajustes avanzados.
  • Image Width: Define el ancho de la imagen en píxeles (px). Controla cuánto espacio horizontal ocupa dentro del ítem.
  • Image Height: Define la altura de la imagen en píxeles (px). Permite ajustar la proporción o tamaño vertical del elemento visual.
  • Horizontal Alignment: Permite alinear la imagen horizontalmente dentro de su contenedor (izquierda, centro o derecha).
  • Vertical Alignment: Permite alinear la imagen verticalmente dentro de su contenedor (arriba, centro o abajo).
  • Background Color: Permite establecer un color de fondo para el contenedor de la imagen. Puede configurarse mediante color sólido o valores globales.
  • Border: Permite definir el grosor del borde de la imagen en píxeles (px). Se puede configurar por cada lado (Top, Right, Bottom, Left) o de forma unificada.
  • Border Radius: Controla la curvatura de las esquinas de la imagen. Puede ajustarse individualmente por lado o de manera global.
  • Border Color: Permite seleccionar el color del borde de la imagen.
  • Padding (Relleno): Espacio interno entre la imagen y su borde. Se puede configurar por cada lado de forma independiente.
  • Margin (Margen): Espacio externo que separa la imagen de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del Header en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

 Items caption

  • Content Vertical Alignment: Permite alinear verticalmente el contenido dentro del caption (arriba, centro o abajo), controlando su posición en relación al contenedor.
  • Horizontal Alignment: Define la alineación horizontal del contenido (izquierda, centro o derecha), afectando la disposición del texto o elementos internos.
  • Position: Determina la posición del caption respecto a la imagen o contenedor. Puede configurarse en distintos modos (como Initial) según el comportamiento deseado.
  • Background Color: Establece el color de fondo del caption. Puede configurarse mediante un color sólido o valores globales del sistema de diseño.
  • Border: Define el grosor del borde del caption en píxeles (px). Permite configurarlo individualmente por cada lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Border Radius: Controla la curvatura de las esquinas del caption. Puede ajustarse por cada lado o de manera vinculada.
  • Border Color: Permite definir el color del borde del caption, utilizando colores sólidos o configuraciones globales.
  • Padding (Relleno): Define el espacio interno entre el contenido del caption y su borde. Se puede ajustar de forma independiente por cada lado.
  • Margin (Margen): Establece el espacio externo alrededor del caption, separándolo de otros elementos. Puede configurarse individualmente por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del Header en el eje Z. Un valor más alto posiciona el elemento por encima de otros componentes superpuestos.

Items title

  • Alignment: Permite definir la alineación del título del ítem (izquierda, centro o derecha), controlando cómo se posiciona el texto dentro de su contenedor.
  • Background Color: Establece el color de fondo del título del ítem. Puede configurarse mediante un color sólido o utilizando valores globales del sistema de diseño.
  • Text Color: Define el color del texto del título, permitiendo mantener coherencia visual con el diseño general o aplicar estilos personalizados.
  • Typography: Permite configurar las propiedades tipográficas del texto, como la fuente, tamaño, peso (bold), estilo, altura de línea y espaciado entre letras.
  • Border: Define el grosor del borde del título en píxeles (px). Puede ajustarse de manera uniforme o de forma independiente para cada lado (Top, Right, Bottom, Left).
  • Border Radius: Controla la curvatura de las esquinas del contenedor del título. Puede configurarse globalmente o por cada esquina de forma individual.
  • Border Color: Permite establecer el color del borde del título, ya sea mediante un color sólido o valores globales.
  • Padding (Relleno): Define el espacio interno entre el contenido (texto) y el borde del título. Se puede configurar por cada lado de forma independiente.
  • Margin (Margen): Establece el espacio externo alrededor del título del ítem, separándolo de otros elementos. Puede ajustarse individualmente por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).

Items content

  • Alignment: Permite definir la alineación del contenido dentro del ítem (izquierda, centro o derecha), controlando cómo se distribuyen los elementos en su contenedor.
  • Background Color: Establece el color de fondo del contenido del ítem. Puede configurarse con un color sólido o mediante valores globales del sistema de diseño.
  • Text Color: Define el color del texto dentro del contenido, permitiendo mantener coherencia visual o aplicar estilos personalizados.
  • Typography: Permite configurar las propiedades tipográficas del contenido, como la fuente, tamaño, peso, estilo, altura de línea y espaciado entre letras.
  • Border: Define el grosor del borde del contenedor del contenido en píxeles (px). Puede ajustarse de forma uniforme o individual para cada lado (Top, Right, Bottom, Left).
  • Border Radius: Controla la curvatura de las esquinas del contenedor del contenido. Puede configurarse globalmente o por cada esquina de manera independiente.
  • Border Color: Permite establecer el color del borde del contenedor del contenido, usando colores sólidos o valores globales.
  • Padding (Relleno): Define el espacio interno entre el contenido y el borde del contenedor. Se puede ajustar individualmente por cada lado.
  • Margin (Margen): Establece el espacio externo alrededor del contenedor del contenido, separándolo de otros elementos. Puede configurarse por cada lado de forma independiente.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).

  Items CTA

  • Normal / Hover: Permite configurar estilos diferentes para el estado normal y cuando el usuario pasa el cursor sobre los controles.
  • Alignment: Permite definir la alineación del botón CTA dentro del contenedor (izquierda, centro o derecha).
  • CTA width: Controla el ancho del botón CTA en píxeles (px), permitiendo ajustar su tamaño horizontal.
  • CTA height: Define la altura del botón CTA en píxeles (px), afectando su tamaño vertical.
  • Background Color: Establece el color de fondo del botón CTA, configurable con colores sólidos o valores globales.
  • Text color: Define el color del texto del botón, asegurando contraste y legibilidad.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, etc.).
  • Text alignment: Determina la alineación del texto dentro del botón (izquierda, centro o derecha).
  • Border: Define el grosor del borde del botón en píxeles (px), configurable por cada lado.
  • Border radius: Controla la curvatura de las esquinas del botón.
  • Border color: Permite establecer el color del borde del botón.
  • Padding: Define el espacio interno entre el texto del botón y su borde.
  • Margin: Establece el espacio externo alrededor del botón.
  • Icon width: Define el tamaño del icono dentro del botón en píxeles (px).
  • Icon height: Controla la altura del icono del botón.
  • Icon background color: Establece el color de fondo del icono.
  • Icon color: Define el color del icono.
  • Icon border: Permite configurar el grosor del borde del icono.
  • Icon border radius: Controla la curvatura de las esquinas del contenedor del icono.
  • Icon border color: Define el color del borde del icono.
  • Icon padding: Establece el espacio interno entre el icono y su borde.
  • Icon margin: Define el espacio externo alrededor del icono.
  • Icon box Shadow: Permite aplicar una sombra alrededor de cada icon. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.

  Carousel controls

  • Position: Define la posición de los controles del carrusel (por ejemplo, relative, absolute, etc.), determinando cómo se ubican dentro del contenedor.
  • Normal / Hover: Permite configurar estilos diferentes para el estado normal y cuando el usuario pasa el cursor sobre los controles.
  • Controls width: Ajusta el ancho total de los controles en píxeles (px).
  • Controls height: Define la altura de los controles en píxeles (px).
  • Vertical alignment: Permite alinear verticalmente los controles (arriba, centro o abajo).
  • Horizontal alignment: Define la alineación horizontal de los controles (izquierda, centro o derecha).
  • Background color: Establece el color de fondo de los controles.
  • Icon color: Define el color de los iconos dentro de los controles.
  • Controls icon width: Controla el ancho de los iconos de los controles.
  • Controls icon height: Define la altura de los iconos de los controles.
  • Border: Permite configurar el grosor del borde de los controles en cada lado.
  • Border radius: Ajusta la curvatura de las esquinas de los controles.
  • Border color: Define el color del borde de los controles.
  • Padding: Establece el espacio interno dentro de los controles.
  • Margin: Define el espacio externo alrededor de los controles.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).

  Carousel dots

  • Position: Define la posición de los puntos (dots) del carrusel dentro del contenedor (por ejemplo, relative, absolute, etc.).
  • Vertical alignment: Permite alinear verticalmente los dots (arriba, centro o abajo).
  • Horizontal alignment: Define la alineación horizontal de los dots (izquierda, centro o derecha).
  • Background color: Establece el color de fondo del contenedor de los dots.
  • Border: Permite configurar el grosor del borde del contenedor en cada lado.
  • Border radius: Ajusta la curvatura de las esquinas del contenedor de los dots.
  • Border color: Define el color del borde del contenedor.
  • Padding: Establece el espacio interno dentro del contenedor de los dots.
  • Margin: Define el espacio externo alrededor del contenedor.
  • Normal / Hover / Active: Permite configurar estilos distintos para los dots en estado normal, al pasar el cursor (hover) y cuando están activos.
  • Dots width: Ajusta el ancho de cada dot.
  • Dots height: Define la altura de cada dot.
  • Background color (dots): Establece el color de fondo de los dots según el estado seleccionado.
  • Border (dots): Permite configurar el borde de cada dot.
  • Border radius (dots): Ajusta la forma de los dots (por ejemplo, circular si el radio es alto).
  • Border color (dots): Define el color del borde de cada dot.
  • Padding (dots): Establece el espacio interno dentro de cada dot.
  • Margin (dots): Define el espacio entre los dots.
  • Box Shadow (dots): Permite aplicar una sombra alrededor de cada dot. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Products Carousel

El widget WC: Products Carousel permite mostrar productos de WooCommerce en un carrusel dinámico.

Es ideal para:

  • Productos destacados
  • Ofertas y promociones
  • Nuevos productos
  • Catálogos visuales

Incluye información como imagen, precio y otros datos relevantes del producto.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Products Carousel dentro de la categoría correspondiente.
  3. Arrastra el widget WC: Products Carousel al área de diseño.
  4. Colócalo en la sección donde deseas mostrar los productos.

Configuración del Widget WC: Products Carousel

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Products filters

  • Products to show: Define la cantidad total de productos que se mostrarán en el listado.
  • Products status: Filtra los productos según su estado (por ejemplo, publicados, borradores, pendientes). Normalmente se usa Publish para mostrar solo los visibles en la tienda.
  • Products type: Permite filtrar por tipo de producto (simple, variable, agrupado, etc.). En All se incluyen todos.
  • Show featured products: Muestra únicamente los productos destacados si se activa. En No, no se aplica este filtro.
  • Show products in stock: Filtra para mostrar solo productos disponibles en inventario.
  • Show products out of stock: Permite incluir o excluir productos sin stock.
  • Show products on back order: Controla si se muestran productos disponibles bajo pedido (backorder).
  • Show products on sale: Filtra productos que están en oferta.
  • Show single product upsells: Muestra productos relacionados tipo upsells (ventas adicionales) en vistas individuales.
  • Show related products on single product view: Activa la visualización de productos relacionados dentro de la página de producto.
  • Show single product cross-sells: Muestra productos complementarios (cross-sells), normalmente sugeridos en el carrito.
  • Filter by vendors on single product view: Filtra productos por vendedor (útil en marketplaces multivendedor).
  • Include products: Permite seleccionar manualmente productos específicos para incluirlos siempre.
  • Exclude products: Permite excluir productos específicos del listado.
  • Display by categories: Filtra productos según categorías seleccionadas.
  • Order by: Define el criterio de orden (nombre, precio, fecha, popularidad, etc.).
  • Order: Define si el orden será Ascending (ascendente) o Descending (descendente).

  Products

  • Show products image: Permite mostrar u ocultar la imagen principal de cada producto dentro del listado o carrusel.
  • Image size: Define el tamaño en el que se renderiza la imagen del producto (por ejemplo: Thumbnail, Medium, Large, etc.).
  • Image aspect ratio: Controla la proporción de la imagen (por ejemplo: Default, cuadrado, horizontal, etc.), evitando deformaciones.
  • Show products SKU: Activa o desactiva la visualización del SKU (código único del producto).
  • Show products title: Permite mostrar u ocultar el nombre del producto.
  • Show products reviews: Activa la visualización de valoraciones o estrellas de reseñas del producto.
  • Title tag: Define la etiqueta HTML del título del producto (H1, H2, H3, etc.), útil para SEO y jerarquía visual.
  • Truncate title: Permite limitar la cantidad de caracteres visibles del título para evitar desbordes.
  • Show products price: Muestra u oculta el precio del producto.
  • Show products sale badge: Activa una etiqueta visual cuando el producto está en oferta.
  • Sale badge value: Define el tipo de valor mostrado en la etiqueta de oferta (porcentaje o valor fijo).
  • Sale badge prepended text: Texto que aparece antes del valor de descuento (ej: “Save”, “-”).
  • Sale badge appended text: Texto que aparece después del valor (ej: “OFF”, “%”).
  • Out of stock badge text: Permite personalizar el texto que se muestra cuando un producto está agotado.
  • Show products short description: Muestra una descripción corta del producto.
  • Truncate short description: Limita la longitud de la descripción corta por número de caracteres.
  • Show products description: Activa la visualización de la descripción completa del producto.
  • Truncate description: Permite recortar la descripción larga para mantener un diseño uniforme.
  • Show view detail cta: Muestra un botón o enlace para ver más detalles del producto.
  • CTA label: Permite definir el texto del botón de detalle (ej: “Ver más”, “Detalles”).
  • CTA target: Define cómo se abre el enlace (misma ventana o nueva pestaña).
  • CTA icon: Permite añadir un ícono al botón de detalle.
  • Show add to cart button: Activa o desactiva el botón para añadir productos al carrito.
  • Add to cart label: Permite personalizar el texto del botón (ej: “Agregar al carrito”).
  • Add to cart icon: Permite añadir un ícono visual al botón.
  • Show buy now button: Activa un botón de compra directa (checkout inmediato).
  • Buy now label: Define el texto del botón (ej: “Comprar ahora”).
  • Buy now target: Define si el enlace abre en la misma ventana o en una nueva.
  • Buy now icon: Permite añadir un ícono al botón de compra rápida.

  Products

  • Loop: Permite activar la reproducción infinita del carrusel. Cuando está habilitado, los elementos se repiten continuamente sin detenerse al final.
  • Direction: Define la dirección en la que se desplazan los elementos del carrusel (por ejemplo: de izquierda a derecha o viceversa).
  • Drag free: Activa el desplazamiento libre mediante arrastre. Permite mover los elementos sin ajustarse automáticamente a una posición fija.
  • Align: Determina la alineación de los elementos dentro del carrusel (inicio, centro o final del contenedor).
  • Axis: Define el eje de desplazamiento del carrusel (horizontal o vertical).
  • Start slide: Permite establecer el índice del slide inicial que se mostrará al cargar el carrusel.
  • Auto height: Ajusta automáticamente la altura del contenedor según el contenido del slide activo.
  • Behavior: Define el comportamiento del carrusel (por ejemplo: autoplay o interacción manual).
  • Autoplay: Activa o desactiva la reproducción automática de los slides.
  • Add fade effect: Aplica una transición de tipo desvanecimiento (fade) entre slides en lugar de un desplazamiento.
  • Start delay: Define el tiempo (en milisegundos) antes de que comience la reproducción automática.
  • Delay: Establece el intervalo de tiempo (en milisegundos) entre cada cambio de slide.
  • Stop on mouse enter: Detiene la reproducción automática cuando el cursor se posiciona sobre el carrusel.
  • Show controls: Permite mostrar u ocultar los controles de navegación (flechas anterior/siguiente).
  • Left control icon: Permite personalizar el ícono del botón de navegación izquierda.
  • Right control icon: Permite personalizar el ícono del botón de navegación derecha.
  • Show dots: Activa o desactiva los indicadores de navegación (puntos) que representan cada slide del carrusel.

Style

  Carousel

  • Background Type: Permite definir el tipo de fondo del carrusel. Puede ser un color sólido, degradado o una imagen, dependiendo del diseño deseado.
  • Border Type: Define el estilo del borde del contenedor del carrusel (por ejemplo: sólido, punteado, doble, etc.). Al seleccionarlo, se habilitan configuraciones adicionales como grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del carrusel. Puede configurarse de forma individual (Top, Right, Bottom, Left) o de manera vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Establece el espacio interno entre el contenido del carrusel y su borde. Permite ajustes independientes por cada lado.
  • Margin (Margen): Define el espacio externo alrededor del carrusel, separándolo de otros elementos en la página. Se puede configurar por cada lado de forma individual.
  • Box Shadow: Permite aplicar una sombra al contenedor del carrusel. Se pueden ajustar parámetros como desplazamiento horizontal y vertical, desenfoque, expansión y color.
  • Overflow: Controla cómo se comporta el contenido que excede los límites del contenedor del carrusel. Opciones comunes incluyen visible, oculto, automático o comportamiento por defecto.

  Items

  • Items width: Define el ancho de cada elemento dentro del carrusel. Puede ajustarse manualmente en píxeles para controlar cuántos elementos se muestran en pantalla.
  • Background Type: Permite seleccionar el tipo de fondo para cada ítem del carrusel. Puede ser un color sólido, degradado o imagen según el diseño.
  • Border Type: Establece el estilo del borde de cada ítem (sólido, punteado, doble, etc.). Al activarlo, se pueden configurar propiedades adicionales como grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de cada ítem. Puede configurarse de forma independiente por lado (Top, Right, Bottom, Left) o de forma global.
  • Padding (Relleno): Define el espacio interno entre el contenido del ítem y su borde. Permite ajustes individuales por cada lado.
  • Margin (Margen): Establece el espacio externo alrededor de cada ítem, separándolo de otros elementos del carrusel.
  • Gap: Controla la separación directa entre los ítems dentro del carrusel. Es especialmente útil para definir el espaciado horizontal o vertical entre elementos.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede los límites del ítem (visible, oculto, automático o por defecto).

  Items Image

  • CSS Filters: Permite aplicar filtros visuales a la imagen como desenfoque, brillo, contraste, saturación, escala de grises, entre otros. Ideal para ajustes estéticos sin editar la imagen original.
  • Image width: Define el ancho de la imagen dentro del ítem. Puede ajustarse en píxeles para adaptarse al diseño del carrusel.
  • Image height: Establece la altura de la imagen. Permite mantener proporciones específicas o crear diseños más uniformes.
  • Horizontal alignment: Controla la alineación horizontal de la imagen dentro de su contenedor (izquierda, centro o derecha).
  • Vertical alignment: Define la alineación vertical de la imagen dentro del espacio disponible (arriba, centro o abajo).
  • Background Type: Permite asignar un fondo al contenedor de la imagen, ya sea color sólido, degradado o imagen.
  • Border Type: Define el estilo del borde alrededor de la imagen (sólido, punteado, doble, etc.), habilitando opciones adicionales como grosor y color.
  • Border radius: Ajusta la curvatura de las esquinas de la imagen. Puede configurarse por separado en cada lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre la imagen y su borde. Permite controlar la separación dentro del contenedor.
  • Margin (Margen): Espacio externo alrededor de la imagen que la separa de otros elementos del ítem.
  • Box Shadow: Aplica una sombra alrededor de la imagen. Se pueden configurar parámetros como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el contenedor de la imagen (visible, oculto, automático o por defecto).
  • Z-index: Controla la superposición de la imagen respecto a otros elementos. Un valor mayor coloca la imagen por encima en el eje de profundidad.

  Sale Badge

  • Position: Define la posición base de la etiqueta de oferta dentro del contenedor del producto. La opción Initial respeta el flujo natural del diseño, aunque puede ajustarse según necesidades específicas.
  • Alignment: Permite alinear horizontalmente la etiqueta dentro de su contenedor (izquierda, centro o derecha).
  • Background Type: Establece el fondo de la etiqueta de oferta. Puede configurarse como color sólido o degradado para resaltar visualmente el descuento.
  • Text color: Define el color del texto dentro de la etiqueta, asegurando contraste y legibilidad.
  • Typography: Permite personalizar la tipografía del texto (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Border Type: Determina el estilo del borde de la etiqueta (sólido, punteado, doble, etc.). Al activarlo, permite ajustar ancho y color.
  • Border radius: Controla la curvatura de las esquinas de la etiqueta. Puede configurarse individualmente o de forma uniforme en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido (texto) y el borde de la etiqueta. Afecta directamente la legibilidad y proporción visual.
  • Margin (Margen): Espacio externo alrededor de la etiqueta, separándola de otros elementos del producto.
  • Box Shadow: Aplica una sombra alrededor de la etiqueta para darle profundidad y mejorar su visibilidad sobre la imagen del producto.
  • Overflow: Define cómo se comporta el contenido que excede el contenedor de la etiqueta (visible, oculto, automático o por defecto).
  • Z-index: Controla la superposición de la etiqueta respecto a otros elementos. Un valor más alto asegura que la etiqueta se muestre por encima del contenido, como imágenes o textos del producto.

  Out of Stock Badge

  • Position: Define la posición base de la etiqueta dentro del contenedor del producto. La opción Initial mantiene la posición según el flujo natural del diseño, aunque puede modificarse según la estructura.
  • Alignment: Permite alinear horizontalmente la etiqueta (izquierda, centro o derecha) dentro del área del producto.
  • Background Type: Establece el tipo de fondo de la etiqueta (color sólido o degradado), útil para destacar visualmente que el producto no está disponible.
  • Text color: Define el color del texto de la etiqueta, asegurando buena legibilidad sobre el fondo.
  • Typography: Permite configurar la tipografía del texto (familia, tamaño, peso, estilo y espaciado).
  • Border Type: Determina el estilo del borde (sólido, punteado, doble, etc.). Al activarlo, se pueden ajustar propiedades como grosor y color.
  • Border radius: Controla la curvatura de las esquinas de la etiqueta. Puede aplicarse de forma individual por lado o de manera uniforme.
  • Padding (Relleno): Define el espacio interno entre el texto de la etiqueta y su borde, mejorando la estética y legibilidad.
  • Margin (Margen): Establece el espacio externo que separa la etiqueta de otros elementos del producto.
  • Box Shadow: Permite aplicar una sombra para dar profundidad y resaltar la etiqueta sobre la imagen del producto.
  • Overflow: Define el comportamiento del contenido cuando excede el contenedor (visible, oculto, automático o por defecto).
  • Z-index: Controla la superposición de la etiqueta respecto a otros elementos. Un valor más alto asegura que la etiqueta de “agotado” se muestre por encima de imágenes u otros contenidos.

  Items Caption

  • Horizontal alignment: Permite alinear horizontalmente el contenido del caption (izquierda, centro o derecha) dentro del contenedor del ítem.
  • Vertical alignment: Define la alineación vertical del contenido (arriba, centro o abajo), útil para ajustar la posición del texto respecto a la imagen u otros elementos.
  • Position: Establece la posición del contenedor del caption dentro del ítem. La opción Initial mantiene el flujo normal, aunque puede modificarse para diseños más personalizados.
  • Background Type: Permite definir el fondo del caption (color sólido o degradado), ayudando a mejorar la legibilidad del texto sobre imágenes.
  • Border Type: Define el estilo del borde del contenedor (sólido, doble, punteado, etc.), con opciones adicionales de grosor y color.
  • Border radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma independiente por cada lado o de manera uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del caption (texto o elementos) y los bordes del contenedor.
  • Margin (Margen): Espacio externo que separa el caption de otros elementos dentro del ítem.
  • Box Shadow: Permite añadir una sombra al contenedor del caption, generando profundidad y mejorando la jerarquía visual.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (visible, oculto, automático o por defecto).
  • Z-index: Controla la superposición del caption respecto a otros elementos del ítem. Un valor más alto permite que el texto se muestre por encima de imágenes u otros bloques.

  SKU

  • Alignment: Permite definir la alineación horizontal del SKU dentro del contenedor (izquierda, centro o derecha), facilitando su integración con el diseño del producto.
  • Background Type: Define el tipo de fondo del bloque del SKU. Puede configurarse como color sólido o transparente según el estilo visual deseado.
  • Text color: Permite seleccionar el color del texto del SKU, asegurando contraste y legibilidad frente al fondo.
  • Typography: Controla las propiedades tipográficas del SKU, incluyendo familia de fuente, tamaño, peso, estilo y espaciado.
  • Border Type: Establece el estilo del borde del contenedor del SKU (sólido, punteado, doble, etc.), con posibilidad de ajustar grosor y color.
  • Border radius: Controla la curvatura de las esquinas del contenedor del SKU. Puede configurarse de forma individual (Top, Right, Bottom, Left) o global.
  • Padding (Relleno): Define el espacio interno entre el texto del SKU y los bordes del contenedor.
  • Margin (Margen): Establece el espacio externo alrededor del contenedor del SKU, separándolo de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra al contenedor del SKU para generar profundidad visual.
  • Overflow: Determina cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático o por defecto).

  Title

  • Alignment: Permite definir la alineación horizontal del título dentro del contenedor (izquierda, centro o derecha), adaptándose a la estructura visual del diseño.
  • Background Type: Define el tipo de fondo del contenedor del título. Puede ser un color sólido o transparente según el estilo aplicado.
  • Text color: Permite seleccionar el color del texto del título, asegurando buena legibilidad y coherencia con el diseño general.
  • Typography: Controla las propiedades tipográficas del título, como la fuente, tamaño, peso, estilo, altura de línea y espaciado.
  • Border Type: Establece el estilo del borde del contenedor del título (sólido, doble, punteado, etc.), con opciones para personalizar grosor y color.
  • Border radius: Controla la curvatura de las esquinas del contenedor del título. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma global.
  • Padding (Relleno): Define el espacio interno entre el texto del título y los bordes del contenedor.
  • Margin (Margen): Establece el espacio externo alrededor del contenedor del título, separándolo de otros elementos.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del título para añadir profundidad visual.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del contenedor (visible, oculto, automático o por defecto).

  Reviews

  • Alignment: Permite definir la alineación horizontal del bloque de reseñas dentro del contenedor (izquierda, centro o derecha).
  • Background Type: Define el tipo de fondo del contenedor de las reseñas, pudiendo ser un color sólido o transparente según el diseño.
  • Border Type: Establece el estilo del borde del contenedor de reseñas (sólido, doble, punteado, etc.), con posibilidad de ajustar grosor y color.
  • Border radius: Controla la curvatura de las esquinas del contenedor de reseñas. Puede configurarse de forma individual (Top, Right, Bottom, Left) o global.
  • Padding (Relleno): Define el espacio interno entre el contenido de las reseñas (estrellas, texto, etc.) y los bordes del contenedor.
  • Margin (Margen): Establece el espacio externo alrededor del bloque de reseñas, separándolo de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de reseñas, generando profundidad visual.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del contenedor (visible, oculto, automático o por defecto).

  Reviews star

  • Items width: Define el ancho de cada ítem dentro del contenedor. Puede ajustarse en píxeles para lograr una distribución precisa.
  • Items height: Establece la altura de cada ítem, permitiendo controlar el tamaño vertical del bloque.
  • Background Type: Permite seleccionar el tipo de fondo del ítem (color sólido o transparente), afectando la apariencia general del contenedor.
  • Border Type: Define el estilo del borde del ítem (sólido, doble, punteado, etc.). Al activarlo, permite configurar grosor y color.
  • Border radius: Controla la curvatura de las esquinas del ítem. Se puede ajustar individualmente (Top, Right, Bottom, Left) o de forma global.
  • Padding (Relleno): Establece el espacio interno entre el contenido del ítem (texto, icono, etc.) y sus bordes.
  • Margin (Margen): Define el espacio externo alrededor de cada ítem, separándolo de otros elementos.
  • Box Shadow: Permite aplicar una sombra al contenedor del ítem, generando profundidad visual.
  • Overflow: Controla el comportamiento del contenido que excede el tamaño del ítem (visible, oculto, automático o por defecto).
  • Icon width: Define el ancho del icono dentro del ítem.
  • Icon height: Establece la altura del icono, permitiendo mantener proporciones o ajustarlas manualmente.
  • Icon color: Permite cambiar el color del icono para adaptarlo al diseño visual del componente.

  Price

  • Alignment: Define la alineación del bloque de precios dentro del contenedor (izquierda, centro o derecha).
  • Background Type: Permite seleccionar el tipo de fondo para el contenedor del precio (color sólido o transparente).
  • Border Type: Define el estilo del borde del contenedor del precio (sólido, punteado, doble, etc.), incluyendo opciones de grosor y color.
  • Border radius: Controla la curvatura de las esquinas del contenedor del precio. Puede configurarse por cada lado o de forma uniforme.
  • Padding (Relleno): Establece el espacio interno entre el contenido del precio y el borde del contenedor.
  • Margin (Margen): Define el espacio externo alrededor del bloque de precio, separándolo de otros elementos.
  • Box Shadow: Aplica una sombra al contenedor del precio para generar profundidad visual.
  • Overflow: Controla cómo se comporta el contenido que excede el tamaño del contenedor (visible, oculto, automático, etc.).
  • Normal price  / Sales regular price  / Sale price: Permite elegir el tipo de precio para configurar
  • Background Type: Define el fondo específico para el precio normal.
  • Text color: Permite establecer el color del texto del precio.
  • Typography: Configura la tipografía del precio (fuente, tamaño, peso, estilo, etc.).
  • Border Type: Define el estilo del borde para el precio normal.
  • Border radius: Ajusta la curvatura de las esquinas del contenedor del precio.
  • Padding (Relleno): Controla el espacio interno del precio.
  • Margin (Margen): Define la separación externa respecto a otros elementos.
  • Box Shadow: Aplica sombra al contenedor del precio normal.
  • Overflow: Controla el comportamiento del contenido desbordado.

  Content

  • Alignment: Define la alineación del contenido dentro del contenedor (izquierda, centro o derecha), afectando la disposición de textos y elementos internos.
  • Background Type: Permite elegir el tipo de fondo del contenedor de contenido (color sólido o transparente), útil para resaltar la información.
  • Text color: Establece el color del texto del contenido, asegurando legibilidad y coherencia con el diseño.
  • Typography: Configura la tipografía del contenido (familia de fuente, tamaño, peso, altura de línea, etc.).
  • Border Type: Define el estilo del borde del contenedor (sólido, punteado, doble, etc.), incluyendo opciones de grosor y color.
  • Border radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido (texto o elementos) y el borde del contenedor.
  • Margin (Margen): Espacio externo que separa el contenedor de contenido de otros elementos adyacentes.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Visible, Hidden, Auto, etc.).

  CTAs container

  • Horizontal alignment: Define la alineación horizontal de los botones de llamada a la acción (CTA) dentro del contenedor (izquierda, centro o derecha), permitiendo controlar cómo se distribuyen en la fila.
  • Vertical alignment: Controla la alineación vertical de los CTAs dentro de su contenedor (arriba, centro o abajo), especialmente útil cuando hay diferencias de altura entre elementos.

  View detail CTA

  • Normal / Hover: Permite configurar estilos diferenciados para el botón en estado normal y cuando el usuario pasa el cursor por encima (hover).
  • CTA width: Define el ancho del botón CTA. Puede establecerse en automático o con un valor específico en píxeles para mayor control del diseño.
  • CTA height: Controla la altura del botón CTA. Puede ajustarse automáticamente o definirse manualmente para mantener consistencia visual.
  • Background Type: Permite elegir el tipo de fondo del botón (color sólido, degradado o transparente según configuración disponible).
  • Text color: Define el color del texto del botón. Puede personalizarse para mejorar contraste y accesibilidad.
  • Typography: Permite configurar la tipografía del texto del botón, incluyendo fuente, tamaño, peso, estilo y espaciado.
  • Text alignment: Establece la alineación del texto dentro del botón (izquierda, centro o derecha).
  • Border Type: Define el estilo del borde del botón (sólido, punteado, doble, etc.). Al activarse, permite ajustar su apariencia.
  • Border radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma independiente por lado o de manera uniforme.
  • Padding (Relleno): Espacio interno entre el texto del botón y sus bordes. Permite mejorar la legibilidad y el área clickeable.
  • Margin (Margen): Espacio externo alrededor del botón, utilizado para separarlo de otros elementos dentro del layout.
  • Box Shadow: Permite aplicar una sombra al botón para generar profundidad. Se pueden ajustar parámetros como desplazamiento, desenfoque y color.
  • Overflow: Define cómo se comporta el contenido que excede los límites del botón (visible, oculto, automático, etc.).
  • Icon width: Define el ancho del ícono dentro del botón CTA. Puede ajustarse en píxeles para mantener proporción y coherencia visual.
  • CTA height: Controla la altura del contenedor del ícono dentro del botón. Permite alinear correctamente el ícono con el texto u otros elementos.
  • Background Type: Permite establecer el tipo de fondo del contenedor del ícono (color sólido, degradado o transparente según configuración disponible).
  • Icon color: Define el color del ícono. Puede personalizarse para mejorar visibilidad, contraste o adaptarse al branding.
  • Border Type: Establece el estilo del borde del contenedor del ícono (sólido, punteado, doble, etc.). Al activarse, permite modificar su apariencia.
  • Icon border radius: Controla la curvatura de las esquinas del contenedor del ícono. Puede configurarse individualmente o de forma global.
  • Icon padding (Relleno): Espacio interno entre el ícono y los bordes de su contenedor. Ayuda a mejorar la legibilidad y el balance visual.
  • Icon margin (Margen): Espacio externo alrededor del contenedor del ícono. Permite separarlo de otros elementos como texto o botones.
  • Icon box shadow: Permite aplicar una sombra al contenedor del ícono para generar profundidad y destacar el elemento dentro del diseño.

  Add to cart CTA

  • Normal / Hover: Permite configurar estilos diferenciados para el botón en estado normal y cuando el usuario pasa el cursor por encima (hover).
  • CTA width: Define el ancho del botón CTA. Puede establecerse en automático o con un valor específico en píxeles para mayor control del diseño.
  • CTA height: Controla la altura del botón CTA. Puede ajustarse automáticamente o definirse manualmente para mantener consistencia visual.
  • Background Type: Permite elegir el tipo de fondo del botón (color sólido, degradado o transparente según configuración disponible).
  • Text color: Define el color del texto del botón. Puede personalizarse para mejorar contraste y accesibilidad.
  • Typography: Permite configurar la tipografía del texto del botón, incluyendo fuente, tamaño, peso, estilo y espaciado.
  • Text alignment: Establece la alineación del texto dentro del botón (izquierda, centro o derecha).
  • Border Type: Define el estilo del borde del botón (sólido, punteado, doble, etc.). Al activarse, permite ajustar su apariencia.
  • Border radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma independiente por lado o de manera uniforme.
  • Padding (Relleno): Espacio interno entre el texto del botón y sus bordes. Permite mejorar la legibilidad y el área clickeable.
  • Margin (Margen): Espacio externo alrededor del botón, utilizado para separarlo de otros elementos dentro del layout.
  • Box Shadow: Permite aplicar una sombra al botón para generar profundidad. Se pueden ajustar parámetros como desplazamiento, desenfoque y color.
  • Overflow: Define cómo se comporta el contenido que excede los límites del botón (visible, oculto, automático, etc.).
  • Icon width: Define el ancho del ícono dentro del botón CTA. Puede ajustarse en píxeles para mantener proporción y coherencia visual.
  • CTA height: Controla la altura del contenedor del ícono dentro del botón. Permite alinear correctamente el ícono con el texto u otros elementos.
  • Background Type: Permite establecer el tipo de fondo del contenedor del ícono (color sólido, degradado o transparente según configuración disponible).
  • Icon color: Define el color del ícono. Puede personalizarse para mejorar visibilidad, contraste o adaptarse al branding.
  • Border Type: Establece el estilo del borde del contenedor del ícono (sólido, punteado, doble, etc.). Al activarse, permite modificar su apariencia.
  • Icon border radius: Controla la curvatura de las esquinas del contenedor del ícono. Puede configurarse individualmente o de forma global.
  • Icon padding (Relleno): Espacio interno entre el ícono y los bordes de su contenedor. Ayuda a mejorar la legibilidad y el balance visual.
  • Icon margin (Margen): Espacio externo alrededor del contenedor del ícono. Permite separarlo de otros elementos como texto o botones.
  • Icon box shadow: Permite aplicar una sombra al contenedor del ícono para generar profundidad y destacar el elemento dentro del diseño.

  View cart CTA

  • Normal / Hover: Permite configurar dos estados del botón: estado normal (por defecto) y estado hover (cuando el usuario pasa el cursor). Cada uno puede tener estilos independientes.
  • CTA width: Define el ancho del botón “View cart”. Puede establecerse en automático o con un valor específico para controlar su tamaño dentro del layout.
  • CTA height: Controla la altura del botón. Permite ajustar la proporción vertical para mejorar la accesibilidad y estética.
  • Background Type: Permite seleccionar el tipo de fondo del botón (color sólido, degradado o transparente según configuración disponible).
  • Text color: Define el color del texto del botón. Es clave para garantizar contraste y legibilidad.
  • Typography: Permite personalizar la tipografía del texto (familia, tamaño, peso, estilo, espaciado, etc.).
  • Text alignment: Controla la alineación del contenido dentro del botón (izquierda, centro o derecha).
  • Border Type: Define el estilo del borde del botón (sólido, punteado, doble, etc.). Al activarse, permite ajustar color y grosor.
  • Border radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma uniforme o individual por lado.
  • Padding (Relleno): Espacio interno entre el texto y los bordes del botón. Mejora la legibilidad y el área clicable.
  • Margin (Margen): Espacio externo alrededor del botón que lo separa de otros elementos.
  • Box Shadow: Permite aplicar una sombra al botón para generar profundidad y destacar el CTA visualmente.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (visible, oculto, automático, etc.).

  Buy now CTA

  • Normal / Hover: Permite configurar estilos diferenciados para el botón en estado normal y cuando el usuario pasa el cursor por encima (hover).
  • CTA width: Define el ancho del botón CTA. Puede establecerse en automático o con un valor específico en píxeles para mayor control del diseño.
  • CTA height: Controla la altura del botón CTA. Puede ajustarse automáticamente o definirse manualmente para mantener consistencia visual.
  • Background Type: Permite elegir el tipo de fondo del botón (color sólido, degradado o transparente según configuración disponible).
  • Text color: Define el color del texto del botón. Puede personalizarse para mejorar contraste y accesibilidad.
  • Typography: Permite configurar la tipografía del texto del botón, incluyendo fuente, tamaño, peso, estilo y espaciado.
  • Text alignment: Establece la alineación del texto dentro del botón (izquierda, centro o derecha).
  • Border Type: Define el estilo del borde del botón (sólido, punteado, doble, etc.). Al activarse, permite ajustar su apariencia.
  • Border radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma independiente por lado o de manera uniforme.
  • Padding (Relleno): Espacio interno entre el texto del botón y sus bordes. Permite mejorar la legibilidad y el área clickeable.
  • Margin (Margen): Espacio externo alrededor del botón, utilizado para separarlo de otros elementos dentro del layout.
  • Box Shadow: Permite aplicar una sombra al botón para generar profundidad. Se pueden ajustar parámetros como desplazamiento, desenfoque y color.
  • Overflow: Define cómo se comporta el contenido que excede los límites del botón (visible, oculto, automático, etc.).
  • Icon width: Define el ancho del ícono dentro del botón CTA. Puede ajustarse en píxeles para mantener proporción y coherencia visual.
  • CTA height: Controla la altura del contenedor del ícono dentro del botón. Permite alinear correctamente el ícono con el texto u otros elementos.
  • Background Type: Permite establecer el tipo de fondo del contenedor del ícono (color sólido, degradado o transparente según configuración disponible).
  • Icon color: Define el color del ícono. Puede personalizarse para mejorar visibilidad, contraste o adaptarse al branding.
  • Border Type: Establece el estilo del borde del contenedor del ícono (sólido, punteado, doble, etc.). Al activarse, permite modificar su apariencia.
  • Icon border radius: Controla la curvatura de las esquinas del contenedor del ícono. Puede configurarse individualmente o de forma global.
  • Icon padding (Relleno): Espacio interno entre el ícono y los bordes de su contenedor. Ayuda a mejorar la legibilidad y el balance visual.
  • Icon margin (Margen): Espacio externo alrededor del contenedor del ícono. Permite separarlo de otros elementos como texto o botones.
  • Icon box shadow: Permite aplicar una sombra al contenedor del ícono para generar profundidad y destacar el elemento dentro del diseño.

  Carousel controls

  • Position: Define el tipo de posicionamiento de los controles del carrusel (por ejemplo, relative, absolute). Determina cómo se ubican respecto a su contenedor.
  • Normal / Hover: Permite configurar estilos distintos para el estado normal de los controles y para cuando el usuario pasa el cursor sobre ellos.
  • Controls width: Establece el ancho total del contenedor de los controles (flechas o botones de navegación del carrusel).
  • Controls height: Define la altura del área de los controles, afectando directamente el tamaño del área interactiva.
  • Vertical alignment: Controla la alineación vertical de los controles dentro del carrusel (arriba, centro o abajo).
  • Horizontal alignment: Permite alinear los controles horizontalmente (izquierda, centro o derecha).
  • Background Type: Define el tipo de fondo de los controles (color sólido, degradado o transparente según configuración).
  • Icon color: Permite establecer el color de los iconos de navegación (flechas u otros indicadores).
  • Controls icon width: Define el ancho de los iconos dentro de los controles, ajustando su tamaño visual.
  • Controls icon height: Controla la altura de los iconos. Puede ser automática o personalizada.
  • Border Type: Define el estilo del borde de los controles (sólido, punteado, doble, etc.), incluyendo configuración de color y grosor.
  • Border radius: Ajusta la curvatura de las esquinas del contenedor de los controles. Puede configurarse de forma uniforme o individual por lado.
  • Padding (Relleno): Espacio interno entre los iconos y el borde del contenedor de los controles.
  • Margin (Margen): Espacio externo que separa los controles del carrusel u otros elementos cercanos.
  • Box Shadow: Permite aplicar una sombra alrededor de los controles para dar profundidad y mejorar su visibilidad.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor de los controles (visible, oculto, automático, etc.).

  Carousel dots

  • Position: Define la posición de los puntos (dots) del carrusel dentro del contenedor (por ejemplo, relative, absolute, etc.).
  • Vertical alignment: Permite alinear verticalmente los dots (arriba, centro o abajo).
  • Horizontal alignment: Define la alineación horizontal de los dots (izquierda, centro o derecha).
  • Background color: Establece el color de fondo del contenedor de los dots.
  • Border: Permite configurar el grosor del borde del contenedor en cada lado.
  • Border radius: Ajusta la curvatura de las esquinas del contenedor de los dots.
  • Border color: Define el color del borde del contenedor.
  • Padding: Establece el espacio interno dentro del contenedor de los dots.
  • Margin: Define el espacio externo alrededor del contenedor.
  • Normal / Hover / Active: Permite configurar estilos distintos para los dots en estado normal, al pasar el cursor (hover) y cuando están activos.
  • Dots width: Ajusta el ancho de cada dot.
  • Dots height: Define la altura de cada dot.
  • Background color (dots): Establece el color de fondo de los dots según el estado seleccionado.
  • Border (dots): Permite configurar el borde de cada dot.
  • Border radius (dots): Ajusta la forma de los dots (por ejemplo, circular si el radio es alto).
  • Border color (dots): Define el color del borde de cada dot.
  • Padding (dots): Establece el espacio interno dentro de cada dot.
  • Margin (dots): Define el espacio entre los dots.
  • Box Shadow (dots): Permite aplicar una sombra alrededor de cada dot. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Search Form

El widget Search Form permite añadir un formulario de búsqueda funcional en cualquier parte de tu sitio.

Es ideal para:

  • Headers (cabeceras)
  • Sidebars
  • Páginas internas
  • Footers

Facilita la navegación y mejora la experiencia del usuario.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Search Form dentro de la categoría correspondiente.
  3. Arrastra el widget Search Form al área de diseño.
  4. Colócalo en la sección donde deseas mostrar el buscador.

Configuración del Widget Search Form

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Form settings

  • Form redirect: Permite definir una URL de redirección después de que el usuario envía el formulario. Al completarse correctamente el envío, el usuario será dirigido automáticamente a la dirección especificada.
  • Submit button text: Define el texto que se muestra en el botón de envío del formulario (por ejemplo, “Search”, “Enviar”, “Buscar”, etc.). Puede personalizarse según el contexto o idioma del sitio.

  Form fields

  • Field label: Identificador interno del campo dentro del constructor. Permite reconocer y organizar cada campo en la lista de campos configurados.
  • Label: Define el texto visible que describe el campo para el usuario (por ejemplo, “Nombre”, “Correo electrónico”). Es clave para la usabilidad y comprensión del formulario.
  • Show label: Permite mostrar u ocultar la etiqueta (Label) en la interfaz del formulario. Si se desactiva, el campo puede depender únicamente del placeholder.
  • Name: Define el nombre interno del campo utilizado para el procesamiento de datos (por ejemplo, en envíos o integraciones). Debe ser único y sin espacios.
  • Type: Permite seleccionar el tipo de campo (texto, email, número, textarea, etc.), lo que determina el formato de entrada y validación del dato.
  • Placeholder: Texto de ayuda que aparece dentro del campo antes de que el usuario ingrese información. Sirve como guía sobre qué tipo de dato se espera.
  • Options: Campo utilizado en tipos de entrada que requieren múltiples opciones (como select, radio o checkbox). Permite definir cada opción disponible para el usuario.
  • Default value: Establece un valor predeterminado que aparecerá automáticamente en el campo al cargar el formulario.
  • Required: Permite definir si el campo es obligatorio. Si está activado, el usuario deberá completarlo antes de enviar el formulario.
  • Error message: Mensaje personalizado que se mostrará cuando el campo no cumpla con la validación (por ejemplo, si está vacío siendo obligatorio).
  • Field width: Controla el ancho del campo dentro del formulario, generalmente expresado en porcentaje (%), permitiendo organizar múltiples campos en una misma fila.
  • Add Item: Permite agregar un nuevo campo al formulario, duplicando la estructura de configuración para crear formularios personalizados más complejos.

Style

  Form

  • Horizontal alignment: Controla la alineación horizontal del formulario dentro de su contenedor (izquierda, centro o derecha).
  • Width: Define el ancho total del formulario. Puede ajustarse en píxeles (px) u otras unidades según el diseño.
  • Background Type: Permite configurar el tipo de fondo del formulario (color sólido, degradado, imagen, etc.), influyendo en la apariencia visual general.
  • Border Type: Define el estilo del borde del formulario (por ejemplo: sólido, punteado, ninguno, etc.).
  • Border radius: Permite redondear las esquinas del formulario. Se puede ajustar de forma individual (arriba, derecha, abajo, izquierda) o de manera global.
  • Padding: Controla el espacio interno entre el contenido del formulario y sus bordes. Afecta directamente la legibilidad y el diseño interno.
  • Margin: Define el espacio externo del formulario respecto a otros elementos. Sirve para separar el formulario dentro del layout.
  • Box Shadow: Permite aplicar una sombra al contenedor del formulario, añadiendo profundidad y destacándolo visualmente.

  Fields container

  • Width: Define el ancho del contenedor que agrupa todos los campos del formulario. Permite ajustar cómo se distribuyen dentro del layout.
  • Horizontal alignment: Controla la alineación horizontal del contenedor dentro de su sección (izquierda, centro o derecha).
  • Background Type: Permite establecer el tipo de fondo del contenedor (color, degradado o imagen), afectando la apariencia visual del bloque.
  • Border Type: Define el estilo del borde del contenedor (por ejemplo: sólido, punteado o sin borde).
  • Border radius: Permite redondear las esquinas del contenedor. Se puede configurar de forma individual (top, right, bottom, left) o de manera uniforme.
  • Padding: Controla el espacio interno entre los campos y el borde del contenedor. Mejora la legibilidad y el diseño.
  • Margin: Define el espacio externo del contenedor respecto a otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra al contenedor para darle profundidad y destacarlo visualmente.

  Labels

  • Width: Define el ancho de las etiquetas (labels) de los campos del formulario. Permite controlar cuánto espacio ocupan dentro del layout.
  • Background Type: Permite establecer un fondo para las etiquetas (color, degradado o imagen), útil para destacarlas o integrarlas con el diseño.
  • Text color: Define el color del texto de las etiquetas.
  • Text alignment: Controla la alineación del texto dentro de la etiqueta (izquierda, centro o derecha).
  • Typography: Permite personalizar la tipografía del texto (fuente, tamaño, peso, estilo, etc.).
  • Border Type: Define el estilo del borde de las etiquetas.
  • Border radius: Permite redondear las esquinas de las etiquetas. Se puede configurar de forma individual o uniforme.
  • Padding: Controla el espacio interno dentro de la etiqueta (entre el texto y el borde).
  • Margin: Define el espacio externo de la etiqueta respecto a otros elementos.
  • Box Shadow: Permite aplicar una sombra a las etiquetas para darles profundidad visual.

  Inputs

  • Normal / Focus: Permite configurar estilos diferentes para los campos en estado normal y cuando están activos (focus).
  • Width: Define el ancho de los campos de entrada.
  • Height: Define la altura de los inputs.
  • Background Type: Permite establecer el fondo del campo (color, degradado o imagen).
  • Text color: Define el color del texto que el usuario escribe dentro del input.
  • Placeholder color: Define el color del texto placeholder (texto de ayuda dentro del campo).
  • Typography: Permite personalizar la tipografía del texto del input (fuente, tamaño, peso, etc.).
  • Border Type: Define el estilo del borde del campo.
  • Border radius: Permite redondear las esquinas del input.
  • Padding: Controla el espacio interno dentro del campo (separación entre texto y borde).
  • Margin: Define el espacio externo del campo respecto a otros elementos.
  • Box Shadow: Permite aplicar una sombra al campo para mejorar su apariencia visual o destacar el foco.

  Submit container

  • Width: Define el ancho del contenedor donde se encuentra el botón de envío.
  • Horizontal alignment: Permite alinear el contenido horizontalmente (izquierda, centro o derecha).
  • Vertical alignment: Permite alinear el contenido verticalmente dentro del contenedor.
  • Background Type: Define el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Border Type: Permite elegir el estilo del borde del contenedor.
  • Border radius: Controla el redondeo de las esquinas del contenedor.
  • Padding: Define el espacio interno entre el contenido (botón) y los bordes del contenedor.
  • Margin: Establece el espacio externo del contenedor respecto a otros elementos.
  • Box Shadow: Permite aplicar una sombra al contenedor para darle profundidad o destacar visualmente.

  Submit

  • Normal / Hover: Permite configurar estilos diferentes para el estado normal del botón y cuando el usuario pasa el cursor sobre él.
  • Width: Define el ancho del botón de envío.
  • Height: Define la altura del botón.
  • Background Type: Permite establecer el tipo de fondo del botón (color sólido, degradado o imagen).
  • Text color: Define el color del texto del botón.
  • Typography: Permite personalizar la tipografía del texto (fuente, tamaño, peso, etc.).
  • Border Type: Define el estilo del borde del botón.
  • Border radius: Controla el redondeo de las esquinas del botón.
  • Padding: Define el espacio interno entre el texto y los bordes del botón.
  • Margin: Establece el espacio externo del botón respecto a otros elementos.
  • Box Shadow: Permite aplicar una sombra al botón para darle profundidad o resaltar visualmente.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Contact Form 7

El widget Contact Form 7 permite mostrar formularios de contacto dentro de tu sitio web.

Es ideal para:

  • Formularios de contacto
  • Solicitudes de información
  • Formularios de soporte
  • Captación de leads

Permite gestionar la comunicación con los usuarios de forma eficiente.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Contact Form 7 dentro de la categoría correspondiente.
  3. Arrastra el widget Contact Form 7 al área de diseño.
  4. Colócalo en la sección donde deseas mostrar el formulario.

Configuración del Widget Contact Form 7

Una vez agregado el widget, podrás configurarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Form

  • Form shortcode: Campo donde puedes pegar o generar el shortcode del formulario que deseas mostrar. Este código conecta el formulario creado (por ejemplo, desde un plugin o constructor) con esta sección para que se renderice correctamente en la página.

Style

  Form

  • Width: Permite ajustar el ancho del formulario. Puedes definirlo manualmente en píxeles (px) o usar el control deslizante para adaptarlo al diseño.
  • Background color: Define el color de fondo del formulario. Puedes elegir un color sólido o dejarlo transparente según el estilo de tu página.
  • Text color: Controla el color del texto dentro del formulario (labels, inputs, etc.).
  • Typography: Configura la tipografía del formulario, incluyendo fuente, tamaño, peso y estilo del texto.
  • Border: Permite definir el grosor del borde del formulario en cada lado (superior, derecho, inferior e izquierdo).
  • Border radius: Ajusta el redondeo de las esquinas del formulario. Puedes establecer valores diferentes para cada esquina o unificarlos.
  • Border color: Define el color del borde del formulario.
  • Padding: Controla el espacio interno entre el contenido del formulario y sus bordes.
  • Margin: Ajusta el espacio externo alrededor del formulario, separándolo de otros elementos de la página.

  Labels

  • Show label: Permite mostrar u ocultar las etiquetas (labels) de los campos del formulario. Si está en “Yes”, los nombres de los campos serán visibles.
  • Width: Define el ancho de las etiquetas. Puedes ajustarlo manualmente en píxeles (px) o mediante el control deslizante.
  • Background color: Establece el color de fondo de las etiquetas.
  • Text color: Controla el color del texto de las etiquetas.
  • Typography: Permite personalizar la tipografía de las etiquetas (fuente, tamaño, peso, estilo, etc.).
  • Border: Define el grosor del borde de las etiquetas, configurable de forma independiente para cada lado (top, right, bottom, left).
  • Border radius: Ajusta el redondeo de las esquinas de las etiquetas.
  • Border color: Permite elegir el color del borde de las etiquetas.
  • Padding: Controla el espacio interno entre el contenido (texto) y los bordes de la etiqueta.
  • Margin: Define el espacio externo alrededor de las etiquetas, separándolas de otros elementos.

  Fields

  • Normal / Focus: Permite configurar estilos distintos para los campos en su estado normal y cuando están activos (cuando el usuario hace clic o escribe en ellos).
  • Background color: Define el color de fondo de los campos del formulario.
  • Text color: Establece el color del texto que el usuario introduce en los campos.
  • Placeholder color: Controla el color del texto de ayuda (placeholder) que aparece dentro del campo antes de escribir.
  • Typography: Permite personalizar la tipografía del contenido del campo (fuente, tamaño, peso, etc.).
  • Border: Define el grosor del borde de los campos, configurable de forma independiente en cada lado (top, right, bottom, left).
  • Border radius: Ajusta el redondeo de las esquinas de los campos.
  • Border color: Permite elegir el color del borde de los campos.
  • Padding: Controla el espacio interno dentro del campo (distancia entre el texto y el borde).
  • Margin: Define el espacio externo alrededor de cada campo, separándolo de otros elementos.

  Checkbox / Radio

  • Background color: Define el color de fondo de los checkboxes y botones de opción (radio).
  • Text color: Establece el color del texto asociado a cada opción.
  • Placeholder color: Controla el color del texto auxiliar o descriptivo (si aplica en el diseño del campo).
  • Typography: Permite personalizar la tipografía del texto de las opciones (fuente, tamaño, peso, etc.).
  • Border: Define el grosor del borde de los elementos, ajustable por cada lado (top, right, bottom, left).
  • Border radius: Ajusta el nivel de redondeo de las esquinas (más visible en checkboxes que en radios).
  • Border color: Permite seleccionar el color del borde de los elementos.
  • Padding: Controla el espacio interno dentro del área del checkbox/radio y su contenido.
  • Margin: Define el espacio externo entre cada opción y otros elementos del formulario.

  Checkbox / Radio labels

  • Background color: Define el color de fondo de las etiquetas asociadas a los checkbox o radio buttons.
  • Text color: Establece el color del texto dentro de las etiquetas.
  • Border: Permite ajustar el grosor del borde de la etiqueta en cada lado (superior, derecho, inferior e izquierdo).
  • Border radius: Controla el nivel de redondeo de las esquinas de la etiqueta.
  • Border color: Define el color del borde de la etiqueta.
  • Padding: Ajusta el espacio interno entre el contenido (texto) y los bordes de la etiqueta.
  • Margin: Controla el espacio externo alrededor de cada etiqueta respecto a otros elementos.

  Submit

  • Normal / Hover: Permite configurar el estilo del botón en su estado normal y cuando el usuario pasa el cursor por encima (hover).
  • Background color: Define el color de fondo del botón de envío.
  • Text color: Establece el color del texto dentro del botón.
  • Typography: Permite personalizar la tipografía del texto del botón (fuente, tamaño, peso, etc.).
  • Border: Controla el grosor del borde del botón, configurable por cada lado (top, right, bottom, left).
  • Border radius: Ajusta qué tan redondeadas serán las esquinas del botón.
  • Border color: Define el color del borde del botón.
  • Padding: Controla el espacio interno entre el texto y los bordes del botón.
  • Margin: Define el espacio externo alrededor del botón respecto a otros elementos.

  Message

  • Background color: Define el color de fondo del mensaje (por ejemplo, mensajes de éxito, error o información).
  • Text color: Establece el color del texto que aparece dentro del mensaje.
  • Typography: Permite personalizar la tipografía del mensaje (fuente, tamaño, peso, etc.).
  • Border: Ajusta el grosor del borde del mensaje en cada lado (superior, derecho, inferior e izquierdo).
  • Border radius: Controla qué tan redondeadas son las esquinas del contenedor del mensaje.
  • Border color: Define el color del borde del mensaje.
  • Padding: Determina el espacio interno entre el contenido del mensaje y sus bordes.
  • Margin: Controla el espacio externo alrededor del mensaje respecto a otros elementos.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Search Form

El widget WC: Search Form permite añadir un buscador de productos dentro de tu tienda online.

Es ideal para:

  • Tiendas WooCommerce
  • Headers de eCommerce
  • Páginas de tienda
  • Sidebars

Facilita que los usuarios encuentren productos de forma rápida y precisa.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Search Form dentro de la categoría correspondiente.
  3. Arrastra el widget WC: Search Form al área de diseño.
  4. Colócalo en la sección donde deseas mostrar el buscador.

Configuración del Widget WC: Search Form

Una vez agregado el widget, podrás configurarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Form settings

  • Form redirect: Permite definir una URL a la que se redirigirá al usuario después de enviar el formulario.
  • Submit button text: Aquí puedes personalizar el texto del botón de envío (por ejemplo: “Enviar”, “Buscar”, “Registrarse”, etc.).
  • Submit button icon: Permite añadir un ícono al botón de envío para reforzar visualmente su acción (por ejemplo, una lupa para búsqueda o un avión de papel para enviar).

  Form fields

  • Fields: Sección donde gestionas los campos del formulario.
  • Field label: Nombre interno del campo para identificarlo dentro del editor.
  • Label: Texto visible que verá el usuario como título del campo.
  • Show label: Permite mostrar u ocultar el label en el formulario.
  • Name: Identificador único del campo (clave para envíos o integraciones).
  • Type: Define el tipo de campo (texto, email, número, etc.).
  • Placeholder: Texto de ayuda dentro del campo antes de que el usuario escriba.
  • Options: Se utiliza en campos como select, radio o checkbox para definir las opciones disponibles.
  • Default value: Valor que aparecerá predefinido en el campo.
  • Required: Define si el campo es obligatorio o no.
  • Error message: Mensaje que se mostrará si el usuario no completa correctamente el campo.
  • Field width: Controla el ancho del campo dentro del formulario (porcentaje o tamaño relativo).
  • Add Item: Botón para añadir nuevos campos al formulario.

Style

  Form

  • Horizontal alignment: Permite alinear el formulario horizontalmente (izquierda, centro o derecha).
  • Width: Define el ancho del formulario. Puede ajustarse en píxeles u otras unidades.
  • Background Type: Establece el tipo de fondo del formulario (color sólido, degradado, imagen, etc.).
  • Border Type: Define el estilo del borde (por defecto, sólido, ninguno, etc.).
  • Border radius: Controla qué tan redondeadas son las esquinas del formulario (Top, Right, Bottom, Left).
  • Padding: Espaciado interno del formulario (distancia entre el contenido y los bordes).
  • Margin: Espaciado externo del formulario (distancia respecto a otros elementos).
  • Box Shadow: Permite añadir sombra al formulario para darle profundidad o destacar visualmente.

  Fields container

  • Width: Define el ancho del contenedor que agrupa todos los campos del formulario.
  • Horizontal alignment: Permite alinear horizontalmente el contenedor (izquierda, centro o derecha).
  • Background Type: Establece el tipo de fondo del contenedor (color sólido, degradado, imagen, etc.).
  • Border Type: Define el estilo del borde del contenedor (por defecto, sólido, ninguno, etc.).
  • Border radius: Controla el redondeo de las esquinas del contenedor (Top, Right, Bottom, Left).
  • Padding: Espaciado interno del contenedor, es decir, la distancia entre los campos y el borde.
  • Margin: Espaciado externo del contenedor respecto a otros elementos.
  • Box Shadow: Permite añadir una sombra alrededor del contenedor para darle profundidad o resaltarlo visualmente.

  Field container

  • Background Type: Define el tipo de fondo del contenedor del campo (color sólido, degradado, imagen, etc.).
  • Border Type: Permite elegir el estilo del borde del contenedor (por defecto, sólido, ninguno, etc.).
  • Border radius: Controla el redondeo de las esquinas del contenedor (Top, Right, Bottom, Left).
  • Padding: Establece el espacio interno entre el contenido del campo y el borde del contenedor.
  • Margin: Define el espacio externo alrededor del contenedor del campo respecto a otros elementos.
  • Box Shadow: Permite añadir una sombra al contenedor para generar profundidad o destacar visualmente el campo.

  Labels

  • Width: Define el ancho de las etiquetas (labels) dentro del formulario.
  • Background Type: Permite configurar el tipo de fondo de las etiquetas (color sólido, degradado o imagen).
  • Text color: Establece el color del texto de las etiquetas.
  • Text alignment: Controla la alineación del texto dentro de la etiqueta (izquierda, centro, derecha).
  • Typography: Permite ajustar la tipografía (fuente, tamaño, peso, estilo, etc.).
  • Border Type: Define el estilo del borde de las etiquetas (por defecto, sólido, ninguno, etc.).
  • Border radius: Controla el redondeo de las esquinas de las etiquetas.
  • Padding: Establece el espacio interno entre el contenido de la etiqueta y su borde.
  • Margin: Define el espacio externo alrededor de cada etiqueta.
  • Box Shadow: Permite añadir una sombra a las etiquetas para dar profundidad o resaltarlas visualmente.

  Inputs

  • Normal / Focus: Permite configurar estilos distintos para los campos en estado normal y cuando están activos (seleccionados por el usuario).
  • Width: Define el ancho de los campos de entrada.
  • Height: Ajusta la altura de los inputs.
  • Background Type: Permite configurar el tipo de fondo del campo (color sólido, degradado o imagen).
  • Text color: Establece el color del texto que el usuario escribe dentro del campo.
  • Placeholder color: Define el color del texto de ayuda (placeholder) que aparece dentro del input.
  • Typography: Permite personalizar la tipografía del texto dentro del campo (fuente, tamaño, peso, etc.).
  • Border Type: Define el estilo del borde del input.
  • Border radius: Controla qué tan redondeadas son las esquinas del campo.
  • Padding: Establece el espacio interno entre el contenido del campo y sus bordes.
  • Margin: Define el espacio externo alrededor del input.
  • Box Shadow: Permite añadir una sombra al campo para mejorar su apariencia o destacar cuando está activo.

  Submit container

  • Width: Define el ancho del contenedor donde se encuentra el botón de envío.
  • Horizontal alignment: Permite alinear el contenedor horizontalmente (izquierda, centro o derecha).
  • Vertical alignment: Ajusta la alineación vertical del contenido dentro del contenedor (arriba, centro o abajo).
  • Background Type: Configura el tipo de fondo del contenedor (color, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor.
  • Border radius: Controla el redondeo de las esquinas del contenedor.
  • Padding: Establece el espacio interno entre el contenido (botón) y los bordes del contenedor.
  • Margin: Define el espacio externo alrededor del contenedor.
  • Box Shadow: Permite añadir una sombra al contenedor para darle profundidad o destacarlo visualmente.

  Submit

  • Normal / Hover: Permite configurar estilos diferentes para el botón en estado normal y cuando el usuario pasa el cursor por encima (hover).
  • Width: Define el ancho del botón de envío.
  • Height: Establece la altura del botón.
  • Background Type: Configura el fondo del botón (color sólido, degradado o imagen).
  • Text color: Define el color del texto dentro del botón.
  • Typography: Permite ajustar la tipografía del texto (fuente, tamaño, peso, etc.).
  • Border Type: Establece el estilo del borde del botón.
  • Border radius: Controla el redondeo de las esquinas del botón.
  • Padding: Define el espacio interno entre el texto y los bordes del botón.
  • Margin: Establece el espacio externo alrededor del botón.
  • Box Shadow: Permite añadir una sombra al botón para darle relieve o destacar visualmente.

  Submit icon

  • Normal / Hover: Permite definir estilos distintos para el icono del botón en estado normal y cuando el usuario pasa el cursor (hover).
  • Width: Ajusta el ancho del icono.
  • Height: Define la altura del icono.
  • Background Type: Configura el fondo del icono (color sólido, degradado o imagen).
  • Icon color: Permite elegir el color del icono.
  • Border Type: Define el estilo del borde del contenedor del icono.
  • Border radius: Controla el redondeo de las esquinas del icono.
  • Padding: Establece el espacio interno entre el icono y su contenedor.
  • Margin: Define el espacio externo alrededor del icono.
  • Box Shadow: Permite añadir una sombra para resaltar el icono visualmente.

Guarda y publica tu diseño

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Products Filters

El widget WC: Products Filters permite crear sistemas de filtrado para productos de WooCommerce.

Es ideal para:

  • Tiendas con muchos productos
  • Catálogos extensos
  • Mejorar la experiencia de búsqueda
  • Filtrado por características específicas

Permite a los usuarios encontrar productos de forma rápida y precisa.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Products Filters dentro de la categoría correspondiente.
  3. Arrastra el widget WC: Products Filters al área de diseño.
  4. Colócalo en la sección donde deseas mostrar los filtros.

Configuración del Widget WC: Products Filters

Una vez agregado el widget, podrás configurarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Ordering filter

  • Show ordering filter: Activa o desactiva la visualización del filtro de ordenamiento dentro del formulario o listado.
  • Show ordering filter title: Permite mostrar u ocultar el título del filtro de ordenamiento.
  • Ordering title: Define el texto que aparecerá como título del filtro (por defecto: Ordering), y puede personalizarse manualmente.

  Price filter

  • Show price filter: Activa o desactiva la visualización del filtro de precio.
  • Show price filter title: Permite mostrar u ocultar el título del filtro de precio.
  • Price title: Define el texto del título del filtro (por defecto: Price). Puede personalizarse manualmente o generarse con IA.
  • Min price input placeholder: Texto que aparece como ayuda dentro del campo de precio mínimo.
  • Max price input placeholder: Texto que aparece como ayuda dentro del campo de precio máximo.
  • Price submit text: Texto del botón para aplicar el filtro de precio.
  • Price submit icon: Permite añadir o cambiar el ícono del botón de envío del filtro de precio.

  Brands filter

  • Show brands filter: Activa o desactiva la visualización del filtro de marcas.
  • Show brands filter title: Permite mostrar u ocultar el título del filtro de marcas.
  • Brands title: Define el texto del título del filtro (por defecto: Brands). Puede personalizarse manualmente o generarse con IA.
  • Layout Style: Selecciona el estilo de visualización de las marcas (por ejemplo, lista).
  • Hide empty brands: Oculta las marcas que no tienen productos asociados.
  • Hide sub brands: Permite ocultar las subcategorías o submarcas dentro del filtro.
  • Include brands: Permite añadir manualmente marcas específicas que quieres mostrar.
  • Exclude brands: Permite excluir marcas específicas del listado.
  • Order by: Define el criterio de orden (por ejemplo, por nombre).
  • Order: Define el tipo de orden (ascendente o descendente).

  Attributes filter

  • Show attributes filter: Activa o desactiva completamente la visualización del bloque de filtros por atributos en el frontend.
  • Show attribute: color: Permite mostrar u ocultar el filtro correspondiente al atributo color.
  • Show attribute title: color: Controla si se muestra el título del filtro de color en la interfaz.
  • Filter title: color: Define el texto del encabezado del filtro de color (por ejemplo, “Color”). Puede editarse manualmente o generarse con IA.
  • Hide empty attributes: Oculta los valores de color que no tienen productos asociados.
  • Include attributes: Permite incluir manualmente colores específicos que se desean mostrar.
  • Exclude attributes: Permite excluir colores específicos del listado del filtro.
  • Order by: Define el criterio de orden de los colores (por ejemplo, por nombre).
  • Order: Establece si el orden será ascendente o descendente.
  • Show attribute: number: Activa o desactiva la visualización del filtro basado en números (por ejemplo, tallas numéricas).
  • Show attribute title: number: Muestra u oculta el título del filtro de número.
  • Filter title: number: Permite definir el nombre visible del filtro (por ejemplo, “Número”).
  • Hide empty attributes: Oculta los valores numéricos que no tienen productos asociados.
  • Include attributes: Permite seleccionar manualmente qué valores numéricos incluir.
  • Exclude attributes: Permite excluir valores específicos del filtro.
  • Order by: Define cómo se ordenan los valores (por ejemplo, por nombre).
  • Order: Determina si el orden es ascendente o descendente.
  • Show attribute: pattern: Activa o desactiva el filtro de patrones o diseños.
  • Show attribute title: pattern: Permite mostrar u ocultar el título del filtro de patrones.
  • Filter title: pattern: Define el nombre visible del filtro (por ejemplo, “Patrón”).
  • Hide empty attributes: Oculta patrones sin productos asociados.
  • Include attributes: Permite incluir patrones específicos manualmente.
  • Exclude attributes: Permite excluir patrones del listado.
  • Order by: Define el criterio de orden de los patrones.
  • Order: Define si el orden es ascendente o descendente.
  • Images size: Permite definir el tamaño de las imágenes representativas de cada patrón (por ejemplo, miniaturas).
  • Show attribute: size: Activa o desactiva el filtro de tallas.
  • Show attribute title: size: Controla si se muestra el título del filtro de tallas.
  • Filter title: size: Define el nombre visible del filtro (por ejemplo, “Talla”).
  • Hide empty attributes: Oculta tallas sin productos disponibles.
  • Include attributes: Permite incluir manualmente tallas específicas.
  • Exclude attributes: Permite excluir tallas del filtro.
  • Order by: Define el criterio de orden de las tallas.
  • Order: Establece si el orden será ascendente o descendente.

  Categories filter

  • Show categories filter: Activa o desactiva la visualización del filtro de categorías en el frontend.
  • Show categories filter title: Permite mostrar u ocultar el título del bloque de categorías.
  • Categories title: Define el texto del encabezado del filtro de categorías (por ejemplo, “Categorías”). Puede editarse manualmente o generarse con IA.
  • Layout Style: Determina la forma en que se muestran las categorías (por ejemplo, lista). Dependiendo del estilo, puede cambiar la estructura visual del filtro.
  • Hide empty categories: Oculta las categorías que no contienen productos asignados, manteniendo el filtro más limpio y relevante.
  • Hide sub categories: Permite ocultar las subcategorías y mostrar únicamente las categorías principales.
  • Include categories: Permite seleccionar manualmente qué categorías específicas se incluirán en el filtro.
  • Exclude categories: Permite excluir categorías específicas para que no aparezcan en el filtro.
  • Order by: Define el criterio de orden de las categorías (por ejemplo, por nombre).
  • Order: Establece si el orden será ascendente o descendente.

  Tags filter

  • Show tags filter: Activa o desactiva la visualización del filtro de etiquetas en el frontend.
  • Show tags filter title: Permite mostrar u ocultar el título del bloque de etiquetas.
  • Tags title: Define el texto del encabezado del filtro de etiquetas (por ejemplo, “Tags” o “Etiquetas”). Puede editarse manualmente o generarse con IA.
  • Layout Style: Determina la forma en que se muestran las etiquetas (por ejemplo, en formato de lista).
  • Hide empty tags: Oculta las etiquetas que no están asociadas a ningún producto, evitando mostrar opciones irrelevantes.
  • Hide sub tags: Permite ocultar etiquetas jerárquicas o secundarias, mostrando solo las principales (si aplica).
  • Include tags: Permite seleccionar manualmente qué etiquetas específicas se incluirán en el filtro.
  • Exclude tags: Permite excluir etiquetas específicas para que no aparezcan en el filtro.
  • Order by: Define el criterio de orden de las etiquetas (por ejemplo, por nombre).
  • Order: Establece si el orden será ascendente o descendente.

  Mobile filters trigger

  • Button text: Define el texto que aparecerá en el botón que activa los filtros en dispositivos móviles (por ejemplo, “Filters” o “Filtrar”). Puede editarse manualmente o generarse con IA.
  • Button icon: Permite seleccionar o cargar un ícono que acompañará al botón de filtros. Este ícono ayuda a mejorar la identificación visual del botón en pantallas pequeñas.

  Mobile close filters trigger

  • Button text: Define el texto que aparecerá en el botón para cerrar el panel de filtros en dispositivos móviles (por ejemplo, “Close” o “Cerrar”). Puede personalizarse manualmente o generarse con IA.
  • Button icon: Permite seleccionar o cargar un ícono que acompañará al botón de cierre. Este ícono refuerza visualmente la acción de cerrar el panel de filtros, mejorando la usabilidad en pantallas pequeñas.

Style

  Form

  • Background Type: Establece el tipo de fondo del formulario (color sólido, degradado, imagen, etc.).
  • Border Type: Define el estilo del borde (por defecto, sólido, ninguno, etc.).
  • Border radius: Controla qué tan redondeadas son las esquinas del formulario (Top, Right, Bottom, Left).
  • Padding: Espaciado interno del formulario (distancia entre el contenido y los bordes).
  • Margin: Espaciado externo del formulario (distancia respecto a otros elementos).
  • Box Shadow: Permite añadir sombra al formulario para darle profundidad o destacar visualmente.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor del Header (Default, Hidden, Visible, Auto).

  Filters title

  • Width: Controla el ancho del contenedor del título de los filtros. Puede ajustarse manualmente en píxeles u otras unidades para adaptarse al diseño.
  • Alignment: Define la alineación horizontal del título dentro de su contenedor (izquierda, centro o derecha).
  • Background Type: Permite seleccionar el tipo de fondo del título (color sólido, degradado o imagen), ofreciendo mayor personalización visual.
  • Text color: Establece el color del texto del título de los filtros.
  • Typography: Permite configurar la tipografía del título, incluyendo fuente, tamaño, peso, estilo y espaciado.
  • Border Type: Define el estilo del borde del contenedor del título (por ejemplo: sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse individualmente por cada lado (Top, Right, Bottom, Left) o de forma global.
  • Padding (Relleno): Espacio interno entre el texto del título y los bordes del contenedor. Se puede ajustar por cada lado.
  • Margin (Margen): Espacio externo alrededor del contenedor del título, separándolo de otros elementos del diseño. También configurable por lado.

  Ordering input

  • Normal / Focus: Permite configurar estilos diferentes para el estado normal del campo y cuando está enfocado (cuando el usuario hace clic o interactúa con él).
  • Width: Define el ancho del campo de ordenamiento. Puede ajustarse manualmente para adaptarse al diseño del contenedor.
  • Height: Controla la altura del campo. Puede establecerse un valor fijo o dejarse en automático según el contenido.
  • Background Type: Permite elegir el tipo de fondo del campo (color sólido, degradado o imagen).
  • Text color: Establece el color del texto dentro del campo de ordenamiento.
  • Typography: Configura la tipografía del texto (fuente, tamaño, peso, estilo, etc.).
  • Border Type: Define el estilo del borde del campo (sólido, punteado, doble, etc.).
  • Border radius: Controla la curvatura de las esquinas del campo. Puede configurarse de forma individual por lado o de manera global.
  • Padding (Relleno): Espacio interno entre el contenido del campo y sus bordes. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el campo de otros elementos. Se puede configurar individualmente por lado.
  • Box Shadow: Permite aplicar una sombra alrededor del campo. Se pueden ajustar parámetros como desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del campo (por ejemplo: visible, oculto, automático, etc.).

  Price inputs

  • Horizontal alignment: Define la alineación horizontal de los campos de precio dentro de su contenedor (izquierda, centro, derecha o distribuido).
  • Vertical alignment: Controla la alineación vertical de los campos (arriba, centro o abajo dentro del contenedor).
  • Normal / Focus: Permite configurar estilos distintos para el estado normal del campo y cuando está en foco (activo o seleccionado por el usuario).
  • Width: Establece el ancho de los campos de entrada de precio. Puede ajustarse manualmente para adaptarse al diseño.
  • Height: Define la altura de los campos. Puede configurarse con un valor fijo o automático.
  • Background Type: Permite seleccionar el tipo de fondo del campo (color sólido, degradado o imagen).
  • Text color: Define el color del texto ingresado en los campos.
  • Placeholder color: Controla el color del texto del placeholder (texto de ayuda dentro del campo antes de escribir).
  • Typography: Configura la tipografía del contenido del campo (familia, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde del campo (sólido, punteado, doble, etc.).
  • Border radius: Ajusta la curvatura de las esquinas del campo. Puede configurarse por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del campo y sus bordes. Se puede definir por cada lado.
  • Margin (Margen): Espacio externo que separa los campos de otros elementos. Configurable individualmente por lado.
  • Box Shadow: Permite añadir una sombra alrededor de los campos. Se pueden ajustar valores como desplazamiento, desenfoque, expansión y color.

  Price filter submit button

  • Normal / Hover: Permite definir estilos diferentes para el botón en su estado normal y cuando el usuario pasa el cursor sobre él.
  • Horizontal alignment: Controla la alineación horizontal del botón dentro de su contenedor (izquierda, centro, derecha o distribuido).
  • Vertical alignment: Define la alineación vertical del botón respecto a otros elementos (arriba, centro o abajo).
  • Width: Establece el ancho del botón. Puede ajustarse manualmente para adaptarse al diseño del filtro.
  • Height: Define la altura del botón, permitiendo mantener consistencia visual con otros elementos.
  • Background Type: Permite elegir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Text color: Define el color del texto del botón.
  • Typography: Configura la tipografía del texto del botón (familia, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde del botón (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma individual o uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del botón (texto o icono) y sus bordes.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos cercanos.
  • Box Shadow: Permite aplicar una sombra alrededor del botón, ajustando parámetros como desplazamiento, desenfoque y color.
  • Overflow: Define cómo se comporta el contenido interno si excede el tamaño del botón (visible, oculto, automático, etc.).

  Price filter submit button icon

  • Normal / Hover: Permite configurar estilos distintos para el icono del botón en estado normal y cuando el usuario pasa el cursor sobre él.
  • Width: Define el ancho del icono dentro del botón, permitiendo ajustar su proporción respecto al texto u otros elementos.
  • Height: Establece la altura del icono, asegurando coherencia visual con el tamaño del botón.
  • Background Type: Permite asignar un fondo al contenedor del icono (color sólido, degradado o imagen).
  • Icon color: Define el color del icono, facilitando su adaptación al diseño general del botón.
  • Border Type: Determina el estilo del borde del contenedor del icono (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor del icono. Puede configurarse de forma individual o uniforme.
  • Padding (Relleno): Espacio interno entre el icono y los bordes de su contenedor.
  • Margin (Margen): Espacio externo que separa el icono de otros elementos, como el texto del botón.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del icono, ajustando desplazamiento, desenfoque y color.

  Brands list

  • Lists style: Define el estilo de visualización de la lista de marcas (por ejemplo, lista por defecto u otros formatos disponibles según el diseño).
  • Background Type: Permite establecer un fondo para el contenedor de la lista (color sólido, degradado o imagen).
  • Text color: Define el color del texto de los elementos dentro de la lista de marcas.
  • Typography: Permite configurar la tipografía del texto (familia, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde del contenedor de la lista (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor de la lista. Puede configurarse de forma independiente por lado o de manera uniforme.
  • Padding (Relleno): Espacio interno entre el contenido de la lista (ítems de marcas) y el borde del contenedor.
  • Margin (Margen): Espacio externo que separa la lista de marcas de otros elementos cercanos.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la lista, ajustando sus propiedades visuales.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (visible, oculto, scroll automático, etc.).

  Brands list items

  • Normal / Hover / Selected: Permite configurar estilos diferentes según el estado del elemento de marca (estado normal, al pasar el cursor o cuando está seleccionado).
  • Text alignment: Define la alineación del contenido dentro de cada ítem de marca (izquierda, centro o derecha).
  • Container width: Controla el ancho del contenedor general que agrupa los ítems de marcas.
  • Width: Define el ancho individual de cada elemento dentro de la lista de marcas.
  • Background Type: Permite establecer el fondo de cada ítem (color sólido, degradado o imagen).
  • Text color: Define el color del texto dentro de cada elemento de marca.
  • Typography: Permite personalizar la tipografía del texto (tipo de letra, tamaño, peso, etc.).
  • Border Type: Determina el estilo del borde de cada ítem (sólido, punteado, doble, etc.).
  • Border radius: Controla la curvatura de las esquinas de cada elemento de marca, pudiendo ajustarse por lados o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del ítem (texto de la marca) y su borde.
  • Margin (Margen): Espacio externo entre cada elemento de marca y los demás elementos de la lista.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem para darle profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del elemento (oculto, visible, scroll, etc.).

  Brands sub list

  • Sub lists style: Define el estilo visual de las sublistas de marcas (por ejemplo, formato por defecto u otros estilos disponibles según el diseño).
  • Background Type: Permite configurar el fondo de la sublista (color sólido, degradado o imagen).
  • Text color: Establece el color del texto de las marcas dentro de la sublista.
  • Typography: Permite personalizar la tipografía del contenido (fuente, tamaño, peso, etc.).
  • Border Type: Define el tipo de borde que rodea la sublista (sólido, punteado, doble, etc.).
  • Border radius: Controla la curvatura de las esquinas de la sublista. Puede configurarse de forma individual (Top, Right, Bottom, Left) o uniforme.
  • Padding (Relleno): Espacio interno entre el contenido de la sublista y su borde.
  • Margin (Margen): Espacio externo que separa la sublista de otros elementos.
  • Box Shadow: Permite aplicar una sombra alrededor de la sublista para dar profundidad.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del contenedor (visible, oculto, scroll, etc.).

  Brands sub list items

  • Normal / Hover / Selected: Permite configurar estilos distintos para cada ítem de la sublista según su estado: normal, al pasar el cursor o cuando está seleccionado.
  • Text alignment: Define la alineación del contenido dentro de cada ítem de la sublista (izquierda, centro o derecha).
  • Container width: Controla el ancho del contenedor general que agrupa los elementos de la sublista.
  • Width: Establece el ancho individual de cada elemento dentro de la sublista.
  • Background Type: Permite configurar el fondo de cada ítem (color sólido, degradado o imagen).
  • Text color: Define el color del texto dentro de cada elemento de la sublista.
  • Typography: Permite personalizar la tipografía del texto (familia tipográfica, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde de cada ítem (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas de cada elemento. Puede configurarse por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde.
  • Margin (Margen): Espacio externo que separa cada elemento de los demás dentro de la sublista.
  • Box Shadow: Permite aplicar una sombra alrededor de cada ítem para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del elemento (visible, oculto, automático, etc.).

  Attributes: Selects input

  • Normal / Focus: Permite configurar estilos distintos para el campo de selección de atributos en su estado normal y cuando está en foco (activo o seleccionado por el usuario).
  • Width: Define el ancho del campo de selección (select). Puede ajustarse manualmente en píxeles u otras unidades.
  • Height: Controla la altura del campo. Puede establecerse un valor fijo o dejarse en automático (auto) según el contenido.
  • Background Type: Permite seleccionar el tipo de fondo del campo (color sólido, degradado o imagen).
  • Text color: Define el color del texto mostrado dentro del campo de selección.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y otras propiedades).
  • Border Type: Determina el estilo del borde del campo (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del campo. Puede configurarse individualmente por lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del campo y sus bordes. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el campo de otros elementos dentro del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del campo, configurando desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del campo (visible, oculto, automático, etc.).

  Attributes: Labels container

  • Horizontal alignment: Define la alineación horizontal de las etiquetas de atributos dentro de su contenedor (izquierda, centro, derecha o distribución uniforme).
  • Vertical alignment: Controla la alineación vertical de las etiquetas dentro del contenedor (arriba, centro o abajo).
  • Gap: Establece el espacio entre cada etiqueta de atributo, permitiendo controlar la separación horizontal y/o vertical entre elementos.
  • Background Type: Permite configurar el fondo del contenedor de las etiquetas (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde que rodea el contenedor (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse individualmente por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre las etiquetas y el borde del contenedor.
  • Margin (Margen): Espacio externo que separa el contenedor de etiquetas de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático, etc.).

  Attributes: Labels

  • Normal / Hover / Selected: Permite configurar estilos distintos para cada etiqueta de atributo según su estado: normal, cuando el usuario pasa el cursor sobre ella o cuando está seleccionada.
  • Text alignment: Define la alineación del texto dentro de cada etiqueta (izquierda, centro o derecha).
  • Width: Establece el ancho de cada etiqueta de atributo. Puede ajustarse manualmente para adaptarse al diseño.
  • Height: Controla la altura de cada etiqueta. Puede configurarse con un valor fijo o automático (auto).
  • Background Type: Permite seleccionar el tipo de fondo de cada etiqueta (color sólido, degradado o imagen).
  • Text color: Define el color del texto dentro de la etiqueta.
  • Typography: Permite configurar la tipografía del texto (familia, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde de cada etiqueta (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas de cada etiqueta. Puede configurarse individualmente por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el texto de la etiqueta y su borde.
  • Margin (Margen): Espacio externo que separa cada etiqueta de las demás.
  • Box Shadow: Permite aplicar una sombra alrededor de cada etiqueta para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño de la etiqueta (visible, oculto, automático, etc.).

  Attributes: Colors container

  • Horizontal alignment: Define la alineación horizontal de los selectores de color dentro del contenedor (izquierda, centro, derecha o distribución uniforme).
  • Vertical alignment: Controla la alineación vertical de los elementos dentro del contenedor (arriba, centro o abajo).
  • Gap: Establece el espacio entre cada selector de color, permitiendo controlar la separación horizontal y vertical.
  • Background Type: Permite configurar el fondo del contenedor de colores (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde que rodea el contenedor (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma uniforme.
  • Padding (Relleno): Espacio interno entre los selectores de color y el borde del contenedor.
  • Margin (Margen): Espacio externo que separa el contenedor de colores de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático, etc.).

  Attributes: Colors

  • State Normal / Hover / Selected: Permite configurar estilos distintos para cada selector de color según su estado: normal, al pasar el cursor o cuando está seleccionado.
  • Text alignment: Define la alineación del contenido dentro del selector de color (si incluye texto o indicador).
  • Width: Establece el ancho de cada selector de color. En la imagen se muestra un valor de 35 px, ideal para crear botones cuadrados o compactos.
  • Height: Define la altura del selector de color. También se muestra 35 px, manteniendo proporción uniforme.
  • Background Type: Permite configurar el fondo del selector (color sólido, degradado o imagen).
  • Text color: Define el color del texto o indicador interno, si el selector incluye contenido textual.
  • Typography: Permite personalizar la tipografía en caso de que el selector muestre texto (fuente, tamaño, peso, etc.).
  • Border Type: Determina el estilo del borde del selector (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del selector. Puede ajustarse por lado o de forma uniforme para lograr formas redondeadas o circulares.
  • Padding (Relleno): Espacio interno entre el contenido del selector y su borde.
  • Margin (Margen): Espacio externo que separa cada selector de color de los demás.
  • Box Shadow: Permite aplicar una sombra alrededor del selector para aportar profundidad o destacar el estado activo.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del selector (visible, oculto, automático, etc.).

  Attributes: Images container

  • Horizontal alignment: Define la alineación horizontal de las imágenes de atributos dentro del contenedor (izquierda, centro, derecha o distribución uniforme).
  • Vertical alignment: Controla la alineación vertical de las imágenes dentro del contenedor (arriba, centro o abajo).
  • Gap: Establece el espacio entre cada imagen de atributo, permitiendo ajustar la separación horizontal y vertical.
  • Background Type: Permite configurar el fondo del contenedor de imágenes (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde que rodea el contenedor (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse individualmente por lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Padding (Relleno): Espacio interno entre las imágenes y el borde del contenedor.
  • Margin (Margen): Espacio externo que separa el contenedor de imágenes de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático, etc.).

  Attributes: Images

  • Normal / Hover / Selected: Permite configurar estilos distintos para cada imagen de atributo según su estado: normal, al pasar el cursor o cuando está seleccionada.
  • Text alignment: Define la alineación del contenido interno en caso de que la imagen incluya texto o indicador (izquierda, centro o derecha).
  • Width: Establece el ancho de cada imagen de atributo. En la configuración mostrada se indica 35 px, ideal para miniaturas uniformes.
  • Height: Define la altura de cada imagen. También se muestra 35 px, manteniendo proporción cuadrada.
  • Background Type: Permite configurar el fondo del contenedor de cada imagen (color sólido, degradado o imagen).
  • Text color: Define el color del texto o indicador superpuesto, si aplica.
  • Typography: Permite personalizar la tipografía en caso de que exista texto asociado a la imagen (fuente, tamaño, peso, etc.).
  • Border Type: Determina el estilo del borde de cada imagen (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas de cada imagen. Puede ajustarse por lado o de forma uniforme para lograr bordes redondeados o formas circulares.
  • Padding (Relleno): Espacio interno entre la imagen y su borde.
  • Margin (Margen): Espacio externo que separa cada imagen de las demás.
  • Box Shadow: Permite aplicar una sombra alrededor de cada imagen para aportar profundidad o resaltar la selección.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor de la imagen (visible, oculto, automático, etc.).

  Categories list

  • Lists style: Permite definir el estilo general de la lista de categorías (por ejemplo, estilo por defecto u otras variantes disponibles según el diseño).
  • Background Type: Configura el fondo de la lista de categorías (color sólido, degradado o imagen).
  • Text color: Define el color del texto de las categorías dentro de la lista.
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde que rodea la lista (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor de la lista. Puede ajustarse individualmente por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido de la lista y su borde.
  • Margin (Margen): Espacio externo que separa la lista de categorías de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la lista para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático, etc.).

  Categories list items

  • Normal / Hover / Selected: Permite configurar estilos distintos para cada elemento de la lista de categorías según su estado: normal, al pasar el cursor o cuando está seleccionado.
  • Text alignment: Define la alineación del texto dentro de cada elemento (izquierda, centro o derecha).
  • Container width: Controla el ancho del contenedor general que agrupa los elementos de categorías.
  • Width: Establece el ancho individual de cada elemento dentro de la lista.
  • Background Type: Permite configurar el fondo de cada elemento (color sólido, degradado o imagen).
  • Text color: Define el color del texto de cada categoría.
  • Typography: Permite personalizar la tipografía del texto (fuente, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde de cada elemento (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas de cada elemento. Puede configurarse por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el texto de la categoría y su borde.
  • Margin (Margen): Espacio externo que separa cada elemento de categoría de los demás.
  • Box Shadow: Permite aplicar una sombra alrededor de cada elemento para aportar profundidad visual o resaltar estados.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del elemento (visible, oculto, automático, etc.).

  Categories sub list

  • Sub lists style: Permite definir el estilo visual de las subcategorías (formato por defecto u otras variantes disponibles según el diseño).
  • Background Type: Configura el fondo de la sublista de categorías (color sólido, degradado o imagen).
  • Text color: Define el color del texto de las subcategorías.
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde que rodea la sublista (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor de la sublista. Puede ajustarse individualmente por lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido de la sublista y su borde.
  • Margin (Margen): Espacio externo que separa la sublista de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático, etc.).

  Categories sub list items

  • Normal / Hover / Selected: Permite configurar estilos distintos para cada elemento de la sublista de categorías según su estado: normal, al pasar el cursor o cuando está seleccionado.
  • Text alignment: Define la alineación del texto dentro de cada subcategoría (izquierda, centro o derecha).
  • Container width: Controla el ancho del contenedor general que agrupa los elementos de la sublista.
  • Width: Establece el ancho individual de cada elemento de subcategoría.
  • Background Type: Permite configurar el fondo de cada elemento (color sólido, degradado o imagen).
  • Text color: Define el color del texto de cada subcategoría.
  • Typography: Permite personalizar la tipografía (familia de fuente, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde de cada elemento (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas de cada elemento. Puede configurarse individualmente por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el texto y el borde del elemento.
  • Margin (Margen): Espacio externo que separa cada subcategoría de las demás.
  • Box Shadow: Permite aplicar una sombra alrededor de cada elemento para aportar profundidad o resaltar estados.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático, etc.).

  Tags list

  • Lists style: Permite definir el estilo general de la lista de etiquetas (formato por defecto u otras variantes disponibles según el diseño).
  • Background Type: Configura el fondo del contenedor de la lista de etiquetas (color sólido, degradado o imagen).
  • Text color: Define el color del texto de las etiquetas dentro de la lista.
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde que rodea la lista de etiquetas (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del contenedor de la lista. Puede configurarse individualmente por lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido de la lista y su borde.
  • Margin (Margen): Espacio externo que separa la lista de etiquetas de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (visible, oculto, automático, etc.).

  Tags list items

  • Normal / Hover / Selected: Permite configurar estilos distintos para cada etiqueta según su estado: normal, al pasar el cursor o cuando está seleccionada.
  • Text alignment: Define la alineación del texto dentro de cada etiqueta (izquierda, centro o derecha).
  • Container width: Controla el ancho del contenedor general que agrupa los elementos de etiquetas.
  • Width: Establece el ancho individual de cada etiqueta dentro de la lista.
  • Background Type: Permite configurar el fondo de cada etiqueta (color sólido, degradado o imagen).
  • Text color: Define el color del texto de cada etiqueta.
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, etc.).
  • Border Type: Determina el estilo del borde de cada etiqueta (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas de cada etiqueta. Puede configurarse individualmente por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el texto de la etiqueta y su borde.
  • Margin (Margen): Espacio externo que separa cada etiqueta de las demás.
  • Box Shadow: Permite aplicar una sombra alrededor de cada etiqueta para aportar profundidad visual o resaltar estados.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del elemento (visible, oculto, automático, etc.).

  Mobile filters trigger

  • Normal / Hover: Permite configurar estilos distintos para el botón que activa los filtros en móvil según su estado normal o cuando el usuario pasa el cursor (si aplica en dispositivos táctiles con hover simulado).
  • CTA width: Define el ancho del botón que activa los filtros. Puede configurarse en automático (auto) o con un valor específico.
  • CTA height: Controla la altura del botón. También puede establecerse en automático o con un valor fijo.
  • Background Type: Permite configurar el fondo del botón (color sólido, degradado o imagen).
  • Text color: Define el color del texto del botón.
  • Typography: Permite personalizar la tipografía del texto (familia, tamaño, peso, estilo, etc.).
  • Horizontal alignment: Define la alineación horizontal del contenido dentro del botón (izquierda, centro, derecha o distribución).
  • Vertical alignment: Controla la alineación vertical del contenido dentro del botón (arriba, centro o abajo).
  • Border Type: Determina el estilo del borde del botón (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del botón.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos.
  • Box Shadow: Permite aplicar una sombra alrededor del botón para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón.
  • Icon width: Establece el ancho del icono dentro del botón (en la imagen se muestra 45 px).
  • Icon height: Define la altura del icono (también 45 px en la configuración mostrada).
  • Background Type: Permite configurar el fondo del contenedor del icono.
  • Icon color: Define el color del icono.
  • Border Type: Determina el estilo del borde del icono.
  • Icon border radius: Controla la curvatura de las esquinas del icono.
  • Icon padding: Espacio interno entre el icono y su borde.
  • Icon margin: Espacio externo que separa el icono del texto u otros elementos dentro del botón.
  • Icon box shadow: Permite aplicar una sombra alrededor del icono para destacarlo visualmente.

Mobile filters close trigger

  • Normal / Hover: Permite configurar estilos distintos para el botón que cierra los filtros en móvil según su estado normal o cuando se pasa el cursor (si el dispositivo lo permite).
  • CTA width: Define el ancho del botón de cierre. Puede establecerse en automático (auto) o con un valor específico en píxeles.
  • CTA height: Controla la altura del botón. También puede configurarse como auto o con un valor fijo.
  • Background Type: Permite configurar el fondo del botón (color sólido, degradado o imagen).
  • Text color: Define el color del texto del botón de cierre.
  • Typography: Permite personalizar la tipografía del texto (familia, tamaño, peso, estilo, etc.).
  • Horizontal alignment: Define la alineación horizontal del contenido dentro del botón (izquierda, centro, derecha o distribución uniforme).
  • Vertical alignment: Controla la alineación vertical del contenido dentro del botón (arriba, centro o abajo).
  • Border Type: Determina el estilo del borde del botón (sólido, doble, punteado, etc.).
  • Border radius: Controla la curvatura de las esquinas del botón. Puede configurarse por lado o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del botón para aportar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón.
  • Icon width: Establece el ancho del icono dentro del botón (en la imagen se muestra 45 px).
  • Icon height: Define la altura del icono (también 45 px en la configuración mostrada).
  • Background Type: Permite configurar el fondo del contenedor del icono.
  • Icon color: Define el color del icono.
  • Border Type: Determina el estilo del borde del icono.
  • Icon border radius: Controla la curvatura de las esquinas del icono.
  • Icon padding: Espacio interno entre el icono y su borde.
  • Icon margin: Espacio externo que separa el icono del texto u otros elementos dentro del botón.
  • Icon box shadow: Permite aplicar una sombra alrededor del icono para destacarlo visualmente.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Posts

El widget Posts permite mostrar entradas del blog en diferentes formatos de diseño.

Es ideal para:

  • Página principal del blog
  • Secciones de noticias
  • Entradas recientes
  • Artículos destacados

El contenido se actualiza automáticamente según las publicaciones existentes.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Posts dentro de la categoría correspondiente.
  3. Arrastra el widget Posts al área de diseño.
  4. Colócalo en la sección donde deseas mostrar las entradas.

Configuración del Widget Posts

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Display Options

  • Posts (Show): Permite mostrar u ocultar las publicaciones asociadas al módulo o sección.
    • Activado: se visualizan los productos o entradas correspondientes.
    • Desactivado: no se muestran publicaciones.
  • Pagination (Show): Permite activar o desactivar la paginación en la lista.
    • Activado: se muestran controles de paginación (por ejemplo, números de página o botón “Cargar más”).
    • Desactivado: todos los elementos se muestran sin paginación o se gestionan de otra forma según la configuración general.

  Post Content & Display Settings

  • Show post title (Show): Permite mostrar u ocultar el título de cada publicación.
  • Title tag: Define la etiqueta HTML del título (por ejemplo, H1, H2, H3, etc.), lo que influye en la jerarquía SEO y estructura del contenido. En la imagen está configurado como H2.
  • Truncate title (Char): Permite limitar el número de caracteres visibles del título.
  • Show post excerpt (Show): Activa o desactiva la visualización del extracto del post.
  • Truncate excerpt (Char): Limita la cantidad de caracteres del extracto mostrado.
  • Show post description (Show): Permite mostrar u ocultar la descripción completa del post.
  • Truncate description (Char): Limita el número de caracteres visibles en la descripción.
  • Show post call to action (Show): Activa o desactiva el botón o enlace de llamada a la acción.
  • CTA label: Define el texto del botón (por ejemplo, “Leer más”, “Ver producto”, etc.).
  • CTA target: Define dónde se abrirá el enlace: Same window: En la misma ventana / Nueva ventana: En una pestaña nueva.
  • CTA icon: Permite añadir un icono al botón de llamada a la acción.
  • Show post published date (Show): Permite mostrar u ocultar la fecha de publicación.
  • Layout Style: Define el estilo de visualización de los posts (por ejemplo, lista o grid). En la imagen está configurado como List.
  • Posts to show: Permite definir la cantidad de publicaciones que se mostrarán.
  • Order: Define el orden de visualización (ascendente o descendente). En la imagen está en Descending.
  • Order by: Determina el criterio de ordenación (ID, fecha, título, etc.). En la imagen está en ID.
  • Post body width: Controla el ancho del contenido del post.
  • Show post image (Show): Activa o desactiva la visualización de la imagen destacada.
  • Image size: Define el tamaño de la imagen (por ejemplo, Thumbnail, Medium, Large).
  • Image aspect ratio: Permite controlar la proporción de la imagen (Default u otras opciones disponibles).
  • Post image width: Ajusta el ancho de la imagen dentro del diseño.
  • Show post categories (Show): Permite mostrar u ocultar las categorías asociadas al post.
  • Show post share button (Show): Activa o desactiva el botón para compartir la publicación.
  • Message for share button: Permite definir el mensaje personalizado que acompañará la acción de compartir.

Style

  Post

  • Background Color: Permite definir el color de fondo del contenedor individual de cada post.
  • Border: Configura el grosor del borde del post. Puede ajustarse de forma independiente para cada lado (Top, Right, Bottom, Left) o de manera uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor del post. Se puede establecer por lado o aplicar el mismo valor a todos.
  • Border color: Define el color del borde del post.
  • Padding (Relleno): Espacio interno entre el contenido del post (texto, imagen, botones, etc.) y su borde.
  • Margin (Margen): Espacio externo que separa cada post de otros elementos del diseño.

  Image

  • Background Color: Permite definir el color de fondo del contenedor de la imagen.
  • Border: Configura el grosor del borde de la imagen. Puede ajustarse individualmente para cada lado (Top, Right, Bottom, Left) o aplicarse de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas de la imagen o su contenedor. Se puede establecer un valor general o distinto por cada lado.
  • Border color: Define el color del borde de la imagen.
  • Padding (Relleno): Espacio interno entre la imagen y su borde.
  • Margin (Margen): Espacio externo que separa la imagen de otros elementos del diseño.
  • Z-index: Permite controlar la superposición de la imagen respecto a otros elementos. Un valor más alto coloca la imagen por encima de otros componentes con valores inferiores.

  Item body

  • Background Color: Permite definir el color de fondo del contenedor interno del elemento (donde se encuentra el contenido principal).
  • Border: Configura el grosor del borde del contenedor. Puede ajustarse individualmente para cada lado (Top, Right, Bottom, Left) o aplicarse de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor. Se puede establecer un valor general o diferente por cada lado.
  • Border color: Define el color del borde del contenedor.
  • Padding (Relleno): Espacio interno entre el contenido (texto, botones, imágenes, etc.) y el borde del contenedor.
  • Margin (Margen): Espacio externo que separa este bloque de otros elementos del diseño.
  • Z-index: Permite controlar la superposición del contenedor respecto a otros elementos. Un valor más alto lo posiciona por encima de otros con valores inferiores.

  Categories

  • Normal / Hover: Permite configurar estilos distintos para las categorías según su estado normal o cuando el usuario pasa el cursor sobre ellas.
  • Background color: Define el color de fondo de cada categoría.
  • Text color: Establece el color del texto de la categoría.
  • Typography: Permite personalizar la tipografía (familia de fuente, tamaño, peso, estilo, etc.).
  • Border: Configura el grosor del borde de la categoría. Puede ajustarse individualmente por lado (Top, Right, Bottom, Left) o aplicarse de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor de la categoría.
  • Border color: Define el color del borde.
  • Padding (Relleno): Espacio interno entre el texto de la categoría y su borde.
  • Margin (Margen): Espacio externo que separa cada categoría de otros elementos del diseño.

  Title

  • Alignment: Permite definir la alineación del título (izquierda, centro o derecha).
  • Background color: Establece el color de fondo del contenedor del título.
  • Text color: Define el color del texto del título.
  • Typography: Permite personalizar la tipografía del título (familia de fuente, tamaño, peso, estilo, etc.).
  • Border: Configura el grosor del borde del contenedor del título. Puede ajustarse por cada lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor del título.
  • Border color: Define el color del borde.
  • Padding (Relleno): Espacio interno entre el texto del título y su borde.
  • Margin (Margen): Espacio externo que separa el título de otros elementos del diseño.

  Excerpt

  • Background color: Permite definir el color de fondo del contenedor del extracto.
  • Text color: Establece el color del texto del extracto.
  • Typography: Permite personalizar la tipografía del extracto (familia de fuente, tamaño, peso, estilo, etc.).
  • Border: Configura el grosor del borde del contenedor del extracto. Puede ajustarse individualmente por cada lado (Top, Right, Bottom, Left) o aplicarse de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor del extracto.
  • Border color: Define el color del borde.
  • Padding (Relleno): Espacio interno entre el texto del extracto y su borde.
  • Margin (Margen): Espacio externo que separa el extracto de otros elementos del diseño.

  Description

  • Background color: Permite definir el color de fondo del contenedor de la descripción.
  • Text color: Establece el color del texto de la descripción.
  • Typography: Permite personalizar la tipografía de la descripción (familia de fuente, tamaño, peso, estilo, etc.).
  • Border: Configura el grosor del borde del contenedor de la descripción. Puede ajustarse individualmente por cada lado (Top, Right, Bottom, Left) o aplicarse de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor de la descripción.
  • Border color: Define el color del borde.
  • Padding (Relleno): Espacio interno entre el texto de la descripción y su borde.
  • Margin (Margen): Espacio externo que separa la descripción de otros elementos del diseño.

  CTA

  • Normal / Hover: Permite configurar estilos distintos para el botón según su estado normal o cuando el usuario pasa el cursor sobre él.
  • Width: Define el ancho del botón CTA.
  • Alignment: Permite alinear el botón (izquierda, centro o derecha) dentro de su contenedor.
  • Background color: Establece el color de fondo del botón.
  • Text color: Define el color del texto del botón.
  • Typography: Permite personalizar la tipografía del texto (familia, tamaño, peso, estilo, etc.).
  • Alignment (contenido): Controla la alineación interna del contenido del botón (por ejemplo, posición del texto e icono).
  • Border: Configura el grosor del borde del botón. Puede ajustarse individualmente por lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del botón.
  • Border color: Define el color del borde del botón.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos del diseño.
  • Icon width: Define el ancho del icono dentro del botón.
  • CTA height: Controla la altura del área del icono o del botón en relación con el icono.
  • Icon background color: Establece el color de fondo del contenedor del icono.
  • Icon color: Define el color del icono.
  • Icon border: Configura el grosor del borde del icono (por lado o uniforme).
  • Icon border radius: Controla la curvatura de las esquinas del icono.
  • Icon border color: Define el color del borde del icono.
  • Icon padding: Espacio interno entre el icono y su borde.
  • Icon margin: Espacio externo que separa el icono del texto u otros elementos dentro del botón.

  Published date

  • Background color: Permite definir el color de fondo del contenedor de la fecha de publicación.
  • Text color: Establece el color del texto de la fecha.
  • Typography: Permite personalizar la tipografía de la fecha (familia de fuente, tamaño, peso, estilo, etc.).
  • Border: Configura el grosor del borde del contenedor de la fecha. Puede ajustarse individualmente por cada lado (Top, Right, Bottom, Left) o aplicarse de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor de la fecha.
  • Border color: Define el color del borde.
  • Padding (Relleno): Espacio interno entre el texto de la fecha y su borde.
  • Margin (Margen): Espacio externo que separa la fecha de otros elementos del diseño.

  Share

  • Normal / Hover: Permite configurar estilos distintos para el botón o icono de compartir según su estado normal o cuando el usuario pasa el cursor sobre él.
  • Width: Define el ancho del botón o contenedor del botón de compartir.
  • Background color: Establece el color de fondo del botón de compartir.
  • Icon color: Define el color del icono de compartir.
  • Icon width: Controla el tamaño (ancho) del icono dentro del botón.
  • Alignment: Permite alinear el botón (izquierda, centro o derecha) dentro de su contenedor.
  • Border: Configura el grosor del borde. Puede ajustarse individualmente por cada lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del botón.
  • Border color: Define el color del borde.
  • Padding (Relleno): Espacio interno entre el icono y el borde del botón.
  • Margin (Margen): Espacio externo que separa el botón de compartir de otros elementos del diseño.

  Pagination

  • Background color: Define el color de fondo del contenedor de la paginación.
  • Alignment: Permite alinear el bloque de paginación (izquierda, centro o derecha).
  • Border: Configura el grosor del borde del contenedor de la paginación. Puede ajustarse individualmente por cada lado (Top, Right, Bottom, Left) o de forma uniforme.
  • Border radius: Controla la curvatura de las esquinas del contenedor de la paginación.
  • Border color: Define el color del borde.
  • Padding (Relleno): Espacio interno entre los elementos de paginación y el borde del contenedor.
  • Margin (Margen): Espacio externo que separa la paginación de otros elementos del diseño.
  • State Normal / Hover: Permite configurar estilos distintos para los números de página según su estado normal o cuando el usuario pasa el cursor sobre ellos.
  • Numbers width: Define el ancho de cada botón o número de página.
  • Numbers height: Controla la altura de cada número.
  • Background color: Establece el color de fondo de cada número de página.
  • Text color: Define el color del texto de los números.
  • Typography: Permite personalizar la tipografía (familia, tamaño, peso, estilo, etc.).
  • Alignment: Permite alinear el contenido dentro de cada número (izquierda, centro o derecha).
  • Border: Configura el grosor del borde de cada número de página (por lado o uniforme).
  • Border radius: Controla la curvatura de las esquinas de cada número.
  • Border color: Define el color del borde de los números.
  • Padding (Relleno): Espacio interno entre el texto del número y su borde.
  • Margin (Margen): Espacio externo que separa cada número de página de los demás.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Posts Categories

El widget Posts Categories permite mostrar las categorías del blog en formato de lista o menú.

Es ideal para:

  • Sidebars del blog
  • Filtros por categoría
  • Menús de navegación de contenido
  • Secciones organizativas del blog

Facilita la navegación y organización del contenido.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Posts Categories dentro de la categoría correspondiente.
  3. Arrastra el widget Posts Categories al área de diseño.
  4. Colócalo en la sección donde deseas mostrar las categorías.

Configuración del Widget Posts Categories

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Categories

  • Hide Empty Categories: Permite ocultar las categorías que no contienen elementos o productos asignados.
  • Hide Sub Categories: Permite ocultar las subcategorías dentro de la lista principal de categorías.
  • Include Categories: Permite seleccionar manualmente las categorías que se mostrarán. Solo se visualizarán las categorías añadidas en esta lista.
  • Exclude Categories: Permite seleccionar categorías específicas para excluirlas de la visualización, aunque estén disponibles en el sistema.
  • Order By: Define el criterio de ordenamiento de las categorías (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

Style

  Categories list

  • Categories List Style: Permite seleccionar el estilo visual predefinido de la lista de categorías. Modifica la apariencia y estructura general de los elementos.
  • Categories List Direction: Define la orientación de las categorías dentro del contenedor (Vertical u Horizontal).
  • Vertical Alignment: Controla la alineación vertical de las categorías dentro del contenedor (Superior, Centro o Inferior).
  • Horizontal Alignment: Define la alineación horizontal de las categorías (Izquierda, Centro o Derecha).
  • Background Color: Permite establecer un color sólido como fondo del contenedor de la lista de categorías.
  • Text Color: Define el color del texto de las categorías.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border: Define el grosor del borde del contenedor en píxeles. Puede configurarse por cada lado o de forma vinculada.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse individualmente o de forma uniforme.
  • Border Color: Permite seleccionar el color del borde del contenedor.
  • Padding (Relleno): Espacio interno entre las categorías y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de otros elementos adyacentes. Ajustable por cada lado.

  Items

  • Normal / Hover: Permite configurar los estilos del elemento en estado normal y en estado hover (cuando el cursor pasa sobre él).
  • Vertical Alignment: Controla la alineación vertical del contenido dentro del ítem (Superior, Centro o Inferior).
  • Horizontal Alignment: Define la alineación horizontal del contenido dentro del ítem (Izquierda, Centro o Derecha).
  • Text Alignment: Establece la alineación del texto dentro del ítem (Izquierda, Centro o Derecha).
  • Container Width: Define el ancho del contenedor del ítem en píxeles (px). Controla el espacio total que ocupa el elemento.
  • Width: Establece el ancho interno del ítem en píxeles (px). Afecta directamente el tamaño del elemento.
  • Background Color: Permite configurar el color de fondo del ítem.
  • Text Color: Define el color del texto del ítem.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border: Define el grosor del borde del ítem en píxeles. Puede configurarse por cada lado o de forma vinculada.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Puede ajustarse individualmente o de forma uniforme.
  • Border Color: Permite seleccionar el color del borde del ítem.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos adyacentes. Ajustable por cada lado.

  Sub lists items

  • Categories Sub Lists Style: Permite seleccionar el estilo visual predefinido para las subcategorías. Modifica la apariencia y estructura de los elementos secundarios.
  • Categories Sub List Direction: Define la orientación de las subcategorías dentro del contenedor (Vertical u Horizontal).
  • Vertical Alignment: Controla la alineación vertical de las subcategorías dentro del contenedor (Superior, Centro o Inferior).
  • Horizontal Alignment: Define la alineación horizontal de las subcategorías (Izquierda, Centro o Derecha).
  • Background Color: Permite establecer un color sólido como fondo del contenedor de las subcategorías.
  • Text Color: Define el color del texto de las subcategorías.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border: Define el grosor del borde del contenedor en píxeles. Puede configurarse por cada lado o de forma vinculada.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse individualmente o de forma uniforme.
  • Border Color: Permite seleccionar el color del borde del contenedor.
  • Padding (Relleno): Espacio interno entre las subcategorías y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de subcategorías de otros elementos adyacentes. Ajustable por cada lado.

  Categories sub lists

  • Normal / Hover: Permite configurar los estilos del ítem en estado normal y en estado hover (cuando el cursor pasa sobre él).
  • Vertical Alignment: Controla la alineación vertical del contenido dentro del ítem (Superior, Centro o Inferior).
  • Horizontal Alignment: Define la alineación horizontal del contenido dentro del ítem (Izquierda, Centro o Derecha).
  • Text Alignment: Establece la alineación del texto dentro del ítem (Izquierda, Centro o Derecha).
  • Container Width: Define el ancho del contenedor del ítem en píxeles (px). Determina el espacio total que ocupa el elemento.
  • Width: Establece el ancho interno del ítem en píxeles (px). Controla el tamaño del elemento dentro de su contenedor.
  • Background Color: Permite configurar el color de fondo del ítem.
  • Text Color: Define el color del texto del ítem.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border: Define el grosor del borde del ítem en píxeles. Puede configurarse por cada lado o de forma vinculada.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Puede ajustarse individualmente o de forma uniforme.
  • Border Color: Permite seleccionar el color del borde del ítem.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos adyacentes. Ajustable por cada lado.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

Posts Tags

El widget Posts Tags permite mostrar las etiquetas (tags) utilizadas en las publicaciones.

Es ideal para:

  • Sidebars del blog
  • Secciones de navegación temática
  • Nubes de etiquetas
  • Organización de contenido relacionado

Facilita la navegación y mejora la estructura del contenido.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget Posts Tags dentro de la categoría correspondiente.
  3. Arrastra el widget Posts Tags al área de diseño.
  4. Colócalo en la sección donde deseas mostrar las etiquetas.

Configuración del Widget Posts Tags

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Tags

  • Hide Empty Tags: Permite ocultar las etiquetas que no están asociadas a ningún elemento o producto.
  • Include Tags: Permite seleccionar manualmente las etiquetas que se mostrarán. Solo se visualizarán las etiquetas añadidas en esta lista.
  • Exclude Tags: Permite seleccionar etiquetas específicas para excluirlas de la visualización, aunque estén disponibles en el sistema.
  • Order By: Define el criterio de ordenamiento de las etiquetas (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

Style

  Tags list

  • Tags List Style: Permite seleccionar el estilo visual predefinido de la lista de etiquetas. Modifica la apariencia y estructura general de los elementos.
  • Tags List Direction: Define la orientación de las etiquetas dentro del contenedor (Vertical u Horizontal).
  • Vertical Alignment: Controla la alineación vertical de las etiquetas dentro del contenedor (Superior, Centro o Inferior).
  • Horizontal Alignment: Define la alineación horizontal de las etiquetas (Izquierda, Centro o Derecha).
  • Background Color: Permite establecer un color sólido como fondo del contenedor de la lista de etiquetas.
  • Text Color: Define el color del texto de las etiquetas.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border: Define el grosor del borde del contenedor en píxeles. Puede configurarse por cada lado o de forma vinculada.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse individualmente o de forma uniforme.
  • Border Color: Permite seleccionar el color del borde del contenedor.
  • Padding (Relleno): Espacio interno entre las etiquetas y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de etiquetas de otros elementos adyacentes. Ajustable por cada lado.

  Items

  • Normal / Hover: Permite configurar los estilos del elemento en estado normal y en estado hover (cuando el cursor pasa sobre él).
  • Vertical Alignment: Controla la alineación vertical del contenido dentro del ítem (Superior, Centro o Inferior).
  • Horizontal Alignment: Define la alineación horizontal del contenido dentro del ítem (Izquierda, Centro o Derecha).
  • Text Alignment: Establece la alineación del texto dentro del ítem (Izquierda, Centro o Derecha).
  • Container Width: Define el ancho del contenedor del ítem en píxeles (px). Determina el espacio total que ocupa el elemento.
  • Width: Establece el ancho del ítem en píxeles (px). Controla el tamaño interno del elemento.
  • Background Color: Permite configurar el color de fondo del ítem.
  • Text Color: Define el color del texto del ítem.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border: Define el grosor del borde del ítem en píxeles. Puede configurarse por cada lado o de forma vinculada.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Puede ajustarse individualmente o de forma uniforme.
  • Border Color: Permite seleccionar el color del borde del ítem.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos adyacentes. Ajustable por cada lado.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

CPT Categories

El widget CPT Categories permite mostrar las categorías de un Custom Post Type (CPT) previamente creado en WordPress.

Es ideal para:

  • Portfolios
  • Proyectos
  • Servicios
  • Eventos
  • Cualquier tipo de contenido personalizado

Facilita la organización y navegación dentro de contenidos que no pertenecen al blog tradicional.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget CPT Categories dentro de la categoría correspondiente.
  3. Arrastra el widget CPT Categories al área de diseño.
  4. Colócalo en la sección donde deseas mostrar las categorías del CPT.

Configuración del Widget CPT Categories

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Categories filter

  • Layout Style: Permite seleccionar el estilo de diseño del filtro de categorías. Define la forma en que se presentan los elementos (por ejemplo, en formato lista u otros estilos disponibles).

  Settings: Categories

  • Show Taxonomy Terms: Categories: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Categories: Permite mostrar u ocultar el título del bloque del termino.
  • Title Categories: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Tags

  • Show Taxonomy Terms: Tags: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Tags: Permite mostrar u ocultar el título del bloque del termino.
  • Title Tags: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Navigation Menus

  • Show Taxonomy Terms: Navigation Menus: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Navigation Menus: Permite mostrar u ocultar el título del bloque del termino.
  • Title Navigation Menus: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Link Categories

  • Show Taxonomy Terms: Link Categories: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Link Categories: Permite mostrar u ocultar el título del bloque del termino.
  • Title Link Categories: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Formats

  • Show Taxonomy Terms: Formats: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Formats: Permite mostrar u ocultar el título del bloque del termino.
  • Title Formats: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Themes

  • Show Taxonomy Terms: Themes: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Themes: Permite mostrar u ocultar el título del bloque del termino.
  • Title Themes: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Template Part Areas

  • Show Taxonomy Terms: Template Part Areas: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Template Part Areas: Permite mostrar u ocultar el título del bloque del termino.
  • Title Template Part Areas: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Pattern Categories

  • Show Taxonomy Terms: Pattern Categories: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Pattern Categories: Permite mostrar u ocultar el título del bloque del termino.
  • Title Pattern Categories: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Type

  • Show Taxonomy Terms: Type: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Type: Permite mostrar u ocultar el título del bloque del termino.
  • Title Type: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Brands

  • Show Taxonomy Terms: Brands: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Brands: Permite mostrar u ocultar el título del bloque del termino.
  • Title Brands: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product type

  • Show Taxonomy Terms: Product type: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product type: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product type: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product visibility

  • Show Taxonomy Terms: Product visibility: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product visibility: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product visibility: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product categories

  • Show Taxonomy Terms: Product categories: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product categories: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product categories: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product tags

  • Show Taxonomy Terms: Product tags: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product tags: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product tags: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product shipping classes

  • Show Taxonomy Terms: Product shipping classes: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product shipping classes: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product shipping classes: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product Color

  • Show Taxonomy Terms: Product Color: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product Color: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product Color: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product Number

  • Show Taxonomy Terms: Product Number: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product Number: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product Number: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product Pattern

  • Show Taxonomy Terms: Product Pattern: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product Pattern: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product Pattern: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Settings: Product Size

  • Show Taxonomy Terms: Product Size: Permite mostrar u ocultar los términos de la taxonomía en el frontend.
  • Show Taxonomy Terms Title: Product Size: Permite mostrar u ocultar el título del bloque del termino.
  • Title Product Size: Define el texto del título que se mostrará en la sección.
  • Hide Empty Terms: Permite ocultar los términos que no tienen elementos asociados.
  • Hide Sub Terms: Permite ocultar los términos secundarios.
  • Include Terms: Permite seleccionar manualmente los términos que se mostrarán. Solo se visualizarán los añadidos en esta lista.
  • Exclude Terms: Permite seleccionar términos específicos para excluirlos de la visualización.
  • Order By: Define el criterio de ordenamiento de los términos (por ejemplo: Nombre, ID, Cantidad, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

Style

  Categories list title

  • Width: Define el ancho del contenedor del título en píxeles (px). Controla el espacio horizontal que ocupa dentro de la sección.
  • Alignment: Permite alinear el título horizontalmente (Izquierda, Centro o Derecha).
  • Background Type: Permite seleccionar el tipo de fondo del título (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del título.
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo y espaciado).
  • Border Type: Define el estilo del borde del título (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del título. Puede configurarse individualmente o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el texto del título y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el título de otros elementos adyacentes. Ajustable por cada lado.

  Categories list

  • Lists Style: Permite seleccionar el estilo visual predefinido de la lista. Modifica la apariencia general y la estructura de los elementos.
  • Background Type: Permite elegir el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Text Color: Define el color del texto de la lista.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma independiente o uniforme.
  • Padding (Relleno): Espacio interno entre el contenido de la lista y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa la lista de otros elementos adyacentes. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto).

  Categories list items

  • Normal / Hover / Selected: Permite configurar los estilos del ítem en estado normal, al pasar el cursor (hover) y cuando está seleccionado.
  • Text Alignment: Define la alineación del texto dentro del ítem (Izquierda, Centro o Derecha).
  • Container Width: Define el ancho del contenedor del ítem en píxeles (px). Determina el espacio total que ocupa.
  • Width: Establece el ancho del ítem en píxeles (px). Controla el tamaño interno del elemento.
  • Background Type: Permite seleccionar el tipo de fondo del ítem (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del ítem.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border Type: Define el estilo del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Puede configurarse individualmente o de forma uniforme.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el ítem de otros elementos adyacentes. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del ítem. Se pueden ajustar desplazamientos, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del ítem (Default, Hidden, Visible, Auto).

  Categories sub list

  • Sub Lists Style: Permite seleccionar el estilo visual predefinido de la sublista. Modifica la apariencia y estructura de los elementos secundarios.
  • Background Type: Permite elegir el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Text Color: Define el color del texto de la sublista.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma independiente o uniforme.
  • Padding (Relleno): Espacio interno entre el contenido de la sublista y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa la sublista de otros elementos adyacentes. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor. Se pueden ajustar desplazamientos, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto).

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Products

El widget WC: Products permite mostrar productos de tu tienda WooCommerce en formato de lista o cuadrícula.

Es ideal para:

  • Página principal
  • Sección de productos destacados
  • Landing pages
  • Páginas de categoría personalizadas
  • Secciones promocionales

Facilita la visualización estratégica de productos dentro del diseño creado con Elementor.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Products dentro de la categoría WooCommerce.
  3. Arrastra el widget WC: Products al área de diseño.
  4. Colócalo en la sección donde deseas mostrar los productos.

Configuración del Widget WC: Products

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Products filters

  • Products to Show: Define la cantidad de productos que se mostrarán en el listado.
  • Pagination: Permite activar o desactivar la paginación para dividir los productos en varias páginas.
  • Listen Filters: Activa la actualización dinámica de productos cuando se aplican filtros.
  • Products Status: Define el estado de los productos a mostrar (por ejemplo: Publish, Draft, etc.).
  • Products Type: Permite filtrar los productos por tipo (Todos, Simple, Variable, etc.).
  • Show Featured Products: Permite mostrar únicamente productos marcados como destacados.
  • Show Products in Stock: Permite mostrar productos disponibles en inventario.
  • Show Products Out of Stock: Permite mostrar productos sin existencias.
  • Show Products on Backorder: Permite mostrar productos disponibles bajo pedido.
  • Show Products in Sale: Permite mostrar productos que tengan precio en oferta.
  • Show Single Product Upsells: Permite mostrar productos relacionados como ventas adicionales (Upsells). Solo funciona en la vista de producto individual.
  • Show Single Product Cross-Sells: Permite mostrar productos complementarios (Cross-sells). Solo funciona en la vista de producto individual.
  • Include Products: Permite seleccionar manualmente productos específicos para mostrarlos.
  • Exclude Products: Permite excluir productos específicos del listado.
  • Display by Categories: Permite filtrar y mostrar productos según categorías seleccionadas.
  • Order By: Define el criterio de ordenamiento de los productos (Nombre, Fecha, Precio, etc.).
  • Order: Establece la dirección del orden seleccionado (Ascendente o Descendente).

  Products

  • Layout Style: Permite seleccionar el diseño de visualización de los productos (por ejemplo: Lista o Grid).
  • Show Products Image: Permite mostrar u ocultar la imagen del producto.
  • Image Size: Define el tamaño de la imagen (Thumbnail, Medium, Large, etc.).
  • Image Aspect Ratio: Define la proporción de la imagen (Default u opciones personalizadas).
  • Show Products SKU: Permite mostrar u ocultar el SKU del producto.
  • Show Products Title: Permite mostrar u ocultar el título del producto.
  • Show Products Reviews: Permite mostrar u ocultar la calificación o reseñas del producto.
  • Title Tag: Define la etiqueta HTML del título (H1, H2, H3, etc.) para jerarquía SEO.
  • Truncate Title: Permite limitar la cantidad de caracteres visibles del título.
  • Show Products Price: Permite mostrar u ocultar el precio del producto.
  • Show Products Sale Badge: Permite mostrar u ocultar la insignia de oferta.
  • Sale Badge Value: Define el tipo de valor mostrado en la insignia (por ejemplo: Porcentaje o Monto).
  • Sale Badge Prepended Text: Permite añadir texto antes del valor de la insignia de oferta.
  • Sale Badge Appended Text: Permite añadir texto después del valor de la insignia de oferta.
  • Out of Stock Badge Text: Permite definir el texto que se mostrará cuando el producto esté sin stock.
  • Show Products Short Description: Permite mostrar u ocultar la descripción corta del producto.
  • Truncate Short Description: Permite limitar la cantidad de caracteres visibles de la descripción corta.
  • Show Products Description: Permite mostrar u ocultar la descripción completa del producto.
  • Truncate Description: Permite limitar la cantidad de caracteres visibles de la descripción completa.
  • Show View Detail CTA: Permite mostrar u ocultar el botón o enlace de “Ver detalle”.
  • CTA Label: Define el texto del botón o enlace de llamada a la acción.
  • CTA Target: Define si el enlace se abre en la misma ventana o en una nueva.
  • CTA Icon: Permite seleccionar un ícono para el botón de llamada a la acción.
  • Show Add to Cart Button: Permite mostrar u ocultar el botón “Agregar al carrito”.
  • Add to Cart Label: Define el texto del botón “Agregar al carrito”.
  • Add to Cart Icon: Permite seleccionar un ícono para el botón “Agregar al carrito”.
  • Show Buy Now Button: Permite mostrar u ocultar el botón “Comprar ahora”.
  • Buy Now Label: Define el texto del botón “Comprar ahora”.
  • Buy Now Target: Define si el botón “Comprar ahora” se abre en la misma ventana o en una nueva.
  • Buy Now Icon: Permite seleccionar un ícono para el botón “Comprar ahora”.

Style

  Container

  • Background Type: Permite seleccionar el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o uniforme.
  • Padding (Relleno): Espacio interno entre el contenido y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de otros elementos adyacentes. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor. Se pueden ajustar desplazamiento, desenfoque, expansión y color.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto).

  Items image

  • CSS Filters: Permite aplicar filtros visuales a la imagen (desenfoque, brillo, contraste, saturación, etc.).
  • Image Container Width: Define el ancho del contenedor de la imagen en píxeles (px).
  • Image Width: Establece el ancho de la imagen en píxeles (px).
  • Image Height: Define la altura de la imagen en píxeles (px).
  • Horizontal Alignment: Permite alinear la imagen horizontalmente dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Controla la alineación vertical de la imagen dentro del contenedor (Superior, Centro o Inferior).
  • Background Type: Permite seleccionar el tipo de fondo del contenedor de la imagen (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma independiente o uniforme.
  • Padding (Relleno): Espacio interno entre la imagen y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de la imagen de otros elementos adyacentes. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de la imagen.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-Index: Controla la jerarquía de apilamiento del contenedor en el eje Z. Un valor mayor lo posiciona por encima de otros elementos superpuestos.

  Items Body

  • Post Body Width: Define el ancho del contenedor del cuerpo del ítem en píxeles (px).
  • Horizontal Alignment: Permite alinear el contenido horizontalmente dentro del cuerpo (Izquierda, Centro o Derecha).
  • Vertical Alignment: Controla la alineación vertical del contenido dentro del cuerpo (Superior, Centro o Inferior).
  • Position: Define el tipo de posicionamiento del contenedor (Initial, Relative, Absolute, etc.), afectando su comportamiento en el layout.
  • Background Type: Permite seleccionar el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma independiente o uniforme.
  • Padding (Relleno): Espacio interno entre el contenido y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de otros elementos adyacentes. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-Index: Controla la jerarquía de apilamiento del contenedor en el eje Z. Un valor mayor lo posiciona por encima de otros elementos superpuestos.

  Items Body

  • Position: Define el tipo de posicionamiento de la insignia de oferta (Initial, Relative, Absolute, etc.), determinando su comportamiento dentro del contenedor.
  • Alignment: Permite alinear la insignia horizontalmente dentro de su contenedor (Izquierda, Centro o Derecha).
  • Background Type: Permite seleccionar el tipo de fondo de la insignia (color sólido, degradado o imagen).
  • Text Color: Define el color del texto de la insignia.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border Type: Define el estilo del borde de la insignia (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la insignia. Puede configurarse de forma independiente o uniforme.
  • Padding (Relleno): Espacio interno entre el texto de la insignia y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa la insignia de otros elementos del producto. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor de la insignia.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño de la insignia (Default, Hidden, Visible, Auto).
  • Z-Index: Controla la jerarquía de apilamiento de la insignia en el eje Z. Un valor mayor la posiciona por encima de otros elementos superpuestos.

  Out of stock badge

  • Position: Define el tipo de posicionamiento de la insignia “Out of Stock” (Initial, Relative, Absolute, etc.), determinando su ubicación dentro del contenedor.
  • Alignment: Permite alinear horizontalmente la insignia dentro de su contenedor (Izquierda, Centro o Derecha).
  • Background Type: Permite seleccionar el tipo de fondo de la insignia (color sólido, degradado o imagen).
  • Text Color: Define el color del texto de la insignia.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y espaciado).
  • Border Type: Define el estilo del borde de la insignia (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la insignia. Puede configurarse de forma independiente o uniforme.
  • Padding (Relleno): Espacio interno entre el texto de la insignia y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa la insignia de otros elementos del producto. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor de la insignia.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño de la insignia (Default, Hidden, Visible, Auto).
  • Z-Index: Controla la jerarquía de apilamiento de la insignia en el eje Z. Un valor mayor la posiciona por encima de otros elementos superpuestos.

  SKU

  • Alignment: Permite alinear el SKU horizontalmente dentro de su contenedor (Izquierda, Centro o Derecha).
  • Background Type: Permite seleccionar el tipo de fondo del contenedor del SKU (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del SKU.
  • Typography: Permite configurar la tipografía del SKU (fuente, tamaño, peso, estilo y espaciado).
  • Border Type: Define el estilo del borde del contenedor del SKU (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del SKU. Puede configurarse de forma independiente o uniforme.
  • Padding (Relleno): Espacio interno entre el texto del SKU y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el SKU de otros elementos del producto. Ajustable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del SKU.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto).

  Title

  • Normal / Hover: Permite configurar los estilos del título en estado normal y cuando el usuario pasa el cursor por encima (hover).
  • Alignment: Define la alineación horizontal del título (Izquierda, Centro o Derecha).
  • Background Type: Permite establecer el tipo de fondo del contenedor del título (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del título.
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo, altura de línea, espaciado, etc.).
  • Border Type: Define el estilo del borde del contenedor del título (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarlo se pueden ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del título. Puede configurarse de manera uniforme o individual por cada lado.
  • Padding (Relleno): Espacio interno entre el texto del título y el borde del contenedor. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el título de otros elementos. Configurable individualmente (superior, derecho, inferior e izquierdo).
  • Box Shadow: Permite aplicar una sombra al contenedor del título.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible, Auto).

  Reviews

  • Alignment: Permite alinear horizontalmente el bloque de reseñas (Izquierda, Centro o Derecha).
  • Background Type: Permite definir el tipo de fondo del contenedor de reseñas (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor de reseñas (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de reseñas. Puede configurarse de forma uniforme o independiente por cada lado (superior, derecho, inferior e izquierdo).
  • Padding (Relleno): Espacio interno entre el contenido de las reseñas y el borde del contenedor. Ajustable individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de reseñas de otros elementos del producto. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra al contenedor de reseñas.
  • Overflow: Define el comportamiento del contenido cuando excede el tamaño del contenedor (Default, Hidden, Visible o Auto).

  Reviews stars

  • Items Width: Permite definir el ancho del contenedor de las estrellas de reseñas.
  • Items Height: Permite definir la altura del contenedor de las estrellas.
  • Background Type: Permite establecer el tipo de fondo del contenedor de las estrellas (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar grosor y color cuando está activo.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de las estrellas. Puede configurarse de forma uniforme o individual por lado.
  • Padding (Relleno): Espacio interno entre las estrellas y el borde del contenedor. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de estrellas de otros elementos. Configurable individualmente.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de las estrellas.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Icon Width: Permite ajustar el ancho de cada estrella (ícono).
  • Icon Height: Permite ajustar la altura de cada estrella (ícono).
  • Icon Color: Permite definir el color de las estrellas de reseñas.

  Price

  • Alignment: Permite alinear horizontalmente el bloque de precio (Izquierda, Centro o Derecha).
  • Background Type: Permite definir el tipo de fondo del contenedor del precio (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar grosor y color cuando está activo.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del precio. Configurable de forma uniforme o por cada lado.
  • Padding (Relleno): Espacio interno entre el contenido del precio y el borde del contenedor. Ajustable por lado.
  • Margin (Margen): Espacio externo que separa el bloque de precio de otros elementos. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del precio.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Normal price / Sales regular price / Sale price: Permite configurar los estilos de cada tipo de precio de manera independiente:
  • Background Type: Tipo de fondo del texto del precio (color sólido, degradado o imagen).
  • Text Color: Color del texto del precio.
  • Typography: Configuración tipográfica (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Border Type: Estilo del borde aplicado al precio.
  • Border Radius: Curvatura de las esquinas del contenedor del precio.
  • Padding (Relleno): Espacio interno entre el texto del precio y su borde.
  • Margin (Margen): Espacio externo que separa ese tipo de precio de otros elementos.
  • Box Shadow: Sombra aplicada al precio.
  • Overflow: Comportamiento del contenido si supera el tamaño del contenedor.

  Content

  • Alignment: Permite alinear horizontalmente el contenido (Izquierda, Centro o Derecha).
  • Background Type: Permite definir el tipo de fondo del contenedor del contenido (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del contenido.
  • Typography: Permite configurar la tipografía del contenido (fuente, tamaño, peso, estilo, altura de línea, espaciado, etc.).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse permite ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del contenido. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido y el borde del contenedor. Ajustable individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de contenido de otros elementos. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del contenido.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del contenedor (Default, Hidden, Visible o Auto).

  CTAs container

  • Horizontal alignment: Permite alinear horizontalmente los botones de acción (CTAs) dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical alignment: Permite alinear verticalmente los botones de acción dentro del contenedor (Superior, Centro o Inferior).

  View detail CTA

  • Normal / Hover: Permite configurar los estilos del botón “View detail” en estado normal y cuando el usuario pasa el cursor por encima.
  • CTA Width: Define el ancho del botón. Puede establecerse en automático o con un valor personalizado.
  • CTA Height: Define la altura del botón (configurable por dispositivo, por ejemplo Desktop).
  • Background Type: Permite seleccionar el tipo de fondo del botón (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del botón.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Text Alignment: Permite alinear el texto dentro del botón (Izquierda, Centro o Derecha).
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma uniforme o individual por lado.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos. Configurable por lado.
  • Box Shadow: Permite aplicar una sombra al botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Configuración del ícono
  • Icon Width: Permite ajustar el ancho del ícono dentro del botón.
  • CTA Height (Icon alignment): Controla el tamaño vertical del ícono (relacionado con la altura del botón).
  • Background Type (Icon): Permite definir el tipo de fondo del ícono (color sólido, degradado o imagen).
  • Icon Color: Define el color del ícono.
  • Border Type (Icon): Define el estilo del borde del ícono.
  • Icon Border Radius: Controla la curvatura de las esquinas del contenedor del ícono.
  • Icon Padding: Espacio interno entre el ícono y su borde.
  • Icon Margin: Espacio externo que separa el ícono del texto u otros elementos.
  • Icon Box Shadow: Permite aplicar una sombra alrededor del ícono.

  Add to cart CTA

  • Normal / Hover: Permite configurar los estilos del botón “Add to cart” en estado normal y cuando el usuario pasa el cursor por encima.
  • CTA Width: Define el ancho del botón. Puede establecerse en automático o con un valor personalizado.
  • CTA Height: Define la altura del botón (configurable por dispositivo, por ejemplo Desktop).
  • Background Type: Permite seleccionar el tipo de fondo del botón (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del botón.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Text Alignment: Permite alinear el texto dentro del botón (Izquierda, Centro o Derecha).
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma uniforme o individual por lado.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos. Configurable por lado.
  • Box Shadow: Permite aplicar una sombra al botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Configuración del ícono
  • Icon Width: Permite ajustar el ancho del ícono dentro del botón.
  • CTA Height (Icon alignment): Controla el tamaño vertical del ícono (relacionado con la altura del botón).
  • Background Type (Icon): Permite definir el tipo de fondo del ícono (color sólido, degradado o imagen).
  • Icon Color: Define el color del ícono.
  • Border Type (Icon): Define el estilo del borde del ícono.
  • Icon Border Radius: Controla la curvatura de las esquinas del contenedor del ícono.
  • Icon Padding: Espacio interno entre el ícono y su borde.
  • Icon Margin: Espacio externo que separa el ícono del texto u otros elementos.
  • Icon Box Shadow: Permite aplicar una sombra alrededor del ícono.

  View cart CTA

  • Normal / Hover: Permite configurar los estilos del botón “View cart” en estado normal y cuando el usuario pasa el cursor por encima (hover).
  • CTA Width: Define el ancho del botón. Puede establecerse en automático o con un valor personalizado.
  • CTA Height: Define la altura del botón. Puede configurarse por dispositivo (por ejemplo, Desktop).
  • Background Type: Permite seleccionar el tipo de fondo del botón (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del botón.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Text Alignment: Permite alinear el texto dentro del botón (Izquierda, Centro o Derecha).
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar grosor y color cuando está activo.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma uniforme o independiente por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Ajustable individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).

  Buy now CTA

  • Normal / Hover: Permite configurar los estilos del botón “Buy now” en estado normal y cuando el usuario pasa el cursor por encima.
  • CTA Width: Define el ancho del botón. Puede establecerse en automático o con un valor personalizado.
  • CTA Height: Define la altura del botón (configurable por dispositivo, por ejemplo Desktop).
  • Background Type: Permite seleccionar el tipo de fondo del botón (color sólido, degradado o imagen).
  • Text Color: Define el color del texto del botón.
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Text Alignment: Permite alinear el texto dentro del botón (Izquierda, Centro o Derecha).
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma uniforme o individual por lado.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos. Configurable por lado.
  • Box Shadow: Permite aplicar una sombra al botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Configuración del ícono
  • Icon Width: Permite ajustar el ancho del ícono dentro del botón.
  • CTA Height (Icon alignment): Controla el tamaño vertical del ícono (relacionado con la altura del botón).
  • Background Type (Icon): Permite definir el tipo de fondo del ícono (color sólido, degradado o imagen).
  • Icon Color: Define el color del ícono.
  • Border Type (Icon): Define el estilo del borde del ícono.
  • Icon Border Radius: Controla la curvatura de las esquinas del contenedor del ícono.
  • Icon Padding: Espacio interno entre el ícono y su borde.
  • Icon Margin: Espacio externo que separa el ícono del texto u otros elementos.
  • Icon Box Shadow: Permite aplicar una sombra alrededor del ícono.

  Pagination

  • Background Type: Permite definir el tipo de fondo del contenedor de la paginación (color sólido, degradado o imagen).
  • Alignment: Permite alinear horizontalmente la paginación (Izquierda, Centro o Derecha).
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de paginación. Puede configurarse de forma uniforme o individual por cada lado.
  • Padding (Relleno): Espacio interno entre los elementos de paginación y el borde del contenedor. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa la paginación de otros elementos. Configurable individualmente.
  • Normal / Hover: Permite configurar los estilos de los números de paginación en estado normal y cuando el usuario pasa el cursor por encima.
  • Numbers Width: Define el ancho de cada número de paginación.
  • Numbers Height: Define la altura de cada número de paginación.
  • Background Type: Permite establecer el tipo de fondo de los números (color sólido, degradado o imagen).
  • Text Color: Define el color del texto de los números.
  • Typography: Permite configurar la tipografía de los números (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Alignment: Permite alinear el contenido dentro de cada número (Izquierda, Centro o Derecha).
  • Border Type: Define el estilo del borde de cada número de paginación.
  • Border Radius: Controla la curvatura de las esquinas de cada número. Puede configurarse de manera uniforme o por cada lado.
  • Padding (Relleno): Espacio interno entre el número y su borde.
  • Margin (Margen): Espacio externo que separa cada número de los demás.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Cart

El widget WC: Cart permite visualizar el carrito de compras del usuario directamente en cualquier sección del sitio.

Es ideal para:

  • Página de carrito personalizada
  • Header con mini carrito
  • Sidebar de tienda
  • Página de resumen de compra

Facilita el acceso rápido al resumen de productos añadidos antes de finalizar la compra.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Cart dentro de la categoría WooCommerce.
  3. Arrastra el widget WC: Cart al área de diseño.
  4. Colócalo en la sección donde deseas mostrar el carrito.

Configuración del Widget WC: Cart

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Este widgets en particular de Elementor, solo cuenta con la configuración:

  • Style (Estilo)

A continuación lo detallaremos en profundidad.

Style

  Cart

  • Width: Permite definir el ancho del carrito. Puede configurarse en porcentaje (%) u otra unidad disponible.
  • Height: Permite definir la altura del carrito en píxeles (px) u otra unidad seleccionada.
  • Horizontal alignment: Permite alinear el carrito horizontalmente dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical alignment: Permite alinear el carrito verticalmente dentro de su contenedor (Superior, Centro o Inferior).
  • Background Type: Permite definir el tipo de fondo del carrito (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del carrito.
  • Border Type: Define el estilo del borde del carrito (Sólido, Doble, Punteado, Discontinuo, etc.), con opción de ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del carrito. Puede configurarse de forma uniforme o independiente por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del carrito y su borde. Ajustable individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el carrito de otros elementos. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del carrito.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del carrito (Default, Hidden, Visible o Auto).
  • Z-Index: Permite definir la prioridad de superposición del carrito respecto a otros elementos en la página. Un valor mayor lo mostrará por encima de otros elementos.

  Cart form

  • Width: Permite definir el ancho del formulario del carrito. Puede configurarse en porcentaje (%) u otra unidad disponible.
  • Height: Permite establecer la altura del formulario en píxeles (px) u otra unidad seleccionada.
  • Horizontal alignment: Permite alinear el formulario horizontalmente dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical alignment: Permite alinear el formulario verticalmente dentro de su contenedor (Superior, Centro o Inferior).
  • Background Type: Permite definir el tipo de fondo del formulario (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del formulario.
  • Border Type: Define el estilo del borde del formulario (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del formulario. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del formulario y el borde. Ajustable individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el formulario de otros elementos. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del formulario.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del formulario (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del formulario frente a otros elementos en la página. Un valor mayor lo posicionará por encima de otros elementos.

  Cart columns title

  • Text alignment: Permite alinear el texto del título de las columnas (Izquierda, Centro, Derecha o Justificado).
  • Text color: Define el color del texto del título.
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo, altura de línea, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del área del título (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del título.
  • Border Type: Define el estilo del borde del contenedor del título (Sólido, Doble, Punteado, Discontinuo, etc.), con opción de ajustar grosor y color.
  • Padding (Relleno): Espacio interno entre el texto del título y el borde del contenedor. Ajustable por cada lado (Top, Right, Bottom, Left).
  • Margin (Margen): Espacio externo que separa el título de otros elementos del carrito. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del título.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del título respecto a otros elementos en la página.

  Cart products remove button

  • Column Width: Permite definir el ancho de la columna donde se ubica el botón de eliminar producto. Configurable en píxeles (px).
  • Column Padding: Espacio interno dentro de la columna del botón. Ajustable individualmente por cada lado (Top, Right, Bottom, Left).
  • Normal / Hover: Permite configurar los estilos del botón de eliminar producto en estado normal y cuando el usuario pasa el cursor por encima.
  • Width: Define el ancho del botón de eliminar.
  • Height: Define la altura del botón.
  • Text Alignment: Permite alinear el contenido del botón (Izquierda, Centro, Derecha o Justificado).
  • Typography: Permite configurar la tipografía del botón (fuente, tamaño, peso, estilo, etc.).
  • Color: Define el color del texto o ícono del botón.
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del botón.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma uniforme o por cada lado.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

  Cart products images

  • Image Width (Column): Permite definir el ancho de la columna donde se muestra la imagen del producto. Configurable en píxeles (px).
  • Column Padding: Espacio interno dentro de la columna de la imagen. Ajustable individualmente por cada lado (Top, Right, Bottom, Left).
  • CSS Filters: Permite aplicar filtros visuales a la imagen (por ejemplo: desenfoque, brillo, contraste, escala de grises, etc.).
  • Image Width: Define el ancho de la imagen del producto.
  • Image Height: Define la altura de la imagen del producto.
  • Background Type: Permite establecer el tipo de fondo del contenedor de la imagen (color sólido, degradado o imagen).
  • Border Type: Define el estilo del borde del contenedor de la imagen (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de la imagen. Puede configurarse de forma uniforme o individual por cada lado.
  • Padding (Relleno): Espacio interno entre la imagen y el borde del contenedor. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa la imagen de otros elementos dentro del carrito. Configurable individualmente.
  • Box Shadow: Permite aplicar una sombra alrededor de la imagen.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición de la imagen respecto a otros elementos.

  Cart products title

  • Column Width: Permite definir el ancho de la columna donde se muestra el título del producto. Configurable en píxeles (px).
  • Column Padding: Espacio interno dentro de la columna del título. Ajustable individualmente por cada lado (Top, Right, Bottom, Left).
  • Normal / Hover: Permite configurar los estilos del título del producto en estado normal y cuando el usuario pasa el cursor por encima.
  • Width: Define el ancho del contenedor del título.
  • Height: Define la altura del contenedor del título.
  • Text Alignment: Permite alinear el texto del título (Izquierda, Centro, Derecha o Justificado).
  • Typography: Permite configurar la tipografía del título (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Color: Define el color del texto del título.
  • Background Type: Permite establecer el tipo de fondo del contenedor del título (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del título.
  • Border Type: Define el estilo del borde del contenedor del título (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del título. Puede configurarse de forma uniforme o por cada lado.
  • Padding (Relleno): Espacio interno entre el texto del título y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el título de otros elementos dentro del carrito. Configurable individualmente.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del título.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del título respecto a otros elementos en la página.

  Cart products price

  • Column Width: Permite definir el ancho de la columna donde se muestra el precio del producto. Configurable en píxeles (px).
  • Column Padding: Espacio interno dentro de la columna del precio. Ajustable individualmente por cada lado (Top, Right, Bottom, Left).
  • Width: Define el ancho del contenedor del precio.
  • Height: Define la altura del contenedor del precio.
  • Text Alignment: Permite alinear el texto del precio (Izquierda, Centro, Derecha o Justificado).
  • Typography: Permite configurar la tipografía del precio (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Color: Define el color del texto del precio.
  • Background Type: Permite establecer el tipo de fondo del contenedor del precio (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del precio.
  • Border Type: Define el estilo del borde del contenedor del precio (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del precio. Puede configurarse de forma uniforme o individual por cada lado.
  • Padding (Relleno): Espacio interno entre el texto del precio y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el precio de otros elementos dentro del carrito. Configurable individualmente.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del precio.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del precio respecto a otros elementos en la página.

  Cart products quantity input

  • Column Width: Permite definir el ancho de la columna donde se muestra el campo de cantidad. Configurable en píxeles (px).
  • Column Padding: Espacio interno dentro de la columna del campo de cantidad. Ajustable individualmente por cada lado (Top, Right, Bottom, Left).
  • Width: Define el ancho del campo de cantidad. Puede configurarse en porcentaje (%) u otra unidad disponible.
  • Height: Define la altura del campo de cantidad en píxeles (px).
  • Horizontal Alignment: Permite alinear el campo de cantidad horizontalmente dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear el campo de cantidad verticalmente dentro de su contenedor (Superior, Centro o Inferior).
  • Text Alignment: Permite alinear el texto dentro del campo de cantidad (Izquierda, Centro, Derecha o Justificado).
  • Text Color: Define el color del texto del campo de cantidad.
  • Typography: Permite configurar la tipografía del valor numérico (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite establecer el tipo de fondo del campo (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del campo.
  • Border Type: Define el estilo del borde del campo de cantidad (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del campo. Puede configurarse de forma uniforme o individual por cada lado.
  • Padding (Relleno): Espacio interno entre el valor numérico y el borde del campo. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el campo de cantidad de otros elementos dentro del carrito. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del campo de cantidad.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del campo (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del campo con respecto a otros elementos en la página.

  Cart products quantity input value

  • Width: Permite definir el ancho del contenedor que muestra el valor numérico de la cantidad. Configurable en píxeles (px) u otra unidad disponible.
  • Height: Permite establecer la altura del contenedor del valor en píxeles (px).
  • Horizontal Alignment: Permite alinear horizontalmente el valor dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el valor dentro del campo (Superior, Centro o Inferior).
  • Text Alignment: Permite alinear el texto numérico dentro del área del valor (Izquierda, Centro, Derecha o Justificado).
  • Text Color: Define el color del número mostrado en el campo de cantidad.
  • Typography: Permite configurar la tipografía del valor (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Background Type: Permite establecer el tipo de fondo del contenedor del valor (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del valor.
  • Border Type: Define el estilo del borde del contenedor del valor (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del valor. Puede configurarse de forma uniforme o por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el número y el borde del contenedor. Ajustable individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el valor de otros elementos dentro del campo de cantidad. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del valor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del valor respecto a otros elementos en la página.rmite establecer la prioridad de superposición del valor respecto a otros elementos en la página.

  Cart products quantity input buttons

  • Normal / Hover: Permite configurar los estilos de los botones de incremento y decremento en estado normal y cuando el usuario pasa el cursor por encima.
  • Width: Define el ancho del botón.
  • Height: Define la altura del botón.
  • Horizontal Alignment: Permite alinear el botón horizontalmente dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear el botón verticalmente dentro de su contenedor (Superior, Centro o Inferior).
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del botón.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma uniforme o por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Ajustable individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos.
  • Icon Width: Permite definir el ancho del ícono dentro del botón.
  • CTA Height (Icon height): Define la altura del ícono.
  • Background Type (Icon): Permite establecer el tipo de fondo del contenedor del ícono.
  • Blur (Icon): Permite aplicar un efecto de desenfoque al fondo del ícono.
  • Icon Color: Define el color del ícono del botón.
  • Border Type (Icon): Define el estilo del borde del contenedor del ícono.
  • Icon Border Radius: Controla la curvatura de las esquinas del contenedor del ícono.
  • Icon Padding: Espacio interno entre el ícono y su borde.
  • Icon Margin: Espacio externo que separa el ícono de otros elementos dentro del botón.

  Cart products sub total

  • Column Width: Permite definir el ancho de la columna donde se muestra el subtotal del producto. Configurable en píxeles (px).
  • Column Padding: Espacio interno dentro de la columna del subtotal. Ajustable individualmente por cada lado (Top, Right, Bottom, Left).
  • Width: Define el ancho del contenedor del subtotal.
  • Height: Define la altura del contenedor del subtotal.
  • Text Alignment: Permite alinear el texto del subtotal (Izquierda, Centro, Derecha o Justificado).
  • Typography: Permite configurar la tipografía del subtotal (fuente, tamaño, peso, estilo, espaciado, etc.).
  • Color: Define el color del texto del subtotal.
  • Background Type: Permite establecer el tipo de fondo del contenedor del subtotal (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del subtotal.
  • Border Type: Define el estilo del borde del contenedor del subtotal (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del subtotal. Puede configurarse de forma uniforme o por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del subtotal y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el subtotal de otros elementos dentro del carrito. Configurable individualmente.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del subtotal.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del subtotal respecto a otros elementos en la página.

  Cart coupon container

  • Width: Permite definir el ancho del contenedor del cupón. Puede configurarse en porcentaje (%) u otra unidad disponible.
  • Height: Permite establecer la altura del contenedor en píxeles (px).
  • Horizontal Alignment: Permite alinear el contenedor del cupón horizontalmente dentro de su área (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear el contenedor del cupón verticalmente dentro de su espacio (Superior, Centro o Inferior).
  • Gap: Define el espacio entre los elementos internos del contenedor (por ejemplo, entre el campo de texto y el botón).
  • Background Type: Permite establecer el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Blur: Permite aplicar un efecto de desenfoque al fondo del contenedor.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), permitiendo ajustar grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del cupón. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del contenedor y su borde. Ajustable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor del cupón de otros elementos del carrito. Configurable por cada lado.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del contenedor respecto a otros elementos en la página.

  Cart coupon input

  • Width: Permite definir el ancho del campo de entrada del cupón. Se puede configurar en píxeles (px), porcentaje (%) u otras unidades disponibles.
  • Height: Permite establecer la altura del campo en píxeles (px).
  • Horizontal Alignment: Define la alineación horizontal del input dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el input dentro de su espacio (Superior, Centro o Inferior).
  • Text Alignment: Controla la alineación del texto dentro del campo (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto que el usuario escribe en el campo.
  • Placeholder Color: Define el color del texto de ayuda (placeholder) que aparece cuando el campo está vacío.
  • Typography: Permite personalizar la tipografía del texto del input (familia, tamaño, peso, estilo, interlineado, etc.).
  • Background Type: Permite definir el tipo de fondo del campo (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo del input si el diseño lo requiere.
  • Border Type: Define el estilo del borde del campo (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del input. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto y el borde del campo. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el input de otros elementos dentro del contenedor del cupón.
  • Box Shadow: Permite aplicar una sombra alrededor del campo de entrada.
  • Overflow: Define el comportamiento del contenido si excede el tamaño del campo (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del input respecto a otros elementos en la página.

Cart coupon submit button

  • Normal y Hover: Permite definir estilos diferentes cuando el usuario pasa el cursor sobre el botón.
  • Width: Permite definir el ancho del botón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • CTAs Horizontal Alignment: Permite alinear el conjunto de botones CTA horizontalmente dentro del contenedor (Izquierda, Centro, Derecha o Distribuido).
  • Gap: Define el espacio entre botones o entre elementos internos del botón (por ejemplo, icono y texto).
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor.
  • Vertical Alignment: Permite alinear verticalmente el botón dentro de su espacio disponible.
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia, tamaño, peso, estilo, espaciado, etc.).
  • Color: Permite definir el color del texto del botón.
  • Background Type: Permite configurar el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo del botón si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define el comportamiento del contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

  Cart coupon error message

  • Text Color: Permite definir el color del texto del mensaje de error que se muestra cuando el cupón no es válido o ocurre algún problema.
  • Typography: Permite personalizar la tipografía del mensaje (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite configurar el tipo de fondo del mensaje de error (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo del mensaje si el diseño lo requiere.
  • Border Type: Define el estilo del borde del mensaje (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del mensaje de error. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del mensaje y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el mensaje de error de otros elementos del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del mensaje de error.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del mensaje respecto a otros elementos en la página.

  Cart coupon submit button

  • Normal y Hover: Permite definir estilos diferentes cuando el usuario pasa el cursor sobre el botón.
  • Width: Permite definir el ancho del botón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el botón dentro de su espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite definir el color del texto del botón.
  • Background Type: Permite configurar el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo del botón si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define el comportamiento del contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

  Cart total

  • Width: Permite definir el ancho del contenedor del total del carrito en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor.
  • Horizontal Alignment: Permite alinear horizontalmente el bloque del total dentro de su contenedor (Izquierda, Centro, Derecha o Distribuido, según las opciones disponibles).
  • Vertical Alignment: Permite alinear verticalmente el bloque dentro de su espacio (Superior, Centro o Inferior).
  • Background Type: Permite configurar el tipo de fondo del contenedor del total (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del total. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del total y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque del total de otros elementos del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del total.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del bloque del total respecto a otros elementos en la página.

  Cart total title

  • Width: Permite definir el ancho del título del total del carrito en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto del título (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto del título.
  • Typography: Permite personalizar la tipografía del título (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite establecer el tipo de fondo del área del título (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor del título (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Padding (Relleno): Espacio interno entre el texto del título y su borde. Configurable por cada lado (Top, Right, Bottom, Left).
  • Margin (Margen): Espacio externo que separa el título de otros elementos dentro del bloque del total.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del título.
  • Overflow: Define el comportamiento del contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del título respecto a otros elementos en la página.

  Cart columns title

  • Text Alignment: Define la alineación del texto de los títulos de las columnas del carrito (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto de los encabezados de columna.
  • Typography: Permite personalizar la tipografía de los títulos (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite establecer el tipo de fondo del área de los títulos de columna (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor de los títulos (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Padding (Relleno): Espacio interno entre el texto del título y su borde. Configurable por cada lado (Top, Right, Bottom, Left).
  • Margin (Margen): Espacio externo que separa los títulos de columna de otros elementos del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de los títulos.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición de los títulos respecto a otros elementos en la página.

  Cart total sub total

  • Column Padding: Permite definir el espacio interno de la columna donde se muestra el subtotal. Puede configurarse de forma individual para cada lado (Top, Right, Bottom, Left).
  • Width: Permite establecer el ancho del bloque del subtotal en píxeles (px) u otras unidades disponibles.
  • Height: Permite definir la altura del contenedor del subtotal.
  • Text Alignment: Controla la alineación del texto del subtotal (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del subtotal (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del subtotal.
  • Background Type: Permite definir el tipo de fondo del bloque del subtotal (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor del subtotal (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del subtotal. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del subtotal y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque del subtotal de otros elementos del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del subtotal.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del subtotal respecto a otros elementos en la página.

  Cart total shipping

  • Column Padding: Permite definir el espacio interno de la columna donde se muestra el costo de envío. Puede configurarse individualmente para cada lado (Top, Right, Bottom, Left).
  • Width: Permite establecer el ancho del bloque de envío en píxeles (px) u otras unidades disponibles.
  • Height: Permite definir la altura del contenedor del envío.
  • Text Alignment: Controla la alineación del texto correspondiente al envío (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto de envío (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del costo de envío.
  • Background Type: Permite definir el tipo de fondo del bloque de envío (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor de envío (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor de envío. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del envío y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de envío de otros elementos del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor de envío.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del bloque de envío respecto a otros elementos en la página.

  Cart total change shipping address CTA

  • Normal y Hover: Permite definir estilos distintos cuando el usuario interactúa con el botón.
  • Width: Permite definir el ancho del botón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el botón dentro de su espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del botón.
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos dentro del bloque de totales.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

  Cart total shipping fields

  • Width: Permite definir el ancho de los campos de envío en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura de los campos.
  • Text Alignment: Controla la alineación del texto dentro de los campos (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto ingresado por el usuario.
  • Placeholder Color: Define el color del texto de ayuda (placeholder) que aparece cuando el campo está vacío.
  • Typography: Permite personalizar la tipografía del contenido de los campos (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo de los campos (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de los campos (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de los campos. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del campo y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa los campos de otros elementos dentro del bloque de envío.
  • Box Shadow: Permite aplicar una sombra alrededor de los campos.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del campo (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición de los campos respecto a otros elementos en la página.

  Cart total update shipping address CTA

  • Normal y Hover: Permite definir estilos distintos cuando el usuario interactúa con el botón.
  • Width: Permite definir el ancho del botón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el botón dentro de su espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del botón.
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos dentro del bloque de envío.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

  Cart total amount

  • Column Padding: Permite definir el espacio interno de la columna donde se muestra el monto total. Puede configurarse individualmente para cada lado (Top, Right, Bottom, Left).
  • Width: Permite establecer el ancho del bloque del monto total en píxeles (px) u otras unidades disponibles.
  • Height: Permite definir la altura del contenedor del monto total.
  • Text Alignment: Controla la alineación del texto del monto total (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del monto total (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto correspondiente al monto total.
  • Background Type: Permite definir el tipo de fondo del bloque del monto total (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor del monto total (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del monto total. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del monto total y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque del monto total de otros elementos dentro del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del monto total.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del monto total respecto a otros elementos en la página.

  Cart proceed to checkout button

  • Normal y Hover: Permite definir estilos distintos cuando el usuario interactúa con el botón.
  • Width: Permite definir el ancho del botón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el botón dentro de su espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del botón.
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos dentro del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

Cart message

  • Width: Permite definir el ancho del contenedor del mensaje en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor del mensaje.
  • Text Alignment: Controla la alineación del texto dentro del mensaje (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del mensaje (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del mensaje.
  • Background Type: Permite definir el tipo de fondo del contenedor del mensaje (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del mensaje (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del mensaje. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del mensaje y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el mensaje de otros elementos del carrito.
  • Icon Position Values: Permite definir la posición del icono dentro del mensaje ajustando sus valores de desplazamiento (Top, Right, Bottom, Left).
  • Color (Icon): Permite configurar el color del icono del mensaje.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del mensaje.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del mensaje respecto a otros elementos en la página.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Checkout

El widget WC: Checkout permite mostrar el formulario de finalización de compra de WooCommerce directamente en una plantilla creada con Elementor.

Es ideal para:

  • Diseñar una página de checkout personalizada
  • Mejorar la experiencia de compra
  • Optimizar conversiones
  • Crear procesos de pago más visuales y organizados

Permite integrar el formulario estándar de WooCommerce con el diseño visual del sitio.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Checkout dentro de la categoría WooCommerce.
  3. Arrastra el widget WC: Checkout al área de diseño.
  4. Colócalo en la sección destinada al proceso de pago.

Configuración del Widget WC: Checkout

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Este widgets en particular de Elementor, solo cuenta con la configuración:

  • Style (Estilo)

A continuación lo detallaremos en profundidad.

Style

  Container

  • Background Type: Permite definir el tipo de fondo del contenedor principal (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo del contenedor si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del contenedor y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de otros elementos en la página. Ajustable individualmente (Top, Right, Bottom, Left).
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del contenedor respecto a otros elementos en la página.

  Checkout message

  • Width: Permite definir el ancho del contenedor del mensaje en la página de checkout, en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor del mensaje.
  • Text Alignment: Controla la alineación del texto dentro del mensaje (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del mensaje (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del mensaje.
  • Background Type: Permite definir el tipo de fondo del contenedor del mensaje (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del mensaje (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del mensaje. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del mensaje y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el mensaje de otros elementos dentro del checkout.
  • Icon Position Values: Permite definir la posición del icono dentro del mensaje ajustando sus valores de desplazamiento (Top, Right, Bottom, Left).
  • Color (Icon): Permite configurar el color del icono del mensaje.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del mensaje.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del mensaje respecto a otros elementos en la página.

  Coupon toggle

  • Width: Permite definir el ancho del botón o enlace que despliega el campo de cupón, en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del toggle.
  • Text Alignment: Controla la alineación del texto dentro del toggle (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del toggle.
  • Background Type: Permite definir el tipo de fondo (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del toggle y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el toggle de otros elementos en la página.
  • Icon Position Values: Permite definir la posición del icono dentro del toggle ajustando sus valores de desplazamiento (Top, Right, Bottom, Left).
  • Icon Color: Permite configurar el color del icono.
  • Box Shadow: Permite aplicar una sombra alrededor del toggle.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del elemento (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del toggle respecto a otros elementos en la página.

  Coupon toggle CTA

  • Normal y Hover: Permite definir estilos distintos cuando el usuario interactúa con el botón.
  • Width: Permite definir el ancho del botón CTA en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el botón dentro de su espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del botón.
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

  Coupon form

  • Width: Permite definir el ancho del formulario de cupón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del formulario.
  • Horizontal Alignment: Controla la alineación horizontal del formulario dentro de su contenedor (Izquierda, Centro, Derecha o Distribuido, según las opciones disponibles).
  • Vertical Alignment: Permite alinear verticalmente el formulario dentro de su espacio (Superior, Centro o Inferior).
  • Background Type: Permite definir el tipo de fondo del formulario (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del formulario (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del formulario. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del formulario y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el formulario de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del formulario para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del formulario (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del formulario respecto a otros elementos en la página.

  Cart coupon input

  • Width: Permite definir el ancho del campo de entrada del cupón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del campo.
  • Horizontal Alignment: Controla la alineación horizontal del input dentro de su contenedor (Izquierda, Centro, Derecha o Distribuido, según las opciones disponibles).
  • Vertical Alignment: Permite alinear verticalmente el campo dentro de su espacio (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del campo (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto ingresado por el usuario.
  • Placeholder Color: Define el color del texto de ayuda (placeholder) que aparece cuando el campo está vacío.
  • Typography: Permite personalizar la tipografía del texto del input (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del campo (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del campo (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del campo. Puede configurarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del campo y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el campo de otros elementos dentro del carrito.
  • Box Shadow: Permite aplicar una sombra alrededor del campo.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del campo (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del campo respecto a otros elementos en la página.

  Coupon submit button

  • Normal y Hover: Permite definir estilos distintos cuando el usuario interactúa con el botón.
  • Width: Permite definir el ancho del botón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el botón dentro de su espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del botón.
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

  Checkout error messages

  • Width: Permite definir el ancho del contenedor de los mensajes de error en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor de los mensajes de error.
  • Text Alignment: Define la alineación del texto dentro del mensaje (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del mensaje de error (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del mensaje de error.
  • Background Type: Permite definir el tipo de fondo del mensaje (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor del mensaje (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del mensaje. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del mensaje y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el mensaje de otros elementos en la página.
  • Icon Position Values: Permite definir la posición del ícono dentro del mensaje ajustando sus valores de desplazamiento (Top, Right, Bottom, Left).
  • Icon Color: Permite configurar el color del ícono que acompaña al mensaje de error.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del mensaje.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del mensaje respecto a otros elementos en la página.

  Checkout customer fields

  • Width: Permite definir el ancho del contenedor de los campos del cliente en porcentaje (%) o en otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor de los campos.
  • Background Type: Permite definir el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido (los campos del formulario) y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del contenedor respecto a otros elementos en la página.

  Checkout titles

  • Text Alignment: Define la alineación del texto del título (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto del título.
  • Typography: Permite personalizar la tipografía del título (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del contenedor del título (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor del título (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del título. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del título y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor del título de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del título.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del título respecto a otros elementos en la página.

  Checkout form labels

  • Text Alignment: Define la alineación del texto de las etiquetas del formulario (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto de las etiquetas.
  • Required Icon Color: Permite definir el color del ícono o asterisco que indica que un campo es obligatorio.
  • Typography: Permite personalizar la tipografía de las etiquetas (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del contenedor de las etiquetas (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor de las etiquetas (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre las etiquetas y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor de las etiquetas de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del contenedor respecto a otros elementos en la página.

  Checkout form fields

  • Width: Permite definir el ancho de los campos del formulario en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura de los campos del formulario.
  • Text Alignment: Define la alineación del texto dentro de los campos (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto ingresado por el usuario.
  • Placeholder Color: Permite definir el color del texto placeholder que aparece como guía dentro del campo antes de que el usuario escriba.
  • Typography: Permite personalizar la tipografía del contenido del campo (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo de los campos (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de los campos (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de los campos. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del campo y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa los campos de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor de los campos.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del campo (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición de los campos respecto a otros elementos en la página.

  Checkout form fields error messages

  • Text Alignment: Define la alineación del texto del mensaje de error (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto del mensaje de error.
  • Typography: Permite personalizar la tipografía del mensaje de error (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del contenedor del mensaje (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor del mensaje de error (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del mensaje. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del mensaje y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el mensaje de error de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del mensaje.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del mensaje respecto a otros elementos en la página.

  Checkout order view

  • Width: Permite definir el ancho del contenedor de la vista del resumen del pedido en porcentaje (%) u otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor del resumen del pedido.
  • Background Type: Permite definir el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido del resumen del pedido y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el contenedor del resumen del pedido de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del contenedor respecto a otros elementos en la página.

  Order table

  • Width: Permite definir el ancho de la tabla del pedido en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura de la tabla.
  • Background Type: Permite definir el tipo de fondo de la tabla (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de la tabla (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la tabla. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido de la tabla y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa la tabla de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor de la tabla.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño de la tabla (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición de la tabla respecto a otros elementos en la página.

  Order table columns title

  • Text Alignment: Define la alineación del texto en los encabezados de las columnas (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto de los encabezados de las columnas.
  • Typography: Permite personalizar la tipografía de los encabezados (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del área de los encabezados (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del área de los encabezados (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Padding (Relleno): Espacio interno entre el texto del encabezado y su borde. Configurable por cada lado (Top, Right, Bottom, Left).
  • Margin (Margen): Espacio externo que separa los encabezados de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del área de los encabezados.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición de los encabezados respecto a otros elementos en la página.

  Order table products name

  • Column Width: Permite definir el ancho de la columna correspondiente al nombre del producto en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto dentro de la columna (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del nombre del producto (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del nombre del producto.
  • Background Type: Permite definir el tipo de fondo de la celda o columna (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de la columna o celda (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la celda. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del producto y el borde de la celda. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa esta columna de otros elementos de la tabla si aplica.
  • Box Shadow: Permite aplicar una sombra alrededor de la celda o columna.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño de la columna (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Order table products price

  • Column Width: Permite definir el ancho de la columna correspondiente al precio del producto en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto dentro de la columna del precio (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del precio (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del precio del producto.
  • Background Type: Permite definir el tipo de fondo de la celda o columna (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de la columna o celda (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la celda. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del precio y el borde de la celda. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa esta columna de otros elementos de la tabla si aplica.
  • Box Shadow: Permite aplicar una sombra alrededor de la celda o columna.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño de la columna (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Order table products price

  • Column Width: Permite definir el ancho de la columna correspondiente al precio del producto en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto dentro de la columna del precio (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del precio (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del precio del producto.
  • Background Type: Permite definir el tipo de fondo de la celda o columna (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de la columna o celda (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la celda. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del precio y el borde de la celda. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa esta columna de otros elementos de la tabla si aplica.
  • Box Shadow: Permite aplicar una sombra alrededor de la celda o columna.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño de la columna (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Order table footer titles

  • Column Width: Permite definir el ancho de la columna correspondiente a los títulos del footer de la tabla en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto dentro de la celda del footer (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía de los títulos del footer (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto de los títulos del footer.
  • Background Type: Permite definir el tipo de fondo del área del footer (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del área del footer (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del footer. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del footer y el borde de la celda. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el footer de otros elementos de la página si aplica.
  • Box Shadow: Permite aplicar una sombra alrededor del área del footer.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del área del footer (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del footer respecto a otros elementos en la página.

  Order table subtotal

  • Column Width: Permite definir el ancho de la columna correspondiente al subtotal en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto dentro de la celda del subtotal (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del subtotal (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del subtotal.
  • Background Type: Permite definir el tipo de fondo de la celda del subtotal (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de la celda del subtotal (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la celda. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del subtotal y el borde de la celda. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa esta celda de otros elementos de la tabla si aplica.
  • Box Shadow: Permite aplicar una sombra alrededor de la celda del subtotal.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño de la celda (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Order table total

  • Column Width: Permite definir el ancho de la columna correspondiente al total del pedido en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto dentro de la celda del total (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del total (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del total del pedido.
  • Background Type: Permite definir el tipo de fondo de la celda del total (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde de la celda del total (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas de la celda. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del total y el borde de la celda. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa esta celda de otros elementos de la tabla si aplica.
  • Box Shadow: Permite aplicar una sombra alrededor de la celda del total.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño de la celda (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Checkout shipping options

  • Width: Permite definir el ancho del contenedor de las opciones de envío en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor de las opciones de envío.
  • Horizontal Alignment: Controla la alineación horizontal del bloque dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el bloque dentro del espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro de las opciones de envío (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto de las opciones de envío.
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido (opciones de envío) y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de opciones de envío de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Payment methods

  • Typography: Permite personalizar la tipografía del texto de los métodos de pago (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto de los métodos de pago.
  • Background Type: Permite definir el tipo de fondo del contenedor de los métodos de pago (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido de los métodos de pago y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de métodos de pago de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Checkout payment options

  • Width: Permite definir el ancho del contenedor de las opciones de pago en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del contenedor de las opciones de pago.
  • Horizontal Alignment: Controla la alineación horizontal del bloque dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el bloque dentro del espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro de las opciones de pago (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto de las opciones de pago.
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el contenido (opciones de pago) y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de opciones de pago de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Checkout payment methods descriptions

  • Width: Permite definir el ancho del contenedor de las descripciones de los métodos de pago en píxeles (px) u otras unidades disponibles.
  • Text Alignment: Define la alineación del texto dentro de la descripción (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto de la descripción del método de pago.
  • Typography: Permite personalizar la tipografía del texto descriptivo (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del contenedor de la descripción (color sólido, degradado o imagen).
  • Icon Color: Permite configurar el color del ícono asociado al método de pago, si aplica.
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor de la descripción (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto descriptivo y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa la descripción de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Checkout terms and conditions

  • Text Alignment: Define la alineación del texto del bloque de términos y condiciones (Izquierda, Centro o Derecha).Text Color: Permite configurar el color del texto principal.Links Color: Permite definir el color de los enlaces dentro del texto (por ejemplo, enlaces a la página completa de términos y condiciones).

    Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).

    Background Type: Permite definir el tipo de fondo del contenedor (color sólido, degradado o imagen).

    Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.

    Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.

    Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).

    Padding (Relleno): Espacio interno entre el texto y el borde del contenedor. Configurable por cada lado.

    Margin (Margen): Espacio externo que separa el bloque de términos y condiciones de otros elementos en la página.

    Box Shadow: Permite aplicar una sombra alrededor del contenedor.

    Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).

    Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

  Checkout terms and conditions

  • Text Alignment: Define la alineación del texto del bloque de términos y condiciones (Izquierda, Centro o Derecha).
  • Text Color: Permite configurar el color del texto principal.
  • Links Color: Permite definir el color de los enlaces dentro del texto (por ejemplo, enlaces a la página completa de términos y condiciones).
  • Typography: Permite personalizar la tipografía del texto (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Background Type: Permite definir el tipo de fondo del contenedor (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto y el borde del contenedor. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el bloque de términos y condiciones de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del contenedor (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición respecto a otros elementos en la página.

Checkout place order button

  • Normal y Hover: Permite definir estilos distintos cuando el usuario interactúa con el botón.
  • Width: Permite definir el ancho del botón en píxeles (px) u otras unidades disponibles.
  • Height: Permite establecer la altura del botón.
  • Horizontal Alignment: Controla la alineación horizontal del botón dentro de su contenedor (Izquierda, Centro o Derecha).
  • Vertical Alignment: Permite alinear verticalmente el botón dentro del espacio disponible (Superior, Centro o Inferior).
  • Text Alignment: Define la alineación del texto dentro del botón (Izquierda, Centro o Derecha).
  • Typography: Permite personalizar la tipografía del texto del botón (familia de fuente, tamaño, peso, estilo, interlineado, espaciado, etc.).
  • Color: Permite configurar el color del texto del botón.
  • Background Type: Permite definir el tipo de fondo del botón (color sólido, degradado o imagen).
  • Blur: Aplica un efecto de desenfoque al fondo si el diseño lo requiere.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.), incluyendo opciones de grosor y color.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede ajustarse de forma uniforme o individual por cada lado (Top, Right, Bottom, Left).
  • Padding (Relleno): Espacio interno entre el texto del botón y su borde. Configurable por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos en la página.
  • Box Shadow: Permite aplicar una sombra alrededor del botón.
  • Overflow: Define cómo se comporta el contenido si excede el tamaño del botón (Default, Hidden, Visible o Auto).
  • Z-Index: Permite establecer la prioridad de superposición del botón respecto a otros elementos en la página.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: My Account

El widget WC: My Account permite mostrar el área privada del cliente donde puede administrar su información personal y pedidos.

Es ideal para:

  • Crear una página de cuenta personalizada
  • Mejorar la experiencia de usuario
  • Adaptar el panel de cliente al diseño del sitio
  • Centralizar la gestión de pedidos y datos

Facilita que los usuarios consulten y administren su información de manera clara y organizada.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: My Account dentro de la categoría WooCommerce.
  3. Arrastra el widget WC: My Account al área de diseño.
  4. Colócalo en la sección destinada al panel de usuario.

Configuración del Widget WC: My Account

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Como todos los widgets de Elementor, se divide en:

  • Content (Contenido)
  • Style (Estilo)

A continuación, detallamos cada una.

Content:

  Settings

  • Show my account view: Permite seleccionar qué vista de cuenta se mostrará dentro del editor para previsualización.
    • Login/Register form
    • Lost password form
    • Dashboard
    • Dashboard: Orders
    • Dashboard: Order detail
    • Dashboard: Downloads
    • Dashboard: Addresses
    • Dashboard: Account details

Style

  Container

  • Background Type: Permite definir el tipo de fondo del contenedor. Puedes elegir entre fondo sólido o transparente, según el diseño que necesites.
  • Blur: Aplica un efecto de desenfoque al fondo del contenedor. Ideal cuando se utiliza un fondo semitransparente y se desea crear un efecto visual moderno.
  • Border Type: Define el estilo del borde del contenedor.
     Default: Aplica el estilo de borde predeterminado del tema o constructor.
  • Border radius:Permite ajustar el redondeo de las esquinas del contenedor de forma individual (Top, Right, Bottom, Left) o enlazarlas para aplicar el mismo valor en todos los lados.
  • Padding:Controla el espacio interno entre el contenido y los bordes del contenedor.
     Se puede configurar individualmente por lado o de manera global.
  • Margin:Define el espacio externo alrededor del contenedor.
     Permite ajustar cada lado por separado o aplicar un valor uniforme.
  • Box Shadow:Añade una sombra alrededor del contenedor para generar profundidad y jerarquía visual.
  • Overflow:Controla cómo se comporta el contenido cuando excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del contenedor frente a otros elementos.

  My account messages

  • Width: Define el ancho del contenedor de mensajes. Puede ajustarse en píxeles (px) u otra unidad disponible.
  • Height: Permite establecer la altura del área de mensajes.
  • Text alignment: Controla la alineación del texto dentro del mensaje (izquierda, centro, derecha o justificado).
  • Typography: Permite configurar los estilos tipográficos del texto (fuente, tamaño, peso, espaciado, etc.).
  • Color: Define el color del texto del mensaje.
  • Background Type: Permite seleccionar el tipo de fondo del mensaje (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo del mensaje.
  • Border Type: Define el estilo del borde del contenedor del mensaje.
     Default: Aplica el estilo predeterminado del sistema.
  • Border radius: Permite ajustar el redondeo de las esquinas de forma individual (Top, Right, Bottom, Left) o enlazarlas para mantener el mismo valor en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del mensaje y sus bordes.
  • Margin: Define el espacio externo alrededor del contenedor del mensaje.
  • Icon position values: Permite ajustar la posición del ícono dentro del mensaje (Top, Right, Bottom, Left), facilitando una alineación más precisa respecto al contenido.
  • Color (Icon): Define el color del ícono del mensaje.
  • Box Shadow: Añade una sombra alrededor del contenedor del mensaje para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
     Z-index: Define la prioridad de superposición del mensaje frente a otros elementos en la página.

  Titles

  • Width: Define el ancho del contenedor de mensajes. Puede ajustarse en píxeles (px) u otra unidad disponible.
  • Height: Permite establecer la altura del área de mensajes.
  • Text alignment: Controla la alineación del texto dentro del mensaje (izquierda, centro, derecha o justificado).
  • Typography: Permite configurar los estilos tipográficos del texto (fuente, tamaño, peso, espaciado, etc.).
  • Color: Define el color del texto del mensaje.
  • Background Type: Permite seleccionar el tipo de fondo del mensaje (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo del mensaje.
  • Border Type: Define el estilo del borde del contenedor del mensaje.
     Default: Aplica el estilo predeterminado del sistema.
  • Border radius: Permite ajustar el redondeo de las esquinas de forma individual (Top, Right, Bottom, Left) o enlazarlas para mantener el mismo valor en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del mensaje y sus bordes.
  • Margin: Define el espacio externo alrededor del contenedor del mensaje.
  • Icon position values: Permite ajustar la posición del ícono dentro del mensaje (Top, Right, Bottom, Left), facilitando una alineación más precisa respecto al contenido.
  • Color (Icon): Define el color del ícono del mensaje.
  • Box Shadow: Añade una sombra alrededor del contenedor del mensaje para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
     Z-index: Define la prioridad de superposición del mensaje frente a otros elementos en la página.

  Sub titles

  • Text alignment: Permite definir la alineación del texto del subtítulo (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto del subtítulo.
  • Typography: Permite configurar los estilos tipográficos del subtítulo, incluyendo fuente, tamaño, peso, estilo, altura de línea y espaciado.
  • Background Type: Permite seleccionar el tipo de fondo del subtítulo (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza un fondo con transparencia.
  • Border Type: Define el estilo del borde del contenedor del subtítulo.
  •  Border radius: Permite ajustar el redondeo de las esquinas del contenedor del subtítulo de forma individual (Top, Right, Bottom, Left) o enlazarlas para aplicar el mismo valor en todos los lados.
  • Padding: Controla el espacio interno entre el texto del subtítulo y los bordes de su contenedor.
  • Margin: Define el espacio externo alrededor del contenedor del subtítulo.
  • Box Shadow: Añade una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del subtítulo frente a otros elementos en la página.

  Texts

  • Text alignment: Permite definir la alineación del texto (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto.
  • Typography: Permite configurar los estilos tipográficos del texto, como fuente, tamaño, peso, estilo, altura de línea y espaciado entre letras.
  • Background Type: Permite seleccionar el tipo de fondo del contenedor del texto (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza un fondo con transparencia.
  • Border Type: Define el estilo del borde del contenedor del texto.
  • Border radius: Permite ajustar el redondeo de las esquinas del contenedor de forma individual (Top, Right, Bottom, Left) o enlazarlas para aplicar el mismo valor en todos los lados.
  • Padding: Controla el espacio interno entre el texto y los bordes de su contenedor.
  • Margin: Define el espacio externo alrededor del contenedor del texto.
  • Box Shadow: Añade una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del texto frente a otros elementos en la página..

  Links

  • Normal / Hover: Permite alternar entre la configuración visual del enlace en su estado normal y cuando el usuario pasa el cursor sobre él (hover).
  • Text alignment: Define la alineación del texto del enlace (izquierda, centro, derecha o justificado).
  • Typography: Permite configurar los estilos tipográficos del enlace, como fuente, tamaño, peso, estilo y espaciado.
  • Color: Define el color del texto del enlace según el estado seleccionado (Normal o Hover).
  • Background Type: Permite seleccionar el tipo de fondo del enlace (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del enlace.
  • Border radius: Permite ajustar el redondeo de las esquinas del enlace de forma individual (Top, Right, Bottom, Left) o enlazarlas para aplicar el mismo valor en todos los lados.
  • Padding: Controla el espacio interno entre el texto del enlace y sus bordes.
  • Margin: Define el espacio externo alrededor del enlace.
  • Box Shadow: Añade una sombra alrededor del enlace para generar mayor profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del enlace frente a otros elementos.

  Forms container

  • Width: Permite definir el ancho del contenedor del formulario. Puede ajustarse manualmente en píxeles (px).
  • Height: Permite definir la altura del contenedor del formulario en píxeles (px).
  • Horizontal alignment: Permite alinear el contenedor horizontalmente dentro de su espacio disponible (izquierda, centro, derecha o distribución personalizada).
  • Vertical alignment: Define la alineación vertical del contenedor respecto a su espacio disponible (superior, centro o inferior).
  • Background Type: Permite seleccionar el tipo de fondo del contenedor (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del contenedor.
  • Border radius: Permite ajustar el redondeo de las esquinas del contenedor de forma individual (Top, Right, Bottom, Left) o enlazarlas para aplicar el mismo valor en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del formulario y los bordes del contenedor.
  • Margin: Define el espacio externo alrededor del contenedor del formulario.
  • Box Shadow: Añade una sombra alrededor del contenedor para generar mayor profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del contenedor frente a otros elementos en la página.

  Forms container

  • Width: Permite definir el ancho del contenedor del formulario. Puede ajustarse manualmente en píxeles (px).
  • Height: Permite definir la altura del contenedor del formulario en píxeles (px).
  • Horizontal alignment: Permite alinear el contenedor horizontalmente dentro de su espacio disponible (izquierda, centro, derecha o distribución personalizada según las opciones disponibles).
  • Vertical alignment: Define la alineación vertical del contenedor respecto a su espacio disponible (superior, centro o inferior).
  • Background Type: Permite seleccionar el tipo de fondo del contenedor (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del contenedor.
  • Border radius: Permite ajustar el redondeo de las esquinas del contenedor de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del formulario y los bordes del contenedor.
  • Margin: Define el espacio externo alrededor del contenedor del formulario.
  • Box Shadow: Añade una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del contenedor frente a otros elementos en la página.

  Form login

  • Column width: Permite definir el ancho de la columna donde se encuentra el formulario de registro. Se puede ajustar manualmente en píxeles (px).
  • Column height: Permite definir la altura de la columna del formulario de registro en píxeles (px).
  • Width: Define el ancho total del formulario de registro en píxeles (px).
  • Height: Define la altura total del formulario de registro en píxeles (px).
  • Background Type: Permite seleccionar el tipo de fondo del formulario (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del formulario.
  • Border radius: Permite ajustar el redondeo de las esquinas del formulario de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del formulario y sus bordes.
  • Margin: Define el espacio externo alrededor del formulario de registro.
  • Box Shadow: Añade una sombra alrededor del formulario para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del formulario.
  • Z-index: Permite definir la prioridad de superposición del formulario frente a otros elementos en la página.

  Form reset password

  • Width: Permite definir el ancho del formulario de recuperación de contraseña en píxeles (px).
  • Height: Permite definir la altura del formulario en píxeles (px).
  • Background Type: Permite seleccionar el tipo de fondo del formulario (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del formulario.
  • Border radius: Permite ajustar el redondeo de las esquinas del formulario de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del formulario y sus bordes.
  • Margin: Define el espacio externo alrededor del formulario de recuperación de contraseña.
  • Box Shadow: Añade una sombra alrededor del formulario para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del formulario.
  • Z-index: Permite definir la prioridad de superposición del formulario frente a otros elementos en la página.

  Forms labels

  • Text alignment: Permite definir la alineación del texto de las etiquetas del formulario (izquierda, centro, derecha o justificado).
  • Text color: Permite configurar el color del texto de las etiquetas.
  • Required icon color: Define el color del icono o indicador de campo obligatorio (por ejemplo, el asterisco *).
  • Typography: Permite personalizar la tipografía de las etiquetas (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo de las etiquetas (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde de las etiquetas.
  • Border radius: Permite ajustar el redondeo de las esquinas de las etiquetas de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el texto de la etiqueta y sus bordes.
  • Margin: Define el espacio externo alrededor de cada etiqueta.
  • Box Shadow: Añade una sombra alrededor de las etiquetas para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño de la etiqueta.
  • Z-index: Permite definir la prioridad de superposición de las etiquetas frente a otros elementos en la página.

  Forms fields

  • Width: Permite definir el ancho de los campos del formulario en píxeles (px).
  • Height: Permite definir la altura de los campos del formulario en píxeles (px).
  • Text alignment: Permite configurar la alineación del texto dentro del campo (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto ingresado por el usuario.
  • Placeholder color: Permite configurar el color del texto del placeholder (texto de ayuda que aparece antes de escribir).
  • Typography: Permite personalizar la tipografía del texto dentro de los campos (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo de los campos (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde de los campos.
  • Border radius: Permite ajustar el redondeo de las esquinas de los campos de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el texto del campo y sus bordes.
  • Margin: Define el espacio externo alrededor de cada campo del formulario.
  • Box Shadow: Añade una sombra alrededor de los campos para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del campo.
  • Z-index: Permite definir la prioridad de superposición de los campos frente a otros elementos en la página.

  Forms terms and conditions

  • Text alignment: Permite definir la alineación del texto de los términos y condiciones (izquierda, centro, derecha o justificado).
  • Text color: Permite configurar el color del texto de los términos y condiciones.
  • Links color: Define el color de los enlaces incluidos dentro del texto de términos y condiciones.
  • Typography: Permite personalizar la tipografía del texto (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo del bloque de términos y condiciones (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del bloque.
  • Border radius: Permite ajustar el redondeo de las esquinas del bloque de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido (texto y enlaces) y los bordes del bloque.
  • Margin: Define el espacio externo alrededor del bloque de términos y condiciones.
  • Box Shadow: Añade una sombra alrededor del bloque para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del bloque frente a otros elementos en la página.

  Buttons

  • Normal / Hover: Permite definir estilos diferentes cuando el usuario pasa el cursor sobre el botón.
  • Width: Permite definir el ancho del botón en píxeles (px).
  • Height: Permite definir la altura del botón en píxeles (px).
  • Horizontal alignment: Define la alineación horizontal del botón dentro de su contenedor (izquierda, centro o derecha).
  • Vertical alignment: Permite ajustar la alineación vertical del botón dentro de su contenedor (arriba, centro o abajo).
  • Text alignment: Permite configurar la alineación del texto dentro del botón (izquierda, centro, derecha o justificado).
  • Typography: Permite personalizar la tipografía del texto del botón (fuente, tamaño, peso, estilo, etc.).
  • Color: Define el color del texto del botón.
  • Background Type: Permite seleccionar el tipo de fondo del botón (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del botón.
  • Border radius: Permite ajustar el redondeo de las esquinas del botón de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el texto del botón y sus bordes.
  • Margin: Define el espacio externo alrededor del botón.
  • Box Shadow: Añade una sombra alrededor del botón para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del botón.
  • Z-index: Permite definir la prioridad de superposición del botón frente a otros elementos en la página.

  Edit buttons

  • Normal / Hover: Permite definir estilos diferentes cuando el usuario pasa el cursor sobre el botón.
  • Width: Permite definir el ancho del botón en píxeles (px).
  • Height: Permite definir la altura del botón en píxeles (px).
  • Horizontal alignment: Define la alineación horizontal del botón dentro de su contenedor (izquierda, centro o derecha).
  • Vertical alignment: Permite ajustar la alineación vertical del botón dentro de su contenedor (arriba, centro o abajo).
  • Text alignment: Permite configurar la alineación del texto dentro del botón (izquierda, centro, derecha o justificado).
  • Typography: Permite personalizar la tipografía del texto del botón (fuente, tamaño, peso, estilo, etc.).
  • Color: Define el color del texto del botón.
  • Background Type: Permite seleccionar el tipo de fondo del botón (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del botón.
  • Border radius: Permite ajustar el redondeo de las esquinas del botón de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el texto del botón y sus bordes.
  • Margin: Define el espacio externo alrededor del botón.
  • Box Shadow: Añade una sombra alrededor del botón para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del botón.
  • Z-index: Permite definir la prioridad de superposición del botón frente a otros elementos en la página.

  Dashboard container

  • Width: Permite definir el ancho del contenedor en píxeles (px).
  • Height: Permite definir la altura del contenedor en píxeles (px).
  • Horizontal alignment: Define la alineación horizontal del contenedor dentro de su sección (izquierda, centro o derecha).
  • Vertical alignment: Permite ajustar la alineación vertical del contenedor dentro de su sección (arriba, centro o abajo).
  • Background Type: Permite seleccionar el tipo de fondo del contenedor (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del contenedor. 
  • Border radius: Permite ajustar el redondeo de las esquinas del contenedor de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del dashboard y los bordes del contenedor.
  • Margin: Define el espacio externo alrededor del contenedor.
  • Box Shadow: Añade una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor. 
  • Z-index: Permite definir la prioridad de superposición del contenedor frente a otros elementos en la página. 

  Dashboard: Menu

  • List style: Permite seleccionar el estilo visual de la lista del menú.
  • Width: Permite definir el ancho del menú en píxeles (px).
  • Height: Permite definir la altura del menú en píxeles (px).
  • Horizontal alignment: Define la alineación horizontal del menú dentro de su contenedor (izquierda, centro o derecha).
  • Vertical alignment: Permite ajustar la alineación vertical del menú dentro de su contenedor (arriba, centro o abajo).
  • Gap: Define el espacio entre los elementos del menú.
  • Background Type: Permite seleccionar el tipo de fondo del menú (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del menú.
  • Border radius: Permite ajustar el redondeo de las esquinas del menú de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre los elementos del menú y los bordes del contenedor.
  • Margin: Define el espacio externo alrededor del menú.
  • Box Shadow: Añade una sombra alrededor del menú para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del menú.
  • Z-index: Permite definir la prioridad de superposición del menú frente a otros elementos en la página.

  Dashboard: Menu items

  • Normal / Hover/ Active: Permite definir estilos diferentes cuando el usuario pasa el cursor sobre el botón.
  • Width: Permite definir el ancho de cada ítem del menú en píxeles (px).
  • Height: Permite definir la altura de cada ítem del menú en píxeles (px).
  • Horizontal alignment: Define la alineación horizontal del contenido del ítem dentro de su contenedor (izquierda, centro o derecha).
  • Vertical alignment: Permite ajustar la alineación vertical del contenido del ítem dentro de su contenedor (arriba, centro o abajo).
  • Text alignment: Permite configurar la alineación del texto dentro del ítem (izquierda, centro, derecha o justificado).
  • Background Type: Permite seleccionar el tipo de fondo del ítem (sólido o transparente), configurable por estado (Normal, Hover, Active).
  • Text color: Define el color del texto del ítem, configurable por estado.
  • Typography: Permite personalizar la tipografía del texto del ítem (fuente, tamaño, peso, estilo, etc.), configurable por estado.
  • Border Type: Define el estilo del borde del ítem.
  • Border radius: Permite ajustar el redondeo de las esquinas del ítem de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del ítem y sus bordes.
  • Margin: Define el espacio externo alrededor de cada ítem del menú.

  Dashboard: Content

  • Width: Permite definir el ancho del contenedor en píxeles (px).
  • Height: Permite definir la altura del contenedor en píxeles (px).
  • Background Type: Permite seleccionar el tipo de fondo del contenedor (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del contenedor.
  • Border radius: Permite ajustar el redondeo de las esquinas del contenedor de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido del contenedor y sus bordes.
  • Margin: Define el espacio externo alrededor del contenedor.
  • Box Shadow: Añade una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del contenedor.
  • Z-index: Permite definir la prioridad de superposición del contenedor frente a otros elementos en la página.

  Dashboard: Tables column title

  • Text alignment: Permite definir la alineación del texto del título de la columna (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto del encabezado de la columna.
  • Typography: Permite personalizar la tipografía del título (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo del encabezado de la columna (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del encabezado de la columna.
  • Padding: Controla el espacio interno entre el texto del título y los bordes de la celda del encabezado.
  • Margin: Define el espacio externo alrededor del encabezado de la columna.
  • Box Shadow: Añade una sombra alrededor del encabezado para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del encabezado.
  • Z-index: Permite definir la prioridad de superposición del encabezado frente a otros elementos en la interfaz.

Dashboard: Tables column title Mobile

  • Text alignment: Permite definir la alineación del texto del título de la columna (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto del encabezado de la columna en vista móvil.
  • Typography: Permite personalizar la tipografía del título (fuente, tamaño, peso, estilo, etc.) específicamente para dispositivos móviles.
  • Background Type: Permite seleccionar el tipo de fondo del encabezado (sólido o transparente) en versión móvil.
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del encabezado de la columna.
  • Border radius: Permite ajustar el redondeo de las esquinas del encabezado de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el texto del título y los bordes de la celda del encabezado en móvil.
  • Margin: Define el espacio externo alrededor del encabezado de la columna.
  • Box Shadow: Añade una sombra alrededor del encabezado para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del encabezado.
  • Z-index: Permite definir la prioridad de superposición del encabezado frente a otros elementos en la vista móvil. 

  Dashboard: Tables column values

  • Text alignment: Permite definir la alineación del contenido dentro de las celdas (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto de los valores dentro de la tabla.
  • Typography: Permite personalizar la tipografía del contenido (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo de las celdas (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde de las celdas.
  • Padding: Controla el espacio interno entre el contenido de la celda y sus bordes.
  • Margin: Define el espacio externo alrededor de las celdas (si aplica según el diseño del sistema).
  • Box Shadow: Añade una sombra para generar profundidad visual en las celdas.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño de la celda.
  • Z-index: Permite definir la prioridad de superposición de las celdas frente a otros elementos en la interfaz.

  Dashboard: Tables footer titles

  • Text alignment: Permite definir la alineación del texto dentro de las celdas del footer (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto de los títulos del footer.
  • Typography: Permite personalizar la tipografía del texto (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo del footer (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del footer.
  • Padding: Controla el espacio interno entre el texto del footer y los bordes de la celda.
  • Margin: Define el espacio externo alrededor del footer (si aplica según el diseño del sistema).
  • Box Shadow: Añade una sombra para generar profundidad visual en el área del footer.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del footer.
  • Z-index: Permite definir la prioridad de superposición del footer frente a otros elementos en la interfaz.

  Dashboard: Tables footer values

  • Text alignment: Permite definir la alineación del contenido dentro de las celdas del footer (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto de los valores del footer.
  • Typography: Permite personalizar la tipografía del contenido (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo del footer (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del footer.
  • Padding: Controla el espacio interno entre el contenido del footer y los bordes de la celda.
  • Margin: Define el espacio externo alrededor del footer (si aplica según el diseño del sistema).
  • Box Shadow: Añade una sombra para generar profundidad visual en el área del footer.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño del footer.
  • Z-index: Permite definir la prioridad de superposición del footer frente a otros elementos en la interfaz.

  Dashboard: Info cards

  • Text alignment: Permite definir la alineación del contenido dentro de la tarjeta (izquierda, centro, derecha o justificado).
  • Text color: Define el color del texto mostrado en la tarjeta.
  • Typography: Permite personalizar la tipografía del contenido (fuente, tamaño, peso, estilo, etc.).
  • Background Type: Permite seleccionar el tipo de fondo de la tarjeta (sólido o transparente).
  • Blur: Aplica un efecto de desenfoque al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde de la tarjeta.
  • Border radius: Permite ajustar el redondeo de las esquinas de la tarjeta de forma individual (Top, Right, Bottom, Left) o enlazar los valores para aplicar el mismo radio en todos los lados.
  • Padding: Controla el espacio interno entre el contenido de la tarjeta y sus bordes.
  • Margin: Define el espacio externo alrededor de la tarjeta respecto a otros elementos del dashboard.
  • Box Shadow: Añade una sombra alrededor de la tarjeta para generar profundidad visual.
  • Overflow: Controla el comportamiento del contenido si excede el tamaño de la tarjeta.
  • Z-index: Permite definir la prioridad de superposición de la tarjeta frente a otros elementos en la interfaz.

Una vez que hayas creado tu diseño personalizado con “GOM Tools”, asegúrate de guardar los cambios. Puedes hacerlo haciendo clic en el botón “Guardar” en la parte inferior del editor.

WC: Order Received

El widget WC: Order Received permite diseñar y personalizar la página que se muestra al usuario tras finalizar una compra correctamente.

Es ideal para:

  • Página de “Gracias por tu compra” personalizada
  • Confirmación de pedido con diseño adaptado
  • Mostrar resumen del pedido
  • Agregar mensajes personalizados o promociones

Ayuda a reforzar la confianza del cliente y mejorar la experiencia post-compra.

Cómo Agregar el Widget

  1. Accede al editor de Elementor.
  2. Busca el widget WC: Order Received dentro de la categoría WooCommerce.
  3. Arrastra el widget WC: Order Received al área de diseño.
  4. Colócalo en la plantilla destinada a la confirmación del pedido.

Configuración del Widget WC: Order Received

Una vez agregado el widget, podrás personalizarlo desde el panel lateral.

Este widgets en particular de Elementor, solo cuenta con la configuración:

  • Style (Estilo)

A continuación lo detallaremos en profundidad.

Style

  Container

  • Background Type: Permite elegir el tipo de fondo para el contenedor (color sólido o transparente). Define la base visual sobre la que se muestran los elementos internos.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo del contenedor. Funciona especialmente cuando el fondo tiene transparencia y puede activarse o desactivarse según el diseño.
  • Border Type: Define el estilo de la línea del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Al activarse, permite ajustar grosor y color según las opciones disponibles.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Se puede configurar de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del contenedor y su borde. Puede configurarse individualmente por cada lado para un control más preciso del diseño.
  • Margin (Margen): Espacio externo que separa el contenedor de otros elementos adyacentes dentro del layout.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor. Se pueden ajustar desplazamiento horizontal, vertical, desenfoque, expansión y color según el sistema.
  • Overflow: Define cómo se comporta el contenido que excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del contenedor en el eje Z. Un valor más alto posiciona el contenedor por encima de otros elementos superpuestos.

  Order notice

  • Text alignment: Permite definir la alineación del texto dentro del aviso de pedido (izquierda, centro, derecha o justificado), organizando visualmente el contenido del mensaje.
  • Text color: Define el color del texto del aviso. Permite resaltar información importante o adaptarla a la identidad visual del diseño.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y otras propiedades disponibles).
  • Background Type: Permite elegir el tipo de fondo del aviso (color sólido o transparente), determinando su apariencia base.
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo cuando se utiliza transparencia, mejorando el efecto visual sobre elementos posteriores.
  • Border Type: Define el estilo del borde del aviso (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Border Radius: Controla la curvatura de las esquinas del aviso. Puede configurarse individualmente (Top, Right, Bottom, Left) o de forma vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del aviso y su borde. Puede ajustarse por cada lado para mayor precisión.
  • Margin (Margen): Espacio externo que separa el aviso de otros elementos dentro de la interfaz.
  • Box Shadow: Permite aplicar una sombra alrededor del aviso para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del aviso (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del aviso en el eje Z. Un valor mayor posiciona el aviso por encima de otros elementos superpuestos.

  Titles

  • Text alignment: Permite definir la alineación de los títulos (izquierda, centro, derecha o justificado), organizando visualmente su disposición dentro del diseño.
  • Text color: Define el color del texto de los títulos, facilitando su adaptación a la identidad visual o resaltando jerarquías.
  • Typography: Permite configurar la tipografía de los títulos (fuente, tamaño, peso, estilo y demás propiedades disponibles).
  • Background Type: Permite elegir el tipo de fondo aplicado a los títulos (color sólido o transparente).
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde de los títulos (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del título. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto del título y su borde. Puede ajustarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa los títulos de otros elementos dentro del layout.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del título para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido del título cuando excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento de los títulos en el eje Z. Un valor mayor posiciona el elemento por encima de otros elementos superpuestos.

  Texts

  • Text alignment: Permite definir la alineación de los textos (izquierda, centro, derecha o justificado), organizando su disposición dentro del contenedor.
  • Text color: Define el color del texto, permitiendo adaptarlo a la identidad visual o mejorar la legibilidad según el fondo.
  • Typography: Permite configurar la tipografía del texto (fuente, tamaño, peso, estilo y demás propiedades disponibles).
  • Background Type: Permite elegir el tipo de fondo aplicado al bloque de texto (color sólido o transparente).
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo cuando se utiliza transparencia, aportando un efecto visual más suave.
  • Border Type: Define el estilo del borde del bloque de texto (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Border Radius: Controla la curvatura de las esquinas del contenedor del texto. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto y el borde del contenedor. Puede ajustarse individualmente por cada lado para mayor precisión.
  • Margin (Margen): Espacio externo que separa el bloque de texto de otros elementos dentro del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del texto para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del bloque de texto en el eje Z. Un valor mayor posiciona el elemento por encima de otros elementos superpuestos.

  Links

  • Normal / Hover: Permite configurar los estilos del enlace en su estado normal y en el estado al pasar el cursor (hover), definiendo comportamientos visuales diferenciados.
  • Text alignment: Define la alineación del texto del enlace (izquierda, centro, derecha o justificado) dentro de su contenedor.
  • Typography: Permite configurar la tipografía del enlace (fuente, tamaño, peso, estilo y demás propiedades disponibles).
  • Color: Define el color del texto del enlace según el estado seleccionado (Normal o Hover).
  • Background Type: Permite elegir el tipo de fondo aplicado al enlace (color sólido o transparente).
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del enlace (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Border Radius: Controla la curvatura de las esquinas del enlace. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el texto del enlace y su borde. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el enlace de otros elementos dentro del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del enlace para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido del enlace cuando excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del enlace en el eje Z. Un valor mayor posiciona el enlace por encima de otros elementos superpuestos.

  Order detail

  • List style: Permite definir el estilo de visualización de la lista (por ejemplo, estilo por defecto u otras variantes disponibles según el sistema).
  • Width (Ancho): Controla el ancho del contenedor del detalle del pedido. Puede ajustarse en píxeles u otra unidad disponible.
  • Height (Alto): Define la altura del contenedor del detalle del pedido.
  • Horizontal alignment: Permite alinear el contenido horizontalmente dentro del contenedor (inicio, centro, final o distribución según las opciones disponibles).
  • Vertical alignment: Define la alineación vertical del contenido dentro del contenedor (superior, centro o inferior).
  • Gap: Establece el espacio entre los elementos internos del detalle del pedido (por ejemplo, entre filas o bloques de información).
  • Background Type: Permite elegir el tipo de fondo del contenedor (color sólido o transparente).
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del contenedor (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Border Radius: Controla la curvatura de las esquinas del contenedor. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del detalle del pedido y su borde. Puede ajustarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el detalle del pedido de otros elementos dentro del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido cuando excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del contenedor en el eje Z. Un valor mayor posiciona el elemento por encima de otros elementos superpuestos.

  Order detail items

  • Width (Ancho): Controla el ancho de cada ítem dentro del detalle del pedido. Puede ajustarse en píxeles u otra unidad disponible.
  • Height (Alto): Define la altura de cada ítem del detalle del pedido.
  • Horizontal alignment: Permite alinear el contenido horizontalmente dentro de cada ítem (inicio, centro, final o distribución según las opciones disponibles).
  • Vertical alignment: Define la alineación vertical del contenido dentro de cada ítem (superior, centro o inferior).
  • Text alignment: Permite definir la alineación del texto dentro del ítem (izquierda, centro, derecha o justificado).
  • Background Type: Permite elegir el tipo de fondo aplicado a cada ítem (color sólido o transparente).
  • Text color: Define el color del texto del ítem, facilitando su adaptación al diseño general o mejorando la legibilidad.
  • Typography: Permite configurar la tipografía del texto del ítem (fuente, tamaño, peso, estilo y demás propiedades disponibles).
  • Border Type: Define el estilo del borde del ítem (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Border Radius: Controla la curvatura de las esquinas del ítem. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del ítem y su borde. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa cada ítem de otros elementos dentro del detalle del pedido.

  Buttons

  • Normal / Hover: Permite configurar los estilos del botón en su estado normal y en el estado al pasar el cursor (hover), definiendo cambios visuales interactivos.
  • Width (Ancho): Controla el ancho del botón. Puede ajustarse en píxeles u otra unidad disponible.
  • Height (Alto): Define la altura del botón.
  • Horizontal alignment: Permite alinear el contenido del botón horizontalmente (inicio, centro, final o distribución según las opciones disponibles).
  • Vertical alignment: Define la alineación vertical del contenido dentro del botón (superior, centro o inferior).
  • Text alignment: Permite definir la alineación del texto dentro del botón (izquierda, centro, derecha o justificado).
  • Typography: Permite configurar la tipografía del texto del botón (fuente, tamaño, peso, estilo y demás propiedades disponibles).
  • Color: Define el color del texto del botón según el estado seleccionado (Normal o Hover).
  • Background Type: Permite elegir el tipo de fondo del botón (color sólido o transparente).
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo cuando se utiliza transparencia.
  • Border Type: Define el estilo del borde del botón (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Border Radius: Controla la curvatura de las esquinas del botón. Puede configurarse de forma independiente (Top, Right, Bottom, Left) o vinculada para aplicar el mismo valor en todos los lados.
  • Padding (Relleno): Espacio interno entre el contenido del botón y su borde. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa el botón de otros elementos dentro del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del botón para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido del botón cuando excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento del botón en el eje Z. Un valor mayor posiciona el botón por encima de otros elementos superpuestos.

  Tables column title

  • Text alignment: Permite definir la alineación del texto en los títulos de las columnas (izquierda, centro, derecha o justificado), organizando visualmente la cabecera de la tabla.
  • Text color: Define el color del texto de los títulos de columna, facilitando su diferenciación respecto al contenido de las celdas.
  • Typography: Permite configurar la tipografía de los títulos de columna (fuente, tamaño, peso, estilo y demás propiedades disponibles).
  • Background Type: Permite elegir el tipo de fondo aplicado a los títulos de columna (color sólido o transparente).
  • Blur (Desenfoque): Aplica un efecto de difuminado al fondo cuando se utiliza transparencia en la cabecera de la tabla.
  • Border Type: Define el estilo del borde de los títulos de columna (Sólido, Doble, Punteado, Discontinuo, etc.). Permite ajustar sus propiedades cuando está activado.
  • Padding (Relleno): Espacio interno entre el texto del título de la columna y su borde. Puede configurarse individualmente por cada lado.
  • Margin (Margen): Espacio externo que separa los títulos de columna de otros elementos dentro del diseño.
  • Box Shadow: Permite aplicar una sombra alrededor del contenedor del título de la columna para generar profundidad visual.
  • Overflow: Define cómo se comporta el contenido del título cuando excede el tamaño del contenedor (Default, Hidden, Visible, Auto).
  • Z-index: Controla la jerarquía de apilamiento de los títulos de columna en el eje Z. Un valor mayor posiciona la cabecera por encima de otros elementos superpuestos.