Typed Headline :: CF Pro Tools Add-On Features for ClickFunnels
Description and Best Use Case For This Add-On:
Use this add on to create an animated typed out headline with multiple variations to give you multiple headlines in one.
In this video tutorial above, Jaime demonstrates the process of setting up and installing the Type Headline add-on. The tutorial takes place within a Pro Tools environment.
OVERVIEW (For Advanced Users)
For those of you ready to jump in and are familiar with CF Pro Tools, you can use this checklist:Add Domain to CF Pro Tools Whitelist
Access ClickFunnels Page Editor
Create a Placeholder Headline
Assign CSS Titles As Notated in Steps Below
Create Alternate Versions of the Headline
Assign CSS Titles For Each Alternate Versions As Notated in Steps Below
Generate Add-on Code in CF Pro Tools
Configure/Install The Add On Code
No known conflicts
Step 1: Set-up Your Headlines
Here's a step-by-step guide on how to set up your headlines in ClickFunnels Page Editor:
1. Access ClickFunnel Page Editor
- Open the ClickFunnels editor for your page.
2. Create Placeholder Headline
Add a headline element to your page.
Open Your Headline element's setting and click "Get CSS info"
3. Assign CSS Titles
Main Headline CSS: cf-typed-headline-x
Name it uniquely using the format: cf typed headline 1.
Customize the text, font size, and color as needed.
4. Create Alternate Versions
Clone the original headline to create alternative versions.
Customize each headline with different phrases or endings (sample below)
5. Name Alternatives for Replacement
For each alternate headline, go to settings and click "Get CSS Info."
Secondary Headlines CSS: cf-typed-strings-x
6. Assign CSS Titles For Each Alternate Versions As Notated in Steps Below
Replace the existing cf typed headline with cf typed strings 1 (or corresponding number) So if you have a single group of 5 headlines, all strings would be -1.
Adjust formatting (bold, italic, underline, etc.) on alternate headlines.
Overall formatting (except for bold) will follow the original headline.
Either place alternate headlines in hidden section at the bottom of the page or hide them individually. This ensures they won't appear by default when the page loads.
7. Save Changes
- Save the changes made to your ClickFunnels page.
For best overview of the steps above, watch this video tutorial from us:
Feel free to adapt these steps based on your specific requirements or the features available in ClickFunnels and CF Pro Tools.
Step 2: Generate Add-on Code in CF Pro Tools & Install The Add On Code
Here's a step-by-step breakdown of how to set up your installation of the Type Headline add-on using CF Pro Tools:
1. Access CF Pro Tools and Create Your Add-On
Log in to CF Pro Tools and Add Your Domain
Click on "Create New Add-On" within CF Pro Tools
In the search bar, type "typed headline."
Provide a custom name for your add-on (e.g., "Demo Typed Headline").
2. Configure Typing Settings
Adjust the following settings based on your preferences:
Start Weight: Set the initial delay before typing begins (in milliseconds).
Typing Speed: Specify the speed of typing characters (in milliseconds).
Backspace Speed: Determine how quickly characters are backspaced (in milliseconds).
Loop: Decide if headlines should loop (default is yes).
Show Cursor: Choose whether to display the typing cursor (default is yes).
Backspace Delay: Set the delay after the headline is fully typed before backspacing (in milliseconds).
Start Delay: Establish the delay before typing begins after backspacing (in milliseconds).
Smart Backspace: Decide if only different words should be backspaced (default is yes).
3. Create and Copy the Add-On:
Click on "Create Add-On" to generate the add-on with your configured settings.
Once created, copy the provided code for your new add-on.
4. Access ClickFunnels Editor Settings And Add the Code:
Open the ClickFunnels Classic editor for the specific page where you want to install the add-on.
In the ClickFunnels editor, go to "Settings."
Within the Settings menu, select "Tracking Code."
If you have previous code, remove it and paste the new Type Headline add-on code.
5. Save Changes of Your Page and Test it:
Click "Save" to apply the changes to your funnel.
Hit "Preview" to see the Type Headline add-on in action.
Observe the typing and backspacing effects based on the configured settings.
For best overview of the steps above, watch this video tutorial from us:
By following these steps, you should be able to seamlessly implement the Type Headline add-on and enhance your page's engagement.
CF 2.0 Installation Instructions
To install in 2.0, the same instructions above apply, but instead of setting a CSS TITLE, you will set a CUSTOM ATTRIBUTE in the advanced settings tab. However, here are the step-by-step actions:
1. Review the instructions above and Add the Typed Headline Add-On Code
Ensure you've set your code in the footer and whitelisted your domain in CF Pro Tools.
2. Headline Variations:
Make sure you have three to five headlines, each in its own element.
3. Custom Attributes in CF 2.0:
In CF 2.0, use custom attributes instead of CSS titles.
Navigate to the settings for the main headline.
Open the advanced tab.
Scroll down and click "Custom Attributes"
Set the name to: data-title
Set the value to: cf-typed-headline-1 or cf-typed-strings-1 appropriately
Add a custom attribute named "data-title" with the value "CF-typed-headline-1."
4. Repeat for Additional Variations:
Go to advanced settings.
Add a custom attribute named "data-title."
Adjust the value to "CF-typed-strings-1" for the first variation and so on.
Ensure only one variation is visible in the settings by hiding the others.
5. Preview the Page and Test it:
Click the preview button or go to the live page.
Save your changes.
Preview the result to ensure it meets the desired effect.
Confirm that all variations play back and forth as intended, erasing and typing out.