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 imagen de acordeón en el sitio Weebly?

1

Weebly ofrece un elemento de presentación de diapositivas de imágenes tradicional para agregar controles deslizantes a su sitio. Desafortunadamente, esto no está más cerca de las presentaciones de diapositivas modernas ofrecidas por proveedores o complementos externos. Puede crear deslizadores de estilo acordeón personalizados de aspecto hermoso hechos exclusivamente con CSS. En este artículo, explicaremos cómo crear un control deslizante de imagen de acordeón CSS en el sitio Weebly

Control deslizante de imagen de acordeón Weebly

A continuación se muestra cómo se verá el elegante control deslizante en su sitio Weebly.

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

Control deslizante de acordeón CSS

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

Ahora que ha visto el control deslizante y si se ve bien, aquí hay una instrucción paso a paso sobre cómo agregar el control deslizante en su sitio. El proceso consta de tres sencillos pasos:

  • Subiendo imágenes para el control deslizante
  • Agregar código CSS a nivel de página o sitio
  • Agregar código HTML mediante el elemento de código incrustado

Paso 1: carga de imágenes para el control deslizante de acordeón

Prepare todas sus imágenes con el tamaño requerido. En este ejemplo usamos imágenes con ancho = 640 px. Sube todas las imágenes de tu sitio en "Tema> Editar HTML / CSS > Activos> Subir archivo (s)…".

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

Cargar imágenes en el editor de código Weebly

Debe mantener las URL de las imágenes cargadas que deben usarse en el paso 3. La URL de una imagen cargada será como:

https://your-site-name.com/files/theme/image-name.jpg

Alternativamente, puede hacer clic derecho en la imagen y obtener la URL que debería verse a continuación:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

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

Obtener URL de imagen subida

Después de cargar todas sus imágenes, haga clic en el botón "Guardar" y proporcione un nombre personalizado para su tema.

Paso 2: agregar código CSS

Si desea agregar el control deslizante solo en páginas particulares, agregue el siguiente código CSS en la sección "Páginas> Elija la página> Configuración de SEO> Código de encabezado" de las páginas requeridas.

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

Agregar código de encabezado en la página

En caso de que desee agregar el control deslizante en varias páginas, le recomendamos que lo agregue en el CSS principal en "Tema> Editar HTML / CSS> Estilo> main.less". También puede agregar el código en la sección "Configuración> SEO > Código de encabezado".

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

Agregar código de encabezado a nivel de sitio Weebly

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

Puede personalizar cualquiera de los estilos según sus necesidades.

Paso 3: agregar código HTML

El último paso es agregar el siguiente código HTML del control deslizante arrastrando y soltando un elemento de código incrustado en el área de contenido de una página requerida. No olvide reemplazar los enlaces de la imagen con sus propios enlaces del paso 1.

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

Nota: Después de agregar el código HTML, es posible que vea que las imágenes se enumeran una debajo de la otra dentro del editor de Weebly. Esto está bien porque los efectos CSS no se aplican dentro de la página, publique la página para ver el control deslizante real.

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