TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till och anpassar knappar på Weebly -webbplatsen?

28

Knappar på en Weebly -webbplats är en av de viktiga elementen som används för uppmaning till handling. Till exempel kan du lägga till en knapp som ber användare att ladda ner ett PDF -dokument. Eftersom Weebly har ett mycket mindre antal teman är det ett vanligt problem att du kanske gillar hela temat men knappen på det temat kan ha en inkräktande stil. I ett sådant scenario är det enkelt att ersätta standard Weebly -knappelementets stil med din egen anpassade CSS eller med ett annat temas knappstil. Den här artikeln förklarar möjligheterna att anpassa standard Weebly -knappelement.

Lägger till standardknappelement

Weebly erbjuder som standard ett drag -och -släpp -knappelement som kan anpassas till fyra olika typer. Knappelementet är grupperat i kategorin "struktur". Som standard kan användare lägga till två stilar med små knappar och två stilar med stora knappar.

Hur lägger jag till och anpassar knappar på Weebly -webbplatsen?

Standardknappar för Weebly -knappar

På alla teman som inte svarar använder Weebly bilder för att skapa en knapp och på alla responsiva teman styrs knapparnas stil under "main.less" -fil. När du har dragit och släppt klickar du på knappen i ditt innehållsområde för att se följande anpassningsalternativ:

  • Knapptext – text som ska visas på knappen.
  • Knappstil – välj en av de fyra tillgängliga stilarna.
  • Position – mitt, höger eller vänster justering av knappen.
  • Länk – lägg till länkar till knapptext.
  • Avstånd – justera övre och nedre marginaler.

Hur lägger jag till och anpassar knappar på Weebly -webbplatsen?

Alternativ för Weebly Button Element

Förutom drag -och -släpp -knappelementet erbjuder Weebly också en uppmaningsknapp på målsidesmallar.

Ersätt eller ändra knappstilarna under "main.less" för att anpassa knapparna på din Weebly -webbplats med hjälp av responsiva teman.

Responsive Vs Non-Responsive

Innan du försöker ändra stilen på dina knappar, kontrollera vilken typ av tema du använder för närvarande. Det finns tre typer av knappar som används på Weebly -teman:

  • CSS -knappar på responsiva teman – exempel tema Slick, Cento.
  • CSS-knappar på icke-responsiva teman-exempelstema Cleancut.
  • Bildknappar på icke-responsiva teman-exempel tema Stad.

Icke-responsiva teman med bildknappar- här använder knappelementet bild och CSS kallar bara denna bild som bakgrund, exempeltema är City.

Icke-responsiva teman med CSS-knappar- teman som Cleancut använder kompletta CSS-knappar utan bilder även om det är ett tema som inte svarar.

Responsiva teman – alla senaste teman som Slick, Cento, Paper, etc. är helt lyhörda och knappelementet genereras från CSS -kod.

Vi kommer att diskutera hur man ändrar knappens stil på både responsiva och icke-responsiva teman.

Fall 1-Lägga till anpassade knappbilder på teman som inte svarar

Det viktiga med Weebly -knappelementet är dess förmåga att anpassa sig till textens längd. Knappen justeras automatiskt efter längden på den inmatade texten. Detta uppnås genom att dela upp en knapp i två bilder. Innan du går vidare följer du stegen nedan för att förstå var knappbilderna är lagrade på en Weebly -webbplats.

  • Logga in på ditt Weebly -konto och välj webbplatsen för redigering.
  • Navigera till fliken "Tema" och klicka på knappen "Redigera HTML / CSS".
  • Under avsnittet "Tillgångar" ser du olika knappbilder som visas nedan:

Hur lägger jag till och anpassar knappar på Weebly -webbplatsen?

Knappbilder på Weebly icke-responsiva teman

Vi märkte att alla icke-responsiva teman med bilder för knappar har 9 uppsättningar bilder (totalt 18) för mindre och större knappar men använder 2 specifika bilder i CSS som knappens bakgrund. Kolla “main_style.css" och ta reda på vad bilderna används för knappar. Nedanstående exempel på City-tema visar att "button-highlight.png" och "button-highlight-large.png" används för mindre respektive större knappar.

Hur lägger jag till och anpassar knappar på Weebly -webbplatsen?

