Funnel & Website Builder

If you're encountering issues while embedding a form into your website, follow these detailed instructions to correct the problem. This method involves tweaking the embed code to prevent unwanted resizing and ensuring that the form integrates seamlessly with your website’s layout. Step 1: Get the Embed Code First, locate and copy the embed code provided by the CRM for the form you'd like to embed on your site. Step 2: Select the Embedding Location Decide where you'd like the form to appear on your website. This can be a specific post, page, or even a widget area depending on your site's layout. Step 3: Add a Custom HTML Element Next, open your website’s editor and insert a custom HTML block or element. For WordPress users, this is done through a ‘Custom HTML’ block. Step 4: Adjust the Embed Code Before embedding the code, you’ll need to make an essential modification: Locate the section of the code that controls the form’s automatic height adjustment. This script is often the cause of embedding problems. Either remove or comment out this script to stop it from auto-resizing the form. Step 5: Manually Set the Form’s Height Once the auto-adjusting script is removed, set the form's height manually. You can add this height directly to the embed code or use CSS. Start with a height around 200px, then adjust it accordingly. Step 6: Test and Fine-Tune After embedding the form with the updated code, preview the website to ensure the form is displayed correctly. If it still doesn't appear as desired, continue tweaking the height until the layout fits perfectly. Troubleshooting and Tips Form Not Displaying Correctly?  If the form still appears incorrectly, there might be a conflict with your website’s theme or any installed plugins. Disable conflicting elements to troubleshoot. Responsive Design:  Make sure the form adapts well to mobile devices by using CSS media queries to adjust its dimensions based on screen size. Frequently Asked Questions Can I Use This Method on Non-WordPress Platforms?  Yes! This technique applies to any website platform that allows custom HTML embedding. What if I’m Unfamiliar with HTML or CSS?  If you're uncomfortable editing code, use your platform’s built-in form elements for easy integration. This method should help you resolve any embedding issues, allowing your form to display seamlessly across your website.

Picture-in-picture (PIP) mode allows a video to remain visible in a small window even after a user scrolls past its original location on a webpage. This feature helps boost user interaction and ensures viewers can continue engaging with video content as they browse the rest of the page. How PIP Mode Operates Hosted Video Requirement: For PIP mode to work, the video needs to be hosted directly within the CRM. Videos from external sources such as YouTube or Vimeo are not supported for this feature. Activation Process: PIP mode can be activated by toggling an option within the video settings in the CRM’s page builder. Steps to Activate Picture-in-Picture Mode Setting up PIP mode is easy and can be done quickly to enhance the user experience on your funnel pages. Step-by-Step Guide to Enable PIP Mode: 1. Open the Page Builder:  Access the specific funnel or website page where you wish to add or have already placed the video.  2. Upload Your Video:  Make sure the video you want to use is uploaded to the CRM’s media library and placed in the desired location on your page.  3. Activate PIP Mode:  Go to the video element settings and find the "Enable PIP Mode on Scroll" option. Toggle this switch to turn on the PIP functionality.   4. Save and Preview:  After making the changes, save your work and preview the page to ensure the PIP mode functions correctly as you scroll past the video. Benefits and Use Cases Boosts Engagement: Users can continue watching the video while exploring other parts of the page, keeping them engaged longer. Higher Conversion Potential: By keeping essential video content, such as calls-to-action or product demos, always visible, the chances of conversion can improve. Flexible Application: Suitable for many content types, including tutorials, customer testimonials, and product showcases. Troubleshooting PIP Mode Video Not Staying On-Screen: Verify that the video is hosted within the CRM itself and not linked from an external platform. PIP Mode Not Activating: Double-check the video settings to confirm the PIP mode toggle is enabled. Frequently Asked Questions Can I use PIP mode with videos hosted on external platforms? No, PIP mode only functions with videos hosted directly within the CRM. Is PIP mode available for all pages? Yes, as long as the video is hosted within the CRM, PIP mode can be used on any funnel or webpage. This guide ensures that PIP mode can be easily implemented, providing a more dynamic experience for users while enhancing the visibility of your video content.

Important Notes: This process is designed specifically for ClickFunnels 1.0. Currently, there is no importer available for ClickFunnels 2.0. Always use the live (published) link, not the shareable link from ClickFunnels. It's recommended to import one Funnel Step at a time to ensure a seamless transfer. Step-by-Step Guide: 1. Start by Clicking on "+New Funnel"  2. Name Your Funnel and Click "Create Funnel"  3. Select "Add New Step"  4. Input the Page Name, Path, and Paste the ClickFunnels Link  5. Check the Confirmation Box  6. Click "Create Funnel Step" to Finalize  By following these steps, you'll successfully import each step of your funnel from ClickFunnels into your Funnel Builder.

Adding No-Index Tags to Prevent Indexing To stop search engines from indexing certain pages, you need to add specific HTML tags. There are two primary types of tags available for this purpose: Google-Specific Tag:  This tag will block only Google from indexing the page: html Universal Tag:  This tag will prevent all search engines from indexing the page: html Steps to Add No-Index Tags 1. Access Your Page Editor:  Open the builder where your website or funnel page is hosted. 2. Open the SEO Metadata Settings:  Find the option labeled "SEO metadata" in the menu.  3. Add a New Custom Meta Tag:  Click on “Links & Tags,” then choose the "Add" button next to “Custom Meta Tags” to create a new tag.  4. Input the Tag Information: For blocking Google only, input googlebot in the name field and noindex in the content field. For universal blocking, input robots in the name field and noindex in the content field. 5. Save Your Changes: Click the "Update SEO Meta" button, then make sure to save the changes.   Key Things to Keep in Mind Page-Specific Tags: Each page you want to block must have the no-index tags applied individually. Timing: Search engines may take a few days to several weeks to recognize these tags and remove the pages from their indexes. Frequently Asked Questions Q: How long does it take for the changes to take effect? A: The timing can vary, but typically search engines will detect and apply the changes within a few days to a few weeks. Q: Will this affect the SEO of my site? A: No, applying noindex tags to specific pages should not impact the ranking of other pages on your site. Q: Can I undo this if I change my mind? A: Yes, by removing the noindex tags, search engines will eventually re-index the pages.

