Desde aquí se accede a la creación de la página para editar los bloques de la misma, links, imágenes y cualquier otro contenido asociado.
Índice de esta guía.
Interfaz de Editor de contenido.
Previsualización de la plantilla
Barra de funciones rápidas de cada elemento
Elementos de Hojas de Estilo (Stylesheets)
Interfaz de Editor de contenido.
Dentro de la solapa “Contenido” se puede observar la interfaz de uso del editor de la landing page, desde donde se pueden configurar los diferentes módulos de contenido.
En esta interfaz se encuentran detalladas las siguientes secciones:
- Previsualización de la plantilla editable
- Barra de edición de cada elemento
- Botones de configuración JavaScript y Stylesheets
- Botones de visualización para escritorio y móvil
- Columna con las solapas de ítems, árbol y página
Previsualización de la plantilla
Desde la previsualización de la plantilla de la página web, se muestran todos los módulos y contenido. Desde aquí es posible no solo modificar cada uno de ellos, sino también arrastrarlos a otra sección de la página, editarlos, e incluso sumarle nuevos ítems a la misma.
Al hacer click en cada uno de los ítems de contenidos activos de la plantilla, sobre la columna de la derecha se habilitarán otras columnas que permitirán la edición/modificación de cada ítem.
Al acceder al editor de la plantilla, el asistente de Website Builder, desde el botón “Publicar”, enumerará los pasos necesarios para poder publicar la página.
Pasos necesarios a realizar para publicar:
- Título de la página
- Título de la página que acompaña al dominio web.
Incluso en este caso, hasta que no se completen estos pasos, el botón de “Guardar” se mantendrá desactivado y de color gris.
Barra de funciones rápidas de cada elemento
En la previsualización de la plantilla se observa la barra de funciones rápidas de cada elemento:
- Deshacer: para volver atrás el último cambio.
- Rehacer: para recuperar el último cambio efectuado.
- Subir: subir el elemento a la sección superior.
- Bajar: bajar el elemento en la plantilla.
- Enviar atrás: envía un elemento detrás de otro.
- Enviar adelante: envía un elemento adelante de otro.
- Copiar: copiar el elemento para utilizarlo en otra sección de la plantilla.
- Pegar: pegar un elemento copiado previamente en otra sección de la plantilla.
- Duplicar: Duplicar un elemento seleccionado para ser usado en otra sección de la plantilla.
- Eliminar: Elimina definitivamente un elemento de la plantilla.
En cualquiera de los casos descritos, al momento de seleccionar una función y luego de hacer click, la función se desactiva (en color gris) con el fin de que sólo estén activas aquellas funciones útiles para el ítem seleccionado.
Configuración de la guía
Desde el botón de configuración de la guía, puedes activar las siguientes funciones:
Advertencia de fuera del límite: el asistente del Website Builder avisa cuando un elemento está fuera de los límites.
Límites de altura: el asistente del Website Builder avisa sobre los límites de alto de un elemento.
Límites de ancho: el asistente del Website Builder avisa sobre los límites de ancho de un elemento.
Elementos JavaScript
Desde el gestor de elementos de JavaScript se pueden agregar a la plantilla -en edición o creación- los diferentes códigos necesarios para ejecutar en la plantilla.
En esta sección, también se pueden incluir todos los códigos de seguimiento de cualquier servicio externo (Ejemplo: Google Tag Manager, Google Analytics, píxel de seguimiento de Facebook, etc).
Para poder asociar un código JavaScript, basta con copiar el código de instalador de la aplicación. Ejemplo:
Posteriormente y desde el Website Builder, abrir el menú de elementos JavaScript y seleccionar la opción +Agregar nuevo javascript. Luego se abrirá una ventana en la que se debe sumar el código:
- Agregar el nombre de código elegido
- Seleccionar el sitio donde debe incluirse el código (dentro de la etiqueta Head, después de la etiqueta Body o antes de cerrar la etiqueta Body, según sea necesario)
- Escribir o pegar el código JavaSript en el editor
- Grabar el código desde el botón de abajo a la derecha
¡IMPORTANTE!
Al margen de poder sumar diferentes códigos o funciones JavaScript, DataCrush también tiene la posibilidad de poder sumar elementos nativos que pueden ser incorporados en la página, arrastrándose y soltándolos, desde la barra de elementos de la derecha, como veremos más adelante.
También se incluye la posibilidad de agregar funciones personalizadas en la página, como por ejemplo un Chatbot o un Widget de calendario. Estos últimos pueden ser agregados a la página usando JavaScript y CSS personalizados.
Elementos de Hojas de Estilo (Stylesheets)
Función disponible para aplicar estilos CSS a algún bloque de texto, o bien, a algún elemento agregado a la plantilla.
Por ejemplo: agregar sombra a un elemento dentro de la hoja de estilos.
- Seleccionar o marcar el elemento elegido para asociar los estilos y marcarlo.
- Identificar el ID del elemento, ubicándolo al pie de la barra de la derecha, en el bloque de Element Metadata.
- Accediendo al botón Stylesheets, hacer click en la opción +Agregar nueva hoja de estilos.
- Agregar el nombre (para este ejemplo Sombra) y el código dentro del editor. Luego, seleccionar la opción Grabar hoja de estilos.
- En el cuadro de Custom Class del Element Metadata, agregar el nombre de la hoja de estilos escrito exactamente igual al recientemente creado.
- Por último, de seleccionar el texto al que le estabas agregando la sombra.
¡IMPORTANTE!
Al margen de poder sumar diferentes estilos a cada elemento de la plantilla, también es posible aplicar estilos CSS a elementos en general, ya que todos los elementos tienen un atributo llamado Clase General.
Esta Clase General puede ser utilizada para aplicar estilos CSS a todos los elementos de un mismo tipo (Ej: botones, links, imágenes, etc.)
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.