Vai al contenuto principale

Come personalizzare il tema Twenty Seventeen

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Come ti ho detto in a tutorial precedente, WordPress offre un nuovo tema predefinito. Questo tema, progettato per i siti Web aziendali, segna un notevole allontanamento dai temi WordPress predefiniti che in passato erano progettati per i blog e riflette la transizione più significativa di WordPress da una piattaforma di blog a una piattaforma versatile.

Se hai intenzione di provare Twenty Seventeen, capirai rapidamente una cosa: questo tema WordPress predefinito è diverso dai suoi predecessori. I temi predefiniti precedenti imponevano una configurazione minima che si traduceva in un blog solo funzionale. Beh, non è il caso di Twenty Seventeen.

Certo, puoi usarlo come tema del blog, ma ti ricordo che questo non è quello per cui è stato progettato specificamente. In realtà è stato progettato per creare siti Web aziendali utilizzando una home page con sezioni, che puoi facilmente distinguere guardando la sua demo

Scopri anche Come installare un plugin in WordPress

Il risultato di questo spostamento dell'attenzione è che la configurazione di Twenty Seventeen richiede un po 'più di tempo rispetto ai precedenti temi WordPress predefiniti.

In questo tutorial, esploreremo Twenty Seventeen, vedremo cosa ha da offrire e ti guiderò attraverso la configurazione di questo tema WordPress in modo da poter creare facilmente una home page per il tuo sito web. azienda.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Panoramica ventisette diciassette

Presentazione ventidue

L'uso di un file pagina di destinazione - Pagina di destinazione - servire come home page per i siti web aziendali è diventato di moda. Con Twenty Seventeen, è facile creare una landing page per un sito web aziendale.

Per avere un'idea delle sue possibilità, dai un'occhiata alla demo ufficiale del tema WordPress venti Seventeen. Subito dopo, noterai l'intestazione del video. Scorri un po 'verso il basso e apparirà il design in sezione della pagina. Ogni sezione è separata da una sorprendente immagine di sfondo parallasse che occupa l'intera larghezza e altezza della finestra.

La navigazione è semplice con una barra di navigazione superiore appiccicosa e un singolo carattere " Franklin libero Che è usato in tutto il tema.

Vi consigliamo di consultare Come aggiungere un menu di navigazione personalizzato su WordPress

Quando impostato correttamente, Twenty Seventeen mostra un aspetto professionale moderno, basato su selezioni di caratteri leggibili e un forte uso di immagini sorprendenti bilanciate dall'uso di spazi generosi.

Come creo una home page con Twenty Seventeen?

Andando nella stessa direzione di Matt Mullenweg, quando ha parlato di l'importanza del Customizer, quindi non sorprende che la maggior parte delle attività eseguite su " venti Seventeen Sono nel personalizzatore.

Personalizzazione di Wordpress 47

Oltre alle funzioni standard come menu e configurazione, con i widget Customizer puoi definire un'immagine o un video di intestazione, utilizzare diversi schemi di colori e influenzare il contenuto delle sezioni della tua pagina.

Scopri anche Come personalizzare il CSS del tuo sito Web WordPress

WordPress 4.7 introduce anche una nuova funzionalità chiamata “scorciatoia di modifica visibile”: appaiono come icone blu come nell'immagine precedente. Cliccando su una di queste scorciatoie si aprirà il campo che ti permetterà di modificare la sezione nel Customizer. 

Ciò rende abbastanza facile modificare le funzionalità di Twenty Seventeen come l'immagine dell'intestazione, lo slogan e il titolo e il contenuto che appare in ogni sezione di una pagina. Trova il contenuto che desideri modificare, quindi fai clic sul "collegamento di modifica visibile" e personalizza il contenuto in questione.

Vai oltre scoprendo Come aggiungere lo scrolling infinito a un blog WordPress

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

WordPress include anche una nuova funzionalità di personalizzazione chiamata " ulteriore CSS ". Abbiamo già parlato di questa funzione prima. Questa è una funzione specifica di WordPress e non di " venti Seventeen '.

Per mostrarti come impostare venti Seventeen Installerò il tema come se dovessi usarlo per il mio sito web personale.

Fase uno: creare una pagina per ogni sezione

Crea una pagina per ogni sezione

La prima cosa che devi fare è creare alcune pagine:

  • Crea una pagina che sarà la tua home page statica.
  • Crea una pagina che visualizzerà post sul blog.

Come mettere il tuo sito Web WordPress in modalità Manutenzione ? clicca su questo link

Crea fino a quattro pagine aggiuntive per contenere il contenuto che verrà visualizzato nelle sezioni della home page. Crea tre nuove pagine aggiuntive se prevedi di utilizzare il tuo blog o come una delle sezioni della home page.

consultare Come creare colonne su WordPress senza plugin

Nel caso del mio esempio, ho creato una home page, una pagina blog, una pagina delle informazioni, una pagina dei servizi e la pagina dei contatti.

Passaggio 2: aggiungere un'immagine alla prima pagina

