Maquetar una página de prestashop 1.6 con bootstrap

Maquetar una página de prestashop 1.6 con bootstrap

Print Friendly, PDF & Email
Maquetar una página de prestashop 1.6 con bootstrap
3 (60%) 2 votos

Una de mis clases favoritas es cuando enseño a los alumnos algunos ejemplos de tiendas online en base Prestashop y en las que todavía no se han dado cuenta que el uso de tablas es totalmente desaconsejado.

¡Ni se os ocurra maquetar con tablas!

Las tablas rompen el diseño responsive.

Si has llegado a esta entrada te explico como solucionarlo y te doy un ejemplo de por dónde empezar.

La clave es entender que Prestashop 1.6 utiliza bootstrap.

Podéis comprobarlo vosotros mismos observando el código html (con mozilla ctrl + u o directamente inspeccionando la consola del navegador) y viendo que en las etiquetas html aparecen clases del tipo col-xs-12, col-sm-4, col-md-8 o col-xl-3.

Si estás pensando en comprar algún tipo de constructor para prestashop tal vez puedas esperar un poquito más.

Puede ser interesante contratar una agencia  o freelance, aunque tal vez también os podría interesar contratar a un alumno del curso de confección y publicación de páginas web IFCD0110.

Vamos a ello.

Definir la estructura de la página

maquetacion prestashop 1.6 bootstrap
Ejemplo de diseño para teléfono y versión de escritorio.

El primer paso es dibujar sobre un papel como quieres visualizar la página.

Empieza por la versión teléfono.

Después la tableta.

Finalmente la versión de escritorio.

E imagina que se trata de bloques que a posteriori se van a ir apilando unos sobre otros.

Escribir el html

A continuación escribiremos el html correspondiente combinado con las clases de prestashop pertinentes.

Recordemos las clases que nos sirven para definir columnas:

  • .row, sirve para indicar una fila (cuidado: prestashop 1.6 usa la versión 2.3 de bootstrap. a la fecha de escribir esta entrada la versión última es 3.3. en esta versión no uses la clase .row sino .container)
  • .col-xs-*, cuanto va a ocupar la columna en teléfono vertical.
  • .col-sm-*, cuanto va a ocupar la columna en teléfono horizontal y tablet vertical
  • .col-md-*, cuanto va a ocupar la columna en tablet horizontal y pantalla de escritorio
  • .col-xl-*, cuanto va a ocupar en una pantalla de escritorio grande

Los * indican un número que va del 1 al 12.

En total todas las filas tienen que sumar 12 columnas.

Cuando una columna ha sido definida para una pantalla de orden inferior, si no se va a modificar en la pantalla de orden superior entonces no es necesario indicar nada más. El motivo lo explicaríamos en una entrada posterior en la que demostrásemos la lógica que hay detrás del css de bootstrap.

El código resultante lo podéis ver en la imagen.

html con bootstrap
Html + bootstrap para prestashop 1.6

¡Y esto es todo!

Un ejemplo sencillo pero práctico.

¡Nos vemos mañana con una nueva entrada!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.