Vamos a ver en el reto del taller de WordPress de este mes algo que me parece muy vistoso, y que consiste en romper el típico footer rectangular y crear un footer más original formado por una curva en su parte superior.

De esta manera tendremos una web más original y que se diferenciará de la competencia.

 

  • Reto: enero 2018
  • Dificultad: Fácil **
  • Recursos: necesitamos una web wordpress con la plantilla Divi.

 

 

En este post tenéis más ejemplos de como hacer cambios o divisiones entres secciones diferentes a las habituales y aportando por tanto un toque de frescura a la web: Guía de divisiones originales entre secciones

 

Este footer curvo lo añadiremos con el constructor de Divi (Divi Builder), por lo que tendremos que añadir este borde en todas las páginas que queramos que aparezca este footer curvo.

No es necesario que aparezca en todas las páginas de la web, podemos hacer que se muestre solo en la home para que muestre una página de inicio más original, y en el resto de páginas mantener el típico footer rectangular.

 

Efecto footer curvo con wordpress y divi

 

 

 

 

 

1.- Cómo añadir un footer curvo con WordPress y Divi

 

Vamos a ver los diferentes pasos para poder añadir ese footer curvo que aporte un toque original a nuestra página web wordpress con Divi.

Mega guía sobre la plantilla Divi: Guía Divi
DESCUENTOS PLANTILLA DIVI

 

 

1.1.- Acceder a la página

 

Lo primero que haremos será ir a la página en la cual queremos que se muestre ese footer curvo que nos de un toque de frescura en nuestro sitio web.

 

 

1.2.- Añadir sección + fila + módulo código

 

Al final de la página añadiremos una nueva sección, que es la que utilizaremos para crear la curva sobre el footer.

Para esta parte podéis utilizar el constructor visual o el tipo backoffice.

Dentro de la sección incluiremos una fila compuesta por una sola columna, y dentro de dicha columna incluiremos un módulo de código.

 

estructura de la curva superior footer

Añadimos una sección al final de la página + una fila con una sola columna + un módulo de código

 

 

1.3.- Introducir código en módulo código

 

Ahora configuraremos el módulo código que añadimos en el apartado anterior y pondremos el siguiente código en el área de texto “Contenido”:

 

<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" style="position:absolute; padding-bottom:o; margin-bottom:0; fill: #222222; stroke: #222222; bottom:0px;" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 100 C 20 0 50 0 100 100 Z"></path></svg>

 

Cambia en donde dice “fill” y “stroke” el color que viene por defecto por el color que tengas de fondo en el footer.

En el ejemplo he puesto el color #222222 que es el color que tengo en el footer en la web de ejemplo

A continuación, guarda la configuración del módulo y toda la página.

 

añadimos código curvatura del footer al módulo de divi

Añadir código al módulo de Código de Divi

 

 

1.4.- Anchura completa de la curva

 

Para la parte que viene lo más interesante es utilizar el constructor visual, para ir viendo los cambios de manera instantánea.

 

Situación curva footer con el constructor visual

Construcción del footer curvo con wordpress y Divi

 

¿Aún no conoces Divi Booster?, el plugin para ampliar las funcionalidades de la plantilla Divi: Divi Booster

 

Para ampliar la curva y que tenga anchura completa iremos a la configuración de la fila y posteriormente a la pestaña “Diseño”.

En el apartado “tamaño” realizaremos las siguientes acciones en los siguientes selectores:

  • i.- Hacer que esta fila tenga anchura completa: Pondremos el selector en “SI”
  • ii.- El uso personalizado De Canalón De Ancho: Pondremos el selector en “SI”.
  • iii.- Espacio entre columnas: pondremos el selector en “1”

 

A continuación, guardaremos la configuración del módulo y de toda la página

 

cómo poner la línea superior del footer de ancho completo

Forzar curva superior del footer a tener anchura completa

 

 

1.5.- Reducir margen inferior de la sección

 

Desde el constructor visual procederemos a poner el cursor del ratón sobre la línea inferior de la sección, nos aparecerá el margen que se está aplicando y lo reduciremos a 0.

A continuación, guardamos la página.

 

reducir a cero el margen inferior de la seccion

Reducir margen inferior de la sección a 0 en la que hemos incluido la curva

 

 

1.6.- Reducir margen inferior de la fila

 

Ahora pondremos el ratón sobre la parte inferior de la fila que contiene a la curva, se mostrará el margen de la fila y lo reduciremos a cero

A continuación, guardaremos la página.

 

reducir margen inferior de la fila

Reducimos a cero el margen inferior de la fila en la que hemos incluido la curva

 

 

1.7.- Reducir el margen del módulo

 

Podemos observar que aún hay un considerable margen entre la curva y el footer. El margen que queda es el proporcionado por el módulo de código.

Para reducir este último margen iremos a la configuración del módulo de código y haremos clic en la pestaña “Diseño”.

A continuación, buscaremos el apartado “Separación” y en el campo “Base” (que se refiere a el margen inferior) del “Margen personalizado” escribiremos -60

Nota: a mí con -60 se me queda perfecto. Si este no es tu caso, ves probando con diferentes dimensiones hasta que se te quede totalmente ajustado.

A Continuación, guardamos la configuración del módulo y la página.

 

ajuste de curva al footer de la web

Reducimos el margen del módulo código para que la curva quede ajustada al footer

 

Ya lo tenemos

No ha sido tan difícil ¿verdad?

 

 

Soy un bloguer al que le encanta el diseño web, me apasiona WordPress y la formación. Me encantaría que este blog (horizonweb.es) te sirviera de ayuda, seas un profesional en el sector o no. Me encantaría poder ayudarte a desarrollar tu proyecto online, ya sea una web de empresa o autónomo, un blog, una plataforma de cursos online o cualquier otro tipo de proyecto.

Compártelo ya!!

RECIBE GRATIS CURSO DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

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.