Generatore di immagini AI per Gutenberg e Kadence Blocks!

L'utilizzo dell'intelligenza artificiale (AI) per generare immagini nell'editor di blocchi di WordPress, noto anche come Gutenberg, con AI Image Lab è appena diventato più semplice e più integrato con l'aggiornamento AI Image Lab 1.0.3, che introduce un blocco Gutenberg creato per rendere l'IA generazione di immagini una parte senza soluzione di continuità del processo di creazione dei contenuti! Il blocco AI Image è progettato per consentire agli utenti di generare rapidamente un'ampia gamma di immagini personalizzate generate da AI per pagine WordPress o post direttamente all'interno di altri contenuti, invece di utilizzare una finestra separata o una sovrapposizione di libreria multimediale per cercare di selezionare l'immagine migliore al di fuori di il contesto degli elementi circostanti. Una volta trovata e selezionata l'immagine perfetta, il blocco AI Image può essere facilmente trasformato in uno dei numerosi blocchi Gutenberg principali o blocchi Kadence, che forniscono ulteriori opzioni di stile e layout.

Un breve tutorial

Non c'è modo migliore per mostrare cosa può fare il blocco AI Image per Gutenberg se non con un esempio! Useremo i blocchi del plug-in Kadence Blocks, ma il processo è lo stesso quando si utilizzano i blocchi principali di Gutenberg.

Per il nostro esempio, creeremo un layout di home page di base per un'ipotetica società immobiliare. La struttura della pagina includerà un banner superiore con sovrapposizione di testo, seguito da una riga a due colonne con immagini e testo.

Per creare il banner, iniziamo inserendo un blocco AI Image nella parte superiore della pagina. Dalla barra degli strumenti, modifichiamo l'impostazione dell'allineamento in "Larghezza intera". Nella barra laterale delle impostazioni del blocco, modifichiamo le proporzioni in "Dimensioni personalizzate" e inseriamo una larghezza di 2048 (il massimo corrente) e un'altezza di 600. (Questo presuppone che stiamo utilizzando AI Image Lab Pro, poiché la dimensione massima nel la versione gratuita è 768.)

Successivamente, inseriamo un testo di richiesta descrittivo per l'immagine nella casella di testo mostrata nel blocco. Proviamo con una sola parola, “quartiere”. Quindi facciamo clic sul pulsante Genera immagine e attendiamo che il blocco venga popolato con un'immagine. Poiché la nostra immagine è piuttosto ampia, le immagini di anteprima potrebbero essere in qualche modo sfocate poiché le anteprime sono renderizzate a una risoluzione inferiore rispetto all'immagine finale in modalità HD.

Ora possiamo utilizzare le frecce nella barra degli strumenti del blocco Immagine AI per navigare tra le immagini di anteprima. Se ci avviciniamo alla fine di un set di immagini di anteprima, viene generato automaticamente un nuovo set, quindi potrebbero esserci dei ritardi se stiamo sfogliando rapidamente molte immagini di anteprima. In qualsiasi momento, possiamo fare clic sul pulsante Modifica nella barra degli strumenti del blocco per modificare il testo del prompt; qualsiasi modifica apportata nella barra laterale delle impostazioni del blocco attiverà anche la generazione di un nuovo set di immagini. Una volta trovata l'immagine che vogliamo utilizzare, facciamo clic sull'icona del segno di spunta nella barra degli strumenti, che scaricherà l'immagine a piena risoluzione sul nostro sito e la sostituirà con l'anteprima a bassa risoluzione mostrata nel blocco. Questo processo potrebbe richiedere un po' di tempo a causa dell'alta risoluzione che abbiamo scelto.

Ecco l'immagine che stiamo usando per questo esempio:

Poiché vogliamo sovrapporre del testo a questa immagine e apportare anche altre modifiche allo stile, dovremmo trasformare il blocco Immagine AI in un blocco diverso che sia più adatto alle nostre esigenze. In questo caso, utilizzeremo un blocco Row Layout di Kadence Blocks. Fai semplicemente clic sull'icona Immagine AI all'estrema sinistra della barra degli strumenti del blocco e scegli Layout di riga in "Trasforma in" (supponendo che il plug-in Kadence Blocks sia attivo). Quando richiesto, scegliamo un layout a colonna singola per la riga.

A questo punto potrebbe essere necessario reimpostare l'allineamento sul blocco Layout riga a tutta larghezza. Vorremo anche impostare il riempimento superiore e inferiore su 3XL e andare su Impostazioni sovrapposizione sfondo nella scheda Stile della barra laterale delle impostazioni del blocco e abilitare una sovrapposizione nera con un'opacità del 60% in modo che ci sia più contrasto tra il testo e l'immagine di sfondo. Quindi possiamo inserire un blocco "Text (Adv)" nella riga, impostare il colore del testo su bianco, l'allineamento al centro, il tag HTML su "H1" e l'altezza della riga su 2. Ora aggiungiamo il nostro testo, che può comportare quanto segue come esempio molto semplice:

Per la riga a due colonne sotto il banner, inseriamo un altro blocco di layout di riga, questa volta con un layout a 2 colonne. Inseriamo un blocco AI Image in ogni colonna e impostiamo le proporzioni per ogni blocco su "3:2 (landscape)" (in questo esempio, abbiamo lasciato le dimensioni in pixel al valore predefinito, ma in produzione dovrebbero forse essere modificate anche per produrre un file immagine di dimensioni inferiori). Per la colonna di sinistra, usiamo il testo del prompt dell'immagine "condominio" e nella colonna di destra semplicemente "casa". Ecco le anteprime delle immagini con cui stiamo andando, prima di caricarle e trasformare i blocchi di immagini AI:

Successivamente, facciamo clic sul pulsante con il segno di spunta nella barra degli strumenti per ciascun blocco di immagini AI per caricare le immagini e, una volta completato il caricamento, facciamo clic sull'icona del blocco di immagini AI a sinistra della barra degli strumenti e selezioniamo l'opzione per trasformare ogni immagine in una Info Blocco scatola di Kadence Blocks. Dopo aver aggiunto del testo, la nostra pagina si presenta così:

Conclusione

Mentre il plug-in AI Image Lab è compatibile con Gutenberg praticamente sin dalla sua prima versione beta grazie alla sua integrazione con la libreria multimediale e il selettore multimediale di WordPress, il blocco AI Image porta tale integrazione al livello successivo consentendo agli utenti di creare, visualizzare in anteprima, e caricare immagini generate dall'intelligenza artificiale direttamente nel contesto in cui verranno utilizzate, rendendo più semplice la scelta di immagini che funzionino bene con i contenuti circostanti, la ricerca delle giuste proporzioni e la visualizzazione del prodotto finito. Con la compatibilità (opzionale) con il plug-in Kadence Blocks integrato, AI Image Lab è un potente strumento progettato per consentire ai creatori di contenuti Gutenberg di creare fantastici elementi visivi basati su blocchi!

AI Image Lab può essere utilizzato gratuitamente con alcune limitazioni su quante immagini puoi caricare sul tuo sito ogni 24 ore, quanto può essere alta la risoluzione di tali immagini, ecc. Per una potenza ancora maggiore nella creazione di immagini di alta qualità, dai un'occhiata a Piano AI Image Lab Pro!