Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.
Carrusel avanzado
Carrusel avanzado
OceanWP Rascacielos
Villas del Rey Hotel
Giovannis Pizza
Project Design
Charlies Academy
Max International
Natural Life Center
Crossway Salon
Advanced Chiropractic Services
ACPI PR
Dr Steven Roman
Yogufruti
Mofongo Italiano
Generate Press
Seguros Yazmín Irizarry
PALS
Intense
RC Joyeros
King Sandwich
Advanced Digital Image
Machete
Diseño Web
Eric Nieves Rivera
Emotion
Desnudando el Corazon
Plomeria Garcia
Jessy Rojas
Colon Pratts Rascacielo
Farmacia Central SS
Tu Anuncio Podria Estar Aqui
Las diapositivas se llaman elementos en este bloque. Has clic en el botón Agregar Elemento -Add item- para agregar nuevas diapositivas al widget de Carrusel avanzado. Puedes agregar tantas diapositivas como desees y personalizar cada una de ellas. Has clic en el elemento recién agregado

El widget Advanced Carousel muestra las diapositivas de una manera atractiva. Puede mostrar de 1 a 10 diapositivas a la vez con el widget Advanced Carousel, configurar opciones de animación versátiles, crear fondos vívidos, enriquecer el contenido de las diapositivas con una tipografía atractiva. Y puedes crear tantas diapositivas como necesites.

Muestra del widget de Carrusel Avanzado

En la imagen de abajo puedes ver la muestra del widget Carusel avanzado.

Carrusel avanzado

Contenido

Diapositivas – Slides

Las diapositivas se llaman elementos en este bloque. Has clic en el botón Agregar Elemento –Add item– para agregar nuevas diapositivas al widget de Carrusel avanzado. Puedes agregar tantas diapositivas como desees y personalizar cada una de ellas. Has clic en el elemento recién agregado para personalizarlo.

  • Elige tu imagen: has clic en el bloque para elegir la imagen que desesa usar para esta diapositiva en particular. Puedes elegirla de la biblioteca de medios existente o cargarlo desde tu disco duro.
  • Título del elemento: aquí debes ingresar el título de la diapositiva. Se mostrará debajo de la imagen agregada.
  • Descripción del artículo: en este bloque debes agregar la descripción de la diapositiva. También puedes utilizar HTML para decorar el texto.
  • Enlace del elemento: aquí puedes agregar la dirección URL. El enlace se abrirá cuando el visitante haga clic en la diapositiva.

Ajustes

carous2En este bloque, puedes aplicar configuraciones personalizadas al Carrusel avanzado, cambiar la animación de las diapositivas, las configuraciones de navegación, definir el número de diapositivas para mostrar, etc.

  • Diseño de elementos: aquí debes definir el diseño en el que se mostrarán las diapositivas. Puede aplicar Diseño simple o Diseño de Banners para mostrar las diapositivas y su contenido de diferentes maneras.
  • Altura de columnas iguales: aquí puedes habilitar o deshabilitar la opción de altura de columnas iguales para aplicar la misma altura a las columnas.
  • Efecto de animación: aquí puedes cambiar el efecto de animación de las diapositivas. Elige uno de los efectos del menú desplegable para cambiar los efectos de animación actuales.
  • Diapositivas para mostrar: define la cantidad de diapositivas que se mostrarán al mismo tiempo. Puedes mostrar hasta 10 diapositivas a la vez, o configurar “1” para usar el widget como un simple control deslizante.
  • Diapositivas para desplazarse: aquí puedes definir cuántas diapositivas deseas desplazar.
  • Mostrar flechas de navegación: en este bloque puedes agregar flechas de navegación a los lados de las diapositivas para facilitar a los visitantes el cambio de diapositiva a diapositiva.
  • Icono de flecha anterior: aquí puede seleccionar el tipo del icono de flecha, que cambia el control deslizante del widget a la diapositiva anterior.
  • Icono de flecha siguiente: aquí puedes seleccionar el tipo del icono de flecha, que cambia el control deslizante del widget a la diapositiva siguiente.
  • Mostrar navegación de puntos: aquí puedes habilitar los puntos de paginación en la parte inferior del Carrusel avanzado para proporcionar una navegación más suave de diapositiva a diapositiva.

