Come convertire PSD in WordPress utilizzando Elementor e WidgetKit
Pubblicato: 2019-12-12Stai cercando una soluzione di conversione da PSD a WordPress? Vuoi convertire il tuo sito web PSD pronto in WordPress, ma non sai come fare? Ok, posso aiutarti con questa faccenda.
Sai già che WordPress è una delle piattaforme CMS più utilizzate e versatili degli ultimi tempi. Ora, creare un sito Web completamente funzionale da PSD a WordPress senza codifica è molto più comodo con un generatore di pagine come Elementor.
In questo articolo, ti mostrerò "Come convertire un PSD in WordPress utilizzando Elementor e WidgetKit" passo dopo passo.
Vediamo come.
Selezione di un design PSD
Prima di convertire un tema PSD in WordPress, la prima cosa che devi fare è selezionare un design PSD di un sito web. In breve, PSD è l'abbreviazione di PhotoShop Design, uno degli strumenti di progettazione più popolari con cui viene creata la maggior parte del design di siti Web WordPress.
Puoi scegliere uno qualsiasi dei tuoi design PSD preferiti dalla vasta collezione di PSDHUB.
Forniscono modelli PSD gratuiti di qualità premium per il tuo sito Web, sia per uso personale che commerciale. Ricorda, il design PSD selezionato deve essere semplice e contemporaneo.
Controlla i seguenti fattori mentre scegli un design PSD,
- Struttura del progetto: la prima cosa da considerare è la struttura del progetto. Il design non ha limiti ma la codifica sì.
- Layout pulito ed elegante: la terza cosa è che il tuo design PSD preferito deve essere pulito ed elegante. Aiuta lo sviluppatore a creare un sito Web perfetto per i pixel da un layout pulito ed elegante.
- Soddisfazione dello scopo: la seconda cosa è se il design soddisfa il tuo scopo o meno. Supponiamo che tu abbia bisogno di un sito Web di viaggi, quindi il tuo design PSD deve essere un sito Web di viaggi PSD.
- Complessità: infine, prova a ignorare la complessità come è per PSD anche nella scelta degna.
Qui utilizziamo il modello Eventia-Conference e Event Management di PSDHUB.
Installa WordPress
WordPress è noto per la sua facilità di installazione. Nella maggior parte dei casi, l'installazione di WordPress è un processo molto semplice e richiede meno di cinque minuti per essere completata. Per convertire un tema PSD in WordPress, l'installazione di WordPress è il secondo passaggio da considerare.
WordPress.org fornisce un articolo dettagliato su "Come installare WordPress" nella pagina di supporto del loro sito. Tuttavia; Ecco le istruzioni di base per l'installazione di WordPress per te,
- Per prima cosa scarica e decomprimi il pacchetto WordPress.
- Crea un database per WordPress sul tuo server web, oltre a un MySQL.
- Carica i file di WordPress nella posizione desiderata sul tuo server web:
- Se desideri integrare WordPress nella radice del tuo dominio, sposta o carica tutti i contenuti della directory di WordPress decompressa nella directory principale del tuo server web.
- Se desideri avere la tua installazione di WordPress nella sua sottodirectory sul tuo sito web, crea la directory del blog sul tuo server e carica il contenuto del pacchetto WordPress decompresso nella directory tramite FTP.
- Esegui lo script di installazione di WordPress accedendo all'URL in un browser web.
Questo è tutto! Ora WordPress dovrebbe essere installato.
Installa Elementor
L'articolo riguarda la conversione di un tema PSD in WordPress utilizzando Elementor. Quindi, abbiamo bisogno di Elementor per personalizzare e modificare il file PSD. Vediamo quindi come installare Elementor.
Elementor è una delle migliori piattaforme di progettazione complete per creare un design perfetto per i pixel in WordPress. È il migliore per il suo approccio progettuale estensibile e intuitivo. Anche il processo di installazione di Elementor è un compito semplice. Segui alcuni semplici passaggi e sei pronto per progettare il tuo PSD nel generatore di pagine di Elementor.
Esistono due modi per installare il plug-in Elementor. Il processo di installazione è descritto di seguito,
Tramite il sito Elementor
- Per prima cosa vai su elementor.com e fai clic su download.
- Nella dashboard di WordPress, fai clic su Plugin > Aggiungi nuovo .
- Fai clic su Carica plug -in e scegli il file che hai scaricato per Elementor.
Tramite dashboard di WordPress
- Dal dashboard, fai clic su Plugin > Aggiungi nuovo.
- Nel campo Cerca, inserisci Elementor e scegli Elementor page builder da installare.
- Dopo l'installazione, fare clic su Attiva.
Questo è tutto ciò che devi fare per installare il generatore di pagine di Elementor. Puoi anche seguire il video qui sotto per saperne di più sul processo di installazione.
Installa WidgetKit
WidgetKit per Elementor: il kit di componenti aggiuntivi di Elementor più avanzato e potente che migliora le capacità di creazione del tuo sito Web aggiungendo più elementi e layout. Qui utilizziamo i widget e gli elementi per la conversione da PSD a WordPress.
Puoi creare quasi tutti i tipi di pagine da un PSD utilizzando WordPress e WidgetKit. L'installazione di Widgetkit è semplice come progettare un tema da PSD a WordPress con esso. Dalla dashboard di WordPress puoi aggiungere WidgetKit facilmente seguendo alcuni semplici passaggi. Vediamo,
Installa WidgetKit tramite la dashboard di WordPress
- Dal dashboard , fai clic su Plugin > Aggiungi nuovo.
- Inserisci WidgetKit nel campo Cerca e scegli WidgetKit per l'installazione di Elementor.
- Al termine dell'installazione, fare clic su Attiva .
WidgetKit è pronto per l'uso con Elementor ora. Se hai ancora qualche confusione, segui il video. Questo ti aiuterà anche su come usare WidgetKit.
Converti il tuo PSD in WordPress
La parte di installazione è stata completata. Ora è il momento di convertire il PSD in WordPress Elementor e WidgetKit. Ci sono molti fornitori di servizi da PSD a WordPress che attualmente offrono conversioni da PSD a WordPress e da PSD a Joomla. Tuttavia; puoi progettare il tuo modo preferito. Qui mostriamo solo un modo di base per convertire un PSD in WordPress.
Inoltre, puoi anche scegliere uno qualsiasi dei nostri temi e modelli già pronti dalla vasta raccolta della nostra directory Temi e plugin di WordPress.
Prova a seguire la sequenza durante la progettazione di un layout da PSD. Questo ti aiuterà molto,
Crea una nuova pagina
La prima cosa che devi fare è creare una nuova pagina dalla dashboard di WordPress. Dal lato in alto a sinistra della dashboard di WordPress, fai clic su Pagine > Aggiungi nuovo.
Quindi fare clic su Modifica con Elementor per accedere a Elementor Page Builder. Vedrai un pannello Elementor come mostrato di seguito.
Costruisci la tua pagina da file PSD
Per costruire una pagina o convertire un tema PSD in WordPress, ci sono tre cose principali da considerare; Sezioni, colonne e widget. Qui le sezioni sono gli elementi costitutivi più grandi e catturano le colonne. Puoi posizionare i widget all'interno delle colonne. Facendo clic sull'opzione di modifica puoi controllare la sezione, la colonna e i widget con la loro maniglia.
Aggiungi sezione di intestazione
Per la sezione dell'intestazione qui utilizziamo un Theme Eventia di Themeexpert. In WordPress hai utilizzato un tema esistente come cornice per la progettazione di un modello, altrimenti lo stesso WordPress ne aggiunge uno per te. Quindi puoi aggiungere il logo e più pagine utilizzando il design o il layout del tema esistente.
Aggiungi la sezione Eroe
Ora convertiamo la sezione dell'eroe. Per prima cosa aggiungiamo un'immagine di sfondo come il PSD, quindi aggiungiamo una colonna in una colonna per aggiungere più contenuti e icone.
Per l'opzione contatore qui utilizziamo l'elemento WidgetKit Countdown. L'output e l'opzione di modifica sono di seguito.
Aggiungi sezione interna
Ora è il momento di progettare la sezione interna. Qui utilizziamo gli elementi Elementor per aggiungere sfondo e testo tra due colonne.
Questa è la sezione Informazioni su questo evento modifica con Elementor element. Qui aggiungiamo del testo e un'immagine banner all'interno della colonna della sezione. La vista sta guardando sotto.
Con l'icona verticale del team di WidgetKit progettiamo la sezione degli altoparlanti del file PSD. Lì aggiungiamo immagini e l'icona del sito sociale in diverse colonne con nome e designazione.
In questa sezione aggiungiamo semplicemente alcune icone casuali dal PSD e diamo un titolo.
Non possiamo fare tutto con Elementor. In tal caso cosa facciamo? Usiamo addon da un tema diverso o creiamo un addon per il nostro. Questa è una cosa comune durante la progettazione di un tema da PSD a WordPress. Qui utilizziamo il componente aggiuntivo Schedule da Eventia Theme.
Per la sezione Blog utilizziamo l'elemento blog carosello di WidgetKit. Con diversi contenuti visivi puoi aggiungere lo sfondo anche il pulsante Leggi di più.
Per la sezione del piè di pagina qui utilizziamo un Theme Eventia di Themeexpert come facciamo prima della sezione dell'intestazione. Qui otteniamo più icone del sito sociale e un pulsante di iscrizione.
Visualizza in anteprima e pubblica la tua pagina
Una volta che hai finito di progettare la tua pagina dal PSD, puoi visualizzare in anteprima il tuo lavoro e pubblicarlo . Puoi anche modificare una pagina pubblicata e salvare il tuo lavoro come Bozza . Ciò significa che non rovinerai la tua pagina pubblicata salvando il tuo lavoro come Bozza . Ecco l'anteprima visiva di Eventia PSD.
Parola finale
Questo è tutto per oggi, ragazzi. Spero che l'articolo ti piaccia e che tu abbia un'idea chiara su come convertire un PSD in WordPress utilizzando il generatore di pagine Elementor e WidgetKit. Applica la risorsa e, naturalmente, non dimenticare di condividere la tua esperienza e la tua preziosa opinione nella sezione commenti qui sotto.