SVGs (Scalable Vector Graphics) are more than just visuals—they’re 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’ll 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 map 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’ll 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’re 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.