Como crear tu Página de Inicio en WordPress con Gutenberg • Silo Creativo

Como crear tu Pagina de Inicio en WordPress con Gutenberg

La llegada de WordPress cincuenta se aproxima poco a poco más. Y entre las muchas peculiaridades nuevas que incluirá esta nueva iteración de Content Management System Automattic se halla Gutenberg. y es que Este nuevo editor está encontrando prácticamente tantos seguidores como opositores en la comunidad.. Si es un seguidor de SiloMag, probablemente ha visto ciertos de los artículos que compartimos sobre estas discusiones.

Desde Silo Creativo, charlamos ya antes de Gutenberg, tanto para enseñar ciertas de sus peculiaridades, para crear una nueva entrada. Si jamás ha trabajado con Gutenberg, le aconsejo que lea velozmente estos artículos, en tanto que en este vamos a tomar los conceptos familiares que hemos visto en estos textos. Pero el día de hoy deseamos dar un paso adelante y ver de qué forma podemos edificar una página de comienzo en WordPress. Sí, merced al empleo de bloques, podemos emplear Gutenberg tal y como si fuera cualquiera de los Page Builders existentes. Por no decir, de forma directa, que Gutenberg es el Page Builder del futuro WordPress.

En primer sitio, afirmemos que Gutenberg aún está en desarrollo, con lo que aún carece de mucha funcionalidad y no es totalmente estable. Por eso Seguimos recomendando que no lo utilice en producción y solo en ambientes de prueba.. Con este artículo deseamos continuar explorando las posibilidades que nos ofrece Gutenberg, y que estamos absolutamente listos para su lanzamiento oficial.

El futuro de los autores de páginas con Gutenberg

Como hemos visto en otros artículos, Gutenberg no es más que la evolución del editor de WordPress a un sistema basado en bloques. ¿Y a qué nos recuerda esto inevitablemente? Bueno, para cualquiera de los diferentes autores de páginas libres para WordPress. En los últimos años, estos complementos han tenido enorme desarrollo, eminentemente debido a la sencillez de usoo, y que se pueden edificar prácticamente sin conocimientos anteriores, diseños muy atractivos.

Entonces, ¿qué ocurre con estos complementos, la enorme mayoría de los que se pagan, ya antes de que llegue Gutenberg? Bueno, de instante, y suponemos que con la llegada de WordPress cincuenta, la placa proseguirá siendo aproximadamente exactamente la misma. Gutenberg aún tiene pocas opciones, o bien están demasiado simplificadas y no muestra su potencial con la enorme mayoría de los modelos actuales (Hablaremos de modelos y Gutenberg en el próximo punto). También recuerda que tiene una interfaz diferente al resto de Page Builders. Muchos usuarios se van a mostrar reluctantes a efectuar una transición inmediata.

Así que predecible que vamos a ser en un instante en el que las dos opciones coexistan, al paso que los desarrolladores crean diferentes tipos de bloques para Gutenberg. Hasta que llegue el instante en que Gutenberg gane suficiente peso para ser una opción alternativa real. Pero como afirmamos, a día de el día de hoy prosigue siendo una alternativa con menos opciones, mas sin coste, para los Page Builders de WordPress más conocidos y reconocidos.

Plantillas de Gutenberg y WordPress

Aquí está una de las debilidades que tiene Gutenberg en nuestros días. Y si no empleamos una plantilla o bien un tema actualizado para aprovechar Gutenberg, perdemos muchas de sus funciones. Para enseñar este punto, veamos la próxima imagen:

Alineación de imágenes de Gutenberg

A la izquierda está instalada la famosa plantilla Twenty Seventeen, que viene por defecto en WordPress. Y a la derecha, se activa la plantilla Gutenberg Starter Theme, libre en GitHub, que fue creada por Automattic para enseñar las posibilidades de Gutenberg.

No es extraño ver el análisis de Gutenberg con temas que no están preparados, con lo que en realidad están utilizando una versión limitada de este nuevo editor. Por este motivo, si deseas probar con Gutenberg, Le aconsejo que instale la plantilla Gutenberg Starter Theme, para exprimir todo cuanto tiene para ofrecer.

