Popover Element

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.

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.

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.

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.

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:

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.

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