Feature list item with popups

jstumm

Hi all,

on my site I use the item "feature list". You can see it on the area "Leistungen". The requirement ist, that the user can open a popup with detail information for each single feature in the list. But I can only past short codes for the hole list. Is there a option to realize this requirement? Perhaps with a other item?

Thanks for your help!

Julia

Pablo

Hello Julia,

You would have to create your own html structure with our popup shortcode.

See this shortcode:

https://themes.muffingroup.com/be/theme/shortcodes/typography/#popup

You can also use this HTML code:

<a href="#you-custom-id" target="_blank" rel="lightbox"> Click me </a>
<div id="you-custom-id" style="display:none">CONTENT HERE</div>

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jstumm

Thanks for your comment. I will try it.
I like the style of the feature list item. The hover effect ist very nice. Is it possible to take this style for my own html structure?

Pablo

It's simple CSS code

Please take a look at this documentation:

https://www.w3schools.com/cssref/sel_hover.asp

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jstumm

Hi,

I tried to make it with own html, based on your suggestion. But I don't get a good result. It doesn't looks like the feature list. There are no icon, the hover is gray and inside of the popup, I can't use <h3> tags. Is that right? 

Thank you very much!

Pablo

Can you send me a link to the page with that element?

I will check what you created and give you some tips.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jstumm

Normally I build my popups with popup maker and work with short codes. Is it possible to get the html code to create an item, who looks exactly like one entry of my feature list? With that solution, I can make every single entry with own code and insert the respective short codes of the popups. 

You can see the style on my site. The link is above. I would be grateful for your help.

Pablo

Yes, I know that link is above, but on which page? Is it the section on the bottom? "Kontakt" ?

About that element, we do not have the code to recreate that element, but surely It's possible.

Almost all of the items from Muffin Builder are built using the column item, so getting HTML code will be hard.

All informations about creating that effect are included here:

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

But, let me give you some tips:

1) To apply that CSS effect only for some column items, attach some class to the column item, like  myFeatureList

https://prnt.sc/uhhc1y

2) You can use the 'column' shortcode in the column item, see the example:

https://themes.muffingroup.com/be/theme/shortcodes/typography/#columns

So you can create [1/2 1/2], [1/3, 1/3, 1/3] layouts inside the column

If you have some questions, feel free to ask.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jstumm

So, finaly I found a solution for the list. I tried to add the hover effect, but I don't know exactly how to do it. Please take a look at the page https://kardio-dreisamtal.de/ and scroll to "Leistungen". If I want to add the hover effect to the first point in the list I do it like that: 

.column.mcb-column.mcb-item-4fxma42rq.one-third.column_list .list_item .list_right a:hover {

  background-color: #677171;

}

But it don't work. 

Pablo

This short css code will help you:

#leistungen .column:hover{background:#0095eb !important; color:white !important;}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jstumm

That works perfectly! Thank you very much! :-)