Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

¿Quiere configurar el complemento WordPress Slider Revolution?

Desde el comienzo de esta serie de tutoriales dedicados al complemento de WordPress  Slider Revolución, aprendimos a descargar e instalar el complemento. A continuación, descubrió su interfaz y sus diferentes funcionalidades. Ahora, sigamos mostrándole las configuraciones de un "Control deslizante".

Si es un principiante y está buscando recursos para comenzar; encontrará aquí todo lo que necesita para comenzar. Y si descubres la creación del blog, lee Cómo crear un blog de WordPress fácilmente: Guía y Tuto

Dicho esto, averigüemos qué es un control deslizante.

¿Qué es un control deslizante en la práctica?

Un control deslizante es un componente HTML. Sí, lo sé, dicho así, no le reporta mucho beneficio. Entonces, un control deslizante es una función que le permite mostrar información diversa en un bucle (o no). Esta información está agrupada por " diapositiva ", Que es una entidad de un" control deslizante "y que puede constar de imágenes, textos de video, enlaces, etc.Slider revolution - complemento de WordPress Slider Revolution

La " control deslizante "Por lo tanto contiene" diapositivas (Al menos 1), y estas diapositivas contienen elementos multimedia (imágenes, video, música, texto) que puede ser animada o interactiva (reaccionar a las acciones del usuario).

Observación : Puedes traducir " deslizadores En " diapositivas interactivas y dinámicas ".

Slider Revolution nos permite hacer eso, y comenzaremos sin más demora.

Si aún no ha creado un sitio web y está buscando un tema de WordPress que integre de forma nativa este poderoso complemento de WordPress, esta lista de temas premium de WordPress será perfecta.

Creación de un control deslizante: primeras configuraciones

Para comenzar, debes hacer clic en el menú " Slider Revolution En su panel de WordPress.

Revolución deslizante wordpress

Ahora haga clic en el elemento Slider nueva Y llegará a la interfaz de configuración del control deslizante.

nueva-slider-slider-revolución-tutorial

La interfaz de configuración del control deslizante puede ser intimidante, pero si da un paso atrás comprenderá mejor su funcionalidad. Puede notar que esta interfaz consta de dos secciones. La primera a la izquierda consta de 5 áreas diferentes y la segunda a la derecha consta de 6 áreas pequeñas. Justo encima tienes la barra de herramientas, que te permite:

  • Volver a la lista de controles deslizantes « Todos los Sliders »
  • Acceder a la configuración del control deslizante (esta es la ventana en la que estás)
  • La interfaz de edición de diapositivas.
  • Un botón de copia de seguridad
  • Un botón de edición de diapositivas
  • Un botón de vista previa del control deslizante
  • Un botón de eliminación de control deslizante
  • Un botón para volver (de nuevo) A la lista de los deslizadores

barra de herramientas de la revolución-deslizador

Ahora voy a explicar cada sección de la columna izquierda.

Este complemento de WordPress manipula muchas imágenes, lo que podría ralentizar la carga de su sitio web. Descubrir ¿Por qué necesitas comenzar a optimizar tu blog de WordPress por imágenes?

la sección "Fuente del contenido"

contenido de código revolución-slider

Esta sección le permite configurar la fuente del control deslizante. De hecho, aquí puedes decidir crear:

  • Un control deslizante clásico, en el que tendrás que configurar todas las animaciones tú mismo
  • Un control deslizante de artículos, en el que su espacio de maniobra es bastante limitado
  • Un control deslizante de artículos específicos que puede elegir
  • Un control deslizante de las noticias de Flickr
  • Un control deslizante del feed de Instagram
  • Un control deslizante sobre los productos de WooCommerce
  • Un control deslizante de la cuenta de Twitter
  • Un control deslizante en las publicaciones de Facebook
  • Un control deslizante en YouTube Publicaciones
  • Y un deslizador sobre las publicaciones de Vimeo.

Cabe señalar de paso que: Slider Revolution es un poderoso complemento que permite resaltar productos en una tienda en línea. Descubre el Temas de 10 WordPress para crear una tienda en línea y exhibir tu ropa

Dicho esto, nos contentaremos con presentar cómo crear un control deslizante clásico, porque es el más utilizado, el más difícil de dominar y el más extraordinario en sus efectos. Con práctica, podrá realizar sus propias configuraciones en otros controles deslizantes. En caso de problemas, no dude en volver y dejar un comentario aquí. Así que deja la opción " Control deslizante predeterminado "Activo.

La sección Slider Title & Shortcode

Probablemente lo hayas adivinado. Esta sección le permite definir el título del control deslizante y el código corto que lo acompañará (nada demasiado científico).

título y código corto-du deslizador

La sección "Seleccionar un tipo de control deslizante"

seleccione su tipo-de-slider-slider-revolución

