Advanced Code

This page has information beyond the standard Website Builder widgets to help you achieve extra functionality or formatting.


Embed Widget

Use the embed widget to add third-party content to a page. One way to embed another website content into your website is with iframe code. The Website Builder uses iframe code to embed YouTube videos. You should always specify the width and height of the frame.

NOTE: Not all content from another website will work well with iframe code. Use embedresponsively.com to help build embed codes from third-party media into responsive web pages.

Another <iframe> example is to embed a Google calendar. Read more.



Tables

Quickly generate the HTML code necessary for a table using the HTML Table Generator. This online tool will let you choose from a variety of sizes and let you customize the structure and visual look of the table with a standard selection of color and display options.


External Navigation Links

The Website Builder automatically adds internal pages to the navigation menu. You can also hide any page from the navigation. The directions below are to add an external page link to the navigation menu.

  1. Click Add new page/folder in the Site menu on the left
  2. Enter the Page title
  3. Select a Page type - Default
  4. Click Add page button
  5. Click the Page preferences gear icon
  6. Scroll down and click the Header Scripts blue button
  7. Enter the code in "This page only" field
  8. Click the Add button
  9. Click the blue Save button to save the page

The example code below links to PayPal. It is the "Payments" tab in this website's navigation menu. Replace the highlighted code for any other link.

If you ever find yourself in the situation where you have added some code and now your editor fails to load or a page is suddenly inaccessible, you can use the debug mode to fix it.


Page Titles in Folders

If the page names in your folder are long and break into 2 or more lines, you can make the page title on one line by adding the following code into the header script:

<style>
.widget.extendednavigation ul li a .text
{
    width: 250px;
    text-align: left !important;
}
.widget .extendednavigation ul li:hover ul, 
.widget.extendednavigation li > ul:hover  
{
    width: 250px;
}
</style>