Estos días hemos estado creando para uno de nuestros clientes una versión AMP de uno de sus sitios web. La idea era conseguir un resultado lo más parecido posible a la versión sin AMP del sitio, realizado con DIVI. Utilizamos el plugin Amp for WP con bastante CSS personalizado. Hoy queremos compartir con vosotros un snippet para Amp for WP que os permitirá tener una tabla de precios “estilo DIVI“.

Snippet para Amp for WP: Cómo crear una tabla de precios estilo DIVI

Amp es una versión de HTML creada entre otros por Google, pensada para crear páginas para móviles que carguen muy rápido, dando una mejor experiencia al usuario. Se muestras sobre todo cuando buscas algo en Google desde un móvil (las reconocerás porque llevan el signo de un “rayito” al lado), pero también puedes hacer que sean la versión predeterminada para los usuarios que acceden a tu sitio web desde su smartphone.

La principal pega es que es una versión de HTML con algunas restricciones importantes, como el no poder usar javascript más allá del aprobado oficialmente, y que no puedes usar hojas de estilo (CSS) separadas, sino que tienes que incluir el css en la cabecera de la página.

Han salido algunos plugins para WordPress que nos ayudan a obtener la versión AMP de nuestro sitio. El mejor de ellos a nuestro criterio es Amp for WP. Funciona muy bien, por ejemplo, para entradas de blog (siempre que usemos el editor predeterminado de WordPress y no un editor visual, algo que para las entradas nosotros recomendamos), pero no se lleva tan bien con páginas creadas por un editor visual como el de DIVI.

Afortunadamente, existe la posibilidad de crear nuestra propia versión AMP de una página cualquiera, gracias al plugin de Amp for WP. Eso sí, para conseguir los mejores resultados habrá que “ensuciarse” un poco las manos con HTML y CSS.

El resultado que buscamos

Como ya hemos dicho, nuestro objetivo era conseguir que la página AMP fuera muy parecida a la versión para móvil “sin AMP” de la página. La mayor parte de funciones fueron fáciles, pero alguna, como las tablas de precios, llevo un poquito más de trabajo (tampoco demasiado). El resultado que buscábamos era éste:

Tabla de precios en Diviv - Objetivo de nuestro snippet para Amp for WP

Este resultado es una captura de la versión móvil de la página web. Para recrearlo en Amp hemos creado un snippet para Amp for WP que pasamos a compartir con vosotros, para que lo utilicéis si os parece interesante y para que sirva como inspiración.

CSS Personalizado

Lo primero que tenemos que hacer (suponiendo que tengamos ya el plugin Amp for WordPress instalado) es ir al apartado de configuración del plugin donde añadimos CSS. Lo encontramos en AMP>Design>Global.

Una vez en dicha sección añadiremos el siguiente código:

/* Sección Precios estilo DIVI para AMP */
/* CSS a declarar en cabecera */

/* Tabla de precios */
/* Empezamos por el cuadro que envuelve a la tabla de precios */
.preciocuadro {
 background-color:#505050; /* Color de fondo del cuadro */
 border:2px solid #f0f0f0; /* Definimos el borde del cuadro */
 text-align:center; /* Alineación del texto dentro del cuadro */
 margin-top:25px; /*Margen por arriba */
 margin-bottom:25px; /* Margen por abajo */
}
/* Formato de la cabecera */
.preciocabecera {
 background-color:#808080; /* Color de fondo de la cabecera */
 padding:2px; /* Relleno de la cabecera (distancia entre el borde y el contenido) */
 border-bottom:2px solid #f0f0f0; /* borde inferior de la cabecera */
}
/* Formato de la sección de precio */
.preciovalor {
 font-size:35px; /* tamaño de la fuente que utilizamos para el precio */
 font-weight:bold; /* Hace que se muestre en negrita */
 line-height: 1; /* Altura de línea */
 margin-bottom:0; /* Margen inferior */
 padding:2px; /* Relleno de esta sección */
}
/* Formato de la sección de características */
.precioventajas {
 border-top:2px solid #f0f0f0; /* borde superior de esta sección */
 padding:2px; /* Relleno de esta sección */
}

/* Botones - se puede utilizar en otros lugares */
.boton1 {
 text-align:center; /* Relleno de esta sección */
 margin: 2px 15px 5px 15px; /* Márgenes del botón */
 background-color:#7f2d2f; /* Color de "relleno" del botón */
 color:#fff; /* Color del texto del botón */
 border:2px solid #fff; /* Borde del botón */
 border-radius:25px; /* "redondez" del botón */
 padding:5px; /* Relleno del botón */
}

Como podéis comprobar, hemos añadido numerosos comentarios al código. Hemos de decir que, si bien no solemos incluir tantos comentarios, sí que es importante, cuando elaboremos snippets o fragmentos de código nos acostumbremos a comentarlos. Esto, creedme, os servirá para evitaros problemas en un futuro.

Se pueden cambiar casi todos los valores para cambiar colores, estilo del borde, etc. Queda a vuestro criterio.

El código se introduce aquí:

Dónde poner nuestro snippet para amp for wp

Con esto ya tendremos definidos los estilos para nuestra tabla de precios.

Poniendo el código HTML en el editor AMP

Para terminar de incluir nuestra tabla de precios en nuestra página AMP iremos a la edición de la página y bajaremos hasta la sección etiquetada como Custom AMP editor. Tenemos que tener activado el aspa que pone Use this Content as AMP Content y seleccionar la opción de editor HTML.

El código que tenemos que incluir es el siguiente:

<!--Tabla de precios estilo DIVI para AMP-->
<!--A incluir en el body del documento, donde queramos poner la tabla de precios-->

<div class="preciocuadro">
<!--Esto es la cabecera de la tabla-->
<div class="preciocabecera">
<h3>Con copa</h3>
</div>
<!--Sección donde va el precio-->
<div class="preciovalor">
<p class="preciovalor">22,50 €</p>
</div>
<!--Sección para las características del producto y el botón de compra-->
<div class="precioventajas">
<span style="text-decoration: line-through;">Antes 33 €</span>
<!--El botón de compra propiamente dicho-->
<a class="boton1" href="URL a la que se enlaza el botón">Reservar ahora</a>
</div>
</div>

Obviamente, tendremos que cambiar los textos por los que necesitemos para nuestra tabla y poner la URL a la que debe dirigir el botón.

poniendo el snippet para amp for WP en el editor

Ya sólo nos queda guardar los cambios, y comprobar que hemos obtenido un resultado muy parecido al buscado (podemos, con algo de código adicional, acercarnos más, pero nos gusta el resultado).

Y esta es nuestra tabla de precios en AMP:

El resultado de nuestro snippet para WP

Como veis, se pueden obtener resultados interesantes en AMP con un poquito de trabajo, de manera que mantengamos la imagen de nuestra web también en AMP, algo importante porque en nuestra opinión AMP ha venido para quedarse.

Esperamos que os haya gustado este pequeño snippet para Amp for WP. Si queréis consultarnos cualquier cosa sobre AMP o diseño web, dejadnos un comentario.