Immagini – integrare e modificare

Per modificare le immagini del banner nella pagina iniziale, fare clic su Layout / Designnella barra dei menu.

Cliccare quindi su Bannernella barra del menu a sinistra. Se si dispone di un singolo banner, selezionare Personalizzato. Se in uno slider sono presenti più immagini banner, selezionare (vedi a destra) Cambio banner.

Se una o più immagini banner sono già integrate, è possibile rimuoverle utilizzando il piccolo cestino (nell’angolo in alto a destra dell’immagine).

Se si desidera caricare una nuova immagine per la personalizzazione o la modifica del banner , fare clic su “Seleziona file”. Una volta selezionata l’immagine dal computer, fare clic su “Caricare”.

Nota: Le immagini del banner non dovrebbero essere più grandi di 200 KB (kilobyte), altrimenti il tempo di caricamento della pagina ne risentirà. Il formato .jpg o .jpeg è ideale in questo caso.

Le immagini dei banner devono essere ritagliate a 1920 x 600 pixel per il Template Premium 5. Si noti che il layout può variare a seconda del modello premium. Se non siete sicuri della taglia giusta, non esitate a chiedere.

Alla voce “Modifica testo alt”, descrivere ciò che si vede nell’immagine in un massimo di 5 parole. Ulteriori informazioni sulla funzione sono disponibili qui.

Quando si cambia banner, si ha anche la possibilità di impostare i tempi di cambio immagine e di transizione.

Per modificare le immagini del banner nella pagina iniziale, fare clic su Contenuto / Contorno.

Selezionare quindi la sottopagina in cui si desidera integrare un’immagine banner personalizzata dalla struttura del menu a sinistra.

Accanto al campo “Creare nuovo contenuto” (posizionato sotto le “Impostazioni”), selezionare “Personalizzato” nel campo a tendina per “Banner”.

Viene visualizzata una finestra pop-up in cui è possibile selezionare nuovamente un file e caricarlo.

La dimensione del banner delle sottopagine per il Template Premium 5 è di 1500 x 400 pixel e anche in questo caso non deve superare i 200KB e deve essere in formato .jpg o .jpeg.

Si prega di notare che il layout può variare a seconda del modello premium o che le opzioni sono limitate! In caso di dubbi, il nostro team di assistenza può aiutarvi.

Tuttavia, non è possibile memorizzare un testo alternativo.

Se non utilizzi CloudImage per l’ottimizzazione delle immagini sul sito web (perché non hai prenotato un pacchetto SEO o non hai acconsentito al suo utilizzo), integrate le immagini utilizzando il normale editor di testo.

A tal fine, accedere al menu tramite Contenuto / Contorno, a sinistra nella struttura ad albero fino alla pagina corrispondente e al campo di contenuto in cui si desidera inserire l’immagine. Utilizza il pulsante “Massimizza” per aprire l’intero pannello di controllo.

Andare al punto del testo in cui si desidera inserire un’immagine. Quindi fare clic sul pulsante Aggiungi immagine nel pannello di controllo .

Viene visualizzata una nuova finestra in cui si fa clic su “Cerca server”:

Si accede così al centro multimediale, dove sono memorizzate tutte le immagini (preferibilmente ordinate in cartelle per facilitarne la ricerca):

Se si desidera caricare una nuova immagine nel media center, selezionare “Carica”.

Se poi si desidera modificare il nome dell’immagine, fare clic sull’immagine corrispondente e nella nuova visualizzazione fare clic su “Rinomina” (sopra l’immagine). Inserire il nome nel campo successivo e confermare con “OK”. Per saperne di più sulla corretta denominazione delle immagini.

Fare clic su “Seleziona” (sopra l’immagine) per selezionare l’immagine desiderata e tornare alla prima finestra.

A questo punto è necessario regolare le dimensioni dell’immagine. Il formato più adatto è quello 2:3, ossia 300 x 200 pixel o eventualmente 400 x 220 pixel.

Anche se è possibile regolare le dimensioni dell’immagine in seguito, si consiglia di ritagliare le immagini prima e di comprimerle in una dimensione adeguata. In questo modo si evita che il tempo di caricamento venga influenzato. Per saperne di più, clicca qui.

Le immagini vengono posizionate prima a sinistra della prima riga di testo:

Tuttavia, è possibile posizionare le immagini a sinistra e a destra del testo. È sufficiente fare clic sull’immagine e poi sulla posizione sinistra o destra.

Dopo aver salvato tramite il disco  e svuotato la “website cache” , è possibile visualizzare il risultato sul sito web. Se non siete soddisfatti della distanza tra l’immagine e il testo, contattate il nostro team di assistenza.

Si consiglia inoltre di mantenere il testo alt delle immagini. L’inserimento avviene tramite l’immagine, direttamente al momento dell’inserimento nella finestra di dialogo precedente, oppure successivamente. Per quest’ultima, fare clic sull’immagine per la quale si vuole inserire il testo alt, espandere il pannello di controllo e fare clic sull’icona dell’immagine . Nel pop-up è possibile inserire il testo alt alla voce “Testo alternativo”.

Una volta inserito il testo, salvare e non dimenticare di cancellare la cache in modo che le modifiche vengano applicate!

Se hai approvato l’uso di Cloudimage per l’ottimizzazione delle immagini come parte della nostra ottimizzazione per i motori di ricerca, il nostro team SEO ha già integrato le immagini nei testi SEO. Per garantire che le immagini vengano consegnate in modo ottimizzato, estendiamo i percorsi delle immagini con due snippet di link.

Qui troverai le istruzioni su come integrare le immagini nei testi con Cloudimage o su come sostituire le immagini esistenti:

Istruzioni per l’ottimizzazione delle immagini con Cloudimage

Si noti che le istruzioni contenute nel PDF si riferiscono alla nuova versione di Cloudimage. Se la struttura delle istruzioni non corrisponde a quella utilizzata per integrare le immagini in smart site, probabilmente si sta ancora utilizzando la versione precedente. In questo caso, seguire le istruzioni riportate di seguito:

Per cominciare, le immagini vengono selezionate e inserite utilizzando l’icona dell’immagine sul pannello di controllo dello smart site, come descritto nella sezione precedente “Immagini nel testo senza Cloudimage”. Tuttavia, le fasi successive differiscono dal resto del processo.

Oltre al link all’immagine, utilizziamo un link da CloudImage che determina le dimensioni e la risoluzione delle immagini e un elemento HTML aggiuntivo per visualizzare correttamente anche l’allineamento. Per garantire che le informazioni contenute nel link e nell’HTML funzionino, i dipendenti di onOffice aggiungono al codice lo stile corrispondente.

Nota: Ciò significa anche che le specifiche di dimensione memorizzate nel link CloudImage vengono applicate uniformemente a tutte le immagini! Se hai principalmente immagini nello stesso formato (immagini grandi nel vostro esempio), ma volete inserire anche altre immagini (più piccole), dovete integrare le immagini più piccole come descritto nel capitolo “Immagini nel testo senza CloudImage”!

Se si desidera aggiungere immagini ottimizzate con CloudImage, è necessario farlo nel codice sorgente della pagina. Dopo aver inserito un’immagine (come descritto nel capitolo precedente), si deve espandere il pannello di controllo (se necessario, fare clic su ) e passare al codice sorgente .

Si ottiene la seguente visualizzazione:

Oltre all’origine dell’immagine (src=”https…”), vengono specificati come stili anche un allineamento automatico e l’altezza e la larghezza del CMS (evidenziati in giallo nell’esempio seguente):

Affinché il collegamento a CloudImage funzioni, lo stile specificato dal CMS deve essere eliminato o sostituito. Il modo più semplice di procedere è descritto di seguito.

Di seguito è riportato un esempio di come CloudImage è integrato da onOffice:

