TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere e personalizzare i pulsanti nel sito Weebly?

19

I pulsanti su un sito Weebly sono uno degli elementi importanti utilizzati ai fini dell’invito all’azione. Ad esempio, puoi aggiungere un pulsante che richiede agli utenti di scaricare un documento PDF. Poiché Weebly ha un numero molto inferiore di temi, è un problema comune che potrebbe piacerti l’intero tema, ma il pulsante su quel tema potrebbe avere uno stile invadente. In uno scenario del genere è facile sostituire lo stile dell’elemento del pulsante Weebly predefinito con il proprio CSS personalizzato o con lo stile del pulsante di un altro tema. Questo articolo spiega le possibilità di personalizzare l’elemento del pulsante Weebly predefinito.

Aggiunta dell’elemento pulsante predefinito

Weebly per impostazione predefinita offre un elemento pulsante trascina e rilascia che può essere personalizzato in quattro diversi tipi. L’elemento pulsante è raggruppato nella categoria di elementi "struttura". Per impostazione predefinita, gli utenti possono aggiungere due stili di pulsanti piccoli e due stili di pulsanti grandi.

Come aggiungere e personalizzare i pulsanti nel sito Weebly?

Stili dei pulsanti predefiniti di Weebly

Su tutti i temi non reattivi Weebly utilizza le immagini per creare un pulsante e su tutti i temi reattivi lo stile dei pulsanti è controllato nel file "main.less". Una volta trascinato e rilasciato, fai clic sul pulsante nell’area dei contenuti per visualizzare le seguenti opzioni di personalizzazione:

  • Testo pulsante: testo da visualizzare sul pulsante.
  • Stile pulsante: scegli uno dei quattro stili disponibili.
  • Posizione: allineamento del pulsante al centro, a destra o a sinistra.
  • Link: aggiungi link al testo del pulsante.
  • Spaziatura: regola i margini superiore e inferiore.

Come aggiungere e personalizzare i pulsanti nel sito Weebly?

Opzioni elemento pulsante Weebly

Oltre all’elemento pulsante trascina e rilascia, Weebly offre anche un pulsante di invito all’azione sui modelli di pagina di destinazione.

Sostituisci o modifica gli stili dei pulsanti in "main.less" per personalizzare i pulsanti sul tuo sito Weebly utilizzando temi reattivi.

Reattivo Vs Non Reattivo

Prima di provare a cambiare lo stile dei pulsanti, controlla che tipo di tema stai attualmente utilizzando. Esistono tre tipi di pulsanti utilizzati sui temi Weebly:

  • Pulsanti CSS su temi reattivi – tema di esempio Slick, Cento.
  • Pulsanti CSS su temi non responsive – tema di esempio Cleancut.
  • Pulsanti immagine su temi non responsive – tema di esempio Città.

Temi non reattivi con pulsanti immagine: qui l’elemento pulsante utilizza l’immagine e il CSS chiama semplicemente questa immagine come sfondo, il tema di esempio è Città.

Temi non reattivi con pulsanti CSS: temi come Cleancut utilizzano pulsanti CSS completi senza immagini sebbene sia un tema non reattivo.

Temi reattivi: tutti i temi più recenti come Slick, Cento, Paper, ecc. Sono completamente reattivi e l’elemento pulsante è generato dal codice CSS.

Discuteremo come modificare lo stile del pulsante su temi sia reattivi che non reattivi.

Caso 1 – Aggiunta di immagini di pulsanti personalizzate su temi che non rispondono

La caratteristica importante dell’elemento pulsante Weebly è la sua capacità di adattarsi alla lunghezza del testo. Il pulsante verrà regolato automaticamente in base alla lunghezza del testo inserito. Ciò si ottiene dividendo un pulsante in due immagini. Prima di andare oltre, segui i passaggi seguenti per capire dove sono archiviate le immagini dei pulsanti in un sito Weebly.

  • Accedi al tuo account Weebly e scegli il sito per la modifica.
  • Vai alla scheda "Tema" e fai clic sul pulsante "Modifica HTML / CSS".
  • Nella sezione "Risorse" vedrai diverse immagini dei pulsanti come mostrato di seguito:

Come aggiungere e personalizzare i pulsanti nel sito Weebly?

Immagini dei pulsanti su temi Weebly non reattivi

Abbiamo notato che tutti i temi non reattivi che utilizzano immagini per i pulsanti hanno 9 set di immagini (in totale 18) per pulsanti più piccoli e più grandi, ma utilizzano 2 immagini specifiche in CSS come sfondo del pulsante. Controlla "main_style.css" e scopri quali sono le immagini utilizzate per i pulsanti. L’esempio seguente sul tema Città mostra che "button-highlight.png" e "button-highlight-large.png" vengono utilizzati rispettivamente per pulsanti più piccoli e più grandi.

Come aggiungere e personalizzare i pulsanti nel sito Weebly?

Immagini utilizzate per pulsanti su temi non reattivi

Se non ti piacciono questi pulsanti, cambia semplicemente l’immagine in una delle immagini disponibili da 9 set. È possibile modificare "button-highlight.png" in "button-purple.png". Nel caso in cui non ti piaccia nessuna delle immagini dei pulsanti esistenti, crea le tue immagini personalizzate con dimensioni simili e stile diviso e caricale nella sezione "Risorse". Assicurati di utilizzare il nome dell’immagine in "main_style.css" per la proprietà "background".

Caso 2 – Personalizzazione dei pulsanti CSS su temi non reattivi

