The code module allows you to insert a snippet of HTML code onto your web page.

Here’s how to add a code module to your page and use the editing options.


Step 1: Open the target page

In the website builder, open the page of your site that you want to add the code to.


Step 2: Open the Modules tab

In the left sidebar menu, click on Modules:


Step 3: Locate the code module icon

In the Modules sidebar, you will see the Code module icon.



Step 4: Click and drag the code module icon onto your page


Point your mouse at the code module, click and drag it onto your page to where you want the code to be located. Then drop it.

As you drag it around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your code module in the right place. You can add spacers or other elements later to adjust its position if desired.

For this example, we will add a code module to the Menu page in the Organic template.

Below you can see the code module before it was dropped, hovering over the page. The black line indicates the edges of the existing elements that the new module will be placed between when it is dropped.


Step 5: Add your code

Your new code module is added to your page. The code source box should automatically open, or click inside the box to start typing or paste text from another source from your clipboard.

Tip: To move the code box, including removing it to the trash can, click the thick black grab bar in the center-top and drag it.


Step 6: Module formatting options

Once you’ve typed or pasted your code, you might want to add formatting to the module. Click it to open the format options bar:


Here’s a closer look at the format options bar.

Here’s a brief description of each of these options:


Align left - aligns the code to the left of the block


Align center - aligns the code to the center of the block


Align right - aligns the code to the right of the block


Edit HTML code

Clicking this icon opens the code edit box below.



Choose border size (None, Small, Medium, Large) and  style (None, Solid, Dashed, Dotted)



Padding is the amount of white space around your module. Your padding options are: None, Small, Medium or Large.


Step 7: Saving the changes


Once you have finished with your code snippet, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.


This concludes our guide How to add a code snippet module.


Did this answer your question?