Conversione da PSD a WordPress utilizzando un tema di base e un costruttore di pagine

Conversione da PSD a WordPress utilizzando un tema di base e un costruttore di pagine

Voglio condividere con il mondo il modo in cui stiamo cambiando il gioco rendendo il PSD to WordPress mainstream sfruttando un tema di base con i migliori page builder. Costruiamo migliaia di siti web PSD to WordPress personalizzati ogni anno e abbiamo perfezionato il processo migliore in assoluto per farlo su scala. Siamo inoltre orgogliosi di continuare a impiegare i migliori designer in tutta Europa per realizzare progetti di altissimo livello su scala. Crediamo che ogni marchio meriti un sito web del tutto unico. Ecco le 5 opzioni principali con cui possiamo convertire i progetti UI personalizzati in un sito WordPress senza soluzione di continuità:

  1. Da PSD a Elementor
  2. Da PSD a Divi
  3. Da PSD a Beaver Builder
  4. Da PSD a Gutenberg
  5. Conversione del PSD direttamente in un tema WordPress utilizzando Underscores o un tema leggero simile per creare modelli statici e utilizzando ACF per i contenuti dal backend.

Per ottenere risultati perfetti al pixel è necessario avere un background in HTML e CSS o una precedente esperienza in WordPress. In caso contrario, ci saranno limitazioni con un page builder e senza codice personalizzato. Di seguito illustrerò il processo standard che può essere applicato a tutti e 5 i metodi.

Cos'è un tema di base

Secondo WordPress.org, un tema di WordPress è un insieme di file che lavorano insieme per produrre un'interfaccia grafica con un design sottostante unificato per un sito web. Questi file sono chiamati file modello. Un tema modifica il modo in cui il sito viene visualizzato, senza modificare il software sottostante. Noi di Seahawk utilizziamo un tema di base per tutte le costruzioni che facciamo. Alcuni dei temi che utilizziamo sono:

Tutti i temi citati sono tra i più popolari sul mercato! Utilizziamo questi temi perché sono noti, leggeri, meno ingombranti e la maggior parte dei nostri clienti li conosce bene, per cui è facile per i clienti modificarli da soli quando il sito viene consegnato. I temi hanno anche dei page builder nativi che si abbinano molto bene.

Cos'è un costruttore di pagine

Un costruttore di pagine è un plugin o un componente di un tema che consente di strutturare e progettare le pagine con il minimo sforzo e tempo. Esistono modelli e blocchi riutilizzabili che possono essere utilizzati per generare sezioni in modo rapido. Molti di voi potrebbero già avere familiarità con i moduli HTML presenti nell'editor di un page builder.

Processo di conversione personalizzata da PSD a WordPress

Prima di illustrare il metodo di Seahawk per la conversione da PSD a WordPress utilizzando un tema di base e un costruttore di pagine, vorrei illustrare il modo in cui le persone hanno eseguito il processo da PSD a WordPress per anni.

Processo: Da PSD a HTML a WordPress

Il processo più comune è quello di convertire i disegni in HTML e poi creare un tema WordPress con e utilizzare plugin come Advance Custom Fields per creare campi nel backend per gli amministratori per riempire il contenuto che viene popolato nel frontend del sito. Non c'è assolutamente nulla di sbagliato in questo metodo! Anzi, è davvero vantaggioso se avete un progetto di grandi dimensioni con requisiti di prestazioni rigorosi, un sito web super personalizzato, un budget elevato e avete sviluppatori frontend e WordPress di talento al vostro fianco.

Conversione da PSD a WordPress utilizzando un tema di base e un costruttore di pagine

Il metodo più recente e più efficace è quello che abbiamo adottato noi di Seahawk: Convertire un progetto personalizzato in WordPress utilizzando un tema di base e un costruttore di pagine. Può essere utilizzato anche se non si sa codificare, ma è sempre meglio avere un codificatore al proprio fianco o conoscere l'HTML. Se non sapete codificare, dovrete essere un pensatore critico. Per gli sviluppatori, questo processo può accelerare la velocità di sviluppo e far risparmiare tempo 🙂

Processo: Da PSD a WordPress (diretto)

Con questo metodo, invece di convertire prima i disegni in HTML, costruirete il sito web utilizzando un tema di base davvero fantastico e un plugin per la creazione di pagine di WordPress! So che può sembrare una follia e posso capirlo... Questo non è il metodo tipico che è stato utilizzato nella storia di WordPress e può sembrare una scorciatoia. Sono nel settore da molto tempo e ho visto tutti i tipi di temi e builder con un codice orribile, un design scadente, ecc. Il settore ha fatto molta strada dall'evoluzione dei page builder e da aziende come Elementor che hanno spinto la piega.

WordPress ha ormai più di 15 anni e i temi e i page builder sono maturati fino a diventare davvero robusti e siamo in una posizione migliore che mai per utilizzarli. Oggi non è mai stato così facile costruire siti web WordPress personalizzati sfruttando un tema di base, un page builder e alcune conoscenze di base di HTML/CSS!

Quali sono i vantaggi di questo modo di procedere?

  1. È conveniente. Il tempo di sviluppo si riduce notevolmente utilizzando questo metodo, poiché non è necessario codificare tutto da zero. È sufficiente avere uno sviluppatore frontend solido che conosca WordPress.
  2. Codice eccezionale per iniziare il vostro progetto. I migliori temi e page builder forniscono un punto di partenza eccezionale per far risparmiare tempo agli sviluppatori.
  3. Facilità di modifica del sito web. A differenza del sito personalizzato, avete il pieno controllo sull'aspetto del sito e potete facilmente modificare le pagine e spostarle senza problemi, utilizzando il costruttore di pagine.

