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
2 (40%) 1 voto
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:

La propiedad z-index
- 76
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Introducción al CSS. Que significa Cascading Style Sheets.
- 208
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 203
Código html y css de como crear un menú vertical con un submenú horizontal.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 241
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Como centrar un texto mediante CSS y no con HTML
- 566
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Dimensiones reales de una caja en CSS
- 202
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.
Box Sizing, como modificar el modelo de cajas convencional
- 209
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 179
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Selectores CSS. Que son y como usarlos
- 236
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Ejemplo de menú vertical con submenú desplegable vertical (CSS)
- 184
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
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.