Entrar al aula
×

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.
 

Paso 3

En la sección estándar presionamos sobre INSERTAR COLUMNA(S) (1) y elegimos una columna (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).

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 CONTENIDO (3) escribimos el texto que aparecerá entre el título y el botón, en URL DEL BOTÓN (4) escribiremos la URL de la página de destino que se abrirá cuando el usuario presione el botón, en LA URL SE ABRE (5) elegimos EN LA MISMA VENTANA, en USAR COLOR DE FONDO (6) elegimos SI y elegimos (7) un color, en nuestro ejemplo azul (#0091f2) y presionamos el ojo para previsualizar (8).

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

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).