Cómo mostrar resultados de fotos de antes y después en WordPress










  • Usar una comparación de fotos de antes y después puede ser extremadamente útil en una variedad de situaciones. Sin embargo, puede resultar difícil mostrarlas junto a las herramientas predeterminadas. Afortunadamente, con el complemento de imagen antes y después de Twenty20, es fácil de hacer.

    Agrega un bloque único que permite a los usuarios agregar dos imágenes. Las imágenes se dividirán dentro de un control deslizante con el que los visitantes pueden interactuar para ver más o menos de una de las imágenes. Debido a la baja dificultad, es perfecto para principiantes.

    Hoy, demostraré cómo mostrar una foto de antes y después con el complemento Twenty20.

    ¿Por qué usar una foto de antes y después?

    El efecto antes y después es una poderosa herramienta de comparación que le permite resaltar las diferencias entre las dos imágenes. Y hay casi un sinfín de razones por las que un sitio web querría utilizar esta herramienta.

    Para sitios web que se enfocan en entretenimiento como películas, programas de televisión o videojuegos, las imágenes de antes y después son extremadamente útiles. Puede comparar áreas antes de que ocurriera un evento importante, personajes desde el principio contra el final de una serie, utilícelos para resaltar los huevos de Pascua y más.

    Algunos gurús del fitness pueden querer mostrar fotos de antes y después de los éxitos de fitness de ellos mismos o de las personas a las que han ayudado.

    Los sitios web que pueden enfocarse en cubrir noticias pueden usar imágenes de antes y después con gran efecto. Por ejemplo, es común ver cómo se veía una ciudad antes y después de una gran tormenta o resaltar los efectos del cambio climático durante un período de tiempo.

    También es excelente para mostrar de lo que es capaz un producto. Por ejemplo, si está vendiendo un producto de limpieza, puede ser muy efectivo para mostrar un área antes y después de la limpieza. De hecho, esto es extremadamente común en los anuncios de limpieza.

    Como puede ver, y probablemente imagine, una foto de antes y después tiene una gran versatilidad para cualquier sitio web.

    Cómo crear una foto de antes y después

    Paso 1: Instale la imagen de Twenty 20 antes y después

    El complemento Twenty20 Image Before-After es una gran adición a cualquier sitio web que quiera mostrar comparaciones de imágenes. Y no es solo para imágenes de antes y después, puede comparar dos imágenes únicas con gran efecto con el control deslizante, que generalmente se conoce como una foto deslizante.

    Comencemos haciendo clic en Complementos y seleccionando la opción Agregar nuevo en el panel de administración de la izquierda.

    Agregar nuevo

    Busque Twenty20 Image Before-After en el cuadro de búsqueda disponible. Esto abrirá complementos adicionales que pueden resultarle útiles.

    veinte20

    Desplácese hacia abajo hasta que encuentre el complemento Twenty20 Image Before-After y haga clic en el botón "Instalar ahora" y active el complemento para su uso.

    Instalar ahora

    Paso 2: agregue un bloque de código corto

    A diferencia de la mayoría de los complementos, no hay una página de configuración para Twenty20. En cambio, puede comenzar a usar la herramienta inmediatamente después de la activación. Hay dos formas de usar este complemento, con un editor o usando el control deslizante antes y después.

    Cubriré ambos, pero primero, examinaremos cómo usarlo en un editor.

    Vaya a cualquier publicación o página existente en su sitio web y agregue un bloque de shortcode. Como alternativa, puede crear uno nuevo con fines de prueba.

    Haga clic en el botón "+", busque y seleccione el bloque Shortcode.

    Bloque de código corto

    Nota: si todavía está utilizando el editor clásico, hay un botón real en el que puede hacer clic en el editor. De hecho, es un poco más fácil que usar el shortcode.

    Paso 3: usar el código abreviado

    El complemento le permite definir varios aspectos del control deslizante antes y después en WordPress editando el código abreviado. Aquí está el código abreviado estándar que usa el complemento:

    [twenty20 img1=”” img2=”” direction=”vertical” offset=”0.5″ align=”right” width=”60%” before=”Before” after=”After” hover=”true”]

    Este código abreviado no producirá ningún resultado de forma predeterminada; en su lugar, debe ingresar una pequeña cantidad de información en cada pieza. En total, hay 9 piezas de información para ingresar:

    Img1 e img2: aquí  es donde puede agregar las ID de imagen. Img1 aparecerá primero (arriba en la vista vertical o a la izquierda en la vista horizontal).

    Nota: Para encontrar la identificación de la imagen, vaya a su biblioteca de medios, coloque el cursor sobre la imagen y mire la URL que aparece en la parte inferior.

    ID de imagen

    Dirección:  Esta es la orientación de su imagen. Puede escribir vertical u horizontal.

    Compensación:  debe ser un valor entre 0,1 y 1.

    Alinear:  puede usar ninguno, izquierda o derecha. Esto funciona de la misma manera que la alineación de texto.

    Ancho:  Este es el ancho de la imagen. Puede usar un porcentaje o píxeles. Los píxeles le dan más control porque son más exactos que un porcentaje.

    Antes y después: este es un título que aparece en las esquinas inferiores. Por defecto dice “antes” y “después” respectivamente. Sin embargo, usted es libre de cambiarlo.

    Hover:  esto decide si el control deslizante se mueve con el movimiento del mouse y solo acepta "Verdadero" o "Falso" y, si se establece en verdadero, un visitante puede controlar el control deslizante sin hacer clic en él.

    Una vez que complete el código abreviado y guarde los cambios, puede ver el control deslizante antes y después en su página en vivo o usar la opción de vista previa de WordPress.

    Antes después

    Puede usar este método para agregar una foto de antes y después a cualquier publicación o página.

    Paso 4: agregue el widget

    Otra forma de usar el complemento es usar su widget. Genera el mismo resultado que el paso anterior pero está diseñado para la barra lateral o el pie de página de su sitio web.

    Haga clic en Apariencia y seleccione la opción Widgets.

    Widgets

    Localice el widget Twenty20 Slider y agréguelo al área de widget deseada.

    veinte20slider

    Usar el widget es mucho más fácil que el shortcode. Puede ingresar toda la misma información en un formato mucho más simple. La mayor diferencia es que puede seleccionar las imágenes de su biblioteca de medios en lugar de usar la ID de imagen.

    Seleccionar imágenes

    El resultado final se verá idéntico al control deslizante del editor que vimos anteriormente, pero se cambiará el tamaño para que quepa en el área del widget.

    Felicitaciones por configurar el complemento Twenty20. Recuerde que puede establecer opciones de visibilidad para los widgets para que el control deslizante no esté visible en todas las publicaciones o páginas.

    En realidad no necesitas un complemento

    Es importante darse cuenta de que un complemento es realmente innecesario. En realidad, puede crear su propia imagen de antes y después utilizando un software de edición de fotos como Photoshop.

    En realidad, es bastante fácil de hacer y solo requiere cambiar el tamaño o recortar las imágenes y colocarlas una al lado de la otra. y si ya está familiarizado con el software, solo le tomará unos minutos armarlo.

    Otra opción que muchos no consideran es usar una aplicación de fotos de antes y después en su teléfono inteligente. Si a menudo toma fotos para su blog o cuentas de redes sociales en su teléfono inteligente, puede usar una aplicación para combinarlas.

    ¡Y muchos de ellos son de uso gratuito! Sin embargo, diría que el complemento Twenty20 es la mejor opción para los sitios web.

    No solo agrega las imágenes, sino que también permite que los visitantes interactúen con ellas. El visitante puede controlar el control deslizante y eso agrega mucho valor a cualquier página. Hace que el visitante sienta que tiene el control del contenido.

    Sin mencionar que ocupará menos espacio en la página, ya que las imágenes de Twenty20 se apilan esencialmente en la misma ubicación.

    Consejos para hacer su propia foto de antes y después

    Si está comprometido a crear una foto de antes y después con un software de edición de fotos, aquí hay algunos consejos para ayudarlo.

    Primero, y no puedo enfatizar esto lo suficiente, asegúrese de que ambas imágenes tengan el mismo tamaño. Lo más probable es que haya visto que esto suceda antes y no solo es desagradable de ver, sino que también dificulta comparar las imágenes.

    No solo es importante el tamaño, sino también el ángulo. Por ejemplo, digamos que estaba cultivando un árbol y le tomó una foto al comienzo del año y al final para mostrar cuánto creció.

    Si toma la foto en diferentes ángulos, no resalta la diferencia.

    Si planea hacer esto a menudo en algo como Photoshop, le recomiendo hacer una plantilla de antes y después. De esta manera, puede colocar rápidamente las fotos de antes y después en la plantilla y colocarlas en su posición más rápido.

    También ayuda a garantizar que todas estas imágenes tengan el mismo tamaño, lo cual es una buena política a seguir.

    Apoye su foto de antes y después con texto

    En muchos casos, una imagen de antes y después habla por sí sola. Sin embargo, en algunos casos, existen diferencias muy sutiles que la persona promedio no captará. En estos casos, debe resaltar las diferencias en el texto. Esto puede ser como parte de un párrafo o incluso como un título de imagen .

    En cualquier caso, el texto debe complementar tu imagen. La buena noticia es que casi cualquier complemento de antes y después en WordPress admite subtítulos y Twenty20 no es una excepción. Asegúrese de agregar información útil como fechas y el enfoque de la comparación.

    ¿Ha considerado usar una aplicación de fotos de antes y después en su teléfono? ¿Crees que debería haber un bloque predeterminado en WordPress para las fotos de antes y después?










  • Subir