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:

 

composición seccion ancho completo fondo diagonal divi builder

 

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.

 

estructura seccion taller 4 wordpress

 

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.

 

Rellenamos módulos de texto del taller 4 wordpress

 

 

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.

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO ELEMENTOR (14 Clases)
4.- CURSO BLOOM + MAILCHIMP (7 Clases)
5.- CURSO SEO (19 Clases)
6.- CURSO BLOG WORDPRESS (32 Clases)
7.- CURSO WOOCOMMERCE (39 Clases)
8.- CURSO FLATSOME WORDPRESS (36 Clases)
9.- CURSO COLORES WEB (9 Clases)
10.- CURSO ANALYTICS (10 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.