How to add a code snippet


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.


 

Border

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


 

Padding

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.

 

Other guides you might be interested in:

Adding Focus to your Bookmark Website

How do I move or re-size modules that are already on my page?

How do I remove a module from my page?

 

 

Bookmark Supports your Success
 

Ask An Expert:  Get sound advice from our community, ask questions and get answers quickly and easily.

 

Bookmark Pro: Members get premium support from our dedicated success team - Chat with us one-on-one by clicking the chat icon inside Bookmark.

 



↵   Back To Topics