La pagina del checkout è uno degli ultimi steps in cui l’utente finalizza i suoi acquisti cliccando su ” completa l’acquisto”  procedendo al pagamento .

La pagina in questione però, se avessi mai cercato di personalizzarla, avrai notato che non è possibile farlo . Questo perché è una delle pagine protette dal plugin WooCommerce .

In realtà ci sono dei plugin specifici per poter personalizzare la pagina del checkout, ma se quello che cerchi è un metodo per cambiare semplicemente il colore dei pulsanti, possiamo riuscire a farlo tramite CSS.

Cambiare il colore della pagina Checkout di WooCommerce – CSS

Per poter personalizzare la nostra pagina di Woocommerce avremo bisogno di poter inserire il nostro codice di stile personalizzato all’interno del tema che stiamo utilizzando in WordPress.

Il 90% dei temi che di solito sono installati sul nostro WP , hanno la possibilità di inserire il CSS all’interno della sezione personalizza, proprio dove si modificano i dettagli del sito (nella parte frontend ) .

Infatti per questa modifica possiamo possiamo utilizzare la funzione “CSS Aggiuntivo” .

Se il tuo tema non dovesse avere questa funzione, potrai optare per un plugin che ti permetta di farlo come Simple Custo CSS and JS  , come già accennato in qualche articolo precedente .

Adesso che conosci gli strumenti per poter scrivere del codice all’interno del sito in WP , ti basta semplicemente incollare lo snippet che ho preparato per te :

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background: red !important;

color:white !important;

text-shadow: transparent !important;

border-color:#ca0606 !important;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background: red !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color:#ca0606 !important;

}

Se dovessi aver installato il plugin “Simple Custom Js and CSS dovrai cliccare su “Add Custom CSS nella tua Dashboard” :

Arrivati alla nostra pagina di aggiunta del CSS, possiamo dare un titolo al nostro codice (che in questo esempio ho chiamato Checkout ), cancellare il codice esempio ed inserire il nostro :

Se invece stessi utilizzando la funzione “CSS Aggiuntivo” del tuo tema ( personalizza ) , dovrai semplicemente incollare il codice all’interno .

Finita la procedura , noterai che i pulsanti della tua pagina Checkout saranno diventati rossi . Vuol dire che il nostro codice sta funzionando !

Per poter scegliere il colore più adatto al tuo tema, dovrai sostituire dove leggi “red”, con il tuo codice colore.

Se non conosci il codice del colore principale del tuo tema, potrai utilizzare uno degli strumenti che ti permetta di scoprirlo, come “ColorZilla” , oppure recarti sul sito Color Palette di Adobe per poterne generare uno .

Dove leggi “white” invece, sarà il colore del testo nel pulsante che potrai anch’esso sostituire a tuo piacimento .

Adesso non ti resta che goderti il tuo e-commerce con la pagina del checkout personalizzata !

È stato utile questo articolo ?

Lasciami un commento

L'articolo Colore Pagina Checkout su WooCommerce proviene da Alessandro Albergo.

In realtà le e-mails automatiche sono inviate per ogni tipo di azione, quando qualche nuovo utente si iscrive, effettua una acquisto, cancella il proprio account, ordine fallito ecc …

Per modificare il contenuto delle notifiche di posta elettronica automatiche, basta recarsi nelle impostazioni di WooCommerce nella tua Dashboard ed andare nella sezione email, dove potrai gestire le personalizzazioni delle voci :

Come vedi è davvero molto semplice personalizzare le notifiche delle azioni che vengono effettuate sul tuo negozio online utilizzando WooCommerce.

Le email inviate di default però, si presentano molto semplici e poco accattivanti.

Oggi voglio consigliarti un plugin che ti permetta di modificare a livello grafico le notifiche inviate ai tuoi clienti dal tuo e-commerce .

Creare email grafiche e personalizzare per WooCommerce

Uno dei plugin che ritengo molto semplice da utilizzare è Kadence WooCommerce Email Designer , ti permette di modificare la grafica attraverso i suoi template gratuiti e vedere il risultato in tempo reale :

Come vedi è davvero molto semplice.

Scegli il template che fa per te e il contenuto modificato prima nella sezione email sarà arricchito dalla tua grafica scelta .

Adesso potrai personalizzare le tue email ed inviare notifiche ai tuoi clienti in maniera più elegante e professionale .

