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.
Indice:
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:
Podemos:
En esta sección de configuración podrás:
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.
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.
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.
La opciones disponibles para las columnas son éstas:
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.
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.
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.
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.
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.
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).
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.
Cabecera:
Títulos:
Menus:
Fuentes (tipo de letra):
Pie:
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:
Elementos del tema:
Icono precarga:
Información:en el BackEnd aparencia -> opciones del tema, podrás realizar más modificaciones del tema.
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.
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:
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.
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.
Podrás añadir estos elementos extras en tu edición:
Con el constructor de página web Niviweb, podrás modificar el texto y las imágenes muy fácil.
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:
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.
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.
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).
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).
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.
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.