Esta sección le permite definir la estructura básica del control deslizante. De hecho, tienes a tu disposición 3 opciones para elegir que te permiten:

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

  • Para la primera opción, defina un control deslizante predeterminado con anchos adaptados al espacio disponible y que tengan elementos básicos como botones de navegación.
  • Para la segunda opción, puedes optar por aplicar un estilo dinámico e interactivo, sin botón de navegación y mucho más imponente que la opción anterior. Esta opción se llama "escena de héroe" porque aquí pondrás más énfasis en las animaciones y la interacción.
  • La última opción ofrece un estilo mucho más clásico con un desplazamiento simplificado de las imágenes de izquierda a derecha en animaciones bastante variadas.

Observación : Cada vez que elige una opción, tiene una sección "Cargar un preset desde este tipo de control deslizanteQue le ofrece variaciones avanzadas del tipo de control deslizante que ha elegido.

cambiar-de-tipo-de-deslizador

No podré explicar todas las variaciones, pero podrá sacar conclusiones de las imágenes disponibles. Por ejemplo, para el tipo de control deslizante " Estándar Tienes como cuarta variación " Pulgares auto Bottom ", Que le permite crear un control deslizante con miniaturas en la parte inferior y tiene una animación de desplazamiento automático.

pulgar hacia abajo auto-regulador-revolución-tutorial

La sección "Diseño de diapositiva"

deslizador-layout-revolución-deslizador

Esta sección le permite establecer un diseño para su control deslizante. Entonces puedes irte Revolución deslizante »Elija automáticamente los anchos que se aplicarán al control deslizante, elija aplicar el ancho completo al control deslizante o use el control deslizante en modo de pantalla completa.

Dependiendo de la opción que elija, su control deslizante será diferente en algunos dispositivos. A continuación tiene una sección de configuración de la red según los dispositivos (móviles, de escritorio, etc..). Tenga en cuenta que la configuración de la cuadrícula le permite cambiar los márgenes internos de cada control deslizante.

Lee tambien Consejos de 6 para optimizar el diseño móvil de tu blog

En la parte inferior de esta sección, puede elegir habilitar la visibilidad de desbordamiento, habilitar la retención de la apariencia de la radio y establecer una altura mínima.

La sección "Personalizar, construir e implementar"

Esta sección en realidad no tiene una opción para el complemento. Le ofrece algunos enlaces rápidos a secciones importantes.

modificar-acumulación Implementar

Ahora continuaremos con la segunda columna a la derecha.

La sección de configuración general

Esta sección le ofrece algunas configuraciones que se aplicarán al control deslizante. Así es como puedes:

En la pestaña "Presentación de diapositivas"

  • Deshabilitar el control deslizante en el paso elevado
  • Detenga el control deslizante después de un número determinado de pergaminos
  • Mostrar diapositivas al azar
  • Loop la diapositiva
  • Deshabilitar o detener el control deslizante en cierto tamaño del dispositivo
  • La última opción "Esperar revapi.revstart ()", no te será de utilidad.

En la pestaña "Fallos"

Puede definir:

  • El carácter seleccionable de las capas.
  • Defina el identificador del control deslizante (se hace automáticamente)
  • La duración mínima entre diapositivas
  • El tiempo de espera antes de la inicialización
  • La transición entre las diapositivas
  • La duración de la transición expresada en microsegundos.
  • El tamaño de la imagen
  • La posición CSS de la imagen de fondo.
  • Repetir la imagen de fondo, si esta imagen no es lo suficientemente grande
  • Activación de la opción " Muette de vídeo Lo que le permite definir el tipo de animación, las posiciones en un XY (sí, lo que aprendes cuando tienes que dibujar funciones matemáticas) y otros elementos.

La pestaña de la barra de progreso

Todas las opciones en esta sección corresponden a la barra de progreso, que puede habilitar y personalizar.

La pestaña 1er diapositiva

Esta sección le permite activar una primera diapositiva alternativa. Esto permitirá el " control deslizante Para cargar un " diapositiva De tu elección primero. Recuerda que " diapositivas Son elementos que se pueden identificar.

La sección "Diseño y visual"

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

diseño-y-visuales

La pestaña "Apariencia"

Esta sección le permite configurar la apariencia del control deslizante. En particular, puede definir mostrar una sombra debajo del control deslizante (muy útil si elige el control deslizante predeterminado, con un margen bajo significativo).

También puede optar por mostrar una capa superpuesta cubierta con puntos transparentes (esto hará que su control deslizante sea muy original, pero si desea mostrar información que deberá leerse detenidamente, tendrá que pasar sin).

Luego tiene el fondo del control deslizante, el margen interno y la imagen en el fondo (lo que necesita saber aquí es que se mostrará una imagen de fondo en este nivel en todos sus diapositivas).

la pestaña "Spinner"

Esta pestaña le permite definir una animación mientras carga el control deslizante, nada más.

la pestaña "Móvil"

Esta pestaña le permite administrar la visualización del control deslizante en el móvil. Debe saber que el tráfico móvil es importante y, por lo tanto, no debe descuidarlo. Tendrá la posibilidad de ocultar el control deslizante si las dimensiones del móvil (ancho) son inferiores a la cifra que ha determinado (en píxeles).

