Una de las opciones que vienen sin configurar y que no vemos al instalar el tema Extra, es el pie de página. En él se pueden colocar widgets de diferentes contenidos para que estén presentes en todo momento mientras el usuario de nuestra web navega por ella.
Crear un pie de página en nuestra web con EXTRA
Puede que queramos tener siempre presente algún tipo de información a la que el visitante pueda acceder para estar informado en todo momento, como información personal, un número de teléfono o una forma de contacto, un menú con links a textos legales...
Decidir el contenido que se incluirá en el pie de página
Al ser una zona donde podemos colocar, a modo de puzzle, casi cualquier widget, debemos elegir cuales queremos poner y la disposición que tendrán. A diferencia de la barra lateral o sidebar, el pie de página no podemos elegir que aparezca o no en determinadas páginas o entradas, siempre estará presente.
Por eso, aunque podamos colocar cualquier widget, debemos elegir los que realmente sean relevantes para nuestra audiencia. Como información de la empresa o autor, un buscador, un menú con links importantes o enlaces a las redes sociales.
Activación y disposición de las zonas del pie de página
Por defecto, si abrimos la pestaña de los widgets, podemos ver que sólo tenemos 2 zonas del pie de página, pero podemos activar hasta cuatro y disponerlas de varias maneras, jugando con el número y la anchura de estas.
Desde el personalizador, en la pestaña "Ajustes del pie de página > Diseño" (Footer settings > Layout), elegimos el formato que queremos utilizar en el pie de página.
Añadir los Widgets que deseamos mostrar
Aquí ya no hay misterio, al igual que en la barra lateral, añadimos los widgets que queramos, podemos hacerlo desde el personalizador o desde la zona del escritorio de administración, aunque la forma de añadirlos sea diferente, el resultado va a ser el mismo.
Debéis fijaros muy bien en cuales habéis activado y cuáles no, ya que, si colocáis widgets en la zona inactiva, estos no aparecerán.
El aspecto que tendrá nuestra web puede cambiar mucho dependiendo de los widgets que escojamos, un ejemplo de cómo podría quedar es el siguiente.
Configurar el aspecto del pie de página
Una vez que tenemos nuestro pie de página con los elementos que hemos elegido, toca adaptarlo al aspecto que le hemos dado al sitio.
Modificar el aspecto del contenido del footer
Podemos cambiar muchos aspectos de los que mostramos, sobre todo lo referente al contenido del texto, tamaño, color de la tipografía, estilo, links... Todo desde la pestaña "Ajustes del pie de página > Tipografía" (Footer settings > Typography).
En el ejemplo no tengo cambiada la barra inferior con los créditos personales, para cambiarlos podéis ver el capítulo donde hablo de crear un tema hijo para cambiar los créditos.
Para cambiar el color de esta barra, lo haremos desde "Ajustes del pie de página > Barra inferior", ya que puede variar según cambiemos el color de fondo en el siguiente paso.
Modificar el color del fondo del footer
Como siempre que queremos personalizar a tope algo, nos topamos con alguna dificultad. Extra no tiene ninguna opción o pestaña que permita cambiar el color del fondo del pie de página, pero eso no significa que no se pueda hacer.
Necesitamos añadir estilos en la pestaña "CSS adicional" para asignar un color a la etiqueta footer del código html. Suena difícil pero no es así. Tenéis que copiar el siguiente código en esa pestaña.
1 2 3 | #footer { background-color: #220093; } |
Esto hará que nuestro pie tenga un fondo de color azul. El color está asignado por un número hexadecimal (#XXXXXX). Si queréis cambiar el color, podéis realizar una búsqueda en Google de colores HTML, de pantalla o RGB. Hay muchas webs donde podéis encontrar los colores. Yo he usado este sitio.
Colocar una imagen de fondo
Aunque en el vídeo os mando al capítulo de la cabecera, donde explico cómo colocar una imagen de fondo, os voy a dar unas indicaciones para que no tengáis problemas.
Estas son recomendaciones, podéis hacer lo que queráis, pero puede que el resultado no sea el que esperáis.
- Utilizar imágenes que, aunque tengan algo que ver con el sitio, sean neutras, que no importe la zona que se muestre o queramos destacar. Al mostrar la web en dispositivos móviles, el pie de página o footer cambia el tamaño y adaptará y recortará la imagen a mostrar.
- Las imágenes tienen que ser medio opacas, suaves, sin colores fuertes que puedan entorpecer la lectura del contenido de los widgets.
- La resolución de la imagen, esto es la calidad, debe ser acorde al tamaño del footer, si tenemos una anchura de 960px, ese debe ser el tamaño mínimo de la imagen, sin descuidar la medida de la altura.
Como podéis ver son dos recomendaciones muy básicas, pero no está de más recordarlas.
El código que debéis colocar, sustituyendo el que hemos puesto para cambiar el color, es el que os muestro a continuación.
1 2 3 4 5 | #footer { background-image: url('dirección url de la imagen'); background-size: cover; background-repeat: no-repeat; } |
Cuando tengáis elegida la imagen, la subís a vuestra web y desde la pestaña medios copias la url que debéis pegar entre las comillas dentro del código anterior.
Podéis tener un aspecto final del footer como este.
Colocar un logo en un widget
Si lo que queréis es poner una imagen o logotipo de vuestra empresa en el pie, podéis seguir este vídeo que explica cómo hacerlo en cualquier WordPress.
Puedes pinchar aquí para ver todas las entradas relacionadas con esta plantilla.
Suscríbete para no perderte ningún artículo nuevo, te aviso por email
Muestra a tus usuarios la información que necesitan en todo momento. ¿Necesitas ayuda?
Cómo diseñar una landing page creada con Divi y Extra- Hacer que las redes sociales se abran en una nueva ventana
- Modificar la cabecera y poner una imagen para personalizar el tema Extra
- Plantillas de páginas pre-configuradas en Extra de Elengat Themes
- Cómo utilizar los "layouts" o plantillas prediseñadas para Extra
- Cómo traducir al español el tema Extra
Hola buenas tardes tengo una pregunta se puede hacer paginacion de una entrada de alguna manera con extra? osea tengo un articulo muy largo y me gustaría saber si puede hacer paginas del mismo en vez de que el usuario tenga que hacer moverse hacia abajo todo el rato
Hola Alex, dentro de una misma página no se puede hacer los que quieres con extra. Puedes crear varias páginas independientes y colocar un link en la parte inferior para navegar hacia delante o atrás entre ellas, pero tienen que ser páginas independientes.
Seguro que existe algún plugin que realice la partición del contenido dentro de una misma página, pero nunca me lo he planteado, yo utilizo un plugin llamado "Table of Contents Plus" que me crea un índice al principio de la página y que el usuario puede utilizar para ir al punto que quiere leer sin tener que desplazarse.
Si hay una plugin que se llama wp page navi aunque no se como se vera en Extra si conozco el que dices el problema es cuando el articulo es muy largo queda el indice muy arriba sobre todo en móviles tambien la paginacion no solo sirve para dividir texto podria dividir archivos etc etc.