Tutorial - Introduction

Tutorial - Table of contents

Showcase NextGen 2.0 - django content management system (is also an accordion example)

Tutorial - CMS icon legend

Introduction

Basic icons (container and plugins)

• Close container after 100%
• Container is active
• Container is inactive
• Plugin offset + 25% to 75%
• Plugin aligment top
  • default – no icon in structure mode
• Plugin aligment center
• Plugin aligment bottom

Functionality icons (container plugin)

• Fullsize container
• Container has centered content
• Parallax container
• The container title will show up in side navigation
• If the container is a toggle
• Container with background color
• Container is shown in modal
• Container size calculation is enabled

Inner spacing icons (container plugin)

• Inner spacing plus extra spacing on bottom
• Inner spacing plus extra spacing on top
• Inner spacing plus extra spacing on top and bottom
• Inner spacing only

Outer spacing icons (container plugin)

• No inner spacing plus extra spacing on bottom
• No inner spacing plus extra spacing on top
• No inner spacing plus extra spacing on top and bottom
• No spacing at all

Layout icons (image plugin)

• Headline/Subheadline, Description, Image (example)
• Headline/Subheadline, Image, Description (example)
• Image, Headline/Subheadline, Description (example)
• Description, Image, Headline/Subheadline (example)
  • We use this for images with a caption (just fill the headline)
• Image is animated (example)

Layout icons – background image (image plugin)

• Backgroundimage plus Headline/Subheadline, Description on top (example)
• Backgroundimage plus Headline/Subheadline on top, Description on bottom (example)
• Backgroundimage plus Headline/Subheadline, Description on bottom (example)
• Backgroundimage plus Description on top, Headline/Subheadline on bottom (example)
• Backgroundimage plus centered content (example)

