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

Widget de control deslizante Nivo gratuito para Weebly

7

Weebly ofrece un elemento de presentación de diapositivas simple para insertar controles deslizantes en su sitio. Una presentación de diapositivas rica en funciones con múltiples efectos de transición es una de las partes que falta en Weebly. Hace mucho tiempo, Weebly ofrecía una presentación de diapositivas de encabezado para usuarios Pro que también se eliminó de todos los temas receptivos. Hemos probado varios controles deslizantes y descubrimos que el popular control deslizante Nivo con modificaciones será el mejor para los usuarios de Weebly. El control deslizante Nivo es uno de los controles deslizantes más conocidos en la web que se usa en varios temas de forma predeterminada. Puede agregar fácilmente hermosos efectos de transición con jQuery y personalizar los controles deslizantes de acuerdo con sus necesidades. En este artículo, analizaremos cómo agregar el widget deslizante Nivo gratuito en su sitio Weebly. El control deslizante se puede insertar en cualquier lugar de su sitio Weebly con la restricción de un control deslizante por página.

Funciones del widget Nivo Slider

A continuación se muestran algunos de los aspectos más destacados del widget de control deslizante Nivo gratuito para Weebly:

  • Se puede agregar como una presentación de diapositivas de encabezado o dentro del área de contenido. En este artículo, analizaremos cómo insertar un área de contenido interno, si está buscando una presentación de diapositivas de encabezado, consulte nuestro artículo separado sobre cómo insertar una presentación de diapositivas de encabezado en el sitio gratuito de Weebly.
  • El control deslizante Nivo se ofrece con 4 estilos de tema diferentes: claro, barra, oscuro y predeterminado.
  • Puede agregar 12 efectos de transición diferentes: corte hacia abajo a la derecha, deslice hacia abajo a la izquierda, corte hacia arriba a la derecha, corte hacia arriba a la izquierda, corte hacia arriba hacia abajo, corte hacia arriba y hacia abajo a la izquierda, pliegue, desvanezca, caja aleatoria, caja de lluvia, caja de lluvia inversa y caja de lluvia crecer marcha atrás.
  • Se pueden agregar diferentes efectos de transición a cada diapositiva.
  • Fácil de agregar subtítulos de texto y subtítulos con enlace. También puede vincular imágenes del control deslizante a la página requerida en su sitio.
  • Use controles simples como botones de navegación para diapositivas anteriores y siguientes.

¿Cómo agregar el widget Nivo Slider en el sitio Weebly?

El control deslizante de demostración tiene cuatro imágenes y utiliza un efecto de transición definido para cada imagen por separado en código HTML. La segunda imagen (up.jpg) se utiliza como enlace para conectarse a una página web con un texto de leyenda en la parte inferior. La cuarta imagen (nemo.jpg) tiene un título con enlace HTML.

Paso 1: preparar imágenes

El primer paso para cualquier presentación de diapositivas es preparar las imágenes. En las demostraciones hemos utilizado 4 imágenes con un tamaño de 618 x 246 px cada una. Recomendamos utilizar una proporción similar con imágenes de mayor tamaño para obtener una mejor calidad.

Paso 2: descarga los archivos del control deslizante

Haga clic en el botón de abajo para descargar todos los archivos necesarios para el control deslizante Nivo, esto incluye cuatro imágenes utilizadas para fines de demostración.

Descargue todos los archivos del control deslizante de nivo.

El archivo zip contiene 12 archivos como a continuación:

Imágenes de navegación

  • arrow_bar_default.png
  • arrow_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • loading.gif

Guiones:

  • jquery.nivo.slider.nod.js
  • jquery-1.7.1.min.js

Hoja de estilo:

  • theme-styles.css

Imágenes de demostración:

  • toystory.jpg
  • up.jpg
  • walle.jpg
  • nemo.jpg

Puede eliminar las imágenes de demostración y utilizar las suyas en su sitio Weebly.

Paso 3 – Cargar archivos del control deslizante

Inicie sesión en su cuenta de Weebly y edite el sitio al que desea agregar el control deslizante de Nivo. Vaya a "Tema> Editar HTML / CSS" y vaya a la sección "Activos". Haga clic en el botón + y luego cree una nueva carpeta.

Widget de control deslizante Nivo gratuito para Weebly

Creación de una nueva carpeta en el editor de código Weebly

En este ejemplo, creamos una carpeta llamada "nivo" y cargamos los 12 archivos descargados en el paso 2.

