¿Cómo crear diapositivas dinámicas con Smart Slider 3 en OceanWP?

Agregar un control deslizante a su sitio web puede ser una buena opción porque da la primera impresión a sus visitantes. Pero una vez que haya decidido que desea agregar controles deslizantes a su página de WordPress, ¿cómo sabe cuál debe elegir? ¿Puedes usarlo libremente? ¿Es sencillo de manejar? ¿Puedes ponerlo en tu sitio fácilmente?

La respuesta a todas sus preguntas es sí, es posible, Smart Slider 3 puede hacer todo esto: es completamente gratuito, fácil de usar y también funciona bien con su tema OceanWP.

En este tutorial, le mostraré cómo puede importar un control deslizante de demostración, crear su propio control deslizante inteligente y cómo puede crear un control deslizante de publicación dinámica utilizando el tema OceanWP.

Instalación de Control deslizante inteligente 3

Puede instalar fácilmente Smart Slider 3 cuando vaya a Complementos → Agregar nuevo . Busque Smart Slider 3 y luego podrá instalarlo.

Otra opción es que puede descargarlo directamente desde el sitio web de Smart Slider 3 y luego puede cargarlo.

Después de eso, puede activar Smart Slider 3:

¿Cómo puedo crear mi primera diapositiva?

Importar un control deslizante de demostración es excelente, pero me gustaría mostrarle cómo puede crear su propio control deslizante. Le mostraré cómo construyo la primera diapositiva de un control deslizante de ejemplo de ancho completo.

Primero elijo la opción Nuevo control deslizante en el tablero y luego elijo el modo de ancho completo en una ventana emergente.

Establecí el tamaño del control deslizante en 1200x600px y luego creo mi control deslizante.

Después de eso, agrego una diapositiva vacía, que tiene un color de fondo degradado lineal, así que lo configuro en la pestaña Ajustes de diapositiva → fondo .

Para construir la diapositiva usaré 2 modos de edición diferentes. Uno de ellos es el modo Contenido, que funciona como un generador de páginas, y puede crear sus diapositivas rápidamente y tiene un excelente comportamiento receptivo. El otro modo de edición es el modo Canvas , donde puedes arrastrar tus capas a cualquier lugar pero debes cuidar el posicionamiento y la capacidad de respuesta.

En el control deslizante original, puede ver que el contenido está a la izquierda: el encabezado, el texto y 2 botones, y en el lado derecho hay una imagen de una computadora portátil y en esta imagen hay una capa de video de YouTube. Esta imagen y video se configurarán en el modo de lienzo porque en este modo puede colocar una capa encima o debajo de otra capa.

Establecí un ancho máximo para el contenido porque no quiero un texto de ancho completo en una línea sin interrupción, y no necesito el contenido en el lado derecho: el video estará allí. Así que lo colocaré a la izquierda. Y luego coloco el encabezado, la capa de texto y los botones en el contenido. Puse un poco más de relleno a la izquierda como en los otros lados y entre las capas puse poco margen.

Después de eso, voy a la pestaña Diseño en la configuración de la capa y establezco el color de la fuente y la familia de fuentes también. Al botón Descargar le doy un enlace de descarga y establezco un efecto de desplazamiento.

Hay muchas opciones para diseñar su propia capa y también puede hacer que responda, por ejemplo, puede configurar el relleno con un valor "em", por lo que en los dispositivos móviles, esta configuración también será buena.

Ahora el contenido está listo.

Solo tengo 2 pasos para terminar: coloco la imagen de la computadora portátil y la capa de video de YouTube en modo Lienzo en la diapositiva. Simplemente lo arrastro hacia el lado derecho y los ajusto.

Creo que esta combinación de computadora portátil + video no es tan importante para aparecer en los dispositivos móviles, así que desactivo la vista móvil.

Ahora lo verifico en las vistas receptivas y puedo ver que el encabezado y la capa de texto son más grandes de lo que quiero, así que establecí un valor más bajo para esto con el escalador de tamaño de fuente.

Ahora estoy listo con la primera diapositiva. Si quisiera usar más diapositivas para mi slider, es suficiente si duplico este slider y cambio el video o la imagen y reemplazo el texto, porque la estructura ya está hecha, así que no tengo que empezar desde el principio. paso.

¿Cómo puedo hacer un control deslizante de publicación en vivo en mi página de inicio?

Si desea resaltar su publicación, es una buena idea crear un control deslizante a partir de su publicación, que contiene la información más importante: por ejemplo, el título, la fecha de la publicación y una imagen que puede llamar la atención de sus visitantes y hacerlos léelo

Con Smart Slider 3 puede hacer un control deslizante de cambio dinámico desde una publicación, para que su sitio web pueda vivir, porque si comparte una nueva publicación, el control deslizante cambia automáticamente.

Te mostraré un ejemplo de cómo puedes configurarlo.

Después de haber importado la plantilla de control deslizante de publicación de WordPress de ancho completo, agregaré una nueva diapositiva dinámica, donde elegiré la opción Publicar por filtro.

