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

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

1

La presentación de diapositivas de encabezado es una característica maravillosa que le da un aspecto profesional a su sitio. Esta es una función profesional en Weebly y está disponible solo para temas que no responden. Los usuarios gratuitos también pueden utilizar métodos alternativos para modificar HTML / CSS y lograrlo. En este artículo explicamos cómo agregar la presentación de diapositivas de encabezado de Nivo en su sitio Weebly gratuito.

Nivo es un control deslizante de jQuery popular y tenemos un widget gratuito para agregar presentaciones de diapositivas en el área de contenido. Aquí usaremos el mismo widget deslizante de Nivo con modificaciones menores para agregarlo en el área de encabezado de los temas sensibles de Weebly. Puede ver los cuatro estilos diferentes de demostración haciendo clic en los botones siguientes:

En este ejemplo, hemos utilizado cuatro imágenes. La segunda imagen (up.jpg) está vinculada a una página web y tiene una leyenda de texto simple. La cuarta imagen (nemo.jpg) tiene una leyenda de texto con un hipervínculo.

Paso 1: listo con tus imágenes

Las demostraciones anteriores utilizan el tema Weebly sensible "Ace Soccer – Birdseye" y las imágenes se utilizan con el tamaño de 618 x 246 px. Recomendamos utilizar imágenes de mayor resolución con una relación de ancho y alto similar para una mejor calidad.

Paso 2: descargar y cargar archivos deslizantes

Descargue todos los archivos de control deslizante necesarios. Inicie sesión en su sitio Weebly y vaya a la sección "Tema> Editar HTML / CSS> Activos". Cree una nueva carpeta llamada "nivo".

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

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

Cargue todos los archivos del control deslizante en la carpeta "nivo". Recuerde que hay cuatro imágenes de demostración como parte del archivo de almacenamiento, siempre puede reemplazar las imágenes con sus propias imágenes.

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

Carga de archivos en Weebly

Haga clic en el botón + en la pestaña "Tipo de encabezado" y cree un nuevo tipo de encabezado llamado "Nivo-Bar". Queremos agregar la presentación de diapositivas del encabezado Nivo con el tema Bar en este tipo de encabezado.

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

Creación de un nuevo tipo de encabezado

Copie todo el contenido de "no-header.html" y péguelo dentro del tipo de encabezado "Nivo-Bar.html".

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

Nuevo tipo de encabezado para presentación de diapositivas

Hay tres partes que se deben agregar en el diseño “Nivo-Bar.html": CSS, Scripts y HTML. Inserte el CSS a continuación dentro de la sección principal del diseño.

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

Debería verse como a continuación en el editor:

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

Insertar CSS en el tipo de encabezado

Inserte los siguientes scripts justo antes del cierre de la etiqueta del cuerpo.

<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>

Debería verse como a continuación en el editor:

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

Insertar scripts en el tipo de encabezado

La parte final es insertar el siguiente código HTML justo encima de la sección "main-wrap". Asegúrese de reemplazar las URL de la imagen y el hipervínculo por las suyas.

<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" /> <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>

Debería verse como a continuación en el editor:

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

Insertar HTML en el tipo de encabezado

El código final del tipo de encabezado "Nivo-Bar.html" debería ser como el siguiente. Recuerde que esto está en un sitio gratuito de Weebly y que el tema que hemos utilizado es "Ace Soccer – Birdseye".

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> </head> <body class='no-header-page page-has-banner wsite-theme-dark'> <div class="wrapper"> <div class="birdseye-header"> <div class="nav-wrap"> <div class="container"> <div class="logo">{logo}</div> <div class="nav desktop-nav">{menu}</div> <label class="hamburger"><span></span></label> </div> </div> </div> <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" /> <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> <div class="main-wrap"> {{#sections}} <div class="container">{content}</div> {{/sections}} </div> <div class="footer-wrap"> <div class="container"> <div class="footer">{footer}</div> </div><!-- end container --> </div><!-- end footer-wrap --> </div><!-- /.wrapper --> <div id="navMobile" class="nav mobile-nav"> <label class="hamburger"><span></span></label> {menu} </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> <script type="text/javascript" src="/files/theme/plugins.js"></script> <script type="text/javascript" src="/files/theme/custom.js"></script> </body> </html>

Guarde los cambios y publique su sitio.

Cuando desee la presentación de diapositivas del encabezado en una página, elija el tipo de encabezado "Nivo-Bar" en la pestaña "Páginas" para esa página específica.

¿Cómo crear una presentación de diapositivas de encabezado en un sitio gratuito de Weebly?

Elección del tipo de encabezado para una página específica

La presentación de diapositivas se ofrece con 4 temas diferentes y 12 efectos de transición de imágenes. El tema se puede cambiar cambiando la clase CSS en el código HTML. En el ejemplo anterior, tenemos el tema de la barra de usuario con la clase CSS "theme-bar", alternativamente puede usar "theme-default", "theme-dark" o "theme-light". También puede crear cuatro tipos de encabezados diferentes y elegir el estilo de tema requerido para diferentes páginas.

De forma predeterminada, se aplicará un efecto de transición aleatoria a cada imagen. Puede mencionar el tipo de transición específico para cada imagen utilizando la función "transición de datos" en el HTML. A continuación se muestra un código HTML de ejemplo que utiliza un efecto de transición diferente para cada imagen con el tema predeterminado.

<div class="slider-wrapper theme-default"> <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="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>

Puede leer las opciones de personalización completas para modificar el efecto de transición, el tema, la velocidad de la animación, los controles de navegación y agregar miniaturas.

¿Busca un control deslizante de estilo acordeón como se muestra a continuación? Aprenda a agregar un control deslizante de acordeón a su sitio 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