Element Behaviors in Website Builder

  • 1
  • 2
  • Question
  • Updated 2 months ago
  • Doesn't Need an Answer
  • (Edited)
When designing your website, you want it to be the easiest experience possible for your site visitors. If you have a really complicated menu or the pages are difficult to navigate, it is more likely that someone will leave your page to find the answer to what they are looking for elsewhere. You can use Element Behaviors to help make your site easy to use.

Element Behaviors are effects you can place on an element that triggers another action. For example, you can add an element behavior to have a picture scale bigger when a mouse hovers over it. You can trigger a button to cause another element to appear or hide. You can create "scroll to" anchor links.

To add an element behavior an any element, simply:
  1. Click the element
  2. Click More > Advanced > Settings > Add Behavior
  3. Choose the Behavior you would like to apply
  4. Choose what element to apply it to
  5. Choose the trigger that will cause this behavior
The options that are available for Element Behaviors are:



  • Scale: Will allow you to cause an element to grow bigger or smaller when it is triggered
  • Rotate: Allows an element to pivot when triggered.
  • Pop Up Image: You can program an element to show an Image when triggered.
  • Show: Will allow you to Show an element when triggered. (*Note: You probably don't want the element visible to start, so you can go into Size & Position for the element you are "Showing" and turn off "Starts Visible")
  • Hide: Will allow you to Hide an element when triggered.
  • Scroll To Element: Creates an anchor link to scroll to an element when triggered.
  • Navigate Next: This can only be used to apply to elements like Image Gallery or Tabs, that you would need to scroll through.
  • Navigate Prev.: This can only be used to apply to elements like Image Gallery or Tabs, that you would need to scroll through.
  • Next Page: Will send the page viewer to the next page in your Navigation Menu
  • Prev Page: Will send the page view to the previous page in your Navigation Menu.
  • Submit Form: Can only be used on contact forms, to submit the information input.
  • Clear Form: Can only be used on contact forms, to clear the information input.
  • Play, Stop, Pause: Can only be used on Video elements to make it easier for your page visitors to view the video.
  • Add To Cart: Can be applied to add an item from your store to the cart. 
  • Analytics Event:Will allow you to connect to tracking you have in Google Analytics

When you choose these Behaviors, it will usually ask you if you want to apply it to "This Element" or "Other Element". If you choose "Other Element", it will bring you to the website page and you will need to choose which element to associate to the Behavior and click Apply.

**Note: You can only add element behaviors to elements on the same page
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 42,436 Points 20k badge 2x thumb

Posted 5 months ago

  • 1
  • 2
Photo of chefstef048944

chefstef048944

  • 154 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Pop Ups in Websitebuilder.

I want to do pop-up windows on the home page of one of my websites. This is just for announcing a sale or important information I want people to know when they visit. Something simple as a box and text, but it be good to know how to add an image to a pop-up box as well. I searched and found old content that wasn't working for me. Can someone help me? 
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 36,554 Points 20k badge 2x thumb
Hello,

You can use element behaviors in Website Builder to create this pop-up feature.
Photo of chefstef048944

chefstef048944

  • 154 Points 100 badge 2x thumb
This does not answer my question. I do not want to add a behavior to something on the page. I want an independent pop-up window with information not on the website.

Example: You visit a store website, and after the home page loads a window appears over the home page advertising something. 
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 36,554 Points 20k badge 2x thumb
Right, to accomplish this in Website Builder, you would add an image of this advertisement and place an element behavior on it to pop up or scale when the page loads.
Otherwise, if you can get HTML for an advertisement for whatever you are trying to advertise, you can place that on the site that way, via an HTML element.
Photo of chefstef048944

chefstef048944

  • 154 Points 100 badge 2x thumb
But then I need the image to be on the page, correct? That I do not want.
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 36,554 Points 20k badge 2x thumb
Technically, no. You can achieve this functionality, but it would be quite a few steps. You can turn off the "starts visible" setting on that image so that it doesn't show on the published page, set element behaviors to show the image and have it pop up when the page is loaded. Then, set element behaviors to hide the image when it is clicked on (put an x in the corner to give them something to click on).
Or, you can find something you want to advertise and get 3rd party HTML for a pop up ad.