Risorse per creare un sito con WordPress e Elementor

Se stai seguendo il mio tutorial gratuito su YouTube, in questa pagina trovi tutte le risorse che uso nel video e molti approfondimenti utili per aiutarti a costruire il tuo sito WordPress nel migliore dei modi.

Link importanti

Acquista il piano hosting WordPress su Hostinger usando il coupon IMPARAQUI
→ imparaqui.it/go/hostinger

Acquista Elementor PRO per avere accesso alle funzionalità di colori e font globali, header e footer builder, popup builder, form di contatto, e tanto altro!
→ imparaqui.it/go/ele-pricing

Cartella con tutti i file e le risorse usati durante il tutorial (font, icone, immagini)
→ Link alla cartella Drive

Accedi alla MondoWP WordPress Community su Facebook!
→ Link alla community

Perché scegliere Hostinger

Hostinger è tra i servizi di hosting WordPress con il migliore rapporto qualità prezzo:

• offerte per tutte le tasche,
• assistenza via chat fenomenale (in inglese),
• pannello di controllo intuitivo,
• possibilità di ospitare siti multipli (tuoi o di clienti),
• prestazioni ottime

Se vuoi approfondire trovi qui la mia recensione completa di Hostinger.

Perché acquistare Elementor PRO

Uso WordPress dal 2014 e se c’è una cosa che ho capito grazie all’esperienza è il tempo che si risparmia nell’avere tutti gli strumenti di cui si ha bisogno in un unico pacchetto e prodotti da un’unica azienda.

Ebbene, Elementor PRO è lo strumento che ti garantisce attualmente il maggior numero di strumenti e benefici tutti in un unico pacchetto:

• una community internazionale di milioni di persone
• aggiornamenti costanti con aggiunta di nuove funzionalità
• facilità nel reperire materiale di formazione
• assistenza professionale sempre a disposizione

Elementor PRO inoltre include le seguenti caratteristiche:

• modulo di contatto con salvataggio dei dati inseriti
• gestione globale di colori e font
• integrazione con sistemi di email marketing avanzati
• gestione completa della testata e del piè di pagina
• creazione di template/strutture personalizzate per blog, prodotti, pagina 404, ecc.
• gestione completa del design responsive per tablet e telefoni
• integrazione con assistente AI (abbonamento a parte)
• integrazione perfetta con WooCommerce per creare e-commerce
• integrazione avanzata con ACF e altri plugin per creare siti dinamici complessi

Insomma, che tu voglia creare un semplice blog, un sito aziendale, una landing page o un e-commerce, Elementor PRO ti dà tutte le basi di cui hai bisogno per fare crescere al meglio il tuo business online.

Grazie se vorrai acquistare Elementor PRO passando dal link affiliato di imparaqui!
→ imparaqui.it/go/ele-pricing

Il tema child

Se desideri inserire dei codici personalizzati direttamente nel file functions.php del tuo tema child di Hello Theme, puoi procedere scaricando e installando il tema direttamente da questo link: https://github.com/elementor/hello-theme-child cliccando su “Code” e “Download zip”.

Ti ricordo che ormai con le potenzialità di Elementor PRO e con la disponibilità di plugin come Code Snippets, il tema child serve veramente in rarissimi casi, quindi non consiglio di installarlo a meno che tu non ne abbia veramente bisogno per un motivo preciso.

Scegliere bene il nome del sito (dominio)

La scelta del nome del dominio è un momento chiave della creazione di un sito internet, seguendo le linee guida che trovi di seguito ridurrai la possibilità di fare errori e otterrai indicazioni pratiche per scegliere un nome efficace, accattivante e professionale.

• Scegli un nome di dominio breve: l’ideale è restare entro i 10 – 15 caratteri (usa il sito contacaratteri.it per controllare).
• Non usare trattini per separare le parole, ad esempio prediligi: www.imparaqui.it al posto di www.impara-qui.it questa regola va riconsiderata solo se nel nome del tuo brand c’è il trattino, ad esempio: coca-cola.
• Non usare numeri, ad esempio www.pascal88.com, i numeri creano confusione quando si deve cercare o digitare un dominio online. Anche in questo caso la regola va rivalutata se nel nome del brand c’è un numero, come nel caso di forever21.com.
• È buona norma fare coincidere il nome di dominio con il nome del brand: in questo modo sarà più facile memorizzare entrambi per i tuoi clienti, esempio: www.imparaqui.it coincide con il nome del brand che è “imparaqui”.

