TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich ein Fotopanel-Widget in Weebly hinzu?

7

Das Fotofenster wird verwendet, um ein Bild zusammen mit einer kleinen Beschreibung und einem Call-to-Action-Link oder einer Schaltfläche anzuzeigen. Dies ist eine einfache Möglichkeit, die Aufmerksamkeit des Benutzers zu erregen und ihn auf die Zielseite zu leiten. Anstelle eines einzelnen Panels können Sie auch ganzseitige Panels in mehreren Spalten als Restaurant-Speisekarte oder zur Präsentation von Reisezielen für ein Reisebüro verwenden. In diesem Artikel erklären wir, wie Sie ein einzelnes Fotopanel- Widget erstellen und in mehreren Spalten auf Ihrer Weebly- Site verwenden.

Die einzelnen Fotopanel-Widgets sehen wie unten aus und Sie können ein Restaurant oder eine Galerie erstellen, indem Sie das einzelne Widget verbessern.

Wie füge ich ein Fotopanel-Widget in Weebly hinzu?

Einzelnes Fotopanel für Weebly

Erstellen eines einzelnen Fotobereich-Widgets

Das einzelne Panel kann unabhängig als individuelles Fotopanel-Widget verwendet werden. Wenn Sie es in einer Spalte verwenden möchten, muss ein einzelnes Fotofeld neben jedem anderen Element platziert werden, indem Sie das Element „ Einbettungscode ” auf Ihrer Weebly-Site verwenden. Das Feld enthält ein Bild, einen Titel, eine Beschreibung und einen Call-to-Action-Button. Grundsätzlich benötigen Sie Bilder, CSS und HTML, um ein Panel zu erstellen und das Foto-Panel wird mit geringfügigen Abweichungen basierend auf Ihrem Weebly-Theme aussehen.

Funktionen des Fotopanel-Widgets

  • Als einzelnes Widget oder in mehreren Spalten hinzufügen.
  • Mit einfachem CSS ohne Abfrage erstellt.
  • Passen Sie Farbe und Schriftarten an Ihre Bedürfnisse an.
  • Verwenden Sie es für einen Call-to-Action oder ein ganzseitiges Widget wie ein Restaurantmenü.
  • Vollständig reaktionsschnell, passt sich automatisch der Breite von Mobilgeräten an.

Hochladen von Bildern auf der Weebly-Site

Im ersten Schritt laden Sie unter „Theme > HTML/CSS bearbeiten > Assets > Datei(en) hochladen…” die benötigten Bilder auf Ihre Weebly-Site hoch. Das hochgeladene Bild enthält den folgenden Link:

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

CSS für einzelnes Fotopanel

Zuerst erstellen wir ein Container Panel mit der Hintergrundfarbe beige. Dies ist die Farbe, die im unteren Teil des Panels angezeigt wird, und Sie können diese Farbe in eine beliebige Farbe ändern, die dem Thema Ihrer Website entspricht.

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

Der Container hat oben ein Bild und unten den Inhalt. Lassen Sie uns die Bildhöhe als 200px zusammen mit einem Hover-Effekt definieren.

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

Als nächstes definieren wir den Call-to-Action-Button mit Schwebeeffekt:

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

Der letzte Teil von CSS besteht darin, zusätzliche Stile für Link, Absatz und Überschrift zu definieren.

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

Das vollständige CSS für ein einzelnes Panel wird unten angezeigt und der Code unter "Seiten > Wählen Sie die Seite auswählen, auf der Sie das Panel hinzufügen möchten > SEO-Einstellungen > Header-Code" Ihrer Weebly-Seite hinzufügen.

Wie füge ich ein Fotopanel-Widget in Weebly hinzu?

Kopfzeilencode in Seite hinzufügen

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

Sobald das CSS hinzugefügt wurde, fügen Sie den folgenden HTML-Code in ein "Embed Code"-Element ein. Stellen Sie sicher, dass Sie die Bild-URL durch Ihre eigene ersetzen.

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

Erstellen eines ganzseitigen Fotofenster-Widgets

Nehmen wir als Beispiel ein Restaurantmenü mit vier Spalten und mehreren Reihen von Menüpunkten. Das obige Widget für einzelne Panels muss so modifiziert werden, dass es die Panels in einen flexiblen Container gleicher Höhe mit vier Spalten wie c1, c2, c3 und c4 einpasst und alle anderen Stile gleich bleiben. Unten sehen Sie ein Beispiel, wie Sie mehrere Panels auf einer einzigen Seite erstellen können.

Wie füge ich ein Fotopanel-Widget in Weebly hinzu?

Weebly Photo Panel Widget

Unten finden Sie das vollständige CSS, das Sie in den Abschnitt "Header-Code" Ihrer Weebly-Seite einfügen können:

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

Unten ist der HTML-Code für das Widget mit zwei Zeilen und acht Feldern. Fügen Sie den unten stehenden HTML- Code in ein " Embed Code "-Element ein, indem Sie den Dummy-Inhalt und die Bild-URL durch Ihre eigenen ersetzen.

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

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen