SVG

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.

Text Align

The Text Align feature allows you to adjust the position of your text according to your preferences. You can position the text 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. It’s important to note that these settings only affect the selected Edit option.

• Margin: The Margin feature allows you to adjust the spacing around your content. You can set margins for the top, bottom, left, and right, giving you full control over how your content is positioned within its container. This ensures your design looks balanced and polished.

SVG Options

• 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.

Open SVG Editor

When you click on "Open SVG Editor," it opens the SVG Editor's page. You can edit each SVG color under "Editor," and 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 size number you want.

Actions

• SVG Action: In the SVG Options' Action section, you can configure the SVG's behavior by choosing between two actions: Open a Popup or Go to Website URL. If you select "Go to Website URL," you’ll need to specify the page and can toggle on Open in New Tab to direct visitors to a new tab when they click.

Advanced Settings

The Advanced Settings feature provides additional options for fine-tuning the design of your web page.

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.