Feature Comparision

Test page for Feature Comparision layout

NEW "Feature Comparision" Layout

This section shows an example of the NEW "Feature Comparision" layout

HERE ARE THE ITEMS TO COMPARE

This is feature 1 (Feature Comparison Layout)

This is feature 2 (Feature Comparison Layout)

This is feature 3 (Feature Comparison Layout)

THIS IS A SEPARATOR ROW FOR THE NEXT SECTION

Section 2, row 1

Section 2, row 2

Section 2, row 3

This will be a section with a comparison table in it.

Standard
Premium

First item is attempting to use a bold X character like this [ X ] in the column, and the second item is trying to use an icon mark like this [ ] in the column.

X

Some feature to compare for row 1

Some feature to compare for row 1

Current "Features" Layout

This section shows an example of the current "Features" layout

  • HERE ARE THE ITEMS TO COMPARE
  • This is feature 1 (Feature Layout)

  • This is feature 2 (Feature Layout)

  • This is feature 3 (Feature Layout)

In the above example, we added a bit of custom CSS to the site theme to handle the shading of every other line of the table that is produced by this layout. This shading was not included in the original Features layout. You will find the following style sheet definitions in the “Other CSS” section of the site:

/* The mpsfeature items below are for adjustments to the “Features” widget to allow alternating shaded rows in the table. See DesignMerge Pro page for an example */

div#mpsfeature_div {
}

div#mpsfeature_div table, th, td {
border: 0px solid black;
border-collapse: collapse;
padding: 0px;
margin: 0px;
}

div#mpsfeature_div li:nth-child(even) {
background: #f4f4f4;
}

div#mpsfeature_div li:nth-child(odd) {
background: #ffffff;
}

New "Feature Comparison" Layout Development

We would like to make the following changes:

1) Create a new layout named “Feature Comparison” that will be based on the current “Feature” layout.

2) Include the ability to enter each feature one at a time as in the original version. In addition, for each feature row added, there will be the option to enable up to two “comparison columns”. Each comparison column will behave in the same fashion as the feature entry, however, instead of left justified the text entered will be centered within the column width. Each of the columns should occupy approx. 15% of the available width (so if both comparison columns are enabled, this will leave 70% for the feature description, and 30% (15% each) for the title and/or character to be inserted into the comparison column).

3) If NO comparison columns are enabled, then the feature row will behave in the normal fashion as in the current implementation (except with the new ability to specify the background color, as described below).

4) When adding a feature row, there should also be a toggle indicating whether the background of the row will be a “Heading”. Currently there is a single “Heading” item in the Feature layout. We would like to create a table that may have other headings interspersed throughout the feature table. The heading selection would ideally allow for the entry or selection of a particular “background color” to use for the entire row. The default would be to use the standard alternating color was.

Using the above approach, we have mocked up a Feature Comparison section that we should be able to implement using the newly developed layout. Note that two different layouts will be required, one for the Meadows site and the other for the AccurioPro VDP Site (which is essentially a clone of the Meadows site with different CSS). See example below:

MOCKUP FOR MEADOWSPS.COM SITE

Meadows

 

MOCKUP FOR ACCURIOPROVDP.COM SITE

ACCURIOPRO

The above example of the AccurioPro VDP comparison table can be found on the following web page:

[ https://www.accurioprovdp.com/accuriopro-vdp-premium/#COMPARE ]

This table was built using standard HTML, but it does provide a reference for the basic styling that we are trying to achieve on that site.

New feature comparison

This is the new feature comparison module

WHAT FEATURES DO WE WANT TO SHOW OFF?

Essential
Premium

SEPARATOR ROW

Here is the very first feature.

Here is feature number two.

Here is feature number three.

Here is the next section, with no comparison

Here is the very first feature.

Here is feature number two.

Here is feature number three.