In questo esempio vengono utilizzi immagini molto larghe, per questo abbiamo specificato 1110 x 370 pixel come dimensione nel link CloudImage (a partire da https://acnaayzuen … fino a /q90/). Cerca questo modulo in una pagina in cui il team SEO ha inserito delle immagini.

1. Copia e inserisci nel codice sorgente dove hai già integrato la nuova immagine tramite il centro multimediale.
2. Ora copia il link dell’immagine inserita in precedenza tramite il centro multimediale (da https://cmspics … a .jpg) e inseritelo al posto del link dell’immagine precedente nel modulo precedente.
3. Ora elimina la parte dell’immagine generata in precedenza tramite il centro multimediale:
4. Se si desidera inserire l’immagine a sinistra del testo, lasciare il blocco così com’è.
5. Se si vuole inserire l’immagine a destra del testo, sostituire il “content-image-left” con un “content-image-right”.

Le immagini vengono posizionate di conseguenza grazie allo stile che i colleghi hanno memorizzato nel codice.

Nota: Se si conosce il nome della nuova immagine dalla libreria multimediale, non è nemmeno necessario inserire prima l’immagine tramite “Immagini nel testo senza CloudImage” e si possono risparmiare i passaggi 3) e 4). A questo punto è sufficiente copiare il modulo CloudImage dal codice sorgente di un’altra pagina, incollarlo nel codice sorgente della pagina e della posizione desiderata e (se le immagini si trovano nella stessa cartella) cambiare il nome effettivo dell’immagine in .jpg.

Ora salva le modifiche tramite il disco e cancella la “Cache del sito web” .

Dopo aver ricaricato il sito web, dovresti essere in grado di vedere il risultato sulla pagina.

I loghi dei partner o i premi per la pagina iniziale vengono creati per voi su speciali sottopagine di onOffice nello smart site 2.0 e integrati di conseguenza nel codice HTML, in modo da essere posizionati correttamente sulla pagina iniziale. Se si desidera scambiare le immagini, è necessario farlo completamente tramite il codice sorgente, in quanto gli elementi delle caselle sono creati in modo diverso dalle normali immagini dei testi.

Nel menu via Contenuto / Contorno, selezionare la pagina nella struttura ad albero a sinistra per la quale si desidera personalizzare le immagini. La pagina per i loghi dei partner è solitamente contrassegnata come “Partner” o “Riquadro partner”.

Se si desidera personalizzare i premi, cercare “Homepage” o “Riquadro”.

I loghi dei partner sono integrati in campi di contenuto separati o tutti in un unico campo di contenuto.

Nota: Non lasciarti confondere dall’aspetto dei campi di contenuto: il fatto che non venga visualizzata l’anteprima dell’immagine non significa che non sia stato inserito nulla nel campo! Ecco un esempio tra la vista nella struttura e quella della pagina iniziale:

Con il pulsante   si espande il campo di modifica e si clicca su “Codice sorgente” :

L’indicatore giallo in cima al codice sorgente è l’URL del logo del partner. Si tratta del percorso della libreria multimediale, del nome dell’azienda (qui oscurato), della cartella in cui è memorizzata l’immagine e infine del nome dell’immagine stessa. Se la nuova immagine è stata salvata nella stessa cartella della libreria multimediale, è sufficiente modificare l’ultima parte del link, il nome dell’immagine.

Attenzione: È fondamentale prestare attenzione al formato di file in cui viene salvata l’immagine! Un formato .jpg non è un .jpeg per il nostro CMS. Pertanto, prestate sempre molta attenzione al finale e all’ortografia corretta nel link, altrimenti il link non è corretto e l’immagine/logo non verrà visualizzato!

Prestare attenzione anche al ritaglio delle immagini. Nell’esempio precedente, il logo del partner Immobilienscout24 visualizzato sulla homepage ha una dimensione di 270 x 200 pixel. Le dimensioni del display possono variare a seconda del modello premium!

Nota: Le immagini più grandi di quelle mostrate nell’esempio vengono compresse dal CMS alla dimensione richiesta. Tuttavia, il file originale di innumerevoli kilobyte o addirittura megabyte viene memorizzato nella libreria multimediale. Se questo accade con un’immagine, potrebbe non essere evidente. Tuttavia, se sul sito web sono state salvate troppe immagini con file di dimensioni troppo grandi, il tempo di caricamento della pagina risulterà enormemente rallentato: Non solo la facilità d’uso ne risente, ma si rischia anche un posizionamento inferiore nei risultati di ricerca di Google e, nel caso di un precedente pacchetto SEO, di vanificare le ottimizzazioni dei nostri colleghi.

Per sicurezza, chiedi sempre a onOffice le dimensioni corrette, in modo che le immagini possano essere tagliate con precisione in un programma di editing di immagini!