Introducción a Bricks Builder
¿Qué es Bricks Builder?
Bricks Builder es un constructor visual para WordPress que permite diseñar y crear páginas web de manera intuitiva y sin necesidad de conocimientos profundos de programación. Ofrece una amplia variedad de herramientas y elementos para personalizar tu sitio web.
AVISO: Aunque este tutorial pertenece a versiones anteriores de Bricks, es perfectamente válido para que comprendas su funcionalidad a la hora de trabajar con los contenidos de la web. No obstante, al final de este tutorial puedes ver unos enlaces a la Academia de Bricks en la que podrás obtener información sobre las versiones más actuales del constructor Bricks.
Beneficios de usar Bricks Builder
- Interfaz amigable: Su editor visual es fácil de usar y entender.
- Velocidad y rendimiento: Optimizado para crear sitios web rápidos.
- Diseño responsivo: Facilita la adaptación del diseño a diferentes dispositivos.
- Flexibilidad: Gran cantidad de elementos y personalizaciones disponibles.
Interfaz de Bricks Builder
Vista general del panel de control
Una vez instalado, Bricks Builder agrega un nuevo menú en tu panel de WordPress. Como puedes ver en la imagen de abajo.
Desde aquí puedes acceder a todas las opciones y configuraciones del constructor.
Herramientas principales y su ubicación
- Barra lateral izquierda: Contiene los elementos y widgets disponibles. Flecha 1
- Área de trabajo central: Aquí se visualiza la página que estás editando. Flecha 2
- Barra superior: Opciones de vista previa, publicación, y otros ajustes generales. Flecha 3
- Barra lateral Derecha: Contiene la estructura del contenido que vamos creando. Flecha 4
- Barra lateral izquierda al pulsar sobre un elemento de estructura: Cuando haces clic en un elemento en el área de trabajo central, las propiedades y opciones de estilo de ese elemento se muestran también en esta barra. Puedes ajustar aspectos como colores, márgenes, tipografía, y más. Flecha 5
Creación de una Página Nueva
Acceso a Bricks Builder desde WordPress
- En el panel de WordPress, ve a «Páginas» y selecciona «Añadir nueva».
- Haz clic en el botón «Editar con Bricks».
Uso del Editor Visual
Añadir elementos básicos (texto, imágenes, botones)
- Arrastra un elemento desde la barra lateral izquierda hacia el área de trabajo.
- Suelta el elemento en el lugar deseado.
Configuración y personalización de elementos
- Selecciona el elemento que has añadido.
- Utiliza las opciones de la barra lateral para personalizar su apariencia (colores, tamaños, tipografía, etc.).
Vídeo de cómo utilizar el Editor Visual de Bricks Builder
En este vídeo de formación, se muestra cómo se editan y modifican los contenidos de tipo estándar creados en Bricks. Elementos como Títulos o Cabeceras, Texto Enriquecido, Acordeón, Tabs, Vídeos, Iconos de fuentes tipográficas, Iconos gráficos, Fotografías, Ajustes de columnas, Poner fotos de Fondo, con efecto Parallax, etc…
Indice de contenido del vídeo:
- 0:00 Introducción
- 1:04 Gestión de páginas de WordPress
- 4:43 Explicación del interface de Bricks
- 8:16 Gestionar un Slide
- 16:15 Titulares o Encabezados
- 19:38 Gestión de Iconos gráficos tipo PNG
- 22:05 Texto enriquecido
- 24:33 Poner Enlaces en texto enriquecido
- 27:09 Botones
- 32:42 Duplicar columnas
- 34:44 Iconos de librería tipográfica (Cambiar de icono, tamaño y color)
- 37:45 Cambiar color de fondo en columna
- 38:36 Cambiar color a Icono tipográfico, titular y texto enriquecido
- 39:42 Separar columnas
- 41:07 Gestión de fotos puestas en los contenidos
- 45:00 Fotos de fondo y efecto Parallax
- 50:56 Intercambio de columnas (Izquierda a derecha o viceversa)
- 52:50 Gestión de vídeos
- 55:33 Slides de menor tamaño
- 56:12 Gestionar elementos Acordeón y Tab
- 01:00:35 Galerías de Fotos
- 01:06:26 Despedida
Diseño Responsivo
Cómo ajustar el diseño para diferentes dispositivos
- En la barra superior, selecciona el icono de dispositivos (escritorio, tablet, móvil). Flecha 1 y ajusta el diseño y los estilos para cada dispositivo según sea necesario.
- Puedes añadir otros tamaños de dispositivos. Pulsa en el icono de los 3 puntos verticales. Flecha 2
Vista previa en varios tamaños de pantalla
- Utiliza la opción de vista previa para ver cómo se verá tu página en diferentes dispositivos. Flecha 3
- Realiza los ajustes necesarios para asegurar una experiencia de usuario óptima.
Optimización de SEO y Rendimiento
Mejores prácticas para SEO
- Utiliza títulos y descripciones adecuadas. Utiliza solo un titular H1 en cada página. Luego puedes usar todos los H2 y H3 que quieras, pero en orden, es decir; Debajo de un H2 puedes poner un H3 y un H4, pero no recomiendo poner un H4 y luego un H3. Mantén siempre una estructura lógica.
- Añade etiquetas ALT a todas las imágenes.
- Los titulares H1 y H2 son clave principal para indicarle a Google de qué trata el contenido que estás mostrando en la página. Asegúrate de que el contenido que escribas sea relevante y de calidad.
Optimización de la velocidad de carga
- Comprime imágenes y archivos multimedia. Utiliza siempre los tamaños que te recomendamos en la Ayuda de la Web. Los formatos que sean en JPG o WebP. Si quieres poner una imagen con fondo transparente, utiliza el formato PNG para imágenes pequeñas y WebP transparente para imágenes más grandes.
- Evita subir vídeos al servidor, te recomiendo abrirte un canal de Youtube y posteriormente enlazarlos a la página.
¿Necesitas un editor gratuito y profesional para editar tus fotos?
Te recomiendo utilizar Photopea lee este artículo que te explico de qué se trata.
Publicación y Mantenimiento
Publicar tu página
- Cuando estés satisfecho con el diseño, haz clic en «Publicar» en la barra superior.
- Revisa la página publicada para asegurarte de que todo esté correcto.
Actualización y mantenimiento del contenido
- Todas las páginas que están diseñadas con el editor visual Bricks ponen una marca a la derecha del título, para indicar que tienes que editar su contenido con este editor. Flecha 1
- Accede a la página que deseas editar desde el panel de WordPress. Pulsa directamente sobre el enlace que dice Editar con Bricks, Flecha 2 y te abrirá el editor Bricks para que puedas editar de nuevo el contenido de la página.
En Resumen
Recapitulación de lo aprendido
Has aprendido a utilizar Bricks Builder para crear y personalizar páginas en WordPress, optimizando el diseño para diferentes dispositivos y mejorando el SEO y rendimiento de tu sitio web.
Academia Bricks
Tour para manejar el Interface de Bricks en versiones más recientes:
Cuando entres en estas páginas de abajo, recuerda poner el idioma de tu navegador en Español.
Para que los vídeos los puedas escuchar en Español, tiene que pulsar el icono del vídeo que representa una Rueda Dentada. Una vez pulsada se abrirá una ventana donde tienes que pulsar la opción «Pista de Audio» y luego selecciona «Español» a partir de ahí ya escucharas todos los vídeos en Español sin que tengas que configurarlo de nuevo.
Entrar en Academia Bricks y ver el tutorial sobre el nuevo interface
