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

Come aggiungere pulsanti di stampa CSS 3D in Weebly?

17

Nel nostro articolo precedente abbiamo visto come aggiungere e personalizzare l’elemento del pulsante Weebly predefinito. Sebbene sia possibile modificare i pulsanti, la modifica dello stile dei pulsanti esistenti è un’attività complicata e spesso non funzionerà come previsto. La soluzione semplice è incorporare il tuo CSS/HTML personalizzato utilizzando l’elemento di codice di incorporamento Weebly. Non otterrai le opzioni di personalizzazione durante l’incorporamento, tuttavia puoi facilmente creare pulsanti attraenti con effetti CSS. Qui spieghiamo come aggiungere pulsanti di stampa CSS 3D nel sito Weebly.

Pulsanti di stampa CSS 3D

Di seguito è riportato come appariranno i pulsanti 3D.

Come aggiungere pulsanti di stampa CSS 3D in Weebly?

I pulsanti hanno le seguenti caratteristiche:

  • Non sono necessarie immagini che migliorano la velocità di caricamento del sito e i tuoi sforzi spesi per creare immagini.
  • Colori e stili sono facilmente personalizzabili per adattarsi a qualsiasi tipo di tema e layout.
  • Puoi controllare il numero di pulsanti in HTML usando l’elemento di codice di incorporamento. Ciò significa che puoi posizionare un numero diverso di pulsanti su pagine diverse mantenendo lo stesso CSS di origine.
  • Ogni pulsante può essere collegato a una oa tutte le pagine del tuo sito.

Come aggiungere pulsanti di stampa CSS 3D in Weebly?

Spiegheremo qui come aggiungere 5 pulsanti con lo stile 3D sopra. Puoi rimuovere o aggiungere il CSS e l’HTML corrispondente per aggiungere o rimuovere pulsanti e modificare il colore e gli stili.

Passo #1 – Aggiunta di CSS del pulsante

Il primo passo è decidere se vuoi aggiungere i pulsanti solo su poche pagine o su molte pagine del tuo sito. Se desideri aggiungere alcune pagine, aggiungi il codice CSS solo a quelle pagine in "Pagine> Seleziona una pagina> Impostazioni SEO> Codice intestazione" come mostrato di seguito:

Come aggiungere pulsanti di stampa CSS 3D in Weebly?

Aggiungi codice intestazione nella pagina

Se desideri aggiungere i pulsanti su più pagine, ti consigliamo di aggiungere gli stili CSS in un foglio di stile esterno e collegarti alla pagina. Weebly per impostazione predefinita ha un solo foglio di stile esterno per sito. Vai alla sezione "Tema > Modifica HTML / CSS > Stili > main.less". Individua il file e aggiungi il codice in fondo agli altri codici esistenti. Salva le modifiche ed esci dall’editor di codice.

Come aggiungere pulsanti di stampa CSS 3D in Weebly?

Modifica del file CSS principale in Weebly

Quando si utilizza l’editor di codice, è necessario salvare il tema con un nome personalizzato. Se non vuoi modificare il tema, vai alla sezione "Impostazioni > SEO > Codice intestazione". Qui puoi aggiungere il codice CSS che verrà applicato a tutte le pagine del tuo sito (simile alla modifica del file main.less).

Come aggiungere pulsanti di stampa CSS 3D in Weebly?

Aggiungi codice intestazione a livello di sito Weebly

Ecco il codice CSS per i pulsanti 3D:

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

Scopri di più su come modificare CSS/HTML sorgente in Weebly.

Passo #2 – Aggiunta di codice HTML

Trascina e rilascia un elemento del codice di incorporamento su una pagina in cui desideri aggiungere i pulsanti e incolla il codice sottostante all’interno. Non dimenticare di sostituire # con i tuoi link.

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

Passo #3 – Personalizzazione dei pulsanti

Ci sono infinite possibilità per personalizzare i pulsanti di cui hai bisogno. Ecco alcuni scenari generali che potresti cercare.

Aggiunta o rimozione di pulsanti

Supponiamo di aver bisogno solo di 3 pulsanti invece di 5 come mostrato nell’esempio. In questo caso puoi eliminare il codice per il 4° e 5° pulsante sia da CSS che da HTML. Ma consigliamo di aggiungere il numero massimo di stili in CSS e quindi controllare il numero di pulsanti in HTML. In questo scenario, dove hai solo bisogno di 3 pulsanti, lascia il codice CSS così com’è che ha 5 stili diversi definiti e aggiungi il codice HTML solo per 3 pulsanti.

In questo modo, puoi aggiungere 3 pulsanti su una pagina, 5 pulsanti su un’altra pagina e così via.

Personalizzazione dei colori e delle dimensioni

  • È possibile modificare il colore del testo e il colore degli attributi del pulsante come sfondo e ombra.
  • Modificare gli attributi di larghezza e altezza per modificare il pulsante rotondo in una dimensione ovale o in qualsiasi altra proporzione.

Ricorda, puoi usare l’elemento distanziatore per aggiungere spazio sufficiente sopra e sotto i pulsanti. Allo stesso modo, puoi posizionare il pulsante sul lato destro o sinistro di qualsiasi altro elemento utilizzando il distanziatore.

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