infographic demo
Review client brief & scope of work
Ensure clarity around outputs
In-depth review of agency proposal
Ensure full transparency of resourcing plan (rates, hours, projects, team)
Benchmark rates & hours
Our extensive benchmarking data ensures your rates are market competitive
IMA bottom-up reco
A full detailed analysis of what we believe the fees should be vs agency proposal
Negotiation & Agreement
Aligned and in partnership with the client
walkthrough
Interactive Infographic with Webflow Tabs
Step 1 - Create Images
As my infographic contains 5 steps, I have created 5 separate images. These are SVGs with outlined text, created in Adobe Illustrator. Download the PDF template and open in Illustrator to edit.
Download Template
Step 2 - Add Tabs Element
As i am using custom buttons to control the tab navigation, I have hidden the pre-built tabs menu. As you can't place buttons inside of a Webflow tabs element, I have wrapped the tabs in a div and my custom buttons have gone in a separate div that is positioned: absolute on top of the tabs.
Step 3 - Add Custom Buttons
I have used the button element and used position: absolute to overlay the buttons over the relevant segment of my infographic. Buttons must all have the class .tab-button and the active state must have .tab-button-active
Make sure the button text matches the names of the tabs as set in step 2.
Make sure the button text matches the names of the tabs as set in step 2.
Step 4 - Add Custom Code
Grab the custom code from the page settings and add it to your own page in the before /body section. The custom code for this tutorial comes from Chris Spags (Jetboost) and you can find the original tutorial here
