La verdad, siempre he sido poco creyente de los generadores automáticos de código, pero tengo que reconocer que reducen mucho el tiempo de ejecución de un proyecto.
Y si, me he llevado una sorpresa agradable con Divi, por los siguientes motivos:
- Es rápido y sencillo de utilizar.
- Te permite reutilizar la configuración que has guardado.
- Te ayuda a construir páginas con una buena apariencia.
Todo lo que construimos con Divi está compuesto de secciones, filas y módulos.
El constructor de Divi, te permite reemplazar el editor de página de WordPress por otro mas avanzado con el que puedes crear plantillas arrastrando y soltando estos elementos.
Suena sencillo pero antes de ponerse a lanzar módulos como un loco, es bueno aprender lo fundamental para empezar con buen pie, y por eso te invito a seguir leyendo.
Secciones
Son los contenedores de mayor nivel, y nos sirven para diferenciar áreas específicas de nuestra página.
Dentro de cada sección pueden ir una o varias filas, y dentro de cada fila uno o varios módulos.
Hay tres tipos de secciones:
- Normal
- De Ancho completo
- Especial
La diferencia entre las dos primeras, es que las secciones de ancho completo sólo pueden contener módulos específicos para secciones de ancho completo.
Las secciones especiales son diferentes a las otras dos, porque nos permite definir áreas abarcan toda la altura de la sección, y así podemos crear por ejemplo el efecto de barra lateral.
Filas
Las filas van dentro de las secciones. Puedes poner tantas filas como quieras dentro de una sección. Puedes elegir entre varios tipos diferentes de filas.
Debes elegir un tipo de fila en función del diseño y de los módulos que vas a incluir dentro de la fila.
Una vez has decidido la estructura de columnas que mejor encaja con lo que necesitas, puedes empezar a colocar los módulos dentro de la estructura.
No hay limite en el número de módulos que puedes poner dentro de una columna.
Módulos
Los módulos son los elementos visuales que dan vistosidad a tu página web. Cualquier módulo Divi encaja en cualquier ancho de columna.
Todos los módulos se adaptan para que se puedan ver en dispositivos móviles sin problemas.
Todos estos elementos son como un juego de piezas de construcción, y los puedes mover de una lado a otro.
Vamos con algo sencillo
Es muy recomendable antes de empezar hacer un diseño sobre como quieres estructurar tu página.
No tiene que ser perfecto, vale con que tu lo entiendas, y te ahorrará mucho tiempo, yo por ejemplo me he hecho este para el proyecto en el que estoy trabajando:
Al final del post puedes ver como va quedando el resultado.
Una vez vas componiendo cada una de las secciones, las marcas de alguna manera para saber que está terminada, y también te sirve para saber el progreso que estás haciendo.
Utilizando el constructor de Divi
Lo primero es activar el constructor de Divi en la página que acabas de crear. Esto lo haremos pulsando en el botón «Usar el constructor Divi».
Una vez activado podemos empezar a añadir secciones, filas y módulos. Pero antes de eso es interesante saber con que opciones contamos, porque nos puede ahorrar mucho trabajo.
Opciones del Constructor Divi
Guardar en biblioteca. En cualquier momento puedes guardar una plantilla que estas construyendo. Esto está genial porque puedes utilizar el mismo diseño en otra página o incluso en otra Web que construyas con Divi.
Cargar de biblioteca. Puedes cargar cualquier plantilla guardada con anterioridad. Pero lo mas interesante para mi, son las plantillas que te trae Divi por defecto, son un punto de partida estupendo que puedes modificar a tu gusto.
Vaciar diseño. Y si en cualquier momento quieres empezar de zero, también tienes esta opción.
Opciones de la Sección
Cada vez que añades una sección tienes que definir sus propiedades. Pulsando en el icono de menu de cada sección accedes a las propiedades en cualquier momento.
Imagen de fondo. Si seleccionas una imagen se mostrará como fondo de la sección. Para quitar la imagen vale con eliminar la URL del campo de configuración.
La imagen de fondo de la sección se puede expandir todo el ancho del navegador, así que hay que la imagen que escojas debe tener al menos 1080 pixels de ancho.
Color de fondo transparente. Activando esta opción se mostrará el color de fondo de la página web o la imagen de fondo si la hemos configurado.
Color de fondo. Si lo que quieres es definir un color de fondo sólido para la sección, utiliza el selector de colores para escoger el que mas te guste.
Vídeo .MP4 y .WEBM de fondo. Todos los vídeos deben estar disponibles en los dos formatos .MP4 y .WEBM para asegurarnos la compatibilidad con la mayoría de navegadores web.
Los vídeos se desactivan en dispositivos móviles, así que es buena idea configurar una imagen de fondo también, y así no aseguramos de dar buena imagen.
Anchura y Altura de vídeo de fondo. Introduciremos el ancho y alto exacto necesario para que nuestros vídeos se muestren con las dimensiones correctas.
Pausar vídeo. Nos da la posibilidad de poder pausar el video.
Mostrar sombra interna. Podemos seleccionar si queremos que aparezca un sombreado interior. Este efecto queda muy bien cuando tenemos configurado también una imagen o un color de fondo.
Usar efecto de paralaje. Esto hace que las imágenes de fondo se queden estáticas mientras deslizamos la página hacia arriba o hacia abajo. Hay que tener en cuenta que las imágenes se adaptarán a la altura del navegador.
Y por eso es importante utilizar tamaños de imagen que se puedan acomodar a la mayoría de los tamaños de pantalla, por ejemplo 1280px de ancho por 768px de alto.
Relleno personalizado. Te da la posibilidad de introducir valores de relleno personalizados.
Conservar el relleno personalizado en dispositivos móviles. Permite mantener el relleno personalizado en dispositivos móviles.
Identificador CSS. Podemos definir un identificador css para la sección. Esto nos permite añadir estilos CSS personalizados, o crear enlaces que apuntan a la sección en cuestión.
Clase CSS. Nos da la posibilidad de aplicar diferentes clases de estilos CSS a nuestra sección.
Añadir y definir Filas
Nada mas guardar la configuración de tu sección, lo siguiente que tendrás que hacer es añadir una fila y escoger el tipo de fila que quieres.
Tienes varios tipos de filas para elegir, y también su correspondiente configuración para personalizar a tu gusto.
Añadir y definir Módulos
Una vez has seleccionado el tipo de fila, ya puedes colocar los módulos que necesites dentro de la fila, como los libros en una estantería.
Yo por ejemplo, en el paso anterior, he escogido una fila de tres módulos, donde cada uno de ellos ocupará un tercio del ancho total de la fila.
Cada vez que quieras insertar un módulo tendrás que pulsar en insertar módulo(s) y seleccionar uno del listado. Una vez seleccionado, podrás acceder a las opciones específicas de configuración del módulo para darle la apariencia que necesites.
Cambia tantas veces como quieras
Al final me he decidido por esta combinación de módulos:
Y con esto he terminado de definir por completo una sección, pero lo mejor es que en cualquier momento puedo volver y cambiar la configuración, o eliminar alguno de los elementos si no me termina de gustar.
A partir de aquí, puedo añadir nuevas secciones a mi página, o puedo añadir mas filas a la sección existente, o poner y quitar módulos de las columnas existentes.
Trabajando con Secciones Especiales y de Ancho Completo
Si te has fijado debajo de cada sección aparecen las siguientes opciones:
- Estándar
- De anchura completa
- Especial
- Y añadir desde biblioteca
Las secciones de ancho completo no tienen filas, y por eso sólo pueden contener módulos de ancho completo.
Las secciones de ancho completo se diferencian por el color morado del panel de configuración a la izquierda de la sección. Las podemos utilizar en cualquier parte del diseño.
En el ejemplo he añadido una sección de ancho completo, que contiene un módulo de control deslizante (Slider) también de ancho completo.
Y por último vamos a añadir una sección especial. Lo que la hace diferente es que una de las filas ocupa toda la sección de arriba hasta abajo. Esto nos permite crear el clásico efecto de barra lateral.
Debes elegir entre uno de las distribuciones que te ofrece por defecto:
Los bloques anaranjados son los que permanecen fijos, los verdes son filas normales, pero sólo podremos escoger entre uno de estos tres diseños:
Con estos componentes podemos obtener una distribución de este tipo:
Como ves, las secciones especiales, se diferencian porque la parte de configuración es de color rojo, y las filas de color naranja.
Modifica hasta cansarte
Como he comentado antes, hacer un boceto y mantenerte fiel a el, te puede ahorrar mucho tiempo, pero eso no quiere decir que no puedas cambiar de opinión.
Dicho esto, cambia a placer hasta que des con la composición visual que mas te gusta.
Con solo arrastrar y eliminar unos módulos, he pasado del ejemplo anterior, a este otro:
La única limitación es que no puedes utilizar módulos de ancho completo en una sección estándar, y no puedes utilizar módulos de la sección estándar en la sección de ancho completo.
¡A publicar!
Ya sólo falta darle al botón de publicar en el panel de tu WordPress y a disfrutar del resultado.
En la imagen a continuación, puedes ver como me va quedando la página que estoy desarrollando para agepem.es, de momento sólo verás la página en construcción, pero pronto estará disponible para el público.
Apaga el constructor Divi
Si definitivamente este tipo de asistentes no son lo tuyo lo puedes apagar fácilmente, y volver al editor de WordPress.
Sólo tienes que darle a este botón:
Y te aparece esta pantalla, si le das al sí, todo lo que hayas construido se borrará y volverás al editor de WordPress de toda la vida.
así de sencillo.
Conclusiones
Esta es una forma de construir interesante, top-down, de lo general, a lo específico.
Y es que lo normal es no tener muy claro al principio todos los detalles, pero si una idea general de lo que andamos buscando.
Con esta herramienta, podemos hacer un borrador rápido, montar las secciones principales, e ir añadiendo detalle progresivamente lo que nos da mucho control sobre el resultado final.
Y si algo no te termina de convencer se puede cambiar fácilmente sin tocar el resto del diseño.
La posibilidad de guardar diseños para reutilizarlos posteriormente, es también muy interesante, imagino que con el tiempo tendrás una colección de elementos que sabes que funcionan y no te cansas de reutilizar.
Reutilizar ahorra mucho tiempo, no empezamos siempre de cero, partimos de una configuración que hemos probado ya en varías ocasiones, esto es genial ¿no?
Como he comentado antes, lo estoy utilizando en mi actual proyecto, y me ha costado parar para escribir este post.
Una vez superas el desconcierto del principio, y coges soltura, no quieres parar hasta dejarlo todo perfecto.
¿será AMOR?
Ya veremos si se trata de una amor de Verano o esto se convierte en una relación larga y duradera.
De momento si estás de vacaciones espero que las disfrutes, y si aun no te has ido piensa que ya te queda menos. Pero si eres de los que ya han vuelto, mucho ánimo, este post te puede hacer la vuelta mas agradable 😉
Que tengas un gran día.
0 comentarios