PluginsWeb ⚙️

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.

 

 

CREAR ACORDEON EN WORDPRESS, wordpress acordeon

 

 

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.

 

 

insertar acordeon en widget wordpress, insertar acordeon en wordpress.

 

 

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

Hacemos clic en Apariencia –> Personalizar.

 

w3schools colocar odigo en widgets wordpress

 

Hacemos clic en Widgets.

 

<h3>insertar acordeon en widget de wordpress</h3>

 

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

Hacemos clic en Hecho.

 

 

crear acordeon en wordpresscomo crear un acordeon en wordpress

 

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

 

INSERTAR UN ACORDEÓN EN UN WIDGET DE WORDPRESS 1

 

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.

 

 

INSERTAR UN ACORDEÓN EN UN WIDGET DE WORDPRESS

 

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 🙂

 

5/5 - (3 votos)

Los datos enviados quedarán incorporados en un fichero del que es responsable Francisco Salas. Estos datos se utilizarán exclusivamente para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo mediante un email a pluginswebdudas@gmail.com.