The base idea of the J1 Theme is to give all people a toolset at their hands to create a website with no need to start by web development or web design from the beginning. A website based on J1 is using configurable build-in blocks, modules and apps. As a result, the process to generate HTML code from your content is done automatically and allows you to concentrate on what truly matters: Your Content.
Find with the following section what banner and panel elements are available with J1. Banner and panel elements are building blocks typically used on the home page (landing page) presenting to your audiance what contents, products or services are available.
Banner
Building blocks of type banner are more simple elements to present base information of a website like the Teaser Banner or provide structuring elements like a Divider Banner or image contents like Image Banner or Parallax Banner to enrich text-based content on the home page.
| The setup data for banner and panel elements consists in two parts; the:
Find for the following examples the block configuration followed by the placement configuration for the layout |
Teaser Banner
A Teaser Banner should be understood as an introduction element to give an overview of the contents of a website. Additionally, a button row can be placed to point your readers directly to important content pages or other functionality.
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/banner.yml (excerpt)teaser:
# --------------------------------------------------------------------------
# HOME Teaser Banner
#
- name: Home Teaser Banner
banner:
enabled: true
id: home_teaser_banner
comment: Top teaser shown on home page
type: teaser
badges: false
icon_family: MDI
properties: mt-3 mb-9
cards:
- name: Teaser Content
card:
enabled: true
width: 12
type: text
title: Jekyll One Template
translate_title: notranslate
tagline: <b>powerful modern static websites</b>
description_properties: mt-3 mb-3
description: >
<p class="dropcap">
Jekyll One is a full-featured template for Jekyll to
create modern dynamic websites. J1 provides creative
people with a rich toolset to build great sites and
easy-to-use project management to simplify the build
and deployment processes.
</p>
<p>
J1 meets Jekyll and Bootstrap and makes a lot of friends.
The template system combines the best free software for
the Web. Jekyll One Template is OpenSource and the modules
included are free to use as well. No license issues for
private or professional use.
</p>
<p>
Explore what's possible if you go for static websites.
</p>
buttons:
- name: Roundtrip
button:
enabled: true
id: roundtrip
translate: notranslate
title: Roundtrip
tagline: learn top features
class: btn btn-xl btn-primary text-uppercase text-left mr-2 mb-2
style: "min-width: 270px"
icon: briefcase-search-outline
icon_color:
icon_size: 3x
href: /pages/public/learn/roundtrip/present_images/
target:
...Placement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# TEASER banner
#
- lane:
enabled: true
id: home_teaser_banner
region: body-main
type: async
properties: elevated-z0Divider Banner
Divider banners are pure decorative element for structuring a page by placing line-based delimiters.
Divider Banner
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/banner.yml (excerpt)divider:
# --------------------------------------------------------------------------
# DIVIDER properties
#
- name: Divider Banner 1
banner:
enabled: true
id: divider-1
comment: Divider Banner 1
type: divider
...Placement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# DIVIDER banner
#
- lane:
enabled: true
id: divider-1
region: body-main
type: async
properties: mt-4 mb-4Image-based Banners
Image based banners are decorative elements as well to add image content in between of mainly text-based content.
Image Banner
Places an configurable image (full width).
Image Banner
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/banner.yml (excerpt)image:
# --------------------------------------------------------------------------
# home_image_banner
#
- name: Home Image Banner
banner:
enabled: true
id: home_image_banner
comment: Image banner shown on home page
type: image
properties: mt-6 mb-6
image:
gridify: false
height: 450
justify: true
brightness: 80
opacity: false
picture: /assets/images/modules/attics/ideas-start-here-1920x1280.jpgPlacement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# IMAGE banner
#
- lane:
enabled: true
id: home_image_banner
region: body-main
type: asyncParallax Banner
Places an image (full width) with a parallax effect. Additionally, a quotation text is configurable and placed centered on top of the image.
Parallax Banner
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/banner.yml (excerpt)parallax:
# --------------------------------------------------------------------------
# home_parallax_banner
#
- name: Home Parallax Banner
banner:
enabled: true
id: home_parallax_banner
comment: Main parallax banner shown on home page
type: parallax
properties:
cards:
- name: Quote settings
card:
enabled: true
type: quote
cite_text_size: 300%
cite_text_quotes: false
cite_text: >
<strong>
<span class="text-primary">Making is</span>
<span class="text-light">like Wanting, <br> but even</span>
<span class="text-primary">Better</span>
</strong>
text_color: "#E0E0E0"
gridify: true
size_y: 450
darken: 6
background_image: /assets/images/modules/attics/ideas-start-here-1920x1280.jpgPlacement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# PARALLAX banner
#
- lane:
enabled: true
id: home_parallax_banner
region: body-main
type: async
properties: mt-4 mb-4Panels
Building blocks of type panel are complex elements to present detailed information of a website.
Intro Panel
Fully configurable display element, mainly used on landing pages, to give an overview on the services provided by the website.
Intro Panel
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/panel.yml (excerpt)intro:
- name: Home Intro Panel
panel:
enabled: true
id: home_intro_panel
comment: Home Intro Panel
type: intro
animate: false
properties: mt-5 mb-5
title: All in One
title_translate: notranslate
tagline: top features
description_properties: mt-3 mr-3 mb-3
description: >
<p class="dropcap">
People quite often ask if static websites make sense
for anything beyond a one-page website. Some others see in
static websites the stone age of the World Wide Web. What's
about static websites today? What's achievable?
</p>
<p>
This board highlights top features, which make static webs
not only an option, but an attractive method to create fast,
secure, and sophisticated websites for many use cases.
</p>
cards:
- name: Tools
card:
enabled: true
type: text
title: Tools
title_translate: notranslate
tagline: J1 Theme
icon: tools
icon_family: MDI
icon_size: 3x
icon_color:
text: >
<p class="dropcap mt-3">
Current Technology and Design. Excellent performance in running
a website. Use Jekyll One to present your content at its best.
</p>
buttons:
- name: Read More
button:
type: text
text: Make your Web Site unique
class:
icon:
icon_size:
icon_color:
href: /pages/public/panels/intro_panel#current-technology
...Placement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# INTRO panel
#
- lane:
enabled: true
id: home_intro_panel
region: body-main
type: async
properties: elevated-z0Service Panel
Complex, but fully configurake display element (mainly used on landing pages) to give a detailed inside view on the services provided by the website.
Service Panel
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/panel.yml (excerpt)service:
- name: Home Service Panel
panel:
enabled: true
id: home_service_panel
comment: Home Service Panel
type: service
scroller: true
properties: mt-5 mb-5
title: Jekyll One
tagline: featured template for jekyll
description_properties: mt-3 mr-3 mb-3
description: >
<p class="dropcap">
People quite often ask if static websites make sense for
anything beyond a one-page website. Some others see in
static websites the stone age of the World Wide Web.
What's about static websites today? What's achievable?
</p>
<p>
This board highlights top features, which make static webs
not only an option but a state-of-the-art technology to create
fast, secure, and sophisticated websites for many use cases.
</p>
<ul>
<li>
Current Technology and Design. Excellent performance on all devices.
</li>
<li>
Fully Responsive. Best results on PCs, Tablets, and SmartPhones.
</li>
<li>
Start in no time. No programming is needed using Jekyll One.
</li>
</ul>
cards:
- name: General Features
card:
enabled: true
id: card_1
icon: globe-model
icon_family: MDI
icon_size: mdi-6x
icon_color: md-white
href: /pages/public/features/general_features/
title: Jekyll One
tagline: General Features
header_translate: notranslate
text: >
<p class="dropcap mt-3">
Current software counts. Excellent tools in their latest versions
make the rocket engine for each and every website. Jekyll One
is using current software in their latest versions. All of them
are OpenSource and free to use. No license issues for private or
professional use.
</p>
<p>
The base of J1.
</p>
services:
- name: Platforms
service:
id: A1
description: >
<p>
The template system J1 is based on the <i>Ruby</i> language of version
2.x. For sure, not the latest language version for <i>Ruby</i> but the
supported platform for the latest <i>Jekyll</i> software.
</p>
<p>
Websites created by Jekyll One are projects managed by NodeJS. The
built-in script engine provided by the package manager npm of NodeJS
simplifies the management of J1 projects a lot. Well-known commands
typically used to manage software projects are at your fingertips.
Easy to learn, easy to remember. Commands support creators to
concentrate on the content.
</p>
<p>
Not get lost in project management.
</p>
<p>
<i class="mdi mdi-24px md-gray ml-3 mr-2 mdi-language-ruby"></i>
Ruby 2.7 <br />
<i class="mdi mdi-24px md-gray ml-3 mr-2 mdi-language-ruby"></i>
Jekyll 4.3 <br />
<i class="mdi mdi-24px md-gray ml-3 mr-2 mdi-nodejs"></i>
NodeJS 14.x <br />
</p>
title: Platforms
href: "/pages/public/features/general_features/#platforms"
...Placement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# SERVIVE panel
#
- lane:
enabled: true
id: home_service_panel
region: body-main
type: async
properties: elevated-z0Plan Panel
Displays a fully configurable pricing plan. For commercial use or for collecting donations, e.g. via GitHub Sponsors.
Plan Panel
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/panel.yml (excerpt)plan:
- name: Home Plan Panel
panel:
enabled: true
id: home_plan_panel
comment: Plan Panel
type: plan
scroller: false
properties: mt-5 mb-5
plan_details_page: /pages/public/plans/plan_details/
provider: Github
account: daattali
title: J1 Plans
title_translate: notranslate
tagline: your way
description_properties: mt-3 mr-3 mb-3
description: >
<p class="dropcap">
Github Sponsores support to invest in the open source
projects you like to use or for businesses: you depend on.
Contributors are working behind the scenes to make open
source better for everyone — give them the help and
recognition they deserve.
</p>
<p>
Fund our project that make up your web site easy to manage
for excellent performance, reliability, and stability.
</p>
cards:
- name: Starter
card:
enabled: true
recommended: false
name: Starter
name_translate: notranslate
price:
amount: 0
period: month
currency: $
benefits:
- benefit: Use lifetime at no costs
- benefit: Base modules included
disbenefits:
- disbenefit: No access to JS and CSS sources
- disbenefit: No early access to latest versions
- disbenefit: No access to Hotfixes and Prereleases
- disbenefit: No extended modules available
- disbenefit: No support offered
- disbenefit: No customized Template GEMs
buttons:
- name: Select
id: starter-plan
translate: notranslate
title: Select
href:
tier_id: plan_details_page
target: blank
...Placement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# PLAN panel
#
- lane:
enabled: true
id: home_plan_panel
region: body-main
type: async
properties: elevated-z0News Panel
The news panel displays a configurable number of available posts. The panel is a previewer for most recent posts provided by a website.
News Panel
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration from
~/_data/blocks/panel.yml (excerpt)news:
- name: News Panel
panel:
enabled: true
id: home_news_panel
comment: Home News Panel
type: news
category_blacklist: [ posts, public, private, protected, featured, series ]
properties: mt-5 mb-7
title: Latest News
tagline: blog articles
description_properties: mt-3 mr-3 mb-3
description: >
<p class="dropcap mb-4">
Explore the blog and find interesting articles around Jekyll and
website creation processes in general. And this blog is an excellent
example of how J1 and Jekyll can be used for blogging.
</p>
cards:
- name: Recent Posts
card:
infinite_scroll: true
animate: fadeInLeft
block: card-list
num_per_row: 2
max_posts: 2Placement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# NEWS panel
#
- lane:
enabled: true
id: home_news_panel
region: body-main
type: async
properties: elevated-z0Custom Content
Beside alreday existing block elements like banner and panel blocks, custom content elements can be used.
Custom Panel
Configuration
Find the block configuration followed by the placement setup for the layout home.
Block Configuration taken from
~/index.htmlaccordion:
debug: false
name: custom_panel
id: bs5_accordion
header:
title: Custom Panel
tagline: creating dynamic content
description: >
<p class="dropcap">
This is an example for a Custom Panel based on Bootstrap V5. The example
code for the <b>dynamic content</b> is taken from the Bootstrap V5 Doc
pages at:
</p>
<a class="ml-3 mb-5"
href="https://getbootstrap.com/docs/5.2/components/accordion/"
target="_blank" rel="noopener noreferrer">
Accordion · Bootstrap v5.2
</a>
elements:
- element:
expanded: true
title: "Accordion Item #1"
content: >
<strong>This is the first item's accordion body.</strong> It is
shown by default, until the collapse plugin adds the appropriate
classes that we use to style each element.
These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>,
though the transition does limit overflow.
...Placement from
~/_data/layouts/home.yml# ------------------------------------------------------------------------------
# ~/_data/layouts/home.yml
# Configuration data to specify the (HTML) Layout of all content
# pages of type HOME placed by the content loader
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2023 Juergen Adams
#
# J1 Theme is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
#
# ------------------------------------------------------------------------------
# Layout configuration settings
#
lanes:
# ----------------------------------------------------------------------------
# CUSTOM content
#
- lane:
enabled: false
id: custom_content
region: body-main
type: sync
base: _includes/custom
path: templates
file: bs5_accordion.htmlWaves
Block elements like footers, banners, and panels are typically rectangular in geometry. To make block elements appear less angular, shapes can be used to surround them.
Intro Panel using top and bottom shapes
Wave Configuration for the Intro Panel
wave:
top:
enabled: false
height: 3
style: wave-1
color: "#dcdcdc"
background_color: "#f5f5f5"
transform: false
bottom:
enabled: false
height: 3
style: wave-4
color: "#dcdcdc"
background_color: "#f5f5f5"
transform: rotate| Waves can enclose block elements by placing a shape on the top and (or) at the bottom. |
| Propertiy | Values | Description |
|---|---|---|
|
| Enables (show) or disables (hide) a shape. |
| Value out of | Scales the height of a shape. |
|
| Select a specific wave (shape). |
| RGB value | (Foreground-)Color of the wave element. |
| RGB value | Background color of the wave element. |
|
| Transform a wave element. To use a wave at the bottom, the default style may needed to be tranformed by rotating or flipping. |
Shapes
For wave elements, four different shapes are available. Using different sizes or transformations like rotate and flip, multiple variations of shapes can be created.
| Wave | Height | Example |
|---|---|---|
| 5 | |
| 5 | |
| 5 | |
| 5 |
Sizes
Waves are scalable in height. Find below some examples of scaled shapes.
| Wave | Height | Example |
|---|---|---|
| 1 | |
| 3 | |
| 5 | |
| 9 |
Rotate and Flip
To place a wave at the bottom of a block element, the default shape may needed to be transformed by rotating or flipping.
| Wave | Transform | Example |
|---|---|---|
| none | |
| rotate | |
| flip-x | |
| flip-y |