TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till fotopanel widget i Weebly?

7

Fotopanel används för att visa en bild tillsammans med en liten beskrivning och uppmaning till länk eller knapp. Detta är ett enkelt sätt att locka användarens uppmärksamhet och föra dem till målsidan. Istället för en enskild panel kan du också använda helsidespaneler i flera kolumner som en restaurangmeny eller för att visa upp destinationer för en resebyrå. I den här artikeln kommer vi att förklara hur du skapar en widget för en enda fotopanel och använder den i flera kolumner på din Weebly -webbplats.

De enda fotopanelens widgets kommer att se ut nedan och du kan skapa en restaurang eller ett galleri genom att förbättra den enda widgeten.

Hur lägger jag till fotopanel widget i Weebly?

Enkel fotopanel för Weebly

Skapa en enda fotopanel -widget

Den enda panelen kan användas oberoende som en individuell fotopanel -widget. Om du vill använda den i en kolumn måste en enda fotopanel placeras längs sidan av något annat element med hjälp av elementet " Bädda in kod " på din Weebly -webbplats. Panelen innehåller en bild, titel, beskrivning och en uppmaningsknapp. I grund och botten behöver du bilder, CSS och HTML för att skapa en panel och fotopanelen kommer att se ut bredvid med mindre avvikelser baserat på ditt Weebly -tema.

Funktioner i Photo Panel Widget

  • Lägg till som en enda widget eller i flera kolumner.
  • Gjord med enkel CSS utan förfrågan.
  • Anpassa färgen och teckensnittet efter dina behov.
  • Använd för en uppmaning till handling eller helsides widget som restaurangmeny.
  • Full responsiv som automatiskt passar bredden på mobila enheter.

Ladda upp bilder på Weebly -webbplatsen

Det första steget är att ladda upp de nödvändiga bilderna till din Weebly -webbplats under "Tema> Redigera HTML / CSS> Tillgångar> Ladda upp filer …". Den uppladdade bilden kommer att ha följande länk:

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

CSS för enkel fotopanel

Först skapar vi en behållarpanel med bakgrundsfärgen som beige. Det här är färgen som visas längst ned på panelen och du kan ändra den till valfri färg som passar din webbplats.

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

Behållaren kommer att ha en bild högst upp och innehållet längst ner. Låt oss definiera bildhöjden som 200px tillsammans med någon sväveffekt.

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

Därefter definierar vi uppmaningsknappen med svävande 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 sista delen av CSS är att definiera ytterligare stilar för länk, stycke och rubrik.

/* 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 fullständiga CSS för en enda panel kommer att se nedan och lägga till koden under "Sidor> Välj den sida du vill lägga till panelen> SEO -inställningar> Rubrikkod" på din Weebly -sida.

Hur lägger jag till fotopanel widget i Weebly?

Lägg till rubrikkod på sidan

<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 för enkel fotopanel

När CSS har lagts till lägger du till nedanstående HTML -kod i ett "Bädda in kod" -element. Se till att ersätta bildadressen 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>

Skapa en helsides fotopanel widget

Låt oss ta ett exempel på en restaurangmeny med fyra kolumner och flera rader med menyalternativ. Ovanstående widget med en panel ska modifieras för att passa panelerna i en flexibel behållare med samma höjd med fyra kolumner som c1, c2, c3 och c4 och alla andra stilar förblir desamma. Nedan är exempel på hur du kan skapa flera paneler på en enda sida.

Hur lägger jag till fotopanel widget i Weebly?

Widget för Weebly Photo Panel

Nedan finns den fullständiga CSS som du kan klistra in under avsnittet "Rubrikkod" på din Weebly -sida:

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

Nedan finns HTML för widgeten med två rader som innehåller åtta paneler. Lägg till nedanstående HTML i ett " Bädda in kod " -element genom att ersätta dummyinnehållet och bildadressen 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 -->

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer