Aquí encontrarás información sobre todos los componentes que puedes usar para construir tu contenido web en Connectif. Existen 5 tipos de contenidos web con los que trabaja este editor: popup, full screen, slide in, floating bar e inline. Tienes los detalles de cada uno de ellos haciendo clic sobre sus nombres y toda una sección para profundizar en su configuración desde este enlace.
Componentes de tipo Disposición
Te permite añadir filas con diferente número de columnas.
- 1 Columna.
- 2 Columnas.
- 3 Columnas.
- 4 Columnas.
Componentes Básicos
Añade a tu contenido web texto, imagen, botones y demás elementos.
Elemento de tipo Texto
-
Editor de texto: escribe y dale estilo al texto con el editor o usa el formato HTML.
-
Disposición: configura los márgenes internos de tu elemento de tipo texto.
-
Fondo: elige el fondo que tendrá el popup. Con el resto de contenidos web, esta opción no está disponible.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Imagen
-
URL de la imagen: pega la dirección URL de tu imagen o súbela a Connectif.
-
Texto: escribe el texto alternativo y el título de tu imagen.
-
Acciones: puedes indicar tu propia URL para el enlace, o utilizar un enlace predefinido con comportamiento especial como Cerrar este contenido o Pedir suscripción a Notificaciones Push. En el atributo "target", indica si quieres abrirlo en una ventana nueva o en la misma.
-
Disposición: elige si quieres que la imagen se alinee a la izquierda, a la derecha o al centro. También puedes editar los márgenes internos de la imagen.
-
Fondo: elige el color y la transparencia del fondo de la imagen.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Botón enlace
-
Texto del botón, colores y atributo: escribe y dale estilo al texto y al botón.
-
Acciones: puedes indicar tu propia URL para el enlace, o utilizar un enlace predefinido con comportamiento especial como Cerrar este contenido o Pedir suscripción a Notificaciones Push. En el atributo "target", indica si quieres abrirlo en una ventana nueva o en la misma.
-
Disposición: elige si quieres que el botón se alinee a la izquierda, a la derecha o al centro. También puedes editar los márgenes internos del componente y los márgenes internos del botón.
-
Fondo: elige el color y la transparencia del fondo, del botón, del borde y del texto.
-
Bordes y esquinas: configura el borde del botón y las esquinas.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Divisor
-
Disposición: configura los márgenes internos del divisor.
-
Colores: elige el color de la línea así como su grado de transparencia.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Espacio
-
Disposición: elige la distancia de separación que ocupa el componente..
-
Colores: elige el color de fondo así como su grado de transparencia.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Componentes Avanzados
Te permiten añadir a tu contenido web bloques de productos recomendados o tu propio código HTML.
Elemento de tipo Productos
Añade un bloque de productos dinámicos que podemos rellenar desde un workflow. Puedes editarlo a través de estas opciones:
-
Nombre y tipo: elige el nombre del componente y el tipo. Puede ser de tipo estático o carrusel (los productos rotarán de forma automática). Si eliges el tipo "Carrusel" podrás elegir el formato de las flechas de desplazamiento y el tiempo de rotación en segundos.
-
Plantilla: elige una de las 3 plantillas disponibles y personalízala. Puedes editar el código HTML de la plantilla para que se adapte totalmente al look & feel de tu web.
-
Estructura: elige la disposición de filas y columnas para dispositivos de escritorio y para dispositivos móviles.
-
Disposición: edita los márgenes internos del componente.
-
Fondo: elige el color de fondo así como su grado de transparencia.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo HTML
-
Editor: añade tu propio código HTML.
-
Disposición: configura los márgenes internos del componente.
-
Fondo: elige el color de fondo así como su grado de transparencia.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo WhatsApp
A través de este componente puedes compartir un contenido personalizado, como una URL, en la aplicación de mensajería.
Además, haciendo clic en Contactar, es posible enviar un mensaje a un número de WhatsApp de la empresa:
Elemento de tipo Vídeo
Añade un vídeo con distintas opciones de reproducción, su disposición en la web, el color de fondo y la personalización de su aspecto utilizando tu propio código HTML.
- Reproducir automáticamente: inicia el vídeo en el momento en que se muestra el contenido web.
- Silenciar sonido: lo reproducirá sin audio, independientemente de que se haya iniciado automáticamente o no.
- Repetir vídeo: vuelve a reproducirlo tras finalizar.
- Ocultar controles de reproducción: solo muestra la barra inferior con los controles y el avance del vídeo si el ratón se pasa por encima de él.
Elemento de tipo Cuenta atrás
Configura un conteo hasta la fecha y hora de tu elección y personaliza el formato con el que se mostrará. Tienes más detalles en este enlace.
- Fecha de finalización y formato: permiten indicar qué información se mostrará en el contenido y hasta qué fecha y hora lo hará.
- Dígitos: indica la fuente en la que estarán escritos, su tamaño y el color que mostrarán.
- Etiquetas: personaliza el texto que se mostrará junto a los dígitos.
- Fondo: elige el color de fondo así como su grado de transparencia.
- Disposición: configura los márgenes internos del componente.
- Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Componentes de tipo Formulario
Te permiten construir tu formulario personalizado para la captación de leads, encuestas, cuestionarios, etc.
A continuación, todos están definidos aquí. Tienes los detalles de cada uno bajo este listado:
- Texto: añade al contenido un campo de tipo texto. Acepta cualquier carácter alfanumérico.
-
Número: agrega al contenido un campo de tipo número. Acepta cualquier carácter numérico.
-
Fecha: permite seleccionar una fecha de un calendario desplegable.
-
Email: tiene como fin que el contacto introduzca un email cuando envíe el formulario. Este campo es imprescindible para que el contacto quede identificado en la plataforma.
-
Multilínea: permite escribir caracteres alfanuméricos en varias líneas. Es común su uso para que el contacto incluya un mensaje en consultas.
- Botón enviar: añade al contenido un botón de envío de formulario. Imprescindible para que Connectif recoja la información dada por el contacto en el formulario o encuesta.
-
Radio: crea un listado con opciones de entre las que se puede seleccionar una.
-
Selección: añade un desplegable con distintas opciones de entre las que se puede seleccionar una.
- Checkbox: crea un listado con opciones de entre las que se pueden seleccionar una o más.
Elemento de tipo Campo texto
-
Nombre: elige el nombre del campo.
-
Texto: la Etiqueta es el texto que aparecerá escrito sobre el campo; el texto Placeholder aparece en su interior y el Texto de ayuda es el que aparecerá al pasar el cursor por encima del campo.
-
Validaciones: elige si quieres que el campo sea obligatorio. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: elige la alineación del campo y de la etiqueta. Puedes configurar también los márgenes externos e internos de la etiqueta y el campo.
-
Fondo: elige el color y el grado de transparencia del fondo.
-
Bordes y esquinas: configura el borde del campo y las esquinas.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Número
-
Nombre: elige el nombre del campo.
-
Texto: la Etiqueta es el texto que aparecerá escrito sobre el campo; el texto Placeholder aparece en su interior y el Texto de ayuda es el que aparecerá al pasar el cursor por encima del campo.
-
Validaciones: elige si quieres que el campo sea obligatorio. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: puedes configurar también los márgenes externos e internos de la etiqueta y del campo. También puedes elegir la alineación del campo y de la etiqueta.
-
Fondo: elige el color y el grado de transparencia del fondo.
-
Bordes y esquinas: configura el borde del campo y las esquinas.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Fecha
-
Nombre: elige el nombre del campo.
-
Texto: la Etiqueta es el texto que aparecerá escrito sobre el campo; el texto Placeholder aparece en su interior y el Texto de ayuda es el que aparecerá al pasar el cursor por encima del campo. También puedes elegir el color de fondo del campo y el texto.
-
Validaciones: elige si quieres que el campo sea obligatorio. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: puedes configurar también los márgenes externos e internos de la etiqueta y del campo. También puedes elegir la alineación del campo y de la etiqueta.
-
Fondo: elige el color y el grado de transparencia del fondo.
-
Bordes y esquinas: configura el borde del campo y las esquinas.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Email
-
Nombre: elige el nombre del campo.
-
Texto: la Etiqueta es el texto que aparecerá escrito sobre el campo; el texto Placeholder aparece en su interior y el Texto de ayuda es el que aparecerá al pasar el cursor por encima del campo. También puedes elegir el color de fondo del campo y el texto.
-
Validaciones: elige si quieres que el campo sea obligatorio. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: puedes configurar los márgenes externos e internos de la etiqueta y del campo. También puedes elegir la alineación del campo y de la etiqueta.
-
Fondo: elige el color y el grado de transparencia del fondo.
-
Bordes y esquinas: configura el borde del campo y las esquinas.
- Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Multilínea
-
Nombre: elige el nombre del campo.
-
Líneas de texto: configura el número de líneas que tendrá el campo.
-
Texto: la Etiqueta es el texto que aparecerá escrito sobre el campo; el texto Placeholder aparece en su interior y el Texto de ayuda es el que aparecerá al pasar el cursor por encima del campo. También puedes elegir el color de fondo del campo y el texto.
-
Validaciones: elige si quieres que el campo sea obligatorio. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: puedes configurar los márgenes externos e internos de la etiqueta y del campo. También puedes elegir la alineación del campo y de la etiqueta.
-
Fondo: elige el color y el grado de transparencia del fondo.
-
Bordes y esquinas: configura el borde del campo y las esquinas.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Botón enviar
-
Nombre y valor: elige el nombre y el valor del botón que se enviará cuando el contacto envíe el formulario.
-
Texto: edita el texto que aparecerá en el botón.
-
Disposición: puedes ajustar el botón al ancho de la celda o no. También puedes elegir la alineación y los márgenes internos del botón y del componente.
-
Fondo: elige el color y el grado de transparencia del fondo.
-
Bordes y esquinas: configura el borde del botón y las esquinas.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Radio
-
Nombre: elige el nombre del componente.
-
Opciones: configura las opciones que quieres que aparezcan en tu formulario. Puedes seleccionar una para que aparezca marcada por defecto.
-
Texto: edita la etiqueta del campo. Se trata del texto que aparecerá sobre el listado.
-
Validaciones: elige si el contacto debe marcar al menos una opción de forma obligatoria. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: configura si el listado será vertical u horizontal y los márgenes internos del componente, de las opciones y de la etiqueta. Puedes configurar también la alineación de la etiqueta y de las opciones.
- Fondo: elige el color y el grado de transparencia del fondo.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Selección
-
Nombre: elige el nombre del campo.
-
Opciones: configura las opciones que quieres que aparezcan en tu formulario. Puedes seleccionar una para que aparezca marcada por defecto.
-
Texto: edita la etiqueta, el texto placeholder (texto de ejemplo que aparece dentro del campo como guía visual) y el texto de ayuda que aparecerá al poner el cursor encima del campo.
-
Colores: elige el color y el grado de transparencia del fondo, de la entrada de texto, del texto y del borde.
-
Validaciones: elige si quieres que el campo sea obligatorio. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: puedes configurar los márgenes externos e internos de la etiqueta y del campo. También puedes elegir la alineación del campo y de la etiqueta.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Elemento de tipo Checkbox
-
Nombre: elige el nombre del componente.
-
Opciones: configura las opciones que quieres que aparezcan en tu formulario. Puedes seleccionar una para que aparezca marcada por defecto.
-
Texto: edita la etiqueta del campo.
-
Colores: elige el color de fondo así como su grado de transparencia.
-
Validaciones: configura la validación del campo eligiendo el número mínimo de opciones que el contacto debe marcar. Si no se cumple la validación el formulario no se podrá enviar.
-
Disposición: configura los márgenes internos del componente, de las opciones y de la etiqueta. Puedes configurar también la alineación de la etiqueta y de las opciones.
-
Avanzados: añade clases a tu elemento para poder darle estilos con código CSS.
Plantillas personalizadas
En esta sección puedes crear, editar y gestionar las plantillas personalizadas de componentes que vayas creando en tus contenidos.
Para crear una plantilla haz clic en el botón Crear plantilla:
A continuación selecciona uno o varios componentes y pulsa Crear plantilla:
El bloque que contiene la imagen y el formulario está seleccionado para crear una plantilla con él. Al pulsar sobre el botón "Crear nuevo" de la esquina superior izquierda, el bloque podrá ser utilizado en cualquier otro contenido.
En la ventana de confirmación podrás cambiar el nombre a tu plantilla y ponerle etiquetas.
Ahora tendrás disponible esa plantilla para usarla en cualquier contenido web:
Para usar tu nueva plantilla personalizada, arrástrala a un contenido web.