SVGs (Scalable Vector Graphics) are more than just visuals—they are a versatile tool to make your website/funnel stand out. With options to customize colors, adjust sizes, and set up actions like pop-ups or redirects, you can create a seamless and visually appealing experience for your audience. From adjusting sizes and colors to setting up actions like pop-ups or redirects, you will have full control over how your SVGs look and function.
General Settings #
Element Name/Title #
The General Settings feature displays the default name/title of the currently selected Edit option. You have the option to either keep the default name/title or rename it to better describe the element.
SVG URL #
To display an SVG on your page, simply type its URL in the dedicated field labeled SVG URL or click the image icon to add from the CRM’s Media Storage or upload directly from your device.
SVG Editor #
When you click on “Open SVG Editor,” it opens the SVG Editor’s page. You can edit each SVG color under “Editor.” You can replace the SVG by inputting the code in the “Raw Editor” section.
Width and Height (PX) #
You can adjust the height and width of your SVG by inputting the desired size number you want.
SVG Actions #
In the SVG Options’ Action section, you can configure the SVG’s behavior by choosing between three actions: Open a Popup, Go to Website URL, or Download File.
- If you select “Go to Website URL,” you will need to specify the page. Additionally, you can toggle Open in New Tab to direct visitors to a new tab when they click.
- If you select Download File, add the file and file name that will be downloaded.
Styles #
The Styles tab provides additional options for fine-tuning the design of your web page.
Align #
The Align feature allows you to adjust the position of your SVG according to your preferences. You can position it to the left, center, or right, or apply justification formatting to enhance readability.
Spacing Option #
The Spacing Option feature offers two ways to fine-tune the placement of your content. The margin allows you to adjust the spacing around your content, and the padding allows you to adjust the spacing from your element to the borders.
Visibility #
The Visibility feature allows you to select which device(s) (mobile devices, desktops, or both) the specific Edit option will be visible on. Simply click on the appropriate icon to highlight your desired choice.
Custom Class #
The Custom Class option enables you to assign a custom class name to your element, making it easier to apply custom styles to that specific element. You can input your chosen custom class name in the dedicated field.
CSS Selector #
If you need to replicate your custom CSS, you can easily copy it by clicking on the Copy icon located on the right side of the reference code.
SVGs are more than just images—they are versatile tools that can elevate your website’s design and user experience. With the ability to customize colors, sizes, and actions, you can create visuals that are not only eye-catching but also highly functional.
Frequently Asked Questions #
How do I add an SVG to my page? #
Type the SVG URL in the SVG URL field, or click the image icon to add one from Media Storage or upload from your device.
Can I change the colors of an SVG? #
Yes. Open the SVG Editor and edit each color under “Editor,” or replace the SVG entirely using the Raw Editor section.
What actions can an SVG perform when clicked? #
An SVG can open a popup, go to a website URL, or download a file, depending on the action you configure.
Can I resize an SVG? #
Yes. Use the Width and Height (PX) fields to set your preferred dimensions in pixels.
How do I align an SVG on the page? #
Use the Align feature under Styles to position the SVG left, center, or right, or apply justification.
Can I show an SVG only on certain devices? #
Yes. Use the Visibility feature to display the SVG on mobile, desktop, or both.
