Onepage allows you to add custom HTML, CSS (including SCSS), and JavaScript code to your website. These technologies are essential for creating and designing modern websites. Here is an overview:
HTML (HyperText Markup Language) is the standard language for structuring and presenting content on the web. HTML tags are used to define elements such as paragraphs, headings, tables, images, and videos, which form the basic structure of a webpage.
CSS (Cascading Style Sheets) is used to style HTML elements. With CSS, you can control the visual appearance by setting properties like colours, fonts, layouts, and responsive design.
JavaScript is a programming language that enables dynamic and interactive features on websites. It is used to update content without reloading, create animations, process user inputs, and much more.
With these tools, you can customize and optimize your Onepage website to suit your needs.
🎬 At the end of the article, you'll find our latest video tutorial!
Add custom code to an existing section
Step 1: Select section and open element menu
Move the mouse pointer over the section you want to edit. A gray panel will appear. Click on the second “burger icon” (icon with three lines).
Step 2: Add the "Custom Code" Element
Click on "Add element" and search for the "Custom Code" element.
Step 3: Enter the code
A new code element will now appear in the section. Please click on it to insert your code.
📌 Note: In the custom code section, you have three separate columns available: HTML, CSS, and JS. It is crucial that you enter your code in the correct column to ensure the proper functionality and display of your website.
When you receive code from third-party providers, instructions are usually included that specify which column the code should be placed in. Following these guidelines will help you avoid errors and ensure that your customizations work as intended.
Add custom code in a new section
Step 1: Add a new section
Move your mouse between two sections where you want to insert the code and click on the "+" icon.
Step 2: Select an empty section
Select an empty section in the "Blueprints" tab.
Step 3: Add the "Custom Code" element
Click on the "+" icon and search for the "Custom Code" element.
Step 4: Enter code
A new code element will now appear in the section. Please click on it to insert your code.
📌 Note: In the custom code section, you have three separate columns available: HTML, CSS, and JS. It is crucial that you enter your code in the correct column to ensure the proper functionality and display of your website.
When you receive code from third-party providers, instructions are usually included that specify which column the code should be placed in. Following these guidelines will help you avoid errors and ensure that your customizations work as intended.
Create custom code with AI
You also have the option of creating a custom code using AI. Please read the following articles for more information:
Video Tutorial
For a clearer overview of the process, you can also watch our video tutorial below:
Frequently Asked Questions (FAQ)
Why is my embedded content (e.g. a form) not displayed?
Why is my embedded content (e.g. a form) not displayed?
This can have several causes:
Wrong column: Make sure the code has been inserted in the correct column (usually HTML for <iframe> codes).
Invalid code: Check that the code has been copied completely and correctly, with no missing characters or tags.
Third-party restrictions: Some services (e.g. Typeform) require that the website is publicly accessible or that certain settings are activated.
Browser restrictions: Test the page in a different browser or in incognito mode to rule out cache issues.
Why can't I edit my website correctly after inserting code?
Why can't I edit my website correctly after inserting code?
Personalized code can occasionally cause conflicts with the Onepage code. We recommend removing the code or checking for possible errors. If removal is no longer possible, please contact our support team.
How can I insert the code for the entire project or subpage?
How can I insert the code for the entire project or subpage?
Please take a look at our instructions.
💡Do you have any feedback about 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! 🙂