Incorporating images into your webpage or sales funnel offers a streamlined way to enhance the design and overall user interaction. By using well-placed visuals that align with your message, you can create a more visually appealing site that grabs the visitor’s attention and communicates your ideas effectively. Customization Settings When you're modifying the image element on your page, most configurations are accessible through the General Settings panel located on the left side of the editor. Element Label At the top of the General Settings section, you’ll see the element name, which serves as the default label for the specific part you’re editing. You can keep this name or change it to something more descriptive to simplify navigation as you build your page. Adjusting Spacing In the General Settings, you can fine-tune the spacing around your image. Padding: Control the distance between the image and the content around it by adjusting the left, right, top, or bottom padding. Margin: Customize the space between the image and its surrounding elements, either at the top or bottom. Background Color To alter the background color of your image, click on the content block you wish to edit. You can then pick a color from the available options or input a specific color code that matches your branding guidelines. Transparency Adjust the transparency of your image's background by selecting from None, Light, Half, or Heavy opacity options, depending on the level of fade you need. Alignment Options Position your image or text according to your preference, whether that's aligning to the left, center, right, or using full justification. Image Upload To add an image, click the image icon to access your media storage. From there, upload your file and double-click on it to place it into the editing area. Image Optimization You can toggle off image optimization if necessary, but a warning will pop up before you proceed. Image optimization can reduce the overall load time of your webpage by as much as 80%. Setting Dimensions You have the option to input specific width and height values (in pixels) for your image. Alt Text for SEO To improve SEO, add a brief description of the image in the Alt Text field. Image Actions Choose what happens when someone clicks on your image. Actions can include: None: Clicking the image won’t trigger anything. Open Popup: Displays a preset popup window. Go to URL: Redirects visitors to another website, with the option to open the URL in a new tab. Hide or Show Elements: You can specify which elements should appear or disappear when the image is clicked. Scroll to Element: Automatically scrolls the page to a selected element. Call or SMS: Initiates a phone call or SMS message to a pre-configured number. Email: Opens the user’s email client with the designated email address. Animation Options Animate your image with several entry effects, such as: Fade, Slide, or Bounce: These add movement as the image enters the viewport. Flip or Rotate: More dynamic effects for a bold entrance. Zoom: Makes the image appear with a zoom-in effect. Loop Animations: Continuous motion for more engaging visuals. Advanced Customization The Advanced Settings tab offers more options for customizing the image, including border-radius, visibility controls, and the ability to add custom classes or copy CSS code for later use. Shadows Apply shadow effects to enhance the depth of your image. You can choose from outer or inner shadows and customize factors such as shadow size, spread, and color. Image Border and Radius You can modify the image border, selecting from different styles, and adjust the border-radius to display your image as a square, circle, or oval. Visibility Controls Manage the visibility of the image on desktop and mobile devices using the Visibility section. You can preview the changes across device types using the icons in the funnel builder. Custom Class & CSS Selector Enter your custom class code in the provided field or copy the CSS selector for future use by clicking the copy icon.

The Image Feature allows you to integrate an image with a headline and descriptive text. It's ideal for showcasing team members or promoting products and services on your funnel and website pages. On the left side of the editor, you’ll find various customization options for your Image Feature, which we’ll explore below. General Settings Element Name/Title In the General Settings section, you will notice the Element Name/Title field. By default, a name will be assigned to the element, but you can rename it for better organization and easy reference as you work on your page.   Text Shadow This feature enables you to apply shadow effects to your text. You can choose from options such as light fade, mid-level shadow, or strong shadow effects.   Letter Spacing With the letter spacing tool, you can adjust the space between individual letters. You can either increase the spacing or use a negative value to reduce the space and bring the letters closer together.   Background Color You can change the background color by selecting the specific content you want to modify and choosing a color from the palette. If you need a specific shade, you can manually input the color code.   Text Alignment The Align option allows you to position your text as you like within the Image Feature box, choosing between left, right, center, or justified text alignment.   Typography Settings With the typography options, you can select from the headline or content fonts defined in your settings or opt for a custom font from the dropdown menu.   Image Settings Image Upload Clicking the image icon on the right side of the image placeholder brings you to the storage page where you can upload an image. Once uploaded, you can copy its URL by clicking the clipboard icon next to the delete button. Then, return to the editor and paste the URL to display the image.   Optimize Image Loading For better page performance, you can optimize image loading by toggling this feature. However, disabling it may affect page speed, so use caution. Image optimization can significantly reduce page load times.   Dimensions (Width & Height) Input custom width and height for your image by entering values in pixels in the respective fields. Alt Text for SEO Adding Alt text helps with SEO, so be sure to input a relevant description of your image. Icon and Color Customization Add Icon To enhance your image feature, you can add an icon next to the headline. Search for an icon by name, or browse through the available options.   Color Settings You can modify the colors of different elements: Headline Color: Adjust the color of your headline text. Text Color: Customize the text color for the body of your content. Link Text Color: Specify the color for any links within the text.  Spacing and Layout Padding and Margins You can fine-tune the positioning of your content using padding controls (left, right, top, bottom) and margin adjustments (top and bottom).  Column Configuration Adjust the column sizes to make the text or image larger. You can also change the order in which the image and text appear, choosing either “text before image” or “image before text.”  Actions Image Actions Decide what happens when someone clicks on the image. You can choose to open a popup or redirect users to a website URL. If you select a URL, you can also enable the option to open it in a new tab.  Font and Theme Adjustments Font Size (Desktop & Mobile) Adjust the headline and body text font sizes for both desktop and mobile views to ensure your content is responsive.   Themes Select a pre-designed theme for your image feature. However, keep in mind that choosing a theme may override some of your previous customizations.   Advanced Settings Height Line Adjustment This tool allows you to control the height of your element’s container by adjusting the size bar.  Feature Image Border & Radius You can apply a border to your feature image and customize its appearance. Additionally, you can control the curve of the image border by modifying the image radius setting.   Image Shadow and Effects If you wish to apply shadow to your image, the Image Shadow feature allows you to adjust its intensity. You can also apply effects like Full Color or Black & White.   Additional Customization Visibility Options Choose whether the element should be visible on mobile devices, desktops, or both by toggling the visibility settings.   Custom Class and CSS Selector For advanced styling, you can enter a custom class name and copy the corresponding CSS code if needed.  

Adding an Image Slider to your website or funnel is a simple process. Just follow these instructions to get started: Step 1: Locate the Image Slider Element In your website or funnel builder, find the Image Slider element. Drag and drop it onto the desired area of your page to begin.  Step 2: Customize Your Slides Next, you can begin adding your images to create custom slides. Adjust settings such as padding, shadows, and clickable areas to suit your design preferences.  Step 3: Add Animations to Your Slider To make the slider more dynamic, explore available animation features. These may include options like smooth auto-animation, infinite loops for continuous display, and hover-triggered effects for added interactivity.  Troubleshooting and FAQs Common Issues My Image Slider isn't showing properly: Ensure that all images are optimized for web use and have consistent dimensions. Double-check your animation settings for proper configuration. How can I make my slider more engaging?: Utilize high-resolution images that are relevant to your content, and play around with various animation styles to create a more captivating experience for your audience.