Elijo una categoría y la ordeno por fecha de Post. Configuré 3 diapositivas, por lo que las últimas 3 publicaciones aparecerán en mi control deslizante en la categoría elegida.

Luego lo guardo y puedo personalizar el control deslizante de mi publicación.

Por defecto solo aparece el Título con la imagen destacada. Pero esto no es lo que necesito, me gustaría usar la plantilla de muestra que he importado. Puedes hacerlo en 3 pasos:

Paso 1: Copie la diapositiva de muestra

Paso 2 : pégalo en la diapositiva dinámica

Paso 3 : Cambie la imagen de fondo a la imagen destacada y cambiará dinámicamente.

Y obtienes el tema y el fondo para tu diapositiva dinámica:

Del mismo modo, puede establecer una variable dinámica para las capas en la configuración de capas. Por lo tanto, puede insertar muchas variables, como el título, la fecha, el contenido, o también puede vincular a la publicación.

Puede configurar estas variables, por ejemplo, configuré que la capa de texto dinámico muestra solo 100 caracteres de mi contenido.

Una vez que haya creado su control deslizante de publicación dinámica, debe insertarlo en su tema OceanWP.

¿Cómo puedo importar un control deslizante listo para usar?

Después de activar Smart Slider 3, puede ir al menú de Smart Slider 3 y allí verá el tablero. Puede agregar un Nuevo control deslizante o puede elegir una plantilla de la Biblioteca de plantillas aquí. Si desea crear un control deslizante rápidamente, la forma más sencilla es importar un control deslizante de demostración.

Smart Slider 3 tiene controles deslizantes de demostración gratuitos que puede agregar fácilmente a su página.

En la biblioteca de plantillas , puede elegir el control deslizante que le gustaría usar, simplemente haga clic en el botón Importar, y el tema se descargará a su tablero y podrá personalizarlo.

Uso de diapositivas de demostración

Después de agregar un nuevo control deslizante o importar uno de las plantillas, puede agregar más diapositivas a su control deslizante. Simplemente haga clic en el botón Agregar diapositiva .

Hay muchas opciones para hacer una imagen, un video o un control deslizante vacío, y también puede agregar controles deslizantes de publicación y dinámicos, o puede elegir Superposición estática, lo que significa que siempre estará sobre su control deslizante y diapositivas, y no t cambiar de distancia. Por ejemplo es una buena manera de hacer una navegación.

También puede usar diapositivas de demostración en su control deslizante, hay muchas plantillas preparadas que puede personalizar. Haga clic en la opción Biblioteca y elija la plantilla que va a utilizar.

Puede cambiar entre la piel oscura o clara y seleccionar también entre las categorías. Y después de que pueda personalizar su diapositiva, puede cambiar todo, el título, el texto, la capa y el fondo también.

¿Cómo puedo insertar mi control deslizante en mi tema OceanWP?

Insertar Smart Slider 3 en su tema OceanWP es muy simple:

Puede usar el código abreviado del control deslizante y copiarlo y pegarlo fácilmente en una publicación o página.

O con el complemento OceanWP Extra en la configuración de OceanWP, puede colocar su control deslizante antes o después de la barra superior, el encabezado, el título o el pie de página.

Y hay otra opción, puede personalizarlo con Elementor u otros creadores de páginas usando el widget Smart Slider 3.

¿Cómo hacer un encabezado personalizado con Smart Slider 3?

Al hacer un encabezado personalizado, puede usar un generador de páginas, que creo que es la forma más fácil.

Simplemente navegue hasta la pestaña Panel de temas → Mi biblioteca , luego haga clic en Agregar nuevo . (Para el Panel de temas, necesita el complemento Ocean Extra, por lo que debe agregar y activar este complemento recomendado). Si usa el generador de páginas Elementor, elija la plantilla Elementor Canvas en Atributos de publicación, y luego puede agregar su control deslizante a su tema.

Cuando esté listo con la configuración, vaya al menú Apariencia → Personalizar → Encabezado → General y elija su Encabezado personalizado . Y ahora tienes un encabezado personalizado propio.

Sin el generador de páginas, también puede crear una plantilla en el panel de temas utilizando un código abreviado.

Oferta exclusiva

La instalación de Smart Slider 3 en un sitio web de WordPress con el tema OceanWP le brinda acceso a un conjunto de herramientas poderosas para crear contenido personalizado para su sitio web. Ahora puede obtener un 30% de descuento cuando compra Smart Slider 3 Pro si usa el cupón SMARTSLIDEROCEANWP30 durante el pago.

La oferta es exclusiva y el código de cupón está disponible solo por tiempo limitado. Comienza el 10 de julio de 2018 y finaliza el 17 de julio de 2018, ¡así que tome su copia de Smart Slider 3 Pro rápidamente!

Pensamientos finales

Los controles deslizantes se pueden usar de varias maneras, debe decidir qué le gustaría obtener. Y hay muchas funciones sobre las que no escribí. En la versión Pro, hacer un control deslizante es más emocionante debido a las animaciones, las nuevas capas, los efectos de paralaje, los efectos de división de formas y muchos generadores dinámicos como Facebook o Instagram, mediante los cuales puede hacer que su sitio web esté vivo.