È stato utile questo articolo ?

Lasciami un commento

L'articolo Email personalizzate WooCommerce proviene da Alessandro Albergo.

Uno dei plugins molto utilizzato e che utilizzo spesso è Modula , ha più di 90.000 installazioni e risulta essere sempre aggiornato :

Installiamo e attiviamo il nostro plugin che ci permetterà di avere la nostra galleria foto da mostrare su una pagina WordPress .

Attivato il plugin potrai notare nel menu della tua Dashboard la voce Modula . Cliccando si aprirà la pagina “Galleries” (chiaramente vuota) dove potrai creare quante gallerie desideri , scegliendo per ognuna le foto che tu selezionerai:

Aggiungiamo quindi la nostra prima galleria cliccando “Add your first gallery” .

Bene, adesso nella pagina di editing della tua prima galleria (proprio come se fosse una pagina da pubblicare) dovrai selezionare le foto dalla tua libreria di WordPress o importarle dal tuo computer:

Finita l’importazione, sulla stessa pagina (in basso) potrai notare una scheda dedicata ai parametri della tua galleria, qui potrai divertirti con il settaggio e la visualizzazione frontend prima di pubblicare la galleria sulla tua pagina WordPress:

Finiti i settaggi, non ci resta che pubblicare la nostra galleria :

Bene, adesso ritorniamo nella sezione “Menu->Galleries” dalla Dashboard Di WordPress e vedremo che questa volta nella lista avremo il nome della nostra galleria con uno “shortcode” da copiare e incollare nella pagina di WordPress:

Copiamolo e rechiamoci nella pagina in cui vogliamo mostrare la nostra galleria. Clicchiamo su aggiungi selezioniamo il modulo “Shortcode” :

Ora non ci resta che incollare il codice nel modulo che abbiamo appena creato e pubblicare o aggiornare la nostra pagina :

Se tutto sarà andato a buon fine, potrai vedere la tua galleria foto nella tua pagina di WordPress :

Ogni foto della galleria sarà cliccabile e potrai navigare in modalità “lightbox” su tutte le immagini :

Adesso non ti resta che goderti la tua galleria foto sulla tua pagina di WordPress!

È stato utile questo articolo ?

Lasciami un commento

L'articolo Galleria Foto per WordPress proviene da Alessandro Albergo.

Personalizzare la pagina login può essere molto utile per sviluppatori e aziende che vogliono dare al cliente un sito internet con qualche particolarità in più .

Plugin per personalizzare la pagina login di WordPress

Uno dei tanti plugin che di solito utilizzo e che fino ad ora è sempre stato aggiornato è LoginPress :

Scarica il plugin e attivalo sul sito WordPress per personalizzare la pagina login .

Come potrai notare, appena attivato il plugin ci sarà la voce LoginPress nel menù della tua Dashboard:

Cliccando si aprirà una finestra dove potrai proseguire con “allow and continue” oppure “skip all”.

Facciamo click sulla voce “Customizer” nel sottomenù di LoginPress :

Si aprirà una pagina, proprio come quando clicchi il pulsante personalizza per modificare il titolo e la Favicon del tuo sito:

Come vedi potrai davvero divertirti a personalizzare la tua pagina login in tutto per tutto! Potrai modificare il logo, il background, il colore del pulsante login e di tutti i campi del form!

Potrai anche personalizzare i messaggi di errore quando il login non va a buon fine.

Alcune funzionalità come per esempio il reCAPTCHA  , fanno parte della versione PRO, ma per tutto il resto potrai personalizzare la pagina login di WordPress in maniera davvero approfondita.

Quello che davvero è interessante, è che puoi nascondere la frase “Password dimenticata ? ” , in maniera tale che nessuno potrà cliccarci ed intuire che il tuo login è una pagina di WordPress (chiaramente ci sono molti altri metodi per scoprirlo, come attraverso alcuni add-on di Frirefox e Chrome).

Adesso potrai divertirti personalizzando la tua pagina login ed aggiungere un tocco di grafica in più al tuo sito !

È stato utile questo articolo ?

L'articolo Personalizzare pagina login di WordPress proviene da Alessandro Albergo.

Sicuramente potevo utilizzare un’immagine “.png” , ma avrei dovuto impiegarci più tempo per adattare la dimensione su ogni dispositivo. Quindi come quasi tutti gli sviluppatori che utilizzano le icone, ho deciso di crearla con una libreria e precisamente ho utilizzato “Fontawesome“.