Grasping the Concept of Custom Color Values Custom color values enable you to apply a consistent color scheme across your website or funnels, ensuring that your brand's aesthetic remains uniform. This approach proves beneficial for: Keeping the design elements aligned with your brand's color palette. Efficiently updating multiple pages or components with a unified color scheme, without needing to edit each section individually. Steps to Implement Custom Color Values Integrating custom color values into your website or funnel is straightforward. Below is a step-by-step guide to help you implement them. Step 1: Choose Your Color Codes Start by selecting the specific colors for your website. Colors are identified by their unique hexadecimal (hex) codes—a six-character combination that begins with a hash symbol (#). For example, the hex code for the color green is #00FF00. Step 2: Set Up Custom Values Go to the custom values section in your CRM (Customer Relationship Management) system. Create a new custom value for each color you'd like to incorporate. For instance, you can label one custom value as "button color" and assign it a hex code, such as #FFC0CB for pink. Copy the key associated with your custom value to use later. Step 3: Apply Custom Values Next, head to your website or funnel editor: Select the design element you want to modify, such as a button. Instead of manually typing in the color code, paste the custom value key that corresponds to the color you created. Save the modifications. Troubleshooting Common Issues In some cases, your custom color values may not immediately display as expected. Here are a few troubleshooting tips: Refresh the Editor: If your custom color isn't showing, try refreshing the editor. This forces it to recognize the newly added custom value. Double-Check for Typos: Ensure that the custom value name or key is typed accurately, with no extra spaces or misspellings. Frequently Asked Questions Q: Can I apply custom color values to any element on my website? A: Yes, these values can be used for various elements, including text, buttons, and background sections. Q: Is there a limit to the number of custom color values I can create? A: While there's no strict limit, it's recommended to only create custom values for colors you plan to consistently use across your site. This helps keep the process efficient and organized.

Step 1: Opening the Page Editor Start by navigating to the funnel or website page where you plan to introduce the pop-up. Click on the "Edit" button to access the page editor.  Step 2: Adding a Custom JS/HTML Element Once in the page editor, look for the "Add Element" option.  Scroll down until you reach the "Custom" section, then choose "Custom JS/HTML." Drag this element to the top section of your funnel or webpage. Step 3: Inserting JavaScript Code Now, click on "Open Code Editor."  Paste the provided JavaScript code into the editor field.   Step 4: Personalizing the Pop-Up Inside the code, find the "Editable Options" section. This is where you can customize different elements of the pop-up, such as: Title of the pop-up (e.g., "Do you accept Cookies & Privacy Policy?") The message shown to users The "More Information" link and its title The "Accept Cookies" button title Styling options including color and dimensions Make sure to only modify the text enclosed within the quotation marks (' ') as noted in the code's comments. For example, to change the pop-up message, locate the appropriate line in the code and replace the default message. Step 5: Saving the Customization Once you're satisfied with your changes, click "Save" to apply them to your page. Practical Applications and Examples E-commerce: Use the pop-up to inform customers about how cookies are used to track cart contents and suggest products. Blogs: Clarify that cookies are used to personalize content, ads, and for analytical purposes. Service-Based Websites: Explain how cookies help enhance user experience and improve website functionality. Troubleshooting and FAQs Why isn't my pop-up displaying?  Ensure that the Custom JS/HTML element has been placed at the very top of the page and that all changes have been saved. Can I adjust the position of the pop-up?  Yes, you can change the pop-up's position by editing the "popupstylez_index" and other relevant style options in the code.

Key Advantages Boosted Legal Protection: Requiring customers to acknowledge your terms reduces the chances of legal disputes and chargebacks. Increased Security: It helps safeguard your business by ensuring customers are well-informed about your policies before making a purchase. Effortless Integration: Incorporating terms and conditions into your order forms is easy, with a user-friendly toggle feature, allowing for clickable links to detailed terms. Simple Steps to Add Terms and Conditions Integrating terms and conditions into your order forms is a quick process. Follow these steps to ensure proper implementation: Access Your CRM Dashboard: Go to the 'Sites' section from your CRM dashboard. Edit Your Funnel or Website: Find the funnel or website with the relevant order form and click "Edit". Open Advanced Settings: Within the funnel or website, locate the order form and open the 'Advanced settings' tab. Activate Terms and Conditions: Toggle on the "Terms and Conditions" option to enable the feature. Input Your Terms: Add the terms and conditions text into the provided field. You can include clickable links to a separate page that outlines the full terms for customers who want more detailed information. Customer Interaction Once this feature is enabled, customers will see a checkbox on the order form, requiring them to agree to your terms before proceeding. This ensures that every customer acknowledges your conditions prior to finalizing their purchase. Practical Examples and Applications If you are offering a subscription service, adding a terms and conditions checkbox ensures that customers understand the payment schedules and cancellation policies, thereby reducing misunderstandings and minimizing the risk of chargebacks. Troubleshooting and Common Questions What should I do if customers can't complete their purchase?  Make sure that the checkbox isn’t hidden or obstructed by any page elements. Additionally, check that the text is visible and the checkbox is functioning correctly. Can I modify the appearance of the terms and conditions checkbox?  Customization options may vary depending on your CRM system, but you can explore the advanced settings for available design features.

In this section, you can adjust various settings for your content. By selecting the "Manage" option, you’ll gain access to a "Reorder" icon, enabling you to modify settings as needed. Additionally, the "Visibility toggle" icon allows you to make your content either visible or hidden. You can also duplicate, save, or remove your content by using the appropriate icons for "Clone," "Save," or "Delete." You can reach these settings through three methods: Selecting "Manage" from the drop-down menu in each section, followed by clicking the Element name or title in the menu that appears on the right side of the page. Clicking the Settings icon next to each area box (labeled GREEN, BLUE, LILAC, and ORANGE). Clicking the double arrows (>>), located below the taskbar in the upper left corner of the page. These methods will direct you to the Settings, which are divided into two sections: General Settings and Advanced Settings. General Settings This area contains the primary options for editing. Element Name/Title: You’ll see the default title of the element you're working on, which can be renamed if desired. Spacing Option: Adjustments to spacing apply only to the selected content. For instance, if you modify the settings for a specific Row (represented by the BLUE box), those changes will only affect the content in that Row. Padding (Left, Right, Top, Bottom): Move content in any direction by adjusting the appropriate toggle bar. Margin (Top, Bottom): Adjust the top and bottom margins of your content. Background Color: To change the background color for a Section, Row, Column, or Element, click the area you want to modify. Box Shadow: Adds shadow effects to a box, making its border more prominent. Sticky: This option ensures that Sections remain fixed at the top or bottom of the page as you scroll. BG Media Type: Choose between an image or video for your background media. BG Media: Add a background image by selecting the image button, uploading or choosing an image, and using the URL provided at the top right of the page. Allow Row to Take Entire Width: Toggle this option to allow the Row to occupy the full width of the page. Advanced Settings The Advanced Settings offer further customization, including borders, visibility, and CSS options. Border Option: Personalize the borders around your content. Choose a border type (excluding "No Border"), and you’ll unlock additional settings for style, width, color, and radius. Style: Choose the type of border you want. Width: Adjust the thickness of your border. Color: Select the color of the border. Radius: Modify the corner radius to make edges sharper or rounder. Radius Edges: Specify which edges to adjust (all, top only, or bottom only). Visibility: Manage whether content is visible on mobile devices, desktops, or both by selecting the visibility icon. Custom Class: Input custom classes in this field. CSS Selector: Copy custom CSS by clicking the Copy icon next to the reference code.

Want to make it easy for visitors to find your business? The Map Element is the perfect tool to embed on your website. It provides a quick visual guide to your business location. With several display options to choose from, you can personalize the map to suit the overall style of your site. This feature helps users pinpoint your business in an instant. Element Naming In the General Settings section, you will find the current name or title of the editing feature you're working on. You can either keep the default title or modify it to something more appropriate, which is particularly helpful when you have several elements and need to distinguish between them. Text Alignment Options With the Text Align tool, you can choose how your text will appear on the page. You can align it to the left, center, or right, or use the justify option to ensure your text looks well-balanced and readable. Search Box Feature By selecting the "Open Search Box" option, a map interface opens where you can input your business address and mark the exact spot using a marker. You can also switch between map views, such as Map or Satellite, zoom in or out, and even enable a full-screen display. Map Type Customization The Map Type feature lets you choose how your location is displayed on the map. You can select from four distinct viewing modes: road map, terrain, satellite, or hybrid. Marker Color Customization You can change the marker’s color by selecting from a palette or entering a custom color code. This feature can enhance the visibility of your business location, ensuring it stands out on the map. Zoom Control The Zoom feature lets you control how much detail is shown in your map by adjusting the zoom level. Simply drag the slider to the right to zoom in closer to your marker. Map Dimensions You can personalize the size of the map by adjusting its width and height. The maximum size for both dimensions is 640 pixels. Retina Display For a sharper, more detailed map, enable the Retina feature, which doubles the map’s original dimensions. For example, if your map is 300x200 pixels, this feature will increase it to 600x400 pixels. Opening Maps in a New Tab If you want to give visitors the option to open the map in a separate browser tab, enable the "New Tab" feature. When this setting is off, the map will open in the same window. Advanced Customization Advanced Settings provide additional design control over how the map and other web elements look on your site. Visibility Control The Visibility feature allows you to specify which device—mobile, desktop, or both—the element should appear on. You can toggle between options by selecting the corresponding icon. Custom Class Application With the Custom Class option, you can assign a specific class to an element, making it easier to apply unique styling via CSS. CSS Selector If you wish to reuse your custom CSS settings, simply copy the selector by clicking on the Copy icon next to the code.

What is a Canonical Link? A canonical link is a tool used to inform search engines about the primary version of a webpage when there are multiple pages with identical or similar content. By establishing a canonical URL, you help search engines avoid treating duplicate content as separate pages, ensuring that the correct version is indexed and ranked. For example, if two different URLs display the same content, setting one as the canonical URL directs search engines to prioritize that version. Steps to Add a Canonical Link to Your SEO Metadata Here’s how you can add a canonical link to the SEO metadata of your website or funnel: 1. Open the Page Editor: Navigate to your website or funnel’s page editor or builder. Look for the "SEO Meta Data" option in the top menu.  2. Find the Canonical Links Section: In the SEO Meta Data settings, scroll down to locate the "Canonical Links" option under the "Links & Tags" section. Click the "+Add" button to proceed. 3. Enter the Canonical URL: Input the URL of the page you want to establish as the canonical version. This is the page you want search engines to recognize as the main source. 4. Save Your Changes: After adding the canonical URL, save your SEO metadata settings. Also, ensure you save the changes to the webpage or funnel.  Verifying Your Canonical Link To confirm that your canonical link is correctly implemented, follow these steps: 1. Preview the Page: First, preview the page where the canonical link has been added.  2. View the Source Code: Right-click on the page and select "View Page Source" to open the HTML source code for that page.  3. Locate the Canonical Link: In the source code, search for the canonical link element and check that it points to the correct URL. Troubleshooting and Common Questions Why isn’t my canonical link showing?  Be sure that both the SEO metadata settings and the page have been saved properly. Additionally, review the URL to confirm there are no errors. Can I assign more than one canonical URL to a page?  No, it's important to have just one canonical link per page to avoid confusing search engines.

Adding a Minute Timer to your funnel page is a straightforward way to integrate a countdown clock. This tool lets you adjust the countdown length in hours, minutes, and seconds to match your needs. By setting a timer, you can generate urgency, driving user interaction and enhancing the success of your page. Basic Configuration Name/Title for Element When using the General Settings, the system will display a default name for the current element you're editing. You can modify this name to make it easier to identify, especially when managing several elements on a page. Color Customization Timer Color The Color Options function lets you alter the timer's visual appearance. You can pick from a range of colors or enter a custom color code for a precise match.  Label Color Similarly, you can modify the timer's label color. If your desired color isn't available, you can add a custom color by typing the corresponding code. Positioning Options The Float option allows you to set the timer’s placement—left, center, or right. You can also apply spacing controls, such as "space-around" or "space-between," to improve layout and presentation. Typography Customization You can adjust the font type of the timer text using the Typography Type function, which offers various font styles, including headings and body text.  Language Settings The Translate option allows you to display the timer in your preferred language by selecting from the available options.  Time Zone Selection When setting the timer, you can choose the appropriate time zone, ensuring accuracy regardless of where your audience is located. Responsive Font Sizes Font Size for Different Devices Using the Mobile and Desktop Font Size feature, you can easily tailor the size of your timer's text for both mobile and desktop platforms. Subtext Font Adjustments Similarly, you can tweak the subtext font size for both desktop and mobile versions using the Desktop and Mobile Subtext Font Size control.  Timer Conclusion Settings Meeting Time Configuration With the Meeting Settings, you can specify the exact time (hours, minutes, and seconds) when you want the timer to end.   Action Upon Timer Expiration The Expire Action feature lets you control what happens after the timer ends. You can set it to redirect users to another URL. Revisit Settings The Revisit Action allows you to determine what happens when users return to the page after the timer has expired. You can configure it to reset the timer, hide/show elements, or automatically expire after a set number of days. Spacing Adjustments Margin Controls You can use the Spacing Options to modify the margins at the top or bottom of your content. Depending on the section you're editing, the settings will only apply to that specific section (e.g., rows in a blue box). Additional Settings Advanced Controls Advanced settings provide further customization for visibility and styling, offering more control over how your content is displayed.  Visibility Options The Visibility feature enables you to select whether an element should be shown on mobile, desktop, or both devices. Custom Classes and CSS The Custom Class feature allows you to assign a unique class to an element. Additionally, you can copy the CSS selector for further styling adjustments.

The navigation bar element enhances your page by adding a menu at the top. This is particularly useful for directing users to various sections on the same page or to other pages in your funnel. When you insert a navigation menu, a set of customization options will appear on the left-hand side. General Configuration Element Name/Title: Within the General Settings, you'll see the current name of the element you're modifying. You can retain the default title or rename it to something more specific. Renaming is suggested as it helps you identify the element easily later when reviewing your funnel components. Spacing Customization Padding Adjustments: The Padding feature offers sliders to adjust the content's positioning on the left, right, top, and bottom. Dragging these sliders allows you to fine-tune the space around your element. Margin Adjustments: Similar to padding, the Margin settings let you alter the spacing above or below your content. This is done by dragging the sliders to achieve the desired amount of negative space. Customization Options Background Color: You can personalize the background color of the navigation menu by selecting from the available color palette. This feature allows for desktop-specific adjustments. Mobile Background Color: This option lets you select a different background color for mobile users, enhancing both visibility and user experience. Text Alignment: Text in the menu can be aligned to the left, right, or center using this feature, ensuring the layout meets your visual needs. Menu Items: You can easily add essential links like Home, About, or Contact to your menu by using the "Menu Items" feature. New items can be added by selecting the "+ Add Item" button. Typography & Font Size Font Sizing: Font size adjustments for both mobile and desktop views are made by dragging size bars. Ensure your text displays properly across different devices by using the preview mode in the editor. Typography Type: You can select from preset or custom fonts for your navigation bar text, with options for both headline and content fonts. Icons & Colors Mobile View Icon: This feature allows you to include an icon in your navigation for mobile users. A search bar is available to help you find the exact icon you want. Color Options: Customize text, icons, and background colors with different settings for regular and bold text, italics, and hover states. Menu Item Spacing: You can adjust both horizontal and vertical spacing between menu items by manipulating sliders or inputting precise numbers. Brand Logo Settings: Enable the "Logo in Menu" option to display your brand logo on the navigation menu. Adjust the width and height for an ideal fit, and add SEO-friendly Alt Text. Actions & Advanced Settings Actions: You can assign actions like "Open the popup" or "Go to website URL" when users interact with menu elements. Line Height: This feature adjusts the space between lines of text, improving readability. Visibility & CSS Options: Control whether certain edits appear on mobile, desktop, or both by adjusting the visibility settings. CSS Selector: You can copy the Custom CSS code for use in other areas by clicking the copy icon.

The Confirmation of Purchase feature enables you to integrate a confirmation section into your funnel page. This is especially useful when capturing orders on a previous page and having a confirmation page as the following step in your funnel. Upon adding this element, a range of customization options will be accessible from the left-hand menu of the builder. Basic Settings Element Label: In the General Settings section, you'll first encounter the Element Label. By default, this label is the name of the current element you're modifying. You can either retain the existing name or change it. Renaming the element is particularly helpful when building funnel pages with multiple elements, making it easier to manage and identify them. Background Shade: To change the background shade of your order confirmation element, click on the color icon and select from the available palette. If your preferred shade isn’t listed, you can manually input a color code and hit "Add Color." Font Customization Font Style: You can choose a font style for your order confirmation element by selecting from a dropdown. The available options include either fonts you previously set for headlines and content or custom fonts. If you opt for a custom font, simply click "Default Font" to browse various options. Text Size for Mobile and Desktop: To adjust the font size for the order heading on both mobile and desktop, use the size adjustment bars or input a specific number in the field. Sub-Text Font Size: Likewise, you can change the font size for sub-text for mobile and desktop by adjusting the size bars or entering a value. Color Settings Order Heading Color: Edit the color of the order heading text. Headline Color: Modify the color of the headline text. Product Detail Color: Change the color of the product detail (dynamic item) text. Total Text Color: Customize the color of the "Total" field text. Shipping Address Color: If a shipping address is included, you can change its color here. Spacing Adjustment: There are multiple options for adjusting the spacing around your content. Padding (Top, Bottom, Left, Right): You can shift your content in various directions by using toggle bars that control the padding for the top, bottom, left, and right. Margins (Top and Bottom): You can also adjust the top and bottom margins using similar toggle bars or by inputting specific numbers to maintain consistent spacing throughout your funnel. Advanced Features Device Visibility: Determine if you want this element to be visible only on mobile, only on desktop, or both. You can select the appropriate icon to highlight and enable your choice. Order Title Toggle: You can choose to display or hide the order title form field. Order Title Text: This allows you to modify the text in the Order Title (Order Confirmation) field. Item and Price Text: You can also customize the text for the Item and Price form field. Total Toggle: You have the option to show or hide the "Total" field. Total Field Text: You can modify the description in the Total form field. Shipping Details Toggle: Choose to display or hide the Shipping Details field. Shipping Details Title: Edit the title text for the Shipping Details form. CSS Customization: If you need to copy the custom CSS code for the element, click the "Copy" icon to obtain the reference.

A paragraph element is designed to let you input sentences or create the main body of a webpage. Here’s how you can incorporate and customize it to fit your design. Basic Customization Adding paragraphs to your webpage is simple. Just choose the paragraph block, drag it to where you want it, and drop it in place within the workspace of your editor. Once you’ve positioned the paragraph, you can adjust its style and content to ensure it fits seamlessly with your website’s overall design and aesthetics. Renaming Elements You’ll find the editing toolbar for each element on the left side of the editor. You can change the default title or name of each section at the top of the screen, making it easier to navigate and organize your webpage as you build it.   Background Color To modify the background color of any text block, highlight the section you want to change, and select your desired shade. If the available options don’t meet your needs, you can add a custom color by inputting the color code and clicking "add color." Adjusting Opacity You have control over the transparency level of your content, allowing for various levels of fade effects. The opacity can range from none (fully opaque) to light, half, or heavy transparency.   Adding Shadows If you want to add a shadow effect to your text, select the thickness or intensity of the shadow to make your content stand out.  Letter Spacing This option lets you control how far apart each letter appears. Adjusting the spacing can create different visual effects depending on the style you want to achieve.  Text Alignment You can align your text to the left, center, right, or use the justify option to make sure it aligns evenly across the page.  Font Size for Mobile and Desktop Easily adjust the font size for both mobile and desktop views by using the provided sliders. You can switch between desktop and mobile preview modes to ensure that your content looks great on all devices.  Typography Choose from the available fonts or select a new one from the drop-down list to give your content a fresh look.  Adding Icons You can enhance your design by adding icons. Browse through the available options or type a keyword into the search bar to find a specific icon.  Text Color Customization Standard Text: Adjust colors for non-bold text. Bold Text: Modify the color for bold text here. Italic Text: Apply a color to italicized text. Underline Text: Customize the color of underlined text. Link Text: Choose the color for any linked text. Icon Color: Only the color of the selected icon will change, regardless of its position on the page. Content Spacing There are several options to manage the spacing between elements on your page. These adjustments apply to specific sections, such as rows (highlighted in blue). Padding: Move content horizontally or vertically within its space. Margins: Increase or decrease the space around the top or bottom of your content. Advanced Border Settings Borders can be customized by type, style, width, color, and even radius, allowing for curved edges. Border Types: Choose from solid, dashed, or dotted styles. Border Width: Adjust the thickness to make your borders more pronounced. Color: Change the color using the color icon. Radius: Adjust to round off the corners, with higher values resulting in more curvature. Radius Edge: Decide whether to round all edges or only specific ones like the top or bottom. Line Height Use the slider to increase the space between lines, adjusting the overall height of the element box.  Text Transformation Easily switch between uppercase, lowercase, or capitalized text using the text transformation tool.   Visibility Settings Control whether elements are visible on both mobile and desktop, or limit visibility to one platform.  Custom Classes and CSS Selectors You can assign a custom class by filling in the designated field or copy the CSS selector with a simple click for further customization. 

Your funnels and websites serve as the digital representation of your brand, playing a crucial role in expanding your audience and attracting customers. While it's important to ensure that your site is visually appealing and cohesive, you may not always have the time or expertise to perfect every aspect. That's where pre-designed components come in handy. These elements are prebuilt, saving you both time and money, while still allowing you to personalize them to match your vision. How to Insert Pre-Designed Components To add these elements, open the Funnels/Websites Builder and access the toolbar on the left by clicking the "+" button. At the bottom of the menu, you'll find the pre-designed components, categorized into four types: Buttons: Pre-styled buttons designed to enhance your website's look. All you need to do is assign the action for the button's next step. Images: These are high-resolution, royalty-free images that you can use without navigating through a media library, making the process faster and easier. Social Media Icons: A selection of sleek, color-coordinated icons representing popular social media platforms. You can customize which icons to display while maintaining a consistent appearance. Progress Bars: These are useful for displaying progress indicators, milestones, or loading bars, without needing advanced coding skills. To use any of these elements, first choose the category, then drag and drop the desired component onto your funnel or website. Once added, you can further customize it by adjusting the settings in the panel on the right. If the settings panel isn’t visible, simply click on the element to access it. Once you're satisfied with the changes, click "Save" to store them or "Publish" to make the updates live. This way, you can enjoy a professional-looking site without investing excessive time or money in perfecting every element yourself.

Incorporating a progress bar into your website or funnel can significantly enhance user engagement by visually representing their progress. With a wide array of customization options available, you can easily design a progress bar that aligns with your site's aesthetics and functionality. This guide will walk you through the key customization settings to help you create a seamless user experience. General Configuration Naming the Element The General Settings section allows you to specify a name or title for the element you’re customizing. This default name can be edited, allowing for more precise identification during the design process. Adjusting Background Color To change the background color of the progress bar, simply select the area you want to modify and choose from preset colors or input a custom color code. Choosing Typography You can modify the font style used in the progress bar by selecting a font type from the settings. You have the flexibility to use either a preset or custom font for headings or content. Text Customization Percent Display Within the Text Options, you can add or modify the text that appears within the progress bar, such as percentages. Spacing Customization Adjusting Margins Under Spacing Options, you can alter the top and bottom margins of your progress bar to better fit the overall layout of your page. Themes Selecting a Theme The Themes tab allows you to choose from several pre-designed themes. Keep in mind that selecting a theme will override any previously applied color settings, but you can easily revert changes by clicking the undo button. Advanced Customization Border Settings Within the Advanced Settings, the Border Option allows you to define the type of border you want. Options include Solid, Dashed, or Dotted lines. You can also adjust the thickness, color, and radius of the border to create rounded corners if desired. Text Shadow Add a shadow effect to your text through the Text Shadow option. You can adjust the shadow intensity from subtle to strong. Text Alignment Text Align gives you the flexibility to place your text on the left, center, right, or justify it within the progress bar. Shadow Effects and Size Options Box Shadow You can apply shadows around your progress bar to add depth. Options include drop shadow and inner shadow, with various intensity levels to choose from. Width and Height Adjustments The Percent Width setting allows you to decide how wide your progress bar should be within its container, from 0% to 100%. Additionally, you can adjust the height of the bar using the Sizes dropdown, choosing between small, medium, or large. Offset Color and Visibility Offset Color If your progress bar is not set to 100%, you can select an offset color to fill the remaining space. Options include white, transparent, black, or transparent black. Device Visibility The Visibility option allows you to control whether the progress bar is visible on mobile, desktop, or both. Custom CSS Options Custom Class and CSS Selector For developers who need more control, the Custom Class and CSS Selector fields allow you to input and copy custom CSS for advanced design needs. By using these features, you can create a fully customized progress bar that not only looks great but also improves the user experience on your site.

Once you've selected a specific section to work on, the next step is to navigate to the Row settings. Here, you have the flexibility to choose how many columns you want, with the option to add up to six. This will serve as the structural base, so it's important to carefully consider how many columns you'll need before proceeding to the next phase: editing the columns. Keep in mind that the row box won't appear until at least one column is selected. Adding a Row Ready to begin adding Rows to your workspace? Start by selecting the Row editing tool located in the upper-center area of your screen, then click on the Add Row button. After clicking, a new row will instantly appear, and you'll be prompted to configure the columns. To confirm that your Row is properly established, hover your cursor over the blank box area until you notice a blue-lined frame—this marks your newly created Row. Rows and the elements placed within them offer virtually unlimited customization. You can add as many rows as needed within a section or fill a single row with numerous elements, offering significant design flexibility. Additional Settings Alignment: If your Row isn't set to 100% width, you can align it to the left, right, or center as needed. Width: You can adjust the width of your Row, anywhere from 30% to 100% of the section's total width. Setting it to 100% will make the Row span the entire section.

When navigating the funnel builder, you will see a toolbar located at the top of the page. Among the options, there’s a "Sections" button represented by an icon resembling four corners. By clicking this button, you can either insert a new section or manage an existing one.  Adding a Section To include a new section on your funnel page, select the "Add Section" option from the drop-down menu. You will be given a choice between different section sizes: Full-Width, Wide, Medium, or Small. Once you've chosen your desired section type, drag and drop it into the center of the page to start building your funnel layout. The builder allows you to add an unlimited number of sections, enabling endless customization possibilities. General and Advanced Customization Options Beyond just adding sections, there are both basic and advanced settings that offer further customization for your funnel page. Expanding a Row to Full Width If you want a row to extend across the entire section, you can toggle this option on.  Advanced Customization: Width Adjustments You can also modify the width of your section by choosing from the available options: Full, Wide, Mid-wide, or Small.  

Personalizing Popup Configuration  This guide explains how to activate a popup when a user visits a funnel or website. Popup Configuration  First, access the popup feature within your funnel or website and select "Popup Settings."  Adjusting Popup Settings  Under the "General Settings" section, locate the "Show Popup" option. From here, you can choose the delay time for the popup to appear. The slider allows you to set a delay between 1 and 60 seconds.   Note: If the popup has already been triggered before the set delay time, the countdown will automatically be canceled.

General Settings Adding subheadings to your content is a simple task. Just drag the sub-headline element into the desired location within your editor. Once it's in place, you can modify the settings to suit the look and feel you're going for. This process will help improve the structure and readability of your page. Element Name/Title The edit toolbar is situated on the left-hand side of the editor. At the top of your screen, you'll see the default element name, which you can change for easier identification as you work on your page structure. Background Color To adjust the background color of your sub-headline, click on the element you wish to modify and select your preferred color. If you can’t find the exact shade you need, you can add a custom color by inputting the color code and clicking “add color.” Opacity To modify the transparency of the content within your element box, use the opacity setting. Options range from full transparency to different levels of fading (e.g., light, half, heavy). This feature helps you create a distinctive visual effect. Text Shadow If you'd like to give your text more dimension, you can apply shadows using the shadow thickness tool. This lets you create subtle or strong shadows that enhance the depth and visual impact of your content. Letter Spacing Adjust the spacing between characters with the letter spacing tool. This helps you control how compact or spread out your text appears, ensuring a polished and professional look. Text Alignment You can modify the alignment of your text (left, right, center, or justified) to fit your page layout. Proper alignment ensures your content looks clean and organized. Font Size for Mobile and Desktop To change the font size for different devices, simply adjust the size sliders for each content element. You can switch between mobile and desktop views to see how the edits will appear on both platforms. Typography Type Select from various fonts to match your brand’s style. You can either use the default fonts in the settings or browse through additional typography options via the drop-down menu. Icons Incorporate icons into your content to make it more engaging. Use the available icons or search for a specific one to match your content needs. Color Customization Regular Text Color: Change the text color here if it isn’t bold. Bold Text Color: Adjust the color of bolded text through this option. Italic Text Color: Modify the color of italicized text in this setting. Underline Text Color: Change the color of underlined text here. Link Text Color: Customize the color of any links in your content. Icon Color: Adjust the color of any icons you’ve added to the page. Spacing Options Use padding and margin adjustments to fine-tune the layout of your content. Toggle the bars for left, right, top, or bottom spacing to position elements as needed. Advanced Border Settings Border Style: Choose between solid, dashed, or dotted borders. Border Width: Adjust the thickness of your border by modifying the width. Border Color: Select a color to match the style of your border. Border Radius: Curve the edges of your border by increasing the radius. You can even choose which edges to curve (top, bottom, or all). Line Height Increase the height of the element box using the line height slider for better spacing and clarity. Text Transform Change how the text appears by transforming it to uppercase, lowercase, or capitalizing each word. Visibility Control whether your page content appears on desktop, mobile, or both devices. This allows you to optimize your content for various platforms. Custom Class For more advanced customization, add a Custom Class to your elements and use CSS to style or alter their behavior. CSS Selector Easily copy the CSS Selector for any element on your page by clicking the copy icon, enabling quick identification and modification in your CSS files.

If you've already created a survey, integrating it into your page is simple. Just drag the survey element to your desired location on the page, then select the specific survey you want to display. If you need to create a new survey, position the survey element first, then click the "Click Here" button. This will open the survey creation section in your CRM in a new browser tab. General Settings Element Name/Title The General Settings feature allows you to view and edit the default name or title of the element you are working on. You can keep the default name or customize it based on your needs. Renaming elements is particularly useful when managing multiple components on a funnel page, making it easier to identify each one. Spacing Options You can adjust the spacing of your content using a variety of options: Padding: Control the spacing on the left, right, top, and bottom of the content with four toggle bars. Modifying padding helps to improve the layout and balance of elements on your page, enhancing its visual appeal. Margin: Similar toggle bars allow you to adjust the top and bottom margins. Adjusting the margins gives you finer control over the positioning and aesthetics of the content on your webpage. Survey Options If you need to switch surveys, simply use the survey dropdown menu to select a different one for your funnel page. Editing Surveys To modify an existing survey, click on the “Edit Survey” button. This will open the survey editor in a new tab, where you can make the necessary changes. Once saved, the updated version will be reflected in the funnel preview, and refreshing will apply the changes in the builder. Button Actions The Button Action feature gives you three options for defining what happens when users interact with the button: Use action from Survey Builder: The action set up in the survey builder will be executed. Go-to website URL: This option directs users to a specific website page upon interaction. Go to Next Step: Selecting this will send users to the next step in the funnel or webpage sequence. Advanced Settings The Advanced Settings section provides more in-depth customization options: Visibility a You can control whether an element is visible on desktop, mobile, or both. Adjusting this setting ensures the page is optimized for the appropriate devices. Custom Class This feature allows you to assign a specific custom class name to an element, making it easier to apply custom styles via CSS. Simply input the class name in the provided field. CSS Selector For easy replication of custom styles, you can copy the custom CSS code by clicking the Copy icon next to the reference code. This feature simplifies applying consistent CSS styles throughout your webpage.

The General Settings section shows the default label or name of the current edit option. You can either keep this default title or rename it to something more descriptive that better matches the element you're modifying. Text Alignment With the Text Alignment feature, you can control where your text appears on the page. Options include aligning it to the left, right, center, or using justified formatting for a cleaner look. Spacing Adjustments The Spacing Adjustment option allows you to fine-tune the positioning of your content using two different methods. These adjustments will only apply to the currently selected Edit option. Top and Bottom Margins Use the Margin Top and Bottom settings to control the amount of space above or below your content. SVG Configuration To include an SVG on your page, simply input the URL in the designated SVG URL field. Open SVG Editor Clicking the "Open SVG Editor" button takes you to the SVG Editor page. You can change individual SVG colors in the "Editor" section, or completely replace the SVG by inserting its code in the "Raw Editor" section. Width and Height (PX) Easily modify the size of your SVG by entering the desired width and height values in pixels. Action Settings SVG Action Within the Action settings for SVG, you can decide between two options: either open a popup or redirect users to a specific website URL. Select your preferred action through the Image Action icon. Website Redirect If you opt to send users to a specific webpage through the Image Action icon, you’ll need to select the target URL. Open in New Tab To make sure the webpage opens in a new browser tab, toggle this option on. Advanced Customization The Advanced Customization feature offers additional settings for refining the design of your webpage. Visibility Controls The Visibility Controls allow you to specify whether the selected element is visible on mobile devices, desktops, or both. Just click on the appropriate icon to choose. Custom Class Assignment The Custom Class feature lets you assign a custom CSS class to an element, which makes it easier to apply specific styles to that element. Enter your desired class name in the field provided. CSS Selector Copying To quickly copy your custom CSS code, click the Copy icon next to the reference code in the CSS Selector section.

The Text Element feature allows you to effortlessly incorporate key content aimed at your audience. While delivering information is essential, it's equally important to avoid overwhelming readers with lengthy paragraphs. Here's a guide on how to effectively utilize this feature to build an engaging and informative website experience. Steps to Add It To begin, either create a new funnel or access an existing website through the Sites platform.  Once inside the builder, click on the plus (+) button. This action will open the element menu, allowing you to drag and drop the Text element into your page. Text sizes, in descending order, include: Headline, Sub-Headline, Bullet List, and Paragraph.  Customizing Your Text Element You can personalize the Text Element in three distinct sections. Each Text Box is independent, so you can modify one without affecting the others. General Settings: This section controls the basic appearance of the Text Box. You can adjust elements such as background and text colors, font size and weight, alignment, and typography style.  For Bullet Lists, you can swap out checkmarks for other symbols by using the Icon feature.  Animations: Enhance your text by adding animations, making the content more dynamic and attention-grabbing as it enters your funnel or website.  Advanced Options: In this section, you have access to more detailed settings such as Box Shadow, Border, Line Height, Text Transform, and Custom Class. You can also adjust the CSS selector for further customization.  How to Use the Text Element To edit text, click on a Text Box to make it editable. Then, highlight the existing content and replace it with your own.   Once text is highlighted, a toolbar will appear, allowing you to add links, custom fields, or even rewrite the text using AI. The toolbar also offers font and style customization options.  For quick access, you can type "{" within the text editor to instantly open the picker! Now that you know how to add and modify text, you're ready to start building content for your funnels or websites. For further information on individual Text Element settings, explore the additional articles in this section.

Typical Problems with Pop-Up Functionality A frequent problem users face with pop-ups is that they sometimes fail to display as expected. This can be frustrating, particularly when it affects marketing efforts. Often, the root of the issue lies in the pop-up configurations, especially when the "Disable Pop-Up" feature is activated. Step-by-Step Troubleshooting Instructions 1. Pinpoint the Issue: If your pop-up isn’t showing up as intended, start by diagnosing the problem. Preview the page where the pop-up is supposed to appear, then attempt to activate it. 2. Examine Pop-Up Configurations: Go to the pop-up settings in your CRM. Look out for warning indicators like a red exclamation mark next to the pop-up’s name, which signals a possible issue with its configuration. 3. Modify the Disable Pop-Up Feature: In the settings, find the "Disable Pop-Up" option. If it's turned on, the pop-up will be blocked from appearing. Switch this option OFF to allow the pop-up to function. 4Save and Verify: Once the adjustments are made, save the changes and return to the page preview. Refresh the page and test the pop-up again. It should now behave as expected. Additional Troubleshooting Suggestions Always Save Your Updates: Ensure that all changes made within the CRM settings are saved before testing. Unsaved changes won’t be reflected during testing. Clear Browser Cache: If your changes don’t appear to be working, try clearing your browser cache and refresh the page. Review Trigger Configurations: If the issue persists, check the trigger settings to ensure that the pop-up is correctly associated with the action meant to activate it (e.g., a button click). Common Questions Can I associate a pop-up with multiple actions? Yes, you can configure pop-ups to appear based on different triggers, such as clicking various buttons or links. Why is my pop-up showing up automatically instead of on a click? This might be caused by the trigger settings. Ensure that the pop-up is set to display upon a click action rather than when the page loads. Is it possible to customize the pop-up's appearance? Definitely. The CRM offers several options for customizing your pop-ups, including layout, color schemes, and content personalization.

This guide is designed to clarify the differences between local and organic search engine optimization (SEO) within the framework of a Customer Relationship Management (CRM) system. It will provide valuable insights on how to utilize your CRM to boost your clients' SEO performance. Whether you're a beginner or looking to enhance your current SEO strategies, this guide will serve as an informative and practical resource. What is Local SEO? Local SEO is essential for businesses serving customers in specific regions. It helps your business appear in search results when potential clients are seeking nearby products or services. Here are some key points: Definition and Significance: Local SEO is the process of optimizing a business to appear prominently in location-based search results. It's critical for businesses that depend on attracting local customers. Key Elements: The foundation of local SEO includes listing your business on platforms like Google My Business, Apple Maps, and Bing Places. Ensuring accurate and consistent information across these listings is vital. Execution Strategy: With the CRM’s built-in features like Yext, you can streamline your business details across various directories. This consistency boosts your visibility in local search results. Decoding Organic SEO Organic SEO, unlike local SEO, aims to attract a wider audience by improving a website’s position in general search engine results. Here's a breakdown: Definition and Significance: Organic SEO focuses on driving traffic to your website through unpaid search results. This is particularly useful for businesses aiming for national or international reach. Key Elements: Successful organic SEO involves keyword research, on-page optimization (such as enhancing meta tags and improving content), and off-page optimization (like acquiring backlinks). Execution Strategy: While CRMs offer basic SEO tools, collaborating with SEO specialists for more advanced organic SEO campaigns is beneficial. The CRM can still play a crucial role by offering website and funnel building tools equipped with SEO-friendly features. Practical Applications and Examples Let’s consider a small bakery in Boise, Idaho. For local SEO, it’s important to optimize the bakery’s Google My Business profile and ensure its information is consistent across all directories. When it comes to organic SEO, the focus should be on optimizing the bakery's website with targeted keywords like "top bakery in Boise" and acquiring high-quality backlinks to improve its search ranking. Troubleshooting and Common Questions Why isn’t my business showing up in local search results? Ensure that your business details are accurate and consistent across all directories. Additionally, confirm that your Google My Business profile is verified. How long does it take to see results from organic SEO? Organic SEO is a long-term strategy. Significant changes in search rankings can take several months to materialize. Final Thoughts Thanks for exploring our guide on utilizing a dedicated IP address for email marketing! In summary, having a dedicated IP can increase the chances of your emails reaching your customers’ inboxes, safeguard your sending reputation, simplify troubleshooting email issues, and enhance your protection against cyber threats. If you send a high volume of emails, this option is definitely worth considering. Make sure to send emails consistently, gradually increase the volume, and implement essential security checks to ensure smooth operations. Getting a dedicated IP is easy through the settings of your email service provider, and it can significantly improve your email marketing efforts, ensuring your communications reach your target audience efficiently. Thanks for reading, and here’s to better success with your email marketing!

The video element offers flexibility in embedding videos from platforms such as YouTube, Vimeo, Wistia, and more, enhancing the overall experience on your website or funnel. By incorporating video content, you can create a more dynamic and engaging atmosphere for your visitors. General Configuration When working with the video element, most modifications are made in the General Settings section, accessible from the left side of your editing panel. Element Name/Title The top of this section displays the name of the element you’re editing. You can retain the default name or assign a new one for easier identification when designing your funnel. Spacing Adjustments You have various options for adjusting the spacing around your video element. Padding Control: You can fine-tune the padding on all four sides (left, right, top, and bottom) using the available toggles. Margin Control: Adjust the margins at the top and bottom of your video content. Background and Box Shadow You can customize the background color by selecting from the palette or entering a custom color code to match your site’s branding. For added design depth, you can include a box shadow or inner shadow around your video element. Video Type and URL In the Video Type dropdown, you can choose from multiple options, such as YouTube, Vimeo, Wistia, Custom Embed, or HTML 5. Depending on your selection, enter either the video URL or an embed code for your content. Auto-Play and Controls You can enable auto-play for the video or allow users to control playback by toggling the on-screen controls. For added control, enable parental settings if necessary. Video Width Select the width of your video element, choosing between full, three-quarters, or half-width to fit the layout of your page. Advanced Customization For further refinement, navigate to the Advanced Settings tab. Here, you can modify borders, adjust visibility, add custom classes, and copy CSS code for additional styling. Border Options You can apply borders to your video element, with customizable options appearing once a style is chosen. Border Style: Choose from solid, dotted, or dashed borders. Border Width: Set how thick or thin you want the border to be. Border Color: Choose from preset colors or enter a custom color code. Border Radius You can also round the edges of your video element by selecting a border radius. Further customize which edges are rounded by selecting all, top-only, or bottom-only edge adjustments. Visibility and Custom CSS Manage the visibility of your video element, opting to display it only on desktop or mobile devices based on your requirements. To further tailor your element, enter a custom class or copy the CSS selector for later use. For CSS, simply click the "Copy" icon to save the code.

Overview The general settings section allows you to modify basic aspects of your web page elements, such as adjusting titles and controlling spacing. Detailed Breakdown Element Title/Name: You can keep the default names for your elements or rename them for easier identification, especially useful when managing multiple components on the page. Spacing Settings: Use margin and padding adjustments to create an ideal layout. These settings allow you to control the spacing around your content to improve the overall user experience. Padding: Modify the padding on all sides of the content within an element. Margin: Adjust the top and bottom margins to control spacing around the element. Calendar Setup Overview: The calendar feature allows you to manage your web page’s event listings to ensure that users always see up-to-date information. Detailed Breakdown Calendar Menu: Use this to update or replace the existing calendar display on your site, ensuring the latest schedule is always visible. Updating Calendar Events: When you make changes to events, remember to re-add the calendar element so that your page reflects the updates. Button and Link Customization Overview: Tailor the behavior of buttons and links to support your overall marketing goals. Detailed Breakdown Redirect Option: Decide whether clicking a button triggers a popup or redirects users to a new page. Open In New Tab: Enable this to have links open in separate tabs, keeping your main page open in the background. Advanced Settings for Additional Control Overview: Advanced options allow for further customization of your elements, including device visibility and the use of custom CSS classes. Detailed Breakdown Visibility Settings: Choose whether elements are visible on desktop, mobile, or both to tailor the viewing experience for different devices. Custom Class and CSS Selector: Assign a custom class name to an element to apply specific styles. You can also easily copy CSS Selector codes for consistent styling across your page. Troubleshooting and FAQs Common Issues: If updates to the calendar are not reflected, ensure that you have re-added the calendar element after changes. When custom styles aren’t applied correctly, verify that the custom class names are correctly linked to your stylesheet. Frequently Asked Questions Q: How do I ensure my calendar shows the most recent events? A: Always re-add the calendar to your page after making updates. Q: Can I optimize my page for mobile devices? A: Yes, by using the Visibility setting in Advanced Options, you can control which elements are visible on mobile or desktop.