Funnel/Website Builder - Elements

Headlines serve as eye-catching page headings and are typically formatted in bold text to grab the reader's attention. To incorporate a headline into your content, just click and drag the headline element into the designated editing area. Once placed, you can easily tailor its settings to suit your design preferences and convey your message effectively.

To add a Headline, drag and drop the Headline in the editor's space to manage the settings.

On the left side of the screen, you'll find the edit toolbar for the selected element. The top of the screen displays the default name or title for the editing option you are working on, which you can choose to rename for easier navigation as you build your funnel page.

To change the background color of your headline, simply click on the content you want to adjust, then choose the desired color.

If you cannot find your preferred color, you can add custom colors by entering the color code into the space provided and clicking the add color button.

Managing the level of transparency in your element box text or content is easily achievable by modifying the opacity settings. You can select from various degrees of fading, ranging from None (completely opaque) to Light, Half, and Heavy Fade (increasing levels of transparency). This allows you to create the desired visual effect for your content, enhancing its overall appeal.

To add a shadow effect to your text or content, choose the desired intensity of the shadow, whether you prefer it to be subtle or more prominent. This customization enables you to enhance the visual appeal of your content and create a distinct appearance that captures your audience's attention.

By utilizing the letter spacing option, you have the ability to customize the distance between individual characters in your text. Simply click on this feature to make adjustments, allowing you to achieve the desired appearance and readability for your content.

The text alignment editing feature enables you to effortlessly position your text in various ways, including left-aligned, centered, right-aligned, or justified. This customization allows you to arrange your content according to your design preferences and ensures an optimal reading experience for your audience.

To change the font size for mobile and desktop devices, adjust the size bars for each text or content element. Navigate between mobile and desktop views in the top left corner of your funnel builder to view how your edits will appear in each format.

You can change the typography font by selecting an option from the dropdown menu. You can choose from the headline or content font that you selected in settings, or choose default text and select a new typography font from the dropdown.

Incorporating an icon into your page is simple with the available icon selection. Browse through the assortment of icons provided, and choose one that suits your needs. If you're looking for a particular icon, utilize the search bar to refine the options, making it easier to find the perfect visual element to enhance your content.

There are several spacing options available for adjusting the content. Depending on which Edit option you are working on, the changes will only be applied to that specific part of the page. For instance, if you are editing a particular Row (the blue box), the settings will only impact the contents within that Row.

Border In the Advanced Settings section, you will find Border Options. You can select from various border types or choose to remove borders altogether. After choosing a border, the border settings will appear for customization.

Style

Under the Style option, you can choose from three different border styles: Solid, Dashed, and Dotted.

Width Under the Width option, you can increase the border thickness by increasing its width.

Color To change the border color, click on the color icon and select from the available color options or customize a color that matches your branding.

Radius Adjusting the Radius option curves the edges of the border. The higher the number you select, the more curved the border becomes.

Radius Edge With the Radius Edge option, you can choose which corner of the border to curve. Select either top, bottom, or all edges.

The Line Height feature allows you to modify the height of an Element box effortlessly. To make adjustments, simply slide the size bar either left or right to decrease or increase the height, respectively. This provides greater control over your design and ensures optimal visual presentation.

The Text Transform feature offers you the flexibility to modify your text's appearance by converting it to uppercase, lowercase, or capitalizing the first letter of each word. This enables you to achieve the desired visual style and presentation for your content, ensuring it aligns with your overall design guidelines.

Managing the visibility of your page across different devices is easy. To specify whether your page should be displayed on desktop, mobile, or both, simply choose the desired option under the Visibility settings. This allows you to tailor your content's presentation to suit your target audience's browsing preferences, ensuring an optimal user experience.

Incorporating a Custom Class is a straightforward process. Simply enter the class name you wish to use in the designated Custom Class field. This allows you to apply your preferred styling and design elements, creating a unique and tailored appearance for your content.

