www_zola_template/content/shortcodes.md

+++ title = "Shortcodes" template = "page.html" date = 2025-03-18 +++

Zola Shortcodes

This page documents the custom shortcodes available in this Zola site. Shortcodes are reusable components that can be included in your Markdown content.

Hero Shortcode

The hero shortcode creates a prominent banner section at the top of a page.

Usage

{{ hero(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-600", text_color="text-white") }}

Parameters

• title (required): The main heading text
• subtitle (optional): Secondary text displayed below the title
• button_text (optional): Text for the call-to-action button
• button_link (optional): URL the button links to
• bg_color (optional): Background color class (default: "bg-indigo-600")
• text_color (optional): Text color class (default: "text-white")

Example

{{ hero(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-gradient-to-r from-purple-600 to-indigo-600") }}

Hero2 Shortcode

The hero2 shortcode creates a centered hero section with a patterned background.

Usage

{{ hero2(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-blue-700", text_color="text-white", image="/path/to/image.jpg") }}

Parameters

• title (required): The main heading text
• subtitle (optional): Secondary text displayed below the title
• button_text (optional): Text for the call-to-action button
• button_link (optional): URL the button links to
• bg_color (optional): Background color class (default: "bg-blue-700")
• text_color (optional): Text color class (default: "text-white")
• image (optional): Path to an optional image to display below the text

Example

{{ hero2(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-blue-700") }}

Feature Card Shortcode

The feature card shortcode creates a card to highlight a feature or service.

Usage

{{ feature_card(title="Feature Name", description="Feature description", icon="🚀", bg_color="bg-white", hover_color="hover:bg-gray-50") }}

Parameters

• title (required): The feature name
• description (optional): Description of the feature
• icon (optional): An emoji or icon to display
• bg_color (optional): Background color class (default: "bg-white")
• hover_color (optional): Hover effect color class (default: "hover:bg-gray-50")

Example

{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}

Call-to-Action (CTA) Shortcode

The CTA shortcode creates an attention-grabbing section with a button.

Usage

{{ cta(title="Call to Action", description="Description text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-100", text_color="text-indigo-800", button_color="bg-indigo-600", button_text_color="text-white") }}

Parameters

• title (required): The main heading text
• description (optional): Description text
• button_text (optional): Text for the call-to-action button
• button_link (optional): URL the button links to
• bg_color (optional): Background color class (default: "bg-indigo-100")
• text_color (optional): Text color class (default: "text-indigo-800")
• button_color (optional): Button background color class (default: "bg-indigo-600")
• button_text_color (optional): Button text color class (default: "text-white")

Example

{{ cta(title="Ready to Get Started?", description="Create your own beautiful website with Zola and Tailwind CSS today.", button_text="View Blog", button_link="/blog") }}

Using Multiple Shortcodes Together

You can combine multiple shortcodes on a single page. For example, you might use a hero at the top, followed by feature cards in a grid, and a CTA at the bottom:

+++
title = "Home"
+++

{{ hero(title="Welcome", subtitle="A modern website") }}

## Features

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
{{ feature_card(title="Feature 1", description="Description 1", icon="🚀") }}
{{ feature_card(title="Feature 2", description="Description 2", icon="⚡") }}
{{ feature_card(title="Feature 3", description="Description 3", icon="🔍") }}
</div>

{{ cta(title="Ready?", description="Get started today", button_text="Sign Up", button_link="/signup") }}

Advanced Usage: Nested Content

Some shortcodes support nested content using the block syntax. This allows you to include more complex content inside the shortcode.

{% call hero(title="Welcome") %}
  <div class="custom-content">
    <p>This is custom content inside the hero.</p>
  </div>
{% endcall %}