Cosa è Font Awesome ?

Font Awesome è una delle tante librerie per sviluppatori che mette a disposizione le icone in codice, che prendono forma grazie al file di stile “CSS” che il sito rilascia tramite link (CDN).

Molte di queste librerie hanno icone che si possono utilizzare con un piano Free, quindi basta semplicemente registrarsi e includere il link della CDN rilasciato, altre invece hanno un piano PRO (a pagamento e con CDN a parte).

Non preoccuparti perché l’icona di Instagram rientra nel piano Free .

Quindi per iniziare come primo step, installiamo la libreria! Niente di più facile, copiamo la CDN e inseriamola nell’ “head” del nostro progetto con il tag “link”. Per semplificarti il tutto ti condivido qui la CDN da inserire direttamente nell’ “head”, in questa maniera potrai anche non registrarti sul sito.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

Adesso potrai copiare il codice di ogni icona free del sito FA (Font Awesome) e incollarla nel tuo progetto, il risultato sarà appunto l’icona visualizzabile (quella che avrai scelto ). Se dovessi prendere un’icona pro invece, non essendo inclusa nella CDN, non verrà visualizzata sul sito web.

Posso installare Font Awesome su WordPress ?

Certo, come al solito è tutto più rapido, ti basta installare il plugin FontAwesome  e poi inserire il codice nell’HTML del tuo articolo o del Widget.

Per Sapere come utilizzare l’HTML nella pagine puoi vedere l’articolo Immagini Responsive , dove spiego come farlo .

Creiamo l’icona di Instagram con il suo vero colore

Come prima cosa, dopo aver installato la libreria sul tuo sito, cerchiamo l’icona di Instagram nella barra di ricerca del sito FA , semplicemente cercando la parola chiave (che in questo caso sarà “Instagram”).

Io ho usato questa icona:

<i class="fab fa-instagram fa-3x"></i>

Ho aggiunto la classe “fa-3x” che rende l’icona più grande. Ci sono varie misure del css di FA, e vanno da “fa-1x” a “fa-5x”, tu puoi scegliere la misura che più ti soddisfa.

Adesso non ci resta che aggiungere il nostro stile tramite CSS.

Utilizzando WordPress potrai aggiungere lo stile tramite il menù Personalizza -> CSS Personalizzato (Lo stesso menù che usi per modificare la Favicon del tuo sito) oppure installando il Plugin Simple Custom CSS and JS .

Copia e incolla questo codice all’interno del tuo CSS o del Plugin:

