El módulo deslizante Divi estándar es un potente control deslizante. Las características incluyen un encabezado, botón, texto, medios, enlace, fondo, superposición y más. ¿Qué sucede si desea 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 los controles deslizantes. También incluye el módulo AS Menu que se puede usar junto con el módulo deslizante para crear:
- Pestañas
- Carruseles
- Secciones Interactivas
- Cambios 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 Anything Slider puede hacer. Las imágenes son de Unsplash.com.
- Consulte CakeWP.com para obtener información sobre compras.
Cargue y active el complemento como lo haría con cualquier complemento premium. Una vez que esté activado, desplace el cursor sobre el menú Complementos en el Tablero y seleccione Licencia de Anything Slider. 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.
Cualquier configuración del módulo deslizante
Las configuraciones incluyen nuevas diapositivas, controles siguiente/anterior, controles de puntos, mostrar controles al pasar el mouse, control deslizante 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, puntos de colores y más.
Ajustes de diapositivas de Anything Slider
Haga clic en Agregar nueva diapositiva. Aquí verá un menú desplegable llamado Diseño de diapositiva donde 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 cargado.
Las configuraciones 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 de menú haciendo clic en Agregar nuevo elemento de menú. Pegará la URL, elegirá un ícono, elegirá 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. Importarlos a la Biblioteca Divi para usarlos.
Creación de un control deslizante personalizado
Creé algunos diseños propios y seleccioné cada uno como una diapositiva. Puede agregar tantas diapositivas como desee. Creo que es mejor etiquetarlos para que sepa qué diapositiva es cuál si desea realizar cambios.
Esta diapositiva incluye una imagen y un mostrador de barra. Puede ver la navegación de puntos en la esquina izquierda y los controles deslizantes en ambos lados. En este ejemplo, mi mouse está 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 de entrada y salida. Tiene cerca de 80 animaciones que incluyen todos los elementos básicos, como rebote, banda 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.
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 flotante 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, el centro o la derecha para arriba o para abajo. También puede apagar cada uno de ellos si lo prefiere. Entre los botones y puntos tiene muchas combinaciones para las opciones de diseño.
El módulo AS Menu es excelente 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 a través de las diapositivas. Las diapositivas 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 de URL de la diapositiva uno 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 AS Menu en la parte superior. El menú se muestra en orientación horizontal. El relleno con colores de fondo crea cuadros alrededor del texto. Usando 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 cuando considera las características de imagen e 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 ¼ a la izquierda y Anything Slider en ¾ 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 solos.
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 del blog como diapositivas individuales. He desactivado los controles siguiente/anterior y punto.
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 girar 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.
Cualquier cosa Control deslizante Documentación
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 usar 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 desea.
Nos gustaría saber de usted. ¿Has usado Anything Slider? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de VectorsMarket / shutterstock.com