Guía del CMS

CMS son las siglas de Content Management System (Sistema de Gestión de Contenidos). Es la herramienta que permite añadir y actualizar la información de la web sin necesidad de saber programar.

Esta guía contiene todo lo necesario para utilizar el CMS de las webs de Squirrel. Su estructura sigue el orden de los menús del propio CMS, de modo que resulte fácil localizar la información buscada en cada momento.

Está dirigida a las personas encargadas de subir contenidos y no requiere experiencia previa en gestión web. Los nombres de campos y botones se mantienen tal como aparecen en el CMS. Las capturas muestran ejemplos de contenido; se deben utilizar los textos, imágenes y enlaces de la vertical que se esté gestionando.

La primera vez se recomienda iniciar sesión en el CMS mientras se lee esta guía: así se podrá ir comprobando directamente cada elemento del que se habla. Además, conviene tener la web abierta en otra pestaña para ver al instante cualquier cambio realizado.

Aspectos importantes a recordar

Para acceder, abrir el CMS de la web correspondiente y entrar con la cuenta de usuario proporcionada. Basta con añadir /admin al dominio del CMS de la web que se gestiona.

Se recomienda trabajar con el CMS y la web abiertos en pestañas distintas para comprobar el resultado de forma inmediata.

Idiomas

Dentro de cada página del CMS hay un desplegable Language que indica el idioma en el que se están editando los contenidos. Para cambiar de idioma hay que abrir el desplegable y seleccionar el idioma en el que se quiere trabajar. Es importante guardar todos los cambios realizados antes de cambiar de idioma.

En el caso de los listados, como por ejemplo la sección UI Texts, se puede modificar el idioma haciendo clic en la flecha junto a Edit. Ahí se abrirá un selector con los idiomas disponibles.

Orientarse en el menú

Page Content reúne los contenidos de cada página.

Shared Content & Blocks agrupa los contenidos reutilizados entre páginas.

Administration contiene las cuentas de usuario y la configuración general de la web.

En esta sección se editan los contenidos relacionados con la Home page.

Home › Hero

Title

Titular del header. Se pueden destacar palabras en negrita seleccionando la palabra y la opción del editor «B». Utilizar Mayús + Enter para añadir un salto de línea.

Image

Imagen del header que aparecerá en el caso de que no haya un vídeo subido. El CMS la recorta desde el centro y la guarda como WebP optimizado.

JPG · JPEG · WebP≤ 20 MB3840×2328 px

Vídeo

Vídeo que aparecerá en el header. Si hay vídeo e imagen subidos en el CMS, la imagen funcionará como póster o imagen de presentación del vídeo.

MP4≤ 100 MBrecomendado 1920×1164 px

Enable intro

Habilitar/deshabilitar la animación de entrada a la web.

Home › Data

Text

Texto de presentación del bloque. Solo admite texto plano y negritas.

Data ítems

Editar el listado de datos destacados que se muestran en la home. Cada ítem está compuesto por un Title y Text.

Home content

Volver a la edición de Home.

Add data item

Añadir un nuevo dato al listado.

Reorder Home data ítems

Permite cambiar el orden de los datos: arrastrar los registros, colocar en el orden deseado y pulsar Save.

Dentro de cada ítem

Edit

Modificar un dato existente. Se recomienda revisar el valor y su explicación antes de guardar.

Delete

Eliminar un dato.

Home › Business Units

Title

Define el título del bloque de business units. Las business units, sus imágenes y sus ítems se gestionan en Shared Content & Blocks › Business Units.

Home › Services

Title

Titular del módulo de Services.

Text

Texto explicativo del módulo de Services. El texto permite incluir negritas.

El detalle de cada servicio y su orden se gestionan en Shared Content & Blocks › Services.

La página About presenta la empresa, su equipo y oportunidades de empleo. El contenido se organiza en las pestañas Hero, Team y Jobs. Los campos con asterisco son obligatorios.

About › Hero

Title

Titular del bloque inicial.

Text

Texto introductorio. Permite añadir negritas. Mayús + Enter introduce un salto de línea.

Image

