Start

Willkommen auf der Demo-Startseite Version 1.1!

Diese Seite, gestaltet und umgesetzt von Gino Zantarelli, zeigt Ihnen ein paar Beispiele in reinem HTML (mit teilweiser Java Script-Unterstützung, welche schon direkt eingebunden ist!) wie man eine Anfangsseite realisieren könnte. Leider lässt sich durch die HTML-Formatierung eine Einbindung von Funktionen des Woltlab-CMS nicht direkt realisieren, man kann aber selbst erstellte Boxen Standardmäßig 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 vom älteren WBB 4 bekannt) 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 schon optimiert.


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 in einem Container mit ID

gesetzt.


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.


Über die CSS-Definition eines Stils oder das Stilübergreifende CSS können die vorgebenen Farbcodes auch für verschiedene Stile überschrieben werden, es muss dann aber im Code ein {MEINCODE !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. und , die Blocks sollten damit leicht zu finden sein...

Hallo ... ich bin ein 'Hero' H1-Titeltext!

Dieses ist der 'Subtitle'-Text des Herobildes 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 evtl. Besucher.

Scrollpoints (Sprungmarken)

Diese 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 mit einfügen von ID´s, z. Bspl. data-id="anchor1" im Hauptlink und dann im Content eingefügten Code

diesen Scrollpoint ansprechen, es müssen laufende Nummern verwendet werden für diverse Punkte (anchor1, anchor2, anchor3 ...)


Dieses ist ein H2-Titel

Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. 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, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.


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

>>>>>>>>>>> Scrollpoint 2 <<<<<<<<<<<<
Dieses ist ein H6-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 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.

>>>>>>>>>>> Scrollpoint 3 <<<<<<<<<<<<

Dieses ist ein H2-Titel

Hier steht der 'Subtitle' um eine Beschreibung anzuzeigen...

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.


Aktiver Button

Dieses ist ein H2-Titel

Hier steht der 'Subtitle' um eine Beschreibung anzuzeigen...

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.


Aktiver Button

>>>>>>>>>>> Scrollpoint 4 <<<<<<<<<<<<

Bilderslider (Sheet Slider)

Das ist der Sheet Bilderslider (» Sheet Slider Webseite) mit diversen Titelanzeigen sowie Links, Vor/Zurück und Pausenfunktion. Es können maximal 10 Bilder eingebunden 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 H4-Titeltext!

Hier steht der Untertitel um eine Beschreibung anzuzeigen...

Bild mit Weblink

Leitet bei Klick auf das Bild weiter nach Unsplash.com
>>>>>>>>>>> Scrollpoint 5 <<<<<<<<<<<<
Column 1

I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.

Column 2 (center)

I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.


Button

Column 3

I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.

>>>>>>>>>>> Scrollpoint 6 <<<<<<<<<<<<

Dieses ist ein H2-Titel (right)

Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. 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, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.


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

>>>>>>>>>>> Scrollpoint 7 <<<<<<<<<<<<

Portfolio

Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. 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, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.


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

  • Random Image

    Wechselt beim wiederholten Aufruf Details
  • Picsum Image

    Gibt es hier: https://picsum.photos Details
  • Picsum Image (GS)

    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
  • Schönes Bild

    von unbekannten Photograf Details
>>>>>>>>>>> Scrollpoint 8 <<<<<<<<<<<<

0

Zeilen CSS-Code geschrieben

0

Liter starken Kaffee getrunken

0

Tage & Nächte programmiert

0

positive Bewertungen von Kunden

>>>>>>>>>>> Scrollpoint 9 <<<<<<<<<<<<

Das ist ein Accordion Menu

Hier steht der Untertitel um eine Beschreibung anzuzeigen...

  • Section 1
  • I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please. We don't need a backup, it never goes down! can you make it stand out more? so can you make it look more designed so i know you've made thirty iterations but can we go back to the first one that was the best version nor the target audience is makes and famles aged zero and up, i was wondering if my cat could be placed over the logo in the flyer yet I think we need to start from scratch. Make it sexy something summery; colourful. This is just a 5 minutes job is this the best we can do, and make it look like Apple, for i love it, but can you invert all colors? and can you make it more infographic-y. It's great, can you add a beard though is this the best we can do could you rotate the picture to show the other side of the room? and could you solutionize that for me. The hair is just too polarising. What is a hamburger menu other agencies charge much lesser it looks a bit empty, try to make everything bigger can you put "find us on facebook" by the facebook logo? for is this the best we can do, I know somebody who can do this for a reasonable cost, so that's great, but we need to add this 2000 line essay. You can get my logo from facebook I got your invoice...it seems really high, why did you charge so much, nor doing some work for us "pro bono" will really add to your portfolio i promise. There is too much white space is this the best we can do, mmm, exactly like that, but different, the flier should feel like a warm handshake, but I know somebody who can do this for a reasonable cost, or make it pop can you rework to make the pizza look more delicious. Do less with more i love it, but can you invert all colors? can you help me out? you will get a lot of free exposure doing this other agencies charge much lesser, so we have big contacts we will promote you, nor the website doesn't have the theme i was going for. We don't need a contract, do we doing some work for us "pro bono" will really add to your portfolio i promise. Start on it today and we will talk about what i want next time . Make it look like Apple can you make it more infographic-y so try a more powerful colour theres all this spanish text on my site this was not according to brief.

  • Section 2
  • Lorem ipsum...

  • Section 3
  • You are lucky to even be doing this for us we try your eye, but can you change everything? and I know somebody who can do this for a reasonable cost, or give us a complimentary logo along with the website, nor can we barter services?. Can't you just take a picture from the internet? can't you just take a picture from the internet? make it look like Apple i was wondering if my cat could be placed over the logo in the flyer can it be more retro. The target audience is makes and famles aged zero and up i love it, but can you invert all colors? and do less with more. Can you turn it around in photoshop so we can see more of the front can you pimp this powerpoint, need more geometry patterns other agencies charge much lesser. The website doesn't have the theme i was going for I want you to take it to the next level. Doing some work for us "pro bono" will really add to your portfolio i promise we try your eye, but can you change everything?. This looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue make it original. Can you put "find us on facebook" by the facebook logo? that's great, but can you make it work for ie 2 please nor you might wanna give it another shot, for can it be more retro. We try your eye, but can you change everything? can you lower the price for the website? make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch, for I want you to take it to the next level, for start on it today and we will talk about what i want next time , for there are more projects lined up charge extra the next time, and I want you to take it to the next level, nor can my website be in english?.

    Herb Doe We are a startup can we have another option, but could you rotate the picture to show the other side of the room? it looks a bit empty, try to make everything bigger, but it's great, can you add a beard though but it's great, can you add a beard though . Remember, everything is the same or better what is a hamburger menu or needs to be sleeker, can you punch up the fun level on these icons this red is too red so there is too much white space. We are a startup it looks a bit empty, try to make everything bigger, or can my website be in english? or can you put "find us on facebook" by the facebook logo? but we are your relatives what you've given us is texty, we want sexy so make it sexy. Just do what you think. I trust you the flier should feel like a warm handshake that's great, but can you make it work for ie 2 please im not sure, try something else can you make it look more designed nor it looks a bit empty, try to make everything bigger could you move it a tad to the left. Just do what you think. I trust you it's great, can you add a beard though . There are more projects lined up charge extra the next time there are more projects lined up charge extra the next time, for can you use a high definition screenshot and could you do an actual logo instead of a font, yet I have an awesome idea for a startup, i need you to build it for me I have an awesome idea for a startup, i need you to build it for me or we are a big name to have in your portfolio. Could you solutionize that for me. We exceed the clients' expectations we are a non-profit organization, so could you move it a tad to the left it's great, can you add a beard though can you lower the price for the website? make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch or other agencies charge much lesser. Can you please change the color theme of the website to pink and purple? make the logo a bit smaller because the logo is too big can you link the icons to my social media accounts? oh and please put pictures of cats everywhere are you busy this weekend? I have a new project with a tight deadline make it sexy. Start on it today and we will talk about what i want next time we are your relatives, for make it pop for needs to be sleeker.

    >>>>>>>>>>> Scrollpoint 10 <<<<<<<<<<<<

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

    I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.

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

    I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.

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

    I know somebody who can do this for a reasonable cost could you rotate the picture to show the other side of the room? anyway, you are the designer, you know what to do, nor that's great, but we need to add this 2000 line essay yet we don't need a contract, do we but I know somebody who can do this for a reasonable cost that's great, but can you make it work for ie 2 please.

    >>>>>>>>>>> Scrollpoint 11 <<<<<<<<<<<<

    Kommentarboxen

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

    Walt Doe Posted on June 17, 2020

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

    Herb Doe
    Bob Doe Posted on June 13, 2020

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

    John Doe
    Walt Doe Posted on September 15, 2018

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

    Walt Doe
    Jane Doe Posted on September 15, 2018

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

    Jane Doe
    >>>>>>>>>>> Scrollpoint 12 <<<<<<<<<<<<

    Überschriften

    Das sind die Texteispiele für diverse Überschriften, einmal als 'normale' Version und zusätzlich als 'title' Klassifizierungen.

    h1 (70px)

    h2 (60px)

    h3 (50px)

    h4 (40px)

    h5 (30px)
    h6 (18px)

    h1 class title (70px)

    h2 class title (60px)

    h3 class title (50px)

    h4 class title (40px)

    h5 class title (30px)
    h6 class title (18px)

    Zitatbox

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

    Pommy ipsum double dutch I'm off to Bedfordshire jolly hockey sticks gobsmacked air one's dirty linen Moriarty, what a doddle rather shepherd's pie rumpy pumpy ey up. 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, jellied eels sweet fanny adams nosh the chippy ridiculous. Round our gaff down the village green have a bash meat and two veg numbskull old girl cobbles, up the duff cup of tea the dog's dinner a fiver. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.

    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 html-System, hier sieht man diese als Beispiel:

    Success! This alert box could indicate a successful or positive action. Link
    Info! This alert box could indicate a neutral informative change or action. Link
    Error! This alert box could indicate a dangerous or potentially negative action. Link
    Warning! This alert box could indicate a warning that might need attention. Link

    Social Links mit Animation (pulse)