Vamos a seguir los pasos para dejar configurado correctamente MasterBootstrap, con el logo, menú y módulos siguiendo simples indicaciones.

Un template simple, rápido, liviano y versátil

MasterBootstrap es un template basado íntegramente en Bootstrap 3, adaptado para Joomla. Es extremadamente liviano y rápido y está pensado para ser el punto de partida para desarrollar cualquier sitio por complejo que sea.

Lo primero

Lo descargamos desde Github en esta dirección: https://github.com/gsuez/master-bootstrap-3 Lo instalamos en nuestro sitio como lo hacemos normalmente con cualquier template.

En este tutorial vamos a hacer un diseño con un logo y menú arriba, un módulo fullwidht, left y right, dos módulos Bottom y un copyright abajo.

Administrador del template

Luego de instalar el template, ingresamos al administrador de MasterBootstrap. Vamos a darle una proporción a la sección contenidos y dejamos el módulo Left con 2 y el Right con 3. Automáticamente el contenido principal queda con 7.

Luego en la pestaña Logo, subimos el logo de la empresa con una medida.

Armando el sitio

Nos dirigimos al módulo menú - Main Menu - donde debemos aplicar los estilos correspondientes.

Al entrar, le damos la posición Navigation, y en “Mostrar elementos del menú”, lo dejamos en “Sí” para que nos funcione bien el dropdown si tenemos submenús.

En la pestaña “Avanzado” ponemos las clases de Bootstrap:

nav menu navbar-nav navbar-right

Y guardamos.

Ahora, al módulo que ocupará todo el ancho. Puede ser un slideshow pero ahora dejaremos una foto solamente. Creamos un Módulo HTML Personalizado, y dejamos una foto de un ancho 1920px para que se veabien en la mayoría de los dispositivos. Le damos la posición Fullwidth. En esta posición no es necesario agregar clases de Bootstrap ya que toma todo el ancho por defecto.

Área Contenidos

Pasamos al contenido con los módulos Left y Right. Creamos un módulo para cada lado. Acá tampoco es necesario escribir las clases de Bootstrap pero podemos darle estilos si tenemos algunos. Posiciones; Left y Right respectivamente.

Dejaremos un par de módulos en la posición Bottom, y creamos HTML Personalizado para cada uno (puede ser cualquier módulo, pero para ejemplificar usamos este tipo de módulo).

Ambos: Posición Bottom. Clase:

col-md-6

Para finalizar seguimos con la información de copyright final en un módulo HTML Personalizado, lo mismo que arriba, escribiendo el estilo de Bootstrap en la clase. Posición Footer.

col-md-12

Si seguimos bien los pasos, lo que debemos tener es un aspecto similar a esto:

Como ven es muy fácil maquetar con MasterBootstrap, ya que siguen las reglas de Bootstrap solamente. Evitamos meter pesados códigos js y CSS que hacen que el sitio corra más lento, y no tendrán problemas a la hora de actualizar joomla lo que es un tremenda ventaja.

En próximos artículos veremos lo simple que es incluir efectos y funcionalidades a MasterBootstrap, con algunas líneas de código y si es necesario un archivo js.