Imagen del header, opcional. Seleccionarla mediante «Browse». El CMS recorta la imagen desde el centro y la guarda como WebP optimizado; se recomienda tener el motivo principal en la zona central.

Si el vídeo no carga se mostrará la imagen. Si se cargan vídeo e imagen, la imagen se utiliza como póster o imagen de presentación del vídeo.

JPG · JPEG · WebP≤ 20 MB3840×2328 px

Vídeo

Vídeo del header, opcional.

MP4≤ 100 MBrecomendado 1920×1164 px

About › Team

En esta sección se gestionan los miembros del equipo de la vertical. Todos los campos con * son obligatorios.

Title

Titular de la sección del equipo.

Team members

Permite acceder al listado de personas.

Para añadir una persona, pulsar Add team member. Para modificar una existente, pulsar Edit en su fila. Search permite localizar registros; About content permite volver al contenido de About.

Ficha de cada team member

Name *

Nombre de la persona.

Position *

Cargo.

LinkedIn

Opcional. Pegar la dirección completa del perfil, comenzando por https://.

Image *

Fotografía de la persona. El CMS conserva la transparencia. Para mantener un aspecto uniforme, conviene utilizar fotografías con encuadres similares.

PNG · WebP≤ 10 MBlienzo 904×1210 px

Save

Guardar la ficha.

El listado también incluye las opciones de Edit o Delete para editar o eliminar una ficha.

Reorder About team members

Permite modificar el orden del equipo. Arrastrar los elementos hasta colocarlos en el orden deseado y pulsar Save. Arrastrarlos sin pulsar Save no completa el guardado.

About › Jobs

Title / Subtitle *

Título y subtítulo de la sección de empleo. Subtitle permite aplicar negritas. Mayús + Enter hace un salto de línea.

Text *

Texto que describe cómo es trabajar en Squirrel.

Button text *

Texto visible del botón, por ejemplo «Ver ofertas de empleo».

Button link *

URL completa de destino, comenzando por https://. Se debe sustituir cualquier enlace de ejemplo por el destino correcto.

Gestionar las imágenes de Jobs

Images

Pulsar Elegir archivos y seleccionar las imágenes que se quieran añadir. El CMS conserva la transparencia.

PNG · WebP≤ 10 MBlienzo 524×524 px

• Para cambiar el orden de las imágenes ya guardadas, arrastrar cada card mediante Drag hasta la posición deseada.
• Para eliminar una imagen, pulsar el icono rojo de papelera de su propia card. Conviene comprobar qué fotografía se va a retirar antes de pulsarlo.
• Revisar la selección y el orden antes de guardar. Al guardar el contenido de About, los cambios se publican directamente en la web.

La página Contact reúne el texto de introducción y los datos de contacto de la empresa. Contact details permite organizar la información de contacto en bloques.

Text *

Texto introductorio. Solo admite negrita. Enter crea un párrafo nuevo y Mayús + Enter un salto de línea.

Contact details *

Completar Title con un título identificativo, como «Contacto general» o «Madrid». En Text introducir los datos: dirección, teléfono y correo electrónico.

El editor de los datos de contacto permite añadir enlaces: seleccionar el texto y utilizar el icono de cadena; el icono de cadena rota permite retirarlo. Conviene revisar que el destino coincida con el teléfono o correo que se muestra.

Add contact detail

Crea un nuevo bloque de contacto.

X

Elimina el módulo de Contact details.

Flechas

Junto al Title, permiten ordenar los bloques.

Antes de guardar, conviene comprobar que no haya bloques vacíos ni información duplicada.

Legal Pages reúne las páginas Legal notice (aviso legal), Privacy policy (política de privacidad) y Cookie policy (política de cookies). Para editar una, localizarla en el listado o mediante Search y pulsar Edit en la fila correspondiente. Comprobar el idioma en el encabezado de la ventana.

Title *

Título de la página.

Text *

Contenido de la página. La barra del editor permite estilos de párrafo, negrita, cursiva, listas con viñetas o numeradas y enlaces. Para un salto de línea, Mayús + Enter.

