Come inserire foto fianco a fianco in WordPress

June 8

WordPress ha opzioni limitate per la visualizzazione delle immagini in un post. È possibile visualizzare un'immagine all'inizio della linea e centrarlo o configurare il testo per avvolgere entrambi i lati. Se si posiziona due immagini insieme WordPress visualizza ciascuno su una propria linea; non esiste alcuna opzione per la visualizzazione di immagini affiancate a meno che non si crea una galleria. Tuttavia, il codice HTML supporta lato la visualizzazione delle immagini a fianco e si può costringere WordPress per fare questo con l'aggiunta di un po 'di codice nel post editor.

istruzione

1 Posizionare il cursore nel punto nell'editor post in cui si desidera visualizzare le due immagini.

2 Fare clic sul pulsante "Aggiungi un'immagine" sopra l'editor postale e caricare la prima immagine dal computer o selezionare un'immagine che è già stato caricato alla galleria. Fare clic sul pulsante "Inserisci in Post" per aggiungere l'immagine al palo.

3 Aggiungere la seconda immagine al posto nello stesso modo.

4 Fare clic sulla scheda "HTML" al di sopra del campo di modifica post per visualizzare il codice sorgente per il posto, e posizionare il cursore sulla prima riga vuota sopra il codice per la prima immagine allegata. Il codice di attacco inizia con "<a rel =" attaccamento ".

5 Digitare il codice "<div style =" display: inline-block; margin-right: 5px ">" senza virgolette. Si possono trovare utile per copiare il codice da questo articolo per evitare un errore di battitura. Il numero dopo "margin-right" indica la distanza tra le due immagini in pixel. Modificare il numero di modificare la distanza tra le due immagini.

6 Spostare il cursore sulla prima riga vuota dopo il codice per la prima immagine allegata. Il codice termina con il nome dell'immagine e il tag "</a>."

7 Tipo "</ div>" senza virgolette nella riga vuota.

8 Spostare il cursore sulla prima riga vuota prima del codice per la seconda immagine. Se non c'è riga vuota, premere il tasto "Enter" per crearne uno.

9 Digitare "<div style =" display: inline-block ">" nella riga vuota.

10 Tipo "</ div>" nella prima riga vuota dopo il codice per la seconda immagine.

11 Salvare o aggiornare il post.

Consigli e avvertenze

  • Per centrare le due immagini nel tuo post, inserire il codice "<div style =" text-align: center ">" in una riga vuota sopra il codice per la prima immagine e immettere "</ div>" nella prima vuoto riga dopo il codice per la seconda immagine.