Primeros pasos : interfaz editor niviweb


Cómo funciona la interfaz editor Niviweb

En este tutorial explicaremos la interfaz (Frond End)de nuestro creador de página web.

Frontend es la parte de un sitio web que interactúa con los usuarios, por eso decimos que está del lado del cliente. 
Backend es la parte que el usuario o visitante no ve, permite organizar y gestionar todo el contenido, diseño y opciones avanzadas del sitio web.

Si deseas un resumen visual, puedes ver nuestro video.

Ver video ahora


La siguiente imagen explica las secciones numeradas que veremos en este tutorial:

Explicación interfaz constructor de página web niviweb

 

1. Botones de secciones

 

Los botones de opciones de fila o sección aparecen cuando pasamos el ratón por encima de la fila. Nos permite editar y configurar toda la sección, como por ejemplo cambiar el fondo, bordes, sombras, separación, espacios, añadir separadores, añadir animaciones...

Opciones editar fila


  • Icono papelera: permite eliminar la fila seleccionada.
  • Icono rueda engranaje: muestra las opciones de configuración de la fila o sección. Aquí se podrá modificar el fondo, bordes, separaciones, añadir sombras y animaciones. Más abajo detallamos las opciones disponibles.
  • Icono copiar: permite copiar una sección completa, con las opciones de configuración que tiene.
  • Icono paneles: este icono permite mover los elementos dentro la columna, sólo permite dentro de las filas donde se ha activado esta opción (la filas activas aparecerán el mismo icono en la parte izquierda de la fila y las columnas que se pueden mover aparecerá un icono con una mano). Si desea mover una columna a otra fila distinta deberá de activar esta opción en las filas donde desea realizar los movimientos.
  • Icono código: abre un editor de código html en modo ventana, para permitir editar, añadir o eliminar código html en la fila. Cada fila tiene su propio código separado.
  • Icono flechas direccionales: este icono permite el movimiento entre fila, permitiendo subir o bajar la fila. Debes de mantener el icono pulsado y realizar el movimiento para ordenar la sección.


Opciones de configuración sección o fila ( icono engranaje ):

Cuando pulsamos el icono de engranaje se abre la sección de herramientas ubicada en la parte izquierda de la página y se activa última pestaña, permitiendo configurar las opciones disponibles para aplicar a la fila.

Ésta está compuesta por otras cuatro pestañas:

Opciones de configuración de sección o fila en la creación de página web


Pestaña 1:

Podemos:

  • Añadir nombres de clases css
  • Añadirle un identificador (Nombre de la fila)
  • Alinear el texto
  • Cambiar el color de texto
  • Añadirle estilos prediseñados
  • Opciones de ocultar o mostrar en distintos dispositivos
  • Añadir separadores svg tanto para la parte superior como inferior
  • Con el botón de resetear podrás eliminar toda la configuración que tiene dicha fila.

Opciones configurar fila clases sepador

 


Pestaña 2:

En esta sección de configuración podrás:

  • Cambiar el color de fondo de la fila
  • Añadir una imagen de fondo con degradado, este último se puede activar o desactivar. 
  • Y configurar aspectos de la imagen.

Cambiando fondo en sección de una fila

 


Pestaña 3:

Aquí podrás cambiar todos los parámetros relacionados con los: 

  • márgenes 
  • separaciones 
  • bordes 
  • posiciones 
  • sombras 
  • la altura máxima que puede tener una fila

Editando margenes border de un elemento o fila con el editor de páginas web

 


Pestaña 4:

En esta sección de configuración de la fila permite añadir una animación a la fila. hay varios tipos de animaciones disponibles, seleccione la que más te guste (podrás visualizar la animación en la parte inferior, sólo cambiando la animación en el desplegable y se anima sólo).

También podrás aplicar un retardo de aparición seleccionando el tiempo en el segundo desplegable.

Y si deseas podrás indicar que la animación sea un bucle infinito.

añadir animación a un elemento fila o sección

 

Información: para aplicar los cambios de configuración es necesario darle al botón de "Aplicar", situado en la parte inferior del configurador de fila o sección html.

2. Botones de columnas


Las opciones de botones de columnas, aparecen cuando se sitúa el ratón por encima de una columna. Con estas opciones podrás realizar cambios muy similares a las opciones de filas o sección, que explicamos en el punto 1.


Editar elemento columna en página web


La opciones disponibles para las columnas son éstas:

  • Icono grid (columnas):si pulsamos en este icono se ampliará y se mostrará las opciones del ancho de la columna. Podrás seleccionar el tamaño que deseas asignarle como 1/1 (Columna completa) 1/2 (Columna a la mitad de ancho) 1/3 (Columna a 1 tercio del ancho) ....
  • Icono engranaje: permite configurar todas las opciones de fondo, border, sombra, animaciones. Las mismas opciones que hay para la secciones o fila del punto 1.
  • Icono duplicar: permite realizar un duplicado de la columna.
  • Icono papelera: permite eliminar la columna.
  • Icono mano: este icono aparece cuando la fila esté activa la opción de mover columna. Te permitirá mover la columna a otra posición (Sólo podrás moverlas entre las filas que tienen activada la opción de mover).


 

3. Panel de herramientas


Este panel se encuentra oculto, sólo se ve un icono en la parte izquierda superior. (icono: ajuste parametros) 

Para mostrar y ocultar el panel se consigue pulsando en este icono.



Añadir elemento en página web


Este es el panel principal de todo el editor de contenido en vivo de nuestro sistema de arrastrar y soltar.

Se encuentra separado de las opciones en pestañas y podrás encontrar los bloques prediseñados, módulos, opciones de la página web y configuración de los parámetros del tema principal.


 

Bloques

La opción de bloques se encuentra en la primera pestaña. 

Ésta se encuentra con un listado por categorías. Selecciona una categoría haciendo click y se mostrará otro listado con los bloques pertenecientes a la categoría seleccionada. Estos bloques se previsualizan mediante una imagen. 

Seleccione el bloque que más te interesa y arrástralo a la parte de la página web donde deseas colocarlo. Automáticamente se cargará en el lugar donde lo hayas insertado. 

Finalmente se mostrarán las opciones de columnas y filas que explicamos anteriormente para que puedas editarlo y sustituir por tu contenido.


Creador de página web añadir sección fila por bloques


Los bloques html se alimentan de un repositorio ubicado en nuestro servidor, por lo que cada vez que entres podrás ver nuevos bloques diseñados por nosotros.


Módulos

La opción de módulos se encuentra en la segunda pestaña. 

Aquí se mostrará un listado con los módulos instalados tu página Niviweb que se pueden editar en vivo

Para añadir un módulo a nuestra página es necesario arrastrarlo a la parte donde deseas colocarlo, luego aparecerán las opciones de la fila con módulo, siendo éstas distintas a las opciones de fila y secciones normales. En esta opción no se tiene la posibilidad de editar el código y de mover las columnas, ya que esas opciones no se permiten en los códigos internos de los módulos.

Si pulsamos en el icono de configuración de la fila aparecerán las opciones de los parámetros del módulo, éstos varían según el tipo de módulo.

Si deseas colocar este módulo en una columna que ya diseñaste, puedes copiar el código "Short code", situado en la parte superior de las opciones y pegarlo en la columna de texto, donde desees que aparezca este módulo.  


Añadir módulo en página web arrastrar y soltar editor


Estos módulos son totalmente independientes, cada vez que arrastras uno a la página se crea un duplicado del modulo principal y podrás configurarlo independientemente. 


Información:en la opción de módulos del BackEnd podrás visualizar los módulos clonados y saber dónde se están usando (en la página y el hook).


Opciones del tema principal

La opción de configuración del tema principal se encuentra en la tercera pestaña. 

Aquí encontrarás la configuración por secciones desplegables. Ten en cuenta que es del tema principal, por lo que los cambios de estilos se aplicarán a todas las páginas creadas.


Como editar colores fuentes del tema principal


Cabecera:

  • Opciones de configuración para activar / desactivar la cabecera y parte superior de la página.
  • Estilo de la página superior (cambia el diseño del header de las páginas).
  • Colores y color de fondo.

Títulos:

  • Cambiar la fuente de h1, h2,h3..
  • Cambiar colores de h1,h2.h3...
  • Cambiar tamaño de letra de los títulos.

Menus:

  • Elegir los menus creados desde el panel backend (hay dos opciones por si elige el diseño de dos menús con el logo en el centro).
  • Cambiar colores de textos y enlaces.
  • Mostrar botones de login, carrito, idiomas y buscador. Ésto depende de la configuración del sistema Niviweb y del la opción que tengas contratada, ejemplo si no tiene activada la tienda no se mostrará aunque lo active visualmente.
  • Podrás añadir código html personalizado justo al final del menu.

Fuentes (tipo de letra):

  • Seleccionar la fuente principal de las páginas
  • Cambiar color del texto general
  • Cambiar color de enlaces
  • Cambiar tamaño de la fuente
  • Cuerpo de la página:
  • Añadir fondo de imagen de la página.
  • Activar botón de volver hacia arriba (Temporalmente desactivado).

Pie:

  • Activar / desactivar parte inferior de las páginas
  • Cambiar color de fondo
  • Color de texto
  • Color de enlaces
  • Cambiar estilo (Seleccionar cuantas columnas deseas mostrar). Cada columna es un hooks diferente enumerado.

Css custom:

Si necesitas crear clases css y aplicarlas en tus páginas, puedes utilizar esta sección para personalizar más tu página web.

Colores:

  • Modificar los colores de fondo por defecto del tema
  • Colores de texto por defecto, que se mostrarán en el editor de texto cuando se selecciona.

Elementos del tema:

  • Cambiar los colores de botones por defecto boostrap.

Icono precarga:

  • Activar / desactivar icono de precarga de las páginas web.
  • Seleccionar imagen a mostrar en la precarga.


Información:en el BackEnd aparencia -> opciones del tema, podrás realizar más modificaciones del tema.


Opciones generales de la página

La opción de configuración de la página que se está editando se encuentra en la cuarta pestaña con un icono de una hoja. 

Aquí encontrarás la configuración de título, descripción, keyword, cambiar la imagen, asignar categorías a la página, acceder a la revisiones guardadas, limpiar la caché de la página que se está editando, campos personalizados, y si estás en la modalidad de tienda online puedes modificar los datos del producto que se está editando.


creador de páginas web editar titulo categoria imagen destacada


SEO:

En esta opción podrás cambiar los metatítulos, descripción y palabras claves que deseas asignar a la página que se está editando. 

Puedes añadir emojis en todos los campos, para hacer más llamativo en los resultados de búsqueda en los buscadores. Estos emojis pueden variar dependiendo del buscador.

General:

  • Aquí podrás cambiar el título de la página
  • Cambiar la dirección url
  • Asignar categoría de página
  • Activar / desactivar la opción de tema independiente. (Para la creación de landingpage y tener un estilo distinto al tema principal, esta opción sólo sale al contratar la opción extra de marketing).
  • Asignar una imagen destacada a la página
  • Restringir acceso (proteger con contraseña, visible sólo usuarios registrados, visible sólo para miembros o suscriptores).
  • Destacar la página
  • Destacado página en portada. (Permite agrupar páginas para luego usarlo en filtros de módulos).

Revisiones:

En esta sección podrás ver las copias guardadas de la página web actual. Si deseas volver a un punto anterior puedes seleccionarlo y aplicar el diseño que se hizo en esa fecha y hora. 

El sistema cuenta con un autoguardado automático (si está activa en el sistema de configuración), que se realiza cada 10 minutos.

Limpiar caché:

Si pulsamos en esta opción se elimina sólo la caché de la página que se está editando (no del sitio web). El botón aparece si está activado en el sistema de configuración.

Campos personalizados:

En este apartado podrás modificar los datos de los campos personalizados asignados a esta página. Aparece el botón si la página pertenece a algún grupo de campos personalizados.

Media:

En esta opción podrás asignarle imágenes para galería y usarlo en módulos.

Producto:

Si la página que se está editando es un producto, se mostrará la opciones para configurarlo.



4. Añadir elementos dentro de una columna


Cada vez que pasamos el ratón por encima de una columna, nos aparece un icono con el símbolo de más (+). Si pulsamos sobre este icono se mostrará un submenu donde con los Widget para agregar encabezados, textos, botones...

Con esta opción podrás añadir más elementos dentro de las columnas y moverlos a tu gusto.


Incluir añadir elemento nuevo a una columna con editor niviweb

 

Podrás añadir estos elementos extras en tu edición:

  • Encabezados h1.
  • Bloque de textos.
  • Botones
  • Iconos
  • Imágenes
  • Galería
  • Elementos SVG
  • Barrar de progresos
  • Carrousel boostrap
  • Acordeones desplegables
  • Iconos de redes sociales
  • Incluir la imagen destacada de la página
  • Caja de icono o imágenes con texto (con distintos diseños)
  • Contadores
  • Listas

5. Editar textos e imágenes


Con el constructor de página web Niviweb, podrás modificar el texto y las imágenes muy fácil.


Editar textos

Sólo tienes que hacer un click para empezar a escribir o editar el texto.

Además si selecciona un texto con el ratón, aparecerán las opciones para cambiar el texto con distinto color del tema, cambiarlo tipo de título, alinear el texto...

Opciones del editor de texto en vivo:


  • Poner el texto en negrita: B.
  • Cambiar tipo de titulo (H1, H2, H3, H4)
  • Cambiar la alineación (L a la izquierda, C centrado o R a la derecha).
  • Cambiar el color a uno predefinido del tema.
  • Crear enlace a una página #.
  • Crear lista . .
  • Crear tablas TBL.
  • Poner el párrafo como comentario "(Añade un borde en la parte izquierda)


editor de texto online creando página web online

 

Puedes editar todos los texto del sitio web que contenga la propiedad de data-edit="1"

Si crea un código personalizado desde el editor de código asegúrate de añadir este parámetro, para indicar al editor que aparezcan las opciones.

 

Editar imagen

Para editar una imagen deberás de hacer doble click sobre la imagen y se mostrará en el panel de herramientas las opciones disponibles para modificarla.


Editar imagen o fotografía en una página web

 

Cuando se muestra las opciones podrás cambiar la imagen en la opción de SRC, al pulsarlo se abrirá una ventana con las carpetas de imágenes

Como podrás observar puedes organizar tus imágenes en carpetas, es muy útil a la hora de trabajar con muchas imágenes. También puedes subir directamente las imágenes que desees.

Es importante que cuando añada una imagen a tu página web, indique el texto del atributo alt, el cual es un texto descriptivo de la imagen que usa los buscadores (No deje nunca este campo sin rellenar, es importante para el posicionamientos SEO).

Además podrás indicarle una dirección de una foto, url o fichero, para mostrarlo en modal o abrirlo en otra ventana del navegador, dependiendo de como lo configures.

Otra opción que tiene Niviweb en las imágenes, es poder retrasar la carga de la imagen, mejorando el rendimiento de carga de todo el sitio web (además es mejor para optimizar la web a nivel de SEO).



6. Opciones de capa (div)


Las opciones de configuración no sólo funciona con las filas y columnas, también funciona con capas independiente, sólo con las que tenga el atributo data-div-edit="1" .

 

En la siguiente imagen, se muestra como una capa tiene la opciones para configurar. Estas opciones aparece cuando se pasa el ratón por encima de la capa.

Podrás eliminar, duplicar o configurar, este último abre el panel de herramienta con las opciones (iguales que las de filas y columnas).

Cambiar de estilo en capa o div - editor web online

 

7. Hooks


Los hooks de niviweb son zonas fijas que hay en la página

Se puede identificar y localizar en la web viendo un recuadro con el nombre. En estos hooks, se puede añadir bloques de texto, html o módulos y no son desde la parte frond end (Se puede configurar las opciones de los módulos que se encuentra dentro).

Para modificar o añadir contenido en un hook, deberemos de ir al panel interno (BackEnd), apartado aparencia -> Hooks.

Aparece un listado con las zonas (Hooks) disponibles. Pulsando sobre el botón editar se cargará los items (Bloques pequeños que hay dentro del hook seleccionado). Dentro podrás añadir, modificar o eliminar cada bloque, pulsando el botón naranja con puntos.

Los items de hooks se puede configurar independientemente, pudiendo poner condiciones para que se muestre o no, según la categoría, página...

Si desea añadir un módulo, solo deberá de añadir el shot code del modulo.


Hooks configuración - editor web online

 

8. Guardar página editada


Es importante que se guarden los cambios realizados, para ello sólo deberá de pulsar en el botón de disquetera, situado en la parte superior derecha. Se guardará la página en el idioma actual, estos cambio no afecta a los demás idiomas.

Si tiene activado el autoguardado se guardará automáticamente, pero sólo como un borrador, no se aplica a la página que se publica al usuario final.


Nota: si no ves los cambios en la página publicada, comprueba que la cache de la página web actual este limpia. Recuerda esta ubicado en panel herramienta -> opciones de página > limpiar cache.


Guardar cambios realizado en la página - editor web online

 

Bienvenido a nuestro blog

Ultimas entradas:

Cambiar imágenes
2020-08-20
Primeros pasos : interfaz editor niviweb
2020-08-19
1
Bienvenido ¿en que podemos ayudarte?