You can embed custom code into a single page or your entire project to make your own customizations or integrate external features such as tracking, interactive elements, or other scripts. You have the flexibility to choose whether the code applies to just a single page or to all pages across the project.
Add custom code
Step 1: Open the project
Open your project, then open the page where you want to place the code. If you want the code to be available throughout the project, you can simply open any page within the project.
Step 2: Open the code settings
Once you've opened the page, you can click the code icon in the left sidebar to open the custom code input field.
Step 3: Select the correct column
You will now see the Page Code and Site Code sections:
Page Code = applies only to the specific page where you insert it
Site Code = applies to all pages within the project
So, if you want the code to be displayed or executed on only one page, use Page Code. If you want it to apply to all pages, use Site Code.
You then have access to the <head>, <body>, and Styles sections. These serve the following purposes:
<head>: This is where you insert content that loads in the background. This includes, for example, tracking codes (Google Analytics, Meta Pixel), meta tags, or external scripts that should be loaded before the page loads.<body>: This is where you place code that should be executed or displayed directly on the page. Examples include chat widgets, floating elements, buttons, or scripts that become active after the page loads.Styles: This is where you insert CSS, in other words, everything that affects the page’s design.
Step 4: Paste the code
Now you can paste your code into the appropriate columns and edit it if necessary. Be sure to paste the code into the correct column.
Step 5: Save and Publish
Save your changes and click "Update" or "Publish" to make the changes visible on your page.
Using custom classes for custom code
For example, when you add CSS code (styles) in the code area, you need unique identifiers to target specific sections of your page.
To do this, you can assign custom classes.
Step 1: Scroll to the element
Go to the element to which you want to assign a class.
Step 2: Open Settings
Open Settings:
For sections: Click the three dots in the top-right corner. Then select "Custom attributes" and click "+ Add Class".
For individual elements: Open the column overview (three lines), select the desired element, and then click the three dots. Next, select "Custom attributes" and click "+ Add Class".
Step 3: Add a class
There, you can add your class. For example: hero-section
Step 4: Include the class in your code
Then use this class in your custom code to specifically target this area.
📌 Please note: This is intended only for customers who make their own code modifications and wish to specifically extend or override Onepage's behavior. Our support team can only provide limited assistance with this.
💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io so we may keep it up to date. Thank you! 🙂