Build your homepage with Wowchemy Page Builder

Building beautiful pages is easy with Wowchemy’s widget system. No programming is required!

Loading pre-made layouts is a great way to kickstart your new homepage. Templates come with some popular Widgets preconfigured for this purpose.

Widgets empower you to fully customize your site. They display as sections on the homepage or on widget pages. Multiple instances can be added, removed, and positioned as desired.

Table of Contents

Wowchemy comes with the following widgets built-in.

Looking to build and publish a Wowchemy widget that doesn’t exist yet? Create a new widget.

  • Blank - add any elements such as an image gallery
  • Hero - encourage visitors to perform an action (CTA)
  • About - introduce yourself
  • Featurette - showcase skills or key features of a product
  • Experience - list your professional experience on a timeline
  • Accomplishments - showcase your (online learning) certificates and other achievements
  • Pages - display recent blog posts, events, and publications
  • Featured - display featured (sticky) blog posts, events, and publications
  • Contact - display your contact details, including an optional contact form and map
  • Portfolio - showcase your work or product features in a filterable portfolio
  • Tag cloud - enable visitors to discover popular topics
  • People - introduce your team members
  • Slider (carousel) - promote a lot of content in a small space

We’re full steam ahead on improving Wowchemy, and we need your help!

Using Widgets

Templates come with some popular Widgets preconfigured as homepage sections.

Delete the sections in content/home/ that you don’t need (or set active to false in their front matter) and personalize the front matter options of the sections that you wish to keep by opening them in a text editor (such as by clicking the pencil icon in your GitHub project).

The sections (widget instances) in your home/ folder can be renamed to anything you like (but use hyphens instead of spaces). Just remember to update your main menu in config/_default/menus.yaml if you have a link to the widget instance. For example, if you rename contact.md to contact-me.md, you can update the /#contact link in menus.yaml to /#contact-me.

Create a section

To add a section to the homepage, create a new Markdown file in your content/home/ folder, for example my-section.md.

Explore this page to find the widget you wish to use in your section. Then copy and paste the widget’s front matter options into your new Markdown file.

Remember to place your front matter options between a pair of triple dashes --- to represent YAML, for example:

---
# An instance of the Blank widget.
# Documentation: https://wowchemy.com/docs/page-builder/
widget: blank

# This file represents a page section.
headless: true

# Order that this section appears on the page.
weight: 1

# Section title
title: Hello

# Section subtitle
subtitle:

# Section design
design:
  # Use a 1-column layout
  columns: "1"
  # Use a dark navy background with light text.
  background:
    color: 'navy'
    text_color_light: true
---

Add any content to the body of the section here.

You can also add any common widget options documented on this page, such as title, to the front matter.

You can link a homepage section from the site menu by editing config/_default/menus.yaml and adding the filename of your section. For example, if your section is named my-section.md, reference it as "/#my-section" in the menu URL.

You can create as many instances of widgets as you wish, with each appearing in its own section.

Remove a section

If you do not require a particular widget, you can simply delete any associated files from the content/home/ folder.

To remove a navigation link from the top of the page, remove the associated [[main]] entry in config/_default/menus.yaml.

Position sections

The order that the homepage widgets are displayed in is defined by the weight parameter in each of the files in the content/home/ directory. The widgets are displayed in ascending order of their weight, so you can simply edit the weight parameters as desired.

You may wish to add a navigation link to the top of the page that points to a section. This can be achieved by adding something similar to the following lines to your config/_default/menus.yaml, where the URL will consist of the first title word in lowercase:

[[main]]
    name = "Research"  # A name for the link.
    url = "/#research"  # URL of the section.
    weight = 10  # Position of the link in the menu.

Create a new widget

Looking to build and publish a Wowchemy widget that doesn’t exist yet?

You can easily create your own widgets with the click of a button - we’ve put together a widget template and step-by-step guide to kickstart the process of creating your own widgets with Wowchemy v5+ 👩‍🎨

📢 Remember to share your widget with the community on Discord and Twitter.

Alternatively, if you wish to make an improvement to an existing widget, consider contributing a GitHub Pull Request (PR) with your changes rather than creating a new widget.

You may also be interested in adding your content to the Blank widget.

Personalizing Widgets

The parameters for each section consist of general options in addition to widget-specific options. When you open a section installed in the content/home/ folder in a text editor, the available options will be displayed in the front matter.