Quale tema e quale costruttore di pagine utilizzare?

Abbiamo fatto ricerche approfondite su quali temi e page builder utilizzare. Per noi era importante scegliere il duo giusto, in modo da poter non solo costruire siti web di prima classe per i nostri clienti, ma anche rendere il processo super efficiente. Ci sforziamo anche di rendere i nostri prezzi accessibili ai marchi di tutte le dimensioni, poiché crediamo che ogni azienda meriti un sito personalizzato che sia davvero unico per il suo marchio. Dopo aver effettuato le nostre verifiche dei migliori temi e page builder, ecco cosa abbiamo scelto alla fine:

  1. Tema Hello di Elementor: È uno dei temi più veloci e personalizzabili del mercato. Hello Theme è leggero e ci permette di essere super personalizzati, oltre a semplificare le cose per i nostri clienti.
  2. Elementor Pro Page Builder: Ci sono molti ottimi page builder in circolazione, ma noi abbiamo scelto Elementor perché non solo è il più compatibile con Hello Theme, ma è anche molto facile da usare per il nostro team e quando consegniamo i siti ai clienti. Possono facilmente apportare modifiche da soli e ci sono tonnellate di moduli precostituiti che possono essere sfruttati per creare più sezioni.

Elementor ci dà la possibilità di progettare, sviluppare e lanciare qualsiasi tipo di sito web con il miglior processo. Utilizziamo questo duo di temi e plugin per la maggior parte dei progetti che realizziamo oggi con grande successo. I clienti sono pienamente soddisfatti dei siti web che realizziamo e siamo anche agnostici rispetto alla piattaforma, quindi possiamo lavorare con la maggior parte dei temi e dei costruttori di WordPress.

Semplici passi per convertire PSD in WordPress

Per iniziare è necessario disporre delle licenze dei seguenti strumenti:

Ecco il breve schema del processo che ho individuato per la progettazione personalizzata da Photoshop (PSD) a Elementor WordPress:

  1. Progettazione di un bellissimo mockup della homepage da parte di un designer UI professionista (utilizzando il brief di progettazione). Le revisioni non vengono effettuate in un ambiente live perché lavoriamo in Figma, Photoshop, XD o Sketch per revisioni rapide e un design professionale senza limiti per realizzare la visione del cliente.
  2. Creare un sito di staging una volta che la direzione del progetto e la homepage sono state approvate per lo sviluppo.
  3. Installare Hello Theme by Elementor e il plugin Elementor Page Builder , quindi assegnare la chiave di licenza.
  4. Intestazione e piè di pagina Costruite secondo il design approvato utilizzando l'intestazione e il piè di pagina globali di Elementor.
  5. Impostazioni globali del costruttore di pagine Utilizzo di Approved Design Direction per implementare le impostazioni globali del design. Impostare padding, margini, colori, ecc. per mantenere tutto super coerente! Si consiglia di creare prima una pagina di stile per mantenere il marchio coerente!
  6. Convertire il design approvato del mockup della homepage in WordPress utilizzando Elementor in modo identico al design approvato. Alcuni progetti contengono aspetti che non possono essere realizzati con il costruttore di pagine, pertanto in alcune aree potrebbe essere necessario implementare codice personalizzato utilizzando moduli HMTL/CSS.
  7. Costruire le sottopagine Una volta completata la homepage, le sottopagine seguiranno l'esempio.
  8. L'avvio del sito utilizzando l'ampia lista di controllo per l'avvio del sito WordPress di Seahawk.

Non posso condividere tutti i nostri segreti, ma spero che questo sia d'aiuto.

Vantaggi del nostro metodo

Conclusione

Se non siete sviluppatori avanzati, questa è la scelta migliore per creare un sito personalizzato da soli. Con competenze in HTML/CSS potete sicuramente realizzarlo in modo impeccabile. Vi consiglio di scegliere il tema di base e il costruttore di pagine che preferite, perché sono facili da imparare e vi faranno fare un figurone! Se siete sviluppatori, allora capirete la maggior parte di ciò che ho descritto e potrete costruire un processo che funzioni per voi. Se non siete tipi da fai-da-te, potete mettervi in contatto con noi per il nostro servizio che vi aiuterà a convertire i vostri progetti PSD in siti WordPress a prezzi rivoluzionari! Spero che l'articolo vi sia piaciuto! Lasciate un commento qui sotto per condividere i vostri pensieri!

FILOSOFIA SOCIALE SEAHAWK 01
Processo
Tanvi Adlakha Khorana

Filosofia sociale Seahawk

Viviamo in un mondo pieno di Pac-man che divorano (scorrendo in realtà) informazioni a sinistra,

Ryan Hussey 24 marzo 2022

La più grande ragione per l'abbandono dell'hosting WordPress gestito: Siti lenti e siti violati

In qualità di operatori di programmi pro service per aziende di web hosting Managed WordPress, abbiamo visto in prima persona

WordPress
Ryan Hussey 11 giugno 2021

Conversione da PSD a WordPress utilizzando un tema di base e un costruttore di pagine

Voglio condividere con il mondo il modo in cui stiamo cambiando il gioco rendendo

Processo
Ryan Hussey 17 dicembre 2020

Processo di Web Design Seahawk - Progettazione UI personalizzata da PSD a WordPress

Seahawk è uno dei più grandi e migliori servizi di web design e marketing professionale per WordPress.

Processo

Iniziare con Seahawk

Registratevi nella nostra app per visualizzare i nostri prezzi e ottenere sconti.