Tema sgradevole
Flatsome è un potente tema WordPress progettato per siti Web di e-commerce e viene fornito con l'integrazione di WooCommerce.
È uno dei temi WooCommerce più popolari su ThemeForest. Al momento della stesura di questo tutorial, le vendite sono state oltre 174.500 e una fantastica valutazione di 4,8 stelle proveniente da oltre 6.600 recensioni.
Flatsome è progettato principalmente pensando ai principianti e agli utenti non esperti di tecnologia.
Questo è ottimo per le persone che vogliono iniziare con un'attività online ma non sanno come programmare o non hanno il budget per assumere un programmatore professionista. Con Flatsome potrai creare un sito web dall'aspetto professionale utilizzando strumenti semplici e intuitivi.
Ora, Flatsome è dotato di tantissime fantastiche caratteristiche e funzionalità. Per mostrare cosa è disponibile e come funziona, abbiamo un breve tutorial che ti mostra come creare una pagina di prodotto WooCommerce utilizzando Flatsome.
Quindi, senza ulteriori indugi, iniziamo:
Sommario:
- Tema sgradevole
- Differenza tra Flatsome, WooCommerce e WordPress
- Crea una pagina di prodotto WooCommerce utilizzando il tema Flatsome
- Passaggio 1: seleziona un layout per la pagina del prodotto
- (Facoltativo) Passaggio 2: crea manualmente la pagina del prodotto
- Passaggio 3: personalizza la pagina del prodotto
- Avvolgendo
Differenza tra Flatsome, WooCommerce e WordPress
Mentre diamo il benvenuto ai nostri nuovi lettori, dobbiamo inserire alcune informazioni necessarie per garantire che tutti i nostri lettori siano sulla stessa pagina. Qui discuteremo la differenza tra tutte e tre le terminologie che utilizzeremo in questo articolo.
Cominciamo con WordPress. È una piattaforma in cui installi diversi temi e plugin per creare il tuo sito web. Sono disponibili migliaia di plugin e temi per svolgere altre attività secondo le tue esigenze.
WooCommerce è un plugin che installiamo su WordPress che ti consente di aggiungere diverse funzionalità al nostro sito web. Con l'installazione di questo plugin possiamo dotare il nostro sito web e il nostro negozio online di funzionalità aggiuntive come il carrello degli acquisti, l'elaborazione dei pagamenti, la gestione dei prodotti, ecc.
Infine, ma certamente, uno degli elementi più critici è l’aspetto del nostro sito web. Flatsome è un tema che ci permette di personalizzare la prospettiva del nostro sito web secondo i nostri desideri. Ad esempio, se il logo della tua azienda è arancione, vorresti rifletterlo sul colore del tuo sito web. È ciò che Flatsome può offrirti.
Crea una pagina di prodotto WooCommerce utilizzando il tema Flatsome
Poiché tutti i nostri lettori conoscono WordPress, WoCommerce e Flatsome, è tempo per noi di passare alla personalizzazione della pagina del nostro prodotto con il fantastico builder UX fornito con il tema Flatsome. È una funzionalità di trascinamento della selezione che rende la vita del progettista estremamente semplice.
Quasi tutti hanno effettuato acquisti online, probabilmente a causa dei tempi difficili che abbiamo affrontato negli ultimi mesi. Restare a casa era la soluzione più sicura per tutti noi. È il motivo per cui tutti i nostri lettori concorderanno sul fatto che un negozio online è molto più complicato rispetto a un sito web standard.
Tuttavia, con l’aiuto di WooCommerce e Flatsome, questo compito è diventato estremamente semplice. Devi sederti e pianificare come apparirà il tuo sito web, e basta. WooCommerce sarà lì per aiutarti con le sue opzioni di builder. Puoi creare un negozio online funzionante a tutti gli effetti in pochi minuti trascinando e rilasciando.
Con WooCommerce e Flatsome potrai dare una nuova vita alle tue idee di avere un negozio online. Il tuo sito web deve avere un aspetto moderno e bello in modo che possa attirare i clienti. Pertanto, Flatsome è la soluzione migliore per tutti i tuoi problemi, quindi scaricalo da qui e iniziamo.
Flatsome ha alcune caratteristiche fantastiche, ma una delle parti è che è diventato la scelta migliore di oltre 300.000 utenti. Uno strumento definitivo aiuta a creare siti Web estremamente reattivi senza dover codificare una sola riga. Inoltre, la sua capacità di creare negozi online unici e altamente creativi lo rende ancora più degno.
Quindi, senza perdere altro tempo, passiamo al tutorial. Questo tutorial ti guida attraverso l'intero processo di progettazione della pagina dei prodotti. Le immagini ti aiuteranno a farti un'idea migliore di come verrà eseguita l'attività durante il processo.
Passaggio 1: seleziona un layout per la pagina del prodotto
Innanzitutto, inizieremo selezionando un layout della pagina dei prodotti. Questa selezione creerà una pagina base per il nostro negozio online, che personalizzeremo in seguito secondo i nostri desideri. Questa guida passo passo ti guiderà attraverso il processo di personalizzazione della pagina.
Per questo amp continueremo con l'opzione Negozio classico. Tuttavia, non ci sono restrizioni per te. Il processo di personalizzazione sarà simile per ogni layout selezionato. L'unica differenza sarebbe che la struttura di base della pagina sarà diversa dalle altre.
Passando alla personalizzazione del prodotto, gli abbiamo dato il nome Barra laterale sinistra a tutta altezza.
Sono disponibili due opzioni per personalizzare la pagina dei prodotti. Il primo deve essere eseguito con il builder UX, mentre l'altro è creare la pagina manualmente. Se selezioni la seconda opzione, dovrai andare alla documentazione ufficiale e individuare gli shortcode. Se sei un principiante e questa è la tua prima esperienza nella creazione di un negozio online, ti consiglio di optare per questa prima opzione.
(Facoltativo) Passaggio 2: crea manualmente la pagina del prodotto
Ecco uno screenshot della pagina della documentazione ufficiale di Flatsome. Puoi digitare la parola shortcode e cercarli.
Dopo aver premuto Cerca, sullo schermo verrà visualizzato un elenco di codici brevi. Puoi scegliere gli shortcode importanti per la pagina del prodotto. L'uso degli shortcode richiede meno sforzo, ma è essenziale avere un po' di esperienza pratica con WordPress e nell'utilizzo degli shortcode.
Ecco l'elenco degli shortcode che puoi utilizzare sul sito Web per creare pagine.
In questo amp , personalizzeremo il layout della barra laterale sinistra a tutta altezza; quindi, copieremo il codice per il design. Di seguito è riportata un'immagine dell'applicato, ma potete copiarla facilmente dalla struttura.
Inizia creando un blocco con un titolo. Se vuoi sviluppare head, devi fare clic su "Aggiungi nuovo" disponibile nei blocchi UX posizionati nella dashboard.
Puoi nominare il blocco secondo i tuoi desideri. Qui in questo amp abbiamo chiamato l'unione "layout della barra laterale sinistra a tutta altezza". Successivamente, puoi vedere gli shortcode all'interno dell'editor dei blocchi. Una volta completata la copia degli shortcode desiderati, puoi premere Pubblica.
Saremo alla pari dopo questo piccolo passo in cui potremo personalizzare la nostra pagina secondo i nostri desideri. Ora vai all'opzione del tema della pagina del prodotto e premi l'icona del layout personalizzato.
Una volta completato, sarai ora in grado di creare blocchi dal menu a discesa Layout prodotto personalizzato.
Scegli il blocco che abbiamo appena creato. Il nostro obiettivo principale nella creazione di quel blocco era creare una pagina di prodotto da esso. Secondo questo amp , il layout della barra laterale sinistra a tutta altezza è il blocco, mentre alla tua fine sarà come hai nominato.
Una volta completato, basta premere il pulsante Pubblica; salverà le impostazioni.
Passaggio 3: personalizza la pagina del prodotto
È giunto il momento di iniziare la personalizzazione. Innanzitutto, navigheremo nella pagina dei prodotti esistenti dal front-end che abbiamo impostato in precedenza nei passaggi.
È importante selezionare un prodotto particolare che dobbiamo configurare. Dovresti avere dettagli completi, immagini del lavoro che dobbiamo personalizzare. In questo modo, il processo diventa più comodo per visualizzare la sezione di pagina che creerai.
L'opzione del builder UX è visibile. Basta premere il pulsante per avviare la personalizzazione.
Dopo che il builder UX è aperto, puoi vedere dall'immagine che gli elementi della pagina del prodotto sono disponibili nel pannello laterale sinistro della pagina dei prodotti.
Il pannello laterale sinistro è il blocco che abbiamo creato inizialmente. Lo abbiamo creato con l'aiuto degli shortcode presi dalla documentazione.
Hai opzioni per riordinare gli elementi dal pannello laterale sinistro e modificare le impostazioni dall'opzione elemento. In questo amp , riordineremo il prezzo disponibile nel menu a sinistra.
Inoltre, ti consente anche di riorganizzare gli elementi dall'anteprima del builder e inserire componenti aggiuntivi nella pagina del prodotto del builder. In questa demo, la sezione Schede Prodotti e il Prodotto correlato sono stati riorganizzati con un semplice trascinamento.
Con la significativa funzionalità di trascinamento della selezione, Flatsome è pronto a fornirti ciò che stai cercando sul tuo sito web. Con moduli altamente personalizzabili, puoi creare facilmente pagine fantastiche. La funzione drag and drop rende la vita ancora più comoda.
Avvolgendo
È fondamentale avere un business online in questa era moderna perché le persone preferiscono restare a casa per restare al sicuro. Quindi inizia a costruire il primo negozio online della tua attività con Flatsome e incanta i tuoi clienti con la sua unicità e creatività. Inoltre, non c'è confusione di codice nell'editor dei contenuti, solo poche righe di shortcode. Flatsome è senza dubbio il miglior tema che abbia mai incontrato. Quindi non c'è bisogno di cercare altri temi, basta premere il di download e iniziare subito a costruire il tuo negozio online personalizzato.