El menú Shared Content & Blocks reúne los contenidos y bloques que se comparten entre diferentes páginas de la web, de modo que la misma información se mantenga en todos los lugares donde se utiliza. News y Case Studies también incluyen el acceso a Content para editar el título de sus páginas.

Apartados disponibles

Las opciones con una flecha incluyen un submenú que se puede desplegar. Antes de editar, comprobar el idioma activo mediante el selector Language de cada pantalla.

6.1 Business Units

Gestiona la información de las business units que se utiliza como contenido compartido en la Home y el About. Cada ficha reúne un título, un subtítulo, un texto de presentación, un enlace y las imágenes de un carrusel. El listado muestra Title, Link y las acciones de cada unidad. Usar Search para localizar una ficha y Edit para modificarla.

Campos de la ficha (los cuatro obligatorios)

Title *

Nombre de la business unit, por ejemplo «Squirrel Agency».

Subtitle *

Frase breve de presentación.

Text *

Texto descriptivo que explica qué hace la unidad de negocio.

Link *

Dirección completa de destino, comenzando por https://. Comprobar que lleva a la web correcta.

Slider images

Imágenes del carrusel. Añadir con «Elegir archivos». El CMS las recorta desde el centro y las guarda como WebP. Para reordenar, arrastrar cada card mediante «Drag»; para retirar una, usar el icono rojo de papelera.

JPG · JPEG · WebP≤ 10 MB606×334 px

Add business unit

Crear una unidad de negocio.

Reorder business units

Cambiar el orden (arrastrar y pulsar Save).

Ítems

Abre los elementos asociados a esa unidad.

Delete

Eliminar la ficha.

Business Units › Ítems

Cada unidad dispone de su propio listado de Ítems. Estos elementos aparecen en Home y About y llevan al destino configurado en su link. Comprobar el nombre de la unidad en el encabezado antes de empezar.

Pulsar Ítems en la fila de la business unit; si no hay elementos, se mostrará «No entries» o «No data available in table».

Add item

Crear un nuevo elemento.

Business Units

Volver al listado de unidades de negocio.

Campos del ítem (todos obligatorios)

Title *

Título del elemento, con un nombre que lo identifique claramente.

Link *

Dirección completa de destino, comenzando por http:// o https://.

Text *

Texto descriptivo del elemento.

Image *

Pulsar «Browse» para seleccionarla. El CMS la recorta desde el centro y la guarda como WebP.

JPG · JPEG · WebP≤ 10 MB450×564 px vertical

Save and back

Guardar el elemento y volver al listado (Cancel cancela la creación).

Una vez realizada la edición, comprobar los ítems tanto en la Home como en About: revisar textos e imágenes y pulsar sus enlaces para verificar que abren el destino indicado en Link.

6.2 News

Dentro de News hay 2 opciones:

• Content: editar el título de la página de noticias.
• List: gestionar las noticias individualmente.

News › Content

Title

Encabezado de la página de noticias, por ejemplo «Newsroom». Pulsar Save and edit this item para guardar y permanecer en la pantalla.

News › List

El listado muestra la imagen de la card, el título, el slug, el estado Published y la Published date. Se puede utilizar el buscador para encontrar una noticia.

Publication status

Aplicar filtros dentro del listado.

Remove filters

Retirar los filtros seleccionados.

Add news post

Crear una noticia.

Edit

Modificar la noticia.

View

Ver la noticia previa a la publicación.

Delete

Eliminar la noticia.

News › General

Datos principales de la noticia (campos con asterisco obligatorios):

Title *

Titular de la noticia. Debe describir su contenido con claridad.

Slug *

Parte de la dirección que identifica la noticia. Si se deja vacío, el CMS lo genera a partir del título; si existe otro igual, añade un sufijo numérico. Usar minúsculas y guiones. Cambiar el slug de una noticia publicada modifica su dirección y puede afectar a enlaces existentes.

Card image *

Imagen de la card de la noticia. Las imágenes de más de 1200 px de ancho se reducen proporcionalmente y se guardan como WebP; la altura no está limitada.

JPEG · PNG · WebP≤ 10 MBmáx. 1200 px ancho

