ElegantThemes

Cómo crear libros y tarjetas de revisión con bloques de WordPress

En los meses previos a su debut en 2018, aprendí mucho sobre el sistema blockchain.Esto también coincidió con el primer noviembre que terminé. Mes Nacional de la Escritura de Novelas, un reto de 30 días para escribir un primer borrador de una novela de 50.000 palabras. Después de eso, gané por segunda vez en 2021.

Como aspirante a novelista soñadora, una de las cosas que más me emociona sobre el sistema blockchain es cómo los escritores usan WordPress para mostrar sus libros. Por supuesto, no tuve más remedio que crear una agrupación de bloques personalizada para mostrar el manuscrito que de alguna manera logré elaborar en un mes.

Diseño de página de inicio con temática de novelista.

Esta es la era pre-modo de WordPress. La interfaz es torpe. Las cosas parecen romperse al azar. Las herramientas de diseño son casi inexistentes, pero hay un poco de magia en el aire. Nunca en la historia de la plataforma los usuarios habían creado un diseño tan simple de manera intuitiva utilizando WordPress estándar. A pesar de todos los errores durante la ejecución de la versión beta, este fue el momento en que me convertí en fanático del bloque.

No fue hasta unos meses después que publiqué el tema del novelista, era un subproyecto de otro proyecto que aún no había comenzado.

Para este artículo de la serie «Construcción con bloques de construcción», quiero guiar a los lectores a través de la creación de patrones que me inspiraron a seguir diseñando y desarrollando con el sistema de bloques de construcción. Como beneficio adicional, también mostraré cómo crear un modo de revisión de libros.

estoy usando temas arqueológicos Contribuido por Automattic en este tutorial. Sin embargo, debería funcionar con cualquier tema que admita bloques. También obtendrá más millas de temas de bloque.

tarjeta de libro

Esta tarjeta pretende ser un punto de partida para los autores que quieran exhibir uno de sus libros, pero se puede aplicar a cualquier producto. Hay 1000 formas de cambiarlo y animo a todos a personalizarlo después de completar estos pasos. El resultado final debe parecerse al siguiente:

Diseño de tarjeta de libro, con la imagen de portada del libro a la izquierda y el botón de introducción + compra a la derecha.
Diseño final de la tarjeta del libro.

El código HTML del bloque final es Disponible a través de GistPuedes copiarlo y pegarlo en el editor, pero te animo a que intentes construir tu primera ronda desde cero. Esta serie se trata de aprender a construir con bloques. El código listo para copiar está ahí, en caso de que te quedes atascado.

Paso 1: Grupo de contenedores (opcional)

Editor de publicaciones de WordPress con un bloque relleno y un fondo azul oscuro.
Bloques de grupo con relleno y color.

Casi como regla, empiezo con un bloque de grupo cuando construyo partes de un patrón o bloque. Esta vez elegí agregarlo porque quería un fondo oscuro y algo de relleno alrededor del contenido de la tarjeta. Puede darse de baja si lo desea.

Una vez que el bloque esté en su lugar, agregue un color de texto, un color de fondo y rellene el bloque.elegí 2rem Para el relleno, ya que los valores predeterminados de mi tema activo son inconsistentes en todos los aspectos.

Paso 2: Agregar medios

Editor de publicaciones de WordPress con medios y bloques de texto. Muestra la imagen de la portada del libro a la izquierda.
Bloques multimedia y de texto dentro de grupos.

Uno de mis bloques favoritos en WordPress es el de medios y texto. Tiene muchos casos de uso y es como un minimodo en sí mismo. Por un lado, renuncias a tus medios. Por otro lado, puedes añadir lo que quieras.

En el bloque del paso 1, inserte los medios y el texto. Continúe y tome una imagen de su elección.Esta Directorio de fotos de WordPress Si no tienes uno a mano, hay muchos.

El único cambio que hice en este bloque fue establecer la opción «ancho de medios» en 35 en la barra lateral de opciones de bloque. Dependiendo del tamaño de la imagen, puede elegir otras opciones. Asegúrese de dejar espacio para su contenido.

Paso 3: Agrupación (Opcional)

Medios de WordPress y bloques de texto en el editor de publicaciones. Dentro de la sección de texto/contenido hay otro grupo.
Agregue trozos internos.

Dentro de los bloques multimedia y de texto, agregué otro grupo. Admite espaciado constante, que WordPress, por alguna razón, no aplica al área de «contenido» de los bloques de texto y medios. Este es un paso opcional, pero proporciona más control sobre el diseño.

Si no está satisfecho con el espaciado de su tema, puede cambiar la opción Espaciado de bloque en la barra lateral Opciones de bloque.Ajusté esto a 2rempero esto dependerá del tema activo.

Por cierto, estos son detalles que rara vez veo en otros tutoriales: «errores» y otros problemas que podría encontrar. Las encuentro inclusiones útiles, pero tal vez un poco aburridas. No dude en dejarme saber en los comentarios si desea que continúe con este nivel de detalle.

Paso 4: Contenido de la tarjeta

Bloques de medios y texto en el editor de publicaciones de WordPress. Dentro de la sección de contenido hay un encabezado, varios párrafos y un botón.
Agregue encabezados, párrafos y bloques de botones.

El paso final para crear una tarjeta de libro debería ser relativamente simple. Incluí un encabezado, dos párrafos y un bloque de botones. Fomento la experimentación.

No hice ningún cambio en los bloques de encabezado y párrafo. Sin embargo, elegí el estilo «Contorno» para los botones individuales.

¡Y eso es! La inclusión de medios integrados y bloques de texto hace que sea más fácil que construir con otros. Si prefiere leer libros a escribir y vender libros, siga leyendo.

Reseña de libro Tarjeta introductoria

Este tutorial lo guiará a través de la creación de una tarjeta de reseña de libro (o de introducción de reseña).Al igual que antes, puede obtener la totalidad Bloquear HTML de GistEl resultado debe ser similar al siguiente:

Una sección de reseñas de libros, que incluye una imagen de portada a la izquierda y detalles del libro, incluidas citas, a la derecha.
La última tarjeta de revisión del libro presenta el diseño.

Después de todo el alboroto sobre los tutoriales de tarjetas de recetas anteriores, permítanme hacer una nota rápida antes de esta sección. Esta serie de tutoriales se trata de aprender a construir con bloques, no de crear soluciones desarrolladas para cada escenario posible.

Para aquellos que quieren más, hay soluciones existentes.Donna Peplinski bloque de reseñas de libros es una buena elección. Tiene integración ISBN, modo de comentarios y muchas otras campanas y silbatos. Incluso escribí sobre eso en 2020.

esto es para a veces Críticos de libros, personas que no han creado un sitio de reseñas o simplemente quieren recibir una sugerencia.

Pasos 1-3: enjuague y repita

Trozos en el editor de publicaciones de WordPress. Los bloques multimedia y de texto se encuentran dentro de ellos con sus propios bloques de grupo anidados.
Agregue grupos, medios y texto, y otro bloque de grupo.

Los pasos son en realidad los mismos que para la tarjeta de libro anterior: agregue un bloque de grupo, agregue medios y texto, y anide otro grupo dentro del área de contenido.El único cambio que hice fue expandir la sección de medios para 40 (está 35 hacia adelante).

Siéntase libre de mezclar y probar cosas nuevas. Si no desea rellenar el fondo, omita la parte inicial.

Paso 4: Contenido de la tarjeta

Editor de publicaciones de WordPress con medios y bloques de texto. Los encabezados, listas y referencias están anidados dentro de su área de contenido.
Agregue encabezados, listas y bloques de citas.

Al igual que las tarjetas de libros anteriores, agregue un bloque de título al título del libro. Esto está dentro de un grupo anidado dentro de los bloques de medios y texto.

La siguiente parte del contenido es donde las cosas cambian. Para el libro «Información», debe insertar un bloque de lista. Luego, complete los detalles que considere relevantes, de la siguiente manera:

  • ✍ Escrito por Justin Tadlock
  • 🔖 Marcar Ficción para adultos
  • 📚 Publicado por la prensa de la palabra
  • 📅 Publicado el 1 de mayo de 2099
  • 📃 599 páginas
  • ⭐⭐⭐⭐⭐ / 5 estrellas

Quería darle vida a las cosas con algunos emojis. Si eso no es lo tuyo, no es necesario que los incluyas.

En un proyecto del mundo real, también agregaría un estilo «sin marcador» al bloque de lista, lo que permitiría que emoji actúe como falso esencia. Sin embargo, el tema que estoy probando no tiene este estilo.

Esto nos lleva a la última parte. Me gusta comenzar la reseña de un libro citando una cita favorita. Me puso de humor para escribir el libro y me permitió compartir algo sobre el autor. Por lo tanto, elegí colocar un bloque de comillas como último bloque.

Otro enfoque podría ser un resumen rápido. Incluso puedes ir directamente al comentario desde allí o dejar el espacio vacío. Esta es tu tarjeta, puedes hacer lo que quieras con ella.

Publicaciones relacionadas

Deja una respuesta

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