Centro de Ayuda

Componentes de temas de Jumpseller

Definiciones generales

¿Qué es un Componente?

Los Componentes son los bloques fundamentales dentro de la estructura de un tema. Pueden incluir headers, footers, videos, banners, sliders, entre otros elementos y secciones que se usan para construir y diseñar las páginas de un sitio web. Los componentes pueden agregarse, editarse y eliminarse desde el panel de Componentes del Editor Visual, y pueden reutilizarse entre diferentes plantillas y diseños para mantener consistencia tanto en el diseño como en la funcionalidad.

Usando Componentes, los diseñadores de sitios web pueden crear estructuras complejas y funcionalidades de manera eficiente, con poco o ningún conocimiento de código, ya que los componentes individuales pueden ser fácilmente manipulados y reordenados. Esto también permite un mantenimiento más sencillo del sitio, ya que los cambios en un componente se reflejarán en todas las plantillas donde ese componente esté siendo usado.

Puedes ajustar fácilmente los componentes con la ayuda del Asistente del Editor de temas, el cual te permite editar configuraciones, así como duplicar, ocultar, eliminar y reordenar componentes directamente en la vista previa en vivo.

También puedes hacer clic en el botón “Agregar componente” para añadir un componente en el lugar y posición que desees.

Cada componente tiene sus propias configuraciones generales y algunos de ellos tienen lo que se llaman Subcomponentes, que permiten construir un segundo nivel de contenido que también puede ser configurado y personalizado individualmente.

Todos los diseños contienen 2 componentes obligatorios que no pueden eliminarse ni ocultarse, estos son Header y Footer. Se muestran al inicio y al final de cada diseño, respectivamente, los cuales se explican en detalle más adelante en esta página.

¿Qué es un Subcomponente?

Un Subcomponente es un ítem que puede añadirse dentro de un Componente. Por ejemplo, el Subcomponente de un Slider es un Slide, mientras que el subcomponente de una Galería de logos es un Logo, y así sucesivamente en los temas de Jumpseller.

Todos ellos tienen opciones individuales para personalizarlos, y también puedes añadir tantos como quieras, reordenarlos, ocultarlos o eliminarlos. Cuando dupliques o reutilices un componente, sus Subcomponentes también serán duplicados.

Para entender mejor cómo gestionarlos, revisa la siguiente lista:

  • Habrá algunos Componentes en los cuales verás un ícono de flecha al lado izquierdo del nombre. Esto significa que tiene o puede tener subcomponentes dentro.
  • Al pasar el cursor, la flecha girará y al hacer clic en ella, se abrirá la lista de subcomponentes, permitiéndote verlos todos.
  • Puedes hacer clic nuevamente en la flecha para cerrarla.
  • También verás un botón que te permitirá añadir subcomponentes, como por ejemplo “Agregar nuevo Slide”.

Dentro de cada subcomponente, al pasar el cursor sobre su nombre, aparecerán 3 opciones en el lado derecho, que te permitirán realizar las siguientes acciones:

Duplicar

Permite duplicar el subcomponente y crear uno nuevo con el mismo contenido e información.

Eliminar

Permite eliminar el subcomponente de la lista.

Nota: Los cambios no se aplicarán en la tienda hasta que guardes. Por ejemplo, si eliminaste un subcomponente por error, puedes hacer clic en el botón Deshacer que está disponible en la esquina superior derecha del Editor Visual para recuperarlo.

Ocultar

Permite ocultar el subcomponente en la tienda sin necesidad de eliminarlo.

Plantillas del tema

Una Plantilla es el contenedor donde se coloca el diseño completo de una sección. Las plantillas disponibles en Jumpseller son las siguientes:

Nota: Puedes leer más sobre esto en este artículo, donde se explica en profundidad qué son las Plantillas y cómo puedes personalizarlas.

Inicio

Es la página principal e inicial que se muestra cuando un visitante entra al dominio de tu tienda, por ejemplo tu-dominio.jumpseller.com o tu-dominio.com.

Producto

Muestra toda la información de los productos de tu tienda. Puedes crear tantas plantillas como desees para mostrar la información de distintas formas según el tipo de producto.

Categoría