Hero image *

Imagen principal de la noticia. Se recorta desde el centro y se guarda como WebP.

JPEG · PNG · WebP≤ 20 MB3808×2140 px

Published date *

Fecha y hora de publicación. Utilizar el selector de calendario.

Published

Controla la publicación. Desactivado, la noticia queda fuera de la web; activado con fecha futura, queda programada para ese momento.

Updated at

Fecha de última actualización que se muestra en la ficha.

Orden de las noticias

Por defecto, de más reciente a más antigua según Published date (no la fecha de creación). Se pueden ordenar con Reorder: arrastrar los elementos y pulsar Save.

News › Content

Content *

Cuerpo de la noticia, editado con un editor de texto enriquecido. La barra incluye deshacer y rehacer, negrita, cursiva, listas con viñetas o numeradas, enlaces, inserción de imágenes y limpieza de formato. No es necesario utilizar la opción de código «<>».

News › SEO

Información para buscadores y para la presentación del enlace al compartirlo. Los campos son opcionales, pero es recomendable completarlos para ayudar al posicionamiento de la web.

SEO title

Título para los metadatos. Si se deja vacío, se usará el título de la noticia.

Meta description

Resumen breve y claro de la noticia.

Open Graph title

Título que se muestra al compartir el enlace. Si se deja vacío, se utilizará el SEO title.

Open Graph description

Descripción que se muestra al compartir el link. Si se deja vacía, se utilizará la Meta description.

Open Graph image

Imagen que aparece al compartir. Pulsar «Browse» para seleccionarla. El CMS la recorta desde el centro.

WebP1200×630 px

Noindex

Solicita a los buscadores que no indexen la noticia en el idioma editado. Activar solo cuando esa sea la intención; no sustituye al estado de publicación.

Revisar las tres pestañas, el idioma y el estado Published, y pulsar Save and back para guardar y volver al listado.

6.3 Case Studies

Desde esta sección se gestionan los casos de éxito. El funcionamiento es el mismo que el de News, con una opción adicional de categorías para clasificarlos. Al abrir el listado se puede añadir un caso nuevo o editar uno existente.

El orden por defecto es de más reciente a más antiguo según Published date. Se puede modificar con Reorder (arrastrar los case studies, ordenarlos y pulsar Save).

Campos editables (mismos que en News)

General

Título, slug, Card image, Hero image y Published date, más el desplegable Category. Cada caso admite una sola categoría; si falta, crearla primero en Case Study Categories.

Content

Cuerpo del caso de éxito, con el editor.

SEO

Metadatos y presentación del enlace, igual que en News.

Case Studies › Categories

Las categorías clasifican los casos de éxito. El listado muestra Title, slug, Updated y las acciones de cada categoría.

Title

Nombre de la categoría, por ejemplo «Strategy». Usar nombres claros y coherentes con las categorías existentes.

Slug

Identificador de la categoría para la dirección web. Se genera a partir del título si se deja vacío; si está duplicado, el CMS añade un sufijo numérico. Si se introduce manualmente, usar minúsculas y guiones.

Add case study category crea una categoría; Edit la modifica; Save and back guarda. Delete solo elimina una categoría sin casos asociados: si tiene casos, el CMS lo impide. Antes, reasignar la categoría de cada caso en el desplegable Category de General.

6.4 Services

Reúne las fichas de los servicios que se utilizan como contenido compartido en la Home y en Services. Cada ficha contiene un título, un resumen, una descripción y una imagen. El listado muestra Image, Title, Excerpt y Updated. Utilizar Search para localizar un servicio, Edit para modificarlo o Add service para crear uno.

Campos de la ficha (los cuatro obligatorios)

Title *

Nombre del servicio, por ejemplo «Media Strategy».

Excerpt *

Resumen breve que se muestra en la Home. Explica de forma concisa qué ofrece el servicio.

Description *

Descripción completa que se muestra en la página Services.

Image *

Imagen del servicio. El CMS la recorta desde el centro y la guarda como WebP. Usar una imagen vertical con el motivo principal centrado.

