DIVI fácil: Guía para modificar e construir a nosa web con DIVI
Divi é un complemento premium que nos permite crear e/ou modificar contido no noso sitio web dun xeito ultra sinxelo. Neste post explícanse as cousas máis básicas: Comezamos modificando un texto existente na nosa web… sen ter nin idea de case nada, e engadimos cousas novas sen complicarnos nunca demasiado a vida.
Se volves visitar esto que estás a ler dentro dun tempo verás contidos actualizados e ampliados, porque imos engadindo!!!…, a ver onde chegamos!!!
Previo: O que necesitas
Para traballar co que aquí explicamos, con este xeito sinxelo de editar e crear contido para o teu sitio web, tes que ter instalado DIVI…
1.- Modificar texto cun click, o máis doado
Os pasos son os seguintes:
– Accede ao noso sitio web como usuarios.
– Accede á páxina ou publicación que queremos modificar.
– Fai clic en “Activar Visual Builder”.
– Preme no texto que queremos cambiar para escribir a modificación.
– Fai clic en “Gardar” (debaixo hai un botón violeta que se mostra).
Listo!!!
Pódese ver neste mini-video de menos dun minuto:
2.- Comprender a xerarquía: Seccións,
filas e módulos
As seccións conteñen filas e as filas conteñen módulos.
Pódense cambiar as filas dunha sección a outra e os módulos dunha fila a outra. Só tes que premer co rato e arrastrar.
As diferentes visións
O círculo inferior morado amosa varias opcións, entre as que atopamos -á esquerda- as diferentes vistas: contorno, zoom, escritorio, tableta, teléfono móbil.
É útil porque hai que comprobar que o que facemos se adapta a cada ambiente, pero non é importante se facemos só cambios menores.
Como se identifican os distintos elementos?
Pola cor!!!
Seccións (regulares): Azul
As seccións normais son azuis, pero tamén hai seccións especiais (vermello) e de ancho total (roxo), coas que é fácil comezar.
Filas: Verde
Dentro das seccións, definen o número de columnas dentro de cada sección.
Módulos: Gris
Existen diferentes módulos de texto, imaxes, galerías de fotos, divisores, anuncios, chamadas á acción, etc.
Vista de esquema de secciones, filas y módulos.
Coñecer os iconos
Son intuitivos, e permítennos arrastrar elementos, modificalos, duplicar ou borrar.
Son similares para seccións, filas e módulos:
Facendo clic na cruz podemos, sen soltar o botón do rato, arrastrar o elemento a unha nova posición. Funciona do mesmo xeito para seccións, filas e módulos.
A roda dentada dá acceso á configuración de cada elemento. Ábrese unha xanela con tres pestanas (Contido, Deseño e Avanzado). Ten as súas particularidades para seccións, filas e para cada módulo. É a porta a temas máis avanzados que os que aquí comentamos.
As dúas follas permiten a duplicación. Funciona igual para seccións, filas e módulos. A continuación xérase o contido idéntico. É moi útil e rápido copiar un formato no que posteriormente modificamos o contido.
As columnas só están en filas. Intuitivo: é definir o número de columnas que queremos.
A frecha cara abaixo permítelle gardar elementos (seccións, filas ou módulos) nunha biblioteca para o seu uso posterior. Moi útil, pero non imos ampliar isto aquí.
O lixo… Tamén é bastante intuitivo,… para borrar.
E o X, bueno, tamén é doado: pechar. Non se usa na práctica, porque realmente se fai clic noutro lugar fai o mesmo.
Despois están os tres puntos, que aquí non se tratan porque é moito máis avanzado: Mostra un menú que permite accións moi diversas, como copiar/pegar, bloquear, ampliar estilos, xerar contido con IA, etc.
Unha vez que entendamos como funcionan as seccións, as filas e os módulos, podemos dar o paso de comezar a traballar con módulos!!!
3.- Traballando con módulos
Existen moitos módulos que nos permiten facer distintas cousas.
Todos os módulos teñen tres seccións en común:
- Contido: a pestana na que engadimos contido, e tamén características como a ligazón que poderiamos poñer ao módulo, o fondo (cor, degradados, imaxe…), e unha etiqueta visible en modo esquema para facilitar a organización do deseño.
- Maquetación: onde podemos definir aspectos da aparencia do módulo, como o aliñamento, o tamaño, o espazamento, os bordos, as sombras das caixas, os filtros, as transformacións de varios tipos e as animacións.
- Avanzado: para máis adiante… permite configurar áncoras e modificacións CSS, visibilidade en distintos dispositivos, efectos de posición e movemento 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
O mellor é comezar polos módulos máis habituais e sinxelos, que explicaremos a continuación: Texto e imaxe… Próximamente!!!