Índice de contenidos
Introducción Bricks builder
El theme Bricks nos servirá para realizar la maquetación de nuestro proyecto digital en wordpress.
1. Estructura
La estructura de Bricks builder, es similar al HTML que vimos en clase con algunos ejemplos de maquetación HTML/CSS. Utilizando las siguientes etiquetas:
- Header
- Section
- Divs
- Footer
Por ejemplo montaríamos un section + Columnas y dentro de cada columna colocaremos H1, text, image,... según nuestro diseño. Ver vídeo de abajo ⬇️⬇️⬇️
Ejemplo de la estructura básica de una sección con columnas.
Todos los elementos (texto, videos, titulares,...) de la estructura los vamos a encontrar en el sidebar de la izquierda y se pueden añadir con el símbolo +.
2. Construir header y footer
Veamos como construir el header y footer, estas partes se van a repetir en toda nuestra web. Para ello crearemos una plantilla en Bricks.
En el menú principal de Wordpress, iremos a la opción de Bricks >>>Templates
Opción añadir new template, colocamos el nombre, por ejemplo header menu y seleccionamos de que tipo de plantilla se trata. En este caso HEADER. Apretamos botón Publish = guardar y procedemos a editar en Bricks (botón Edit with Bricks).
Podemos controlar los anchos de las columnas si, seleccionamos la columna y vamos a la pestaña Style, opción Layout y en width reducimos el tanto por ciento por ejemplo 20%.
En este ejemplo colocaremos el menú de nuestra web. Vamos Elementos + y seleccionanos Nav Menu y guardamos. Seleccionamos el menú de nuestra web, ver siguiente apartado.
2.1 Selección páginas de nuestro menú
Para crear un menú de nuestras páginas iremos al menu: Appearance>>>Menus.
3. Autolayout en Bricks - dirección Flexbox
En Figma vimos como funciona el Autolayout. En Bricks, podemos controlar la distribución de los elementos, en vertical, horizontal y distribuirlos dentro de sus contenedores.
Por ejemplo, podemos colocar un section y dentro de este los bloques, columnas con imagen, texto o cualquier elemento que necesitemos. Tanto en la section como en los elementos interiores, podemos controlar el orden de los elementos, en horizontal o vertical. Ver vídeo de ejemplo ⬇️⬇️⬇️:
Para más info, ver canal Youtube de Bricks:
4. Pestaña Layout
En la pestaña Style de los diferentes elementos, podemos gestionar:
- Layout
- Typography
- Background
- Border/box shadow
- Gradient/overlay
4.1 Layout: Margin / Padding
Margin = el espacio exterior entre los elementos.
Padding = el espacio interior entre los elementos, como vimos en Figma. Aquí puedes obervar un ejemplo de padding.
4.2 Typography
En este apartado, podemos configurar el tamaño de letra, alineación, familia tipográfica, peso (bold, regular, light...), estilo (cursiva, normal), interlineado, tracking, sombras, underline...
4.3 Background
Como su nombre indica, se gestionan en este apartado los colores de fondo de cualquier elemento, bloques, contenedores, tipografías...
4.4 Border / box shadow
Border: podemos controlar los strokes, aspectos como el grosor, color, incluso el border-radius.
Box shadow: sirve para configurar las sombras, con su posición en X e Y, efecto blur, spread, color, opacidad...
5. Exportar Variables (Figma) a Bricks
Podemos importar nuestras variables creadas en Figma a Bricks con la ayuda de un plugin.
- 1. Vamos a Figma >> Plugins & Widgets y buscamos, Export variables to CSS
- 2. Copiamos el código CSS que genera de nuetras Variables
- 3. En Bricks, en la página que estemos editando, clicamos en el menú Classes/Variables para poder importar el CSS, ver las siguientes imágenes.
- 4. Aquí es donde pegamos el CSS generado por el plugin en Figma
A partir de ahora podemos utilizar nuestras Variables de Figma en nuestra maquetación de Bricks, clicando sobre el icono de variables que aparece en la configuración de los elementos como tipografía, padding, colores,.... Como en este ejemplo donde aplicamos una variable de tamaño en el texto.
5.1. Crear Mi paleta cromática
Una vez hemos importado nuestras variables en el paso anterior, podemos crear nuestra paleta cromática de colores para nuestro diseño.
1. Crearemos nuestra paleta, iremos a la opción de ajustes, seleccionamos el apartado Colores.
2. Creamos nuestra paleta, apretamos al símbolo +
3. Introducimos el nombre y guardamos (botón crear).
4. Una vez tengamos creada nuestra paléta creada, añadiremos los colores de nuestras variables. Iremos a la opción SIN PROCESAR (RAW), y allí veremos que sale el icono de variables, para poder cargar nuestros colores importados anteriormente.
En este vídeo puedes ver todo el proceso:
6. Responsive
En Bricks podemos controlar los breakpoints, es decir como se comportan los elementos según el dispositivo del usuario.
En esta captura se muestran los diferentes breakpoints (mobile, tablet, desktop,...). Por ejemplo si tenemos seleccionada la opción mobile y modificamos el tamaño del texto, este cambio se verá aplicado SOLO a dispositivos móviles el resto de pantallas = breakpoints seguirán igual si no lo modificamos en su respectiva vista.
