Cómo colocar fotos una junto a la otra en WordPress

Escrito por jason artman | Traducido por carlos alberto feruglio
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo colocar fotos una junto a la otra en WordPress
WordPress tiene opciones limitadas para mostrar imágenes. (Ryan McVay/Digital Vision/Getty Images)

WordPress tiene opciones limitadas para mostrar imágenes en una publicación. Se puede mostrar una imagen en el principio de la línea y centrarla o configurar el texto para ubicarlo alrededor de cada costado. Si colocas dos imágenes juntas, WordPress mostrará cada una en su propia línea, no hay una opción para visualizarlas una junto a la otra a menos que crees una galería. Sin embargo, la codificación HTML permite mostrar imágenes una junto a la otra y se puede obligar a WordPress a hacer esto añadiendo un poco de código en el editor de entradas.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Coloca el cursor en el lugar del editor de publicaciones donde deseas que las dos imágenes aparezcan.

  2. 2

    Haz clic en el botón "Add an image" (añadir imagen) de arriba del editor de publicaciones y carga la primera imagen de tu computadora o selecciona una que ya hayas subido a la galería. Haz clic en el botón "Insert into post" (insertar en la publicación) para añadirla.

  3. 3

    Añade la segunda imagen a la entrada de la misma manera.

  4. 4

    Haz clic en la pestaña "HTML" de arriba del editor para ver el código fuente de la entrada y coloca el cursor en la primera línea en blanco sobre el código de la primera imagen adjunta. El código adjunto comenzará con "<a rel="attachment".

  5. 5

    Escribe el código "<div style="display: inline-block; margin-right: 5px">" sin las comillas. Podría resultarte útil copiar el código de este artículo para evitar un error de mecanografía. El número después de "margin-right" (margen derecho) indica la distancia entre las dos imágenes en píxeles. Modifica el número para cambiar el espaciado de las mismas.

  6. 6

    Mueve el cursor a la primera línea en blanco después del código de la primera imagen adjunta. El código terminará con el nombre de la imagen y la etiqueta "</a>".

  7. 7

    Escribe "</div>" sin las comillas en la línea en blanco.

  8. 8

    Mueve el cursor a la primera línea en blanco antes del código de la segunda imagen. Si no hay una línea en blanco, presiona la tecla "Enter" para crear una.

  9. 9

    Escribe "<div style="display: inline-block">" en la línea en blanco.

  10. 10

    Escribe "</div>" en la primera línea en blanco después del código de la segunda imagen.

  11. 11

    Guarda o actualiza la entrada.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles