Desde la solapa de la columna derecha se puede acceder a agregar y/o configurar diferentes elementos en la página web.
Ítems de esta guía.
Solapa de ítems
Aquí se pueden encontrar diferentes elementos para sumar a la plantilla de la página web. Para acceder a ellos, es necesario agregar una o varias secciones para poder estructurar la plantilla.
Ítem sección
Para poder crear diferentes secciones, se debe arrastrar el ítem “Sección” a la plantilla para luego poder modificarla o establecer parámetros acordes a las necesidades del usuario.
Luego de arrastrar la sección a la plantilla, en la columna de la derecha se desplegarán todas las herramientas disponibles para poder modificar o personalizar la plantilla:
- Geometría: Define los parámetros de Tamaño y Margen Inferior
- Borde: Define parámetros de Estilo, Lugar, Aplicar bordes y Esquinas
- Propiedades de fondo: define parámetros de Estilo, Color, Opacidad y Estirar los bordes de la página.
- Element Metadata: Define parámetros de Custom Class, Nombre de la sección, ID de elemento y Class de elemento.
Para poder manejar las herramientas de ítem y minimizarlas de manera de poder hacer foco en cada una de ellas, hacer click en el botón negro de la derecha para ampliar o minimizar.
¡IMPORTANTE!
A fin de que la plantilla de la página web pueda mostrar a los visitantes de la página todo el contenido que se desea presentar, es posible sumar tantas secciones como requiera el usuario.
Al momento de crear plantillas, a las que los contactos accederán desde una interfaz Móvil, es importante recordar que la misma incluya secciones mínimas e indispensables para presentar el contenido.
Luego de crear una o varias secciones de la planilla, se puede observar en la columna “Ítems”, ubicada a la derecha, los diferentes elementos que se pueden sumar a la plantilla:
Ítem Caja
Para poder poblar cada una de las secciones de la plantilla, arrastrar el ítem Caja a dicha sección para poder sumar otros ítems dentro de la misma.
Al agregar la Caja en la sección, se puede ampliar, achicar o moverla dentro de la sección arrastrándose o modificándose con los puntos activos en los vértices de la misma.
Incluso sobre la misma Caja se activarán opciones que permitan ordenar la Caja según su ubicación:
- Sobre el borde izquierdo de la sección
- Al centro de la sección
- Sobre el borde derecho de la sección
- Sobre el borde superior de la sección
- Centrarse en la sección
- Sobre el borde inferior de la sección
Desde el botón de “Configuración de la guía”, las opciones están activas. Pero al mover el ítem se activarán las líneas guías que alertan si el elemento queda fuera de los límites de la sección.
También desde las herramientas de la columna derecha de la plantilla, se pueden configurar diferentes parámetros para la Caja, tales como Geometría, Borde, Propiedad de fondo y Element Metadata.
En caso de que sea necesario no hacer visible el ítem que acabas de sumar a la sección de la plantilla, puedes hacer click en el botón “Visibilidad”, ubicado arriba, a la derecha de la columna de Ítem.
Ítem Texto
Dentro de una Caja se pueden arrastrar y sumar los diferentes ítems que figuran en la columna de la derecha.
Arrastrando el ítem Texto a Sección, se logra sumar un título, texto o etc. Luego de agregar el ítem y desde la columna derecha, se pueden agregar parámetros al ítem para poder modificar tipografía, colores e interlineado; entre otras cosas.
Modificar el texto
Para poder modificar un texto, utilizar las herramientas de la columna de la derecha para editar tamaño, color, interlineado y estilos.
Agregar una nueva tipografía
Para sumar una nueva tipografía a la plantilla, puede agregarse desde la herramienta “Fuente” de la columna derecha. Para sumar la nueva tipografía, al desplegar el listado de las tipografías ya vigentes se verán las opciones Agregar/Quitar fuentes. Luego hacer click para acceder al selector de nuevas fuentes.
Aquí se accede al menú de tipografías para poder seleccionarla
Una vez seleccionada la tipografía a sumar a la plantilla, hacer click en el botón “Instalar y Usar” y ya quedará agregada y lista para usar.
¡IMPORTANTE!
Si al margen de todas las tipografías que ofrece el Website Builder se necesita utilizar alguna en especial que no esté incluida, acceder al gestor de elementos Hojas de Estilo (Stylesheets) para agregarla. Para conocer cómo usar los elementos Stylesheets, acceder a la guía haciendo click aquí.
Modificar el código
Al agregar un texto dentro de una Caja de la plantilla, se puede modificar el código HTML del mismo.
Para esto, hacer doble click sobre el texto. Luego se activarán dos opciones asociadas al texto. Si se hace click en “</> Ver código”, se accede al editor HTML. Desde allí se puede sumar código al texto, o bien, modificar el código ya existente.
Luego de modificar el código de texto, hacer click en el botón Guardar (ubicado abajo a la derecha) para poder ver los cambios realizados en el texto.
Personalización de Ítem
De la misma manera, al hacer doble click en el texto a modificar, se puede utilizar el botón “Personalización”, para poder editar el texto con propiedades ya existentes en DataCrush.
Una vez que hayas hecho click en el texto que se desee personalizar, se desplegará debajo el selector de propiedades de DataCrush para elegir las que se quiera agregar:
Acción del texto
Luego de modificar el texto agregado a la plantilla, también se podrá determinar la acción que se desee efectuar al momento de hacer click en el texto en cuestión.
Para esto, acceder a la solapa “Acción”, ubicado en la columna de la derecha, para agregar en ella la dirección URL y el target; o lugar donde se pretenda que la nueva página se abra.
¡IMPORTANTE!
Es posible que algunos enlaces no funcionen en la vista previa, pero funcionarán en la página publicada.
Ítem Botón
Esta opción es de utilidad si se desea sumar algún botón o Call to Action para que los contactos hagan click, accedan a otra página, ingresen a una landing page o un formulario.
Para hacerlo, arrastrar el ítem “Botón” desde la columna derecha para sumarlo a la plantilla.
Una vez realizada esta acción, arrastrar el ítem a la Caja. Luego se pueden configurar los parámetros desde la columna derecha y desde allí se podrá modificarlo.
Contenido
En la opción “Contenido” se podrá agregar el texto para un botón y sumar la acción que se desea materializar luego de hacer click en el botón.
Las opciones dentro del selector de “Acción” permiten:
- Ir a una URL
- Llamar a un número (activando la aplicación de comunicación IP que el contacto posea).
- Enviar un e-mail (desde el correo del contacto).
- Iniciar WhatsApp (desde una nueva solapa del buscador).
- Mostrar un Pop Up (con un mensaje para el visitante).
De acuerdo a la opción elegida, debajo de la misma se desplegará un menú para acceder a la posibilidad de configurar parámetros para los campos que ejecuten la acción.
Estilo
Asimismo, se puede sumar al botón la opción de estilo. Por ejemplo: Geometría, Fuente, Apariencia o Element Metadata.
Ítem Imagen
También es posible arrastrar a la Caja el ítem “Imagen” para sumar una imagen propiamente dicha, GIF animado o un contenido específico desde la galería multimedia de DataCrush.
Si la imagen seleccionada desde la galería multimedia de DataCrush es más grande que el espacio al que se desea agregarla, se mostrará un cartel de alerta.
Desde esta misma señal de alerta, se podrá elegir el uso de la imagen seleccionada en tamaño completo, o bien, ajustar la misma para que se acomode de modo proporcional al espacio disponible.
‼️ IMPORTANTE: No esta permitido subir a la Galeria multimedia fotografías de desnudes, ni de pornografía o incluso que hagan apología de racismo, terrorismo o vulnere cualquier tipo de derechos de las personas o de propiedad intelectual.
Contenido
Desde la solapa “Contenido” de la columna derecha, se accede a la posibilidad de modificar los elementos de una imagen:
- Propiedades del Contenido (para reemplazar la imagen, Alt text y título).
- Acción del Click (para determinar el Call to Action de la imagen).
Estilo
Para sumar al botón el estilo que se desea mostrar, como por ejemplo Geometría, Fuente, Apariencia o Element Metadata.
Máscara de la imagen
Si en ocasiones se desea agregar imágenes a una plantilla determinada para presentar un contenido, puede suceder que al seleccionarla desde la galería de imágenes se requiera recortarla. A tener en cuenta:
1- No es necesario eliminar, editar o recortar la imagen con un editor externo. Tampoco se requiere de las herramientas de la galería multimedia de DataCrush.
2 - Simplemente hacer click en la imagen a trabajar. Luego, abajo y a la izquierda de la misma, se activará la opción “Máscara”.
Haciendo click en “Máscara”, los bordes se habilitarán para recortar la imagen al tamaño deseado. Asimismo, se podrá observar la activación de otras opciones: “Listo”, “Eliminar” y “Restaurar”.
Luego de recortar la imagen, clickeando en el botón “Listo”, la misma quedará lista en la plantilla. En tanto, clickeando en el botón “Eliminar” la imagen volverá a su tamaño original. Por último, haciendo click en “Restaurar”, se eliminarán los últimos cambios.
Agregar un GIF Animado
Para agregar un GIF a la plantilla, el proceso es el mismo que se realiza con las imágenes. Sólo difiere en que se debe acceder a la sección GIF de la Galería Multimedia.
¡IMPORTANTE!
En el caso de acceder a la Galería Multimedia, recordar que también es posible sumar a la plantilla otros elementos multimedia, tales como imágenes de la cuenta de Instagram de la empresa o los productos de la plataforma de E-Commerce asociada al portal de DataCrush.
Ítem video
Así como se puede sumar una imagen a la plantilla, también es posible subir un video de nuestro canal de YouTube o Vimeo.
Para esto basta con arrastrar el ítem “Video” a la Caja elegida. Al hacerlo, se abrirá una ventana para insertar el código de video.
En esta ventana es donde se debe especificar el código HTML del video elegido desde YouTube. Seleccionar la opción “Compartir” desde el video y luego elegir la opción “Insertar”.
Luego se abrirá esta ventana para copiar el código HTML de video:
Luego de copiar el código HTML, pegarlo en el editor de HTML de la plantilla y grabarlo para que el video se agregue correctamente a la plantilla.
Modificar el código
Así como es posible modificar una imagen y agregarla a la plantilla, también es posible modificar el código HTML de un video luego de sumarlo a la misma.
¿Cómo hacerlo? Con doble click en el botón “Ver código”, se accede al editor HTML. Una vez aquí, será posible sumar un código o modificar el ya existente.
Luego de modificar el código de texto, clickeando en el botón “Guardar”, ubicado abajo a la derecha, se observarán los cambios en el texto.
¡IMPORTANTE!
En el caso de elegir un video propio, será necesario subirlo primero a algún sitio o aplicación de videos (YouTube o Vimeo) para que al mismo le sea asignado un código, que luego será el utilizado en el Web Builder.
Ítem Custom HTML
Esta función es de utilidad cuando se requiera agregar contenido HTML, ya sea para un itinerario de Google Maps, incluir un fragmento de otra página, etc.
Para lograrlo, se deberá arrastrar el ítem “Custom HTML” a la plantilla o a una Sección. Al hacerlo, se abrirá el editor HTML del Webs Builder desde donde se podrá agregar el código necesario.
Esta acción permitirá sumar a la plantilla el cuadro de Custom HTML, para luego ordenarlo o moverlo a la posición en la que se desee ubicarlo.
Es importante destacar que desde el editor de la plantilla, el espacio asociado al Custom HTML sólo se muestra como un marcador de posición y no el contenido final o real. Este sólo estará visible al momento de publicar la plantilla.
Si luego de incluir el código en la plantilla es necesario modificarlo o volver a editarlo, alcanza con hacer doble click sobre el cuadro para su edición.
Ítem Formulario
Para sumar un formulario a una plantilla, sólo es necesario arrastrar el ítem “Formulario” a la misma para crearlo o editarlo.
Luego de agregar el ítem “Formulario” a la plantilla, aparecerá en la misma uno estándar con los campos Nombre, Apellido, Correo electrónico y un botón para modificarlo o personalizarlo.
Campos del Formulario
En la columna derecha se disponen las solapas necesarias para poder modificar los diferentes parámetros de un formulario.
En tanto, al ingresar a la solapa “Campos” se podrán editar aquellos ya activos en el formulario. Además esto permite agregar nuevos campos al mismo, utilizando propiedades existentes en el portal.
Para esto basta con hacer click en el botón +Agregar otro formulario. Luego, buscar la propiedad necesaria y seleccionarla.
Opciones del Formulario
Desde la solapa “Opciones” de la columna derecha, se tiene acceso a los siguientes parámetros:
- Usar el placeholder en lugar de la etiqueta
- Precargar campos con valores ya conocidos del contacto
- Visualizar el código Captcha
- Enviar notificaciones (*)
- Seleccionar campos de validación
- Acciones a desarrollar luego que un contacto completó un formulario
(*) Al seleccionar la opción “Enviar notificaciones”, se activará un campo para poder agregar los remitentes de los integrantes del equipo que recibirán las notificaciones cada vez que un contacto nuevo complete un formulario.
Estilos del Formulario
En esta opción se podrá elegir el estilo deseado para crear un formulario: Geometría, Fuente, Apariencia o Element Metadata.
Color de los campos con error
Al crear un formulario, también es posible elegir el color con el que se muestren los campos con error al momento de que un contacto complete el formulario.
De esta manera, si al crear el formulario eliges cambiar el fondo del mismo, es posible también elegir el contraste del color de los campos para que se diferencien los que tengan error al completarse.
¡IMPORTANTE!
A diferencia del editor de landing pages de DataCrush, al momento de crear formularios en el Web Builder, este sirve para recopilar datos de los contactos que ingresen a la página web de una determinada empresa.
Esta información, que se almacena en la base de contactos del portal, es plausible de segmentación en listas dinámicas. Incluso puede utilizarse para enviar datos a otros sistemas integrados en DataCrush, tales como un CRM o Salesforce.
Ítem Pop Up
Un pop-up es una ventana emergente que aparece dentro de una landing page, de modo repentino, cuando el contacto accede a ella. Para poder agregar un Pop Up, basta con arrastrar el ítem “Pop Up” de la columna de la derecha a la plantilla.
Luego de realizar esta acción, se activará en la plantilla el cuadro para diseñar el Pop Up. Posteriormente y desde la columna derecha, se pueden diseñar los parámetros Geometría, Fuente, Apariencia o Element Metadata.
Agregar elementos
Si luego de diseñar los atributos del Pop Up se requiere agregar contenido y elementos al mismo, hacer click en el botón “Cerrar” (ubicado abajo, a la izquierda de la columna) para acceder al resto de los ítems y sumarlos al Pop Up.
Luego de agregar el texto, botones o cualquier otro elemento que se necesite incluir en el Pop Up, haciendo click en el botón “Cerrar pop-up”, este desaparecerá de la plantilla de editor aunque se mantendrá activo para mostrarse al momento de publicación de la página.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.