Knowledge Diseño Gráfico y Web Gestores de Contenidos
Este material didáctico forma parte del Curso online de Creación de Páginas Web Profesionales con WordPress

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

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

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

 

 

Este contenido didáctico abierto está extraído 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 400 actividades formativas acreditadas.

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

Este sitio web utiliza cookies de terceros con la finalidad de analizar el uso que hace de nuestra web y personalizar el contenido de los anuncios. Si continúa navegando entendemos que acepta su uso. Más información