Startseite

Willkommen auf der Demo-Startseite Version 2.0!

Diese als Template genutzte Startseite, gestaltet und umgesetzt von Gino Zantarelli, zeigt ein paar Beispiele auf Basis von HTML (mit teilweiser Java Script-Unterstützung die schon direkt im Template eingebunden ist!) wie man eine Anfangsseite für ein Projekt realisieren könnte. Da die Startseite 2.0 auf HTML und php aufbaut können hier evtl. Zusatzfunktionen des WSC 6 direkt realisiert werden (einige Codeteile werden hier bereits genutzt). Es sind keine Funktionen des WSC 6 enthalten, man kann aber selbst erstellte Boxen mit dem CMS-Boxensystem der Woltlab Software einbinden.


Ein weiterer, kleiner Nachteil ist die ignorierung der aktuellen Breakpoints für mobile Ansichten vom Woltlab CMS (welche nicht direkt auf dieser Seite im Style-Container genutzt werden können), nur die Breakpoints mit Pixelangabe (wie bei normalen Webseitenvorlagen) sind aktiv. Über die CSS-Definition eines Stils oder das stilübergreifende CSS können aber die neueren Breakpoints für die erstellte Seite angesprochen werden, alle Beispiele auf dieser Seite sind für die Mobilanzeige und einen evtl. verwendeten Dark Mode schon optimiert.


Neuerungen in Version 2.0:

Es hat sich vieles getan ... die Startseite kann nur noch als Template & nicht mehr als HTML-Seite genutzt werden (auf Grund Verwendung diverser Codeteile), es gibt eine neue 'Hero'- Box, die Scrollpoints wurden optimiert & dazu jeweils ein 'Bring´ mich nach oben!'-Feld eingebaut, diverse neue Textboxenbeispiele sind nun nutzbar, es gibt neue 'Big stripes' für Werbung oder Hinweise auf diverse Verlinkungen, neue sowie verbesserte Bilder-Slider, eine von mir geschriebene Anleitung für die Nutzung von FontAwesome 6-Symbolen (bin ich ein wenig stolz drauf...) und zu guter letzt ist es nun möglich die Stilvariablen des WSC für die Anpassung der Startseite zu nutzen (auch für den Dark-Modus).


Stilanpassungen für verschiedene Stile:

Diverse CSS-Anpassungen können in der jeweiligen CSS-Definition des zu verwendeten Stils durchgeführt werden, als Bezug ist der Inhalt extra in einem seperaten Container mit der Bezeichnung

<div id="GZcustompagecontainer"> inkludiert.


Wo kann ich die Hauptfarben sowie CSS-Formatierungen anpassen?

Die Anpassungen können direkt im Quellcode dieser Seite im unteren "style"-Bereich bearbeitet werden. Durch die von mir gesetzten Markierungen wie z. Bspl.

/*-- Hintergrundfarbe --*/ oder /*-- Umrandung Textinhalt --*/ sollten die anzupassenden Codestellen relativ schnell gefunden werden können.

Über die CSS-Definition eines Stils oder das stilübergreifende CSS können die vorgegebenen Farbcodes auch für verschiedene Stile überschrieben werden, es muss dann aber im Code ein

!important gesetzt sein um dieses zu erzwingen!



Wo finde ich die zu bearbeitenden Blockarten?

Da diese Seite diverse Blocks mit verschiedenen Inhalten nutzt ist eine Markierung im Quellcode eingebaut wie z. Bspl.

<!-- ■ ■ ■ ■ ■ Start Hero Box ■ ■ ■ ■ ■ --> und <!-- ■ ■ ■ ■ ■ Ende Hero Box ■ ■ ■ ■ ■ --> , die Blocks sollten damit leicht zu finden und zu bearbeiten/entfernen sein...


Sind die verwendeten Bilder Legal?

Alle auf dieser Startseitenvorlage genutzten Bilder sind von Picsum Photos sowie Unsplash und frei nutzbar, siehe dazu auch die Lizenzbedingungen. Grundsätzlich übernimmt Powerstylez.de keine Verantwortung für die Richtigkeit der angegebenen Lizenzbestimmung verwendeter Bilder, nutzen sie eigene Bilder sichern sie sich ab ob diese Legal für ein Projekt verwenden lassen.


Viel Freude an dieser kostenlosen Vorlage ...

Hallo ... ich bin ein 'Hero' H1-Titeltext zur Begrüßung!

Dieses ist der 'Subhead'-Text der Hero-Box und kann beliebig in der angelegten Seite angepasst werden. Machen sie hier auf den Inhalt ihres CMS oder Forum aufmerksam - das ist wichtig für ihre Besucher.

Los geht´s !

Scrollpoints (Sprungmarken)

Folgende Button sind mit sogenannten Scrollpoints verknüpft, wenn man schnell zu einer bestimmten Sektion möchte springt die Webseite auf die markierte Stelle. Man kann durch das einfügen von ID´s, z. Bspl.

