Font Size:

WoltLab Suite 5 Demo

The Powerstylez.com demo forum

Would you like access to our WSC demo forum? Then please get in touch using the contact form with us to verify yourself as a customer of Woltlab with a valid license (link to the user profile in the Woltlab forum) - you will then be sent the access data after verification.
Welcome to the demo homepage version 1.4!

This page, designed and implemented by Gino Zantarelli, shows you a few examples in pure HTML (with partial Java Script support, which is already directly integrated!) how you could create a start page. Unfortunately, the HTML formatting does not allow the integration of functions of the Woltlab CMS directly, but you can integrate self-created boxes as standard.


Another small disadvantage is the ignoring of the current breakpoints for mobile views from Woltlab CMS (which cannot be used directly on this page in the style container), only the breakpoints with pixel information (as known from the older WBB 4) are active. The newer breakpoints for the created page can be addressed via the CSS definition of a style or the cross-style CSS, all examples on this page have already been optimized for mobile display.


Style adjustments for different styles:

Various CSS adjustments can be made in the respective CSS definition of the style to be used, the content is set in a container with ID

<div id="GZcustompagecontainer"> as a reference.


Where can I adjust the main colors and CSS formatting?

The adjustments can be edited directly in the source code of this page in the lower "Style" area. The markings I have set such as E.g.

/*Hintergrundfarbe*/ or /*Umrandung Textinhalt*/ the codes to be adapted should be found relatively quickly.


NEW: If the partially transparent background in the HERO box is to be adjusted, you can find the adjustment for light and dark images under the code block

#GZcustompagecontainer .herobg .col-md-12.


The specified color codes can also be overwritten for different styles via the CSS definition of a style or the cross-style CSS, but then a

{MYCODE !important;} be set to force this!


Where can I find the block types to be edited?

Since this page uses various blocks with different content, a marker is built into the source code such as E.g.

<-- Start Herobild --> and <-- Ende Herobild --> , the blocks should be easy to find ...

Hello ... I'm a 'Hero' H1 title text!

This is the 'Subtitle' text of the hero picture and can be adjusted as required in the created page. Draw attention to the content of your CMS or forum here - this is important for any visitors.

Scrollpoints (Jump labels)

These buttons are linked with so-called scroll points, if you want to go quickly to a certain section, the website jumps to the marked position.You can insert IDs, e.g. E.g.

data-id="anchor1" in the main link and then the code <div id="anchor1"></div> inserted in the content address this scroll point, consecutive numbers must be used for various points (anchor1, anchor2, anchor3 ...)


This is an H2 title

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 <<<<<<<<<<<<
This is an H6 boxing title

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

A box title with bold 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.

A box title with slanted 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.

A box title with web link

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.

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

This is an H2 title

Here is the 'Subtitle' to show a description ...

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.


Active Button

This is an H2 title

Here is the 'Subtitle' to show a description ...

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.


Active Button

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

Picture slider (Sheet Slider)

This is the Sheet Picture slider (» Sheet Slider Web page) with various title displays as well as links, forwards / backwards and pause functions. A maximum of 10 Pictures can be integrated.


I am an H1 title text!

Here is the subtitle to show a description ...

... and I'm an H2 title text!

Here is the subtitle with web link

Image with web link

Forwards by clicking on the picture to Unsplash.com

I am an H3 title text!

Here is the subtitle to show a description ...

I am an H4 title text!

Here is the subtitle to show a description ...

Image with web link

Forwards by clicking on the picture to 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 <<<<<<<<<<<<

This is an H2 title (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 <<<<<<<<<<<<

Pricing tables (responsive)

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.

  • Basic
  • $ 9.99 / month
  • 10GB Storage
  • 10 Emails
  • 10 Domains
  • 1GB Bandwidth
  • Sign Up
  • Premium
  • $ 29.99 / month
  • 50GB Storage
  • 50 Emails
  • 12 Domains
  • 2GB Bandwidth
  • Sign Up
>>>>>>>>>>> Scrollpoint 8 <<<<<<<<<<<<

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

    Changes with repeated call Details
  • Picsum Image

    Is there ... here: https://picsum.photos Details
  • Picsum Image (GS)

    Is there ... here: https://picsum.photos Details
  • Picsum Image

    Is there ... here: https://picsum.photos Details
  • Picsum Image

    Is there ... here: https://picsum.photos Details
  • Nice picture

    ...by unknown photographer Details
>>>>>>>>>>> Scrollpoint 9 <<<<<<<<<<<<

0

lines of CSS code written

0

liters of drinking strong coffee

0

days & nights programmed

0

positive reviews from customers

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

This is an accordion menu

Here is the subtitle to show a description ...

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

    That is an h2 title of the '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.

    That is an h2 title of the '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.

    That is an h2 title of the '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 12 <<<<<<<<<<<<

    This is our Team!

    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.

    Jane Doe

    Head of Development

    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.

    John Doe

    Creative Director

    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.

    Walt Doe

    Sales Managment

    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.

    Mary Doe

    Head of Marketing

    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.

    >>>>>>>>>>> Scrollpoint 13 <<<<<<<<<<<<

    Comment boxes

    These boxes are intended to represent comments, NO data is retrieved from the software used since this example only contains HTML.

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

    Headlines

    These are the text examples for various headings, once as a 'normal' version and also as 'title' classifications.

    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)

    Quote box

    This is a quote with enlarged text content (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.

    Highlighted text (also known as 'highlight')

    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. This is a marked text with link in the text content. Bog off cor blimey' chinwag biscuits picalilly, gutted blummin' a cuppa.

    Abbr text link

    This is a text with abbr content (abbr), when hovering with the mouse pointer, a self-defined text is displayed. This type of information is not suitable for mobile use, it is advisable to work there with direct text display.

    Notice boxes

    There are 4 different information boxes in the html system, here you can see them as an example:

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

    Social Links with animation (pulse)