Opciones adicionales

  • Pausa al mover: habilita esta opción para pausar el Carusel avanzado cada vez que el visitante coloque el mouse en el área del Carusel.
  • Reproducción automática: aquí puedes habilitar la opción de reproducción automática para el Carusel. Si está habilitada, la opción activa el cambio de diapositiva a diapositiva automáticamente.
  • Velocidad de reproducción automática: aquí puedes definir la velocidad del cambio de diapositiva a diapositiva (en ms).
  • Bucle infinito: activa la opción si deseas que las diapositivas se repitan.
  • Velocidad de animación: en este campo debes definir la velocidad del efecto de animación al cambiar de diapositiva a diapositiva.

Estilo

carous3En este bloque, puedes cambiar la configuración de estilo y apariencia para el widget, definir el relleno, alineación, el color de los elementos adicionales, etc.

Columna

  • Relleno de columna: aquí puedes establecer el relleno deseado para toda la columna donde se muestra el widget de Carrusel avanzado o el relleno para las partes que desees. Completa los valores para el relleno superior, inferior, derecho e izquierdo en píxeles para aplicar tu relleno personalizado.

Elementos individuales

Aquí puedes cambiar la personalización de la configuración del estilo Normal a los Elementos. Simplemente has clic en el botón de “Encima” para proceder a la personalización de los elementos.

  • Tipo de fondo: en este bloque puedes elegir si deseas usar el tipo clásico o de gradación para los elementos. Las opciones de personalización varían para cada tipo.

Tipo de fondo clásico

  • Color: aquí puedes configurar el color de fondo para los elementos con la herramienta de selección de color.
  • Imagen: aquí puedes elegir la imagen que deseas utilizar como fondo. Selecciona la imagen de la biblioteca de medios o cárgala para definirla como fondo en este bloque. Cuando se cargue la imagen, podrás definir su posición, alineación, activar la repetición y configurar el tamaño necesario.
  • Opacidad: aquí puede definir el valor de la opacidad del fondo.

Tipo de fondo de gradación

  • Color: aquí puedes configurar el color de fondo para los elementos con la herramienta de selección de color.
  • Ubicación: aquí puedes definir el lugar que determinará la proporción a usar para el primer color en el fondo.
  • Segundo color: aquí puedes configurar el segundo color para usar en el fondo.
  • Ubicación: aquí puede definir  el lugar que determinará la proporción a usar para el segundo color en el fondo en la gradación.
  • Tipo: define si deseas usar el tipo lineal o radial de la gradación.
  • Ángulo: en este bloque puede establecer el ángulo para el gradiente (en grados).
  • Opacidad: aquí puede cambiar la opacidad de fondo, donde 1 es 100% de opacidad y 0 es 0% de opacidad.
  • Tipo de borde: aquí puede definir el tipo de borde que necesita usar para el elemento.
  • Sombra de cuadro: habilite esta opción si desea acceder a la configuración avanzada de sombra para este widget y necesita aplicar sombra para ello.
  • Ajustes de sombra:
    • color: aquí puedes configurar el color de la sombra (usa la herramienta de selección de color para hacerlo);
    • desenfoque: en este bloque puedes definir la configuración de desenfoque para la sombra;
    • esparcido – aquí puedes establecer qué tan grande será la sombra;
    • horizontal: aquí puede mover la sombra horizontalmente (de derecha a izquierda);
    • vertical: aquí puede mover la sombra verticalmente (de arriba a abajo).
  • Relleno de Elementos: aquí puedes configurar el relleno para las diapositivas. Completa los valores para el relleno superior, inferior, derecho e izquierdo en píxeles para aplicar tu relleno personalizado.
  • Alineación de elementos: establece la alineación a la derecha, a la izquierda o al centro a usarse para el contenido de las diapositivas.

Tipografía del contenido

  • Color del contenido de los elementos: aquí puedes seleccionar el color preferible del contenido de las diapositivas usando el selector de color.
  • Tipografía: activa la opción para ver la configuración de la tipografía.
  • Tamaño: define el tamaño de fuente del contenido de la diapositiva.
  • Familia: aquí puedes configurar la familia de la fuente para el contenido.
  • Peso: en este bloque puedes seleccionar el peso de la fuente adecuado.
  • Transformar: aquí puedes elegir del menú desplegable, si deseas que el contenido se muestre en mayúsculas, minúsculas, mayúsculas o de manera normal.
  • Estilo: en este bloque puedes elegir en el menú desplegable el estilo de la fuente. Puede ser normal, en cursiva (los caracteres se parecen a la escritura a mano) y oblicuo (los caracteres están ligeramente inclinados hacia la derecha).
  • Altura de línea: en este campo puedes establecer la altura de las líneas del contenido de la diapositiva.
  • Espacio entre letras: aquí puedes configurar el espacio entre las letras.

