Hide and Show Elements on Button Click (Funnels & Websites)
Introducing a powerful enhancement to our platform with the addition of the "Show/Hide Elements on Click" feature. This new button action empowers users to dynamically hide or reveal hidden elements on both mobile and desktop views.
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
Introducing a powerful enhancement to our platform with the addition of the "Show/Hide Elements on Click" feature. This new button action empowers users to dynamically hide or reveal hidden elements on both mobile and desktop views, providing greater flexibility and interactivity in designing and presenting content.
Users can add an interactive layer to their designs by hiding or revealing hidden elements upon a click event. This functionality enhances user engagement and allows for more dynamic and user-friendly page interaction.
Overview of Hide/Show Elements on Button Click (image 1 of 12)What this shows Users can add an interactive layer to their designs by hiding or revealing hidden elements upon a click event.What this showsIllustrates the "Overview of Hide/Show Elements on Button Click" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This animation appears in the "Overview of Hide/Show Elements on Button Click" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Users can add an interactive layer to their designs by hiding or revealing hidden elements upon a click event. This functionality enhances user engagement and allows for more dynamic and user-friendly page interaction. Immediately after, the guide continues: Add an interactive layer to designs by hiding elements when a button is clicked.Image 1 of 12What to clickUsers can add an interactive layer to their designs by hiding or revealing hidden elements upon a click event. This functionality enhances user engagement and allows for more dynamic and user-friendly page interaction.Next stepAdd an interactive layer to designs by hiding elements when a button is clicked.
How to Hide Elements on a Button Click
Add an interactive layer to designs by hiding elements when a button is clicked.
Important: In order to show an element, that element must first be hidden. If no elements are shown in the Show Elements dropdown, you must first hide an element.
Step 1: Choose the Button
In the funnel or website builder, choose the Button element that you want to use.
Step 1: Choose the Button (image 2 of 12)What this shows In the funnel or website builder, choose the Button element that you want to use.What this showsIllustrates the "Step 1: Choose the Button" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 1: Choose the Button" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: In the funnel or website builder, choose the Button element that you want to use. Immediately after, the guide continues: On the right side of the screen, you'll find the element settings. Under General, scroll all the way down to Button Actions.Image 2 of 12What to chooseIn the funnel or website builder, choose the Button element that you want to use.
Buttons and menus referencedButton
Next stepOn the right side of the screen, you'll find the element settings. Under General, scroll all the way down to Button Actions.
Step 2: Navigate to Button Actions
On the right side of the screen, you'll find the element settings. Under General, scroll all the way down to Button Actions.
In the Link To dropdown, select Hide & Show Elements
Step 2: Navigate to Button Actions (image 3 of 12)What this shows In the Link To dropdown, select Hide & Show ElementsWhat this showsIllustrates the "Step 2: Navigate to Button Actions" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 2: Navigate to Button Actions" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: In the Link To dropdown, select Hide & Show Elements. Immediately after, the guide continues: Click Hide Elements to open a dropdown listing all elements in the site page. Choose the element or elements that you'd like to hide when the button is clicked. You can choose an element, a section, a column, or column rows.Image 3 of 12What to chooseIn the Link To dropdown, select Hide & Show Elements
Buttons and menus referencedGeneralButton Actions.Hide & Show Elements
Next stepClick Hide Elements to open a dropdown listing all elements in the site page. Choose the element or elements that you'd like to hide when the button is clicked. You can choose an element, a section, a column, or column rows.
Step 3: Select Element to Hide
Click Hide Elements to open a dropdown listing all elements in the site page. Choose the element or elements that you'd like to hide when the button is clicked. You can choose an element, a section, a column, or column rows.
Step 3: Select Element to Hide (image 4 of 12)What this shows Click Hide Elements to open a dropdown listing all elements in the site page.What this showsIllustrates the "Step 3: Select Element to Hide" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 3: Select Element to Hide" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Click Hide Elements to open a dropdown listing all elements in the site page. Choose the element or elements that you'd like to hide when the button is clicked. You can choose an element, a section, a column, or column rows. Immediately after, the guide continues: Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.Image 4 of 12What to chooseClick Hide Elements to open a dropdown listing all elements in the site page. Choose the element or elements that you'd like to hide when the button is clicked. You can choose an element, a section, a column, or column rows.
Buttons and menus referencedHide Elements
Next stepOnce done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.
Step 4: Save Changes
Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.
Step 4: Save Changes (image 5 of 12)What this shows Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.What this showsIllustrates the "Step 4: Save Changes" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 4: Save Changes" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website. Immediately after, the guide continues: Similarly, you can reveal hidden elements when a button is clicked.Image 5 of 12How to confirmOnce done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.
Buttons and menus referencedSavePreview
Next stepSimilarly, you can reveal hidden elements when a button is clicked.
How to Show Elements on a Button Click
Similarly, you can reveal hidden elements when a button is clicked.
Step 1: Select Element to be Hidden
Select an element you want to "Show" from a "Hidden" state. In the left-side settings, navigate to the Styles tab then scroll down to Visibility.
Step 1: Select Element to be Hidden (image 6 of 12)What this shows Select an element you want to "Show" from a "Hidden" state.What this showsIllustrates the "Step 1: Select Element to be Hidden" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 1: Select Element to be Hidden" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Select an element you want to "Show" from a "Hidden" state. In the left-side settings, navigate to the Styles tab then scroll down to Visibility. Immediately after, the guide continues: Click on each mobile and desktop visibility buttons to "hide" the elements in both views. When hidden, the icons will show as gray.Image 6 of 12What to chooseSelect an element you want to "Show" from a "Hidden" state. In the left-side settings, navigate to the Styles tab then scroll down to Visibility.
Buttons and menus referencedStylesVisibility.
Next stepClick on each mobile and desktop visibility buttons to "hide" the elements in both views. When hidden, the icons will show as gray.
Step 2: Hide Element
Click on each mobile and desktop visibility buttons to "hide" the elements in both views. When hidden, the icons will show as gray.
Step 2: Hide Element (image 7 of 12)What this shows Click on each mobile and desktop visibility buttons to "hide" the elements in both views.What this showsIllustrates the "Step 2: Hide Element" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 2: Hide Element" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Click on each mobile and desktop visibility buttons to "hide" the elements in both views. When hidden, the icons will show as gray. Immediately after, the guide continues: In the funnel or website builder, choose the Button element that you want to use.Image 7 of 12What to clickClick on each mobile and desktop visibility buttons to "hide" the elements in both views. When hidden, the icons will show as gray.Next stepIn the funnel or website builder, choose the Button element that you want to use.
Step 3: Choose the Button
In the funnel or website builder, choose the Button element that you want to use.
Step 3: Choose the Button (image 8 of 12)What this shows In the funnel or website builder, choose the Button element that you want to use.What this showsIllustrates the "Step 3: Choose the Button" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 3: Choose the Button" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: In the funnel or website builder, choose the Button element that you want to use. Immediately after, the guide continues: On the right side of the screen, you'll find the element settings. Under General, scroll all the way down to Button Actions.Image 8 of 12What to chooseIn the funnel or website builder, choose the Button element that you want to use.
Buttons and menus referencedButton
Next stepOn the right side of the screen, you'll find the element settings. Under General, scroll all the way down to Button Actions.
Step 4: Navigate to Button Actions
On the right side of the screen, you'll find the element settings. Under General, scroll all the way down to Button Actions.
In the Link To dropdown, select Hide & Show Elements.
Step 4: Navigate to Button Actions (image 9 of 12)What this shows In the Link To dropdown, select Hide & Show Elements.What this showsIllustrates the "Step 4: Navigate to Button Actions" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 4: Navigate to Button Actions" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: In the Link To dropdown, select Hide & Show Elements. Immediately after, the guide continues: Click Show Elements to open a dropdown listing all hidden elements in the site page. Choose the element or elements that you'd like to show when the button is clicked. You can choose an element, a section, a column, or column rows.Image 9 of 12What to chooseIn the Link To dropdown, select Hide & Show Elements.
Buttons and menus referencedButton Actions.Hide & Show Elements.
Next stepClick Show Elements to open a dropdown listing all hidden elements in the site page. Choose the element or elements that you'd like to show when the button is clicked. You can choose an element, a section, a column, or column rows.
Step 5: Select Element to Show
Click Show Elements to open a dropdown listing all hidden elements in the site page. Choose the element or elements that you'd like to show when the button is clicked. You can choose an element, a section, a column, or column rows.
Note: If no elements are shown in the Show Elements dropdown, you must first hide an element.
Step 5: Select Element to Show (image 10 of 12)What this shows Note: If no elements are shown in the Show Elements dropdown, you must first hide an element.What this showsIllustrates the "Step 5: Select Element to Show" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 5: Select Element to Show" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Note: If no elements are shown in the Show Elements dropdown, you must first hide an element. Immediately after, the guide continues: Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.Image 10 of 12What to chooseNote: If no elements are shown in the Show Elements dropdown, you must first hide an element.
Buttons and menus referencedShow ElementsNoteShow Elements dropdown
Next stepOnce done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.
Step 6: Save Changes
Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.
Step 6: Save Changes (image 11 of 12)What this shows Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.What this showsIllustrates the "Step 6: Save Changes" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Step 6: Save Changes" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Once done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website. Immediately after, the guide continues: If you've accidentally hidden an element from both desktop and mobile views, you won’t be able to see or click it on the canvas—but you can still access and edit it using the Layers panel in the builder.Image 11 of 12How to confirmOnce done choosing which ones to hide, click the Save button to save your changes or the Preview button to preview and test your funnel or website.
Buttons and menus referencedSavePreview
Next stepIf you've accidentally hidden an element from both desktop and mobile views, you won’t be able to see or click it on the canvas—but you can still access and edit it using the Layers panel in the builder.
Editing Hidden Elements
If you've accidentally hidden an element from both desktop and mobile views, you won’t be able to see or click it on the canvas—but you can still access and edit it using the Layers panel in the builder.
Open the Layers Panel In the top left of the Funnel or Website Builder, click the Layers icon (stacked layers). This will open a list of all the elements in your section/page, including hidden ones.
Find the Hidden Element Scroll through the list to locate the element you hid. It may appear dimmed or with an "eye" icon indicating it’s not visible on either view.
Select the Element Click the element's name in the list to select it. The element will now be highlighted in the builder, and its settings panel will appear.
Restore Visibility With the element selected, click the visibility toggle (eye icon) in the top bar to turn it back on for desktop and/or mobile.
Editing Hidden Elements (image 12 of 12)What this shows Open the Layers Panel In the top left of the Funnel or Website Builder, click the Layers icon (stacked layers).What this showsIllustrates the "Editing Hidden Elements" section of "Hide and Show Elements on Button Click (Funnels & Websites)".This screenshot appears in the "Editing Hidden Elements" section of "Hide and Show Elements on Button Click (Funnels & Websites)". The text alongside this image reads: Open the Layers Panel In the top left of the Funnel or Website Builder, click the Layers icon (stacked layers). This will open a list of all the elements in your section/page, including hidden ones. Find the Hidden Element Scroll through the list to locate the element you hid. It may appear dimmed….Image 12 of 12Where to goOpen the Layers Panel In the top left of the Funnel or Website Builder, click the Layers icon (stacked layers). This will open a list of all the elements in your section/page, including hidden ones. Find the Hidden Element Scroll through the list to locate the element you hid. It may appear dimmed or with an "eye" icon indicating it’s not visible on either view. Select the Element Click the element's name in the list to select it. The element will now be highlighted in the builder, and its settings panel will appear. Restore Visibility With the element selected, click the visibility toggle (eye icon) in the top bar to turn it back on for desktop and/or mobile.
Buttons and menus referencedOpen the Layers PanelLayersFind the Hidden ElementSelect the ElementRestore Visibilityvisibility toggle (eye icon)
All 4 steps in this procedure
Open the Layers Panel In the top left of the Funnel or Website Builder, click the Layers icon (stacked layers). This will open a list of all the elements in your section/page, including hidden ones.
Find the Hidden Element Scroll through the list to locate the element you hid. It may appear dimmed or with an "eye" icon indicating it’s not visible on either view.
Select the Element Click the element's name in the list to select it. The element will now be highlighted in the builder, and its settings panel will appear.
Restore Visibility With the element selected, click the visibility toggle (eye icon) in the top bar to turn it back on for desktop and/or mobile.