Per ottenere l'effetto di parallasse sulle immagini, è necessario aggiungere una grande immagine della prima pagina per ogni pagina, che farà parte delle sezioni della prima pagina. Probabilmente non vorrai aggiungere un'immagine in primo piano alla home page che hai creato nel passaggio precedente, ma puoi aggiungere un'immagine in primo piano a tutte le altre pagine.

Immagine in primo piano wordpress

La demo di « venti Seventeen Utilizza immagini le cui dimensioni sono 2000 pixel di larghezza per 1200 pixel di altezza. Si consigliano immagini che si avvicinano a queste dimensioni. Capisci che non dovresti usare piccole immagini.

Scopri il 5 WordPress Page Builder Plug-in Builder di pagine

Troverai molte immagini gratuite in " StockSnap E la maggior parte ha buone dimensioni.

Passaggio 3: assegnare home page e pagina blog

Home page statica di wordpress

Ora è il momento di iniziare a personalizzare. Avvia il Customizer, quindi vai a "  Aspetto> Personalizza Sul cruscotto.

Seleziona l'opzione homepage statica E apportare le seguenti modifiche:

  • Imposta ciò che visualizza la home page, seleziona il pulsante di opzione per una pagina statica.
  • Dal menu della home page, seleziona la home page del sito web.
  • Nel menu Pagina Articoli, seleziona la pagina che visualizzerà gli articoli.

Non dimenticare di salvare le modifiche.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Passaggio 4: assegnare le altre pagine alle sezioni della home page

Ventisei sezione tematica

Ora puoi assegnare le diverse pagine che hai creato in precedenza alle sezioni nella sezione " Opzioni del tema ". Utilizzare i menu a discesa per assegnare ciascuna pagina a ciascuna sezione in base alla pertinenza assegnata ad esse.

Passaggio 5: creare il menu di navigazione principale

Puoi creare il tuo menu di navigazione direttamente dall'interfaccia di Customizer o dalla dashboard. In entrambi i casi, la creazione dei menu in WordPress non è cambiata.

Passaggio 6: aggiungere un'intestazione video

Twenty diciassette video di intestazione

Successivamente, sostituiremo l'immagine dell'intestazione con un video. Vai alla sezione corrispondente su Customizer facendo clic sull'appropriato "scorciatoia di modifica visibile" o individua " Intestazione multimediale '.

Scarica o seleziona il video che desideri utilizzare. In alternativa, puoi anche fornire l'URL di un video di YouTube da visualizzare nell'intestazione, se lo desideri.

Ancora una volta, assicurati, per esigenze di qualità, di scegliere un video di grandi dimensioni.

Venti diciassette dimostrazioni

A questo punto, tutto dovrebbe funzionare normalmente. Ti offriremo in seguito ulteriori tutorial sulla personalizzazione di questo nuovo tema WordPress.

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Prenotazione tavolo ristorante WordPress

Restaurant Table Booking Manager è un plug-in che ti consente di gestire la prenotazione dei tavoli del tuo ristorante online.

Prenotazione tavolo ristorante Wordpress

Offre l'opportunità ai tuoi affezionati clienti di prenotare un tavolo direttamente dal tuo blog WordPress. Offre strumenti di gestione della disponibilità, che ti impediranno di commettere errori.

Puoi anche utilizzare il calendario generato automaticamente per tracciare meglio le diverse prenotazioni.

Download | Demo | Web hosting

2. ShareBang

ShareBang è un plug-in WordPress rivoluzionario per la condivisione sui social. Offre un'esperienza completa ed elegante che ti aiuterà ad aumentare il traffico e migliorare le vendite e la visibilità dei tuoi prodotti, pagine e blog.

I migliori pulsanti di condivisione sociale di Sharebang per wordpress 1

Supporta + 42 dai principali social network, comprese le app mobili, come WhatsApp, Facebook, Telegram, Skype, Line, Viber e altro. Viene fornito con più di 21 posizioni dedicate ai pulsanti di condivisione social, un layout completamente personalizzabile, aggiornamenti automatici e regolari, integrazione con Mailchimp, Mailster e altro ...

Tutte le funzionalità di cui sopra e molto altro ancora sono estremamente facili da usare infine per aiutarti a ottenere più abbonati e generare più traffico. Unisciti alla prossima generazione di plugin per pulsanti di condivisione social.

Download | Demo | Web hosting

3. Octabook

Octabook è un plug-in WordPress molto facile da usare e uno strumento per appuntamenti di prenotazione istantanea per quasi tutti i tipi di servizi e fornitori di servizi che desiderano offrire la prenotazione online da un sito web.Octabook

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Offre diverse funzionalità che includono: supporto per localizzazione multipla, configurazione del servizio, prezzi dinamici, notifiche, supporto campi personalizzabili per moduli, personalizzazione dell'aspetto, Supporto per Google Calendar, la dashboard intuitiva, l'esportazione dei dati in formato csv e molto altro ancora.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial. Speriamo che ti aiuti a costruire un negozio online privato. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...   

