Antes de ponerte a crear directamente tu web, te aconsejo que estructures tus ideas. Divi tiene numerosas herramientas y puedes hacer con esta plantilla lo que te imagines, por lo que es muy fácil, si te pones a crear tu web sin haberla estructurado, que empieces a añadir cosas y más innecesarias y tu web acabe desvirtuandose y perdiendo el sentido.
Si no sabes utiilizar Adobe illustrator, Photoshop o Adobe Xd, puedes coger un papel y lápiz y plasmar tus ideas en papel.
- Empieza por el menú: esto te ayudará a estructurar tu web y lás páginas que necesitas, por ejemplo la página de ¿Quienes somos?, Contacto, Blog, Servicios etc…
- Página principal: Es importante que la primera página que diseñes sea tu HomePage, o página de inicio, esto te ayudará a tomar un camino gráfico que has de seguir a lo largo de la toda la web.
- Crea tu paleta de colores. Siempre es recomendable usar los colores corporativos de tu empresa, para que toda la imagen de Marca tenga un sentido. Si no tienes colores corporativos ahora es el momento de elegirlos. Yo aconsejo que tengas un color principal, y dos o tres colores secundarios como Máximo. Por ejemplo. Color principal el —— y secundarios el —– y el —-
- Elige la tipografía. Es recomendable elegir y usar como máximo 3 tipografías distintas a lo largo de toda la web. Lo ideal es una tipografía para los títulos y otra para el texto continuo. Siempre han de ser tipografías de Google fonts para facilitarnos las cosas, luego veréis porqué.
Una vez tenemos muy claros todos estos conceptos es hora de abrir el ordenador y entrar en nuestro WordPress. Para ahorrarnos mucho tiempo divi dispone de algunas opciones para generalizar los estilos de nuestra plantilla y no tener que aplicar los estilos a cada elemento, lo que nos ahorrará mucho tiempo y nos permitirá unificar nuestro diseño.
1) Opciones del tema Divi
El primer paso para crear una página web con Divi es configurar las opciones de la plantilla y personalizarlas a tu gusto.
Esto se hace desde Divi > Opciones de tema > General .
De aquí lo que más nos interesa es :
- Subir tu logotipo.
- Subir tu favicon. el favicon es el icono que sale en el navegador cuando abres tu página web y ha de tener un ancho mínimo de 16px y máximo de 32px.
- En el apartado de Actualizaciones o Updates deberías ingresar tu clave api de Elegant Themes para poder disfrutar de las actualizaciones y mejoras de Divi.
2) Personalizar el tema
Una vez tenemos el logotipo y la Api, el siguiente paso es personalizar la apariencia general de la Web.
Para ello debes ir a Ajustes > Personalizar. A continuación voy a explicarte los apartados más importantes del personalizador.
Lo que nos interesa de aquí es:
- Ajustes Generales > Tipografía: aquií debemos asignar la tipografía y los tamaños de texto de la cabecera o títulos y del texto cuerpo de texto.
- Cabecera y navegación: aquí elegiremos el estilo del menú y los elementos que van a complementarlo
- Pie: el diseño del footer, a cuantas columnas lo queremos, el color etc..
- Botones: Es importante definir el estilo de los botones, ya que por norma general todos los botones han de tener el mismo diseño, y únicamente cambiar el texto de dentro.
- En ajustes de portada elegiremos si queremos como página de inicio una página estática o una de blog.
Una vez creados todos los estilos, podemos empezar a desarrollar nuestra home page. Para ello nos dirigiremos al Escritorio de WordPress > Páginas > Añadir Nueva
Para empezar a construir con Divi haremos click en Usar el constructor Divi y para utilizar el modo en vivo para modificar en tiempo real, viendo los resultados haremos click en Usar Constructor Divi. Si has llegado hasta aquí te recomiendo que trastees y curiosees todos los módulos para entender cómo funcionan y las infinitas posibilidades que tienes. Si quieres saber utilizar cada uno de ellos al máximo puedes ojear el siguiente articulo: Módulos de divi y cómo sacarles el máximo partido.
Añadir secciones en Divi
Añadir filas con columnas en Divi
Añadir módulos en Divi
