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.
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
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.