.insta-colore{
	color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

Su WordPress :

Inseriamo quindi la classe che abbiamo istanziato con il nome di  “insta-colore” all’interno dell’icona di Font Awesome, quindi il risultato finale nell’ HTML sarà :

<i class="fab fa-instagram fa-3x insta-colore"></i>

Adesso dovresti vedere la tua icona di Instagram con lo stesso colore e sfumature di quella originale.

È stato utile questo articolo ?

Lasciami un commento per qualsiasi domanda o per qualche osservazione

L'articolo Colore icona Instagram Font Awesome proviene da Alessandro Albergo.

Cosa è la Favicon di un sito web ?

La Favicon, è quel logo che vedi sulla tab del tuo browser quando navighi su un sito web :

Perchè dovresti averne una ?

Perchè le favicon non sono direttamente responsabili dell’ottimizzazione dei motori di ricerca; tuttavia sono indirettamente responsabili perché sono uno strumento importante per migliorare il posizionamento sui motori di ricerca. Una favicon ( icona ) ti offre un vantaggio rispetto ad un sito web che non ne utilizza una.

Quindi ora che abbiamo capito l’importanza, vediamo subito come procedere per poterne creare una in maniere semplice:

Come primo passo, procurati il tuo logo, e ridimensionalo con le dimensioni 32×32 px (dimensione consigliata ).

Ora inserisci la favicon  “logo.png” (il nome non è importante) in una nuova cartella (che chiameremo IMG per convenzione) all’interno del progetto del tuo sito.

Adesso andiamo ad inserire nel tag “<head></head>” del tuo sito (che di solito è la prima parte che dovresti trovare nel codice ) la seguente stringa:

<link rel="icon" type="image/png" href="/IMG/logo.png">

Bene adesso ricaricando la pagina dovresti vedere la tua icona su ogni tab che raffiguri il tuo sito web.

Invece come inserisco la Favicon per il sito web in WordPress ?

Niente di più facile! Andiamo sul nostro sito in WordPress , effettuiamo l’accesso e cliccando personalizza, vedremo la voce denominazione del sito all’interno del menù, che ci permetterà di impostare la nostra favicon .

Ora non ti resta che caricare il logo da te creato e ridimensionarlo nel passaggio successivo (se dovesse esserci il bisogno) con WordPress .

Come vedi per WordPress è davvero molto facile! Ora potrai impostare la tua icona personalizzata sul tuo sito web!

È stato utile l’articolo?

Lasciamo un commento per farmelo sapere

L'articolo Aggiungere Favicon (icona – logo) sul sito web proviene da Alessandro Albergo.

Ultimamente, dopo aver visto alcuni video da cui ho preso ispirazione, ho pubblicato un post su Instagram in cui provavo a replicare il logo di Netflix in codice html e css.

Il risultato finale del logo era davvero molto simile a quello originale del famigerato marchio cinematografico, infatti ne sono rimasto così sodisfatto da creare un video e ora condividere tutto il necessario per poterlo riprodurre.

PS: Per visualizzare il post pubblicato su instagram clicca qui.

Bene, come al solito ho cercato di ridurre tutto in pochi passaggi e rendere la guida facile facile, quindi vediamo subito come creare il codice html e css per riprodurre appunto il logo di Netflix.

Iniziamo con l’html, ti basterà creare un file con il blocco note, inserire bil codice riportato e salvarlo con estensione html (nomefile.html) dentro una cartella:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Netflix Logo</title>
</head>

<body>
    
    <div class="logo">
        <div class="netflix">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <h3>Netflix</h3>
    </div>

</body>

</html>

Adesso all’interno della stessa cartella, creiamo un altro dile chiamato style.css e incolliamoci il seguente codice:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: centet;
    align-items: center;
    background: black;
    height: 100vh;
}

h3{
    color: white;
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    font-family: arial;
    letter-spacing: 12px;
    font-weight: 800;
}

.netflix{
    position: relative;
    width: 350px;
    height: 500px;
}

.netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
}

.netflix span:nth-child(1){
    background: #b00612;
    left: 0;
}

.netflix span:nth-child(2){
    background: #e50810;
    left: 0;
    transform-origin: top;
    z-index: 1;
    transform: skewX(25deg);
    box-shadow:  0 0 40px rgba(0,0,0,1);
}

.netflix span:nth-child(3){
    background: #b00612;
    right: 0px;

}

Salviamo tutte le modifiche. Ora aprendo il tuo file .html con Chrome o con Firefox, vedrai il logo creato!  Ricordati di lasciare i file in una cartella, altrimenti dovrai cambiare il path del foglio di stile (.css).

Ti è piaciuto questo articolo ?

Lasciami un commento per farmelo sapere

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.

Cosa è più importante? La grafica o la comunicazione per un sito web ?

In realtà non si può fare una distinzione tra le due cose, viaggiano in modo parallelo.

Ogni sito dovrebbe avere dei contenuti utili (soprattutto se parliamo di blog) e la giusta grafica che rispecchi ciò che rappresenta. Quindi dovresti davvero pensare e ripensare alla grafica e ai contenuti che vorresti mettere online.

Perché dico così ?

Devi sapere che bastano 7 secondi per fare una buona o cattiva impressione quando ci si presenta ad una nuova persona, immagina che in un sito web, questa tempistica viene ridotta alla metà .

Per quanto riguarda la grafica web, il mio primo consiglio, è affidarti ad una persona che possa crearti su misura quello che hai in mente, e sviluppare un progetto professionale , ma se tu volessi creare da zero un tuo sito web in maniera autonoma, ti consiglierei di incominciare con un CMS e in particolare WordPress.

Perché WordPress per creare la grafica del sito web ?

WordPress ti permette di gestire un blog o un sito web vetrina, senza possedere una conoscenza esperta di programmazione web. Ma se dovessi averne qualcuna, potrebbe essere un ottimo modo per incominciare ad allenarti a mettere mani sul codice.

Non è difficile da utilizzare, quando incominci a capire come funzionano i suoi strumenti (anche grazie all’aiuto che posso riuscire a darti), ti renderai conto che, come per tutti i siti web, non c’è limite per i contenuti che vuoi aggiungere.

