Image Slider Comparison - Before After - Elementor WordPress Tutorial

Summary

En este vídeo se muestra cómo crear un control deslizante 'antes y después' con muy poco código. Se inicia con una página en blanco y se introduce HTML para luego añadir el código que realiza la magia. El script utiliza 'Center Center' para asegurar una correcta alineación. Se utiliza JavaScript y se proporciona un enlace en la descripción del vídeo para obtener el código y versiones alternativas, como sliders horizontales o estilos modificados. El proceso es simple, utilizando dos imágenes y definiendo su ancho y alto. No se requiere ningún complemento adicional.

Takeaways

• 🛠️ Se enseña cómo crear un control deslizante de antes y después con muy poco código.
• 📄 Se comienza con una página en blanco y se agrega HTML para el contenedor.
• 💻 Se utiliza código JavaScript para realizar la función del deslizador.
• 🔗 En la descripción del vídeo se proporciona el enlace al código y sus versiones alternativas.
• 🎨 Se puede modificar el estilo del deslizador para que sea horizontal u otro estilo específico.
• 📸 Se utilizan dos imágenes, que pueden estar en una biblioteca de medios o en un CDN.
• 🌐 El código extrae las URLs de ambas imágenes para mostrarlas en el deslizador.
• 📏 Se definen las dimensiones de ancho y alto para que ambas imágenes sean coherentes.
• 🚀 El proceso es rápido y sencillo, no requiere plugins adicionales.
• 📢 Se invita a suscribirse, compartir y seguir el canal de Rand Web Squadron.

Q & A

¿Qué herramienta se utiliza para crear el efecto 'antes y después' en la página web?

Se utiliza un poco de código HTML y JavaScript para crear el efecto 'antes y después' sin necesidad de plugins adicionales.

¿Cuál es la razón por la que se utiliza 'Center Center' en el código?

Se utiliza 'Center Center' para asegurar que las imágenes se alineen correctamente en el contenedor, ya que a veces el alineamiento con HTML no es perfecto.

¿Dónde se puede encontrar el código y las versiones alternativas para este efecto?

El código y las versiones alternativas se pueden encontrar en el enlace proporcionado en la descripción del video.

¿Cómo se pueden modificar las imágenes para mostrar diferentes estilos en el efecto 'antes y después'?

Se pueden modificar las imágenes para que sean horizontales en lugar de verticales, mostrar palabras 'antes' y 'después', o tener una imagen desenfocada que se aclare al deslizar.

¿Cómo se seleccionan las imágenes para el efecto 'antes y después'?

Las imágenes se pueden seleccionar de una librería de medios o de un CDN, y se utilizan las URL de ambas imágenes para el efecto.

¿Cómo se definen las dimensiones de las imágenes en el efecto 'antes y después'?

Se definen las dimensiones de ancho y alto de manera consistente para ambas imágenes, ya sea en formato cuadrado, retrato o horizontal.

¿Qué sucede después de haber configurado el efecto 'antes y después' en la página web?

Después de configurar el efecto y actualizar, se puede ver en la página web el efecto 'antes y después' funcionando con la pequeña cantidad de código utilizado.

¿Qué consejo se da al final del guion sobre cómo enfrentar la vida?

Se aconseja luchar, no rendirse, hacer lo correcto, jugar el juego, ganar en la vida, no avergonzarse, no sentirse mal, no tener miedo y seguir trabajando duro.

¿Cuál es la frase final del guion que inspira a la audiencia?

La frase final del guion es 'Siempre lucha, nunca te rindas, hazlo bien, juega al juego, gana en tu vida, no hay vergüenza, no hay tiempo, siente el dolor, con la afinidad, puedo cambiar en mi mente, elige una carretera, comprométete y sube, la única manera de ganar es la vida, nunca falles'.

¿Quién es Rand web Squadron y cómo se menciona en el guion?

Rand web Squadron es el presentador del tutorial y se menciona al final del guion como la persona que espera que los espectadores se suscriban, compartan y sigan.