Resaltado del complemento Divi: control deslizante de cualquier cosa

El módulo deslizante estándar Divi es un control deslizante potente. Las características incluyen un encabezado, botón, texto, medios, enlace, fondo, superposición y más. ¿Qué pasaría si quisiera crear diseños con Divi Builder y colocarlos dentro de la diapositiva? Eso es exactamente lo que hace Anything Slider.

Anything Slider es un complemento de terceros de CakeWP que le permite usar diseños Divi dentro de las diapositivas. Puede hacer mucho más con él que solo controles deslizantes. También incluye el módulo de menú AS que se puede utilizar junto con el módulo deslizante para crear:

• Pestañas
• Carruseles
• Secciones interactivas
• Cambio de precios
• Galerías filtrables
• CTA interactivos
• Productos filtrables
• Una página web

Anything Slider funciona con Divi, Extra y el complemento Divi Builder. En este complemento destacado, veremos lo que puede hacer Anything Slider. Las imágenes son de Unsplash.com.

• Consulte CakeWP.com para obtener información sobre compras.

Instalación del control deslizante Anything

Cargue y active el complemento como lo haría con cualquier complemento premium. Una vez que esté activado, coloque el cursor sobre el menú Complementos en el Panel de control y seleccione Cualquier licencia de control deslizante. Ingrese su clave de licencia y seleccione Activar licencia. A continuación, seleccione Guardar cambios.

Se agregan dos nuevos módulos a Divi Builder: Anything Slider y AS Menu. Juntos pueden crear algunos diseños interesantes.

Configuración del módulo Anything Slider

La configuración incluye nuevas diapositivas, controles siguientes / anteriores, controles de puntos, mostrar controles al pasar el mouse, deslizador de bucle, animación, altura, arrastre del mouse, etc. La pestaña Diseño incluye estilos personalizados para los controles Siguiente y Anterior, número de diapositivas por pantalla, margen entre diapositivas, colores de puntos y más.

Configuración de diapositivas de Anything Slider

Haga clic en Agregar nueva diapositiva. Aquí verá un menú desplegable llamado Diseño de diapositiva donde podrá elegir los diseños para las diapositivas. Estos pueden ser diseños prefabricados, diseños que ha creado y guardado en la biblioteca o diseños que ha subido.

Configuración del módulo deslizante del menú AS

Los ajustes incluyen la orientación del menú, la alineación, etc. La pestaña Diseño incluye fuentes, espaciado, fondos, colores y más. Creará los elementos del menú haciendo clic en Agregar nuevo elemento del menú. Pegarás la URL, elegirás un icono, elegirás una imagen, etc.

Kits de inicio de Anything Slider

Anything Slider utiliza diseños para crear las diapositivas. Para ayudarlo a comenzar, hay muchos kits de inicio y paquetes de diseño gratuitos que puede descargar desde el sitio web del desarrollador. Impórtelos a la Biblioteca Divi para usarlos.

Crear un control deslizante personalizado

Creé algunos diseños propios y los seleccioné como diapositivas. Puede agregar tantas diapositivas como desee. Creo que es mejor etiquetarlos para que sepa qué diapositiva es cuál si desea hacer cambios.

Esta diapositiva incluye una imagen y un mostrador de barras. Puede ver la navegación por puntos en la esquina izquierda y los controles deslizantes en ambos lados. En este ejemplo, mi mouse se desplaza sobre el botón de navegación izquierdo. Todos los estilos son personalizables.

Animaciones

Las diapositivas se pueden animar y puede hacer que se deslicen automáticamente o no. Incluye animación para entrar y salir. Tiene cerca de 80 animaciones que incluyen todos los elementos básicos como rebote, goma elástica, gelatina, pulso, sacudida, tada, bamboleo, balanceo, desvanecimiento, volteo, rotación, zoom y mucho más. Puede hacer que la animación se detenga al pasar el mouse.

Botones de navegacion

Los botones de navegación se pueden diseñar de forma independiente. Estilo tanto normal como flotante para los iconos, bordes, colores, etc.

En este ejemplo, diseñé el botón de navegación de forma independiente y aumenté el tamaño de los puntos (puede especificar cualquier tamaño en píxeles que desee para los puntos). La animación de desplazamiento cambia el color y el radio del borde. Incluye las mismas características de estilo que la mayoría de los módulos Divi.

