Cómo agregar códigos cortos a Slider Revolution

Cómo agregar códigos cortos a Slider Revolution

Este artículo es parte de nuestra serie continua de tutoriales de Slider Revolution. Puede encontrar todos los artículos de esta serie en nuestra Guía completa de revolución deslizante.

Una de las mejores cosas de WordPress es que utiliza estas pequeñas cosas llamadas códigos cortos, que ayudar a los usuarios a agregar todos los elementos sorprendentes a su sitio web. Son prácticos, ligeros, fáciles de usar y extremadamente importantes para cualquier administrador de WordPress. Así que hoy, vamos a hablar sobre cómo agregar códigos cortos a Slider Revolution.

En WordPress, los códigos cortos son pequeños fragmentos de código que se pueden colocar en el backend de su sitio web para agregar cierto elemento, funcionalidad o característica de diseño. Se pueden usar para agregar galerías, videos, elementos de diseño, secciones de página con íconos o ilustraciones, infografías como gráficos circulares, contadores, etc. Por supuesto, también se pueden usar para controles deslizantes. Los temas premium de WordPress generalmente presenta una gran selección de códigos cortos personalizados que los usuarios pueden agregar a sus páginas O controles deslizantes, con solo unos pocos clics.

Por qué agregar códigos cortos a Slider Revolution

Slider Revolution tiene posibilidades creativas casi infinitas. Aún así, a veces es más fácil simplemente copiar un código corto previamente diseñado en su control deslizante que construir las capas usted mismo desde cero. Solo piénselo: cuando desee crear un elemento complejo en Slider Revolution, puede hacerlo utilizando múltiples capas que se superponen y se unen para crear ese elemento. Sin embargo, esto también significa tienes que animar cada capa por separado, incluso si quieres que todas tengan la misma animación. Si, por otro lado, usa un código corto previamente estilizado y lo agrega al control deslizante como una capa, no tendrá que pasar por todas esas molestias. Está claro que este método es un gran ahorro de tiempo, así que veamos cómo agregar códigos cortos a Slider Revolution.

Cómo agregar códigos cortos a su control deslizante

Antes de empezar, obviamente debería elija el código corto que desea usar y pruébelo, solo para asegurarse de que se ajuste bien a sus necesidades. Acceda al código corto en su backend e insértelo en alguna página de prueba aleatoria. Luego puede copiarlo usando el modo de editor de texto y pegarlo en su control deslizante, pero más sobre eso más adelante.

Nuestro tema Goodwish puede servir como un buen ejemplo del uso de códigos cortos en controles deslizantes. Específicamente, el Hogar de Ecología, como se ve a continuación:

Cómo agregar códigos cortos a su control deslizante

Este tipo de cosas ciertamente podrían construirse usando códigos cortos en la página, sin usar el plugin, pero queríamos animarlo y encontramos que Slider Revolution es perfecto para esto.

Podemos ver que el lado izquierdo del control deslizante presenta algo de texto y un botón CTA (agregar botones en Slider Revolution es otro proceso sencillo). Por otro lado, tenemos un elemento infográfico con un contador animado. Esto fue agregado usando nuestro personalizado Código corto de gráfico circular, combinado con algo de texto encima y una forma rectangular como fondo. Un elemento como este se puede crear en Slider Revolution capa por capa, usando una capa para el círculo delgado, otra capa para el negrita, una capa para el porcentaje y una más para el texto del título a continuación.

Entonces, no solo tendríamos que agregar cuatro capas diferentes, sino que también tendríamos que animarlas, una por una. Sin embargo, el código corto del gráfico circular tiene sus propias animaciones, por lo que cuando inserta el código corto en el marco de trabajo del control deslizante, obtiene toda la funcionalidad junto con él. Viene con opciones básicas / generales como el Tipo de texto central donde puede elegir entre un porcentaje y un título; debajo tenemos un campo para el valor del porcentaje, y el tercero es para establecer el título debajo del círculo. Si no desea mantener el estilo predefinido, puede elegir su propia etiqueta de título. También hay una opción para agregar texto, pero en nuestro ejemplo, el control deslizante no usó ninguno.

Agregar códigos cortos a Slider Revolution

En el código corto de los gráficos circulares, hay una pestaña separada "Opciones de diseño". Aquí es donde puedes elige los colores preferidos para el elemento. También puede cambiar los tamaños y el margen debajo del gráfico si no le gusta la configuración predeterminada.

Elija los colores preferidos para el elemento

Una vez que haya definido todos los elementos de su shortcode, y también lo comprobé en la página en vivo, puede copiar el código cambiando al modo de edición de texto. En nuestro caso, el código es [edgtf_pie_chart type_of_central_text=”percent” percent=”90″ title=”Raised So Far” active_color=”#ffffff” inactive_color=”#f6cd7d” title_color=”#ffffff” percent_color=”#ffffff”].

Copia el código

Ahora es el momento de agregar el código corto al control deslizante. Simplemente péguelo en una capa de texto en Slider Revolution y configure las opciones de capa como lo haría con cualquier otra capa.

Pegue el código corto en una capa de texto

Y eso es prácticamente todo lo que hay que hacer. El código corto en la capa de texto se transforma en el elemento infográfico de nuestro ejemplo en el tema Goodwish, y cualquier otro código corto que decida usar hará lo mismo.

En conclusión

Agregar códigos cortos a los controles deslizantes Slider Revolution puede ser inmensamente útil en casos como el que discutimos hoy. Como vimos, le ahorra mucho tiempo que de otra manera estaría desperdiciando creando capas separadas, además de que obtiene el control total de la estilización y personalización. Todo lo que necesita hacer es encontrar un código corto que funcione para usted y modificarlo un poco para que se ajuste a sus necesidades.

Si quieres conocer otros artículos parecidos a Cómo agregar códigos cortos a Slider Revolution puedes visitar la categoría Tutoriales.

/* */ Subir

Este sitio web utiliza cookies para ofrecerle una mejor experiencia de navegación, si continua en navegando consideramos que acepta su uso.