SB logo

A guide to storyblok

SB logo

Introducción

Stoyblok es un sistema de gestión de contentidos web que permite al creador diseñar y actualizar los contenidos sin la necesidad de un desarrollador. 

Se pueden añadir y editar contenidos (texto, imágenes, video) dentro de los componentes (bloks) que existen en Storyblok. Los componentes en sí y sus respectivas funcionalidades han de ser creados por un desarrollador. 

Si tienes alguna sugerencia para mejorar algún componente o quieres reportar un bug, puedes hacerlo a través del canal de slack #temp-storyblok-troubleshooting-and-suggestions

Mkt

Storyblok empodera a OEES con la gestión de su presencia web otorgándoles autosuficiencia a la hora de crear páginas promocionales e informativas. 

Evitando dependencias con desarrolladores se consigue que la creación y gestión de contenidos web se adhiera a los plazos y la visión de las partes interesadas (e.j. marketing). 

Una vez dentro del OEES Consumer site, selecciona "Content" entre las opciones de la barra de la izquierda.

Luego haz click sobre "+ Create New" en la esquina superior derecha y selecciona "Story".

Deberás darle un título (Name) a tu story.

En "Slug" introduce la dirección deseada. No tienes que introducir la URL entera (ej. octopusenerg.es/storyblok-guide) , solo lo que venga después del / (ej. storyblok-guide)

También tiene la posibilidad de definir una dirección específica para la versión inglesa de la Story bajo Slug - English (EN) haciendo click en "languages". Por ejemplo (storyblok-guide/en). También puedes traducir el título de la página bajo "Translated name".

Parent folder es la carpeta de Storyblok donde quieras guardar la Story. Si vas a crear un post para la página de blog, métela en la carpeta de blog. Si quieres que vaya suelta la puedes dejar en Root que viene seleccionada por defecto.

Formatos de contenido:

Puedes crear páginas enteras o secciones/componentes para ser enchufados dentro de una página.

Authors: Al final de cada blog post se introduce el autor de la publicación. Esta entrada ha de ser creada en "Authors" con el nombre, posición y retrato del autor.

Faqs container: Existe un componente que se llama Faqs list. Al crear un listado de preguntas frecuentes en una Faqs container, podrás insertar estas preguntas frecuentes insertando la dirección de esta Story en cualquier otra story. Esto resulta util a la hora de re-utilizar las mismas preguntas frecuentes en varios posts y landings.

Page: Si tu intención es crear una landing page, este formato es tu mejor apuesta. Es un lienzo en blanco (mejor dicho en azul) donde poder empezar a añadir contenido desde cero. TOP TIP!!! Existe una Story titulada "Templates" donde podréis encontrar maquetas de contenido responsive que se utiliza a menudo para copiar y pegar en tu nueva landing.

Post: Este es el formato que deberás utilizar si quieres escribir un blog. Te viene todo masticado. Eliges un título, un autor (previamente definido en "Authors") una imagen, un texto introductorio que se verá en la miniatura del blog y ya te pones a escribir. El estilo del texto en el título viene preestablecido, pero dentro de Long Text (donde se escribe el cuerpo del blog) puedes añadir imágenes, emoticonos e incluso otros bloks (busca el + en la sección de herramientas)

Press testimonials - Estos son los testimonios de prensa que te encontrarás abajo del todo en la home page octopusenergy.es. Si un periódico te tira un piropo digo yo que habrá que fardar.

Elige el post: Este content type define el post principal que se verá en la home page de /blog. En este caso, el que redirige al post de programa de referidos. No deberías tener por que crear una nueva página con este tipo de content type. Si quieres cambiar el post principal, dirígete a la carpeta mainPost, entra en la Story y selecciona un nuevo post del menú desplegable. El contenido se formateara solo al ser publicado.

Tagsfromfaqspage: Con esto podrás crear las etiquetas identificativas de la página de ayuda y preguntas frecuentes. Esto permite mantener el contenido organizado y conectarlo a otras páginas en el espacio de Octopus Energy.

