En este cuarto reto del taller wordpress vamos a trabajar con varios elementos del Divi builder:
- i.- Fondos o background de las columnas de una fila del Divi builder
- ii.- Trabajar con anchuras de las filas del Divi Builder
- iii.- Combinar imagen de fondo con fondo degradado.
- iv.- Trabajar la opción de degradados de fondo.
DESCUENTOS DIVI
Queremos conseguir crear una sección de anchura completa en la web, que combine una imagen con un módulo de texto, cuyo color de fondo se corte en diagonal sobre la imagen, de esta forma:
Esta sección la podremos combinar con otras secciones dentro de una página de la web. Podría utilizarse para la página de nosotros, como voy a utilizarla yo. Pero también se podría utilizar para la página de contacto (cambiando el texto por un formulario) u otras páginas de la web.
En un dispositivo móvil se vería únicamente la columna correspondiente al texto y no la de la imagen.
1.- Estructura de la sección formada por una fila de 2 columnas con el Divi Builder
La sección, es una sección estándar de Divi, compuesta por una única fila dividida en 2 columnas iguales.
i.- Columna 1: esta columna es la situada más a la izquierda, y está compuesta por dos elementos
Elemento 1: Imagen de fondo
Elemento 2: Degradado desde un color sólido a uno transparente (el transparente deja ver la imagen tras de él). Con este degradado creamos la línea diagonal.
ii.- Columna 2: en esta columna tenemos un color de fondo, 2 módulos texto y un módulo divisor (el módulo de texto podría ser sustituido por uno de formulario u otro)
Un módulo texto para poner el título (también se podría utilizar un módulo de texto), módulo divisor para la línea separadora y módulo texto para el texto descriptivo.
En un dispositivo móvil se vería únicamente la segunda columna. Es decir, la columna de la fila correspondiente al texto. Esto se produce porque la columna de la izquierda no tiene ningún módulo (solo un fondo). El dispositivo móvil solo mostrará la columna de la derecha, que es la única que tiene módulos.
2.- Crear estructura de la sección
Lo primero que vamos a hacer es crear la estructura de la sección, filas y columnas con el page builder de Divi.
Una vez creada una nueva página, añadiremos una sección estándar. En la sección estándar, incluiremos una fila con 2 columnas de igual anchura.
En la columna de la izquierda no añadiremos ningún módulo, mientras que en la columna de la derecha añadiremos 3 módulos: Módulo texto, módulo separador y módulo texto. Es muy cómodo hacer esta primera parte con el constructor tipo backoffice, guardar y el resto con el constructor visual.
Lógicamente, posteriormente podremos añadir otras secciones situándolas por encima o debajo de la que estamos creando.
Estructura de la sección del reto 4 taller wordpress y Divi
3.- Añadir textos
Ahora vamos a proceder a añadir los textos en los dos módulos de texto, valga la redundancia. En el de arriba añadiremos el título y en el de abajo el texto descriptivo.
Por el momento no vamos a realizar ninguna acción de formateo de los textos. Esto lo haremos posteriormente.
4.- Establecer anchura completa de fila y quitar la separación entre columnas.
Para hacer que la fila tenga anchura completa y reducir a cero la anchura entre las dos columnas incluidas en dicha fila, iremos a la configuración de la fila. A continuación, iremos a la pestaña “Diseño” y en el apartado “Tamaño” realizaremos la siguiente configuración:
i.- Hacer que esta fila tenga anchura completa: establecemos el selector en “SI”
ii.- El uso personalizado del canalón de ancho: esta opción sirve para personalizar la separación entre columnas. Estableceremos el selector en “SI”.
iii.- Espacio entre columnas: para quitar el espacio entre las dos columnas, y de éstas con los bordes de la web, pondremos el selector en “1”.
iv.- Igualar las alturas de las columnas: pondremos el selector en “SI”.
Para que el texto no llegue a los extremos de su contenedor vamos a introducir unos márgenes interiores o padding (traducido como “relleno” en Divi) en la segunda columna.
Para ello iremos otra vez a la configuración de la fila. A continuación, iremos a la pestaña: “Diseño” y al apartado: “Separación”.
En los campos correspondientes a: “Relleno personalizado para la columna 2” estableceremos:
i.- Superior: 50px
ii.- Derecha: 5%
iii.- Base: 50px
iv.- Izquierda: 5%
A continuación, guardamos módulo y página.
5.- Establecer colores e imagen de fondo en las columnas a través de la configuración de la fila.
Vamos ahora a establecer colores de fondo e imagen. Para ello iremos otra vez a la configuración de la fila. A continuación, en la pestaña: “Contenido” iremos al apartado: “Fondo”.
En el apartado: “Fondo de la columna 1” añadiremos una imagen y un degradado.
i.- Imagen: en la pestaña imagen añadiremos la imagen que queremos que se muestre en la columna 1. Yo he utilizado una imagen de 945 px (ancho) x 702 px (alto).
ii.- Degradado: en la pestaña de degradado (icono rectángulo dividido en dos) vamos a utilizar un color macizo y uno transparente (que permita ver la imagen de detrás). Haremos clic en el icono «+» para añadir un degradado, y estableceremos las siguientes opciones:
Seleccionar color (izquierda): seleccionaremos el color blanco con la transparencia al 100%. Es decir, totalmente transparente.
Seleccionar color (derecha): yo he utilizado el color #f46624
Column 1 Place Gradient Above Background Image: SI (estamos estableciendo el gradiente de color por delante de la imagen). Esta opción está un poco más abajo, pero interesa marcarla la primera, para ver mejor como funciona la herramienta de degradado.
Tipo de gradiente de la columna 1: Linear
Dirección del gradiente de la columna 1: 105deg
Posición inicial de la columna 1: 80%
Posición final de la columna 1: 80%
NOTA: Muy interesante que juegues un poco con estas opciones antes de dejarlas en los valores indicados, para que veas un poco como funciona el tema de los degradados.
Ahora iremos al Fondo de la columna 2:
Aquí estableceremos solo el color de fondo sólido: #f46624 (icono bote de pintura)
Establecidos los fondos o backgrounds de las 2 columnas
A continuación, guardaremos módulo y página completa.
6.- Establecer opciones de diseño de los textos y márgenes
6.1.- Personalización Módulo de texto de título del taller
En el caso del módulo de texto para el título, en el ejemplo se ha utilizado:
Tipo de fuente: Montserrat
Anchura: Semi Bold
Tamaño de texto: 30px
Color: Blanco (#ffffff)
6.2.- Personalización Divisor
En el caso del separador, se ha utilizado la siguiente configuración:
i.- En la pestaña “Contenido > Visibilidad > Mostrar separador” estableceremos el selector en “SI”
ii.- En la pestaña “Diseño > Color” estableceremos el color blanco
iii.- En la misma pestaña: “Diseño”, pero en el apartado: “Tamaño” estableceremos las siguientes opciones:
Anchura del separador: 3px
Altura: 23px
Width: 23px
iv.- En la misma pestaña “Diseño”, pero en el apartado: “Separación” estableceremos un pequeño margen superior e inferior:
Margen personalizado superior: 20px
Margen personalizado Base: 20px
6.3.- Personalización módulo texto descripción
En el módulo de texto de la descripción, simplemente hemos establecido el color blanco y el tamaño de fuente de 16px
En la pestaña: “Diseño” del módulo y apartado: “Texto”, estableceremos el selector: “Color de texto” y lo pondremos en: “Claro”.
En el apartado de tamaño de texto, lo estableceremos en 16px;
6.4.- Márgenes
Con el constructor visual podremos modificar los márgenes de la fila y de la sección, para establecerlos a nuestro gusto dependiendo de si tenemos más secciones en la página.
7.- Otras opciones en vez del texto
En vez de utilizar el módulo texto para la descripción, también puedes usar un módulo formulario de contacto. Podría ser una opción para crear una parte de la página de contacto.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola, como puedo realizar un backgraund que tenga borde superior e inferior en diagonal. pero no utilizando un solido si no una imagen.
Buenas,
yo utilizaría una sección con un color de fondo o background. Para hacer el borde superior en diagonal usaría un la opción de divisor o separación de secciones: Post divisores de secciones personalizados
Joaquin, excelente tutorial que has compartido sobre esta técnica de diseño que efectivamente cada vez es más común encontrar en webs.
Estuvo genial, aprendi a hacerlo siguiendo el video.
Te envío un cordial abrazo desde México.
Hola Manfred,
me alegro que te haya gustado este post tipo taller wordpress. Me gustaría añadir uno de este tipo cada mes.
Un saludo desde Murcia / España.
Interesante propuesta, Joaquín pero ¿habría alguna manera de hacer que el texto tb se adaptara a la línea inclinada en lugar de seguir recto hacia abajo?
Me explico, que el punto de comienzo de los diferentes renglones se fuera desplazando hacia la izquierda conforme va avanzando el texto y así la forma global del texto seria un trapecio tal y como lo es la imagen pero em espejo.
Hola Miguel,
yo lo he utilizado en la página de «quien soy»
No tenemos una opción de establecer un padding progresivo, que sería lo que nos haría falta para poder implementar lo que comentas.
Lo que si se podría hacer, sería cada párrafo de texto incluirlo en un módulo de texto diferente y a cada módulo darle un padding (relleno) diferente. De esta manera quedaría cada párrafo escalonado con un margen diferente. Habría también que quitar ese margen cuando se visualice en dispositivos móviles y tablet.