Está destinada a mostrar las colecciones de productos de las categorías que puedes crear en el panel de administración de tu tienda, yendo a Productos > Categorías. Aquí también puedes crear nuevas plantillas y aplicarlas a categorías para diferenciarlas.

Página

Los temas de Jumpseller incluyen 2 plantillas de página preinstaladas que puedes usar. Así como para Productos y Categorías, puedes crear muchas más y aplicarlas a tus páginas.

Categoría de página

Esta nueva plantilla permite un uso más flexible del contenido y las páginas de tu tienda, al poder definir la estructura y el estilo para categorías de páginas.

Nota: Está disponible solo para temas con versión 4 o superior.

Resultados de búsqueda

Muestra todos los productos que coinciden cuando los clientes realizan una búsqueda en tu tienda.

Contacto

Permite mostrar varios detalles sobre tu tienda, como información de contacto, enlaces a redes sociales, ubicaciones, mapa y formulario de contacto.

Error

Se usa cuando tus visitantes acceden a una página no disponible, por ejemplo al ingresar una URL incorrecta o que ya no existe. También se usa, por ejemplo, cuando hay un error durante el proceso de compra en tu tienda.

Conceptos básicos

A continuación, explicamos algunos términos y conceptos que se usarán a lo largo de este artículo.

Slider/Carousel

Un Slider o Carousel es un tipo de elemento muy utilizado dentro de los Componentes. Básicamente muestra ítems o subcomponentes en una sección, los cuales se ven más o menos dependiendo del tipo de dispositivo desde donde se visita la tienda. Los elementos que quedan ocultos dentro de la ventana del navegador pueden visualizarse mediante objetos de navegación como flechas y/o puntos, o arrastrando el contenido horizontalmente.

En la mayoría de los Componentes del tema encontrarás opciones para personalizar los Carousels, comúnmente dentro de un grupo llamado Opciones del Carousel, que incluirá las siguientes:

  • Habilitar autoplay: permite que el Carousel se mueva automáticamente de un ítem al siguiente.
    • Habilitar autoplay continuo: disponible en algunos componentes cuando Autoplay está activado, y permite una transición más fluida, sin detenerse en cada “bloque” al cambiar.
  • Velocidad del bloque: permite definir el tiempo que tomará ejecutar la opción anterior.
  • Mostrar flechas: permite mostrar flechas debajo del Carousel para que los usuarios puedan controlarlo.
    • Mostrar flechas al pasar el cursor: si la opción anterior está activada, esta permite mostrar las flechas solo cuando el usuario pasa el cursor sobre el componente (solo en escritorio).
  • Mostrar puntos: permite mostrar puntos debajo del Carousel para que los usuarios puedan controlarlo.

Nota: En componentes como el Slider, el nombre del grupo puede variar, pero las opciones ofrecen la misma funcionalidad, incluso si los nombres difieren ligeramente.

Packs de colores

La mayoría de los componentes tienen su configuración individual para personalización de colores. Con los Packs de colores puedes cambiar el aspecto de un componente completo con un solo clic. Estos afectan elementos como el fondo, textos, enlaces y botones. Puedes editar, reutilizar, clonar o crear tantos packs como quieras. Cuando cambias un color dentro de un pack, se aplicará en todos los lugares donde ese pack esté siendo usado.

Nota: No todos los componentes están disponibles en todos los temas de Jumpseller, ni todas las opciones son iguales entre temas. Sin embargo, el comportamiento general de los componentes es muy similar, y esta documentación te ayudará a configurarlos correctamente.

Dispositivos

A lo largo de este artículo encontrarás los conceptos Escritorio y Móvil. Aunque mayormente nos referimos a estos dos, también es importante considerar los Tablets.

En la siguiente tabla puedes ver el detalle de dimensiones consideradas para cada dispositivo:

Dispositivo Equivalencia de ancho
Móvil pequeño Igual o menor a 414 px
Móvil Igual o menor a 575 px
Tablet Entre 575 px y 991 px
Escritorio Igual o mayor a 992 px
Escritorio grande Igual o mayor a 1200 px

Nota: Esto considera principalmente la vista vertical de dispositivos móviles y tablets. Si cambias la orientación a horizontal, los valores pueden variar respecto a los mencionados.

Ancho

A lo largo del artículo verás mencionada muchas veces la palabra Ancho, ya que en varios componentes podrás ajustar esta propiedad para crear estructuras más dinámicas. Las denominaciones más comunes son:

