Tema Redline (marca de skate y street)
Tema Redline (marca de skate y street)
Este es el manual de Redline (redline), el tema oficial de Zittme para marcas de skate y deportes urbanos. Reúne en un solo sitio la presentación de la marca y la venta de mercancía. Usa rojo señal sobre fondo negro con letras muy grandes; la pantalla de inicio muestra una foto a pantalla completa y el menú se abre a pantalla completa. El flujo de compra (carrito, pedido, pago) es igual al del tema Sinsunhan, así que para lo que no esté aquí consulta también el documento Tema Sinsunhan (tienda en línea).
Demo: redline-demo.zitt.me
Componentes
| Componente | Ubicación | Función |
|---|---|---|
| Layout | themes/redline/layouts/redline | Estructura del sitio + página principal integrada del tema (portada, texto en movimiento, secciones de marca) |
| Skin de comercio | themes/redline/modules/commerce | Inicio de mercancía, lista, detalle, carrito, pedido, Mis compras, campañas, tienda del vendedor |
| Skin de tablero | themes/redline/modules/board | Lista, tarjetas, webzine, FAQ |
| Skins de miembros, mensajes, centro de notificaciones y avisos | themes/redline/modules/{member, communication, ncenterlite, message} | Inicio de sesión, registro, Mi página, mensajes, notificaciones, avisos del sistema, pantallas de error |
| Skins de zittme Pay y contacto | themes/redline/modules/{zittme_pay, contact} | Solo se aplican en sitios que tienen instalado el módulo correspondiente |
Instalación y aplicación
- Instálalo desde la tienda o descomprímelo en
themes/redline. - En Administración > Ajustes de diseño, elige Redline y aplícalo.
- Si tienes el módulo de comercio, el carrito del encabezado, la búsqueda del encabezado y la sección de mercancía de la portada se conectan automáticamente. Si tienes varios módulos de tienda, escribe el mid en "Dirección de la tienda de mercancía (mid)" en Ajustes del layout > Básico.
- Si tienes un logo aparte para el modo claro, ponlo en "Imagen del logo para modo claro".
- Al cambiar el color de acento, el color del texto de los botones y el del texto destacado se ajustan automáticamente al fondo, para que no queden combinaciones difíciles de leer.
- Las pantallas de error 404 y 500, que se dibujan fuera del layout, también siguen el modo de color del sitio.
- Team riders: registra uno por uno foto, nombre, disciplina o rol, año de ingreso y enlace.
- Cifras: registra el número, lo que va después del número (p. ej., mil, años) y la descripción.
- Si dejas vacío el título de la sección, aparece un título predeterminado según el tipo.
- Mostrar portada: solo en la principal, también en subpáginas, o no usar
- Altura de la portada: pantalla completa (predeterminado), alta (80% de la pantalla), normal (620px)
- Línea superior, título, descripción y botón de la portada: el título se muestra muy grande, respetando los saltos de línea.
- Texto en movimiento: sepáralo con barras verticales (
|) para dividir los elementos. Si lo dejas vacío, no se muestra la franja. Velocidad: lenta, normal o rápida. Si el visitante activó la reducción de movimiento en su dispositivo, se muestra detenido. - Inicio de mercancía y lista: pestañas de categoría, búsqueda y orden. Insignias de oferta, nuevo y recomendado.
- Detalle: nombre del producto, precio, beneficio de puntos, costo de envío, opciones, comprar ahora y carrito; debajo, líneas con información de envío, autenticidad y cambios/devoluciones.
- Tienda del vendedor: al activar el marketplace se crea una tienda por vendedor (
/shop-mid/store/shop-id). Muestra el banner, el menú y la búsqueda de la tienda, productos destacados, novedades, productos por categoría, avisos e información del vendedor, y usa como color de acento el color de tienda que eligió el vendedor. - Carrito, pedido, Mis compras y campañas: siguen el mismo flujo que el tema Sinsunhan y el pago continúa en el skin de zittme Pay.
Entorno recomendado: Zittme 1.0.1 o superior, comercio 1.1.1 o superior. Es un tema responsivo, así que te recomendamos desactivar la vista exclusiva para móviles.
Modo de color
Este tema se diseñó sobre fondo negro. En Ajustes del layout > Básico > Modo de color elige entre "Siempre oscuro (predeterminado)", "Siempre claro" y "Según la configuración del dispositivo del visitante".
Tipos de página
En el mapa del sitio, escribe uno de estos valores en el campo Clase del menú para definir el aspecto de la página.
| Clase | Aspecto |
|---|---|
m | Principal. Muestra la portada y las secciones de la página principal. |
sf | Ancho completo. El contenido ocupa todo el ancho de la pantalla. Ideal para páginas de presentación de marca. |
| (vacío) | Subpágina normal |
Página principal integrada del tema (Composición principal)
Arma la página en orden con el campo repetible "Secciones de la página principal" de la pestaña Composición principal en Ajustes del layout. Si no hay ninguna, se usa la composición predeterminada.
| Tipo de sección | Contenido | Campos que usa |
|---|---|---|
| Manifiesto | Un bloque de letras grandes. Presentación de la marca en una línea | Texto, nombre del botón, enlace del botón |
| Team riders | Cuadrícula de tarjetas con fotos en blanco y negro. Al pasar el mouse vuelve el color | Campo repetible "Team riders" |
| Cifras | Números grandes sobre una franja roja. Los números suben al entrar en pantalla | Campo repetible "Cifras" |
| Mercancía / Novedades / En oferta | Tarjetas de productos de la tienda | Cantidad a mostrar |
| Journal | Tarjetas con las publicaciones recientes del tablero | Origen (mid del tablero; vacío = primer tablero), cantidad a mostrar |
| Franja de foto | Texto y botón sobre una foto a pantalla completa | Imagen, texto, nombre del botón, enlace del botón |
| Texto en movimiento | Franja que se desplaza horizontalmente | Título de la sección (vacío = texto en movimiento de la pantalla de inicio) |
Pantalla de inicio (portada y texto en movimiento)
Pantallas de la tienda (skin de comercio)
Skin de tablero
En los ajustes del skin eliges el título y la descripción del tablero, el formato de lista (lista, tarjetas, webzine, FAQ), la alineación del autor, y si se muestran la foto de perfil, la firma, los archivos adjuntos y el botón de recomendar. Para tableros centrados en fotos, como un journal, te recomendamos el formato de tarjetas.
Pie de página
En Ajustes del layout > Pie de página completas el texto de presentación de la marca, el teléfono y el correo de contacto, 3 direcciones de redes sociales (Instagram, YouTube, TikTok), el texto de aviso inferior, la información de la empresa y de contacto (un dato por línea), el aviso de copyright y las letras grandes del pie de página. El menú del pie de página se conecta al "Menú del pie de página" en la gestión de menús.
Todos los ajustes del layout
Básico
Imagen del logo, imagen del logo para modo claro, texto del logo, color de acento, ancho máximo del contenido (1280, 1440, 1680), modo de color, usar búsqueda, dirección de la tienda de mercancía (mid)
Pantalla de inicio
Mostrar portada, altura de la portada, imagen de fondo de la portada, línea superior de la portada, título de la portada, descripción de la portada, nombre del botón de la portada, enlace del botón de la portada, texto en movimiento, velocidad del movimiento
Composición principal
Secciones de la página principal (tipo, título, texto, imagen, origen, nombre del botón, enlace del botón, cantidad a mostrar), team riders, cifras
Pie de página
Letras grandes del pie de página, texto de presentación de la marca, teléfono de contacto, correo de contacto, 3 direcciones de redes sociales, texto de aviso inferior, información de la empresa y de contacto, aviso de copyright