The Policies CMS Collection have the following CMS Fields:
- 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
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.
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.
- 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.
Thumbnail Image (Small) should be under 40KB and Thumbnail Image (Large) should be under 120KB. Both images should be optimized WEBP files.
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.
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.
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).
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.
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 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:
And below is the actual code that's within the HTML Embed element:
<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>
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
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.
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:
Any button that has the initial class .popup-trigger, will trigger the popup modal when clicked. So the most common combo class is:
The following will not work:
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.
Inline form components are best for gated Resource, Waitlist forms, and other lead gens. Can also be used for signup forms.
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:
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:
NOTE: The <head> code is already set in the Site Settings of this Webflow Project.
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
Small(er) file size
Lottie animations are much smaller while retaining the same quality compared to other formats like GIF or MP4.
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.
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.