Ti consiglio è di dare un’occhiata ai vari siti su cui ci sono sviluppatori che vendono Temi per WP , in questa maniera potrai comprarne uno oppure se sai sviluppare in HTML e CSS , potrai prendere spunto.

I siti principali e affidabili che vendono Temi per il web sono  Themeforest e Templatemonster .

Ci sono delle grafiche davvero ben fatte e con delle documentazioni che si possono seguire per l’attivazione di ogni plugin richiesto dal tema WP.

Quello che non ti nascondo, è che non basta purtroppo comprare un Template su WordPress, perché capita che con gli aggiornamenti o anche per qualche bug che lo sviluppatore non ha notato, potrebbe non funzionare tutto correttamente.

I bugs più comuni su i temi acquistati sono piccolezze a livello grafico, ma a volte si potrebbero avere delle complicazioni più antipatiche, come il mal funzionamento di qualche plugin sul tuo sito Web.

Come lo risolvo il problema sul mio tema ?

Se sai programmare un minimo e conosci la logica di un template di WordPress, ti basta dare un’occhiata al codice sorgente e cercare l’errore, ma se così non fosse, allora potrai chiedere supporto allo sviluppatore tramite il sito che hai utilizzato per acquistare il prodotto .

Le tempistiche di supporto potrebbero variare, tieni conto che si tratta per lo più di siti americani, quindi l’orario in cui tu invii una segnalazione, sarà diverso rispetto a quello dello sviluppatore. Infatti proprio per questo molti utenti decidono di cercare dopo l’acquisto, qualche esperto che possa installare e far funzionare il sito Web.

Chiaramente queste sono situazioni che potrebbero capitare e non ti sto dicendo che sicuramente il tuo tema avrà degli errori .

Come scelgo il tema giusto per il mio sito web ?

In realtà ora si entra in una questione di gusti, ma se vogliamo parlare della scelta giusta lascia che ti dica che ogni sito dovrebbe avere una navigazione intuitiva ed immediata.

Per quanto riguarda Themeforest, posso dirti che per mia esperienza di collaborazione passata , quasi tutti i temi rispettano il giusto standard. Infatti per poter vendere all’interno del portale, ogni progetto caricato viene esaminato in maniera fiscale dagli esaminatori prima di metterlo in vendita.

L’altro invece è molto conosciuto e ben recensito, ma non posso parlarti di esperienza personale in quanto non mi è mai capitato di avere una collaborazione.

Altre indicazioni per il tuo sito web e del tema da scegliere potrebbero essere :

• Menu di navigazione subito riconoscibile, per garantire una buona user experience.
• Sito e quindi Tema rigorosamente responsive,  più del 55% degli utenti visitano siti web da smartphone o tablet.
• Qualche immagine ad alta risoluzione, per coinvolgere l’utente.
• Spazio bianco: il giusto, tra un elemento e l’altro.
• Velocità di caricamento (si il tema influisce molto su WordPress ).
• Non utilizzare troppi plugin, appesantiscono il tuo sito.
• Cerca di usare colori coordinati .
• Usa sempre lo stesso stile, non devono esserci diversi tipi di layout nelle pagine.
• Crea e segui un tuo layout grafico (immagini, font, copertine, slider) .
• Usa massimo 2 font per tutto il sito, non utilizzarne più di 2, (uno per i titoli e l’altro per il testo).
• Call to action ben visibili, per aumentare la conversione dei visitatori.
• Cerca di rendere tutto pulito ma anche coinvolgente

Seguendo questi punti, penso che il tuo nuovo sito web incomincerà ad avere un aspetto professionale e fidati quando ti dico che molti siti rispettano il 50% di quello che c’è scritto in quella piccola lista.

PS: Per la velocità di caricamento posso darti altri consigli su come velocizzare il tuo sito, segui il mio articolo su come velocizzare WordPress.

Si ma il mio sito è responsive !

Purtroppo non basta…Ormai è quasi scontato che i siti web si adattino agli schermi degli smartphone e dei tablet, anche perché Google tende a penalizzare molto i siti che non lo sono.

È stato utile questo articolo ? Spero che tu possa trovare il giusto tema che rispetti questi standard e soprattutto i tuoi gusti .

L'articolo Grafica per il sito web proviene da Alessandro Albergo.