Knowledge Diseño Gráfico y Web Gestores de Contenidos
Esta píldora formativa está extraída del Curso online de Creación de Páginas Web Profesionales con 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.

ADR Formación

ADR Formación utiliza cookies propias y de terceros para fines analíticos anónimos, guardar las preferencias que selecciones y para el funcionamiento general de la página.

Puedes aceptar todas las cookies pulsando el botón "Aceptar" o configurarlas o rechazar su uso pulsando el botón "Configurar".

Puedes obtener más información y volver a configurar tus preferencias en cualquier momento en la Política de cookies