Embedding your own custom code
Adding custom CSS styles to your page
Navigate to Styles -> Custom Styles and add any custom CSS classes you want to your page. You will find a CSS editor that will accept standard CSS classes, attributes, rules, media queries, fonts, etc.
These custom classes will be added to your page header, and thus will apply to the whole page.
- Dragging a custom-code section into the canvas
- Dragging a custom-code component into a section
You will find both options in the sidebar, under the area “Your code”:
Once dragged into the canvas, in order to access their respective source code editor, click on the CODE icon for sections, and on the PENCIL icon for components:
By the way, you will also find the CODE icon in all our pre-templated sections in case you want to edit -or add to- them at a source code level!
This is a standard HTML editor, so enter your custom code as you’d normally do in any editor.
<div data-embed="true"> YOUR CODE GOES HERE </div>
The crucial bit is the “data-embed” parameter. Anything inside that DIV wrapper will be identified by Kartra Pages as your own custom code, which in return will allow the system to render it correctly once you publish the page online. Otherwise it won’t work correctly.
You can embed that DIV wrapper anywhere in the code you want. For example:
There is no limit in how much custom custom code you may add to your page:
- You may add one data-embed=”true” DIV wrapper per each section in the builder.