The comparison table is used to offer a comparison of products or services to the user, in which they could benefit from purchasing a certain item. It is undoubtedly a pleasant experience for the customer when he is undecided when selecting a product, with this he could look at the highlights that each product offers.
{getToc} $title={Table of Content}
Comparative Table Analisys
blogging
wordpress
HTML
responsive
Fits perfectly into any template
Yes
available on any device
Automatic
Manual product information must be placed
Get all the info from amazon
You must manually add the description
Use APIs
Do not
Yes
Do not
The good
It can be implemented using the CSS style sheet.
It is installed by a Plugin making the job easy
Integrates using CSS
The bad
Everything must be replaced manually and in its mobile version.
If you don't have an amazon API you can't use it.
Everything must be replaced manually and in its mobile version.
Tutorial
There is a step by step to integrate it.
It is intuitive to install and easy to use.
Video tutorial available
Buy
blogging
responsive
Fits perfectly on any screen
Automatic
Se debe colocar la información del producto manual
Utiliza API
No
Lo bueno
Se puede implementar usando la hoja de estilo CSS
Lo malo
Se debe reemplazar todo manualmente y en su versión movíl
Tutorial
Existe un paso a paso para integrarlo.
Comprar
Wordpress
Responsive
Si
Automatico
Extrae toda la info de amazon
Utiliza API
Si
Lo bueno
Se instala por un Plugin dejando el trabajo facíl
Lo malo
Si no tienes un API de amazon no se puede usar
Tutorial
Es intuitivo al instalarlo y facíl de usar
Comprar
HTML
Responsive
Disponible en cualquier dispositivo
Automatico
Debes agregar manualmente la descripción
Utiliza API
No
Lo bueno
Se integra usando el CSS
Lo malo
Se debe reemplazar todo manualmente y en su versión movíl.
Tutorial
Disponible un video titurial
Comprar
Explanatory Video: Add Comparative Table
CSS Style Sheet
To shape the comparative table like the AAWP plugin, for this we must place the .CSS between the <head> </head> tag
<link href='https://dl.dropboxusercontent.com/s/0abosmxjy76ojl6/aawp-estilo.css' id='aawp-css' media='all' rel='stylesheet' type='text/css'/>
Copy and Paste the DIV
You just have to include the Div inside an entry to add the comparison table. You place it in HTML view and replace all the info manually until you complete the articles that you will put on view.
<div class="aawp">
<div id="aawp-tb-2754">
<!-- Desktop -->
<div class="aawp-tb aawp-tb--desktop aawp-tb--cols-4">
<div class="aawp-tb__row" style="border: 3px black;">
<div class="aawp-tb__head" style="border: 1px black">
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight" style="background-color: orange;">
<div class="aawp-tb-product-data-custom_text" style="color: white; ">
Blogger
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
WordPress
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
HTML
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-thumb aawp-tb__data--highlight">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2efksa3nm5p03kt/Blogger-Logo-500x283.png" alt="Blogger">
</span>
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-thumb aawp-tb__data--highlight">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2b7zilevq0p5w24/WordPress-Logotipo-2008-presente-650x366.jpg" alt="Wordpress">
</span>
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-thumb aawp-tb__data--highlight">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb"><img src="https://dl.dropboxusercontent.com/s/8norj486debox27/352-3529769_html5-course-training-content-details-logo-html-5.png" alt="HTML">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-title aawp-tb__data--highlight">
<div class="aawp-tb-product-data-title">Se adapta perfectamente a cualquier plantilla
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-title aawp-tb__data--highlight">
<div class="aawp-tb-product-data-title">Si
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-title aawp-tb__data--highlight">
<div class="aawp-tb-product-data-title">disponible en cualquier dispositivo
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se debe colocar la información del producto manual
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Extrae toda la info de amazon
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Debes agregar manualmente la descripción
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-price aawp-tb__data--highlight">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-price aawp-tb__data--highlight">
<div class="aawp-tb-product-data-price">
Si
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-price aawp-tb__data--highlight">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se puede pude implementar usando la hoja de estilo CSS
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se instala por un Plugin dejando el trabajo facíl
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se integra usando el CSS
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movil.
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Si no tienes un API de amazon no se puede usar.
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movil.
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Existe un paso a paso para integrarlo.
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Es intuitivo al instalarlo y facíl de usar.
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Disponible un video tutorial
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-button aawp-tb__data--highlight">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">Consigue los Files
</a>
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-button aawp-tb__data--highlight">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">Comprar Web Oficial
</a>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-button aawp-tb__data--highlight">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">Consigue los files
</a>
</div>
</div>
</div>
</div>
<!-- Mobile -->
<div class="aawp-tb aawp-tb--mobile">
<div class="aawp-tb__product aawp-tb-product-0 aawp-tb__product--highlight">
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Blogger
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-thumb">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2efksa3nm5p03kt/Blogger-Logo-500x283.png" alt="Blogger">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb__data aawp-tb__data--type-title">
<div class="aawp-tb-product-data-title">
Se adapta perfectamente a cualquier pantalla
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se debe colocar la información del producto manual
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb__data aawp-tb__data--type-price">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se puede implementar usando la hoja de estilo CSS
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movíl
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Existe un paso a paso para integrarlo.
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb__data aawp-tb__data--type-button">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">
Consigue los files
</a>
</div>
</div>
</div>
</div>
<div class="aawp-tb__product aawp-tb-product-1 aawp-tb__product--highlight">
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Wordpress
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-thumb">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2b7zilevq0p5w24/WordPress-Logotipo-2008-presente-650x366.jpg" alt="WordPress">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb__data aawp-tb__data--type-title">
<div class="aawp-tb-product-data-title">
Si
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Extrae toda la info de amazon
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb__data aawp-tb__data--type-price">
<div class="aawp-tb-product-data-price">
Si
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se instala por un Plugin dejando el trabajo facíl
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Si no tienes un API de amazon no se puede usar
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Es intuitivo al instalarlo y facíl de usar
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb__data aawp-tb__data--type-button">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="https://getaawp.com/" title="Comprar" target="_blank" rel="nofollow noopener sponsored">
Comprar Web Oficial
</a>
</div>
</div>
</div>
</div>
<div class="aawp-tb__product aawp-tb-product-2 aawp-tb__product--highlight">
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
HTML
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-thumb">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/8norj486debox27/352-3529769_html5-course-training-content-details-logo-html-5.png" alt="HTML">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb__data aawp-tb__data--type-title">
<div class="aawp-tb-product-data-title">
Disponible en cualquier dispositivo
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Debes agregar manualmente la descripción
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb__data aawp-tb__data--type-price">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se integra usando el CSS
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movíl.
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Disponible un video titurial
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb__data aawp-tb__data--type-button">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">
Consigue los files
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Advantages of a comparison table
If you place a comparison of products you can offer the highlights of each article, therefore, when this comparative table is added it has the purpose of showing the user the most revealing of said product.
Otherwise, you have another purpose of using a comparison table, it is to increase the chances that the user will click on the purchase button and take the commission of the affiliate product.
Of course, it has its point in favor that a comparative table must be responsive, that it adapts perfectly to any screen without losing presence. With this version, you get a table that fits all screen sizes.
Etiqueta
English