Índice

    Creando nuestra página de comienzo

    Vayamos a lo que importa. Nuestra página de inicio va a tener múltiples secciones, en las que veamos ciertos de los bloques más útiles que nos ofrece. Una vez más, deseamos recordarte que empleamos un tema compatible con Gutenberg, a fin de que tengas exactamente las mismas opciones libres que usaremos en esta pequeña guía. Para las imágenes, empleamos el repositorio de fotografías libre en Unplash.

    Para ponérnoslo más simple, y asimismo a fin de que todo tenga un orden determinado, Desarrollemos el tutorial de pacto con el bloque que estamos introduciendo.. Así que asimismo hemos discutido ciertas de las peculiaridades más relevantes, o bien aquellas que usaremos en nuestra página de comienzo.

    Te puede Interesar  Cómo eliminar la fecha de publicación en WordPress

    Imagen de fondo

    Lo primero que deseamos hacer es imagen que ocupa todo el ancho del navegadory tiene una superposición de texto. Ya charlamos de esta clase de composición con imágenes y texto en nuestro weblog hace algunos días. El bloque a seleccionar va a ser Imagen de fondo. Y, como hemos visto ya antes, merced al hecho de que hemos activado la plantilla Gutenberg Starter Theme, podemos alinear la imagen en todo el ancho.

    Una opción curiosa que nos ofrece el panel lateral de opciones de bloqueo es la posibilidad de obscurecer la imagen. Con esto, el texto va a quedar más contrastado, sin necesidad de recurrir a una edición extra de fondo.

    Párrafo

    Quizás sea el bloque de Gutenberg por antonomasia, mas de ahí que no íbamos a dejar de emplearlo. Hace unas semanas, en nuestro texto sobre el empleo de consultas de recursos, charlamos sobre de qué forma la propiedad CSS de poner en mayúscula la primera letra de un texto no estaba libre en todos y cada uno de los navegadores. Pues mira que opción nos da Gutenberg:

    Bloque de párrafo de Gutenberg con letra mayúscula

    Exactamente, podemos introducir esta alternativa en nuestro texto de forma fácil. Y no queda nada malo, como puede ver.

    columnas de texto

    En el editor de WordPress actual, la creación de columnas de texto siempre y en todo momento ha sido compleja. Y eso con Gutenberg se terminó. Tan fácil como introducir el bloque, seleccionar el número de columnas y comenzar a redactar. Además, podemos designar el tipo de alineación que tiene el texto en cada columna.

    Video incrustado

    Sigue siendo tan simple como se hace el día de hoy. Pero la diferencia radica en que, como en otros bloques, podemos seleccionar diferentes alineacioneso enseñar el vídeo en pantalla completa.

    Estos elementos incorporados no solo se reduce a los habituales sitios de vídeos o bien Twitter. Podemos introducir fotografías de Instagram, canciones de Spotify, temas de Reedit. Te animo a que mires la lista en tanto que es bastante extensa. Y seguro que tienes ciertas sorpresas.

    Galería

    Normalmente, al crear una galería de imágenes, utilizo complementos como Jetpack, sobre el que hemos escrito. Con Gutenberg, es tan simple como añadir el bloque Galeríay empiece a elegir imágenes. no sin olvidar asignar el número de columnas que va a tener nuestra galería.

    Bloque de la galería de Gutenberg
    Bloque de galería dentro de Gutenberg

    En nuestro ejemplo, tenemos 6 fotografías en total para una galería de 4 columnas. La solución de Gutenberg es hacer las fotografías en la última línea ocupan todo el ancho de la galería. Y como una imagen vale más que mil palabras, eso es lo que conseguimos.

    Galería de resultados de Gutenberg
    Vista final de la galería creada con Gutenberg

    1639033319 953 Como crear tu Pagina de Inicio en WordPress con Gutenberg

    Código

    Este bloque es realmente útil, por el hecho de que si deseamos inserte un fragmento de código, respete las pestañitas y los espacios, apareciendo apropiadamente. Y si lo combinamos con una clase CSS auxiliar, podemos suministrar el color de nuestro código. Si no está muy habituado a este lenguaje, le aconsejo que eche una ojeada a nuestro artículo propedéutico sobre CSS que hemos puesto a predisposición en el weblog de Silo Creativo.

    Columnas (beta)

    Un bloque que todavía está en beta, mas que es bien interesante. Como las columnas de texto que vimos previamente, podemos seleccionar el número de columnas que va a tener nuestro bloque. La diferencia es que aqui podemos añadir bloques dentro de cada columna. Entonces las posibilidades se multiplican.

    Perfiles de columnas beta de Gutenberg

    En nuestro ejemplo, deseábamos ver los perfiles, con una imagen, texto y un botón. tan simple como agregue cada bloque dentro de cada columnay desplácese cara arriba o bien cara abajo conforme donde deseemos que esté. Extremadamente simple. La desventaja: no es un factor adaptable, con lo que siempre y en todo momento vamos a tener exactamente el mismo número de columnas por fila, con independencia del dispositivo donde visualicemos la página.

    Conclusiones.

    Como hemos visto a lo largo del artículo, Gutenberg es un golpe en la mesa para crear, en este caso, páginas de WordPress. Pero muestra en determinados aspectos que aún está en desarrollo debido a determinadas peculiaridades restantes.

    Aún de esta forma, esa no es razón para probemos esta herramienta y creemos nuestros diseños. Cuanto ya antes estemos listos para lo que va a venir en WordPress, mejor va a ser nuestra transición y ya antes vamos a poder añadir estas nuevas funciones a nuestros sitios o bien los sitios de nuestros clientes del servicio.

    ¿Ya has creado una página con Gutenberg? ¡Puedes compartirlos en los comentarios a fin de que puedas verlos y compartir tus experiencias!

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información