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

Wie füge ich einen Inhaltsbereich in der Weebly-Site hinzu?

9

Inhaltsfelder werden verwendet, um wichtige Inhalte in einer Art von Anzeigetafel zu präsentieren. Sie können ein einzelnes Panel oder eine Gruppe von Panels einrichten, um Ihre Inhalte in mehreren Spalten anzuzeigen. Diese Art von Panels lassen sich leicht in High-End-CMS wie WordPress mit Shortcode-Plugins hinzufügen, die meistens kostenlos oder zu einem geringen Preis erhältlich sind. Plattformen wie Weebly hinken jedoch beim Angebot solcher Elemente hinterher. Unser Ziel ist es, die Einfachheit von Weebly mit den einfachen CSS-Codes zu kombinieren, um sicherzustellen, dass Weebly-Site-Besitzer auch alle Arten von Elementen wie farbige Textfelder, Tooltips, Inhaltsfenster, Beschriftungen usw. verwenden können.

Inhaltsbereich für Weebly

In diesem Artikel werden wir vier verschiedene Stile von Panels erklären, die jeweils mit geringfügigen Modifikationen unter Verwendung von CSS-Code versehen sind. Bevor wir mit dem folgenden Code fortfahren, ist ein Beispiel-Inhaltsbereich, über den wir sprechen.

Um Verwirrung zu vermeiden, haben wir separate Codes für die Panels verwendet, aber wenn man sich den Code ansieht, sind die meisten CSS-Klassen für alle Panels gleich.

1 Einfaches Inhaltsfenster

Der einfache Inhaltsbereich enthält eine Kopfzeile und den Inhalt mit derselben Hintergrundfarbe wie unten gezeigt:

Wie füge ich einen Inhaltsbereich in der Weebly-Site hinzu?

Sie können den CSS-Code für den einfachen Inhaltsbereich auf verschiedene Weise hinzufügen:

  • Unter dem Haupt-Stylesheet "main.less" ohne und -Tags
  • Im Abschnitt „ Kopfzeilencode ” der Seite
  • Innerhalb des " Embed Code "-Elements zusammen mit HTML-Code.
<style> .panel { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #d8d8d8; } .panel > .panel-heading { color: #333333; background-color: #f4f4f4; border-color: #d8d8d8; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style>

Sobald der CSS-Code hinzugefügt wurde, fügen Sie den folgenden HTML-Code in das Element „Code einbetten” ein:

<!-- Content Panel --> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Default Panel</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Default Panel -->

Wie wäre es mit dem Hinzufügen einer Hintergrundfarbe zum Header-Abschnitt? Verwenden Sie den folgenden CSS / HTML-Code zum Hinzufügen eines Inhaltsbereichs mit Kopfzeilenfarbe als „Aqua”. Anstelle von Aqua-Farbe können Sie jede beliebige Farbe verwenden.

Wie füge ich einen Inhaltsbereich in der Weebly-Site hinzu?

/* CSS Code Start */ <style> .panel-aqua { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #86b998; } .panel-aqua > .panel-heading { background-color: #66a67c; border-color: #a6ccb4; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style> /* CSS Code End */ <!-- HTML Code for Panel with Aqua Header --> <div class="panel-aqua"> <div class="panel-heading"> <h3 class="panel-title">Panel withh Aqua Header</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Aqua Panel -->

3 Vollfarb-Inhaltsfenster

Lassen Sie uns sowohl dem Header- als auch dem Inhaltsbereich Farbe hinzufügen:

Wie füge ich einen Inhaltsbereich in der Weebly-Site hinzu?

Und hier ist der Code für das Vollfarb-Content-Panel:

/* CSS Code Start */ <style> .panel-brown { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #6f6f55; } .panel-brown > .panel-heading { background-color: #52523f; border-color: #8c8c6b; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #6f6f55; color: #FFFFFF; } </style> /* CSS Code End */ <!-- HTML for Full Color Panel in Brown --> <div class="panel-brown"> <div class="panel-heading"> <h3 class="panel-title">Full Color Panel in Brown</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Brown Panel -->

Lassen Sie uns abschließend dem Panel eine Fußzeile hinzufügen und einige Notizen hinzufügen.

Wie füge ich einen Inhaltsbereich in der Weebly-Site hinzu?

Unten ist der Code für den Inhaltsbereich mit Fußzeile:

/* Start of CSS for Content Panel with Footer */ <style> .panel-with-footer { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #bc5e43; } .panel-with-footer > .panel-heading { color: #ffffff; background-color: #bc5e43; border-color: #e4bfb4; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #c97e69; color: #FFFFFF; } .panel-footer { background: #bc5e43; border-color: #e4bfb4; color: #FFFFFF; padding: 10px 15px; border-top: 1px solid #d8d8d8; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } </style> /* End of CSS for Content Panel with Footer */ <!-- HTML for Content Panel with Footer --> <div class="panel-with-footer"> <div class="panel-heading"> <h3 class="panel-title">Content Panel with Footer</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="panel-footer">Panel Footer</div></div> <!-- End Panel with Footer-->

Hinzufügen von Bildern innerhalb des Panels

Obwohl wir alle Beispiele mit Textinhalt gezeigt haben, können Sie jedes HTML- Element als Inhalt hinzufügen. Unten ist beispielsweise der Inhaltsbereich mit Fußzeile und einem Bild darin.

Wie füge ich einen Inhaltsbereich in der Weebly-Site hinzu?

Letzte Worte

Wie Sie sehen, ist es sehr einfach, Widgets in Weebly zu erstellen und auf einzelnen oder mehreren Seiten einzufügen. Sie können die Inhaltsbereiche anpassen, um Größe und Farben anzupassen und Elemente innerhalb des Bereichs einzufügen.

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