Webflow documentation for the Kajabi marketing site

Example H2
Example H3
Example H4

Overview

Introduction

Development

CMS Powered

Policies

Setup

The Policies CMS Collection have the following CMS Fields:

  • Name
  • Categories — Multi Reference of Policies: Categories
  • Body — Rich Text
  • Last Edit — Date
  • Title Tag — Plain Text
  • Meta Description — Plain Text
  • Hide TOC — Switch
  • Order — Number Field

Special Fields

Body

The body field can be copied and pasted into directly from a Google Doc. However, the headings must start with an H2. This is because the TOC is formed by H2 and H3 tags. NO extra spacing is needed under or above Heading Tags. They will inherit spacing on the actual site.

Hide TOC

This is a "switch" field that, if turned on, will remove the TOC from the policy. This is useful for small policies or policies with no "headings" so a TOC will look too bare.

By default, the TOC will always be visible.

Video Breakdown

‍

Blogs

Setup

  • Blog Title
  • Thumbnail Image (Small) — Image
  • Thumbnail Image (Larger)— Image
  • Publish Date — Date
  • Blog Category — CMS Reference
  • Blog Post — Rich Text
  • SEO: Title Tag — Plain Text
  • SEO: Description — Plain Text
  • Featured — Switch
  • UNLISTED — Switch
  • Publish Date Override (LEGACY - IGNORE) — Date

Publish Date Override... is an inherited field from when the website was migrated. This was needed to sort old blog posts.

Images

Thumbnail Image (Small) should be under 40KB and Thumbnail Image (Large) should be under 120KB. Both images should be optimized WEBP files.

Blog Post

There should not be an H1 tag in the Blog Post, as the Blog Title will be the H1 tag on the page. The TOC on the page uses H2 and H3 tags only.

SEO

These fields should be provided by the SEO team, and the SEO: Description field will be the "Short Description" seen on the /blog homepage.

For reference, the SEO: Title Tag should be between 50-60 characters, and the SEO: Description should be no more than 165 characters.

Featured

The Featured switch, if turned on, will push the Blog Article to the "featured articles" section. The "featured articles" are sorted by Publish Date, with the most recent featured article being above the fold (the header article).

UNLISTED

This toggle will remove the Blog post from being visible anywhere on the site, and will only be accessible by a direct link. This is useful for specific use-cases.

Filtering

The blog filters are dynamic and new blog categories can be added in the Blog: Categories CMS Collection. And categories are added to Blogs via a Reference field.

CTAs

Mid-Post CTAs

CTAs placed inside a blog post need to be hard coded and injected into the Rich Text Editor for the Blog Post field via an HTML Embed.

For example, the following CTA is injected via a HTML Embed:

Try Kajabi free for 14 days

Kajabi is everything your online business needs. All in one place.

Yes! Let's go

And below is the actual code that's within the HTML Embed element:

<div class="blog-post-inline-cta-wrapper">
<p class="blog-post-inline-cta-headline">Try Kajabi free for 14 days</p>
<p class="blog-post-inline-cta-subhead">Kajabi is everything your online business needs. All in one place.</p>
<div class="popup-trigger blog-post-inline-cta-button">Yes! Let's go</div>
</div>

Side CTAs

The CTAs on the right side of the blog post, are currently exclusive to Desktop — and these CTAs much be implemented by the Web Team, as they are not dynamic.

Currently, it is just an Image with a Link. That is all Web requires to implement a new CTA. We don't recommend having more than 3 CTAs.

Signups & Forms

Popup Modals

Setup

Standard Free Trial Popup Modals are setup as Components. To edit the data-signupsource="", data-planurl="", and data-marketingformname="" attributes, simply have the Component selected1 (select in the Navigator: short key is "z"), and go to the element settings panel2.

1.

2.

Landers

Landers SDK is a code snippet created and managed by Engineering, which intercepts leads on form submissions, and communicates to the App and Braze. To learn more about Landers SDK, click here.

Landers in Webflow

You can edit the Landers attributes via the component settings, but just FYI, the element within the component that has the Landers attributes, is .landers-data-attribute:

Trigger Class

Any button that has the initial class .popup-trigger, will trigger the popup modal when clicked. So the most common combo class is:

.popup-trigger button

The following will not work:

.button popup-trigger

The .popup-trigger class has no custom CSS to it, and it should remain that way. It simply activates the animation. To style an element that you add .popup-trigger to, just add a combo class to it.

Video Breakdown

Inline Forms

Inline form components are best for gated Resource, Waitlist forms, and other lead gens. Can also be used for signup forms.

No Redirect

Currently, Landers does not trigger a Webflow Form, and the redirect="none" attribute (provided by Product) does not send leads to Braze. However, a workaround is to set the redirect to a string of query params which would append the copy surrounding the inline submission form.

For example, the following redirect link:

data-redirect="kajabipayments?message=Thank+you%21+You%27re+now+on+the+waitlist.&remove1=&remove2="

When set to the following inline submission form:

Results in the following screen:

How is this done?

Follow the guide linked below for a breakdown on how to populate content using Query Params: 

https://finsweet.com/attributes/query-param

NOTE: The <head> code is already set in the Site Settings of this Webflow Project.

Assets

Lottie Files

A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. LottieFiles lets you create, edit, test, collaborate on and ship a Lottie in the easiest way possible.

Full lottie breakdown here

Lottie Benefits

Small(er) file size

Lottie animations are much smaller while retaining the same quality compared to other formats like GIF or MP4.

Infinitely scalable

Lottie animations are based on vectors, which means you can scale them up and down without worrying about resolution.

Multi-platform support and libraries

For all the developers out there, Lottie handoffs are super easy. You can use Lottie animations on iOS, Android, web and React Native without modification.

Interactivity

In Lottie animations, the animation elements are exposed so you can manipulate them to be interactive and respond to interactions like scrolling, clicking, and hovering. Learn more in the Interactivity Guide.

When Lotties Don't Work

Lottie files need to be optimized or else they can bloat a page. Also, when the animation being made involved HD photos vs graphics, then the Lottie File might be too bloated.

Lottie's work best when the animation is "graphic" driven. For example, all the animations on this page are created with 100% graphics vs images.

Regardless of the case, GIF should never be the chosen format for an animation.