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.
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.
ÍNDICE DEL TALLER
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.
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.
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ñ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.
Construcción del footer curvo con wordpress y Divi
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
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 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.
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.
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 Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquin. Eres un Crack, aprendo mucho con tus tutoriales, yo de código 0 total. Muchas Gracias por compartir, por lo menos a mí me ayudas mucho, de nuevo Gracias; 🙂
Hola Conchi,
gracias a ti por seguirme.
Un saludo
Hola Joaquin, gracias por el aporte!
Hay forma de hacer la curva en el footer con el Shape dividers o para este caso es mejor con el modulo codigo que indicas?
Hola Isaias,
Lo hice en su momento con código porque aún no existía la funcionalidad Shape Dividers. Ahora se podrá realizar con la funcionalidad de divisores de secciones, y con un montón de tipos de formas, no solo con la del ejemplo.
Aquí tienes toda la info sobre el funcionamiento del divisor de secciones de Divi
Hola Joaquín, Elegant Themes ha sacado una actualización de Divi que facilita mucho el diseño en curva de los divisores de secciones https://www.elegantthemes.com/blog/theme-releases/shape-dividers
Efectivamente Miguel,
veo que estás a la última,
buen trabajo.
En breve incorporaré un post de uso de la nueva funcionalidad en este post: diseños secciones Divi