data-id="anchor1" im Hauptlink und dann im Content eingefügten Code <div id="anchor1"></div> diesen Scrollpoint ansprechen, es müssen laufende Nummern für diverse Punkte (anchor1, anchor2, anchor3 ...) verwendet werden.


  • Scrollpoint #1
  • Scrollpoint #2
  • Scrollpoint #3
  • Scrollpoint #4
  • Scrollpoint #5
  • Scrollpoint #6
  • Scrollpoint #7
  • Scrollpoint #8
  • Scrollpoint #9
  • Scrollpoint #10
  • Scrollpoint #11
  • Scrollpoint #12
  • Scrollpoint #13
  • Scrollpoint #14
  • Scrollpoint #15
  • Scrollpoint #16
  • Scrollpoint #17
  • Scrollpoint #18
  • Scrollpoint #19
  • Scrollpoint #20
  • Scrollpoint #21
  • Scrollpoint #22
  • Scrollpoint #23
  • Scrollpoint #24
  • Scrollpoint #25
  • Scrollpoint #26
  • Scrollpoint #27
  • Rechtliches ...

    • Dieses ist der H2-Titel eines Seitenabschnitts (section center)

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    das ist ein Boxentitel (features)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Dieses ist ein H5-Boxentitel

    Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.

    Button

    Ein Boxentitel mit fetten Text

    Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.

    Ein Boxentitel mit schrägen Text

    Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more cowbell first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.

    Ein Boxentitel mit Weblink

    Upstream selling wheelhouse. Ladder up / ladder back to the strategy into the weeds, but timeframe, nor design thinking or it just needs more Punk first-order optimal strategies. Not a hill to die on peel the onion out of the loop win-win, for staff engagement, nor market-facing.

    Dieses ist der H1-Titel eines Seitenabschnitts (section title center)

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

    Dieses ist der H1-Titel eines Seitenabschnitts (section title left)

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

    Dieses ist der H1-Titel eines Seitenabschnitts (section title right)

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

    Fülltext mit Bild Linksseitig & Rechtsseitig (title h3)

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Überschrift (title h2)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus enim ex, convallis accumsan nisi blandit id. Sed consequat molestie urna, vel tempor eros dapibus id. Nunc in sapien nec lectus condimentum suscipit in at nisl. Suspendisse potenti. Suspendisse potenti. Quisque tincidunt imperdiet commodo. Nam ultricies vulputate dapibus. Vestibulum feugiat sollicitudin nisi, sit amet elementum est molestie eget. Sed arcu augue, luctus at orci id, molestie lobortis felis.


    Vivamus tortor neque, varius sed sagittis sed, tristique ornare urna. Nam semper mattis velit et rhoncus. Vestibulum arcu ipsum, ornare imperdiet tortor porta, viverra suscipit elit. Aliquam aliquet ultrices purus vel blandit. Cras gravida gravida sem auctor dictum. Pellentesque a convallis lorem. Nulla mattis non ligula a venenatis. Phasellus at euismod felis. Nulla egestas, mi porta molestie semper, augue mauris aliquam libero, vel iaculis dui enim eu risus. Duis accumsan in turpis eu tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat ligula ac tristique scelerisque. Duis euismod id metus vel lobortis. Duis volutpat lorem augue, sit amet malesuada tortor varius ut. Ut eu mollis tortor, lacinia tristique diam. In vel massa magna.

    Duis molestie tortor non elit hendrerit, eget volutpat risus vulputate. Nulla sollicitudin condimentum interdum. Praesent et odio arcu. Aliquam et molestie quam. Sed mattis ex at congue rutrum. Praesent luctus neque scelerisque, ullamcorper risus eget, porttitor risus. Duis sed tortor vitae magna cursus interdum et quis quam. Maecenas sed pharetra sapien Gino Zantarelli. Ut luctus aliquet commodo. Integer lorem augue, tristique et lacinia sed, eleifend pretium mauris. Etiam cursus et ligula a ornare. Aenean facilisis vel eros eu tristique.


    Proin cursus faucibus nunc, sit amet scelerisque tortor dignissim at. Nulla bibendum a erat et cursus. Suspendisse est mi, ornare eu ante id, condimentum sollicitudin orci. Ut nec risus fermentum, gravida libero nec, volutpat diam. Vestibulum cursus turpis nec lorem suscipit, vel cursus odio scelerisque. Nunc vitae erat sed augue lacinia blandit. Donec consequat tortor odio, ac pulvinar dolor tincidunt ut. Praesent bibendum, lorem et bibendum porta, erat erat bibendum nibh, quis porttitor neque nulla id ligula. Pellentesque porttitor efficitur eleifend.

    Vivamus aliquam dolor arcu, ut mollis nibh ultricies in. Suspendisse sagittis egestas urna, ac dapibus diam ullamcorper in. Proin molestie pharetra diam non finibus. Nam turpis quam, bibendum vitae lectus non, malesuada aliquet ante. Proin egestas lacus vel eleifend pellentesque. Cras nec augue porta, consequat dolor et, ultricies elit. Aenean at ex sed sem eleifend venenatis. Vivamus ultrices est sit amet ligula eleifend, vel dignissim nisi cursus. Donec vel gravida lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur at quam sodales leo scelerisque dictum. Mauris molestie augue eget mi condimentum pulvinar. In hac habitasse platea dictumst. Nullam odio magna, iaculis sit amet mauris nec, gravida finibus est. Nunc turpis diam, pellentesque in lorem sit amet, dignissim fermentum mauris.

    Überschrift (title h2)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus enim ex, convallis accumsan nisi blandit id. Sed consequat molestie urna, vel tempor eros dapibus id. Nunc in sapien nec lectus condimentum suscipit in at nisl. Suspendisse potenti. Suspendisse potenti. Quisque tincidunt imperdiet commodo. Nam ultricies vulputate dapibus. Vestibulum feugiat sollicitudin nisi, sit amet elementum est molestie eget. Sed arcu augue, luctus at orci id, molestie lobortis felis.


    Vivamus tortor neque, varius sed sagittis sed, tristique ornare urna. Nam semper mattis velit et rhoncus. Vestibulum arcu ipsum, ornare imperdiet tortor porta, viverra suscipit elit. Aliquam aliquet ultrices purus vel blandit. Cras gravida gravida sem auctor dictum. Pellentesque a convallis lorem. Nulla mattis non ligula a venenatis. Phasellus at euismod felis. Nulla egestas, mi porta molestie semper, augue mauris aliquam libero, vel iaculis dui enim eu risus. Duis accumsan in turpis eu tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat ligula ac tristique scelerisque. Duis euismod id metus vel lobortis. Duis volutpat lorem augue, sit amet malesuada tortor varius ut. Ut eu mollis tortor, lacinia tristique diam. In vel massa magna.


    Duis molestie tortor non elit hendrerit, eget volutpat risus vulputate. Nulla sollicitudin condimentum interdum. Praesent et odio arcu. Aliquam et molestie quam. Sed mattis ex at congue rutrum. Praesent luctus neque scelerisque, ullamcorper risus eget, porttitor risus. Duis sed tortor vitae magna cursus interdum et quis quam. Maecenas sed pharetra sapien. Ut luctus aliquet commodo. Integer lorem augue, tristique et lacinia sed, eleifend pretium mauris. Etiam cursus et ligula a ornare. Aenean facilisis vel eros eu tristique.


    Proin cursus faucibus nunc, sit amet scelerisque tortor dignissim at. Nulla bibendum a erat et cursus. Suspendisse est mi, ornare eu ante id, condimentum sollicitudin orci. Ut nec risus fermentum, gravida libero nec, volutpat diam. Vestibulum cursus turpis nec lorem suscipit, vel cursus odio scelerisque. Nunc vitae erat sed augue lacinia blandit. Donec consequat tortor odio, ac pulvinar dolor tincidunt ut. Praesent bibendum, lorem et bibendum porta, erat erat bibendum nibh, quis porttitor neque nulla id ligula. Pellentesque porttitor efficitur eleifend.


    Vivamus aliquam dolor arcu, ut mollis nibh ultricies in. Suspendisse sagittis egestas urna, ac dapibus diam ullamcorper in. Proin molestie pharetra diam non finibus. Nam turpis quam, bibendum vitae lectus non, malesuada aliquet ante. Proin egestas lacus vel eleifend pellentesque. Cras nec augue porta, consequat dolor et, ultricies elit. Aenean at ex sed sem eleifend venenatis. Vivamus ultrices est sit amet ligula eleifend, vel dignissim nisi cursus. Donec vel gravida lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur at quam sodales leo scelerisque dictum. Mauris molestie augue eget mi condimentum pulvinar. In hac habitasse platea dictumst. Nullam odio magna, iaculis sit amet mauris nec, gravida finibus est. Nunc turpis diam, pellentesque in lorem sit amet, dignissim fermentum mauris.

    Column 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

    Column 2 (center)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


    Los geht´s !

    Column 3

    Dieses ist der 'subtitle'-Text des Haupttitels ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

    'Circle'- Boxes

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Das ist ein h2-Titel der 'Circle'-Box

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Das ist ein h2-Titel der 'Circle'-Box

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Das ist ein h2-Titel der 'Circle'-Box

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Bilder-Slider (Sheet Slider)

    Dieses ist der Sheet Bilder-Slider (» Sheet Slider Webseite) mit diversen Titelanzeigen sowie Links, Vor/Zurück-Button und Pausenfunktion. Es können maximal 10 Bilder in den Slider eingebunden werden. Der Sheet Slider steht unter MIT-Lizenz und darf für kommerzielle & nicht kommerzielle Projekte genutzt werden.

    Ich bin ein H1-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

    ... und ich bin ein H2-Titeltext!

    Hier steht der Untertitel mit Weblink

    Bild mit Weblink

    Leitet bei Klick auf das Bild weiter nach Unsplash.com

    Ich bin ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

    Ich bin ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

    Bild mit Weblink

    Leitet bei Klick auf das Bild weiter nach Unsplash.com

    Carousel Boxes

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Es ist bei einem Carousel darauf zu achten das alle verwendeten Bilder die selben Maße haben müssen um eine verzerrte Darstellung zu vermeiden, die hier im Beispiel dargestellten Boxen sind mit einer maximalen Höhe von 250px per CSS-Definition festgelegt.


    sample-one
    Dieses ist eine Bildbeschreibung
    sample-two
    Dieses ist eine Bildbeschreibung (verlinkt)
    sample-tree
    Dieses ist die Bildbeschreibung eines verlinkten Bildes
    sample-four
    Dieses ist eine Bildbeschreibung
    sample-five
    Dieses ist eine Bildbeschreibung
    sample-six
    Dieses ist eine Bildbeschreibung
    sample-seven
    Dieses ist eine Bildbeschreibung
    sample-eight
    Dieses ist eine Bildbeschreibung
    sample-nine
    Dieses ist eine Bildbeschreibung
    sample-ten
    Dieses ist eine Bildbeschreibung
    sample-eleven
    Dieses ist eine Bildbeschreibung
    sample-twelve
    Dieses ist eine Bildbeschreibung

    Marquee Boxen (Mouse draggable)

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...
    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    Button
    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    sample-one.jpeg

    Beispieltitel (article h4)

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, nesciunt. Optio omnis ducimus autem aperiam incidunt quae harum cumque animi suscipit dolor cupiditate culpa, doloremque dolorem voluptas qui dignissimos repellat.

    Preistabellen (responsive)

    • Basic
    • € 9.99 / monatlich
    • 10GB Speicherplatz
    • 10 E-Mail Postfächer
    • 10 Domains
    • 1GB Bandbreite
    • Bestellen
    • Neu
      Ultimate
    • € 300.90 / jährlich
    • Unbegrenzter Speicherplatz
    • 250 E-Mail Postfächer
    • 25 Domains (mehr Informationen)
    • 6GB Bandbreite
    • 2 SSD-Laufwerke bis 1 TB
    • Tägliche Sicherung (Backup)
    • Jetzt bestellen!
    • Premium
    • € 29.99 / monatlich
    • 50GB Speicherplatz
    • 50 E-Mail Postfächer
    • 12 Domains
    • 2GB Bandbreite
    • Tägliche Sicherung (Backup)
    • Bestellen

    Bilder Portfolio (h2)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

    • Random Image (verlinkt)

      Wechselt beim wiederholten Aufruf Details

    • Picsum Image

      Gibt es hier: https://picsum.photos Details

    • Picsum Image

      Gibt es hier: https://picsum.photos Details

    • Picsum Image

      Gibt es hier: https://picsum.photos Details

    • Picsum Image

      Gibt es hier: https://picsum.photos Details

    • Picsum Image

      Gibt es hier: https://picsum.photos Details

    Lightbox Bilder Galerie (h1)

    Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...

    Dieses ist ein H3-Titeltext!

    Hier steht der Untertitel mit Weblink

    Dieses ist ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

    Dieses ist ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen, allerdings ist dieser länger um zu zeigen wie sich die Titelbox verhält.
    Neu

    Dieses ist nur ein H3-Titeltext!

    Veröffentlicht am 07.05.2025

    Dieses ist ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

    Dieses ist ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

    Dieses ist ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

    Dieses ist ein H3-Titeltext!

    Hier steht der Untertitel um eine Beschreibung anzuzeigen...

      Suchst du tolle Erweiterungen für deine Woltlab Software?

      Besuche noch heute unseren Shop mit vielen weiteren, kostenlosen Angeboten ...

      los geht´s!

      Brauchst du Support zu deiner Startseitenvorlage?

      Registriere Dich in unserer Community und stelle deine Fragen - wir antworten garantiert ...

      los geht´s!

      Suchst du professionelle Stile für deine aktuelle Woltlab Software?

      Besuche noch heute unseren Shop und erlebe die Vielfalt ...

      los geht´s!

      Wussten sie schon?

      0

      Zeilen CSS-Code geschrieben

      0

      Liter starken Kaffee getrunken

      0

      Tage & Nächte programmiert

      0

      positive Bewertungen von Kunden

      Team-Boxes! (title h2)

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

      Jane Doe

      Head of Development

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

      John Doe

      Creative Director

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

      Walt Doe

      Sales Managment

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

      Mary Doe

      Head of Marketing

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

      Dieses ist ein Accordion Menu

      Dieses ist der 'subtitle'-Text des Haupttitels und soll beschreiben welcher inhalt im folgenden Abschnitt vorhanden ist ...
    1. Section 1

      2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus enim ex, convallis accumsan nisi blandit id. Sed consequat molestie urna, vel tempor eros dapibus id. Nunc in sapien nec lectus condimentum suscipit in at nisl. Suspendisse potenti. Suspendisse potenti. Quisque tincidunt imperdiet commodo. Nam ultricies vulputate dapibus. Vestibulum feugiat sollicitudin nisi, sit amet elementum est molestie eget. Sed arcu augue, luctus at orci id, molestie lobortis felis. Vivamus tortor neque, varius sed sagittis sed, tristique ornare urna. Nam semper mattis velit et rhoncus. Vestibulum arcu ipsum, ornare imperdiet tortor porta, viverra suscipit elit. Aliquam aliquet ultrices purus vel blandit. Cras gravida gravida sem auctor dictum. Pellentesque a convallis lorem. Nulla mattis non ligula a venenatis. Phasellus at euismod felis. Nulla egestas, mi porta molestie semper, augue mauris aliquam libero, vel iaculis dui enim eu risus. Duis accumsan in turpis eu tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat ligula ac tristique scelerisque. Duis euismod id metus vel lobortis. Duis volutpat lorem augue, sit amet malesuada tortor varius ut. Ut eu mollis tortor, lacinia tristique diam. In vel massa magna. Duis molestie tortor non elit hendrerit, eget volutpat risus vulputate. Nulla sollicitudin condimentum interdum. Praesent et odio arcu. Aliquam et molestie quam. Sed mattis ex at congue rutrum. Praesent luctus neque scelerisque, ullamcorper risus eget, porttitor risus. Duis sed tortor vitae magna cursus interdum et quis quam. Maecenas sed pharetra sapien. Ut luctus aliquet commodo. Integer lorem augue, tristique et lacinia sed, eleifend pretium mauris. Etiam cursus et ligula a ornare. Aenean facilisis vel eros eu tristique.

      Proin cursus faucibus nunc, sit amet scelerisque tortor dignissim at. Nulla bibendum a erat et cursus. Suspendisse est mi, ornare eu ante id, condimentum sollicitudin orci. Ut nec risus fermentum, gravida libero nec, volutpat diam. Vestibulum cursus turpis nec lorem suscipit, vel cursus odio scelerisque. Nunc vitae erat sed augue lacinia blandit. Donec consequat tortor odio, ac pulvinar dolor tincidunt ut. Praesent bibendum, lorem et bibendum porta, erat erat bibendum nibh, quis porttitor neque nulla id ligula. Pellentesque porttitor efficitur eleifend. Vivamus aliquam dolor arcu, ut mollis nibh ultricies in. Suspendisse sagittis egestas urna, ac dapibus diam ullamcorper in. Proin molestie pharetra diam non finibus. Nam turpis quam, bibendum vitae lectus non, malesuada aliquet ante. Proin egestas lacus vel eleifend pellentesque. Cras nec augue porta, consequat dolor et, ultricies elit. Aenean at ex sed sem eleifend venenatis. Vivamus ultrices est sit amet ligula eleifend, vel dignissim nisi cursus. Donec vel gravida lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur at quam sodales leo scelerisque dictum. Mauris molestie augue eget mi condimentum pulvinar. In hac habitasse platea dictumst. Nullam odio magna, iaculis sit amet mauris nec, gravida finibus est. Nunc turpis diam, pellentesque in lorem sit amet, dignissim fermentum mauris.

    2. Section 2

      3. Lorem ipsum dolor sit amet

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus enim ex, convallis accumsan nisi blandit id. Sed consequat molestie urna, vel tempor eros dapibus id. Nunc in sapien nec lectus condimentum suscipit in at nisl. Suspendisse potenti. Suspendisse potenti. Quisque tincidunt imperdiet commodo. Nam ultricies vulputate dapibus. Vestibulum feugiat sollicitudin nisi, sit amet elementum est molestie eget. Sed arcu augue, luctus at orci id, molestie lobortis felis. Vivamus tortor neque, varius sed sagittis sed, tristique ornare urna. Nam semper mattis velit et rhoncus. Vestibulum arcu ipsum, ornare imperdiet tortor porta, viverra suscipit elit. Aliquam aliquet ultrices purus vel blandit. Cras gravida gravida sem auctor dictum. Pellentesque a convallis lorem. Nulla mattis non ligula a venenatis. Phasellus at euismod felis. Nulla egestas, mi porta molestie semper, augue mauris aliquam libero, vel iaculis dui enim eu risus. Duis accumsan in turpis eu tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat ligula ac tristique scelerisque. Duis euismod id metus vel lobortis. Duis volutpat lorem augue, sit amet malesuada tortor varius ut. Ut eu mollis tortor, lacinia tristique diam. In vel massa magna. Duis molestie tortor non elit hendrerit, eget volutpat risus vulputate. Nulla sollicitudin condimentum interdum. Praesent et odio arcu. Aliquam et molestie quam. Sed mattis ex at congue rutrum. Praesent luctus neque scelerisque, ullamcorper risus eget, porttitor risus. Duis sed tortor vitae magna cursus interdum et quis quam. Maecenas sed pharetra sapien. Ut luctus aliquet commodo. Integer lorem augue, tristique et lacinia sed, eleifend pretium mauris. Etiam cursus et ligula a ornare. Aenean facilisis vel eros eu tristique.

    3. Section 3

      4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus enim ex, convallis accumsan nisi blandit id. Sed consequat molestie urna, vel tempor eros dapibus id. Nunc in sapien nec lectus condimentum suscipit in at nisl. Suspendisse potenti. Suspendisse potenti. Quisque tincidunt imperdiet commodo. Nam ultricies vulputate dapibus. Vestibulum feugiat sollicitudin nisi, sit amet elementum est molestie eget. Sed arcu augue, luctus at orci id, molestie lobortis felis. Vivamus tortor neque, varius sed sagittis sed, tristique ornare urna. Nam semper mattis velit et rhoncus. Vestibulum arcu ipsum, ornare imperdiet tortor porta, viverra suscipit elit. Aliquam aliquet ultrices purus vel blandit. Cras gravida gravida sem auctor dictum. Pellentesque a convallis lorem. Nulla mattis non ligula a venenatis. Phasellus at euismod felis. Nulla egestas, mi porta molestie semper, augue mauris aliquam libero, vel iaculis dui enim eu risus. Duis accumsan in turpis eu tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat ligula ac tristique scelerisque. Duis euismod id metus vel lobortis. Duis volutpat lorem augue, sit amet malesuada tortor varius ut. Ut eu mollis tortor, lacinia tristique diam. In vel massa magna. Duis molestie tortor non elit hendrerit, eget volutpat risus vulputate. Nulla sollicitudin condimentum interdum. Praesent et odio arcu. Aliquam et molestie quam. Sed mattis ex at congue rutrum. Praesent luctus neque scelerisque, ullamcorper risus eget, porttitor risus. Duis sed tortor vitae magna cursus interdum et quis quam. Maecenas sed pharetra sapien. Ut luctus aliquet commodo. Integer lorem augue, tristique et lacinia sed, eleifend pretium mauris. Etiam cursus et ligula a ornare. Aenean facilisis vel eros eu tristique.


      Mary DoeProin cursus faucibus nunc, sit amet scelerisque tortor dignissim at. Nulla bibendum a erat et cursus. Suspendisse est mi, ornare eu ante id, condimentum sollicitudin orci. Ut nec risus fermentum, gravida libero nec, volutpat diam. Vestibulum cursus turpis nec lorem suscipit, vel cursus odio scelerisque. Nunc vitae erat sed augue lacinia blandit. Donec consequat tortor odio, ac pulvinar dolor tincidunt ut. Praesent bibendum, lorem et bibendum porta, erat erat bibendum nibh, quis porttitor neque nulla id ligula. Pellentesque porttitor efficitur eleifend. Vivamus aliquam dolor arcu, ut mollis nibh ultricies in. Suspendisse sagittis egestas urna, ac dapibus diam ullamcorper in. Proin molestie pharetra diam non finibus. Nam turpis quam, bibendum vitae lectus non, malesuada aliquet ante. Proin egestas lacus vel eleifend pellentesque. Cras nec augue porta, consequat dolor et, ultricies elit. Aenean at ex sed sem eleifend venenatis. Vivamus ultrices est sit amet ligula eleifend, vel dignissim nisi cursus. Donec vel gravida lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur at quam sodales leo scelerisque dictum. Mauris molestie augue eget mi condimentum pulvinar. In hac habitasse platea dictumst. Nullam odio magna, iaculis sit amet mauris nec, gravida finibus est. Nunc turpis diam, pellentesque in lorem sit amet, dignissim fermentum mauris.

      Selbst erstellte Kommentarboxen

      Diese Boxen sollen Kommentare darstellen die auf der Startseite hervorgehoben werden sollen, es werden KEINE Daten von der verwendeten Software abgerufen da dieses Beispiel nur HTML beinhaltet.

      Walt Doe Geschrieben am 28.Februar 2025

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      Herb Doe
      John Doe Geschrieben am 17.Juni 2025

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      John Doe
      Walt Doe Geschrieben am 01.Mai 2025

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      Walt Doe
      Jane Doe Geschrieben am 19.Juni 2025

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      Jane Doe

      Standardüberschriften

      Dieses sind Textbeispiele für diverse Überschriften mit Anpassung an die Schriftgröße eines verwendeten Stils.

      h1 (28px im Standardstil vorgegeben)

      h2 (23px im Standardstil vorgegeben)

      h3 (18px im Standardstil vorgegeben)

      h4 (15px im Standardstil vorgegeben)

      h5 (12px im Standardstil vorgegeben)


      Überschriften mit eigenen 'title'-Klassifizierungen

      Dieses sind Textbeispiele für diverse Überschriften mit eigener Anpassung an die Schriftgröße.

      h1 class title (60px)

      h2 class title (50px)

      h3 class title (40px)

      h4 class title (30px)

      h5 class title (20px)

      Zitatbox

      Dieses Zitat ist nur ein Beispiel mit eigenen Textinhalt.

      Das ist ein Zitat (quote) mit vergrößerten Textinhalt (130%)

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rhoncus enim ex, convallis accumsan nisi blandit id. Sed consequat molestie urna, vel tempor eros dapibus id. Nunc in sapien nec lectus condimentum suscipit in at nisl. Suspendisse potenti. Suspendisse potenti. Quisque tincidunt imperdiet commodo. Nam ultricies vulputate dapibus. Vestibulum feugiat sollicitudin nisi, sit amet elementum est molestie eget. Sed arcu augue, luctus at orci id, molestie lobortis felis.

      Markierter Text (auch als 'Highlight' bekannt)

      Clock round the earhole scrumpy bit of a Jack the lad in the jacksy got a lot of brass knows bugger all about nowt grub's up, The Doctor penny-dreadful it's me peepers ridiculous have a butcher's at this darling. Das ist ein markierter Text (mark) mit Link im Textinhalt. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.

      Abbr Textlink

      Das ist ein Text mit abbr-Inhalt (abbr), beim hoovern mit dem Mauszeiger wird ein selbst festgelegter Text angezeigt. Für den mobilen Einsatz ist diese Art von Hinweisangaben nicht geeignet, es empfiehlt sich dort mit direkter Textanzeige zu arbeiten.

      Hinweisboxen

      Es gibt 4 verschiedene Hinweisboxen im Woltlab CMS (info, success, error & warning), hier sieht man diese als Beispiel eingefügt wie sie der jeweilig genutzte Stil anzeigt:

      Erfolgreich! Dieses Warnfeld kann auf eine erfolgreiche oder positive Aktion hinweisen. Das ist ein Link
      Information! Dieses Informationsfeld kann auf eine neutrale informative Änderung oder Aktion hinweisen. Das ist ein Link
      Fehler! Dieses Fehlerfeld kann auf eine gefährliche oder möglicherweise falsche Aktion hinweisen. Das ist ein Link
      Warnung! Dieses Warnfeld kann auf eine Warnung hinweisen, die möglicherweise beachtet werden muss. Das ist ein Link

      FontAwesome 6 - Icons & Brand Icons

      Mit FontAwesome werden diverse Symbole, sogenannte Icons, in Webseiten/Templates der aktuellen Woltlab Software dargestellt. Standard-Icons können in Templates relativ einfach mit dem Code

      {icon size='48' name='NAME_DES_ICON'} eingebunden werden, bei den sogenannten Brand-Icons (Symbole von Firmen/Organisationen, Social Media-Plattformen und mehr) ist aber ein anderer Code in der Woltlab Software notwendig der so aussehen sollte: {icon size='48' name='NAME_DES_ICON' type='brand'}.


      Um ein Standard-Icon festzulegen muss der Name des icon im Codeteil

      name='NAME_DES_ICON' eingetragen werden - eine Übersicht der frei verfügbaren Icons findet man HIER, die Übersicht der Brand-Icons kann HIER aufgerufen werden. Die Größe des verwendeten Icons wird im Codeteil size=48 angepasst, es können dafür folgende Pixelgrößen genutzt werden: 16, 32, 64, 96 oder 128.


      Hier ein paar optische Beispiele für die Größen der FontAwesome-Icons um sich ein besseres Bild davon machen zu können:

      Sollen FontAwesome-Symbole in reinen HTML-Seiten dargestellt werden, so muss der Code dafür etwas anders aussehen um zu funktionieren. Als Beispiel nehmen wir hier das Symbol 'user-circle'...


      Dieses ist der HTML-Standardcode ohne dem Zusatz 'solid':

      <fa-icon size='32' name='user-circle'></fa-icon> und so wird das Symbol damit dargestellt:

      ... und das ist der HTML-Standardcode mit dem Zusatz 'solid':

      <fa-icon size='32' solid='' name='user-circle'></fa-icon> und so wird das Symbol dann wie folgt angezeigt:


      Eine weitere Funktion zur Darstellung von einigen FontAwesome-Symbolen ist die Angabe ob diese 'solid' oder 'regular' dargestellt werden sollen, dieser Zusatz kann in Tempatecode sowie html genutzt werden. Auch hier wieder ein Beispiel anhand des Symbols 'user-circle'...


      Dieses ist der Standardcode ohne dem Zusatz 'solid':

      <fa-icon size="32" name="user-circle"></fa-icon> und so wird das Symbol damit dargestellt:

      ... und das ist der HTML-Standardcode mit dem Zusatz 'solid':

      <fa-icon size="32" solid='' name="user-circle"></fa-icon> und so wird das Symbol dann wie folgt angezeigt:

      Dieses ist eine Tabelle mit Seitentext linksseitig (h2)

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


      Duis molestie tortor non elit hendrerit, eget volutpat risus vulputate. Nulla sollicitudin condimentum interdum. Praesent et odio arcu. Aliquam et molestie quam. Sed mattis ex at congue rutrum. Praesent luctus neque scelerisque, ullamcorper risus eget, porttitor risus. Duis sed tortor vitae magna cursus interdum et quis quam. Maecenas sed pharetra sapien. Ut luctus aliquet commodo. Integer lorem augue, tristique et lacinia sed, eleifend pretium mauris. Etiam cursus et ligula a ornare. Aenean facilisis vel eros eu tristique.


      Proin cursus faucibus nunc, sit amet scelerisque tortor dignissim at. Nulla bibendum a erat et cursus. Suspendisse est mi, ornare eu ante id, condimentum sollicitudin orci. Ut nec risus fermentum, gravida libero nec, volutpat diam. Vestibulum cursus turpis nec lorem suscipit, vel cursus odio scelerisque. Nunc vitae erat sed augue lacinia blandit. Donec consequat tortor odio, ac pulvinar dolor tincidunt ut. Praesent bibendum, lorem et bibendum porta, erat erat bibendum nibh, quis porttitor neque nulla id ligula. Pellentesque porttitor efficitur eleifend.

      Tabellentitel (th) Tabellentitel verlinkt (th)
      Fülltext der Zelle #1 Zahl 50,000.00
      Fülltext der Zelle #2 Zahl 10,000.00
      Fülltext der Zelle #3 Zahl 85,000.00
      Fülltext der Zelle #4 Zahl 56,000.00
      Fülltext der Zelle #5 Zahl 98,000.00

      Ein wenig rechtliches zum Schluss muss auch mal sein ...

      Hier gibt es zum Schluss auch noch mal etwas Lektüre Betreff diverser Lizenzen mit der bitte diese zu beachten und vor allen: Bitte respektiert andere Personen die ihr Wissen kostenlos an andere Nutzer weitergeben und missbraucht nicht diese Vorlage für eine eigene Bereicherung.


      Vielen Dank für das Verständnis!

      P.S.: Dieser Block darf bei Nutzung der Startseitenvorlage natürlich entfernt werden.

      Powerstylez.de - Lizenzbestimmungen kostenlose Erweiterungen / Anleitungen

      Angebotene, kostenlose Erweiterungen / Anleitungen unterliegen dem geistigen Eigentumsrecht von Powerstylez.de/Powerstylez.com und dürfen nicht ohne Genehmigung auf eigenen oder anderen Plattformen kostenlos, kostenpflichtig oder als sogenannte "Warez" angeboten werden (auch nicht auszugsweise). Es ist untersagt diese Erweiterungen in fremden kostenpflichtigen oder kostenlos angebotenen Stilangeboten zu verwenden.


      Angebotene, kostenlose Erweiterungen / Anleitungen dürfen für die eigene Verwendung optisch sowie codebasiert angepasst werden, das evtl. enthaltene Copyright darf nicht verändert, verdeckt oder entfernt werden.


      Mitgelieferte Dateien wie z. Bspl. Photoshopvorlagen dürfen nicht auf eigenen oder anderen Plattformen kostenlos, kostenpflichtig oder als sogenannte "Warez" angeboten werden.


      MIT Lizenz Sheet Slider

      *sheetslider - v2.2.0 *

      * https://github.com/sachinchoolur/lightslider *

      * Copyright (c) 2016 zkreations; Licensed MIT *


      Hiermit wird unentgeltlich jeder Person, die eine Kopie der Software und der zugehörigen Dokumentationen (die "Software") erhält, die Erlaubnis erteilt, sie uneingeschränkt zu nutzen, inklusive und ohne Ausnahme mit dem Recht, sie zu verwenden, zu kopieren, zu verändern, zusammenzufügen, zu veröffentlichen, zu verbreiten, zu unterlizenzieren und/oder zu verkaufen, und Personen, denen diese Software überlassen wird, diese Rechte zu verschaffen, unter den folgenden Bedingungen: Der obige Urheberrechtsvermerk und dieser Erlaubnisvermerk sind in allen Kopien oder Teilkopien der Software beizulegen.

      DIE SOFTWARE WIRD OHNE JEDE AUSDRÜCKLICHE ODER IMPLIZIERTE GARANTIE BEREITGESTELLT, EINSCHLIESSLICH DER GARANTIE ZUR BENUTZUNG FÜR DEN VORGESEHENEN ODER EINEM BESTIMMTEN ZWECK SOWIE JEGLICHER RECHTSVERLETZUNG, JEDOCH NICHT DARAUF BESCHRÄNKT. IN KEINEM FALL SIND DIE AUTOREN ODER COPYRIGHTINHABER FÜR JEGLICHEN SCHADEN ODER SONSTIGE ANSPRÜCHE HAFTBAR ZU MACHEN, OB INFOLGE DER ERFÜLLUNG EINES VERTRAGES, EINES DELIKTES ODER ANDERS IM ZUSAMMENHANG MIT DER SOFTWARE ODER SONSTIGER VERWENDUNG DER SOFTWARE.