El Editor de bloques permite personalizar la descripción de la página de Bienvenida utilizando el sistema de bloques de contenido, que consiste en descripciones textuales que pueden acompañarse de imágenes, ya sean fotos o vídeos. De esta forma, con el Editor de bloques el administrador podrá enriquecer las descripciones con imágenes de forma fácil y sin utilizar HTML.

A continuación, presentamos el ejemplo de una página de Bienvenida que ha sido diseñada utilizando el Editor de bloques. 

Éstos son los contenidos de este tutorial:

1. Características del Editor de bloques

2. Ejemplos visuales

3. Opciones de configuración

4. Configuración avanzada con CSS

1. Características del Editor de bloques

El Editor de bloques te permite añadir tantos bloques de contenido como necesites y configurarlos individualmente. Cada bloque podrá contener texto, imágenes o GIFs, y se podrán combinar entre sí para construir una página de bienvenida mucho más visual, flexible y profesional.

El Editor de bloques presenta las siguientes características:

• Permite crear bloques descriptivos de texto y alinearlos de diferentes maneras.
• Permite insertar en cada bloque una imagen o GIFs. Podrás colocar el archivo media en diferentes posiciones.
• Las imágenes podrán incluir un URL clicable. Además, podrás añadir un pie de imagen.
• Podrás personalizar la proporción de los bloques para presentar el contenido en columnas.
• Para promociones versión Marca Blanca, se podrá añadir una clase CSS al bloque para poder modificarlos con estilos avanzados.

En el siguiente vídeo te explicamos cómo funciona el Editor de bloques en detalle:

2. Ejemplos visuales

A continuación, presentamos algunos ejemplos de promociones que han utilizado el Editor de bloques para personalizar la página de Bienvenida de la promoción:

Ejemplo 1

En esta página de Bienvenida se han añadido 9 bloques de contenido con las siguientes características:

• 3 bloques de texto + imagen, configurados en una proporción de ancho del contenedor del 33% para así presentar los tres bloques en 3 columnas.
• 2 bloques de textos, configurados en una proporción del ancho del contenedor del 100% para presentar cada bloque ocupando todo el ancho.
• 3 bloques de texto + imagen, configurados en una proporción de ancho del contenedor del 33% para así presentar los tres bloques en 3 columnas.
• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100% con un alineamiento centrado.

Ejemplo 2

En esta página de Bienvenida se han añadido 7 bloques de contenido con las siguientes características:

• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100%.
• 1 bloque de imagen, configurado en una proporción del ancho del contenedor al 100%.
• 2 bloques de texto, configurados en una proporción del ancho del contenedor al 100%.
• 1 bloque de imagen, configurado en una proporción del ancho del contenedor al 50% y alineada a la derecha.
• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100%, al que se le ha aplicado la clase "banner", para así destacarlo visualmente.
• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100%.

Ejemplo 3

En esta página de Bienvenida se han añadido 7 bloques de contenido con las siguientes características:

• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100%, al que se le ha aplicado un <h2>.
• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100%, al que se le ha aplicado un <h3>.
• 4 bloques de imagen, configurados en una proporción de ancho del contenedor del 25% para así presentar los tres bloques en 4 columnas.
• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100%.

Ejemplo 4

En esta página de Bienvenida se han añadido 6 bloques de contenido con las siguientes características:

• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100% con un alineamiento a la izquierda.
• 3 bloques de texto + imagen, configurados en una proporción de ancho del contenedor del 33% para así presentar los tres bloques en 3 columnas. Además se ha aplicado la clase force_columns para forzar las columnas en los dispositivos móviles.
• 1 bloque de texto, configurado en una proporción del ancho del contenedor al 100%. Aplicado estilos en los textos para diferenciarlos. Además se ha aplicado una clase CSS para que el fondo del bloque sea de color verde.
• 1 bloque de imagen con hipervínculo.

3. Opciones de configuración

A continuación explicamos los pasos a seguir para utilizar el Editor de bloques para personalizar la página de Bienvenida de la promoción.

1. Accede al Editor > Paginas > Bienvenida y haz clic en “Utilizar el Editor de bloques”:

2. A continuación, verás que el sistema ha creado el texto de la descripción como un bloque de texto. A partir de aquí, haz clic en el botón “Añadir bloque” para añadir nuevos bloques.

Cada bloque añadido en la página de bienvenida incluye diferentes opciones de configuración. 

A continuación, explicamos las opciones de configuración disponibles:

• Texto. Podrás añadir cualquier tipo de texto. Además podrás utilizar los estilos de los bloques de textos configurados en la promoción.
• Alineamiento de texto. Podrás alinear los textos a la derecha, izquierda, centrado o justificado.

• Media. Podrás añadir una imagen o GIF. El tamaño máximo será de 1000px de ancho.
• URL de la imagen. Podrás incluir un link en la imagen. De esta manera la imagen será clicable.
• Pie de Foto. Podrás añadir una pie de imagen.
• Posición de la imagen. Podrás configurar la posición de la imagen respecto al texto. Las opciones disponibles son arriba, abajo, derecha e izquierda. En todas las opciones, excepto la opción de colocar la imagen arriba, se podrá modificar la proporción de la imagen.