To duplicate a CSS Selector, locate the copy icon situated to the right of the specific reference number you want to replicate. By clicking on this icon, you can effortlessly obtain an exact copy of your desired selector, streamlining your workflow and ensuring consistency in your design elements.

All Text Elements share the same settings and formatting settings.

Incorporating subheadings into your content is a straightforward process. Simply click and drag the sub-headline element into the appropriate area within your editor's workspace. Once positioned, you can effortlessly modify its settings to achieve the desired appearance and structure for your page, enhancing readability and organization.

The Paragraph can be used to type in sentences or the body of a page.

Integrating paragraphs into your webpage is a breeze. All you need to do is select the paragraph element and drag it to the desired location within your editor's workspace. Once placed, tailor the paragraph's appearance and content to match your style preferences and seamlessly blend with the rest of your site's design.

By utilizing bullet lists, you can present information in a clear, concise manner that effectively engages your audience and elevates the overall user experience.

Incorporating bullet lists into your page is a simple and intuitive task. Begin by selecting the bullet list element and dragging it to your editor's workspace, where you can customize it according to your preferences. Once the element is in place, an editing toolbar tailored specifically for the selected element will appear on the left side of the editor.

Incorporating a button on your webpage is a straightforward task. Begin by selecting the button element and dragging it into the desired location within your editor's workspace. Once in place, you can customize the button's appearance and functionality to align with your design goals and user experience objectives, ensuring seamless integration with the rest of your content.

The button setting is a bit complex compared to the previous Elements setting.

Element Name/Title

The editing toolbar for the selected element appears on the left side of the editor, and you can rename the default name or title displayed at the top of the screen for ease of navigation as you create your funnel page.

To change the background color of your button, select the content you want to modify and choose your preferred color. If you can't find the color you are looking for, input the color code and add custom colors.

You can decide how wide apart you want the letters in your button to be by clicking on this option.

If you want your text/content to have a shadow, simply select how strong or light you want the shadow to be.

You can adjust the mobile and desktop font sizes of the text/content simply by adjusting the size bars.

You can adjust the mobile and desktop font sizes of the sub-text/content simply by adjusting the size bars.

Here you can edit the font of the button text/content. Select the previously chosen button or content font from the settings, or choose a new typography font from the drop-down menu.

Add an icon to your button by selecting from the available options or using the search bar to find the specific icon you want. This will place an icon before your text on your button.

Here you can add an icon to your buttons. When you add an icon, it's going to be positioned after the text in the button.

Color

You can only adjust the text color in the button here. For example, the "Click to Signup" text.

Sub-Text Color

When you add a sub-text to your button, you can only adjust the color in the button here.

There are different spacing options available for adjusting your button. Depending on the Edit option you are working on, the settings will only apply to that option.

Text

This is where you can add/edit the text in your button.

Sub Text

If you like to add a subtext to your button, simply type it here.

Link To

You can select from the options where you would like to link this particular button.

Choose a theme for your button using the button element. Select the available options under the themes tab at the top right. Note that if you choose a theme here, all previous customizations made to the button will be removed.

In the Text Transform, you can decide to change the text to Uppercase, Lowercase, or just capitalize each word.

You can decide to make the button a full size of the element box or just as fluid.

You can add an effect to your button by simply selecting your choice from the options.

If you want your button to have a shadow, simply select how strong or light you want the shadow to be.

You can decide to keep the background of your button or just remove it so it's just the text that will appear.

You can increase or decrease the height and width of the button in these spaces.

You can make this page visible on both desktop and mobile, and you can also select just one of the two by simply clicking on the one you want to activate.

Add a Custom Class by typing a desired class name in the Custom Class field.

Border You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up.

Style There are three (3) Different styles for your border. It could be a solid, Dashed, or Dotted border.

Width When you increase the border width, it increases the thickness of the border.

Color To change the color of the border, click on this color icon.

Radius Adjusting the radius of your border curves the edges of the border; the higher the number you select, the curvier it becomes.