Se sei alla ricerca di un nome per il tuo brand sappi che il “naming” è un settore di lavoro molto complesso che comporta numerose ricerche e competenze in ambito legale e creativo. Ecco alcuni consigli per ottenere un risultato efficace:

• È sempre un buon indizio se il nome che hai trovato ha un forte impatto emotivo.
• I nomi brevi e incisivi sono più efficaci di quelli lunghi: “imparaqui” è meglio di “supercorsionlinebellissimi”.
• Spesso un buon nome di brand sa essere evocativo e richiamare immediatamente al tipo di servizio o esperienza che vuoi offrire ai tuoi clienti.
• Prestare molta attenzione al suono e al modo in cui viene pronunciato nella lingua dei clienti di riferimento, ad esempio, se “imparaqui” avesse come riferimento il mercato francese o inglese dovrebbe assolutamente avere un nome diverso 🙂
• Ricordati di controllare che il nome di dominio del brand sia disponibile per l’acquisto.
• Verifica che non ci siano competitor dello stesso settore con nomi uguali o molto simili.

Fai tesoro di questi consigli e segui MondoWP su Instagram per restare in contatto con noi e ricevere altre informazioni interessanti per il tuo business con WordPress.

Come scegliere Colori e Font

Per la scelta della paletta colori del sito ti invito a fare riferimento al sito coolors.co

La paletta colori che abbiamo utilizzato nel video è la seguente:

Per la gestione dei font consiglio, come faccio vedere anche nel tutorial, di scaricarli da Google Fonts e caricarli direttamente in locale su Elementor. Trovi i font che uso nel video direttamente nella cartella Drive linkata nella sezione “Link utili” all’inizio di questa pagina.

Attenzione: ricorda di disattivare il caricamento automatico di tutti i Google Fonts da Elementor » Impostazioni » Avanzate » Google Fonts » Disabilita.

Ecco di seguito la tabella dei font con i valori numerici e la relativa dicitura internazionale.

Risorse per gestione immagini e icone

Usa siti come tinypng.com per comprimere le immagini prima di caricarle sul sito.

Se vuoi creare un set di icone da caricare su Elementor puoi usare il sito fontello.com.

La pagina degli Stili Globali

Clicca qui per scaricare la Pagina degli Stili Globali ricordati di aprire il file .zip e di caricare nella libreria di Elementor il file .json che trovi all’interno.

Codici personalizzati

Questi codici ti saranno utili per personalizzare e rifinire il tuo sito creato con WordPress e Elementor PRO.

/* Rimuovere spaziatura aggiuntiva dell'ultimo paragrafo */
.elementor-widget-text-editor p:last-child { margin-bottom: 0px;
}

/* Aggiungere spazio sopra quando si scorre al titolo cliccando sull' indice contenuti */
selector .elementor-menu-anchor {
top: -100px;
position: relative;
}

/* Dimensione personalizzata titoli widget commenti */
/*ATTENZIONE METTERE QUESTO CODICE SOLO NEL CSS DEL WIDGET COMMENTI*/
selector h2, selector h3 {
    font-size: 25px;
}

/* Animare i bottoni con effetto pulsazione */
selector .elementor-button-wrapper a {
  animation-name: pulsate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Applicare animazione ai bordi superiori dello sfondo di una immagine trasparente con bordo colorato e colore di sfondo assegnato */
.img-animata div  {
    border-top-right-radius: 50px;
    border-top-left-radius: 500px;
    transition-duration: 0.5s;
    transition-property: border-top-right-radius, border-top-left-radius;
    animation: changeBorderRadius 10s infinite;
}

@keyframes changeBorderRadius {
    0% {
        border-top-right-radius: 50px;
        border-top-left-radius: 500px;
    }
    50% {
        border-top-right-radius: 500px;
        border-top-left-radius: 50px;
    }
    100% {
        border-top-right-radius: 50px;
        border-top-left-radius: 500px;
    }
}

Frase di esempio per checkbox accettazione trattamento dati personali.

IMPORTANTE: ricordati di cambiare la parte #SITO con il link della tua privacy policy!

Acconsento al trattamento dei miei dati personali e dichiaro di aver preso visione e accettato l'<a target="_blank" href="#SITO">informativa privacy</a>. *