In questo articolo imparerai come creare il tuo negozio online utilizzando il plugin Elementor Pro e il tema Ocean WP. La prima cosa di cui hai bisogno è aggiornare Elementor alla versione Pro, perché ha tutte le opzioni che ci servono per creare un negozio WooCommerce. Inoltre, hai bisogno del tema Ocean WP, che è gratuito, e del plugin WooCommerce.
Negozio online - creazione
Devi creare una nuova pagina e chiamarla negozio o come preferisci, in questo esempio si chiamerà Il mio negozio, quindi nelle impostazioni del tema, nelle opzioni Layout del contenuto devi impostarlo su 100% Larghezza intera, così come disattivare i margini e cliccare su Modifica con Elementor.
Una volta aperto l'editor di pagina in Elementor, iniziamo a creare la pagina. Iniziamo aggiungendo il titolo, che stiliamo sotto l'opzione Stile, modificandone il colore, la dimensione del carattere e tutto il resto a piacere, aggiungendo spaziatura e un editor di testo e ottenendo una sezione titolo, che possiamo salvare come modello e che al momento appare come nell'immagine sottostante.
Dopo aver fatto questo, è il momento di iniziare ad aggiungere elementi WooCommerce. Troviamo il codice dell'elemento. Prodotti Woo elemento e aggiungerlo alla pagina. Di default ci sono 4 prodotti in 4 colonne, ma potremo modificarlo in base al numero di prodotti che abbiamo e al numero di colonne (è possibile impostare da 1 a 6) che desideriamo.
Per impostare quali prodotti vogliamo mostrare per ultimi, modifichiamo le cose sotto l'opzione Contenuto, al lavoro Domanda. Possiamo scegliere gli ultimi prodotti di default oppure selezionarli manualmente, quindi possiamo scegliere in base all'autore, in questo esempio specificamente perché si tratta di musica, ma l'autore può essere un produttore, ad esempio. poi per categorie di prodotti, per tag, per filtri e simili. La scelta spetta a te. Sotto l'opzione Avanzate puoi modificare margini, spaziatura, sfondo, bordi e altro ancora.
Dopo aver fatto questo, salviamo la pagina e andiamo al pannello di controllo. Nel plugin WooCommerce creiamo prodotti e impostiamo le categorie, il prezzo, i tag e se sono separati o meno.
Cliccando sulle stelle sceglieremo che il prodotto venga evidenziato e se abbiamo impostato di visualizzare i prodotti evidenziati nella sezione, verranno visualizzati tutti i prodotti per i quali abbiamo attivato la stella.
La prossima cosa che creeremo è una nuova sezione a 2 colonne. Separeremo i prodotti selezionati dagli altri e creeremo la cosiddetta sezione Call To Action. Aggiungeremo un'immagine a una colonna e del testo all'altra. Aggiungeremo un'immagine con codice opzione a una colonna Stile, ma quando lo aggiungiamo, non viene visualizzato. Per risolvere questo problema, aggiungeremo un nuovo elemento alla colonna Distanziatoreo barra spaziatrice. Fatto questo, l'immagine è stata visualizzata; per far sì che sia visibile per intero o quanto vogliamo, è necessario regolare le dimensioni di Spaser e l'immagine si ingrandirà. Quindi selezioniamo di nuovo la colonna e definiamo lo stile che dovrà avere l'immagine. Nella seconda colonna aggiungeremo un titolo, un testo e un pulsante che inviteranno le persone all'azione. Naturalmente, modificheremo anche lo stile di questa colonna, cambieremo il colore, le lettere, la dimensione del carattere, gli spazi, i margini, lo sfondo e altro come desiderato nell'opzione Stile.
Dopo aver creato la sezione CTA (Call To Action), la cosa successiva che creiamo è la sezione vendite. Per semplificare il nostro lavoro, aggiungiamo il modello già salvato della sezione del titolo, che abbiamo creato all'inizio del testo, e lo modifichiamo in modo che non sia lo stesso. Aggiungiamo quindi l'elemento Woo Products e impostiamo quali prodotti vogliamo visualizzare in quella sezione. Modifichiamo ciò che è necessario nell'opzione Query come nella volta precedente e otteniamo una sezione come quella nell'immagine qui sotto.
Se vogliamo modificare il pulsante Aggiungi al carrello, in modo che si adatti meglio al resto della pagina, dobbiamo andare al pannello di controllo, quindi a personalizzare e clicchiamo sulla pagina del nostro negozio e dopo sull'opzione CSS/JS personalizzati. Qui digitiamo un breve codice CSS per modificare i pulsanti prendendo di mira specifici tag WooCommerce come prodotti da strada E li.prodottoe usali per definire lo stile dei pulsanti.
Spero che questo testo ti sia stato utile e che tu abbia imparato qualcosa di nuovo, se sei interessato a leggere altri consigli per il lavoro indipendente puoi verificarli sul nostro blog, e nel caso in cui desideri consultare professionisti, clicca su questo Collegamento.
Fonte: Youtube