Configuration es una herramienta que se encuentra en la barra de herramientas a la derecha de la pantalla. Te permite ajustar

  • El título que le vas a dar a tu Story

  • El slug: Esta es la parte identificadora de la dirección de la página. Por ejemplo, en la página de tarifas sería /precios. También te permite definir un slug para cuando la página se traduzca al inglés.

  • Tags: Se utilizan para permitir filtrar los contenidos por categoría internamente. Como puedes ver en octopusenergy.es/blog

  • Real path: Necesitarás añadir el slug aquí cuando crees una nueva story dentro de la carpeta de landings o de blog. Si no lo haces, no se verá la página en producción.

  • Alternative version: Se utiliza para indicar un vínculo que hay entre dos páginas. Por ejemplo, un post en español y su versión inglesa.

Entry conf

Los "Preview links" son los enlaces que se utilizan para visualizar el contenido antes de publicarlo.

Encima del contenido que estés creando o editando encontrarás la URL de la página. Al hacer click sobre el engranaje a su derecha, te encontrarás con 4 opciones.

  • Local Preview y Exit Local preview son entornos locales reservados para desarrolladores.

  • Prod Preview y Exit Prod Preview pueden ser utilizados por todos.

  • Prod preview se deberá usar cuando estemos editando contenido.

  • Exit prod preview existe para evitar ver contenido no guardado al navegar la página en vivo.

Si estás en modo Prod Preview y no ves el contenido al hacer click en click sobre "Preview" en Storyblok (te da error 404), puede que estés trabajando sobre una Story dentro de la carpeta de landings o blogs y no hayas definido el Real Path. Añade el Real Path desde la herramienta Configuration e inténtalo de nuevo.

prev links
prev buttons

En los tiempos que corren, estamos muy acostumbrados al auto-guardado. En Storyblok deberás acordarte de guardar tus avances antes de cerrar la pestaña. ¡De no hacerlo correrás el riesgo de perder tu progreso!

Para ello, simplemente haz click en el botón "Save" en la esquina superior derecha de la pantalla. Recomendamos que guardes tu progreso a menudo, por si las moscas.

Si estás realizando cambios sobre una página ya publicada, deberás publicar los cambios después de guardarlos para poder verlos en producción.

warning

¡Ahora puedes configurar redirecciones desde Storyblok! Para ello, busca una Story titulada " redirections" en el espacio de Storyblok. Una vez dentro, haz click en "+" para añadir una nueva redirección. Entra en el nuevo bloque "Redirigir". Deberás introducir el Slug que quieras que sea redirigido y el destino de la redirección.

Una vez definido, tendrás que guardar y publicar los cambios. Para deshacer la redirección, simplemente borra el componente creado y vuelve a guardar y publicar. En ambos casos, deberás esperar entre 5-10 minutos para ver el cambio en producción. En el reproductor visual solo verás una página 404.

En un futuro se pretende hacer una mejora al componente que te permitirá hacer redirecciones a dominios externos.

redirect example

SEO son las siglas de Search Engine Optimisation. El término engloba una serie de herramientas y prácticas que aportan más visibilidad a una página con el fin de que tu público objetivo encuentre más facilmente el contenido que publicas.

En Storyblok, verás una pestaña en la sección de edición que se llama SEO. Te ofrece las funcionalidades que antes solían verse en la pestaña de "Metadata" y algunas adicionales.

Al abrir la pestaña, inmediatamente verás una caja de texto para insertar el título (title), otra para la descripción (description) y una Google preview. Estos son el título y la descripción que se verán cuando un usuario encuentre la publicación en un buscador como Google. El Google preview te mostrará como se plasma el resultado de la búsqueda.

¡Ojo! Si intentas publicar una página nueva, puede que te salte error si no has rellenado los campos de SEO.

También encontrarás un botón "No index". Una página está indexada cuando esta es reconocible por buscadores como Google. Esta guía está publicada pero no indexada y por lo tanto solo es accesible al insertar la URL en un navegador. Esto puede resultar práctico por ejemplo cuando quieres hacer información accesible a clientes pero solo cuando el/la Gestor/a Energético/a les pase el enlace por correo.

Al hacer click en Show/Hide advanced encontrarás más opciones para llevar el SEO de tu página al siguiente nivel. Dispones de OG (Open Graph) tags Title y Description. Definir estas variable mejorará el reconocimiento de la página en redes sociales del grupo Facebook (aunque otras plataformas/redes también se han habituado a consultar estas etiquetas). También tienes OG image donde añadir la miniatura que se muestre cuando se comparte el enlace. Te dejo un ejemplo a la derecha (abajo en móvil) de como se pinta la guía al compartir el enlace.

