TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar un widget de alternancia de contenido de acordeón en Weebly?

0

El widget de acordeón le permite agregar contenido grande en un espacio limitado y los usuarios interesados ​​pueden expandir el título para ver el contenido correspondiente. En nuestro artículo anterior, discutimos cómo usar la aplicación de acordeón gratuita ofrecida por Weebly desde el App Center junto con algunas opciones de personalización. En este artículo, analicemos cómo crear y agregar un widget de alternancia de contenido de acordeón CSS en el sitio de Weebly.

Aunque los acordeones son populares usando el widget de interfaz de usuario de jQuery, también es posible hacer un acordeón usando CSS sin script. Esto ayuda a que la página se cargue más rápido y facilita la personalización con CSS. El widget contiene tres elementos para cada bloque de acordeón: encabezado, una flecha y el contenido del cuerpo. Puede controlar todos los elementos del widget a través de CSS simple y personalizarlo según sus necesidades. Básicamente, hemos utilizado la lista con el tipo de entrada como casilla de verificación para controlar el comportamiento del acordeón.

El acordeón CSS se verá más abajo.

¿Cómo agregar un widget de alternancia de contenido de acordeón en Weebly?

Widget de acordeón CSS de Weebly

CSS para el widget de acordeón

Copie el código CSS a continuación y péguelo en la sección " Código de encabezado " en "Páginas> Seleccione la página> Configuración de SEO" de la página en su sitio Weebly. Para facilitar la comprensión, hemos resaltado el encabezado y el estilo del cuerpo con comentarios. Por ejemplo, hemos utilizado verde claro como color de fondo del encabezado con un tamaño de fuente de 20 píxeles y un peso de 500. Puede personalizar estos parámetros para que se adapten al tema y el diseño de su sitio. Del mismo modo, el cuerpo del acordeón utiliza un color gris claro para el fondo con fuente -tamaño de 16px. También puede personalizarlo según sus necesidades.

<style> /* Heading Style Start */ .accordion-heading { background-color: lightgreen; display: block; padding: 10px; position: relative; cursor: pointer; font-size: 20px; font-weight: 500; } /* Heading Style End */ /* Body Style Start */ .accordion-body { max-height: 0; margin-bottom: 2px; overflow: hidden; font-size: 16px; line-height: 1.5; text-align: justify; background-color: lightgrey; transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out; } /* Body Style End */ .accordion { border: 1px solid white; margin: 0 auto; list-style: none; overflow: hidden; } .accordion > * + * { border-top: 1px solid white; } .accordion-input:checked ~ .accordion-body { background-color: lightgrey; padding: 10px; max-height: 1000px; transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in; } .accordion-input:checked ~ .accordion-heading > .accordion-heading-btn { transform: rotate(0); } .accordion-heading-btn { display: block; width: 30px; position: absolute; top: 10px; right: 0; pointer-events: none; transition: transform .3s ease; transform: rotate(-180deg); text-align: center; font-size: 14px; line-height: 1; } .accordion-input { clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1; overflow: hidden; position: absolute; left: -9999px; } </style>

También puede agregar el CSS en la sección "Configuración> SEO> Código de encabezado" o en el archivo "main.less" sin las etiquetas … para que el acordeón sea efectivo a nivel del sitio.

¿Cómo agregar un widget de alternancia de contenido de acordeón en Weebly?

Edición del archivo CSS principal en Weebly

HTML para acordeón

Copie y pegue el código HTML a continuación dentro de un elemento " Código incrustado " en la página a la que desea agregar el acordeón CSS. Reemplace los encabezados y el contenido del cuerpo según lo necesite. Hemos resaltado cada bloque con un comentario y puede copiar / pegar el bloque para agregar bloques adicionales para su acordeón.

<div> <ul class="accordion"> <!-- First Block of Accordion Start --> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item1" /> <label for="item1" class="accordion-heading">This is a first heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <!-- First Block of Accordion End --> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item2" /> <label for="item2" class="accordion-heading">This is a second heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item3" /> <label for="item3" class="accordion-heading">This is a third heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> <li> <input class="accordion-input" type="checkbox" name="accordion" id="item4" /> <label for="item4" class="accordion-heading">This is a fourth heading...<span class="accordion-heading-btn"></span></label> <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div> </li> </ul> </div>

Opciones de personalización

Una de las principales ventajas del acordeón CSS es que puede preparar el contenido sin conexión y copiarlo / pegarlo en el editor de Weebly. Puede corregir fácilmente la secuencia sin conexión, agregar cualquier código adicional para controlar el comportamiento y el estilo del acordeón. Como se mencionó anteriormente, puede modificar el color de fondo, el tamaño de fuente, el peso, el margen y el relleno del encabezado y el cuerpo en CSS para que coincida con el tema de su sitio.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More