Kuinka lisätä harmonikan sisällön vaihtopainike Weeblyyn?
Harmonikka -widgetin avulla voit lisätä suurta sisältöä rajoitetussa tilassa ja kiinnostuneet käyttäjät voivat laajentaa otsikkoa nähdäkseen vastaavan sisällön. Edellisessä artikkelissamme olimme keskustelleet Weeblyn App Centeristä tarjoaman ilmaisen harmonikasovelluksen käyttämisestä sekä joitain mukautusvaihtoehtoja. Tässä artikkelissa keskustellaan siitä, miten luodaan ja lisätään CSS -harmonikan sisällön vaihtopäivitys -widget Weebly -sivustolle.
Vaikka harmonikat ovat suosittuja jQuery -käyttöliittymäwidgetin avulla, on myös mahdollista tehdä harmonikka CSS: llä ilman komentosarjaa. Tämä auttaa sivua latautumaan nopeammin ja tekee mukauttamisesta helppoa CSS: n avulla. Widget sisältää kolme elementtiä kutakin harmonikkalohkoa varten – otsikko, nuoli ja kehon sisältö. Voit hallita kaikkia widgetin elementtejä yksinkertaisen CSS: n avulla ja muokata tarpeidesi mukaan. Pohjimmiltaan olemme käyttäneet luetteloa, jossa syöttötyyppi on valintaruutu hallitakseen harmonikan käyttäytymistä.
CSS -harmonikka näyttää seuraavanlaiselta.
Weebly CSS -harmonikka -widget
Harmonikka -widgetin CSS
Kopioi alla oleva CSS -koodi ja liitä Weebly -sivustosi sivun "Sivut> Valitse sivu> SEO -asetukset" -otsikon " Otsikkokoodi " -osaan. Jotta ymmärtäminen olisi helppoa, olemme korostaneet otsikon ja korityylin Olemme esimerkiksi käyttäneet vaaleanvihreää otsikon taustaväriä, jonka fonttikoko on 20 pikseliä ja paino 500. Voit muokata näitä parametreja sivustosi teeman ja asettelun mukaan. Samoin harmonikan runko käyttää vaaleanharmaata väriä taustalla ja fontilla -koko 16px. Voit myös muokata tätä tarpeidesi mukaan.
<style>
/* Heading Style Start */
.accordion-heading {
background-color: lightgreen;
display: block;
padding: 10px;
position: relative;
cursor: pointer;
font-size: 20px;
font-weight: 500;
}
/* Heading Style End */
/* Body Style Start */
.accordion-body {
max-height: 0;
margin-bottom: 2px;
overflow: hidden;
font-size: 16px;
line-height: 1.5;
text-align: justify;
background-color: lightgrey;
transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}
/* Body Style End */
.accordion {
border: 1px solid white;
margin: 0 auto;
list-style: none;
overflow: hidden;
}
.accordion > * + * {
border-top: 1px solid white;
}
.accordion-input:checked ~ .accordion-body {
background-color: lightgrey;
padding: 10px;
max-height: 1000px;
transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}
.accordion-input:checked ~ .accordion-heading > .accordion-heading-btn {
transform: rotate(0);
}
.accordion-heading-btn {
display: block;
width: 30px;
position: absolute;
top: 10px;
right: 0;
pointer-events: none;
transition: transform .3s ease;
transform: rotate(-180deg);
text-align: center;
font-size: 14px;
line-height: 1;
}
.accordion-input {
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1;
overflow: hidden;
position: absolute;
left: -9999px;
}
</style>Voit myös lisätä CSS: n kohtaan "Asetukset> SEO> Otsikkokoodi" tai "main.less" -tiedostoon ilman… -tageja, jotta harmonikka olisi tehokas sivustotasolla.
CSS -päätiedoston muokkaaminen Weeblyssä
HTML harmonikalle
Kopioi ja liitä alla oleva HTML -koodi Upota koodi -elementin sisään sivulle, jolle haluat lisätä CSS -harmonikan. Vaihda otsikot ja kehon sisältö tarpeen mukaan. Olemme korostaneet jokaisen lohkon kommentilla ja voit kopioida/liittää lohkon lisätäksesi lisää lohkoja harmonikallesi.
<div>
<ul class="accordion">
<!-- First Block of Accordion Start -->
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item1" />
<label for="item1" class="accordion-heading">This is a first heading...<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
<!-- First Block of Accordion End -->
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item2" />
<label for="item2" class="accordion-heading">This is a second heading...<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item3" />
<label for="item3" class="accordion-heading">This is a third heading...<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
<li>
<input class="accordion-input" type="checkbox" name="accordion" id="item4" />
<label for="item4" class="accordion-heading">This is a fourth heading...<span class="accordion-heading-btn">▲</span></label>
<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis.
</div>
</li>
</ul>
</div>Asetusten mukauttaminen
Yksi CSS -harmonikan tärkeimmistä eduista on, että voit valmistaa sisällön offline -tilassa ja kopioida/liittää sen Weebly -editoriin. Voit helposti korjata sekvenssin offline -tilassa, lisätä lisäkoodin hallitaksesi harmonikan käyttäytymistä ja tyyliä. Kuten edellä mainittiin, voit muokata CSS: n otsikon ja rungon taustaväriä, kirjasinkokoa, painoa, marginaalia ja pehmustetta vastaamaan sivustosi teemaa.