{"id":367159,"date":"2023-02-18T11:46:00","date_gmt":"2023-02-18T08:46:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367159"},"modified":"2023-05-08T14:21:43","modified_gmt":"2023-05-08T11:21:43","slug":"come-creare-un-sito-web-wordpress-reattivo-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-creare-un-sito-web-wordpress-reattivo-elementor\/","title":{"rendered":"Come creare un sito Web WordPress reattivo Elementor"},"content":{"rendered":"\n

Con la maggior parte degli utenti che accedono a Internet tramite dispositivi mobili, il tuo sito Web pu\u00f2 davvero permettersi di non essere reattivo?<\/p>\n

Che cos’\u00e8 il design reattivo, davvero?<\/h2>\n

Quindi, nel contesto di un sito Web, reattivo significa che il sito reagisce a varie proporzioni<\/strong>, ovvero non ha lo stesso aspetto su un dispositivo diverso ma si adatta invece al dispositivo del visitatore<\/strong>. Nel 2019, pi\u00f9 utenti accedono a Internet utilizzando i propri dispositivi mobili<\/a> rispetto ai computer desktop, ma il design mobile first, ovvero<\/a> la pratica di creare siti Web principalmente pensando agli utenti mobili, esiste da molto pi\u00f9 tempo.<\/p>\n

Con un design Elementor reattivo, stai sostanzialmente ridimensionando e riorganizzando tutti i componenti del tuo sito Web per adattarli a uno schermo disposto in modo diverso<\/strong> – desktop, tablet (768 px) e dispositivo mobile (360 px) – e non perdere nulla della qualit\u00e0. E visto che WordPress \u00e8 il sistema di gestione dei contenuti pi\u00f9 popolare in circolazione, non sorprende che cos\u00ec tanti sviluppatori stiano facendo di tutto per creare temi WordPress reattivi<\/a>, anche se anche questo non \u00e8 una garanzia.<\/p>\n

Come accedo a layout diversi in Elementor?<\/h2>\n

Troverai l’ icona dello schermo nell’angolo in basso a sinistra<\/strong>. Selezionandolo si aprir\u00e0 il sottomenu di anteprima. L\u00ec troverai le opzioni per le anteprime per tablet e layout mobili.<\/p>\n

\"Come<\/a><\/p>\n

La visualizzazione desktop \u00e8 l’impostazione predefinita, ma puoi cambiarla facilmente. Dovresti notare che quando modifichi le modifiche all’anteprima per adattarle a un dispositivo pi\u00f9 piccolo e strutturato in<\/strong> modo diverso, con proporzioni diverse, puoi avere un’idea di come appare il layout del tuo sito Web su ogni dispositivo.<\/p>\n

\"Come<\/a><\/p>\n

La cosa importante che devi ricordare \u00e8 che indipendentemente dal modo in cui modifichi le opzioni di design estetico in modalit\u00e0 tablet o mobile, la modalit\u00e0 desktop e il layout rimangono inalterati<\/strong>. In questo modo, nessuno dei tuoi lavori su alcun layout andr\u00e0 mai perso.<\/p>\n

Quali elementi posso regolare?<\/h2>\n

Prima di ogni altra cosa, chiariamo solo una cosa: puoi regolare ogni elemento contrassegnato dall’icona mostrata di seguito. Per questi elementi possiamo regolare indipendentemente i valori per ciascun elemento separatamente per i formati desktop, tablet e mobile.<\/p>\n

\"Come<\/a><\/p>\n

Il modo in cui i tuoi visitatori vedono i tuoi elementi di testo \u00e8 molto importante. Se i tuoi caratteri non sono ottimizzati per i dispositivi mobili, i tuoi visitatori potrebbero trovare illeggibile il sito Web<\/strong>, il che a sua volta influir\u00e0 sulla tua SEO (ottimizzazione dei motori di ricerca). Con la quantit\u00e0 di informazioni che i tuoi visitatori raccolgono semplicemente attraverso il testo, questo \u00e8 qualcosa che non puoi ignorare. Un sito web leggibile appare pulito, ordinato e professionale.<\/p>\n

Dai un’occhiata a questo confessionale, per esempio:<\/p>\n

\"Come<\/a><\/p>\n

Questo sembra perfettamente a posto in un layout desktop, specialmente con uno schermo ampio. Ma su un dispositivo pi\u00f9 piccolo, specialmente se visualizzato con orientamento verticale, tutte le sezioni di testo che privilegiano l’orizzontale appariranno levigate e illeggibili<\/strong>.<\/p>\n

Puoi risolverlo selezionando il dispositivo di cui desideri modificare il layout. Se sei soddisfatto dell’opzione predefinita (desktop), hai ancora alcune modifiche da amministrare per tablet e cellulari.<\/p>\n

Come ogni elemento, un elemento testuale ha attributi. La prima cosa da tenere a mente \u00e8 il tag HTML. Non modificare il tag HTML<\/strong>. Questi sono molto importanti per la SEO e, una volta impostati bene, non dovrebbero essere modificati. Per modificare la dimensione del testo, guarda la scheda Stile.<\/strong><\/p>\n

\"Come<\/a><\/p>\n

Individua le impostazioni Tipografia. L\u00ec puoi modificare il carattere, le dimensioni, lo spessore, l’altezza della linea e la spaziatura delle lettere. Se desideri modificare l’allineamento del testo, puoi trovare questa opzione selezionando la scheda Contenuto.<\/p>\n

\"Come<\/a><\/p>\n

Tieni presente che alcune modifiche, come Trasforma maiuscolo, si rifletteranno anche su altri dispositivi<\/strong>. Le opzioni di tipografia sono specifiche del dispositivo. Un’importante considerazione da tenere a mente \u00e8 anche che gli elementi del testo dovrebbero essere adeguati in proporzione.<\/strong> Quello a cui devi prestare attenzione \u00e8 il rapporto dimensionale di tutti gli elementi di testo.<\/p>\n

Ecco come appare una sezione proporzionalmente modificata:<\/p>\n

\"Come<\/a><\/p>\n

Elementor costruisce la struttura di base per i tuoi contenuti utilizzando sezioni o righe<\/strong>. L’altezza della riga, quindi, \u00e8 molto importante. Una volta impostata, l’altezza delle file pu\u00f2 essere regolata per ogni dispositivo<\/strong>. Quello a cui vuoi prestare attenzione \u00e8 la distanza tra il contenuto del tuo elemento e il bordo della riga.<\/p>\n

\"Come<\/a><\/p>\n

Ci\u00f2 che pu\u00f2 sembrare buono su un dispositivo desktop occupa molto spazio verticale su cellulare e tablet. Per regolare l’altezza della riga, seleziona la riga, quindi seleziona l’opzione di modifica<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Quindi seleziona la scheda Layout e regola il cursore Altezza minima come preferisci. \u00c8 possibile avere diverse altezze per diversi layout di visualizzazione<\/strong>. Ci\u00f2 \u00e8 particolarmente importante se stai regolando anche le dimensioni dei caratteri.<\/p>\n

\"Come<\/a><\/p>\n

Margini e riempimento<\/h3>\n

Quello che devi anche tenere a mente sono i margini e il riempimento. Un margine \u00e8 lo spazio tra gli elementi, mentre il riempimento \u00e8 lo spazio tra i bordi di un elemento e il suo contenuto<\/strong>. Indipendentemente dal fatto che tu abbia creato il tuo sito Web da zero o che tu stia lavorando su un modello gi\u00e0 pronto per<\/a> Elementor<\/strong>, non dovresti avere problemi a navigare tra gli elementi. Ogni elemento in una sezione selezionata mostra un bordo blu al passaggio del mouse: sposta semplicemente il mouse su un elemento e vedrai il suo bordo<\/strong>. Questo \u00e8 un buon modo per avere un’idea della struttura di una sezione.<\/p>\n

\"Come<\/a><\/p>\n

Seleziona un elemento, quindi seleziona la scheda Avanzate. Per il riempimento e i margini, troverai quattro opzioni: in alto, a destra, in basso e a sinistra<\/strong>. Qui \u00e8 dove inserisci i valori di riempimento e margine. L’ icona di collegamento sul lato destro del sottomenu li blocca in relazione tra loro<\/strong>: puoi scegliere che tutti abbiano lo stesso valore, oppure abbiano un valore diverso per ogni margine o riempimento.<\/p>\n

\"Come<\/a><\/p>\n

La creazione di colonne<\/a> pu\u00f2 causare problemi di visualizzazione quando non \u00e8 ottimizzata per dispositivi diversi. Le tue impostazioni preferite dipenderanno dal numero di colonne e dal loro contenuto<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Per impostazione predefinita, Elementor impila le colonne una sotto l’altra sui dispositivi mobili<\/strong>. Ci\u00f2 significa che le colonne non verranno schiacciate insieme e che il loro contenuto rimarr\u00e0 leggibile.<\/p>\n

\"Come<\/a><\/p>\n

Per rendere le colonne pi\u00f9 facili da vedere per gli utenti mobili, puoi invertire l’ordine delle colonne in qualsiasi riga<\/strong>: seleziona semplicemente la sezione, quindi la scheda Avanzate, il sottomenu Reattivo e attiva l’opzione Inverti colonne per il layout tablet e mobile come desiderato.<\/p>\n

\"Come<\/a><\/p>\n

Se selezioni un elemento nella visualizzazione desktop, ad esempio, e quindi selezioni la scheda Avanzate, seleziona il sottomenu Reattivo, vedrai tre opzioni mostra\/nascondi: per dispositivi mobili, tablet e desktop. Questi possono essere utilizzati per mostrare o nascondere elementi o sezioni a seconda del tipo di dispositivo su cui vengono visualizzati. Questa opzione \u00e8 pratica solo per alcuni elementi o sezioni che i tuoi visitatori potrebbero trovare poco interessanti o estranee a seconda del dispositivo che stanno utilizzando, anche se puoi usarla per disporre tre pagine completamente diverse se lo desideri.<\/p>\n

Ecco qua: adattare il design della tua pagina web per dispositivi mobili e tablet \u2013 e viceversa \u2013 non \u00e8 mai stato cos\u00ec facile. E tieni presente che la creazione di siti Web reattivi di Elementor \u00e8 solo una delle tante funzionalit\u00e0 di Elementor. Siamo qui per aiutarti a esplorarli.<\/p>\n

Fonte di registrazione: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Crea un sito Web Elementor reattivo in pochi semplici passaggi, per la migliore esperienza dei visitatori.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[571],"tags":[846],"class_list":["post-367159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nozioni-di-base-su-wordpress","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/367159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=367159"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/367159\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=367159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=367159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=367159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}