TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til og tilpasse knapper på Weebly -nettstedet?

11

Knapper på et Weebly -nettsted er et av de viktige elementene som brukes i form av oppfordring til handling. For eksempel kan du legge til en knapp som ber brukerne om å laste ned et PDF -dokument. Siden Weebly har svært få temaer, er det et vanlig problem at du kan like hele temaet, men knappen på det temaet kan ha inntrengende stil. I et slikt scenario er det enkelt å erstatte standard Weebly -knappelementets stil med din egen tilpassede CSS eller med et annet temas knappestil. Denne artikkelen forklarer mulighetene for å tilpasse standard Weebly -knappelement.

Legger til standard knappelement

Weebly tilbyr som standard et dra og slipp -knappelement som kan tilpasses til fire forskjellige typer. Knappelementet er gruppert i kategorien "struktur" av elementer. Som standard kan brukerne legge til to stiler med små knapper og to stiler med store knapper.

Hvordan legge til og tilpasse knapper på Weebly -nettstedet?

Standardknappestiler for Weebly

På alle temaer som ikke reagerer, bruker Weebly bilder for å lage en knapp, og på alle responsive temaer styres stilen på knappene under "main.less" -fil. Når du har dratt og droppet, klikker du på knappen på innholdsområdet for å se følgende tilpasningsalternativer:

  • Knapptekst – tekst som skal vises på knappen.
  • Knappestil – velg en av de fire tilgjengelige stilene.
  • Posisjon – midtre, høyre eller venstre justering av knappen.
  • Link – legg til koblinger til knappetekst.
  • Avstand – juster øvre og nedre marg.

Hvordan legge til og tilpasse knapper på Weebly -nettstedet?

Alternativer for Weebly Button Element

I tillegg til dra -og -slipp -knappelementet, tilbyr Weebly også en oppfordringsknapp på landingssidemaler.

Bytt ut eller endre knappestilene under "main.less" for å tilpasse knappene på Weebly -nettstedet ditt ved hjelp av responsive temaer.

Responsive Vs Non-Responsive

Før du prøver å endre stilen på knappene dine, må du kontrollere hvilken type tema du bruker. Det er tre typer knapper som brukes på Weebly -temaer:

  • CSS -knapper på responsive temaer – eksempel tema Slick, Cento.
  • CSS-knapper på temaer som ikke reagerer-eksempel tema Cleancut.
  • Bildeknapper på temaer som ikke reagerer-eksempel tema By.

Ikke-responsive temaer med bildeknapper -her bruker knappelementet bilde og CSS kaller dette bildet bare som en bakgrunn, eksempelstemaet er City.

Ikke-responsive temaer med CSS-knapper -temaer som Cleancut bruker komplette CSS-knapper uten bilder, selv om det er et tema som ikke reagerer.

Responsive temaer – alle de siste temaene som Slick, Cento, Paper, etc. reagerer fullstendig og knappelementet genereres fra CSS -kode.

Vi vil diskutere hvordan du endrer knappens stil på både responsive og ikke-responsive temaer.

Sak 1-Legge til egendefinerte knappebilder på temaer som ikke reagerer

Det viktige trekket med Weebly -knappelementet er dets evne til å tilpasse seg lengden på teksten. Knappen blir automatisk justert i henhold til lengden på teksten du har skrevet inn. Dette oppnås ved å dele en knapp i to bilder. Før du går videre, følg trinnene nedenfor for å forstå hvor knappene er lagret på et Weebly -nettsted.

  • Logg deg på Weebly -kontoen din og velg nettstedet for redigering.
  • Naviger til kategorien "Tema" og klikk på "Rediger HTML / CSS" -knappen.
  • Under delen "Eiendeler" ser du forskjellige knappebilder som vist nedenfor:

Hvordan legge til og tilpasse knapper på Weebly -nettstedet?

Knappbilder på Weebly ikke-responsive temaer

Vi la merke til at alle temaer som ikke reagerer, ved å bruke bilder for knapper, har 9 sett med bilder (totalt 18) for mindre og større knapper, men bruker 2 spesifikke bilder i CSS som knappens bakgrunn. Sjekk “main_style.css" og finn ut hva bildene brukes til knapper. Eksemplet nedenfor på bytema viser at "button-highlight.png" og "button-highlight-large.png" brukes for henholdsvis mindre og større knapper.

Hvordan legge til og tilpasse knapper på Weebly -nettstedet?

Bilder som brukes til knapper på temaer som ikke er responsive

Hvis du ikke liker disse knappene, kan du bare endre bildet til et av de tilgjengelige bildene fra 9 sett. Du endrer “button-highlight.png” til “button-purple.png”. Hvis du ikke liker noen av de eksisterende knappbildene, kan du lage dine egne tilpassede bilder med lignende størrelser og delt stil og laste dem opp under "Assets" -delen. Sørg for å bruke navnet på bildet i “main_style.css” for “bakgrunn” -egenskapen.

Sak 2-Tilpasse CSS-knapper på temaer som ikke er responsive

Hvis du ikke finner noen knappbilder under delen "Eiendeler" i temaet ditt som ikke reagerer, kan du sjekke "main_style.css" for å se "Knapper" -delen. Nedenfor er CSS -koden fra Cleancut -temaet som kan tilpasses bakgrunn, farger, sveveeffekt, etc. som du trenger.

/* 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å nå tilbake til redaktøren og dra knappelementet til innholdsområdet. Du kan se at knappen vil være med den nye stilen som du definerte i "main.less".

Sak 3 – Tilpasse Weebly -knapper på responsive temaer

Alle de siste Weebly -temaene er responsive og bruker bare CSS -koder for å generere knapper. Som forklart ovenfor er relevante CSS -knappestiler definert i “main.less” -filen under ” / Buttons /” -delen. Hvis temaet ditt bruker @import -funksjonen i CSS, må du sjekke den tilsvarende knappfilen for CSS. Her må du erstatte disse kodene med din egen tilpassede CSS -knappekode for å endre standard knappestil.

Nedenfor er CSS -stildefinisjonene for Weebly -knappen:

  • .Wsite-knapp-Liten knapp
  • .wsite-knapp: svever-Hovering-effekt for liten knapp
  • .Wsite-knapp: aktiv-Effekt når du klikker på den lille knappen
  • .wsite-button-inner-Definer stilen til de indre elementene som skriftstørrelse og farge

På samme måte bruker større knapper .wiste-knapp-stor CSS-klasse.

Merk: Hvis du har en bloggside lagt til på nettstedet ditt, kan noen temaer legge til en ekstra CSS-klasse .blogg-knapp for knappene på blogginnlegg.

Du kan endre disse CSS -kodene på egen hånd eller bruke et hvilket som helst online CSS -knappgeneratorverktøy for å få den nødvendige CSS. For eksempel kan de små knappestilene endres med gradient ved å erstatte standard små knappekoder med CSS -koden nedenfor:

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

Endring av knappelement med gamle og nye CSS -koder vises i et eksempel -tema som nedenfor:

Hvordan legge til og tilpasse knapper på Weebly -nettstedet?

Ny CSS -knapp i Weebly

Merk: Du kan endre de store knappestilene på samme måte. Sørg for å endre CSS -kodene for både små og store knappestiler for å unngå at knapper brytes på det publiserte nettstedet.

For å gjøre oppgaven enkel for Weebly -brukere, har vi tre knapper som bruker Weebly CSS -klasser. Du kan erstatte CSS under ” / Buttons /” -delen av “main.less” med en av kodene nedenfor for å endre stilen på knappene.

Stil 1:

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

Legge til tilpassede CSS -knapper ved hjelp av Embed Code Element

Å tilpasse eksisterende element er en vanskelig oppgave siden Weebly ofte endrer koden, så vel som omfanget av knappen vil være begrenset til eksisterende stil uten mye tiltrekning. Den enkleste og enkleste måten er å legge til dine egne tilpassede CSS -knapper i stedet for å endre de eksisterende kodene. Dette gir uendelige muligheter for å legge til forskjellige typer 2D- og 3D CSS -knapper på ditt Weebly -nettsted. Men problemet er at du må legge til hver gang du bruker "Embed Code" -element med forhåndsdefinert stil i stedet for å bruke "Button" -element.

For eksempel kan du legge til gradientknapper med forskjellige stiler som vist nedenfor ved å legge til den nedlastede HTML-en i " Embed Code " -elementet og CSS under hovedstilarket ("main_style.css" for ikke-responsive temaer og "main.less" for responsive temaer).

Last ned CSS / HTML -koden for denne Weebly gradientknapp -widgeten.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon