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

Hvordan legge til widgeten Horisontale faner i Weebly?

2

Innhold med faner er en enkel måte å vise frem mye innhold på et begrenset område. Weebly med introduksjonen av App Center bringer mange nye apper til å legge til flere elementer. "Tabs" er en slik app som du kan koble til nettstedet ditt gratis. I denne artikkelen vil vi diskutere hvordan du legger til horisontale faner i Weebly med standardfaner -appen og bruker egendefinert kode.

Legg til horisontale faner ved hjelp av standardfaner -appen

App Center er en markedsplass hvor du kan finne alle Weebly- og tredjepartsapper som Tabs-app.

  • Når du er i Weebly nettstedredigerer, navigerer du til App Center gjennom "Bygg> Apper".
  • Bruk søkefeltet øverst til høyre for å skrive "faner" og trykk enter.
  • Du vil se fanen -appen i søkeresultatet og klikke på den for å se detaljene.
  • Klikk på "Legg til" -knappen og koble appen til Weebly -nettstedet ditt.

Hvordan legge til widgeten Horisontale faner i Weebly?

Koble til faner -app på Weebly -nettstedet

Du kan se den tilkoblede appen under delen "Bygg" som standardelementene. Dra og slipp fanen -elementet for å sette inn faneinnhold på nettstedet ditt. Du kan tilpasse faneoverskriften og innholdet i redaktøren for å lage horisontale faner i Weebly.

Hvordan legge til widgeten Horisontale faner i Weebly?

Faner opprettet med Weebly Tabs -appen

Funksjoner i Tabs App

Brukere kan tilpasse følgende i faner -appen:

  • Legg til ubegrensede faner – vi anbefaler å begrense maksimalt 4 eller 5 faner for ikke å slå på redaktøren. Også flere antall faner vil ha lesbarhetsproblem på mobile enheter.
  • Tilpass fargen på aktive, inaktive faner og kantlinjen.
  • Dra og slipp eventuelle elementer inne i innholdsområdet på fanene. Du kan kartlegge, kontaktskjema, lysbildefremvisning osv. Inne i innholdsområdet på fanene.
  • Velg ett av temaene – standard, linje, materiale og enkelt – for innhold med faner.

Selv om Tabs er en opprinnelig app fra Weebly, er det ikke en brukervennlig app. Problemet er at når du har lagt til innhold i feil fane, er det ingen måte å dra fanen og ordne sekvensen. Du må slette hele elementet og legge det til igjen med riktig sekvens.

Tilpassede faner for Weebly -nettstedet

Det er mange ferdige CSS- og jQuery -faner tilgjengelig på internett som du kan legge til med små modifikasjoner. En slik egendefinert fane er fra kodedråper laget med CSS. Dette er spesielt egnet når du bare har et tekstinnhold å legge til i fanene. Nedenfor ser du fanene.

Hvordan legge til widgeten Horisontale faner i Weebly?

Widget for horisontale faner

Nedenfor er den komplette CSS -koden for widgeten for horisontale faner. Du kan sette inn dette på Weebly -nettstedet ditt under " Header Code " -delen på siden.

Hvordan legge til widgeten Horisontale faner i Weebly?

Legg til topptekst på siden

<style> .tabs { position: relative; width: 100%; } .tabs input { position: absolute; z-index: 1000; width: 160px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .tabs input#tab-2{ left: 160px; } .tabs input#tab-3{ left: 320px; } .tabs input#tab-4{ left: 480px; } .tabs label { background: skyblue; font-size: 16px; line-height: 40px; position: relative; padding: 0 20px; float: left; display: block; color: #333333; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block; } .tabs input:hover + label { background: #f1f1f1; } .tabs label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1); } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked + label { background: #f8f8f8; z-index: 6; } .clear-shadow { clear: both; } .content { background: rgba(96, 125, 139, 0.16); position: relative; width: 100%; height: 300px; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; } .content div { position: absolute; top: 0; left: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s; } .content div h2, .content div h3{ color: lightslategrey; padding: 20px; } .content div p { font-size: 20px; line-height: 28px; font-style: italic; text-align: left; color: #777; padding-left: 15px; font-family: Cambria, Georgia, serif; border-left: 8px solid rgba(63,148,148, 0.1); } </style>

Nedenfor er HTML -koden for fanene som du kan sette inn ved hjelp av " Embed Code " -elementet.

<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">This is Tab 1</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">This is Tab 2</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">This is Tab 3</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">This is Tab 4</label> <div class="clear-shadow"></div> <div class="content"> <!-- This is a content for Tab 1 --> <div class="content-1"> <h2>Heading 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 2 --> <div class="content-2"> <h2>Heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 3 --> <div class="content-3"> <h2>Heading 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 4 --> <div class="content-4"> <h2>Heading 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </section>

Vi lager den første tittelen på fanen (Dette er fane 1) som 160px og øker til 320px og 480px for ytterligere titler. Du kan justere det deretter slik at det klikkbare området passer til fanetittelen. Fordelen med den egendefinerte fanen -widgeten er at du kan forberede innholdet offline og lime inn på nettstedet ditt på få minutter. Når du vil omorganisere fanene, kan du gjøre det offline og ganske enkelt erstatte den gamle koden med ny.

Opptakskilde: 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