Tips & Tricks

Video play & pause on scroll Sometime you might need to start a HTML5 video only when it reaches into the view while scrolling the page. It can be done easily in Kickpages with a bit of custom JavaScipt code. First off, you will need to add a custom code block with the HTML5 video element...

Typewriter Text Animation Headline Animating parts of a headline is in fashion nowadays, it looks good and you can press more information into one sentence by changing parts of it dynamically. In Kickpages you can make easily such a headline with the addition of a custom code snippet. You can utilize it in any...

Adding your custom tracking codes and pixels Adding your custom tracking code, pixel code is usually done two ways. In EHAD section or in BODY section, and this is specified each time by the developer of the tracking code. In Kickpages you can add your tracking code to a whole project which means the code will be...

Add a floating scroll to top button Adding a scroll to top floating button in the bottom corner of your page is usual, specially if your pages are really tall.  This can be done easily in Kickpages by adding a transparent floating section to the bottom of your page with a button which links to the top...

Creating a floating bar for desktop only Creating a floating top or bottom bar in Kickpages is really easy, basically any section can be set to stick to bottom or to top on scroll. Create the section you would like to stick on float then click on edit, then select stick to top or bottom:You can select...

Using Integromat.com with your form Integromat is a powerful free tool to connect different web applications together, with ready made integrations. In this tutorial we will see, how you can use Integromat to catch and process the data submitted by your form created in Kickpages. First thing to do is to create a form in...

Using custom Google fonts Kickpages has 50 Google fonts included that can be used in each text snippet in the editor, but sometimes you might want to use a different custom Google font in your pages. Adding a custom Google font can be really easy and can be done in multiple ways, will show...

Opening a modal window through an image Modal windows are usually opened on page load, on page leave or by clicking a button or link on the page. I have made a demo page to create this tutorial which looks like this:  The grey area is the overlay itself, it is displayed like this in the editor,...

Using a custom font file Sometimes you might want to use a custom font file, that is not available as a hosted version in Google Fonts or any other CDN, these are usually paid fonts, available in font files only. (If you would like to use a Google font then please follow this tutorial: https://help.kickpages.com/article/151-using-custom-google-fonts)...

Animated gradient button You can easily create animated gradient buttons in Kickpages with some extra CSS: The best way to create it is to use a custom code block and add a link element (or any element you would like to have an animated gradient border): The code to add in my example...

Custom progress bar Sometimes you might want to display a progress bar to your visitors, maybe in a sales funnel, so they can see how deep they are in the funnel and what is left. You can do this easily with a bit of custom code. You need to add this code to...

Dynamic timer text for autowebinars First you will need to add a countdown so peoples know how much time is left, please note that this step is not actually required by the script and it can work without an actual countdown to. Click on Edit for your countdown element and set your countdown to Interval...

Animated Rotating Text Animating parts of a headline is in fashion nowadays, it looks good and you can press more information into one sentence by changing parts of it dynamically. In Kickpages you can make easily such a headline with the addition of a custom code snippet. You can utilize it in any...

Adding a gradient to your text CSS code used: .gradienttext span{ background-color: #f3ec78; background-image: linear-gradient(45deg, #D16BA5, #86A8E7,#5FFBF1); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } Where . gradienttext is the class name you have given to your element and the hex colours in line 3 are the gradient colours you want to use....

Animated Number Count Animated number counts are popular to show off your overall statistic to your visitors. Kickpages does not currently have a ready made block for this which gives the option to completely get a blank canvas for our unique number count. With this method, you can build your own number count...