Curso Wordpress + Divi para diseñadores
3 – Opciones generales de diseño
Tu progreso en este curso...
En esta lección vamos ya a empezar a «trastear» con el Constructor de Divi para ver cómo afectan al aspecto de tus páginas y entradas los cambios que realizas en las opciones generales de Divi.
Antes de empezar: si estás modificando una web ya existente y tu menú superior se ha vuelto loco, antes de empezar la lección ve al minuto 25 del vídeo para devolver tu menú a la normalidad. Si tu web es nueva puedes seguir los pasos del vídeo tal cual.
Si eres nuevo en WordPress y ves que algunos conceptos no te suenan (como la creación de un menú por ejemplo) no te asustes, replica los pasos que ves en el vídeo y poco a poco te irás familiarizando con cada elemento. Queremos que el curso además de útil sea muy práctico desde el primer momento y que vayas viendo resultados, por eso no explicamos teóricamente y a fondo cada elemento sino que iremos viendo lo que nos interese de cada uno para ir progresando. Posteriormente los analizaremos con más profundidad, cuando ya tengamos una idea general de cómo trabajan en conjunto WordPress y Divi. Es el caso de los menús que tocamos muy por encima en esta lección para tener uno disponible pero que veremos más a fondo en otros capítulos.
El objetivo de esta lección es dejar establecidos los estilos generales que se van a usar en tu web mientras no indiques lo contrario:
- Ancho máximo de tu web y proporción del sidebar (barra lateral).
- Tipografías, colores, espaciado, etc. para encabezados, textos y enlaces.
- Espaciado entre filas, columnas y secciones.
- Diseño a página completa o «en caja».
Te animamos a no hacer solo lo que ves en el vídeo sino a experimentar todo lo que quieras con los módulos de texto e imagen del constructor de Divi, añadiendo secciones, filas, diferentes modelos de columnas, etc. para ir familiarizándote con él y empezar a manejar con soltura el clonado de modulos, el mover módulos entre columnas, secciones, etc.
Apúntate al CURSO DE WORDPRESS + DIVI para acceder a los contenidos completos de esta lección y del resto de lecciones del curso.
SI ya estás apuntado accede AQUÍ con tu usuario y contraseña
Un pequeño reto...
Esta es solo la primera lección y no hemos avanzado mucho aún, pero con lo que has visto en el vídeo puedes conseguir ya efectos muy interesantes. ¿Te sientes capaz de reproducir la estructura de esta composición de fotos por ti mismo? No necesitas nada más de lo que se explica en el vídeo para hacerlo.
Crea una nueva página, activa el Constructor de Divi, y juega con las filas y columnas para conseguir esa distribución. Solo necesitas una sección. Luego con las opciones generales de diseño deberías poder ajustar los márgenes para lograr que todas se peguen entre si. Te lo hemos puesto fácil porque las fotos ya tienen las proporciones adecuadas, que es el único truco para conseguir buenos efectos (hablaremos de eso en otras lecciones).
Las fotos del ejemplo las puedes descargar aquí:
light-sunset-water-boat.jpg (232 descargas) – night-rust-chain.jpg (220 descargas) – water-trees-lake.jpg (235 descargas) – sea-industry-harbor-harbour.jpg (229 descargas) – sea-houses-harbor-harbour.jpg (222 descargas)
ENLACES
El generador de textos de prueba Chiquito Ipsum
Índice
Curso Contenido
7 Comentarios
Enviar comentario
Lo siento, debes estar conectado para publicar un comentario.
Buenas Jaume, las secciones se pueden corregir el ancho porque estéticamente no queda bien que el color vaya en todo el ancho del blog, veo que sólo se corta si el diseño del blog es con caja.
saludos
Hola Deisy!
precisamente el diseño con caja es para conseguir eso, que las secciones no cubran todo el fondo del navegador, aunque la tendencia actual es a construir las webs con ese diseño de ancho completo, dividiendo las páginas en franjas que en Divi equivalen a las secciones. Se puede obtener un mix de ambos estilos cuando es necesario con las opciones de diseño avanzadas de las secciones y las filas como veremos más adelante. ¿Cual es el efecto que quieres obtener cortando en ancho de una sección que no te permite el diseño con caja?
Hola¡¡¡, al ya empezar a trabajar con la plantilla me di cuenta que en la pagina de inicio me da por defecto que es de Tealohamos.
Esto lo modifico en usuarios?, en los cuales aparezco yo y ustedes.
Cariños
Veronica
Sí, al instalarte la plantilla nosotros la página de ejemplo se crea con nuestro usuario. Puedes cambiarlo muy fácilmente. Solo tienes que ir a Páginas en el menú y sobre esa página pulsar en «Edición rápida». Verás que una de las opciones que aparecen es la de cambiar el propietario. Eliges tu usuario, guardas cambios y todo listo :).
Gracias¡¡
Jaume, aunque en principio he estado practicando con una url que ya había adquirido con anterioridad, hoy ha aparecido la oportunidad de proponer un rediseño a la web de una pequeña empresa y me parece que el espacio en wordpress que ustedes ofrecen por seis meses con el curso pudiera ser la plataforma ideal para crear mi posible primer trabajo web. ¿Qué debo hacer para tener acceso a dicho wordpress?
Una segunda pregunta: en esa pequeña empresa no trabajan con mailchimp sino con algo llamado Constant Contact. ¿Es fácil enlazar la cuenta de Constant Contact a una web hecha con Divi?
Gracias por adelantado.
Hola! crearemos una cuenta y te daremos acceso en breve. Con Constant Contact no hemos trabajado y no está entre los proveedores con los que su formulario es capaz de trabajar automáticamente, por lo que no podrás usar el módulo de formulario.
En todo caso ofrecerán como todos algún código a insertar en la web para mostrar sus formularios y ese código lo puedes copiar y pegar donde quieras con el módulo de Código de Divi.
Mañana saldrá la lección que explica cómo duplicar una web existente en una url provisional para trabajar en ella «a escondidas» :).