DIVI fácil: Guía para modificar y construir nuestra web con DIVI

Divi es un plugin premium que nos permite crear y/o modificar contenidos en nuestra página web de una forma ultra-sencilla. En este post se explica lo más básico: Empezamos modificando un texto ya existente en nuestra web… sin tener ni idea de casi nada, y vamos añadiendo cosas nuevas sin complicarnos nunca la vida demasiado.

Si revisitas este que lees dentro de un tiempo verás contenidos actualizados y ampliados, porque vamos añadiendo!!!…, a ver a dónde llegamos!!!

Previo: Lo que necesitas

Para trabajar con lo que aquí explicamos, con esta forma tan fácil de editar y crear contenidos para tu web, tienes que tener instalado DIVI…

Si no lo tienes habla conmigo!!!

1.- Modificar texto con un click, lo más simple

Los pasos son los siguientes:

– Acceder como usuarios a nuestra web.

– Acceder a la página o post que queremos modificar.

– Hacer click en “Habilitar Constructor Visual”.

– Hacer click en el texto que queremos cambiar para escribir la modificación.

– Hacer click en “Guardar” (Hay un botón violeta abajo que se despliega).

Listo!!!

Se puede ver en este mini-video de menos de un minuto:

2.- Comprender la jerarquía: Secciones,
filas y módulos

Las secciones contienen filas, y las filas contienen módulos.
Se pueden cambiar las filas de una sección a otra, y se pueden cambiar los módulos, de una fila a otra. Sólo hay que pinchar con el ratón y arrastrar.

Las distintas vistas

El círculo púrpura inferior despliega varias opciones, entre las que encontramos -a la izquierda- las distintas vistas: esquema, zoom, escritorio, tablet, teléfono móvil.

Es útil porque necesitamos comprobar que lo que hacemos se ajusta a cada entorno, pero no es importante si sólo hacemos cambios menores.

Como se identifican los distintos elementos?

Por el color!!!

Secciones (regulares): Azul

Las secciones regulares son azules, pero existen también secciones especiales (rojo) y de ancho completo (púrpura), con las que no hay que complicarse para empezar.

Filas: Verde

Dentro de las secciones, definen el número de columnas dentro de cada sección.

Módulos: Gris

Existen distintos módulos para texto, imágenes, galerías de fotos, separadores, anuncios, llamadas a la acción, etc.

Vista de esquema de secciones, filas y módulos.

Conocer los iconos

Son intuitivos, y nos permiten arrastrar elementos, modificarlos, duplicar o borrar.

Son similares para secciones, filas y módulos:

Al pinchar sobre la cruz podemos, sin soltar el botón del ratón, arrastrar el elemento a una nueva posición. Funciona de la misma manera para secciones, filas y módulos.

La rueda dentada da acceso a la configuración de cada elemento. Se abre una ventana con tres pestañas (Contenido, diseño y avanzado). Tiene sus particularidades para las secciones, las filas, y para cada módulo. Es la puerta a temas más avanzados que lo que tratamos aquí.

Las dos hojas permiten duplicar. Funciona igual para secciones, filas y módulos. Se genera un contenido idéntico a continuación. Es muy útil y rápido copiar un formato sobre el que después modificamos el contenido.

Las columnas solo están en las filas. Intuitivo: Es para definir el número de columnas que queremos.

La flecha para abajo permite guardar elementos (secciones, filas, o módulos) en una biblioteca para usarlos después. Muy útil, pero no nos extendemos aquí en esto.

La papelera… Es también bastante intuitivo,… para borrar.

Y la X, pues también es fácil: para cerrar. No se usa en la práctica, porque realmente si pulsas en cualquier otro lado haces lo mismo.

Después están los tres puntos, que no toca aquí porque es bastante más avanzado: Despliega un menú que permite acciones muy diversas, como copiar/pegar, bloquear, extender estilos, generar contenidos con AI, etc.

Una vez que comprendemos cómo funcionan las secciones, filas y módulos ya podemos dar el paso de empezr a trabajar con módulos!!!

3.- Trabajando con módulos

Existen muchos módulos que nos permiten hacer distintas cosas.

Todos los módulos tienen en común tres apartados:

  • Contenido: la pestaña en la que añadimos contenido, y también características como el enlace que le podríamos poner al módulo, el fondo (color, degradados, imagen…), y una etiqueta que es visible en el modo esquema para facilitarnos la organización del diseño.
  • Diseño:donde podemos definir aspectos de la apariencia del módulo, como la alineación, tamaño, espaciados, bordes, sombras de caja, filtros, transformaciones de varios tipos, y animaciones.
  • Avanzado: para más adelante… permite establecer anclas y modificaciones  de css, visibilidad en distintos dispositivos, efectos de posición y movimiento de varios tipos, etc.
Pestaña de Contenido en el Módulo Texto
Pestaña de Diseño en el Módulo Imagen
Pestaña de Avanzado en el Módulo Imagen

Lo mejor es empezar por los módulos más habituales y sencillos, que vamos a explicar a continuación: Texto e imagen.

Outras Entradas de Interese

La utilidad de un ERP para la gestión de nuestro proyecto

La utilidad de un ERP para la gestión de nuestro proyecto

¿Necesitas un programa para llevar la facturación de tu proyecto? No hace falta gastar miles de euros -ni cientos- para poder tener un programa de gestión a medida, ni mucho menos. Hay soluciones de varios tipos y, para pymes o autónomos, podemos adaptar soluciones ya...

leer más
Pack Emprendedores

Pack Emprendedores

Si estás iniciando un proyecto comercial o quieres mejorar el que ya tienes, esto puede ser de tu interés. Se trata de una solución que integra todo lo que una PYME o autónomo necesita para, en la práctica, echar a andar con un proyecto: visibilidad y un sistema de...

leer más

Información e Contacto:

Tel. 675 89 01 63

info@xan-martinez.com

Pol. de Bergondo. 15165 A Coruña

En toda Galicia:

A Coruña, Lugo, Ourense e Pontevedra.

Outras zonas, consultar.

Solicitar un Presuposto
Podes escribir unhas palabras sobre o que necesitas!!

Non se comparten datos con terceiros: Únicamente se empregan cos fines comerciais relacionados (creación de ficha de cliente e o envío de información comercial). Máis información na páxina de Política de Privacidade.