También puedes definir la apariencia de la preview de tu página si esta se comparte en Twitter (X) con los campos dedicados a ello.

sb share

Conceptos técnicos

 Octopus Energy está liderando una "revolución verde" a escala global. Por ello debemos hacer un esfuerzo por conseguir cierta uniformidad estética al diseñar cualquier contenido de cara al público. Esto ayuda al reconocimiento de marca. Desafortunadamente, no vale con pintar todo de rosa.

Coral nos ofrece un sistema de diseño al que nos debemos adherir. Aquí encontrarás un repositorio que define todos los componentes y sus características. Es la responsabilidad de los desarrolladores de Front End asegurarse de que los componentes que se utilizan se adhieran a estos cánones establecidos. 

Coral

Padding: Se refiere al espacio que existe entre el margen de un blok y el contenido que lleva dentro. Permiten que los contenidos dentro de un componente respiren y no se peguen a los bordes.

Margin: El margen es el espacio que hay entre los bordes que delinean el perímetro del componente y otros componentes a su alrededor.

Modifica estas variables dentro de Temporary Blok Container si encuentras que tu contenido se ve muy apiñado. Abajo te dejo una tabla con los tamaños preestablecidos de Coral y su respectivo espaciado en píxeles.

padding
marging example
EtiquetaEspaciado (en px)
None0
XXS4
XS8
SM12
MD24
LG32
XL40
XXL48

Este es un concepto clave a la hora de desarrollar contenidos multiplataforma. Contenidos responsive son todos aquellos los que se ajustan a distintos tipos de pantalla.

Para conseguir que nuestro contenido sea responsive, utilizamos estos 3 componentes:

  • Temp Blok Container

  • Temporary Grid

  • Temporary Stack

Más abajo encontrarás una serie de pautas explicando como utilizar estos componentes.

Te invito a explorar los bloks utilizados para crear esta guía. Verás que se han utilizados en muchas ocasiones con el propósitos de permitir que el contenido de esta página se ajuste a multiples dispositivos.

Para ajustar el tamaño de pantalla a tamaños desktop o mobile, dirígete a este sección en la esquina superior izquierda. Para visualizar el contenido en tamaño tablet, deberás visualizar la Story en modo mobile primero. Luego, arrastra el borde hacia afuera hasta llegar a un "Custom W" con un valor comprendido entre 585 y 776

Responsive menu
custome W
barra responsive

Puedes ajustar el tamaño de pantalla arrastrando esta barra de aquí

Repositorio de componentes

Un acordeón te permite esconder cualquier contenido y hacerlo visible tan solo cuando el usuario interacciona con el componente haciéndole clic. Se usa mucho en las páginas de FAQ. Puedes meter cualquier otro componente dentro de un accordion (Imágenes, cards, texto, etc)

Coral Banner se suele posicionar en la parte superior de páginas promocionales para llamar la atención del usuario sobre alguna oferta o característica de un producto. Admite exclusivamente texto y suele ocupar todo el ancho de la pantalla.

Coral Blockquote es un formato predeterminado para plasmar una cita. Se suele utilizar en posts de blogs. Incluye la posibilidad de añadir una foto de la persona en cuestión. No permite mucha flexibilidad con el formateo del texto.

Constantine Goodenergy

Opcionalmente tienes este componente con texto en negrita y cursiva que se llama Quote.

Constantine Goodenergy

El componente "Slider" se utiliza comunmente para mostrar una serie de reseñas al final de la página

Constantine Goodenergy

Pero puedes incorporar cualquier componente que quieras (otra cosa es que quede bien)

Si añades más de 3 componentes se activará la opción que ves abajo para deslizar y ver más contenido.

Krakentine

Aqui tienes la última reseña

Michael Jackson

Coral button se utiliza para redirigir al usuario a otra URL. Este componente permita mucha personalización del diseño (color, iconos, rellenos ...). Para ajustes de tamaño y posicionamiento recomendamos que se meta dentro de un container.

Coral Card
consti

Coral Card se suele utilizar a modo de tarjeta informativa en un blog post o una landing page. Permite cualquier componente dentro (un botón, un banner ...). Integrado dentro de este componente, existe la opción de añadir una imagen pero yo he encontrado que la imagen es mas fácil de editar y posicionar usando Temporary stack > Imagen + Rich Text