We recommend using YAML formatted front matter (between a pair of ---). If your front matter is written in TOML syntax (between a pair of +++), you’ll need to convert it before using the YAML formatted snippets on this page.

Generally, if you write any text in the file body after a widget’s front matter, your text will appear at the top of the widget. This can be useful for introducing the widget content.

A title and subtitle can be set for most widgets using the title and subtitle options respectively.

Columns

The number of columns in a section can be configured for most widgets. Valid options are:

  • '1': a single full-width column with the section content appearing directly underneath the section title (if set)
  • '2': two columns in the classic Wowchemy layout with the the section title appearing on the left and the section content appearing on the right

Supported widgets (as of v5.0.0.beta1): pages, featured, experience, accomplishments, contact, blank, tag_cloud, portfolio

For example:

design:
  # Choose how many columns the section has. Valid values: '1' or '2'.
  columns: '1'

View

Several widgets have a view option to let you choose the layout of the widget. The following layouts are available:

  • 1 = List (previously Simple)
  • 2 = Compact (previously Stream)
  • 3 = Card (previously Detailed)
  • 4 = Citation (previously APA and MLA), only available for publications
    • Optionally, edit the value of citation_style in params.yaml to APA or MLA
  • 5 = Showcase (large images), only available for projects

Icons

Wowchemy enables you to use a wide range of icons from Font Awesome and Academicons.

Icon pack “fab” includes the following brand icons:

  • twitter, weixin, weibo, linkedin, github, facebook, pinterest, twitch, youtube, instagram, soundcloud
  • See all icons

Icon packs “fas” and “far” include the following general icons:

  • fax, envelope (for email), comments (for discussion forum)
  • See all icons

Icon pack “ai” includes the following academic icons:

  • cv, google-scholar, arxiv, orcid, researchgate, mendeley
  • See all icons
  • To enable the academic icon pack in v5+, set ai = true under [icon.pack] in params.yaml

Icon pack “emoji” gives you the ability to use emojis as icons

  • See all icons
  • Enter the emoji shortcode, such as :heart:, in Wowchemy’s icon field
  • Wowchemy v4.9+ is required to utilise the emoji icon pack and can currently only be used in the Featurette (skills) widget.

Icon pack “custom” gives you the ability to use custom SVG icons

  • Create an SVG icon in your favorite image editor or download one from a site such as Flat Icon
  • Place the custom SVG icon in assets/images/icon-pack/, creating the folders if necessary
  • Reference the SVG icon name (without .svg extension) in the icon field
  • Wowchemy v4.9+ is required to utilise the custom icon pack and can currently only be used in the Featurette (skills) widget.

Background

A background can easily be applied to any homepage section. Choose from a range of background options including color, gradient, and image. Then choose either a dark or light text color by setting text_color_light, or remove text_color_light for dynamic text color associated with the current light/dark theme.