Questo articolo contiene i commenti 35

  1. Buongiorno,
    Nuovo utente di WordPress, cerco di modificare le immagini di questo tema.
    Ho fatto molto bene per l'immagine di intestazione ma per gli altri non riesco a trovare la funzionalità.
    C'è un plug in particolare?
    Vi ringrazio in anticipo per la vostra risposta

  2. Bonjour.

    - Possiamo avere un'immagine di ricezione inferiore?
    - Possiamo inserire un logo in questa home page?

    grazie

  3. Ciao e grazie per questo tutorial che può fare bene intorno a questo tema wp.
    Stessa richiesta di boobi, vorrei che le foto evidenziate per l'effetto di parallasse non appaiano nelle pagine statiche, come la pagina dei contatti.
    Dobbiamo intervenire sul tema o è già programmato?
    Merci!

  4. Stessa domanda, come evitare che le foto dell'effetto parallasse vengano visualizzate anche nella pagina statica pagina di esempio dei contatti?
    Merci.

  5. Ciao, voglio rimuovere la foto di intestazione delle singole pagine i miei passaggi sulla pagina dell'articolo in un modo senza passare attraverso il css? GRAZIE 🙂

  6. Ciao e grazie per il vostro tutorial molto ben spiegato.

    Vorrei andare oltre. Lasciatemi spiegare.
    Ho creato un tema figlio a Th2017. Ho creato una nuova pagina contenente "TITLE" e "TEXT" e un'immagine in primo piano.
    Questa pagina collegata dal menu che appare normalmente quando si fa clic sul menu. Poi ha aggiunto alla pagina Opzioni tema.
    Inoltre, nella home page, ho l'immagine e poi il testo “TEXT” nel banner scorrevole orizzontale.
    Fino ad allora nessuna preoccupazione.
    Creo nel mio tema figlio, un modello di pagina da page.php a page_modele.php. Modifico questo file con “Template Name: Page Modele” e aggiungo echo “COUCOU” ;.
    Creo la pagina “TITLE2” con il template della pagina “Model Page” con immagine, quindi la collego al menu e la aggiungo alle Opzioni del tema.
    Questa pagina viene normalmente visualizzata con "COUCOU" quando si fa clic sul menu.
    MA, NELLA HOME PAGE, ho l'immagine MA PI IL TESTO “COUCOU”.

    Potete aiutarmi in modo che COUCOU appaia nella home page.
    Nota: COUCOU sarà una variabile proveniente da un plugin.

    Grazie per il vostro aiuto
    Bien cordialement

  7. Buongiorno,

    La mia richiesta è per il menu dei collegamenti di social networking.
    Durante la prima personalizzazione del tema 2017, non avendo un account Facebook, ho cancellato la funzionalità FB dal menu, lasciando solo il collegamento Email. Ora ho creato la pagina Facebook dell'azienda ma non riesco a riattivare questo collegamento. Ho rimosso il menu dei collegamenti dei social media pensando che forse sarebbe stato riportato alla versione originale. Ma niente da fare, non vedo come crearlo.
    Puoi aiutarmi?
    grazie

  8. Grazie per la traduzione del tutorial. Sono bloccato al passaggio 4, senza spiegarmelo non ho un menu con le opzioni, quindi è impossibile organizzare i diversi livelli della pagina statica. Un'idea ?

  9. Buongiorno,

    In questo nuovo template wordpress, il testo non occupa l'intera pagina, come cambiarlo?
    In ogni caso in home page digitare “una pagina”
    grazie
    Maud

  10. Buongiorno,

    Io uso il tema "Twenty Seventeen" per il mio sito pro.
    Vorrei fare la stessa versione con il testo francese.
    Il plugin "Polylang" può essere adatto?
    O ci sono plugin più adatti per questo tema?

    grazie

    1. Quindi, il tema ha i suoi canali e il tuo blog ha le scene. Se hai intenzione di tradurre il tema. Ti invito a utilizzare PoEdit. altrimenti per tradurre il tuo blog, PolyLang lo farà.

  11. Il nuovo tema appare TwentySeventeen realtà elegante, innovativo e accattivante.
    Ma per il colore di sfondo è solo bianco o grigio ??? Ho provato a modificare l'inclusione nel file style.css ma non ha alcun effetto: ??

  12. Ciao

    Ho installato Twenty diciassette sul mio blog WordPress
    1 Non ho più una finestra per i commenti alla fine dell'articolo
    2 come gli utenti di Internet si iscrivono al blog
    Cdlt

  13. […] Come personalizzare il tema Twenty Seventeen. Come possiamo aiutarvi oggi? Fai clic su uno dei link sottostanti per saperne di più ... Come ti ho detto in un precedente tutorial, WordPress 4.7 offre un nuovo tema predefinito. Questo tema progettato per i siti Web aziendali, segna un notevole allontanamento dai temi predefiniti in passato progettati per i blog e riflette la transizione più importante di WordPress da una piattaforma di blog a una piattaforma versatile. Se hai intenzione di provare Twenty Seventeen, capirai subito una cosa: questo tema è diverso dai suoi predecessori. [...]

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
26 azioni
quota22
Tweet1
Enregistrer3