Coral Chip
Coral Chip
Coral Chip
Coral Chip
Coral Chip
Coral Chip
Puedes utilizar Coral Chip como componente decorativo , para darle un aviso al usuario o para utilizar como alternativa al Coral buton.
infoawardwhatsappnucleargbpcalendarbill

También dispones de 27 gifs de constantine y 60 iconos con Coral Constantine y Coral Icon. Coral Icon permite personalizar el color y el tamaño.

Coral review te permite mostrar reseñas individuales y añadir hasta 5 estrellas

Constantine Goodenergy

Coral TableCoral TableCoral Table
Coral TableCoral TableCoral Table

Coral Typography: Una caja de texto con los fuentes, tamaños y colores definidos en la biblioteca de Coral. Muy práctico a la hora de hacer cabeceras y subtítulos.

Legacy Rich Text: Este componente es otra caja de texto que se usa normalemente para escribir el cuerpo de un post o una landing. Tienes más opciones para editar el texto a tu gusto.

Coral Visibility: Más que ser un componente es un ajuste o funcionalidad. A la hora de diseñar una página, quizás prefieras que un componente sea visible para el usuario cuando lo está viendo desde su ordenador pero no desde su móvil; normalmente porque la imagen no se ve bien desde un móvil.

Si quieres que un componente no se vea si la página se abre desde un móvil, selecciona TRUE en la categoría hiddenBelowSM. Si de lo contrario quieres que se vea en versión móvil y no en escritorio, activa el botón de hidden y selecciona "false" en hiddenBelowSM. Te dejo instrucciones en las imágenes por si no te ha quedado claro.

Está card desaparecerá si se visualiza en tamaño de pantalla móviil ¡Haz la prueba!

Para invisibilizar en móvil

visibility settings

Para invisibilizar en desktop

visibility settings
Un componente maqueta

Feature Card Section

Un componente que se utiliza a menudo en landing pages. Se podría recrear con componentes individuales pero te proporciona una estructura y te organiza los contenidos automaticamente

bla

Faqs list

Este componente te permite insertar un listado de preguntas frecuentes que haya sido creado previamente en otra Story mediante el Content Type "Faqs container". Véase "Cómo crear mi primer Story" en la introducción para mas información. Por ejemplo, abajo he insertado la sección de preguntas frecuentes que te encontrarás en la landing de /solar-wallet

Step container y Step

1
Crea un Temp Blok Container

Para poder editar margen y posición

2
Introduce un Steps container

Aquí se meten los steps

3
Añade los steps que quieras dandole a + en "Children"

Asígnales un número, un título y un texto.

Componente maqueta

Wrap up section

Este componente es un container con la estructura que vas aquí. Te ofrece un título, subtítulo, un botón y una imagen que puedes ubicar a la izquierda o derecha mediante el "Image Location Right"

Typeform

Inserta un formulario dentro de la página sin tener que redirigir al usuario. Puedes ajustar la altura que ocupa el formulario.

Video Player

Permite insertar un video proporcionando un embed URL

Youtube player

Permite insertar un video de Youtube insertando su URL. También puedes elegir entre 3 tamaños de pantalla

Temporary Stack es uno de los contenedores de componentes. Stack en concreto se parece a Grid pero en este caso solo podrás elegir entre tener una fila de componentes o una columna de componentes.

En este caso, tenemos una fila de componentes cuando se visualiza el contenido desde la pantalla de un ordenador. Esta pasa a ser una columna de componentes si se visualiza en una pantalla más estrecha (mobile y tablet).

Desktop stack setts
stack mobile setting

Otros ajustes de Temporary Stack:

Gap: Define el espacio entre los elementos del stack

Align items: Controla la posición de los componentes del stack respecto el eje perpendicular a la dirección de los componentes. Truquillo! Este ajuste es muy práctico para definir el posicionamiento de un componente en la página. Por ejemplo si quieres poner una imagen en el centro de la página, metelo en un Temp Blok Stack y selecciona "Center" en Align items.

Direction: Determina si los componentes se ven en columna o en fila. Por defecto, la disposición es horizontal. En la mayoría de los casos se organizan los componentes en vertical para la versión mobile asi que ten en cuenta que lo tendrás que ajustar manualmente. Si se selecciona "Horizontal Reverse" o "Vertical Reverse", se invertirá el orden de los componentes

Justify content: Controla la distribución de los componentes sobre el eje paralelo

