Curso de patrones de bloques (II) – Ejemplo de uso: confección de un sitio web de una sola página

Imagínate que eres un usuario final y quieres crear tu sitio web de una sola página, a modo de landing page para tu negocio.

En Blogpocket Sustie se ofrecen 13 patrones de bloques para que no partas de cero y solo tendrás que cambiar las imágenes y los textos.

Todo se reduce a instalar WordPress y el theme Blogpocket Sustie.

patrones-4-1024x542 Curso de patrones de bloques (II) - Ejemplo de uso: confección de un sitio web de una sola página
Figura 1

Crea una página que se denomine «Home» y asígnala en la opción «Apariencia > Personalizar > Ajustes de la página de inicio» como Página de inicio (ver figura 1).

Después entra a editar la página «Home» e inserta uno de los patrones de bloques de la categoría «Blogpocket Nineteen». Por ejemplo, el que de ve también en la figura 1.

Para cambiar las imágenes haz clic en los bloques correspondientes y reemplázalas por las tuyas.

patrones-5-1024x520 Curso de patrones de bloques (II) - Ejemplo de uso: confección de un sitio web de una sola página
Figura 2

Recuerda que la configuración de cada bloque (de cualquier tipo) posee dos apartados donde se puede realizar: en la parte superior con una botonadura especial y a la derecha, en la columna lateral que aparece cuando se hace clic en la rueda dentada. Por ejemplo, en la figura 2, el bloque nativo de «Medios y texto» permite ajustar automáticamente la imagen grande a todo el alto del bloque.

Acude a la vista previa para ver cómo se verá finalmente en el navegador.

patrones-6-1024x521 Curso de patrones de bloques (II) - Ejemplo de uso: confección de un sitio web de una sola página
Figura 3

Ajusta los patrones de bloques con esas configuraciones permitidas o, si eres más experto, usa el modo «Editor de código» para aplicar estilo a tu gusto (ver figura 3).

Si no sabes CSS y aún así quieres aplicar estilo, para salirte de lo que te permiten las configuraciones permitidas, instala el plugin Editor Plus.

patrones-8-1024x543 Curso de patrones de bloques (II) - Ejemplo de uso: confección de un sitio web de una sola página
Figura 4

Una vez instalado, utiliza los apartados que aparecen en la columna lateral de la rueda dentada, al hacer clic en cada bloque (ver Figura 4).

patrones-7-1024x514 Curso de patrones de bloques (II) - Ejemplo de uso: confección de un sitio web de una sola página
Figura 5

Para obtener una landing page sin cabecera ni footer, instala el plugin FW Page Templates y en atributo de página elige la opción «FW Fullwidth no Header Footer» (ver figura 5)

Comprueba la vista previa de tu página Home y si está lista, publícala. Has creado, sin codificar, y pocos minutos un sitio web de una sola página. Pero el proceso te servirá para crear también cualquier tipo de web.

Si quieres probar a configurar o, incluso, crear tus propios patrones de bloques, hemos creado un blueprint de Local by Flywheel. Descárgalo y crea un nuevo sitio de WordPress utilizando la herramienta Local usando este blueprint. Con un clic tendrás:

  • Theme Blogpocket Sustie activado
  • Plugins instalados y activos: Editor Plus, Fullwidth Page Templates, Reusable Blocks Extended y Genesis Blocks.
  • Página Home creada y configurada como página de inicio.
  • 13 patrones de bloques listos para usar.

[/mepr-show]

Índice del curso

  1. ¿Qué es un patrón de bloques y para qué sirve?
  2. Ejemplo de uso de patrones de bloques: confección de un sitio web de una sola página
  3. Importar y exportar diseños realizados en el editor de bloques
  4. Código para registrar un patrón de bloques
  5. Creación de un patrón de bloques a partir de bloques nativos, sin código CSS
  6. Crear un patrón de bloques con código CSS
Ir al contenido