Once you have chosen the type of background, delete or comment out (by prefixing #) any unused options. For example, if you choose an image background, set the image* and text_color_light options and delete the rest (delete color and gradient*). For colors, any HTML color name or Hex value is valid.

The following excerpts show the front matter structure for defining various backgrounds.

Color background:

design:
  background:
    color: 'navy'
    # Text color (true=light, false=dark, or remove for the dynamic theme color). 
    text_color_light: true

Gradient background:

design:
  background:
    gradient_start: '#4bb4e3'
    gradient_end: '#2b94c3'
    # Text color (true=light, false=dark, or remove for the dynamic theme color).
    text_color_light: true

Image background:

design:
  background:
    # Name of image in `assets/media/`.
    image: background.jpg
    # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
    image_darken: 0.6
    #  Options are `cover` (default), `contain`, or `actual` size.
    image_size: cover
    # Options include `left`, `center` (default), or `right`.
    image_position: center
    # Use a fun parallax-like fixed background effect on desktop? true/false
    image_parallax: true
    # Text color (true=light, false=dark, or remove for the dynamic theme color).
    text_color_light: true

Spacing

The spacing of sections can be controlled by specifying padding for the top, right, bottom, and left sides of sections.

For example, to make a section more compact, the following parameters can be added to the front matter of a section. This example will reduce the top and bottom spacing of the section to just 20 pixels (px).

design:
  spacing:
    # Customize the section spacing. Order is top, right, bottom, left.
    padding: ["20px", "0", "20px", "0"]

Style

It’s possible to customize the style of a specific instance of a widget with CSS. For example, the font size of a section can be changed.

First, define your custom style in CSS using the CSS Plugin feature.

To apply your new style to a widget, set css_class in a widget’s front matter. For example css_class = "MY_CSS_CLASS", where MY_CSS_CLASS is the name of the CSS class which you defined in the previous step.

Custom CSS code can also be directly applied to a section using the css_style option.

advanced:
  css_style: ''
  css_class: ''

Blank

You can use the Blank widget to create your own home page sections. Add page elements, such as an image gallery, and personalize the section with a background etc.

For example, a new Markdown file can be created in content/home/ with the following front matter to begin building your new section:

widget: blank
headless: true
design:
  # Choose how many columns the section has. Valid values: 1 or 2.
  columns: '1'

# ... Put Your Section Options Here (title etc.) ...

The Demo homepage section in the Demo website provides an example of using a Blank widget. For inspiration, the associated file can be found at themes/academic/exampleSite/content/home/demo.md.

For advanced use cases, HTML code can even be added to the body of the file.

You may also be interested in developing your own widgets.

Example sections created with the Blank widget

A text block and custom background created with the Blank widget.
A text block and custom background created with the Blank widget.

Hero

The Hero widget can be used to encourage visitors to perform an action (CTA). It’s the first thing that visitors see when they visit your website, and it influences the way your visitors feel and behave on your site.

Typically, the Hero widget is configured to include a hero image, a tagline and a call to action (CTA). There are other possibilities as well though, such as including a secondary action, note, and background.

The Hero widget can be used to encourage visitors to perform an action (CTA).
The Hero widget can be used to encourage visitors to perform an action (CTA).

Edit the front matter of home/hero.md to add the primary action that you would like your visitors to perform.

For example, the following options can be added to your section front matter in order to include the Hero widget:

widget: hero
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

# Hero image (optional). Enter filename of an image in the page folder.
hero_media: ''

# Call to action links (optional).
#   Display link(s) by specifying a URL and label below. Icon is optional for `cta`.
#   Remove a link/note by deleting a cta/note block.
cta:
  url: 'https://wowchemy.com'
  label: Get Started
  icon_pack: fas
  icon: download
cta_alt:
  url: 'https://wowchemy.com'
  label: View Documentation

# Note. An optional note to show underneath the links.
cta_note:
  label: ''

In this example, we have associated an icon with the action ([cta] option).

Featurette

As an individual, use the Featurette widget to showcase your skills and expertise. As an organization, use the widget to highlight the key features of your product or service.

Showcase personal skills or product features with the Featurette widget.
Showcase personal skills or product features with the Featurette widget.

Edit the front matter of home/skills.md to add your skills/features. Choose from a large range of icons to depict the skills/features.

For example, the following options can be added to your section front matter in order to include the Featurette widget:

widget: featurette
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

# Showcase personal skills or business features.
# Add/remove as many `feature` blocks below as you like.
# For available icons, see: https://wowchemy.com/docs/page-builder/#icons
feature:
  - icon: r-project
    icon_pack: fab
    name: R
    description: 90%
  - icon: chart-line
    icon_pack: fas
    name: Statistics
    description: 100%
  - icon: camera-retro
    icon_pack: fas
    name: Photography
    description: 10%

  # Example using an emoji as an icon.
  - icon: '😄'
    icon_pack: emoji
    name: Emojiness
    description: 100%

An SVG icon may also be added:

  # Example using an SVG image as an icon.
  # Place custom SVG icon in `assets/images/icon-pack/`, creating folders if necessary.
  # Reference the SVG icon name (without `.svg` extension) in the `icon` field.
  - icon: your-custom-icon-name
    icon_pack: custom
    name: Surfing
    description: 90%

Note: Wowchemy v4.9+ is required to utilise the emoji and custom icon packs.

About

Introduce yourself to your readers.

Introduce yourself to your readers with the About widget.
Introduce yourself to your readers with the About widget.

Setup a user profile and then edit the front matter of home/about.md to associate the About widget with your username (name of the folder your created in authors/).

For example, the following options can be added to your section front matter in order to include the About widget:

widget: about
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

# Choose the user profile to display
# This should be the username of a profile in your `content/authors/` folder.
author: 'admin'

Experience

List your professional experience on a timeline.

With the Experience widget, you can list your professional experience on a timeline.
With the Experience widget, you can list your professional experience on a timeline.

Add your experience by editing the front matter of home/experience.md. For example:

widget: experience
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

# Date format
#   Refer to https://wowchemy.com/docs/customization/#date-format
date_format: Jan 2006

# Experiences.
#   Add/remove as many `experience` blocks below as you like.
#   Required fields are `title`, `company`, and `date_start`.
#   Leave `date_end` empty if it's your current employer.
#   Begin/end multi-line descriptions with `>-`.
experience:
  - title: 'CEO'
    company: 'GenCoin'
    company_url: ''
    location: 'California'
    date_start: '2017-01-01'
    date_end: ''
    description: >-
        Responsibilities include:
        
        * Analysing
        * Modelling
        * Deploying
        
  - title: 'Professor'
    company: 'University X'
    company_url: ''
    location: 'California'
    date_start: '2016-01-01'
    date_end: '2016-12-31'
    description: 'Taught electronic engineering and researched semiconductor physics.'
The use of >- in the above front matter example is a YAML configuration syntax that enables us to easily write multi-line content in the front matter.

Accomplishments

List your accomplishments including certificates and courses attended.

List your accomplishments including certificates and courses attended.
List your accomplishments including certificates and courses attended.

Add your accomplishments by editing the front matter of home/accomplishments.md. For example:

widget: accomplishments
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

# Date format
#   Refer to https://wowchemy.com/docs/customization/#date-format
date_format: Jan 2006

# Accomplishments.
#   Add/remove as many `item` blocks below as you like.
#   `title`, `organization` and `date_start` are the required parameters.
#   Leave other parameters empty if not required.
#   Begin/end multi-line descriptions with `>-`.
item:
  - organization: Coursera
    organization_url: 'https://www.coursera.org'
    title: Neural Networks and Deep Learning
    url: ''
    certificate_url: 'https://www.coursera.org'
    date_start: '2018-10-01'
    date_end: ''
    description: ''
  - organization: edX
    organization_url: 'https://www.edx.org'
    title: Blockchain Fundamentals
    url: >-
      https://www.edx.org/professional-certificate/uc-berkeleyx-blockchain-fundamentals
    certificate_url: 'https://www.edx.org'
    date_start: '2018-03-01'
    date_end: ''
    description: 'Formulated informed blockchain models, hypotheses, and use cases.'
  - organization: DataCamp
    organization_url: 'https://www.datacamp.com'
    title: 'Object-Oriented Programming in R: S3 and R6 Course'
    url: ''
    certificate_url: 'https://www.datacamp.com'
    date_start: '2017-07-01'
    date_end: '2017-12-21'
    description: ''

Pages

List your recently published pages such as blog posts, events, and publications.

List your recent pages.
List your recent pages.

There are three sections in the demo that use the Pages widget. These include home/posts.md, home/talks.md, and home/publications.md.

Edit the front matter of a section to personalize the view and other options shown below:

widget: pages
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

content:
  # Page type to display. E.g. post, event, or publication.
  page_type: post
  # Choose how much pages you would like to display (0 = all pages)
  count: 5
  # Choose how many pages you would like to offset by
  offset: 0
  # Page order. Descending (desc) or ascending (asc) date.
  order: desc
  # Optionally filter posts by a taxonomy term.
  filters:
    tag: ''
    category: ''
    publication_type: ''
    exclude_featured: false
    exclude_past: false
    exclude_future: false
design:
  # Toggle between the various page layout types.
  #   1 = List
  #   2 = Compact
  #   3 = Card
  #   4 = Citation (publication only)  
  view: 2

Highlight featured blog posts (e.g. announcements), publications, and events. Featured pages are also known as sticky pages.

The Featured widget is similar to the Pages widget, but with a focus on featured content rather than recent content.

The featured.md section in the demo uses the Featured widget.

Edit the front matter of a section to add the Featured widget and personalize its options such as the view:

widget: featured
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

content:
  # Page type to display. E.g. post, event, or publication.
  page_type: publication
  # Choose how much pages you would like to display (0 = all pages)
  count: 0
  # Page order. Descending (desc) or ascending (asc) date.
  order: desc
  # Optionally filter posts by a taxonomy term.
  filters:
    tag: ''
    category: ''
    publication_type: ''
design:
  # Toggle between the various page layout types.
  #   1 = List
  #   2 = Compact
  #   3 = Card
  #   4 = Citation (publication only)
  view: 3

Contact

Communication is the cornerstone of almost any website, especially business sites. With Wowchemy, you can easily add communicate elements including a contact form, social messaging links, appointment booking, and a map to your website. A well designed contact section is essential to network with other people, spark new business, and increase conversions.

The contact widget will automatically display the following information according to what you entered in config/_default/params.yaml:

  • contact form or an email link (see section below)
  • contact links such as for Twitter, Skype, Weixin, Weibo, Discussion Forums, etc.
  • phone number
  • address
  • office hours
  • appointment booking link
  • map

In the Academic template, you can find an example Contact widget at content/home/contact.md.

Example Contact widget YAML front matter prior to Wowchemy v5.0.0.beta1:

widget: contact
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

# Automatically link email and phone?
autolink: true

# Email form provider
#   0: Disable email form
#   1: Netlify (requires that the site is hosted by Netlify)
#   2: formspree.io
email_form: 2

Example Contact widget YAML front matter for Wowchemy v5.0.0.beta1+:

widget: contact
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

content:
  # Automatically link email and phone or display as text?
  autolink: true
  
  # Email form provider
  form:
    provider: netlify
    formspree:
      id:
    netlify:
      # Enable CAPTCHA challenge to reduce spam?
      captcha: true

Wowchemy enables you to use a wide range of icons in your contact links. Learn more about icons.

Contact form

For email there are three options. You can display either:

  • an email link
  • a contact form by Netlify (default)
  • a contact form by Formspree

By using a contact form, there’s no need to provide your email in config/_default/params.yaml, protecting your address from spammers.

Option 1: Email link

Enter an email address in params.yaml and remove the form settings from your contact widget to not use any form.

Option 2: Netlify

The Netlify option is only available if you are hosting your site with Netlify.

To use, set the provider to netlify:

content:
  form:
    provider: netlify
    netlify:
      captcha: true

In this case, user messages to you will be sent to your Netlify account admin panel.

A webhook can be created in your Netlify account if you wish to forward messages to your email address.

Captcha is enabled by default so that visitors can send you email and spam from bots is prevented.

Read more in the Netlify docs.

Option 3: Formspree

Register with Formspree for a Form ID.

Add the Form ID to your widget front matter:

content:
  form:
    provider: formspree
    formspree:
      id: yourID

Captcha

Both Formspree and Netlify forms can use Google reCAPTCHA to prevent spam from bots. However, China is known to block Google reCAPTCHA, so visitors in China may be unable to submit such a form. To prevent this, there is the Netlify option above to disable Captcha and Formspree offer a paid plan to disable reCAPTCHA.

Portfolio

With the Portfolio widget you can showcase your work and optionally enable visitors to filter the items.

Showcase your work or product features with the Portfolio widget.
Showcase your work or product features with the Portfolio widget.

Different views are available for the content. The default view is a masonry card view made famous by Pinterest.com. Other views include a large image showcase view, a compact view with image, and a simple list view. For the showcase view, the flip_alt_rows option can be set to true to horizontally flip alternate rows - a style which is commonly seen on many popular sites and landing pages that showcase product features by placing large images and text side-by-side.

The widget is configurable in a one or two column structure by setting the columns option.

Associate your pages with tags by placing the tags option in the front matter of your pages (e.g. tags: ["A Tag", "Another Tag"]). The Portfolio widget can then be configured to let visitors filter results by tags. To add a filter button, add or edit a filter_button option (see below), where name is the filter text and tag is the name of the tag to filter by (type * to show all items).

The projects.md section in the demo uses the Portfolio widget.

To show the widget in a section, reference it in your section’s front matter:

widget: portfolio
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

content:
  # Page type to display. E.g. project.
  page_type: project

  # Default filter index (e.g. 0 corresponds to the first `filter_button` instance below)
  filter_default: 0

  # Filter toolbar (optional).
  # Add or remove as many filters (`filter_button` instances) as you like.
  # To show all items, set `tag` to "*".
  # To filter by a specific tag, set `tag` to an existing tag name.
  # To remove toolbar, delete/comment all instances of `filter_button` below.
  filter_button:
    - name: All
      tag: '*'
    - name: Deep Learning
      tag: Deep Learning
    - name: Other
      tag: Demo
design:
  # Choose how many columns the section has. Valid values: 1 or 2.
  columns: '2'
  # Toggle between the various page layout types.
  #   1 = List
  #   2 = Compact  
  #   3 = Card
  #   5 = Showcase
  view: 3
  # For Showcase view, flip alternate rows?
  flip_alt_rows: false

Tag Cloud

Enable visitors to easily discover popular topics.

Associate your pages with tags by placing the tags option in the front matter of your pages (e.g. tags = ["A Tag", "Another Tag"]). The Tag Cloud widget will then display your tags. The more popular a tag is, the larger its font.

The tags.md section in the demo uses the Tag Cloud widget.

To show the widget in a section, reference it in your section’s front matter:

widget: tag_cloud
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

content:
  # Choose the taxonomy from `config.yaml` to display (e.g. tags, categories)
  taxonomy: tags
  # Choose how many tags you would like to display (0 = all tags)
  count: 20
design:
  # Minimum and maximum font sizes (1.0 = 100%).
  font_size_min: 0.7
  font_size_max: 2.0

People

Introduce your team members.

Introduce your team members with the People widget.
Introduce your team members with the People widget.

The People widget displays photos of people within your team or organisation, and links to their user profile page. You can choose which users to display and in which order to display them by using user groups.

First, create a user account for each user that your wish to display. (This can also be performed by duplicating the example content/authors/admin/ folder for each user and modifying its contents appropriately.)

Add each user to a user group using the user_groups option in the user account at content/authors/<USERNAME>/_index.md. For example setting user_groups: ["Researchers", "Visitors"] in a user account will add that user to the Researcher and Visitors groups which we can display in the People widget.

The Meet The Team section in the demo with filename people.md uses the People widget. Set active: true in its front matter to view the section.

Edit the front matter of a section to add the People widget. You can personalize options such as the user groups to display and whether you would like the show each user’s social links and interests:

widget: people
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (title etc.) ...

content:
  # Choose which groups/teams of users to display.
  #   Edit `user_groups` in each user's profile to add them to one or more of these groups.
  user_groups:
    - Principal Investigators
    - Researchers
    - Grad Students
    - Administration
    - Visitors
    - Alumni
design:
  # Show user's social networking links? (true/false)
  show_social: false
  # Show user's interests? (true/false)
  show_interests: true
  # Show user's role?
  show_role: true
  # Show user's organizations/affiliations?
  show_organizations: true

Person not showing in the People widget?

Hugo will only generate a user’s profile if the user is associated with a piece of content by having their username appear in the authors field of a page’s front matter. Therefore, if a user does not appear in the widget, edit the user’s profile to add an authors field containing their username (folder name) to force Hugo to generate their profile even though it’s not directly associated with any content. For example,

authors:
- <USERNAME>

Slider

Promote a lot of content in a small space with a slider (carousel). Users can click the left and right arrows to move between slides, or you can automate slide transitions with a timer.

The slider.md section in the demo uses the Slider widget. Set active: true in its front matter to view the section.

Each slide is defined as an item in the section front matter. A title and content can be set for each slide - Markdown formatting and emojis can be used. The content of each slide can be left, center, or right aligned.

Optionally, a call-to-action (CTA) button can be added to a slide to encourage visitors to perform an action. The snippet below provides an example of using the cta_* options to add a CTA button to a slide.

Customize each slide with a background color (overlay_color) or image (overlay_img). The text color for slides is always white unless it is overrided using custom CSS styling.

To show the widget in a section, reference it in your section’s front matter:

widget: slider
headless: true  # This file represents a page section.

# ... Put Your Section Options Here (section position etc.) ...

# Slide interval.
# Use `false` to disable animation or enter a time in ms, e.g. `5000` (5s).
interval: false

# Minimum slide height.
# Specify a height to ensure a consistent height for each slide.
height: 300px


item:
  - title: Hello
    content: 'I am center aligned 😄'
    # Choose `center`, `left`, or `right` alignment.
    align: center
    # Overlay a color or image (optional).
    #   Deactivate an option by commenting out the line, prefixing it with `#`.
    overlay_color: '#666'  # An HTML color value.
    overlay_img: bubbles.jpg  # Image path relative to your `assets/media/` folder
    overlay_filter: 0.5  # Darken the image. Value in range 0-1.
    # Call to action button (optional).
    #   Activate the button by specifying a URL and button label below.
    #   Deactivate by commenting out parameters, prefixing lines with `#`.
    cta_label: Download my app
    cta_url: 'https://example.org'
    cta_icon_pack: fas
    cta_icon: graduation-cap
  - title: Left
    content: 'I am left aligned 😄'
    align: left
    overlay_color: '#555'
    overlay_img: ''
    overlay_filter: 0.5
  - title: Right
    content: 'I am right aligned 😄'
    align: right
    overlay_color: '#333'
    overlay_img: ''
    overlay_filter: 0.5

You may also be interested in the Hero widget.

Previous
Next