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!,OverviewHow To Add Popovers To TextHow To Add Popovers To ImagesHow To Add Popovers To Buttons
Inline Elements In Avada Live
Element OptionsGlobal OptionsUseful Links & Resources,How To Use The Popover ElementYou 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 TextHow To Add Popovers To ImagesHow To Add Popovers To ButtonsHow To Add Popovers To TextThere 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 TextStep 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 ElementYou 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.
How To Add Popovers To ImagesInstead 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.
How To Add Popovers To ButtonsStep 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[fusion_popover title="" content="This is a popover." trigger="hover" placement="top" class="" id="" title_bg_color="" content_bg_color="" bordercolor="" textcolor=""]Button Text[/fusion_popover] 1[fusion_popover title="" content="This is a popover." trigger="hover" placement="top" class="" id="" title_bg_color="" content_bg_color="" bordercolor="" textcolor=""]Button Text[/fusion_popover]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.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 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.,Element OptionsLocation: 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. Also note that the displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
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 ScreenDesign 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 ScreenGlobal OptionsLocation: 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,Useful Links & ResourcesRead more about Inline Elements HereRead about how to use the Element Generator Here!