Secciones y páginas especiales
Algunas secciones y páginas tienen ajustes propios. Aquí se explica cada una.
La banda de la flota
La banda oscura de la flota del Inicio y la flota de la página Nosotros son la misma pieza: lo que cambies en una cambia en la otra.
- Con un solo tipo de flota, la banda se ve quieta, sin flechas.
- Con dos o más, se convierte en un carrusel.
Ajustes de toda la banda
Para abrirla, en Páginas entra a Inicio y haz clic en la banda de la flota (o, en Orden, pulsa «Flota»). El panel dice arriba: «los ajustes de la banda entera; abajo, los tipos de flota».
Arriba están, además de Visible en el sitio y Mostrar en móvil, dos interruptores que solo sirven para editar y no cambian el sitio: Movimiento en la vista previa y Ver la ventana en la vista previa.
Después vienen los ajustes de la banda entera:
| Ajuste | Opciones |
|---|---|
| Fondo de la banda | Por defecto (oscuro), Oscuro, Blanco o Menta. Con fondo claro, el título pasa a verde solo. |
| Lado de la imagen | Por defecto (derecha), Derecha o Izquierda. |
| Mostrar flechas | Enciende o apaga las flechas. Solo cuenta si hay dos tipos de flota o más. |
| Tiempo entre ítems (milisegundos) | Cada cuánto cambia de tipo (por ejemplo, 6000 son 6 segundos). Solo cuenta si hay dos tipos de flota o más. |
Los tipos de flota
Debajo de esos ajustes está la lista Tipos de flota. Caben de 1 a 8. Cada uno se abre con su flecha y pide:
- Etiqueta superior, Título y Descripción.
- Características (la lista de detalles).
- Botón (solo el Texto y el Estilo).
- Imagen del bus.
- Fotos de la ventana.
Para reordenarlos, usa las flechas de subir y bajar. El primero de la lista es el primero que se ve.
Agregar un tipo de flota nuevo
- Pulsa Agregar tipo de flota. Nace con textos de ejemplo, sin imagen y sin fotos.
- Mientras no le pongas imagen, la vista previa muestra el aviso «Aquí va la foto». Es la señal de que ese tipo está a medias.
- Elige la imagen del bus y las fotos de la ventana.
No se puede guardar un tipo de flota sin imagen.
El botón de cada tipo
El botón de cada tipo de flota solo abre su ventana de fotos. No lleva a otra página, así que no tiene enlace que elegir. Siempre aparece y sí se ve en el celular.
Las fotos de la ventana
La ventana de cada tipo funciona como una galería. El título, la descripción y las características que se leen en ella son los mismos que escribiste en el tipo: no hay que escribirlos otra vez. Aquí solo se cargan las fotos.
- Hacen falta al menos 2 fotos y caben hasta 10.
- Las fotos se ordenan con las flechas de subir y bajar. Se pasan con las flechas o deslizando; no cambian solas.
- Si falta alguna foto, la lista avisa: «Falta 1 imagen: hacen falta 2 para poder guardar». Al pulsar Guardar, el campo se marca en rojo con «Agrega al menos 2 fotos a la ventana».
Enciende Ver la ventana en la vista previa, arriba del formulario. La vista previa abre la ventana del tipo de flota que tengas abierto en la lista. No cambia el sitio.
Ni la imagen del bus ni las fotos de la ventana te dejan elegir qué parte conservar: la foto se centra en el espacio disponible. Procura que lo importante quede hacia el medio.
La banda de transporte especial
Es la banda clara del Inicio, debajo de los sellos: texto en un lado, imagen en el otro y un botón que lleva a otra página. No es una banda de flota: tiene su propio formulario, Banda de texto e imagen, más corto. En el editor lo abres haciendo clic en la banda, o con Orden pulsando «Banda de texto e imagen».
El formulario pide, en este orden:
| Campo | Qué poner |
|---|---|
| Etiqueta superior, Título, Descripción | El texto de la columna. |
| Características | La lista que va en dos columnas bajo la descripción, hasta 8. Si la dejas vacía, la banda solo lleva el texto. |
| Botón | Texto, Enlace y Estilo. Aquí el enlace es obligatorio. Hoy lleva a la cotización de empresas. |
| Imagen | La foto de la columna de al lado, apaisada, con proporción 2.3:1. |
| Lado de la imagen | Derecha o Izquierda. Si lo dejas vacío, va a la derecha. El transporte especial va a la izquierda. |
| Fondo de la banda | Oscuro, Blanco o Menta. Si lo dejas vacío, es oscuro. El transporte especial va en blanco. |
El botón no se ve en el celular. En pantallas pequeñas se lee el texto y se ve la foto, pero la acción queda solo en el computador.
Las agencias y su ubicación en el mapa
La sección Agencias («Dónde encontrarnos», en el Inicio) muestra una tarjeta por cada sede: agencia, terminal o punto de venta. Caben hasta 20. Cada una lleva:
| Campo | Qué poner |
|---|---|
| Ciudad | La ciudad de la sede (hasta 40 caracteres). Es el título de la tarjeta. |
| Tipo | La clase de sede, por ejemplo «Agencia» o «Terminal principal» (hasta 40 caracteres). |
| Dirección | Dónde queda (hasta 120 caracteres). |
| Horario | Por ejemplo «Lun a dom · 5:00 a.m. – 9:00 p.m.» (hasta 60 caracteres). |
| Teléfono | El teléfono de la sede (hasta 30 caracteres). |
| Ubicación en el mapa | Latitud y longitud de la sede. Es opcional, y se explica abajo. |
Además, la sección tiene sus ajustes generales: Alineación de las tarjetas (cuando son menos de cuatro; sin elegir, quedan a la izquierda), Mostrar flechas y Tiempo entre ítems.
Agregar la ubicación en el mapa
Con la ubicación, la ficha de la agencia muestra un mapa de Google Maps con un pin sobre la sede. Sin ubicación, la ficha sale sin mapa.
- Abre Google Maps (maps.google.com) y busca la sede.
- Haz clic derecho justo sobre el lugar de la sede. En la parte de arriba del menú aparecen dos números separados por coma, por ejemplo
4.132252, -73.603599. - Haz clic sobre esos números: Google Maps los copia.
- En el CMS, abre Páginas › Inicio, haz clic en la sección Agencias y abre la agencia con su flecha.
- Baja hasta Ubicación en el mapa y pega en cualquiera de las dos casillas, Latitud o Longitud. El CMS separa los dos números y los acomoda solo. También puedes escribir cada número por separado.
- Debajo debe aparecer el mensaje «Coordenadas válidas: 4.132252, -73.603599. Comprueba que el pin caiga sobre la sede.»
- Mira el mapa que aparece abajo: es el mismo que verá el visitante. Confirma que el pin cae sobre la sede. Si quieres verlo en grande, pulsa Abrir en Google Maps o Comprobar en Google Maps (se abren en otra pestaña).
- Pulsa Guardar, y un administrador publica el Inicio.
En Colombia la latitud es positiva (por ejemplo, 4.13 en Villavicencio) y la longitud es negativa (por ejemplo, -73.60). Google Maps siempre las entrega en ese orden: primero la latitud, después la longitud. Si las inviertes, el pin cae muy lejos de la sede.
Reglas y mensajes del campo
- Usa punto como separador de decimales, no coma.
- La latitud va de -90 a 90 y la longitud de -180 a 180.
- Para quitar el mapa de una agencia, borra las dos casillas.
| Mensaje que ves | Qué significa |
|---|---|
| «Sin ubicación: la ficha de la agencia sale sin mapa.» | Las dos casillas están vacías. No es un error: el mapa es opcional. |
| «La latitud debe ser un número.» / «La longitud debe ser un número.» | Escribiste letras o usaste coma en lugar de punto. Corrígelo. |
| «La latitud va de -90 a 90.» / «La longitud va de -180 a 180.» | El número está fuera de rango. Revisa que no lo hayas cambiado de casilla. |
| «Escribe las dos coordenadas: latitud y longitud.» | Llenaste solo una de las dos. |
Para dibujar el mapa, el sitio necesita una clave de Google Maps configurada en el servidor. Si falta, la ficha sale sin mapa aunque la ubicación esté bien escrita, y solo conserva el enlace «Cómo llegar» a Google Maps. En ese caso avisa a quien administra el servidor.
La página de Servicio empresarial
La página Servicio empresarial (/empresas) recibe por correo las cotizaciones que piden las empresas. Se edita como las demás, pero hay dos cosas que debes saber.
Secciones apagadas a propósito
Cuatro partes se entregaron vacías o apagadas porque son datos que solo ustedes pueden confirmar:
| Sección | Qué falta |
|---|---|
| Clientes | Los logos de las empresas con convenio. Mientras no haya ninguno, la banda no se ve en el sitio aunque la enciendas. |
| Testimonios | Las citas tienen texto de relleno. Cámbialas por testimonios reales y autorizados antes de encender la sección. |
| Encabezado de página | Las Cifras (por ejemplo, «140+ empresas con convenio») están vacías. Agrega solo las que puedas sostener. |
| Cotización | Falta la Persona que atiende. Pulsa Agregar y escribe su nombre, su cargo y, si quieres, su foto y un enlace de WhatsApp. |
Para encender una sección, usa su interruptor Visible en el sitio (mira Ocultar una sección).
El botón que baja al formulario
El botón Solicitar cotización del encabezado lleva a /empresas#cotizar. La palabra cotizar es el nombre de la sección de cotización.
Si cambias ese enlace, el botón deja de bajar hasta el formulario. Cámbialo solo si sabes lo que haces.
La página de Nosotros
Acerca de nosotros (/nosotros) cuenta la historia, los valores y las cifras de la empresa. Se edita como las demás. Estos son los detalles de cada parte:
Historia
- Arriba va el relato, con formato de texto y una Cita destacada opcional.
- Abajo van los Hitos, en una línea de tiempo. Ponlos en orden cronológico, que es el orden en que se leen.
- No es un carrusel: no hay flechas ni movimiento que configurar.
- En el computador, los hitos se reparten en cinco columnas. Del sexto en adelante la línea sigue en una segunda fila, así que cinco hitos es lo que mejor se ve.
Cifras
Va sobre fondo verde y no se le puede cambiar el color: es parte del diseño.
Habilitaciones (los sellos)
Es la banda de sellos («Empresa habilitada y vigilada…»), la misma del Inicio. Cada sello tiene un Nombre y un Logo.
- En el sitio solo se ve el logo. El nombre sirve para identificar el sello en la lista y como texto alternativo.
- Un sello sin logo no se muestra. Puedes dejarlo preparado mientras consigues la imagen.
- Todas las cajas son cuadradas y del mismo tamaño. El logo entra entero y centrado, sin recortarse ni deformarse.
- Cómo debe ser el logo: un PNG o SVG con fondo transparente, de 168 px o más por su lado más largo. Cuanto más cuadrado sea, más grande se verá. Si tienes una versión compacta de la marca, úsala aquí.
- Un logo pequeño no se agranda: se verá chiquito junto a los demás. El editor te avisa al elegirlo, pero te deja guardarlo igual.
- La banda gira sola, en bucle. No lleva flechas ni puntos y se detiene mientras tienes el cursor encima. Si los sellos son pocos, se repiten para llenar la vuelta.
- Tiempo entre ítems regula la velocidad. El interruptor de movimiento de la vista previa la congela mientras editas.
Encabezado de la página
Usa la Banda inferior: una imagen a todo el ancho, pegada debajo del verde.
- Con una sola imagen, se ve quieta.
- Con dos o más, se recorren en carrusel, con flechas y tiempo entre imágenes.
- Las imágenes se eligen de la biblioteca y se ordenan con las flechas de cada fila. Caben hasta 8.
La sección de equipo directivo que aparecía en el diseño original no se construyó. Si se quiere agregar, primero hay que decidir qué fotos y cargos se publican.
La página de PQRS
PQRS (/legal/pqrs) recibe peticiones, quejas, reclamos y sugerencias.
- El tipo de solicitud son cuatro tarjetas de una sola opción dentro del formulario. Para cambiar sus textos, edita Opciones de la lista de ese campo.
Lo que esta página no tiene
Dos cosas del diseño original no se construyeron. Conviene saberlo antes de prometerlas en el texto de la página:
| Función | Por qué no está |
|---|---|
| Número de radicado y la pestaña Consultar estado | Necesita numerar cada solicitud y guardar su estado: es un sistema aparte. Mientras no exista, el texto de la página no debe prometerlo. |
| Adjuntar archivos | Los formularios no permiten subir archivos. Quien necesite enviar un documento puede responder al correo de confirmación. |