Acordeón Vertical

Un tutorial de desarrollo con Elementor creado para diseñadoras web que quieren dar un toque diferente a sus webs, salirse de la norma, innovar y dar un mejor servicio a sus clientes.

En este tutorial te mostraré cómo crear un acordeón vertical como el que ves a la aquí de manera sencilla. Podrás adaptarlo a tus diseños y crear algo nuevo y diferente para tus páginas web.

Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye ·
Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye · Qué incluye ·

Acordeón Vertical

Con este tutorial aprenderás a crear un acordeón vertical como el que te muestro aquí abajo que podrás modificar y adaptar para incluir en diseños de clientes y dar a tus webs un estilo innovador y diferente.

INCLUYE 30 MIN DE TUTORIAL Y ACCESO AL CÓDIGO CSS ORIGINAL

TAN SOLO NECESITARÁS ELEMENTOR Y LA VERSIÓN GRATUITA DEl plugin ESSENTIAL ADDONS PARA CREARLO

01/ Crea tu diseño

Partiendo de un diseño base, te enseñaré cómo crear un acordeón vertical como este. No necesitarás más que Elementor y la versión gratuita del plugin Essential addons para crearlo. Podrás seguir el paso a paso con tu propio diseño y así tener tu propio acordeón desarrollado al final del tutorial

02/ Aplica el código

Aplicaremos el código que he desarrollado para conseguir este resultado y te explicaré cómo modificarlo para que puedas personalizarlo de forma sencilla para tus webs y diseños.

03/ Personalízalo

Al finalizar el tutorial, tendrás todas las herramientas para crear un acordeón como este y aplicarlo a cualquier diseño. Puedes utilizarlo en webs de tus clientes para el apartado “Sobre mí”, para hablar de curiosidades, para describir procesos o incluso para mostrar servicios dentro de una web. Estoy segura de que le darás nueva vida con tu creatividad.

01/ Crea tu diseño

01/ Crea tu diseño

Partiendo de un diseño base, te enseñaré cómo crear un acordeón vertical como este. No necesitarás más que Elementor y la versión gratuita del plugin Essential addons para crearlo. Podrás seguir el paso a paso con tu propio diseño y así tener tu propio acordeón desarrollado al final del tutorial

02/ Aplica el código

02/ Aplica el código

Aplicaremos el código que he desarrollado para conseguir este resultado y te explicaré cómo modificarlo para que puedas personalizarlo de forma sencilla para tus webs y diseños.

03/ Personalízalo

03/ Personalízalo

Al finalizar el tutorial, tendrás todas las herramientas para crear un acordeón como este y aplicarlo a cualquier diseño. Puedes utilizarlo en webs de tus clientes para el apartado “Sobre mí”, para hablar de curiosidades, para describir procesos o incluso para mostrar servicios dentro de una web. Estoy segura de que le darás nueva vida con tu creatividad.

Dicen de los tutoriales

TE AYUDO

¿TIENES PREGUNTAS?

¿Cuándo recibiré acceso al tutorial?

RESPUESTA:

En cuanto realices el pago accederás al área privada con todo el contenido.

¿Qué pasa si me surge alguna duda al hacer el desarrollo?

RESPUESTA:

Aunque este tutorial no incluye soporte, siempre estoy a un mail de distancia si te surge una duda específica del tutorial que no logres entender. 

¿Sólo podré crear un acordeón como el que muestras aquí?

RESPUESTA:

Para simplificar el tutorial, te mostraré cómo crear un acordeón como el que ves en la foto de portada. Sin embargo, el tutorial no te limitará y puedes incluir cualquier tipo de diseño que quieras dentro de las pestañas del acordeón que crees. 

Se puede adaptar a distintas páginas, diseños y contenidos. El único límite será tu creatividad.

¿Podré adaptarlo a mis propios diseños?

RESPUESTA:

Por supuesto. Este tutorial te da las bases para que sepas construir un acordeón vertical como el que te muestro aquí arriba y en el tutorial, pero luego, podrás utilizar tu creatividad y adaptarlo y modificarlo como quieras.

¿Qué herramientas necesitaré?

RESPUESTA:

Necesitarás la versión Pro de Elementor y la versión gratuita del constructor visual Essential Addons.

¿Me sirve este tutorial si no utilizo Elementor?

RESPUESTA:

Este tutorial está pensado para diseñadoras y desarrolladoras web que utilizan WordPress y Elementor como base para sus proyectos. No funciona con otros constructores visuales ni con otras plataformas de desarrollo web.

Acordeón Vertical

Tras el tutorial podrás:

  • Incluir cualquier plantilla de sección dentro de cada una de las pestañas del acordeón
  • Añadir este diseño a cualquier página, sección, post del blog o producto para incluir información adicional de manera original.
  • Personalizar el estilo y colores de las pestañas
  • Añadir multiples pestañas y contenidos distintos a cada una de ellas.
Scroll al inicio