SVG Element in Funnel and Website Builder

An SVG is an image file format that allows for easy updating of colors within the funnel and website builder. Most background and design elements in FG Funnels templates have been converted to SVGs for easy editing. You can add your own SVG files in the builder using the SVG element.

In This Article:

• General SVG Options
• Advanced SVG Options

To add an SVG element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Custom section, select the SVG element and drag it to the desired location on the page.

General SVG Options

• SVG Options:

  

  • From the SVG options box, paste in your SVG link or click the picture icon to select from your media library or upload to your library.
  • Select the Open SVG Editor box to make changes to the color of different parts of your SVG and save changes

  • Adjust width and height of your SVG if desired. If you set one and leave the other blank, FG Funnels will automatically set the other to be proportional.

    Actions: Select your SVG action to be performed when a visitor clicks the SVG from None, Open Popup, Go to Website URL

    

  • None: Nothing happens when a visitor clicks the SVG
  • Open popup: When SVG is clicked, the popup for the page will open.
  • Go to Website URL: This option allows you to add a URL of a page that the user will be sent to when the SVG is clicked.
• Other General Options:
  • Change the name of the element from the first box in General Options.
  • Use the Align option to change the alignment of the SVG within it's container
  • Add margin to add space around your SVG.

Advanced SVG Options

• Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
• Custom class and CSS selector allow you to make CSS adjustments that target this element.