Radius Edge You can decide the corner of the border you want to curve, either all edges, Top only, or bottom edge only.

Click the copy icon on the right side of the reference number you want to copy to copy the CSS Selector.

Incorporating a form into your webpage is an uncomplicated procedure. To start, locate the form element and drag it to the preferred position within your editor's workspace. After positioning the form, customize its design and functionality to suit your specific needs, ensuring a seamless user experience and cohesive integration with the rest of your website content.

The editing toolbar for the selected element appears on the left side of the editor, and you can rename the default name or title displayed at the top of the screen for ease of navigation as you create your funnel page.

To adjust the position of your content, you can use the available spacing options, which only apply to the specific part of the page you are editing. Modify the content's top or bottom margins and position using the toggle bars for Padding Left, Right, Top, and Bottom, as well as Margin Top and Bottom.

If you need to replace the form you have selected at any time, you can do so in the Form section by selecting an option from the drop-down menu.

Redirect Action

The Button actions section provides options for what should happen when the customer clicks the submit button on the form. Here you can choose to open a URL, go to the next step in a funnel, or use the form submit options.

A blog post is an essential part of any content marketing strategy. It's typically written to cover a specific topic or answer a question, and it’s educational in nature.

Blog posts are an excellent way to share long-form articles related to your business and cover topics your target audience may want to read or learn about.

Under General Settings, you'll see the Element Name/Title at the top. This field shows the default name/title of the edit option you're working on, but you can rename it for easy identification as you build out your funnel page.

Standard

You can decide to use the standard type, which has the blogs in a Grid View.

Compact

You can decide to use the standard type, which has the blogs in a List View.

This blog content will be replaced by actual post content during previews or in the live URL

You can select the number of blog posts you want visible on the page in the Pagination settings. It's recommended to keep it between six and nine blog posts, but you can set it however you prefer.

The versatile video element enables you to seamlessly integrate videos into your funnel or website from a variety of sources, including YouTube, Vimeo, Wistia, and more! By incorporating engaging visual content, you can elevate the user experience, making your site more captivating and informative for your visitors.

When editing the video element on your funnel page, most adjustments can be made in the General Settings section located to the left.

At the top of this section, you'll see the element name/title, which is the default name/title of the edit option you're working on. You can choose to leave it as is or rename it to make it easier to identify later on when building out your funnel page.

There are different spacing options available for adjusting your video content.

To change the background color of your video element, simply click on the content area you want to adjust and select a color from the options provided or add a custom color code to match your branding.

Here you can add an inner shadow or drop shadow to your box to make the border visible.

In the Video Type dropdown, you can select the video type you want to use on your funnel page. Your options here include YouTube, Vimeo, Wistia, Custom Embed, or HTML 5.

Depending on which option you select, you will need to type in either a video URL or an embed code.

You can choose to have the video auto-play when the funnel page is opened or toggle the controls on or off to allow customers to pause or play the video on your page.

To have the video under parental control, simply toggle it on.

You can also select a width for your video element by choosing from either full width, 3/4 width, or half-width.

The image element provides a convenient way to incorporate visuals into your funnel or website page, enhancing the overall user experience. By integrating images that complement your content, you can create a more engaging and aesthetically pleasing site, capturing the attention of visitors and effectively conveying your message.

Make sure to add alt text for SEO purposes by quickly describing the image you added.

With Image Actions, you can select either the Open the popup or the Go to website URL.

FAQs, or Frequently Asked Questions, give customers the power to get the help they need quickly and easily. Customers can find what they are looking for without having to contact customer service. It not only provides a better customer experience but also increases their efficiency in finding helpful answers.

An FAQ Element is a great way to anticipate questions from your customer base by providing detailed, relevant info relating to your products and services. This way, customers know they can come to you directly when they have questions that need answering.

The FAQ Element allows you to create the look of your desired list. You have three options: Separate, Contained, and Simple Type.

Separate

With the Separate Type, each entry is separated from one another with a drop-down button located on the right side of each list, apart from its title.

Contained

With the Contained Type, several entries are not necessarily separated from each other but include a drop-down button located on the right side, separate from its title.

Simple type

And finally, with Simple Type, entries are once again clustered together, this time with a drop-down button located before the entry's title on the left side.

Here you will be able to edit each of the lists as you desire. When you click on the list you want to work with in the FAQ settings area, it drops down the list's menu in the editor's space for you to work with.

Below are the edits you can make:

Add New List

When you click on the "+" button, it adds a new list for you.

Duplicate Existing List

When you want to duplicate a list you have already created, click on the "Copy/Clone" button.

Delete list

You can delete a list by clicking on the "delete" button. When you delete it, the list numbering doesn't rearrange itself, although it doesn't affect anything.

Arrange List

If you want to rearrange your list, click on the four (4) mini bars on the left side of the list you want to move, then drag and drop the list where you want.

The custom JS/HTML element empowers you to integrate your personalized code into your webpage, enabling the addition of unique custom components. This versatile feature allows for greater flexibility and creativity when designing your site, ensuring a truly tailored user experience that aligns with your specific needs and vision.

You can utilize the Open Code Editor button to input your custom code for your element. By clicking on this button, a popup window will appear, allowing you to type in or paste your code with ease. This feature provides you with the flexibility to add custom coding to your web page, enabling you to tailor the look and functionality of your elements to suit your specific needs.

If you already have a Survey created, you can easily incorporate it into your page. If not, your browser will automatically redirect you to the Survey page so you can get started.

To ensure that any subsequent updates you make to your form are visible on your page, you'll need to delete the existing element and add it again for these changes to take effect.

Need to change your survey? Use the survey dropdown to choose a different survey to include in your funnel page. If you need to create a new survey, check out the survey builder section under Sites in your CRM.

Ready to get organized and add your calendar events to your page? If you haven't created one yet, simply click on the "click here" link, which will direct you to it! Once it's set up, you'll instantly have access to view any upcoming events and tasks.

But if you want to modify what appears on your page after changes were implemented from the calendar page, don't forget to re-add that element to save yourself some time and make sure your page accurately reflects those important updates.

Calendar

The Calendar Configure feature allows you to replace your current calendar with a new one. From the Calendar menu, you can select the new form you prefer to be displayed on your web page. This feature ensures that your web page always displays the most updated and relevant calendar for your audience.

Do you want to add your Business location to your website? If so, then the Map Element is your go-to feature! It gives website visitors a convenient spot to see where exactly you are located. You can choose from a variety of different map display options for personalization, ensuring that it looks great on your site's design. With the Map Element, let website visitors easily locate your Business with just one glance!

Open Search Box

When you click on the "Open Search Box" it opens the Map page and allows you to;

Map Type

In the Map Type feature, you can choose the type of map you prefer for viewing your location. You can select from four options, including road map, terrain, satellite, or hybrid, according to your preference.

Marker Color

Additionally, you can modify the color of the Marker by selecting from a range of available colors or inputting a specific color code in the dedicated field. Customizing the Marker color can help to improve the visibility of your business's location on the Map page, making it easier for your audience to find you.

Zoom

By adjusting the Zoom feature, you can zoom in on the specific location where your marker is placed. Simply move the bar towards the right to increase the zoom size.

Horizontal Width and Vertical Height (max 640)

The Horizontal Width and Vertical Height feature allows you to customize the map's height and width to your preferred size. You can input the desired dimensions, but the maximum value for both height and width is 640.

Retina (2x)

Furthermore, toggling on the Retina feature is a quick way to enlarge the size of the map. When enabled, it doubles the original dimensions of the map. For example, if the original height and width are 300 and 200, respectively, toggling on the Retina feature will increase the dimensions to 600 and 400, respectively.

New Tab

You can enable the New Tab feature to allow visitors to open Google Maps in a new tab when they click on any part of the map. If this option is disabled, Google Maps will only load on the current page.

SVG Options

