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

Valokuvapaneelin widgetin lisääminen Weeblyyn?

3

Valokuvapaneelia käytetään kuvan näyttämiseen yhdessä pienen kuvauksen ja toimintakehotuksen linkin tai painikkeen kanssa. Tämä on helppo tapa saada käyttäjän huomio ja ohjata hänet kohdesivulle. Yksittäisen paneelin sijasta voit käyttää myös koko sivun paneeleja useissa sarakkeissa ravintolavalikkona tai esittelemään matkatoimiston kohteita. Tässä artikkelissa kerromme, kuinka voit luoda yksittäisen valokuvapaneelin widgetin ja käyttää sitä useissa Weebly -sivustosi sarakkeissa .

Yksittäiset valokuvapaneelin widgetit näyttävät alla olevilta ja voit luoda ravintolan tai gallerian parantamalla yksittäistä widgettiä.

Valokuvapaneelin widgetin lisääminen Weeblyyn?

Yksi valokuvapaneeli Weeblylle

Yhden valokuvapaneelin widgetin luominen

Yksittäistä paneelia voidaan käyttää itsenäisesti yksittäisenä valokuvapaneelin widgetinä. Jos haluat käyttää sitä sarakkeessa, yksittäinen valokuvapaneeli on sijoitettava minkä tahansa muun elementin viereen käyttämällä Upota koodi -elementtiä Weebly -sivustossasi. Paneeli sisältää kuvan, otsikon, kuvauksen ja toimintakehotuksen. Pohjimmiltaan tarvitset kuvia, CSS: ää ja HTML: ää paneelin luomiseen, ja valokuvapaneeli näyttää vieressä pienillä poikkeamilla Weebly -teemasi perusteella.

Valokuvapaneelin widgetin ominaisuudet

  • Lisää yksittäisenä widgetinä tai useissa sarakkeissa.
  • Valmistettu yksinkertaisella CSS: llä ilman kyselyä.
  • Mukauta värit ja fontit tarpeen mukaan.
  • Käytä toimintakehotuksessa tai koko sivun widgetissä, kuten ravintolavalikossa.
  • Täysin responsiivinen, automaattisesti sopiva mobiililaitteiden leveydelle.

Kuvien lataaminen Weebly -sivustolle

Ensimmäinen vaihe on ladata tarvittavat kuvat Weebly -sivustoosi kohdasta "Teema> Muokkaa HTML / CSS> Resurssit> Lähetä tiedosto (t)…". Ladatussa kuvassa on seuraava linkki:

https://yoursite.com/files/theme/image.jpg

CSS yksittäiselle valokuvapaneelille

Luomme ensin konttipaneelin, jonka taustaväri on beige. Tämä väri näkyy paneelin alaosassa ja voit muuttaa sen mihin tahansa väriin, joka sopii sivustosi aiheeseen.

/* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; }

Säiliössä on kuva yläreunassa ja sisältö alhaalla. Määritellään kuvan korkeudeksi 200 pikseliä ja hiukkasvaikutusta.

/* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; }

Seuraavaksi määritämme toimintakehotuspainikkeen, jolla on leijuva vaikutus:

/* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; }

CSS: n viimeinen osa on määrittää muita tyylejä linkille, kappaleelle ja otsikolle.

/* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; }

Yksittäisen paneelin täydellinen CSS näyttää alta ja lisää koodin Weebly -sivusi kohtaan "Sivut> Valitse lisättävä sivu> SEO -asetukset> Otsikkokoodi".

Valokuvapaneelin widgetin lisääminen Weeblyyn?

Lisää otsikkokoodi sivulle

<style> /* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } </style>

Yksittäisen valokuvapaneelin HTML

Kun CSS on lisätty, lisää alla oleva HTML -koodi Upota koodi -elementtiin. Muista korvata kuvan URL -osoite omalla.

<div class="panel_container"> <div> <img class="photo" src="https://img.webnots.com/2015/10/Weebly-Carbon-Upgrade.gif"> <h3 class="heading">Weebly Carbon Upgrade</h3> <p class="para">Weebly introduced a third generation upgrade and named it as Carbon...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Koko sivun valokuvapaneelin widgetin luominen

Otetaan esimerkki ravintolan valikosta, jossa on neljä saraketta ja useita riviä valikkokohteita. Yllä olevaa yhden paneelin widgettiä on muokattava sovittamaan paneelit joustavaan yhtä korkean säiliöön, jossa on neljä saraketta, kuten c1, c2, c3 ja c4, ja kaikki muut tyylit pysyvät samana. Alla on esimerkki tapa, jolla voit luoda useita paneeleja yhdelle sivulle.

Valokuvapaneelin widgetin lisääminen Weeblyyn?

Weebly Photo Panel Widget

Alla on täydellinen CSS, jonka voit liittää Weebly -sivusi Otsikkokoodi -osioon:

<style> /* Photo Panel Container Definition */ .photo_panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; margin: 10px 10px 80px 10px; } .c1, .c2, .c3, .c4 { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } .c1, .c2, .c3 { margin-right: 15px; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } @media only screen and (max-device-width: 768px) { .photo_panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Alla on widgetin HTML, jossa on kaksi riviä ja joka sisältää kahdeksan paneelia. Lisää alla oleva HTML -koodi Upota koodi -elementtiin korvaamalla nuken sisältö ja kuvan URL -osoite omallasi.

<!-- First Row Contains 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img1.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img2.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img3.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img4.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Second Row Contains another 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img5.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img6.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img7.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img8.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Add More Rows Here -->

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