El editor de contenido web te permite diseñar, de forma responsive y muy visual, los contenidos personalizados que se mostrarán a tus contactos desde tu cuenta, a través de workflows creados para dicho fin, sin necesidad de programación extra en tu web.
En Connectif existen 5 tipos de contenidos web: popup, full screen, slide in, floating bar e inline. Si quieres conocer las particularidades de cada uno de ellos, haz clic sobre sus nombres para visitar los artículos donde se detallan en profundidad.
¿Cómo acceder?
Puedes acceder al editor de contenido web a través de dos rutas:
1. Desde “Contenido > Contenido Web”. Haz clic en Crear nuevo contenido web para generar un nuevo contenido, o en Más y selecciona Editar para modificar un contenido web existente.
Al crear un nuevo contenido web, selecciona el tipo y asígnale un nombre para distinguirlo.
2. Desde el nodo "Enviar contenido web" de un workflow, haciendo clic en (Editar configuración de nodo). Haz clic en Crear nuevo contenido o en Editar para modificar un contenido web existente.
Interfaz
El editor de contenido web está compuesto por tres bloques:
1. Previsualización y guardado: para guardar o descartar los cambios realizados. También podrás previsualizar el resultado final del contenido que será insertado en tu eCommerce, o consultar su versión en HTML.
2. Panel de diseño: para construir visualmente el contenido web haciendo uso de las estructuras y componentes del panel 3 (herramientas).
3. Herramientas: para configurar todas las propiedades del contenido y hacer uso de los componentes de maquetación. Este panel puede ser contraído o expandido haciendo clic en (Abrir herramientas) o (Cerrar herramientas).
Funcionamiento
El editor de contenido web se basa en el método de diseño ‘drag and drop’ (arrastrar y soltar), por lo que permite diseñar los contenidos de forma rápida, sencilla y muy visual.
1. Editar estilo general
En el panel de Herramientas (3), haz clic en la pestaña General para editar los parámetros del aspecto general del contenido. También puedes acceder haciendo clic en Propiedades generales del panel de diseño (2).
Si bien existen una serie de parámetros comunes, la configuración de las propiedades generales puede presentar distintos atributos personalizables dependiendo del tipo de contenido web que estés diseñando.
Recuerda que dispones más arriba de los enlaces a la documentación de cada uno de ellos.
Los parámetros comunes a definir son:
-
Nombre: nombre que quieres dar al contenido para identificarlo en tu cuenta de Connectif.
- Etiquetas: cataloga tu contenido web y localízalo de forma rápida haciendo clic en Introduce etiquetas y añadiendo palabras clave que te ayuden a identificarlo.
Las etiquetas son muy útiles tanto para encontrar tus workflows más rápido como para agruparlos según sus características y finalidad. Te recomendamos añadir etiquetas con:
— Nombre de la campaña.
— Fecha en que será lanzada.
— Público objetivo.
— Objetivo de la campaña (venta, fidelización, captación…).
Por ejemplo, utilizando las etiquetas "Rebajas Primavera", "Clientes que han comprado" y "Captación".
- Bordes: color, grosor y estilo del borde de tu contenido.
- Fondo del contenido: color y los efectos de imagen para la capa del fondo de tu contenido.
- Sombra: color y efectos de sombreado de la estructura que mostrará tu contenido.
- Z Index: valor numérico que indica el orden de superposición de capas.
- Responsive: umbral del diseño responsivo (hasta qué anchura de pantalla se entenderá que es un dispositivo móvil).
2. Construir un contenido web por bloques
En el panel de Herramientas (3), haz clic en la pestaña Componentes para elaborar tu composición arrastrando y soltando estructuras o elementos en el panel de diseño (2).
Estructura
Distribución que adoptará un bloque de elementos dentro del conjunto del diseño del contenido web. Puede presentarse en una o varias columnas, con proporciones idénticas o dispares.
La estructura se debe definir en primer lugar. En caso de no incluirla, por defecto se utilizará la estructura de una columna.
Una vez creado un bloque de elementos, posiciona el ratón encima del mismo y haz clic en (Editar bloque) para modificarlo, (Duplicar bloque) para crear otro idéntico o (Borrar bloque) para eliminarlo.
Elementos
A diferencia de las propiedades generales, los elementos son comunes y pueden ser usados para diseñar todos los tipos de contenido web.
Los elementos son las piezas mínimas de contenido funcional con las que construir el diseño de tu contenido web, arrastrándolos a los bloques creados en el panel de diseño (2). Al igual que con la estructura, puedes editarlos posicionando el ratón encima de un elemento y haciendo clic en el botón (Editar elemento) o sobre el contenido en sí. También puedes duplicarlos haciendo clic en (Duplicar elemento), o eliminarlo haciendo clic en (Borrar elemento).
Los elementos disponibles son:
-
"Texto"
Redacta tu escrito aplicándole formato enriquecido (negrita, cursiva, enlaces…), insertando variables dinámicas o modificando su disposición en el bloque insertado.
Las variables dinámicas permiten personalizar el texto en base a los datos recopilados en el perfil de cada contacto. Para saber más sobre variables y mejorar los resultados de tu contenido web, te recomendamos revisar el artículo Qué son las variables y cómo utilizarlas.
El botón (Convertir a HTML) de este y futuros elementos, convierte el elemento de texto a formato HTML de forma irreversible. Para hacer uso de esta función, necesitarás conocimientos básicos de HTML & CSS. En caso de no contar con un experto en la materia, te recomendamos no convertirlo.
-
"Imagen"
Si tu imagen ya está publicada en Internet, pega la URL de la imagen para incluirla en el contenido web. Si prefieres subirla desde tu dispositivo, haz clic en Subir imagen o en ( ), y selecciona el archivo en el explorador de la ventana emergente. Al cargarse, se completará la URL de la imagen de forma automática.
Como configuraciones adicionales, es posible asignar un enlace a la imagen, ajustar su disposición respecto al bloque que la contiene o cambiar el color del fondo. De forma opcional, puedes establecer el Texto alternativo (que aparecerá en caso de no cargar la imagen) y el Atributo ‘title’ de la imagen (el texto que se muestra al posicionar el ratón sobre la imagen, también conocido como atributo alt).
-
"Botón enlace"
Define el texto que aparecerá en tu botón, el atributo ‘title’ y el enlace (podrá ser uno específico o predefinido para ejecutar una acción concreta). Para configurar su aspecto visual, selecciona los colores de texto y fondo, personaliza los bordes y esquinas y ajusta su disposición dentro del bloque.
-
"Divisor"
Configura tanto el color como la disposición de la línea vertical para separar contenidos de forma visual.
-
"Espacio"
Define la distancia de espacio que deseas insertar entre dos bloques. Por defecto este bloque es transparente, pero puedes establecer un color si es necesario para tu diseño.
-
"Productos"
Inserta un carrusel de productos que será completado con los artículos de interés para el contacto. Puedes seleccionar una de las tres plantillas por defecto (Producto básico, Producto con marca o Producto con precio) o personalizar en el editor de texto su aspecto final. También puedes definir su estructura de filas y columnas según el dispositivo.
Para que el carrusel de productos muestre los artículos en que interesen al contacto, es imprescindible el uso de un nodo “Obtener productos” antes del nodo “Enviar Contenido web”. Puedes aprender más en los artículos Mostrar productos personalizados en un contenido y Nodo “Obtener productos”.
-
"HTML"
Incrusta un código HTML personalizado y ajusta su disposición.
Para insertar este elemento, necesitarás de un experto en maquetación y diseño CSS y HTML para asegurar la correcta visualización del contenido.
- "WhatsApp"
Añade un botón para que los usuarios contacten contigo o compartan la página que están visitando por WhatsApp. Define el texto que aparecerá en tu botón, el atributo ‘title’, el tipo de acción y el mensaje por defecto que se enviará. Para configurar su aspecto visual, selecciona los colores de texto y fondo, personaliza los bordes y esquinas y ajusta su disposición dentro del bloque.
- "Vídeo"
Pega la URL del vídeo de YouTube o Vimeo que quieras mostrar en tu contenido y establece sus opciones de reproducción. Si es válida, se mostrará la carátula del vídeo en el panel de diseño (2).
Como configuración visual, puedes ajustar la disposición del vídeo o cambiar el color del fondo.
- "Cuenta atrás"
Configura el contador de cuenta atrás estableciendo una fecha de finalización y su formato. Personaliza la fuente, el tamaño y el color de los dígitos y las etiquetas, cuyo texto puedes modificar. Selecciona un color de fondo y ajusta la disposición del contador.
Elementos de formulario
Los elementos de formulario recogen información del contacto desde tu contenido web, lo que permite captar leads, cuestionarios, encuestas, etc.
Si vas a crear un formulario en tu contenido web, te recomendamos la lectura del artículo Formularios en contenidos web.
Los elementos de formulario disponibles según el tipo de datos que recogen son:
- "Texto": para una o varias palabras, todos los caracteres son válidos.
- "Número": para cualquier valor numérico con o sin decimales.
- "Fecha": para una fecha en formato día, mes y año, compatible a nivel interno con ISO 8601.
- "Email": para una dirección de correo electrónico válida.
- "Multilínea": para varias líneas de texto.
- "Radio": para mostrar un listado con una serie de opciones entre las que sólo se puede seleccionar una.
- "Selección": para mostrar un desplegable con una serie de opciones entre las que sólo se puede seleccionar una.
- "Checkbox": para mostrar un listado con una serie de opciones entre las que se puede seleccionar una o más.
- "Botón Enviar": Permite al contacto enviar el formulario y recoger en Connectif los datos introducidos en el mismo.
Cuando el contacto hace clic en este botón, se genera un evento "Formulario enviado" al que se puede reaccionar en un workflow por medio del nodo "Al enviar formulario".
Si quieres aprender más sobre los tipos de datos que puedes recoger de los contactos, haz clic aquí.
3. Crear y utilizar componentes personalizados existentes
En Componentes personalizados del bloque de herramientas (3), haz clic en Crear nuevo para guardar el diseño que hayas elaborado como plantilla. Selecciona el bloque o los bloques que formaran parte de la plantilla y, en la barra de previsualización y guardado (1), haz clic en Crear nuevo.
En la ventana emergente asigna un nombre y las etiquetas al componente personalizado y haz clic en Guardar.
Los componentes personalizados pueden ser utilizados en cualquier tipo de contenido web como plantilla, independientemente del contenido original desde el que fueron creados.
También puedes diseñar rápidamente tus contenidos web desde el panel de Herramientas (3), arrastrando al área de diseño (2) los componentes personalizados creados por ti que se encuentran en la sección Componentes personalizados de la pestaña Componentes.
4. Revisar las variables
Si no has utilizado variables en tu contenido web, puedes obviar este apartado.
Las variables son un elemento que permite personalizar tus contenidos. Examina las variables creadas y cuántas veces se repiten en los elementos de texto desde el panel de Herramientas (3), en la pestaña Variables. Para editar su formato, haz clic en .
Aprende más sobre formato de las variables haciendo clic aquí.
5. Previsualizar resultado final y guardar
En el panel de previsualización y guardado (1) podrás ver el resultado final de tu contenido web.
Todos los contenidos creados son responsive, por lo que puedes hacer clic en Previsualizar para revisar el resultado final. Haz clic en (Vista en escritorio) para ver el resultado en desktop, o haz clic en (Vista en móvil) para ver el resultado en dispositivos móviles.
Una vez el resultado del diseño sea el adecuado, haz clic en Guardar para guardar los cambios del contenido web.
Ten en cuenta que los estilos aplicados en tu eCommerce pueden afectar a como se muestra el contenido web. Revisa la configuración que se hereda de las reglas CSS globales si el comportamiento visual de los elementos de Connectif en tu web difiere de la que se obtiene en el Editor de contenido.
¡Enhorabuena!
Has llegado al final de la lección.
¿Te han quedado dudas sin resolver?
Recuerda que tienes a tu disposición a nuestros especialistas en Connectif. Para contactar con ellos, tan solo tendrás que abrir ticket a Soporte haciendo clic en el botón azul de “Ayuda” de tu dashboard.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
-
Crear bloque de productos personalizados en un contenido web, para mostrar a tus clientes productos de su interés.
- Mostrar productos personalizados en un contenido, para mostrar productos personalizados a cada contacto por medio de un contenido dinámico y un workflow.
- Mostrar porcentaje de rebaja sólo cuando exista descuento en un contenido web, para destacar los precios rebajados y su porcentaje de descuento en un contenido.
-
Recomendador en home, para mostrar en la home a tus contactos los productos que visitaron.