INSERTAR UN ACORDEÓN EN UN WIDGET DE WORDPRESS

Bienvenidos a un nuevo tutorial de PluginsWeb.es

Hoy voy a enseñarte a crear un acordeón sin la necesidad de utilizar ningún plugin, insertarlo dentro de un widget nativo de WordPress de manera muy sencilla y muy rápidamente.

Para ello vamos a utilizar una herramienta web online que se llama w3schools.com, mediante la cual modificando el código que genera automáticamente a nuestro gusto crearemos un acordeón para WordPress 100% personalizado.

¿CÓMO CREAR UN ACORDEÓN E INSERTARLO EN UN WIDGET DE WORDPRESS UTILIZANDO W3SCHOOLS.COM ?

Vamos a W3SCHOOLS y hacemos clic en   Accordion –> Try It Yourself.

Nos llevará a una nueva pantalla dónde a la izquierda tenemos el código que viene por defecto y a la derecha vemos los resultados que se van generando conforme vamos editando el código.

Si tenemos un poco de conocimiento de CSS podremos modificar lo que queramos del acordeón y dejarlo cómo nos guste muy fácilmente.

Si no tienes idea de css, te recomiendo que veas el video, donde te muestro los parámetros básicos que normalmente se modifican.

Podemos editar el color de fondo el color de la tipografía, tamaño, posición, etcétera.

Debajo del código encontraremos un  <div>  que contiene el texto que viene por defecto, simplemente lo cambiamos por el texto que nosotros queramos mostrar y lo personalizamos a nuestro gusto.

Una vez que tengamos todos los cambios hechos y estemos contentos con el resultado hacemos clic en Run.

Ahora copiamos el código y nos vamos a nuestro escritorio de WordPress.

Hacemos clic en Apariencia –> Personalizar.

Hacemos clic en Widgets.

Seleccionamos el widget  HTML PERSONALIZADO, y dentro del contenido pegamos el código que hemos creado anteriormente.

Hacemos clic en Hecho.

Ahora verás en la barra lateral el acordeón con las pestañas cerradas.

y si haces clic en las pestañas, se abrirán mostrandole al usuario la información que has escrito anteriormente al generar el código.

Listo, como ves no tiene ninguna complicación insertar un acordeón en un widget de WordPress.

Te recomiendo seriamente que le eches un vistazo avanzado a la página w3schools.com, ya que te sorprenderás de todo lo que puedes crear e insertar en tu WordPress modificando un poquito de código y sabiendo lo básico de CSS.

Practica todo lo que puedas y si tienes alguna duda o no sabes cómo crear algo en particular deja un comentario o envíame un e-mail a el formulario de contacto y miraremos tu caso a ver qué podemos hacer.

Un saludo 🙂