Flex Wrap: En el caso de que los componentes del stack (por cualquier motivo) ocupen todo el espacio de la fila y se vean muy apelotonados, podemos definir un flex wrap para que los contenidos se pasen a la fila o columna siguiente. Rara vez le darás uso y por defecto los componentes están en modo No Wrap.

Full Height: Al estar activado, los componentes del stack ocuparan todo el alto del contenedor.

Full Width: Al estar activado, los componentes del stack ocuparan todo el ancho del contenedor.

Se que no te has enterado de nada, no te preocupes. Aquí te dejo un enlace a una demo interactiva para que puedas ver como se comportan los componentes al alterar los ajustes del Stack.

Temporary Blok Grid

Temporary blok grid es uno de los responsive containers. Te permite hacer una distribución de contenidos en forma de cuadrícula.

El componente te deja elegir cuantas columnas (columns) y cuantas filas (rows) quieres. Esta cuadrícula es de 2 x 2 en desktop y de 1 x 4 en mobile. Utilizando Coral Grid Item también puedo hacer que un solo componente ocupe más de una casilla en la cuadrícula. Por ejemplo, este card, ocupa 2 casillas en la misma columna.

Esta card ocupa 1 de las 4 casillas

Y esta también ocupa 1 de las 4 casillas

Temp Blok Container

Temp Blok Cointainer es el padre de (casi) todos los bloks. Casi todo el contenido que hay en esta guía se ha introducido dentro de un Temp Blok Container. Esto se debe a que es un componente que te permitirá controlar el padding, el margen y la posición de los contenidos que lleve dentro. Por si mismo, este container no tiene apariencia.

Rara será la vez que quieras meter un componente a una Story sin ajustar su tamaño o posición y por ello se usa tanto.

También se utiliza para ajustar la disposición del contenido en distintos tamaños de pantalla o, dicho de otra manera , ajustar el responsive.

Ajustes de Temp Blok container

Dispones de 3 pestañas (Desktop, Tablet y Mobile) para ajustar la configuración en cada tipo de pantalla. A día de hoy, tendrás que definir los ajustes manualmente para cada dispositivo pero estamos trabajando para automatizar el proceso.

Min Width: En ocasiones, el ancho del contenido que va dentro de un Temp Blok Container acabará definiendo el ancho del Container en si. Por ejemplo, si estamos escribiendo dentro de una Card que a su vez está dentro de un Temp Blok Container, el ancho de la Card puede verse afectado por la longitud del texto. Si no queremos que esto nos pase deberemos definir un Min Width para que el tamaño no exceda el ancho establecido. ¡Ojo! Si notas que un componente no esta respondiendo a distintos tamaños de pantalla, puede ser porque has definido un Min Width y por lo tanto el ancho no se hará inferior a la medida proporcionada.

Max Width. Te permite definir el ancho del container. Puedes elegir entre 4 tamaños SM (pequeño), MD (mediano), LG (grande) y FULL WIDTH (ocupando todo el ancho)

Theme: Define el color de fondo del container. Tienes 4 opciones a elegir; Light (azul clarito), Mid (el azul que viene por defecto en las páginas de Octopus), Dark (azul oscuro que ves en el fondo de esta card) y none (sin fondo).

Margin: El perímetro de un container forma un cuadrilátero rectángulo (🤓 ). "Margin" configura el margen de los 4 lados del perímetro simultaneamente respecto el contenido exterior al container. Dispones de 7 niveles de margen de XXS hasta XXL. Si no quieres el mismo margen para los 4 lados tienes opciones más granuladas que te describo abajo. Truquillo!: Si defines un MAX WITH (el que quieras) y luego pones el Margin en Auto el componente se posicionará en el centro de la página. Algunos componentes son más revoltosos y este truquillo no les aplica; en este caso, usa el truquillo que he compartido en la sección sobre Temporary Stack

Margin X: Ajusta el margen del eje horizontal. Es decir, del lado izquierdo y derecho.

Margin Y: Ajusta el margen del eje vertical. Es decir del lado superior e inferior.

Margin Top: Ajusta el margen del lado superior

Margin Bottom: Ajusta el margen del lado inferior

Margin Left: Ajusta el margen del lado izquierdo

Margin Right: Ajusta el margen del lado derecho

Padding: Ajusta el margen entre los 4 lados del perímetro del container y el contenido que haya dentro. De nuevo, tienes opciones mas granuladas como "Margin". Ya te puedes imaginar como funcionan.