Se non trovi alcuna immagine dei pulsanti nella sezione "Risorse" del tuo tema non reattivo, controlla "main_style.css" per vedere la sezione "Pulsanti". Di seguito è riportato il codice CSS del tema Cleancut che può essere personalizzato per sfondo, colori, effetto hover, ecc. di cui hai bisogno.

/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover, .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }

Ora torna all’editor e trascina l’elemento pulsante nell’area del contenuto. Puoi vedere che il pulsante avrà il nuovo stile come definito in "main.less".

Caso 3 – Personalizzazione dei pulsanti Weebly su temi reattivi

Tutti gli ultimi temi Weebly sono reattivi e utilizzano solo codici CSS per generare pulsanti. Come spiegato sopra, gli stili dei pulsanti CSS rilevanti sono definiti nel file "main.less" nella sezione "/ Buttons /". Se il tuo tema utilizza la funzione @import in CSS, controlla il file del pulsante corrispondente per il CSS. Qui è necessario sostituire questi codici con il codice del pulsante CSS personalizzato per modificare lo stile del pulsante predefinito.

Di seguito sono riportate le definizioni di stile CSS per il pulsante Weebly:

  • .wsite-button – Pulsante piccolo
  • .wsite-button:hover – Effetto hovering per il pulsante piccolo
  • .wsite-button:active – Effetto quando si fa clic sul pulsante piccolo
  • .wsite-button-inner – Definisci lo stile degli elementi interni come la dimensione e il colore del carattere

Allo stesso modo i pulsanti più grandi utilizzeranno la classe CSS .wiste-button-large.

Nota: se sul tuo sito è stata aggiunta una pagina del blog, alcuni temi potrebbero aggiungere una classe CSS aggiuntiva .blog-button per i pulsanti sui post del blog.

Puoi modificare questi codici CSS da solo o utilizzare qualsiasi strumento di generazione di pulsanti CSS online per ottenere il CSS richiesto. Ad esempio, gli stili dei pulsanti piccoli possono essere modificati con il gradiente sostituendo i codici dei pulsanti piccoli predefiniti con il codice CSS seguente:

.wsite-button { border-top: 1px solid #96d1f8; background: #6594d6; background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6)); background: -webkit-linear-gradient(top, #7a3e9c, #6594d6); background: -moz-linear-gradient(top, #7a3e9c, #6594d6); background: -ms-linear-gradient(top, #7a3e9c, #6594d6); background: -o-linear-gradient(top, #7a3e9c, #6594d6); padding: 14.5px 29px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 24px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .wsite-button:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .wsite-button:active { border-top-color: #1b435e; background: #1b435e; }

La modifica dell’elemento del pulsante con i codici CSS vecchi e nuovi è mostrata in un tema di esempio come di seguito:

Come aggiungere e personalizzare i pulsanti nel sito Weebly?

Nuovo pulsante CSS in Weebly

Nota: è possibile modificare gli stili dei pulsanti grandi allo stesso modo. Assicurati di modificare i codici CSS per gli stili di pulsanti piccoli e grandi per evitare che i pulsanti si rompano sul sito pubblicato.

Per rendere il compito semplice per gli utenti Weebly, abbiamo tre stili di pulsanti che utilizzano le classi Weebly CSS. Puoi sostituire il CSS nella sezione "/ Buttons /" del tuo "main.less" con uno dei codici seguenti per modificare lo stile dei pulsanti.

Stile1:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 8px 12px; background: #333333; color: #ffffff; border: 2px solid #333333; border-radius: 1px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Quattrocento Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { padding: 12px 16px; font-family: 'Quattrocento Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #ffffff; color: #333333; border: 2px solid #333333; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: #b9b9b9; color: #ffffff; border: 2px solid #b9b9b9; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #a1a1a1; border: 2px solid #a1a1a1; }

Stile2:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 10px 16px; background: #35A89A; color: white; border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: normal; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner { padding: 12px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #177267; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: white; color: #35A89A; border: 2px solid #35A89A; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #35A89A; color: white; }

Stile3:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { display: inline-block; height: auto; padding: 0; background: none; } .wsite-button:focus, .wsite-editor .wsite-button:focus { outline: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { display: inline-block; height: auto; padding: 8px 16px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { display: inline-block; height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { display: inline-block; height: auto; padding: 12px 24px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button:hover .wsite-button-inner, .wsite-button-large:hover .wsite-button-inner { background: transparent; color: #a1a1a1 !important; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: transparent; color: #808080 !important; border: 2px solid #808080; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #808080; color: white !important; }

Aggiunta di pulsanti CSS personalizzati utilizzando l’elemento del codice incorporato

La personalizzazione dell’elemento esistente è un compito difficile poiché Weebly cambia frequentemente il codice e l’ambito del pulsante sarà limitato allo stile esistente senza molta attrazione. Il modo più semplice e semplice è aggiungere i tuoi pulsanti CSS personalizzati invece di modificare i codici esistenti. Ciò offre infinite possibilità di aggiungere diversi tipi di pulsanti CSS 2D e 3D al tuo sito Weebly. Ma il problema è che devi aggiungere ogni volta usando l’elemento "Embed Code" con uno stile predefinito invece di usare l’elemento "Button".

Ad esempio, puoi aggiungere pulsanti sfumati con stili diversi come mostrato di seguito aggiungendo l’HTML scaricato all’interno dell’elemento " Embed Code " e il CSS sotto il foglio di stile principale ("main_style.css" per temi non responsive e "main.less" per responsive temi).

Scarica il codice CSS/HTML per questo widget di pulsanti sfumati Weebly.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More