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

Hvordan legge til fotopanel -widget i Weebly?

0

Fotopanel brukes til å vise et bilde sammen med en liten beskrivelse og oppfordring til handling -lenke eller knapp. Dette er en enkel måte å tiltrekke brukerens oppmerksomhet og kjøre dem til destinasjonssiden. I stedet for et individuelt panel kan du også bruke helsides paneler i flere kolonner som en restaurantmeny eller for å vise frem destinasjoner for et reisebyrå. I denne artikkelen vil vi forklare hvordan du oppretter en enkelt fotopanel -widget og bruker den i flere kolonner på ditt Weebly -nettsted.

Widgetene for enkelt fotopanel vil se ut som nedenfor, og du kan lage en restaurant eller et galleri ved å forbedre enkeltmodulen.

Hvordan legge til fotopanel -widget i Weebly?

Enkelt fotopanel for Weebly

Opprette en enkelt fotopanel -widget

Det ene panelet kan brukes uavhengig som en individuell fotopanel -widget. Hvis du vil bruke det i en kolonne, må det ene fotopanelet plasseres langs siden av et annet element ved hjelp av " Embed Code " -elementet på Weebly -nettstedet. Panelet inneholder et bilde, tittel, beskrivelse og en oppfordringsknapp. I utgangspunktet trenger du bilder, CSS og HTML for å lage et panel, og fotopanelet vil se ut ved siden av med mindre avvik basert på ditt Weebly -tema.

Funksjoner i Photo Panel Widget

  • Legg til som en enkelt widget eller i flere kolonner.
  • Laget med enkel CSS uten forespørsel.
  • Tilpass fargen og skriftene etter behov.
  • Bruk den til en oppfordring til handling eller en fullsides widget, for eksempel restaurantmeny.
  • Full responsiv som automatisk tilpasser bredden på mobile enheter.

Laster opp bilder på Weebly -nettstedet

Det første trinnet er å laste opp de nødvendige bildene til Weebly -nettstedet ditt under "Tema> Rediger HTML / CSS> Eiendeler> Last opp fil (er) …". Det opplastede bildet vil ha følgende lenke:

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

CSS for enkelt fotopanel

Først lager vi et beholderpanel med bakgrunnsfargen som beige. Dette er fargen som vises nederst på panelet, og du kan endre denne til hvilken som helst farge som passer til nettstedets tema.

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

Beholderen vil ha et bilde øverst og innholdet nederst. La oss definere bildehøyden som 200 piksler sammen med litt sveveeffekt.

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

Deretter definerer vi oppfordringsknappen med svevende effekt:

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

Den siste delen av CSS er å definere flere stiler for lenke, avsnitt og overskrift.

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

Den komplette CSS for et enkelt panel vil se nedenfor og legge til koden under "Sider> Velg siden du vil legge til panelet> SEO -innstillinger> Header Code" på Weebly -siden din.

Hvordan legge til fotopanel -widget i Weebly?

Legg til topptekst på siden

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

HTML for enkelt fotopanel

Når CSS er lagt til, legg til HTML -koden nedenfor i et "Embed Code" -element. Sørg for å erstatte bildens URL med din egen.

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

Opprette en fullsides fotopanel -widget

La oss ta et eksempel på en restaurantmeny med fire kolonner og flere rader med menyelementer. Enkeltpanel -widgeten ovenfor må endres for å passe panelene i en fleksibel beholder med like høyde med fire kolonner som c1, c2, c3 og c4, og alle andre stiler forblir de samme. Nedenfor er eksemplet på hvordan du kan lage flere paneler på en enkelt side.

Hvordan legge til fotopanel -widget i Weebly?

Widget for Weebly Photo Panel

Nedenfor er den komplette CSS -en du kan lime inn under “Header Code" -delen på Weebly -siden din:

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

Nedenfor er HTML -en for widgeten med to rader som inneholder åtte paneler. Legg til HTML -koden nedenfor i et " Embed Code " -element ved å erstatte dummyinnholdet og bildens URL med din egen.

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

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