Antes de comenzar…

Aunque en la superficie editar tu web se vea fácil, te recomendamos que sólo edites lo necesario como textos y fotos sin tocar nada más! Es MUY fácil pasar a llevar algo o ponerse a jugar con ajustes avanzados y DESTRUIR el diseño de tu web… si te contara las veces que los clientes me llaman para arreglar sus webs luego de que se pusieron a editar todo a diestra y siniestra 🙄…

Parte 1: Estructura de tu web

Tu sitio web se compone de 4 elementos estructurales básicos: Secciones, Filas, Columnas y Módulos de contenido. Estos elementos unidos componen la estructura de tu web y se anidan uno dentro de otro, vale decir: Las secciones tienen filas dentro, las cuales tienen columnas dentro, las cuales tienen módulos de contenido dentro. Mira el dibujo a continuación para que hagas una idea

Dentro de las filas pueden haber de 1 a 6 columnas, y dentro pueden haber varios módulos de contenido…

…Y dentro de cada sección pueden haber varias filas hacia abajo…

… Y finalmente dentro de tu web pueden haber varias secciones hacia abajo…

En resumidas cuentas, una web estándar podría verse de esta manera en estructura (clic para agrandar foto):

Parte 2: Módulos de contenido

Luego de entender cómo se estructura tu web, vamos a lo que importa: Los módulos de contenido.

Los módulos de contenido son lo que finalmente se ve en el “frontis” de la web, existen varios tipos de módulo, pero los más usados son el módulo de texto y el módulo de imagen. Para editar estos módulos en nuestra web, primero tenemos que entrar al administrador de nuestro sitio:

Para entrar al administrador, escribe en tu navegador la dirección de tu web, y luego al final añade /admin

Verás una pantalla de inicio de sesión, donde vas a ingresar tu usuario y contraseña (si no lo tienes escríbenos!)

Cuando hagamos clic en el botón, esperamos a que la página carge el Editor Visual.

Basicamente nos muestra nuestra página web, pero nos da la posibilidad de editar cada módulo de contenido que exista

Como puedes ver en el video, cada elemento estructural de la página aparece cuando paso el mouse por sobre él: Secciones, Filas, Columnas y Módulos de contenido.

Cada elemento estructural, tiene una serie de íconos que representan acciones que puedo realizar:

El que nos sirve para editar contenido en nuestra web, es el botón de edición de propiedades, o sea el segundo botón en cada módulo

Si hacemos clic en él, se despliega un ‘pop up’ con el contenido listo para ser editado, otras propiedades como el color de fondo, links, etc. también se pueden cambiar aquí, está todo organizado en pestañas. A continuación un ejemplo del popup de edición de un módulo de texto:

Este es otro ejemplo, esta vez con un módulo de imagen:

Parte 3: Guardando mis cambios

Una vez hayas realizado los cambios que quieras, debes guardar la web, para eso, haz clic en el botón ‘Save’ abajo a la derecha.

Luego, haz clic en el botón ‘Exit Visual Builder‘ en la barra superior negra.

Ejemplo práctico

Seguramente te mareaste leyendo todo lo de arriba, pero en la práctica es mucho mas sencillo. En el video a continuación realizaré un cambio de texto e imagen en nuestra web desde el principio:

Eso es todo

Si tienes dudas o necesitas ayuda avanzada, escríbeme un correo a angelo@theuxstudio.cl