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
Valora esta entrada
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 y hacen que el señor google se enfade un poco con vosotros.

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.

No existe ninguna necesidad de comprar ningún tipo de constructor para prestashop ni similar que va a sobrecargar y relantizar vuestra tienda. Tampoco hace falta hacer mención hablar de la suma de dinero que os vais a ahorrar…

Antes de contratar agencias que todavía vivien en los 00′ tal vez os interesaría 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!

Entradas relacionadas:

Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 47
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 22
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Dimensiones reales de una caja en CSS
- 113
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Unidades de medida absolutas y relativas en CSS
- 167
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 229
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Ejemplo de centrado horizontal de una caja con CSS
- 236
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 220
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 69
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Como mezclar CSS y HTML. Acoplamiento CSS
- 162
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
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.