Bilder som används för knappar på icke-responsiva teman

Om du inte gillar dessa knappar ändrar du bara bilden till en av de tillgängliga bilderna från 9 uppsättningar. Du ändrar "button-highlight.png" till "button-purple.png". Om du inte gillar någon av de befintliga knappbilderna, skapa dina egna anpassade bilder med liknande storlekar och delad stil och ladda upp dem under avsnittet "Tillgångar". Se till att använda namnet på bilden i "main_style.css" för egenskapen "bakgrund".

Fall 2-Anpassa CSS-knappar på icke-responsiva teman

Om du inte hittar några knappbilder under avsnittet "Tillgångar" i ditt tema som inte svarar, kolla "main_style.css" för att se avsnittet "Knappar". Nedan finns CSS -koden från Cleancut -temat som kan anpassas som bakgrund, färger, sveveffekt etc. efter behov.

/* 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; }

Gå nu tillbaka till redigeraren och dra knappelementet till innehållsområdet. Du kan se att knappen kommer att vara med den nya stilen som du definierade i "main.less".

Fall 3 – Anpassa Weebly -knappar på responsiva teman

Alla senaste Weebly -teman är lyhörda och använder endast CSS -koder för att generera knappar. Som förklarats ovan definieras relevanta CSS -knappstilar i filen "main.less" under avsnittet " / Knappar /". Om ditt tema använder @import -funktionen i CSS, kolla in motsvarande knappfil för CSS. Här måste du ersätta dessa koder med din egen anpassade CSS -knappkod för att ändra standardknappstilen.

Nedan finns CSS -stildefinitionerna för Weebly -knappen:

  • .wsite-knapp-Liten knapp
  • .wsite-button: hover-Hovering effect for small button
  • .wsite-knapp: aktiv-Effekt när du klickar på den lilla knappen
  • .wsite-button-inner-Definiera de inre elementens stil som teckenstorlek och färg

På samma sätt kommer större knappar att använda .wiste-button-large CSS-klass.

Obs! Om du har lagt till en bloggsida på din webbplats kan vissa teman lägga till en ytterligare CSS-klass .blogg-knapp för knapparna på blogginlägg.

Du kan ändra dessa CSS -koder på egen hand eller använda ett online CSS -knappgeneratorverktyg för att få den nödvändiga CSS. Till exempel kan de små knappstilarna ändras med gradient genom att ersätta standardknapparna för små knappar med nedanstående CSS -kod:

.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; }

Ändring av knappelement med gamla och nya CSS -koder visas i ett exempeltema enligt nedan:

Hur lägger jag till och anpassar knappar på Weebly -webbplatsen?

Ny CSS -knapp i Weebly

Obs! Du kan ändra de stora knappstilarna på samma sätt. Se till att ändra CSS -koder för både små och stora knappstilar för att undvika att knapparna går sönder på den publicerade webbplatsen.

För att göra uppgiften enkel för Weebly -användare har vi tre knappar som använder Weebly CSS -klasser. Du kan byta ut CSS under " / Buttons /" i din "main.less" med en av nedanstående kod för att ändra knapparnas stil.

Style1:

/* 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; }

Style2:

/* 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; }

Style3:

/* 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; }

Lägga till anpassade CSS -knappar med hjälp av inbäddningskodelement

Att anpassa befintliga element är en svår uppgift eftersom Weebly ofta ändrar koden och knappens omfattning kommer att begränsas till befintlig stil utan mycket attraktion. Det enklaste och enklaste sättet är att lägga till dina egna anpassade CSS -knappar istället för att ändra de befintliga koderna. Detta ger oändliga möjligheter att lägga till olika typer av 2D- och 3D CSS -knappar till din Weebly -webbplats. Men problemet är att du måste lägga till varje gång med hjälp av "Bädda in kod" -element med fördefinierad stil istället för att använda "Knapp" -element.

Till exempel kan du lägga till lutningsknappar med olika stilar som visas nedan genom att lägga till den nedladdade HTML-koden i " Bädda in kod " -elementet och CSS under huvudmallbladet ("main_style.css" för icke-responsiva teman och "main.less" för responsiv teman).

Ladda ner CSS / HTML -koden för denna widget för Weebly -gradientknappar.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer