TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä vaakasuuntaisten välilehtien widget Weeblyyn?

3

Välilehtisisältö on helppo tapa esitellä suuri määrä sisältöä rajoitetussa tilassa. Weebly tuo App Centerin käyttöönotollaan monia uusia sovelluksia lisäelementtien lisäämiseksi. "Välilehdet" on yksi sellainen sovellus, jonka voit muodostaa yhteyden sivustoosi ilmaiseksi. Tässä artikkelissa keskustelemme siitä, kuinka lisätä vaakasuuntaisia ​​välilehtiä Weeblyyn välilehtien oletussovelluksella ja käyttämällä mukautettua koodia.

Lisää vaakasuorat välilehdet käyttämällä oletusvälilehtisovellusta

App Center on markkinapaikka, josta löydät kaikki Weebly- ja kolmannen osapuolen sovellukset, kuten Tabs-sovelluksen.

  • Kun olet Weebly -sivuston muokkausohjelmassa, siirry Sovelluskeskukseen kohdasta Rakenna> Sovellukset.
  • Kirjoita oikeassa yläkulmassa olevaan hakukenttään "välilehdet" ja paina enter.
  • Näet välilehdet -sovelluksen hakutuloksessa ja napsauta sitä nähdäksesi tiedot.
  • Napsauta Lisää -painiketta ja yhdistä sovellus Weebly -sivustoosi.

Kuinka lisätä vaakasuuntaisten välilehtien widget Weeblyyn?

Välilehtien yhdistäminen Weebly -sivustossa

Voit tarkastella yhdistettyä sovellusta Rakenna -osiossa kuten oletuselementtejä. Lisää välilehtiä sisältävä sisältö sivustoosi vetämällä ja pudottamalla Välilehdet -elementti. Voit mukauttaa välilehden otsikkoa ja editorin sisältöä luodaksesi vaakasuuntaisia ​​välilehtiä Weeblyssä.

Kuinka lisätä vaakasuuntaisten välilehtien widget Weeblyyn?

Välilehdet luotu Weebly Tabs -sovelluksella

Tabs -sovelluksen ominaisuudet

Käyttäjät voivat muokata seuraavia välilehtien sovelluksessa:

  • Lisää rajoittamaton välilehti – suosittelemme rajoittamaan enintään 4 tai 5 välilehteen, jotta et osu editoriin. Myös useammalla välilehdellä on luettavuusongelma mobiililaitteissa.
  • Mukauta aktiivisten, ei -aktiivisten välilehtien ja reunuksen väriä.
  • Vedä ja pudota elementtejä välilehtien sisältöalueella. Voit kartoittaa, ottaa yhteyttä lomakkeeseen, diaesitykseen jne. Välilehtien sisältöalueella.
  • Valitse välilehdelliselle sisällölle yksi teemoista – vakio, linja, materiaali ja yksinkertainen.

Vaikka Tabs on Weeblyn alkuperäinen sovellus, se ei ole käyttäjäystävällinen sovellus. Ongelmana on, että kun olet lisännyt sisältöä väärälle välilehdelle, et voi vetää välilehteä ja järjestää järjestystä. Sinun on poistettava koko elementti ja lisättävä se uudelleen oikeassa järjestyksessä.

Mukautetut välilehdet Weebly -sivustolle

Internetissä on monia valmiita CSS- ja jQuery -välilehtiä, joita voit lisätä pienin muutoksin. Yksi tällaisista mukautetuista välilehdistä on CSS: llä tehdyistä koodipisaroista. Tämä sopii erityisesti silloin, kun haluat lisätä vain tekstisisältöä välilehtien sisään. Alla on välilehtien ulkonäkö.

Kuinka lisätä vaakasuuntaisten välilehtien widget Weeblyyn?

Vaaka -välilehtien widget

Alla on vaakasuuntaisten välilehtien widgetin täydellinen CSS -koodi. Voit syöttää tämän oman Weebly sivuilla kohdassa " Otsikko Koodi ” osiossa.

Kuinka lisätä vaakasuuntaisten välilehtien widget Weeblyyn?

Lisää otsikkokoodi sivulle

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

Alla on välilehtien HTML -koodi, jonka voit lisätä käyttämällä Upota koodi -elementtiä.

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

Teemme välilehden ensimmäisen otsikon (tämä on välilehti 1) 160 kuvapisteenä ja suurennamme 320 kuvapisteeseen ja 480 kuvapisteeseen, jos haluat käyttää muita nimikkeitä. Voit säätää sitä vastaavasti siten, että napsautettava alue sopii välilehden otsikkoon. Mukautettujen välilehtien widgetin etuna on, että voit valmistaa sisällön offline -tilassa ja liittää sivustosi muutamassa minuutissa. Kun haluat järjestää välilehdet uudelleen, voit tehdä sen offline -tilassa ja korvata vanhan koodin uudella.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja