Attention, the custom CSS feature is somewhat an advanced function in KickPages, you need to have some CSS knowledge in order to take advantage of this feature, also some basic HTML knowledge and advanced browser usage might be needed.
As we know, with CSS we can style a specific element in our website targeted by an ID, or multiple elements targeted by a CLASS or just by element TAG.
With KickPages you can add custom CSS two ways, per page and per element. We suggest to use the Per Page option if not a lot of customization is needed or you are targeting multiple elements with your styling, and use the Per Element option if you need a lot of styling for specific elements and it will be easier to keep track of the different CSS snippets.
To make things easier, you can add custom classes to each element you add to your page, so you can target them easier. You can add a custom class to an element by clicking on the element editor:
After clicking the edit icon, you have to click on the "Custom CSS" option in the appearing right side menu and define your custom class in the "custom Classes" section. In my case it is "testclass" (without quotes) and you can define multiple classes divided by a space character.
If you want, you can define the Per Element custom CSS in the box below and use the custom class right away to target this same element. Please note, that if you define the same class for another element on your page, the styling will be applied for that element to since your CSS will be added to the website header targeting the defined class, and not inline for your element.
The second way to add Custom CSS is to add it per page, and you can do this easily by clicking on the small Settings icon in the top right of the editor, then selecting "Custom CSS" from the appearing right side menu:
If you define a class in the "Custom Classes" section, then the class will added to the BODY element. In the "Custom CSS Properties" you can target the custom classes added Per Element to, however we suggest this only if you defined the same class for multiple element or if you are targeting elements by TAG.
In some cases, extra targeting might be needed since the custom CLASS is not assigned to the most inner element where you are defining it, but for a holder element, and in case of a headline for example where you can change the font size with a slider from the UI, there is another inner element which holds the headline text itself, in the case of a headline this is a SPAN.
If you have the knowledge required, then you can use the element inspector of your browser to find the specific element you have to target to style it:
As you can see, the "testclass" CLASS added per element, was assigned to the element holder, but the most inner element has an inline CSS setting the font size of the headline, in this case, we have to target the element like ".testclass span" to change the font size of this element with custom CSS. In some cases you will have to use the !important tag to for your styling, in order to overwrite the inline styling.
Please check the element with your Element Inspector only in preview mode, or even better in the published version, the editor contains the custom class but it is harder to spot and to inspect the source code. Please also note, that the custom CSS styling is NOT displayed in the editor view, only in the preview and on the published pages.
If you need any help, get in touch at support@kickpages.com and we will be happy to assist.