Los botones y puntos se han movido a la derecha con los botones en la parte superior y los puntos en la parte inferior. Puede colocarlos en ambos lados o en la izquierda, en el centro o en la derecha para arriba o abajo. También puede desactivar cada uno de ellos si lo prefiere. Entre los botones y los puntos, tiene muchas combinaciones para las opciones de diseño.

Módulo de menú AS

El módulo AS Menu es ideal para agregar más opciones de navegación y puede usar íconos e imágenes. Incluye opciones de orientación horizontal y vertical y se puede diseñar como cualquier otro módulo.

El módulo AS Menu crea un menú para que sus visitantes puedan navegar por las diapositivas. Las diapositivas en sí incluyen una etiqueta de navegación al final de la URL (en la barra de direcciones de su navegador). Utilice esta etiqueta para cada elemento del menú. En este ejemplo, la etiqueta URL de la diapositiva es # s_1.

Coloqué el menú en la parte inferior, aumenté el tamaño de la fuente y agregué un fondo para que se destaque. Se puede hacer clic en las palabras, pero en este ejemplo no parecen botones. Eso es fácil de cambiar.

Agregué un relleno personalizado y ajusté los colores de fondo y de desplazamiento.

También eliminé los botones de navegación del control deslizante y coloqué el módulo de menú AS en la parte superior. El menú se muestra en orientación horizontal. El relleno con colores de fondo crea cuadros alrededor del texto. Con el relleno, puede hacer que los botones sean tan grandes como desee.

Ajusté el diseño a 2 columnas (3/4 + 1/4) y coloqué la orientación del menú en vertical.

El menú lateral crea algunas posibilidades interesantes, especialmente si se consideran las características de la imagen y el icono del módulo. Veamos qué podemos hacer con esto.

Crear una página única

Puede crear páginas completas usando el control deslizante y luego deslizarse entre ellas automáticamente, con la navegación de botones y puntos, o con el módulo de menú. Para este ejemplo, creé una nueva página de ancho completo con un módulo de menú AS en 1/4 a la izquierda y el control deslizante Anything en 3/4 a la derecha. Agregué una imagen de fondo a la sección con una superposición para ayudar a describir visualmente el sitio web de un vistazo.

Para este ejemplo, quería usar la función de imagen del módulo AS Menu. Para este menú, estoy agregando imágenes para cada uno de los elementos del menú. También incluye iconos, que se pueden utilizar con las imágenes o por sí mismos.

Para las diapositivas, creé diseños con un solo módulo de blog con una sola categoría seleccionada.

El módulo AS Slider mostrará todos los diseños de blogs como diapositivas individuales. Apagué los controles de punto y siguiente / anterior.

El control deslizante muestra el módulo de blog para cada categoría, mientras que el menú de la izquierda, que está configurado en orientación vertical, muestra imágenes para las categorías y funciona como navegación entre las diapositivas. El control deslizante está configurado para rotar a través de las diapositivas para mostrar la última publicación de cada categoría. Esto significa que toda la página de inicio, con la excepción de la navegación, es un control deslizante. Por supuesto, el menú también se puede colocar arriba, abajo o a la derecha.

Documentación de Anything Slider

La documentación se proporciona en el sitio web de CakeWP e incluye una descripción general con imágenes y varios videos, incluida una guía de inicio y un tutorial. También incluye demostraciones para ayudarlo a darle ideas sobre cómo usar los módulos.

Licencia, soporte y actualizaciones

El complemento se puede utilizar en sitios web para usted y sus clientes según la licencia que elija. Hay tres licencias para elegir:

• 1 sitio - $ 30.00
• 5 sitios - $ 50.00
• Sitios ilimitados - $ 120.00

Todas las licencias incluyen un año de soporte y actualizaciones.

• Consulte CakeWP.com para obtener información sobre compras.

Pensamientos finales

Anything Slider es un módulo interesante. La capacidad de usar diseños Divi como diapositivas abre muchas posibilidades de diseño. Me gusta especialmente usar imágenes en el módulo de menú. Los módulos son fáciles de usar y la documentación proporciona instrucciones paso a paso para comenzar.

Si está interesado en expandir sus controles deslizantes más allá del control deslizante Divi estándar, Anything Slider podría ser el complemento que desee.

Nos gustaría saber de ti. ¿Has usado Anything Slider? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de vectorsMarket / shutterstock.com