Popover Element

20/01/2021

The Popover Element is a simple yet elegant way to display information without disrupting your page layout. The Popover Element can be used as a stand alone Element from the Avada Builder, but it is also an Inline Element, accessible from the Inline Editor. You can add popovers to text, images, and even buttons! To learn the different ways on how to add popovers, please continue reading below.

Hover Here To See The Popover Element In Action
View Element Demo Page!

Overview

How To Use The Popover Element

You can add popovers to any text content or image you have. For example, a word between paragraphs or an entire sentence. You can also add popovers on buttons, however to do that, it requires a few more steps. Continue reading below to learn about how to add popovers to text, images, and buttons.

How To Add Popovers To Text

There are two ways to add a Popover to text – to pre-existing text, or through the Popover Element itself. let’s look at both ways.

Existing Text

Step 1. Select the text you want to be the trigger for the Popover in any Element that has a Text component, such as the Text Block, or Title. If you are working in Avada Live, the Inline Editor will appear, and from the + button, you can choose the Popover Element. If you are in Avada Builder, you will need to edit the Text based Element, and select the trigger text in the WordPress content editor field inside the Element.

Step 2. On the toolbar, you’ll find the ‘Avada Builder Element Generator’ icon which looks like the Avada logo. Click the ‘Element Generator’ icon to bring up the Elements window.

Step 3. Select the ‘Popover’ element.

Step 4. In the ‘Triggering Content’ field, you will see the text you have selected to trigger the popover with. For example, View More Info Here!.

Step 5. In the ‘Popover Heading’ and ‘Contents Inside Popover’ options, insert the heading text and the content, respectively, that you’d like to display in the popover.

Step 6. Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.

Step 7. If you are working in the back-end Avada Builder, click the ‘Insert’ button, and you will be back in the original text-based Element. Click Save.

Standalone Element

You can also just add the Popover Element directly into your content.

Step 1. Select the Column you wish to place your Popover content, and select Popover from the Element list.

Step 2. In the ‘Triggering Content’ field, you need to add some content. This can be plain text, or it could be another Element, chosen from the Avada Builder Element Generator. Obviously, not all Elements will work with this method. Stick to basic things like text, images, or buttons etc. It’s with this method we can add Popovers to images and buttons.

Step 3. Click Insert, to add the generated Element into the Triggering Content field.

Step 4. Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab. If you are working in the back-end Avada Builder, click Save to finish editing the Element.

Popover Element - Adding a popover to text

How To Add Popovers To Images

Instead of adding a Popover to an Image, we do it the other way around – we add an image to a popover.

Step 1 – Add the Popover Element to you content where you wish the image to display.

Step 2 – In the Triggering Content options, you need to add your image. Locate the WordPress content editor field in your chosen element. On the toolbar, you’ll find the ‘Avada Builder Element Generator’ icon which looks like the Avada logo. Click the ‘Element Generator’ icon to bring up the Elements window.

Step 3 – Select the ‘Popover’ element.

Step 4 – In the ‘Triggering Content’ field, click ‘Add Media’ button, and select a picture from the Media Library. If there are no images in the Media Library, go to ‘Upload Files’ tab, and upload an image. Upon selecting the chosen image, click ‘Insert into page’ button.

Step 5 – In the ‘Popover Heading’ and ‘Contents Inside Popover’ options, insert the heading text and the content, respectively, that you’d like to display in the popover.

Step 6 – Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.

Step 7 – Once finished, click the ‘Insert’ button.

Step 8 – You can then add content into the main element as needed. Once you’re done, click ‘Save’ to save your changes.

Popover Element - Adding a popover to an image

How To Add Popovers To Buttons

Step 1 – Create a popover by following the instructions in the ‘How To Add Popovers To Text’ section above. Make sure to set the ‘Triggering Method’ option to Hover in order for the popover to display when hovering over the button.

Step 2 – Insert the popover element to the page, then switch to the Default Editor to copy the popover’s code snippet. Once you’ve copied it, you can discard it. It looks something like this:

Copy to Clipboard

Step 3 – Activate the Avada Page Builder again and insert a Button element. Click the ‘Settings’ icon to bring up it’s options window.

Step 4 – Paste the Popover code snippet you just copied into the ‘Button’s Text’ field. You can then customize the button to your liking using the different options available. Once you’re finished customizing the Button Element, click the ‘Save’ button.

Avada Website Builder

663,374 Businesses Trust Avada

Get Avada
Avada Website Builder

663,374 Businesses Trust Avada

Get Avada
Avada Website Builder

663,374 Businesses Trust Avada

Get Avada

Inline Elements In Avada Live

Please see the Inline Elements document for more details on how Inline Elements work in Avada Live.

Inline Editor > Inline Elements

Element Options

General Tab

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Popover section.

  • Triggering Content – This is the content that will trigger the popover.

  • Popover Heading – Insert the heading text of the popover.

  • Contents Inside Popover –Text to be displayed inside the popover.

  • Popover Trigger Method –Select mouse action to trigger popover. Choose from Hover, or Click.

  • Popover Position – Select the display position of the popover. Choose from Default, Top, Bottom, Left, or Right.

  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View The Options Screen

Design Tab

  • Popover Heading Background Color – Controls the background color of the popover heading.

  • Popover Content Background Color – Controls the background color of the popover content area. Leave empty for the default value.

  • Popover Border Color – Controls the border color of the of the popover box.

  • Popover Text Color – Controls all the text color inside the popover box. Leave blank for default value.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Popover

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Popover Heading Background Color – Controls the background color of the popover heading.

  • Popover Content Background Color – Controls the background color of the popover content area.

  • Popover Border Color – Controls the border color of the of the popover box.

  • Popover Text Color – Controls all the text color inside the popover box. Leave blank for default value.

  • Popover Position – Selects the position of the popover in reference to the triggering element. Choose from Top, Right, Bottom, or Left.

View The Options Screen
Avada Website Builder

663,374 Businesses Trust Avada

Get Avada
Avada Website Builder

663,374 Businesses Trust Avada

Get Avada
Avada Website Builder

663,374 Businesses Trust Avada

Get Avada