JPG · JPEG · WebP≤ 10 MB606×760 px

Save

Guardar la ficha.

Close

Cerrar sin guardar.

Reorder services

Cambiar el orden (arrastrar y pulsar Save).

Delete

Eliminar la ficha (comprobar antes dónde se utiliza).

6.5 Brands

Reúne el contenido del bloque de marcas y el listado de marcas con sus logotipos. Pulsar Brands para desplegar Content y List.

Brands › Content

Title *

Título del bloque, por ejemplo «Our Partners». Pulsar Save and edit this item para guardar.

Brands › List

La pantalla muestra las columnas Name, Logo y las acciones de cada marca.

Add brand

Añadir una marca.

Edit

Modificar una marca existente.

Reorder brands

Modificar el orden.

Delete

Eliminar una marca.

Campos de la ficha (obligatorios)

Name *

Nombre de la marca, por ejemplo «Burger King».

Logo *

Archivo del logotipo. En la web se muestra con una altura máxima de 54 px (es su visualización, no una medida obligatoria del archivo de origen).

SVG · WebP≤ 512 KBvisualización máx. 54 px alto

Save guarda la ficha; Close la cierra sin guardarla. Se recomienda comprobar el logotipo sobre el fondo del bloque de marcas en la web.

6.6 Visual Grid

Visual Grid Content actualiza el texto y la etiqueta del botón del bloque Visual Grid. Las imágenes son fijas y no se gestionan aquí. El botón lleva siempre a Contact.

Text *

Texto del bloque. Solo admite negrita (seleccionar la palabra y pulsar «B»). Mayús + Enter para un salto de línea.

Button text *

Texto visible del botón. Una etiqueta breve que invite a contactar; este campo modifica la etiqueta, no el destino.

Pulsar Save and edit this item para guardar.

6.7 Footer Content

Actualiza los textos del footer. Como contenido compartido, afecta a todas las páginas donde aparece el pie. Todos los campos son obligatorios.

Company text *

Identificación de la empresa, por ejemplo «A Squirrel Company».

CTA text *

Mensaje que invita a realizar una acción, como contactar (CTA significa llamada a la acción). Solo admite negrita.

Navigation title *

Título del grupo de enlaces de navegación, por ejemplo «Navigate».

Business Units title *

Título del grupo de enlaces de unidades de negocio.

Social networks title *

Título del grupo de redes sociales, por ejemplo «Follow us».

Copyright text *

Texto de derechos reservados, por ejemplo «All rights reserved».

Pulsar Save and edit this item para guardar.

6.8 UI Texts

Reúne los textos comunes de la interfaz que aparecen en botones, indicaciones, filtros y mensajes de la web. Cada registro muestra un identificador y sus traducciones en inglés y castellano.

Columnas del listado

Key

Identificador que utiliza la web, por ejemplo actions.view_all_news. Sirve para distinguir el registro; no es el texto que ve el visitante. No es editable: se utiliza a nivel interno.

Translation EN

Texto visible en inglés, por ejemplo «View all news».

Translation ES

Texto visible en castellano, por ejemplo «Ver todas las noticias».

Actions

Editar (Edit) o eliminar (Delete) el registro.

Para editar el contenido en otro idioma, pulsar la flecha junto a Edit y elegir English (en) o Español (es) en el menú TRANSLATION. Comprobar que el idioma del encabezado coincide (por ejemplo, Edit UI text — English (en)).

Translation *

Texto que verá el visitante en el idioma seleccionado. Solo admite texto simple, sin formato. Conservar el Key al actualizar.

Pulsar Save para guardar. Para actualizar el otro idioma, volver al listado, pulsar la flecha del mismo registro y seleccionar la otra traducción.

El apartado Administration reúne las opciones Users y Config, separadas de las secciones utilizadas para gestionar los contenidos de la web.

Users

Acceso al apartado de usuarios del CMS.

Config

Acceso al apartado de configuración. Pulsar la flecha junto a Config para desplegar sus opciones.

7.1 Users