SVG URL

To display an SVG on your page, simply type its URL in the dedicated field labeled SVG URL.

Open SVG Editor

When you click on the "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 desired size number you want.

One convenient way to showcase product and service feedback left by customers or visitors is the "Review" elements feature. Highlighting customer reviews is essential, as they accurately represent real opinions of aspects like your products and services that can't always be expressed in traditional advertorials. It adds an invaluable layer of credibility and provides potential buyers with user reviews.

Considering the importance of this, having an easy reference to user feedback is invaluable to display on a site's front page or within any targeted department-related postings. Utilizing the "Review" element allows visitors to better access customer sentiment conveniently, quickly, and in passing, without needing to read through long articles written about the products themselves.

When you have a promotion that runs for a set time, make sure to add a Countdown timer! This timer gives your visitors and clients a great visual representation of how much time they have left to take advantage of it. Knowing the end date helps them plan and make sure they don't miss out on your amazing offer! You can even use fun graphics, like an animated bomb or rocket clock, so your Countdown stands out on your site or within an email promotion. Don't let people miss out – get everyone excited with a Countdown timer now as part of your promotions!

The Typography Type feature allows you to modify the font of your text or content. The convenient drop-down is available to further customize typography styles. You can select to use the heading or content font you set, or select a different font from the dropdown menu.

By using the End Date and Time feature, you can set a specific deadline for your countdown to reach its end. You can select your desired date and time using the available options. For example, you can set the countdown to end on July 11th at 6:00 AM. Markdown formatting is also available to customize the display.

You can decide to set your timer language to your preferred language by simply selecting the language you want from the available options.

When setting up the countdown timer, you can choose the Time Zone that you want it to operate in. This allows you to ensure that the timer functions correctly for your location and that it accurately counts down to the correct end time. You can select your preferred Time Zone using the available options, which include popular regions and countries. The Time Zone feature supports Markdown formatting for further customization.

The Expire Action feature allows you to determine what happens after your countdown timer reaches its end.

Redirected URL

One of the options is to add a Redirected URL, which specifies the page that your users will be redirected to after the timer expires. You can easily add the Redirected URL to create a clickable link.

Show & Hide Element

You can decide to hide or show your section, column, row, or element.

Incorporating the Minute Timer element into your funnel page offers an easy method for embedding a timer on your site. This versatile feature allows you to tailor the countdown duration by adjusting hours, minutes, and seconds, ensuring it aligns with your unique requirements. As a result, you can create a sense of urgency and encourage user engagement, enhancing the overall effectiveness of your page.

Meeting Settings

The Meeting Settings feature allows you to specify the precise hour, minute, and seconds at which you want your timer to end.

The Expire Action feature allows you to determine what happens after your minute timer reaches its end.

Redirected URL

You can add a redirected URL here for visitors to click on and visit once the timer expires.

Show & Hide Element

With the Show & Hide Element feature, you can control the visibility of your section, column, row, or element.

With the Revisit Action feature, you can choose what happens when a user revisits your page after the timer expires. Customize the behavior by setting an auto-reset timer, Hide/ show an element, or auto-expiring for X days.

Incorporating the Day Timer element into your funnel page is an excellent strategy, as it enables you to effortlessly add a timer to your site. This versatile feature allows you to customize the timer to suit your specific requirements by setting the countdown duration in hours, days, and seconds, fostering a sense of urgency and encouraging user engagement.

The navigation menu element will add a navigation menu to the top of your funnel page. This is useful for linking to different sections of the page or linking to other pages in your funnel. When you add the navigation menu element, you will have editing options on the left-hand side.

The Menu Items feature enables you to include essential navigational options such as Home, About, Team, and Contact menu on your website's navigation bar. You can add more options by clicking on the "+ Add Item" button.

You can add an icon to your page by simply selecting from the available icons. If you have the desired icon in mind, you can type it into the search bar to narrow down the options.

Horizontal and Vertical Spacing

