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

¿Cómo agregar el control deslizante de contenido de acordeón en Weebly?

2

El marco de Bootstrap tiene muchos elementos de usuario que también se pueden agregar de forma independiente en su sitio Weebly agregando un fragmento de código. El control deslizante de contenido en el elemento de estilo acordeón o spoiler es uno de los elementos de Bootstrap llamados ayuda de colapso para agregar contenido más grande dentro de un espacio limitado. Aunque ya habíamos explicado CSS y el acordeón Weebly App Center, el estilo Bootstrap ofrece otra forma de agregar el control deslizante de contenido de acordeón en su sitio Weebly.

Control deslizante de contenido de acordeón para Weebly

El acordeón tiene las siguientes características:

  • Auto alineación de respuesta móvil a los puertos de visualización del dispositivo visualizado.
  • Al hacer clic en el título, se abrirá el contenido en estilo push down mientras que se cerrará el contenido abierto en estilo push up.
  • De forma predeterminada, la primera diapositiva está abierta cuando se carga la página.
  • Puede agregar tantas como diapositivas a su acordeón.
  • Se puede agregar cualquier elemento HTML como parte del widget.
  • El área de contenido se puede dividir en 12 columnas utilizando la estructura de cuadrícula de Bootstrap.

¿Cómo agregar el control deslizante de contenido de acordeón en Weebly?

Acordeón Bootstrap para Weebly

Texto:

Agregue el siguiente script en la sección de código de pie de página de su página:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

CSS:

Vincule el CSS Bootstrap a continuación en la sección de código de encabezado de su página:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

HTML:

En este ejemplo hemos utilizado tres controles deslizantes con los siguientes detalles:

  1. Primera diapositiva que tiene dos columnas. uno con imagen de tarjeta y otro con bloque de tarjeta. Esta sección se crea utilizando un diseño de grupo de tarjetas.
  2. La segunda diapositiva tiene una carta inversa.
  3. Tercera diapositiva con elemento de texto dentro de un bloque de tarjetas.

Asegúrese de reemplazar las URL de la imagen y el contenido de texto ficticio por los suyos.

<div id="accordion" role="tablist" aria-multiselectable="true"> <!-- First Section --> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Section 1 with Card Image and Card Block </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div class="card-group" style="margin:20px;"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> </div> <div class="card"> <div class="card-block"> <h4 class="card-title">Card Title</h4> <p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."</p> </div> </div> </div> </div> </div> <!-- Second Section --> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Section 2 with Inverse Card </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card card-inverse" style="background-color: #333; margin:20px;"> <div class="card-block"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> </div> </div> <!-- Third Section --> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Section 3 with Text Inside Card Block </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> <!-- Add More Sections Here --> </div>

Las tres secciones del control deslizante están resaltadas con comentarios para comprender el propósito y puede agregar más secciones agregando el bloque de código y cambiando los atributos id y href en consecuencia. Recuerde que Bootstrap es un marco que puede afectar a otros elementos de Weebly. Es posible que deba ajustar el CSS en función de su tema de Weebly.

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