Gestiona las cuentas de las personas que acceden al CMS. Para añadir una persona, abrir Users y seleccionar la opción de añadir usuario; introducir el nombre, el correo electrónico y la contraseña (comprobar que el correo está escrito correctamente) y guardar.

Para editar una cuenta, localizar a la persona, abrir su ficha, modificar los datos y guardar los cambios.

7.2 Social Networks

Reúne los nombres y enlaces de las redes sociales, que aparecen en el footer como enlaces de texto con el nombre de cada red, sin iconos.

El listado muestra Name, URL, Updated y las acciones. Localizar el perfil con Search; Edit lo modifica y Add social network crea uno nuevo. Comprobar que la URL corresponde al perfil oficial de la empresa (los enlaces de la captura son ejemplos). Reorder social networks cambia el orden y Delete elimina un registro.

El título del grupo se edita en Footer Content › Social networks title.

7.3 Page Settings

Configura la etiqueta de navegación, el slug y los metadatos de cada página. Los textos e imágenes de los bloques se gestionan en los apartados de contenido explicados anteriormente.

El listado muestra las columnas Menu label, slug y Updated. Pulsar la flecha junto a Edit y elegir English (en) o Español (es); también puede seleccionarse el idioma en Language dentro de la pantalla.

Page Settings › Navigation

Menu label *

Texto que se mostrará en el menú para el idioma seleccionado, por ejemplo «Home» o «Inicio».

Slug

Parte de la URL que identifica la página. La página Home utiliza un slug vacío: dejarlo vacío para conservar la dirección de inicio. Para el resto, usar un identificador breve y claro con minúsculas y guiones, sin espacios.

Cambiar el slug de una página existente modifica su dirección y puede afectar a enlaces anteriores.

Page Settings › SEO

Default Open Graph image

Imagen para la presentación del enlace de la página. Pulsar «Browse». Se comparte entre todos los idiomas.

JPEG · PNG · WebP≤ 5 MB

SEO title

Título de los metadatos de la página en el idioma seleccionado.

Meta description

Resumen breve que describe el contenido de la página.

Open Graph title

Título para compartir el enlace. Opcional; si se deja vacío, se usa el SEO title.

Open Graph description

Descripción para compartir. Opcional; si se deja vacía, se usa la Meta description.

Noindex

Solicita a los buscadores que no indexen esta versión de la página. No la oculta a quien acceda a su dirección.

Pulsar Save and back para guardar. Si se cambia la imagen Open Graph, el cambio afecta a todas las versiones de idioma de la página.

7.4 SEO Defaults

Configura los valores generales de SEO y Open Graph de la web. Los valores específicos de cada página, noticia o caso de éxito tienen prioridad; los generales se utilizan solo para los campos que no estén completados, campo por campo. La imagen Open Graph se comparte entre todos los idiomas.

Default title *

Título general de la web.

Default description

Descripción general y breve de la web.

Default Open Graph title

Título general para compartir. Opcional; si se deja vacío, se usa Default title.

Default Open Graph description

Descripción general para compartir. Opcional; si se deja vacía, se usa Default description.

Default Open Graph image

Imagen general para compartir, usada cuando el contenido no tiene una imagen específica. Pulsar «Browse».

JPEG · PNG · WebP≤ 5 MB

SEO title suffix

Texto que se añade al final de los títulos SEO, excepto en Home. Opcional; debe incluir el separador, por ejemplo  | Squirrel. No se añade a los títulos Open Graph.

7.5 Languages

Gestiona los idiomas de la web: determina cuáles están habilitados en la web pública y cuál es el principal. Para traducir los contenidos se usan los selectores de idioma de cada pantalla. El listado muestra Code y Name (por ejemplo, en = English, es = Español).

Active

Habilita o deshabilita el idioma en la web pública. El interruptor guarda el cambio directamente al pulsarlo.

Default

Establece el idioma principal de la web. También guarda directamente; comprobar qué idioma queda como principal.

Add language

Crear un idioma. No requiere configuración adicional; conviene completar sus contenidos antes de ofrecerlo a los visitantes.

Edit

Editar la ficha.

Delete

Eliminar.

Reorder languages

Cambiar el orden (arrastrar y pulsar Save).