Widget de control deslizante Nivo gratuito para Weebly

Carga de archivos en Weebly

Paso 4: insertar código en la página

Ahora vaya a la página en la que desea agregar el control deslizante Nivo e inserte el siguiente código usando el elemento "Código incrustado".

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Publique su sitio para ver el hermoso control deslizante de Nivo.

Aunque el código anterior se puede insertar usando el elemento "Código incrustado", se recomienda agregar el enlace CSS en la sección "Páginas> Tu página> Configuración de SEO> Código de encabezado".

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

Y el JavaScript en la sección "Páginas> Tu página> Configuración de SEO> Código de pie de página".

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Recuerde reemplazar las URL de las imágenes por las suyas.

Control deslizante de nivel de personalización

Efecto de transición para imágenes

El efecto de transición se controla mediante el parámetro de "transición de datos" para cada imagen. Se utilizarán efectos aleatorios cuando elimine el parámetro "transición de datos" del código HTML. Por ejemplo, el siguiente código HTML dará como resultado un efecto de transición aleatoria con un tema oscuro.

<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Puede usar uno de los siguientes 12 valores de parámetros de transición de datos para cada imagen en los controles deslizantes para tener diferentes efectos:

  • sliceDownRight
  • sliceDownLeft
  • sliceUpRight
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • pliegue
  • desvanecerse
  • boxRandom
  • caja de lluvia
  • boxRainReverse
  • cajaRainGrow
  • cajaRainGrowReverse

Usando un tema diferente

El tema del control deslizante se define mediante la clase CSS "theme-NAME". En el ejemplo anterior, el tema de la barra se utilizó como "barra de temas". Puede usar uno de los 4 temas reemplazando el nombre del tema como se muestra a continuación:

<div class="slider-wrapper theme-bar"> – This is for bar theme <div class="slider-wrapper theme-default"> -This is for default theme <div class="slider-wrapper theme-light"> -This is for light theme <div class="slider-wrapper theme-dark"> -This is for dark theme

Personalización de estilos

Todos los estilos utilizados para el control deslizante se definen en el archivo "theme-styles.css". Tiene conjuntos de estilos para cuatro temas y la envoltura del control deslizante. Puede ajustar el ancho, el tamaño de fuente y el color de los subtítulos en ese archivo.

Personalización de la secuencia de comandos

Básicamente, se utilizan dos scripts en este control deslizante: uno es la biblioteca jQuery de Google y el otro es el script de control deslizante Nivo personalizado distribuido bajo la licencia MIT. Todas las variables básicas para el control deslizante se definen en el archivo "jquery.nivo.slider.nod.js" como se muestra a continuación en la sección "// Configuración predeterminada":

  • efecto: ‘aleatorio’ – De forma predeterminada, se aplicarán efectos de transición aleatorios
  • rebanadas: 15 – La imagen se corta en 15 piezas
  • boxCols: 8 – La imagen se divide en 8 columnas
  • boxRows: 4 – La imagen se divide en 4 filas
  • animSpeed: 500 – La velocidad de animación es de 500 ms por defecto, reduzca para mover la transición más rápido
  • pauseTime: 3000 – Tiempo de pausa entre diapositivas en 3000 ms
  • startSlide: 0 – La diapositiva inicial es la primera (0) diapositiva
  • directionNav: true – Muestra los botones de navegación de dirección (falso para ocultar)
  • controlNav: true – Muestra viñetas de navegación de control (false para ocultar)
  • controlNavThumbs: false – Ocultar miniaturas de navegación en lugar de viñetas (true para mostrar)
  • pauseOnHover: true: pausa la presentación de diapositivas cuando se coloca el mouse sobre la imagen
  • manualAdvance: false: de forma predeterminada, la rotación automática está habilitada, puede habilitar el movimiento manual de imágenes
  • prevText: ‘Prev’ – Texto de la imagen anterior
  • nextText: ‘Siguiente’ – Texto de imagen siguiente
  • randomStart: false – El inicio aleatorio está deshabilitado

Nota: No elimine los comentarios de derechos de autor del archivo “jquery.nivo.slider.nod.js". Entendemos que el desarrollador original "Dev7Studios" ya no existe y el sitio está redirigiendo a un complemento de WordPress. Pero mantenga el aviso intacto como referencia. Como la función $ ya no es compatible con Weebly, hemos reemplazado todos los $ en el script con jQuery.

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