-
Posts
-
I’m struggeling with creating a common pricing table comparing the packages for purchase, i.e. 4 columns where the first contains the text description of the feature and the following 3 has icons.
…………… package A package B package C
Feature 1: [checkmark] [minus] [minus]
Feature 2: [checkmark] [checkmark] [minus]
Feature c: [checkmark] [checkmark] [checkmark]
Price 10,- 20,- 30,-Can anybody point me in the right direction on how to design this in Enfold?
Creating a table does not allow me for using other than text but I need the icons. Using columns and other layout elements does not allow me to align the feature text with the icons.Hey ipressen,
Thank you for your patience, to create a pricing table like this:
add these icon shortcodes into the table:[av_font_icon icon='ue812' font='entypo-fontello' size='40px' position='center' color='green'][/av_font_icon] [av_font_icon icon='ue819' font='entypo-fontello' size='40px' position='center' color='red'][/av_font_icon]the top one is a checkmark, and the other is a minus.
This is how the backend looks:
I recommend showing the empty cells, otherwise the rows will move out of place:
Then this is the css I used in the Quick CSS to make the text black and make all of the cells the same height so they would line up and to “hide” the empty cells:.pricing-table > li { font-size: 20px; line-height: 48px; } .main_color .pricing-table > li:not(.avia-heading-row,.avia-pricing-row) { color: #000; } .pricing-table-wrap:nth-child(1) .pricing-table li.avia-heading-row { opacity: 0; } .pricing-table-wrap:nth-child(1) .pricing-table li.avia-pricing-row { opacity: 0; }Best regards,
Mike
- You must be logged in to reply to this topic.