Cómo insertar mapas de anchura completa en Wordpress

Comenzaremos maquetando la sección superior utilizando el módulo LLAMADA A LA ACCIÓN, compuesta por un título, un texto y un botón que enlace con la página CONTACTO, para ello realizaremos el siguiente proceso:

Paso 1

Desde el panel de administración de WordPress colocar el cursor del ratón sobre el menú PÁGINAS, a continuación se desplegará un menú a la derecha, haremos clic en el submenú TODAS LAS PÁGINAS y editaremos la página SERVICIOS presionando sobre EDITAR.

Paso 2

Una vez hemos accedido a la página SERVICIOS, presionar sobre el botón USAR EL CONSTRUCTOR DIVI para acceder al constructor y vemos que por defecto ha creado una SECCIÓN ESTÁNDAR.

CÃ³mo insertar un mÃ³dulo en una secciÃ³n estÃ¡ndar como si fuera una secciÃ³n de anchura completa

Paso 3

En la sección estándar presionamos sobre INSERTAR COLUMNA(S) (1) y elegimos una columna (2).

CÃ³mo insertar un mÃ³dulo en una secciÃ³n estÃ¡ndar como si fuera una secciÃ³n de anchura completa - 2

Paso 4

En la sección estándar presionamos sobre INSERTAR MÓDULO(S) (1) y elegimos entre las opciones que ofrece, el módulo LLAMADA A LA ACCIÓN (2).

CÃ³mo insertar un mÃ³dulo en una secciÃ³n estÃ¡ndar como si fuera una secciÃ³n de anchura completa - 3

Paso 5

En el campo TÍTULO (1) escribiremos el título de la página, en TEXTO DEL BOTÓN (2) escribimos INFÓRMATE u otro texto, en CUERPO (3) escribimos el texto que aparecerá entre el título y el botón, en URL DEL ENLACE DEL BOTÓN (4) escribiremos la URL de la página de destino que se abrirá cuando el usuario presione el botón, en BOTÓN DE ENLACE DE DESTINO (5) elegimos EN LA MISMA VENTANA, en COLOR DE FONDO (6) elegimos SI y elegimos (7) un color, en nuestro ejemplo azul (#0091f2) y presionamos el ojo para previsualizar (8).

CÃ³mo insertar un mÃ³dulo en una secciÃ³n estÃ¡ndar como si fuera una secciÃ³n de anchura completa - 4

En la pestaña DISEÑO (1) configuramos ALINEACIÓN DEL TEXTO (2) con alineación izquierda, COLOR DE TEXTO (3) en color claro. Podemos previsualizar presionando el ojo (4) y presionamos sobre GUARDAR Y SALIR (5).

CÃ³mo insertar un mÃ³dulo en una secciÃ³n estÃ¡ndar como si fuera una secciÃ³n de anchura completa - 5

Paso 6

Si presionamos sobre la vista previa de la página observamos que al aplicar color directamente al módulo, este queda recuadrado y no ocupa todo el ancho de la página (A) cuando nuestra intención era que ocupase todo el ancho de la página (B).

Paso 7

Para conseguirlo, debemos aplicarle color a toda la SECCIÓN ESTÁNDAR, para ello presionamos sobre el icono AJUSTES (1) de la barra lateral de la sección, aparecerá la ventana SECCIÓN MÓDULO AJUSTES donde elegiremos un color en el campo COLOR DE FONDO (2)(3), en nuestro ejemplo el azul (#0091f2), presionaremos sobre el icono del OJO (4) para ver la vista previa y después sobre GUARDAR Y SALIR (5).

CÃ³mo insertar un mÃ³dulo en una secciÃ³n estÃ¡ndar como si fuera una secciÃ³n de anchura completa - 6

Cómo insertar un módulo en una SECCIÓN ESTÁNDAR simulando una SECCIÓN DE ANCHURA COMPLETA

Esta píldora formativa está extraída del Curso online de Creación de Páginas Web Profesionales con WordPress.

Amplía tus conocimientos con el Curso Online de Creación de Páginas Web Profesionales con WordPress

Puedes continuar ahora la formación matriculándote en el curso, o si lo prefieres, consultar nuestro catálogo con cerca de 500 actividades formativas acreditadas.

Benefíciate del crédito para formación bonificando el curso.