Flechas del Carusel

Aquí puedes cambiar la configuración del estilo de Normal a Flechas flotantes. Simplemente haga clic en el botón Desplazar para proceder a la personalización de los elementos de desplazamiento.

  • Color de fuente: defina el color de los controles de flecha con la herramienta de selección de color.
  • Tipo de fondo: en este bloque puede elegir si desea usar el tipo clásico o degradado para los elementos simples. Las opciones de personalización varían para cada tipo.
  • Tamaño de fuente: aquí puede seleccionar el tamaño de los controles de fuente de flecha en píxeles.
  • Tamaño de cuadro: aquí puede seleccionar el tamaño del cuadro de control de flecha en píxeles.
  • Tipo de borde: aquí puede definir el tipo de borde que necesita usar para el elemento.

Puntos de paginación

Aquí puede cambiar la configuración del estilo de Normal a Hover Pagination Dots. Simplemente haga clic en el botón Desplazar para proceder a la personalización de los elementos de desplazamiento.

Posición de flecha Anterior

  • Posición vertical por: define la posición vertical para la flecha anterior. Se puede colocar en la parte superior o inferior.
  • Sangría superior: define la sangría de posición vertical en píxeles o use los controles para definir la posición adecuada automáticamente.
  • Posición horizontal por: define la posición horizontal para la flecha anterior. Se puede colocar a la izquierda oa la derecha.
  • Sangría izquierda: defina la sangría de posición horizontal en píxeles o use los controles para definir la posición adecuada automáticamente.

Posición de flecha Siguiente

  •     Posición vertical por: define la posición vertical para la flecha siguiente. Se puede colocar en la parte superior o inferior.
  •     Indentación superior: define la indentacion de posición vertical en píxeles o usa los controles para definir la posición adecuada automáticamente.
  •     Posición horizontal: define la posición horizontal para la flecha. Se puede colocar a la izquierda o a la derecha.
  •     Indentación derecha: define la indentación de posición horizontal en píxeles o usa los controles para definir la posición adecuada automáticamente.

Puntos de la Paginación del Carusel

Aquí puede cambiar la configuración del estilo de Normal, Encima y Activo de la paginación. Simplemente has clic en el botón deseado para proceder a la personalización de los elementos de desplazamiento.

  •     Color de fuente: define el color de los puntos de paginación con la herramienta de selección de color.
  •     Tipo de fondo: en este bloque puedes elegir si deseas usar el tipo clásico o de gradación para los elementos. Las opciones de personalización varían para cada tipo.
  •     Tamaño de fuente: aquí puedes seleccionar el tamaño de fuente en píxeles.
  •     Tamaño del cuadro: aquí puedes seleccionar el tamaño del cuadro de control de flecha en píxeles.
  •     Tipo de borde: aquí puedes definir el tipo de borde que necesitas usar.
  •     Sombra de cuadro: habilita esta opción si deseas acceder a la configuración avanzada de sombra para este widget y necesitas aplicar la sombra.
  •     Espacio: aquí puedes definir el espacio entre los puntos de paginación en píxeles, o usar los controles para configurarlo automáticamente.
  •     Margen de cuadro de puntos: aquí puedes definir los márgenes para el cuadro de los puntos.
  •     Alineación: establece la alineación derecha, izquierda o central para utilizarla en los puntos.
Cómo Evalúas este Tutorial​
/5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicaciones que también podrían interesarte

El widget de Navegación por Desplazamiento

El widget de Navegación por Desplazamiento

El widget de Navegación por Desplazamiento o Scroll Navigation…
Cómo añadir una búsqueda AJAX con JetSearch

Cómo añadir una búsqueda AJAX con JetSearch

Play Video El Formulario de búsqueda AJAX es un…
Cómo crear un Mega-Menú

Cómo crear un Mega-Menú

Existen términos que nada más el leerlos nos resultan…