Tutorial - Introduction

Welcome to showcase NextGen – the django cms of Hatraco GmbH. Here you can find all the elements that are available to create cms pages in our online shops.

Important

You are welcome to use this tutorial as a "playground". However, please copy this page before. Cause we are constantly working on this tutorial. Thank you very much. Have fun!

Contact

Hatraco GmbH
Peutestraße 22a
D-20539 Hamburg

phone: +49 40 226307000
email: tkoenig@hatraco.de and hpeters@hatraco.de


Tutorial - Table of contents


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

  • Template selection

    Which template do you need? Edit background colors use meta tags, define an image for social media and extra css classes etc.

  • CMS icons legend

    Overview of the used icons in structure mode view.

  • Showcase grid

    How you specify the container width and why you have to always think: "Do I have 100%?"

  • Showcase container

    Here you specify spaces, show in side navigation, full size or toggle etc.

  • Fullsize container

    When it makes sense to display a container on the entire page?

  • Parallax container

    Display of plugins on parallax container. Which image size do you need?

  • Toggle function

    The toggle method toggles between hide and show for the selected elements

  • Placeholder plugin

    How to use the placeholder plugin.

  • Text plugin

    Text format, stil, entry fields - how to use this

  • Accordion

    This table of contents is example of an accordion – use this for a simple list or facts (if you need more functionality use the toggle)

  • Image plugin

    To position headlines, subheadlines and description field on different position with images – also the description field on background images

  • Image sizes

    We define image sizes and you will find Adobe Photoshop templates to download

  • Image animation

    Move your pictures through various animations

  • Newsletter plugin model

    How to use this newsletter incredible plugin

  • Imagemap plugin

    This special plugin needs to have an extra tutorial

  • Slideshow

    Fade or slide, functions and connection with shop items

  • Video Plugin

    Include Vimeo or Youtube videos in a special container – this plugin is under constraction

  • Contactform plugin

    How to use this newsletter incredible plugin

  • Product plugin

    Select a product from shop system (administrator permissions required)

  • Product plugin slideshow

    Like product plugin but with a slide or fade effect (administrator permissions required)

Tutorial - Template (selection)


Introduction

Before you start you should think about wich template do you need because: 
if you change the template afterwards the entire content can be lost!

Available Templates

Default CMS Content Template.

Use this template for simple cms pages like help, imprint, data privacy etc.

Showcase nextgen.

You can use this for the start page and any other sites who need showcase plugins.

Important
If you create subpages you don't need to select a template. Just leave this as "Inherit the template of the nearest ancestor".

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 disabled

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


Example for 25 % offset - 50% Image

Example for 25 % offset - 50% Image -

Example for 33% Offset - 66% Size

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.

Example for image in offsetted parallex

Example for image in offsetted parallex -

Offset example 75 %

Offset example 75 % -

Container Plugin - example fullsize


779-2000x750-grayscale_yfTBPlm

Container Plugin - example parallax fullsize content


Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget!

Lored de quantum -

Lored de quantum

Idelarum -

Idelarum

Kamoriumdexes -

Kamoriumdexes


Container Plugin - example parallax grid



Container Plugin - example toggle


Container Plugin - example toggle 01

At vero eos et accusam

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Container Plugin - example toggle 02

Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Container Plugin - example toggle 03

Sed fringilla mauris

Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.

placeimg_640_480_grayscale_animals_cOeNNSh

Tutorial - Placeholder Plugin


Introduction

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

Container Plugin - example placeholder


Between this two paragraphs we use a 100% placeholder for more vertical spacing.

 

Between this two paragraphs we use a 100% placeholder for more vertical spacing.

Between this two paragraphs we use a 25% placeholder for more horizontal spacing.

 

Between this two paragraphs we use a 25% placeholder for more horizontal spacing.

 

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 TitleSize, 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


H2: Showcaseplugin Headline

H3: Showcaseplugin Subheadline

 

Text Plugin - CKEditor (Format)


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

A: Button-Small

A: Secondary-Button