la pestaña "Posición"

Esto le permite determinar la posición del control deslizante en relación con la página. Voy a tender a decir, en relación con la ubicación donde se encuentra. Esta opción no necesita ser modificada, porque supongo que todos queremos que el control deslizante esté centrado.

Sección "Navegación"

Esta sección le permite activar los botones de navegación entre las diapositivas en su "control deslizante". Tienes 6 opciones de navegación:

  • Las flechas
  • simples
  • fichas
  • miniaturas
  • El efecto del touchdown en dispositivos móviles
  • Y navegar con las teclas de flecha

Cada opción, cuando está habilitada, le permitirá configurar la posición de los elementos de navegación o su principio operativo (la configuración predeterminada suele ser suficiente).

configuración de navegación-revolución-slider

Sección "Configuración del carrusel"

parámetro-du sección carrusel-revolución-slider

Esta sección aparece solo cuando elige el tipo " Carrusel deslizante », Y te permite configurar sus opciones. Usted será capaz de:

  • Habilitar desplazamiento infinito
  • Defina un espacio entre las diapositivas, si no desea que las diapositivas se toquen
  • Establecer un borde redondeado en píxeles
  • Establecer un margen superior alto (acolchado superior)
  • Establecer un margen superior bajo (padding-bottom)
  • El número de elementos visibles por "diapositiva"
  • « elemento de tramo", Le permite estirar el elemento para que ocupe todo el ancho del" control deslizante »

La seguridad es un elemento importante en el tiempo de actividad de su sitio web y una de las técnicas que lo protegerá contra ataques o errores graves es realizar copias de seguridad periódicas de su blog. Descubra nuestro Complementos de copia de seguridad del blog 5 WordPress

Sección "Parallax y 3D"

Aquí puedes activar la opción " 3D En tu control deslizante.

Sección "Problema y manejo"

Esta sección le permite gestionar la compatibilidad con dispositivos antiguos. Puede simplificar el control deslizante en " IOS4 e Internet Explorer 8 ".

De lo contrario, puede optar por mostrar una imagen alternativa, cuando el navegador no admite el control deslizante.

Sección "Fuentes de Google"

Esta función le permite administrar las fuentes de Google Fonts que habrá descargado y aplicarlas al control deslizante.

Una vez que haya definido los parámetros de su control deslizante. Todo lo que tienes que hacer es hacer clic en el botón de grabar.

Save-A-slider-slider-revolución

Si el plugin WordPress Slider Revolution no es tu favorito a la hora de crear sliders en sitios web de WordPress, aquí te ofrecemos dos alternativas capaces de ofrecer una funcionalidad similar.

1. LayerSlider

LayerSlider es un complemento de animación multipropósito premium de WordPress. Te da la opción de crear presentaciones de diapositivas y galerías de imágenes con efectos asombrosos, páginas de destino y bloques de páginas bellamente animados, o incluso un sitio web completo.Layerslider wordpress plugin crear control deslizante 1

Es una de las alternativas capaces de competir de cerca con Slider Revolution. Su editor visual de arrastrar y soltar lo hace muy intuitivo para que cualquiera pueda comenzar a usarlo. No se requieren habilidades técnicas o de codificación. Su selección cada vez mayor de modelos importables es un punto de partida ideal para nuevos proyectos y cubre todos los casos de uso comunes. Están hechas con cuidado y se pueden personalizar fácilmente para satisfacer todas las necesidades.

El excelente soporte y las actualizaciones frecuentes aseguran que aproveches al máximo tu compra.

Ve más allá con este poderoso plugin de WordPress leyendo este artículo Layer Slider: un plugin de WordPress para crear un control deslizante

Descargar | Demo | alojamiento web

2. Control deslizante WP1

WP1 Slider es un complemento versátil de WordPress. Es fácil de usar y tiene todas las características útiles que necesitará para crear hermosas presentaciones de diapositivas. La mayoría de los complementos de control deslizante son demasiado técnicos y necesitan mucho tiempo para configurarlos, pero WP1 Slider está diseñado para no programadores y ofrece opciones increíbles.Wp1 slide pro plugins de wordpress crear presentaciones de diapositivas diapositivas de sitios web

Entre estos encontrarás: elupport de efectos Kenburn, 6 diferentes modelos de transiciones deslizantes, elupport de shortcodes, a cinicio de diapositivas por arrastrar y soltar, la cAcoso rápido y excelente SEO, elsoporte para compartir en varias redes sociales, el iintegración de videos de YouTube y Vimeo, un diseño electrónicototalmente receptivo, el apoyo de WooCommerce y otros.

Descargar | Demo | alojamiento web

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

Conclusión

Listo ! Eso es todo por esta presentación sobre la configuración del complemento de WordPress Slider Revolution. Continuaremos en un tutorial futuro, donde discutiremos el diseño de diapositivas.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero, si tiene algún comentario o sugerencia al respecto, será bienvenido en la sección de comentarios. Comparta especialmente este artículo sobre sus diferentes las redes sociales.