Pequeño

Los temas están construidos sobre un layout de 12 columnas, donde Pequeño significa que el contenido se extenderá al espacio máximo disponible, es decir, las 12 columnas (aprox. 1320 px).

Navegador o Ancho completo

El contenido se ajustará y adaptará al ancho máximo del navegador donde se visualiza la tienda.

Otros tamaños de ancho

En varios componentes podrás elegir entre:

  • Pequeño: el contenido se ajusta a 6 de las 12 columnas disponibles.

  • Mediano: el contenido se ajusta a 8 de las 12 columnas disponibles.

  • Grande: el contenido se ajusta a 10 de las 12 columnas disponibles.

Nota: En algunos componentes también verás la opción Extra grande, que ajusta las dimensiones según el caso y contexto. En móviles, el contenido ocupará todo el ancho disponible.

Hover

El término hover se refiere a la acción de colocar el cursor sobre un elemento, objeto o sección.

Overlay

En varios componentes encontrarás la opción Overlay. Este elemento es una capa que se coloca entre el contenido y la imagen de una sección, permitiendo generar contraste visual entre ambos. Se encuentra en componentes como Slides, Banners y Big Banner.

Animaciones

En la mayoría de los componentes encontrarás una opción llamada Personalizar opciones de animación, que permite modificar y personalizar las transiciones aplicadas. Las opciones disponibles son:

  • Tipo de animación: define desde qué posición aparecerá el componente.
  • Ejecutar la animación una vez: si está activada, la animación ocurrirá solo al hacer scroll hacia abajo. Si está desactivada, se repetirá al desplazarte hacia arriba o abajo.
  • Retardo de animación: define el tiempo (en milisegundos) que tardará la animación en ejecutarse una vez que el componente entre en la vista del navegador.

Si esta opción no está habilitada dentro de un componente, se aplicará lo definido en Configuración del tema > Diseño > Habilitar animaciones del tema. Puedes leer más en este artículo.

Cabeceras

En la mayoría de los Componentes encontrarás una opción llamada Habilitar cabecera, que mostrará una lista de opciones anidadas para personalizar los elementos de esa sección.

Esta sección se muestra al inicio de cada componente, y sus opciones son las siguientes:

  • Subtítulo: se muestra antes del Título.
  • Título: se muestra entre el Subtítulo y la Descripción, y suele ser obligatorio.
  • Descripción: se muestra debajo del Título.
  • Enlace: permite añadir un enlace a cualquier contenido de la tienda, como categorías, productos, páginas o enlaces externos.
  • Texto del enlace: texto que se mostrará dentro del enlace.

La apariencia de las Cabeceras, su alineación y otros estilos se definen en Temas > Editor visual > Configuración del tema > Cabeceras. Puedes leer más sobre esto en este artículo.

Opciones de contenido

En algunos componentes como el Slider, Big Banner y Banners, encontrarás un grupo de opciones para personalizar elementos como Subtítulo, Título y Descripción/Texto.

Estas opciones te dan más control sobre la apariencia visual, jerarquía y otros atributos de diseño. Las opciones disponibles son:

Tamaño

Permite elegir entre tamaños predefinidos, desde Pequeño hasta Extra grande, vinculados al Tamaño base de fuente definido en Configuración del tema > Fuentes.

También puedes seleccionar Personalizado para definir tamaños diferentes para escritorio y móvil.

Peso

Controla el grosor del texto. Los valores van desde 100 hasta 900, y su efecto depende de las variaciones de fuente seleccionadas en Configuración del tema > Fuentes > Selección de fuente.

Espaciado entre letras

Ajusta el espacio entre caracteres, útil para lograr distintos estilos visuales.

Mayúsculas

Fuerza que el texto se muestre en mayúsculas, incluso si no fue escrito así originalmente. Comúnmente activado por defecto en los Subtítulos.

Listado de componentes

A continuación, puedes encontrar la lista completa de componentes disponibles en los temas de Jumpseller.

Nota: Esta lista incluye componentes para temas con versión 4.0.0 y superior.

Artículos Relacionados

En esta página

¡Comienza tu viaje con nosotros!

Probar gratis por 7 días. No se requiere tarjeta de crédito.

Crear Tienda