A: Secondary-ButtonLarge

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

H1 - Text is large

H2 - Text is large

H3 - Text is large

H4 - Text is large

H5 - Text is large
H6 - Text is large

P - Text is large

H1 - Text is medium

H2 - Text is medium

H3 - Text is medium

H4 - Text is medium

H5 - Text is medium
H6 - Text is medium

P - Text is medium

H1 - Text has upper case

H2 - Text has upper case

H3 - Text has upper case

H4 - Text has upper case

H5 - Text has upper case
H6 - Text has upper case

P - Text has upper case

 

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, ItalicUnderline, Strike, Subscript2, Subscript2

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 TitleSize, 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 TitleSize, 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.


Image sizes - Image Plugin container


 - 25% - Container

25% - Container

 - 25% - Container

25% - Container

 - 50% - Container

50% - Container

 - 25% - Container

25% - Container

 - 75% - Container

75% - Container

 - 33% - Container

33% - Container

 - 66% - Container

66% - Container

 - 100% - Container

100% - Container


Image sizes - Image Plugin container (fullsize)


25% - Container Fullsize -

25% - Container Fullsize

25% - Container Fullsize -

25% - Container Fullsize

50% - Container Fullsize -

50% - Container Fullsize

25% - Container Fullsize -

25% - Container Fullsize

75% - Container Fullsize -

75% - Container Fullsize

33% - Container Fullsize -

33% - Container Fullsize

66% - Container Fullsize -

66% - Container Fullsize

100% - Container Fullsize -

100% - Container Fullsize


Image size - parallax fullsize


100% - Container parallax fullsize


Image size - parallax grid


100% - Container parallax grid

Tutorial - Image Plugin (text and image)


Headline 01

Subheadline 01

  • Headline/Subheadline, Description, Image
Headline 01 - Subheadline 01

Headline 02

Subheadline 02

Headline 02 - Subheadline 02
  • Headline/Subheadline, Image, Description
Headline 03 - Subheadline 03

Headline 03

Subheadline 03

  • Image, Headline/Subheadline, Description
  • Description, Image, Headline/Subheadline
Headline 04 - Subheadline 04

Headline 04

Subheadline 04

Tutorial - Image Plugin (text on background image)


Headline 05 - Subheadline 05

Headline 05

Subheadline 05

  • Backgroundimage plus Headline/Subheadline, Description on top
Jetzt anschauen
Headline 06 - Subheadline 06

Headline 06

Subheadline 06

  • Backgroundimage plus Headline/Subheadline on top, Description on bottom
Headline 07 - Subheadline 07

Headline 07

Subheadline 07

  • Backgroundimage plus Headline/Subheadline, Description on bottom
Jetzt ansehen
Headline 08 - Subheadline 08

Headline 08

Subheadline 08

  • Backgroundimage plus Description on top, Headline/Subheadline on bottom
Headline 09 - Subheadline 09

Headline 09

Subheadline 09

  • Backgroundimage plus centered content
Jetzt ansehen

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)


image-animation_rrFx8Sz_YBqxdVm
image-animation-settings_mkupABr_9mt57zR
image-animation_67ViGrb_KCGOXnD

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 TitleSize, Offset and Alignment
  4. add your Newsletter Plugin Model
    1. description
    2. description
  5. save the plugin container

Newsletter Plugin Model - example


184-692x692-grayscale_b8xHBcI_sIORHj0

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 TitleSize, 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 TitleSize, 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


563-2000x750-grayscale_c61mD9w
237-2000x750-grayscale_hf8bXbm
935-2000x750-grayscale_L2r7vkc
1084-2000x750-grayscale_67sfUhT
43-2000x750-grayscale_0HrV5KO
829-2000x750-grayscale_voHiRbv

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 TitleSize, Offset and Alignment
  4. select your Content
    1. choose the Service plattform
    2. only paste the video id and (e.g. https://www.youtube.com/embed/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 TitleSize, 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 TitleSize, 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 TitleSize, 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