• Ancho del bloque (Columnas). Podrás ajustar el ancho de cada bloque para que se puedan alinear en columnas. Esto te permite configurar los bloques de la siguiente manera:
  • 100% (1 columna). Una única columna con el 100% del ancho.
  • 50% (2 columnas). Dos columnas que ocupan el 50% del ancho cada una.
  • 33% (3 columnas). Tres columnas que ocupan el 33% del ancho cada una.
  • 25% (4 columnas). Cuatro columnas que ocupan el 25% del ancho cada una.

Por defecto, si hay espacio suficiente, el sistema permite mostrar los bloques de contenido en un máximo de 4 columnas. En cambio, en dispositivos estrechos (móviles, widgets) la visualización se fuerza automáticamente a 1 columna.

Si la promoción se ha creado en versión Marca Blanca, es posible modificar este comportamiento y mantener la configuración de columnas definida por el administrador. Para ello, deberá aplicarse una clase CSS específica, tal y como se explica en este punto del tutorial.

Nota: En pantallas con un ancho inferior a 300px no es posible modificar este comportamiento; en estos casos, el sistema fuerza siempre la visualización de los bloques en 1 columna.

4. Configuración avanzada con CSS

Si la promoción ha sido creada en la versión Marca Blanca, se podrán aplicar clases CSS personalizadas a cada uno de los bloques creados para así conseguir un resultado visual más personalizado y más acorde con el look&feel de la marca.

A través de esta opción podrás configurar por ejemplo:

• Forzar el diseño de las columnas también en versión móvil.
• Cambiar colores del texto, colores de fondo o estilos específicos de un bloque.
• Crear una clase CSS para aplicarla en varios bloques.

A continuación, indicamos algunas clases CSS que podrás utilizar para personalizar los bloques de contenido.

Forzar el diseño de las columnas a la versión móvil 

Para mantener la configuración de columnas definida por el administrador también en la versión móvil, solamente se deberá aplicar la clase force_columns, que se deberá aplicar en todos los bloques de contenido que se han configurado para visualizarse en columnas.

Ejemplo: En la siguiente promoción, se ha forzado que en móvil también se visualicen los bloques de contenido a 3 columnas:

Para ello, se ha aplicaso la clase force_columns a todos los bloques de contenido que nos interesa mostrar en columnas:

Cómo crear un banner o pastilla a todo color

Además, para destacar los bloques de contenido en la página de Bienvenida, el administrador puede utiizar la clase banner y, mediante código CSS, podrá personalizar las propiedades de este banner, tales como:

• Modificar el color de H1
• Modificar el color de p
• Modificar el color de fondo
• Modificar padding

Ejemplo: En la siguiente promoción se ha configurado el bloque "¿Cómo participar?" con un fondo verde para destacar su contenido:

Para conseguir este resultado, se deben seguir dos pasos:

• Paso 1: Aplicar la clase banner a este bloque de contenido:

• Paso 2: Modificar los estilos CSS para personalizar el diseño del banner. Para ello, deberemos acceder al apartado Editor > Diseño > Avanzado, y en el campo "Estilos CSS" podremos utilizar el siguiente código CSS ajustándolo a nuestras necesidades:

.banner {
    --h1-color:0, 0, 0, 1;
    --p-color:0, 0, 0, 1;
    --block-bg-color:255, 255, 255, 1;
    --block-padding:1em;
    --block-padding-top:2em;
}

A continuación, facilitamos algunas variables CSS que se pueden utilizar para personalizar la apariencia de la clase banner:

Color de fondo

Esta variable CSS permite definir el color de fondo del bloque.

--block-bg-color

El valor por defecto: 255, 255, 255, 0 (blanco transparente).

 

Padding

Estas variables CSS permiten definir el espaciado interno (padding) de los bloques en la página de Bienvenida. Puedes usarlas para ajustar el espacio entre el contenido del bloque y sus bordes.

--block-padding

Define un valor de padding general que se aplicará a los cuatro lados del bloque. El valor por defecto es 0.

--block-padding-top

Controla el padding superior del bloque. El valor por defecto es --block-padding.

--block-padding-right

Controla el padding derecho del bloque. El valor por defecto es --block-padding.

--block-padding-left

Controla el padding izquierdo del bloque. El valor por defecto es --block-padding.

--block-padding-bottom

Controla el padding inferior del bloque. El valor por defecto es --block-padding.

 

Text color

Estas variables CSS permiten personalizar el color del texto dentro de los bloques. Puedes usarlas para aplicar colores específicos a diferentes tipos de texto o cambiar el color de todo el contenido textual de forma global.

--p-color

Define el color de los párrafos (<p>).

--h1-color

Define el color de los encabezados de nivel 1 (<h1>).

--h2-color

Define el color de los encabezados de nivel 2 (<h2>).

--h3-color

Define el color de los encabezados de nivel 3 (<h3>).

--all-text-color

Aplica el mismo color a todo el texto del bloque, independientemente de su etiqueta HTML.
Nota: Si defines este color, éste sobrescribirá los colores definidos en las variables individuales de párrafos o encabezados.