In the Menu Item Spacing Options, you can adjust the spacing of both the horizontal and vertical height of your menu items. To do this, simply move the bar to increase the number until you achieve the desired spacing. You can also input a desired number into the box to ensure your element is spaced accordingly.

Dropdown Options

The Dropdown Options feature enables you to customize the size and color of your dropdown menu specifically for mobile view. By selecting the color option, you can modify the color of the dropdown menu by choosing a color from the available options or adding a custom color code to match your branding.

The divider element provides a convenient way to insert a divider bar into your funnel or website, contributing to the overall design. This handy feature allows you to effortlessly incorporate an additional visual component to your pages, enhancing their appearance and structure without the complexities of more elaborate creative elements.

Integrating a progress bar into your funnel or website is an effective way to visually display the user's advancement through the content. With numerous customization options available on the left-hand side of the page, you can effortlessly tailor the progress bar to suit your specific design and functionality needs.

The Image Feature element allows you to add an image with a headline and text element. Utilize this option when adding team member highlights or product/service highlights to your funnel and website pages. On the left-hand side of the page, you will see various customization options for your Image Feature that we will review here.

This element allows you to obtain essential shipping details about your customers swiftly. Furthermore, for 2-Step Order Forms, you can acquire this detail in two separate fields. With this element, obtaining the information you need from your customers is easier than ever before! In other words, this element provides an uncomplicated solution both for retrieving basic information and ensuring it's collected accurately; there's no simpler way to input as much data into web forms!

Same as the Sub-headline name, you can decide to change it or leave it as it is.

You can decide to show a form field for the "Company name" or you can hide it.

You can edit the description in the full name form field here.

You can edit the description in the email address form field here.

You can decide to show a form field for the Phone number or you can hide it.

You can enable or disable the country picker using Enable Country Picker.

You can choose whether to display or hide the form field for Shipping info using the Toggle Shipping feature. If you have shipping info toggled on, you will have options for those fields.

Under Bin Text, you can customize the button text for the next form by editing the text.

You can add a sub-text to the bin by inputting what you would like to name it.

In Sub Bin Text, you can add a sub-text to the button by adding the preferred name.

You can add any other information you would like your visitor/client to be aware of here.

Toggle on or off to add or remove the sticky contact. When turned on, this will auto-fill a customer's information.

To create a new contact for every purchase, toggle on or off the New Contact on Every Purchase tab.

You can validate any disposable email by toggling this on.

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

You can input a Custom Class in the given field, giving you even more customization options!

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

Here you will see the default headline name, and you can decide to leave at that or rename it.

Same as the Sub-headline name, you can decide to change it or leave it as it is.

This is the back menu that allows you to go back to the Step 1.

You can edit the description in the Item and price form field here.

You can edit the description in the Order Summary for the Item and price form field here.

This is the button you will click on to move to the next form.

You can add a sub-text to the bin by inputting what you would like to name it.

Additionally, you can add any other important information that you would like your visitors/clients to be aware of in the Button Footer Text section.

You can enable or disable the postal code here.

Enable Order bumps

When you toggle on the border bumps, it enables you to order bumps.

Select Product

You can select the product you would like to add here.

Enable by default

"Enable by default" allows you to set the order bumps to turn on by default.

Under Sticky Contact, you can toggle on or off to add or remove the sticky contact.

To create a new contact for every purchase, toggle on or off the New Contact on Every Purchase tab.

You can validate any disposable email by toggling this on.

Using this element is a great way to obtain shipping details regarding your customer, along with other useful information. You'll find that for 1-Step Order Form there are two elements combined in one form – the Shipping details and pertinent information! Now you don't have to take the time to get each detail separately. It has never been easier for businesses to collect all the facts and figures with just one swift process than it is now!

The Order Confirmation element allows you to add an order confirmation to your funnel page. This is useful when taking orders in a previous funnel page, and having a confirmation page be your next funnel step. When you add this element, you will notice a variety of customization options to the left-hand side of the builder.