Tutorial - Container Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and
2. select your Options
   1. Show container in modal
      1. the container is hidden on site and can show on the showcase ajax link
   2. Show link in side navigation
      1. the container title will show up in side navigation
   3. Fullsize
      1. fullsize container
   4. Center content
      1. the content will be centered in the grid
   5. Toggle
      1. toggle container
   6. Disable size calculation
      1. image size calculation in container is disabled
   7. Background Image
      1. upload an image with the right size
      2. add styles in Bg image styles if nessesary  
   8. Parallax
      1. upload an image with the right size
      2. for parallax effect, select Parallax effect on background image on the checkbox below
      3. add styles in Bg image styles if nessesary
   9. Background color
      1. add hexcode (without #) in Background color if nessesary
3. save the plugin container
4. now you can add plugins and combine them depends on your content

Tutorial - Container Plugin - additional feature: Offset

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Container Plugin - example fullsize

Container Plugin - example parallax fullsize content

Container Plugin - example parallax grid

Container Plugin - example toggle

Tutorial - Placeholder Plugin

Introduction

1. add a Showcase Container Placeholder Plugin – choose Size
2. save the plugin container

Container Plugin - example placeholder

Tutorial - Text Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Text Plugin – choose Title, Size, Offset and Alignment
4. all Content is optional but you should fill out something
   1. in the next section you will see how heading and subheading look like and how CKEditor works
5. save the plugin container

Text Plugin - Headline/Subheadline

Text Plugin - CKEditor (Format)

Text is small
Text is medium
Text is large
Text is extralarge

Headline - H1

Headline - H2

Headline - H3

Headline - H4

Headline - H5

Headline - H6

Text-normal - P
Text-bold - P
Text-italic - P
Text-underline - P
Text-line-through - P

Textlink - A

A: Link-Underline

A: Showcase Ajax Link

A: Button

A: Button-Small

A: Secondary-Button

A: Secondary-Button-Small

A: Button (Showcase Ajax Link)

Text Plugin - CKEditor (Stil)

H1 - Like-H1

H2 - Like-H1

H3 - Like-H1

P - Like-H1

H1 - Like-H2

H2 - Like-H2

H3 - Like-H2

P - Like-H2

H1 - Like-H3

H2 - Like-H3

H3 - Like-H3

P - Like-H3

Text is small

Test is medium

Text is large

Text is extralarge

Text Plugin - CKEditor (toolbar items)

Unordered list:

• I'm a list element
• I'm a list element to
• I'm a an other list element

Ordered list:

1. I'm a list element
2. I'm a list element to
3. I'm a an other list element

<hr>: HorizontalRule

Text left: JustifyLeft

Text center: JustifyCenter

Text right: JustifyRight

Bold, Italic, Underline, Strike, Subscript₂, Subscript²

Tutorial - Accordion Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Accordion Product Plugin – choose Title, Size, Offset and Alignment
4. add your Accordion items by click on + Accordion item hinzufügen
   1. type in Title and Description (see also Text Plugin - CKEditor)
   2. a good example is the table of content on this page 
5. save the plugin container
6. you can later sort your items by dragging them

Tutorial - Image Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Image Plugin – choose Title, Size, Offset and Alignment
4. select your Content
5. select an image with the right size and fill out Alt (alt-tags important for seo)
6. other Content like Headline, Subheadline, Text, Image animation, Link to shop page and CallToAction Text is optional
7. save the plugin container

Tutorial - Image sizes

Introduction

Depending on the number of images and width of container, all images in one row, whether landscape or portrait format, should import in same heigth because all images will be scaled to the same height. In this example we use 750px.

Usually we use JPG's because the file size is small and at the same time the quality high. In some cases and if necessary also a transparent PNG can be used.

To demonstrate that the images are scaled correctly, we combine images with a white circle in different columns with different widths on 25%, 33%, 50%, 75% and 100% container.

When using only one image in a row feel free of the image size, but use the minimum width (in %) of the corresponding container.

Links

• HTC24-Showcase-Image-Sizes
• Briefing-Media-Daten-v2.1

Image sizes - Image Plugin container

Image sizes - Image Plugin container (fullsize)

Image size - parallax fullsize

Image size - parallax grid

Tutorial - Image Plugin (text and image)

Tutorial - Image Plugin (text on background image)

Tutorial - Image Plugin (image animation)

Introduction

1. upload an image
2. select an animation who fits to your content

Image Plugin - example image animation (try out)

Tutorial - Newsletter Plugin Model

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Newsletter Plugin Model – choose Title, Size, Offset and Alignment
4. add your Newsletter Plugin Model
   1. description
   2. description
5. save the plugin container

Newsletter Plugin Model - example

Tutorial - Imagemap Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Imagemap Plugin – choose Title, Size, Offset and Alignment
4. select your Content
   1. choose the Service plattform
   2. or add a imagemap
5. save the plugin container

Imagemap Plugin - example

Try out – add a Imagemap Plugin

Tutorial - Slideshow Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Slideshow Plugin – choose Title, Size, Offset and Alignment
4. select your Options and Animation
   1. if you previously select Fullsize and your slider should slide and has more than for items, please select "Stretch thumbnails based on total items"
   2. if your slider fade, only one item will be displayed
5. now you can add your Slideshow items by click on + Slideshow item hinzufügen
   1. select an image with the right size and fill out Alt (alt-tags important for seo)
   2. other Content like Headline, Subheadline and Link to shop page is optional
6. save the plugin container
7. you can later sort your items by dragging them

Slideshow Plugin - example

Tutorial - Video Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Video Plugin – choose Title, Size, Offset and Alignment
4. select your Content
   1. choose the Service plattform
   2. only paste the video id and (e.g. eMiYABw8yNY)
5. save the plugin container

Video Plugin - example

Tutorial - Contactform Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Contactform Plugin – choose Title, Size, Offset and Alignment
4. add your Contactform
   1. description
   2. description
5. save the plugin container

Contactform Plugin - example

Try out – add a Contactform Plugin

Tutorial - Product Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Product Plugin – choose Title, Size, Offset and Alignment
4. select the Headline position – the product item will be under or on top of the headline
5. choose between Catalog and Custom template
6. add your Product
   1. select a Product from the online shop by cklick on magnifier
   2. other Content like Headline, CallToAction Text (default is defined) and Image comes from the selected product but you can overwrite this with special content
7. save the plugin container

Product Plugin - example

Try out – add a Product Plugin

Tutorial - Slideshow Product Plugin

Introduction

1. add a Showcase Container Plugin – choose Title, Size, Offset, Spacing and select your Options
2. save the plugin container
3. add a Showcase Container Slideshow Product Plugin – choose Title, Size, Offset and Alignment
4. select your Options and Animation
   1. select the Headline position
      1. all the items will be under or on top of the headline
   2. if your slider fade, only one item will be displayed
5. now you can add your Slideshow products by click on + Slideshow product hinzufügen
   1. select a Product from the online shop by cklick on magnifier
   2. other Content like Headline, CallToAction Text (default is defined) and Image comes from the selected product but you can overwrite this with special content
6. save the plugin container
7. you can later sort your items by dragging them

Product Slideshow Plugin - example

Try out – add a Product Slideshow Plugin