Crea immagini di sfondo reattive e amp; Altro in Elementor

Rifat Elementor Jun 17, 2022

Per migliorare la tua esperienza utente, Elementor offre nuove funzionalità come il controllo mobile sulla grafica di sfondo, una modalità sicura per il debug e altro ancora.

Elementor è sempre stato orgoglioso della sua capacità di progettare per dispositivi mobili. Per gli utenti di Elementor, ottenere la posizione esatta dell'immagine di sfondo era ancora un problema. Come sviluppatore web, potresti riscontrare spesso questo problema: vuoi mostrare la faccia del cane, ma mostrare solo la coda sui dispositivi mobili.

I controlli Responsive Background Image di Elementor ti consentono di creare immagini di sfondo che si adattano alle dimensioni e alla risoluzione di qualsiasi dispositivo.

Controlli reattivi dell'immagine di sfondo

L'ultima versione di Elementor offre ai clienti un controllo completo sui controlli dell'immagine di sfondo di desktop, tablet e dispositivi mobili. I controlli dell'immagine di sfondo sono inclusi in questo controllo (immagine, posizione, allegato, ripetizione e dimensione).

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Per la prima volta in assoluto, puoi personalizzare la posizione dei singoli dispositivi. Scegli "centro in alto" per i dispositivi mobili e "centro in centro" per i desktop per garantire che l'immagine venga visualizzata in modo uniforme su tutte le piattaforme. Per ogni dispositivo, puoi scegliere una dimensione diversa. Per quanto riguarda i dispositivi mobili, seleziona "contieni" per desktop e "copertina".

Siamo sicuri che molte persone apprezzeranno questa nuova funzione perché questo è stato un grosso problema per molte persone.

Elementor offre la possibilità di impostare immagini completamente distinte per ogni singolo dispositivo. I primi controlli reattivi aggiuntivi si sono presentati sotto forma di dimensioni e posizione specifiche del dispositivo. Con dimensioni e posizione regolabili, ti consente di fare un ulteriore passo avanti e ti offre un'esperienza di progettazione ancora più flessibile.

Dimensione immagine di sfondo personalizzata & Posizione

In precedenza, c'erano solo tre opzioni per impostare la dimensione dell'immagine di sfondo: auto, copertina o contenitore. Analogamente a "In alto a sinistra", puoi specificare solo i posizionamenti generali dell'immagine di sfondo.

La dimensione e la posizione dello sfondo sono ora due nuovi controlli personalizzati che saranno disponibili in futuro.

La posizione dello sfondo personalizzata consente di selezionare le coordinate esatte degli assi X e Y dell'immagine di sfondo. Di conseguenza, ora hai la possibilità di allineare con precisione lo sfondo della tua pagina.

Sono anche possibili dimensioni dello sfondo personalizzate. Imposta la larghezza dell'immagine di sfondo su un valore preciso in pixel.

Per il design reattivo, queste impostazioni —, in particolare la dimensione dello sfondo personalizzata e la posizione —, sono fondamentali. Per desktop, tablet e piattaforme mobili, utilizza queste impostazioni personalizzate per stabilire un focus specifico sul punto focale principale dell'immagine.

Controlli di frontiera reattivi

Inoltre, ora puoi personalizzare separatamente il raggio del bordo e la larghezza per ciascun dispositivo, oltre alle immagini di sfondo.

I bordi delle colonne possono essere utilizzati in vari modi, ad esempio quando una riga di collegamenti è divisa dal bordo di una colonna. Non è necessario sui dispositivi mobili perché la riga non è più in linea e ogni collegamento è posizionato in una riga a parte.

Rimuovere il bordo del layout mobile è un gioco da ragazzi in questa circostanza. Una nuova funzione di confini dinamici lo rende semplice da realizzare.

Non ci sono più "confini orfani" sui dispositivi mobili!

Modalità provvisoria per la risoluzione dei problemi

Elementor si impegna a fornire un'esperienza fluida e priva di bug per tutti i clienti. Ci sono decine di migliaia di plugin e temi tra cui scegliere e ci sono un numero infinito di modi per farli funzionare l'uno con l'altro. Indipendentemente dal fatto che Elementor sia coinvolto o meno, queste combinazioni sono destinate a portare a conflitti.

Elementor è sempre alla ricerca di modi per rendere le cose più facili per i nostri utenti riducendo l'attrito nei loro processi di lavoro.

Quando le persone non possono aprire l'editor, è un problema comune. Sono stati dati molti nomi a questo problema: ricevo una schermata vuota, non riesco a modificare e il mio computer si blocca durante il caricamento …

La modalità provvisoria è la risposta!

Quando Windows è uscito per la prima volta, includeva una funzionalità in modalità provvisoria che poteva essere utilizzata per risolvere vari problemi. Elementor ha sviluppato da solo una soluzione simile.

Ogni volta che incontri una pagina che si rifiuta di caricare, sarai in grado di attivare la "Modalità provvisoria" facendo clic su un pulsante.

Elementor e WordPress sono protetti in "Modalità provvisoria" da qualsiasi tema o plug-in che potrebbe causare problemi.

Oltre 80% di problemi di caricamento possono essere temporaneamente risolti in modalità provvisoria.

Quando entri in modalità provvisoria, tutto viene caricato correttamente ?

Ciò suggerisce che la colpa dell'errore sia il tuo tema o uno dei tuoi plugin. Vai avanti e disattivali uno per uno per identificare l'autore.

Ho attivato la modalità provvisoria, ma continua a non caricarsi.

Ciò suggerisce che dovresti esplorare altrove per una soluzione, ed è molto probabilmente un codice personalizzato o un problema relativo all'hosting.

"La modalità provvisoria influenzerà il mio sito Web?"

I visitatori del tuo sito web non noteranno alcuna differenza se utilizzano la modalità provvisoria. Tutti i tuoi plugin e temi installati verranno visualizzati sul tuo sito e i tuoi visitatori saranno in grado di utilizzarli come farebbero normalmente.

Plugin e temi non vengono attivati ​​durante il processo di caricamento dell'editor di Elementor.

Gli utenti di Elementor trarranno grande vantaggio dalla modalità provvisoria in termini di un'esperienza più stabile, fluida e priva di errori.

Leggi di più Tag & Widget

Il tag read more di WordPress è stata una delle prime cose che elementor ha ricevuto come richiesta di funzionalità.

Questa era una richiesta semplice, ma il page builder è finalmente riuscito a implementarla.

Quando utilizzi il tag "Leggi di più" nel tuo post del blog, la visualizzazione del post dell'archivio taglierà il resto del testo. Con questo, il tuo teaser di contenuti ora può essere mostrato direttamente sulla pagina principale del tuo blog affinché tutti possano vederlo.

Nel widget dell'editor di testo o come widget separato, ora puoi aggiungere rapidamente il tag Leggi altro. È ancora più semplice visualizzare un estratto sulla pagina dell'archivio con il nuovo widget "Leggi di più" di Elementor, che può essere inserito tra due widget dell'editor di testo e si ferma esattamente dove preferisci.

Per evitare qualsiasi confusione, questo widget è applicabile solo alle normali pagine di archivio di WordPress che utilizzano "il contenuto" nel loro contenuto. I modelli di archivio Elementor non sono interessati.

Parole finali

Elementor è uno dei creatori di pagine WordPress ampiamente sviluppati. Con nuove funzionalità, sta diventando sempre più potente ogni volta. Con questo plugin, puoi letteralmente esplorare un enorme oceano di progettazione e decorazione per il tuo sito web. Spero che diventerai utile da questo post. Visita altri tutorial sugli elementi e condividili con i tuoi amici.