En la segunda clase del curso veremos como diseñar con Atomic Blocks una página de sobre mí para el Child Theme Authority Pro.
Como sabes, Atomic Blocks ahora es pariente de StudioPress, la compañía detrás de Genesis. Así que están empezando a trabajar juntos.
Y aunque todavía es pronto, y hay mucho que mejorar, uno de sus objetivos es que los Child Themes creen sus homes a base de Bloques de Gutenbeg en vez de Widgets como hasta ahora.
Pues bien, ahí entra esta colección de bloques en juego.
Nos guste más o menos (a mí me está gustando), diseñar con Gutenberg va a ser un must si quieres aprovechar al máximo los diseños de los Child Themes. Así que… ¿por qué no empezar ya?
En esta clase te voy a mostrar un ejemplo de lo que podemos hacer creando una página de sobre mi para Authority Pro.
Mira el vídeo para ver el resultado final de lo que vamos a diseñar en esta clase.
Como comento en el vídeo, en esta clase voy a crear ese diseño paso a paso para que puedas replicarlo y aprender. Pero además te dejo el diseño listo para copiar y pegar en tu child theme.
Diseño de una página de sobre mí con Atomic Blocks
Nos ponemos manos a la obra. Recuerda que este diseño es para Authority Pro, pero puedes ver este vídeo para aprender a manejar Atomic Blocks igualmente.
¡Pues ya lo tenemos!
Código para copiar / pegar este diseño en tu web
A continuación te dejo el código y los pasos para incorporar este diseño a tu web.
Crea una página de WordPress
Crea una página de WordPress y ponla el nombre que quieras. A continuación guárdala, borra el título y vuelve a guardarla.
Así hemos generado el slug de esa página pero no mostrará título.
Copia el código a continuación y pégalo en tu página
Copia éste código y pégalo dentro de en un bloque de html en tu página de sobre mí. Una vez pegado, convierte el bloque de html a bloques.
Ya tenemos el diseño. Éste diseño te vale para cualquier tema de WordPress que tenga instalado Atomic Blocks.
Pero si lo quieres para Authority Pro, ahora vamos a incorporar los estilos.
Copia y pega los estilos
Copia éste código y pégalo al final de tu archivo style.css
Seguramente tendrás que hacer algunos ajustes en las media queries para optimizarlo en móviles y tabletas. Pero de primeras es responsive.
¡Ya lo tienes!
Hasta aquí la clase de hoy donde hemos visto como diseñar con Atomic Blocks una página de sobre mí para Authority Pro.
Es sólo un ejemplo, se trata de que aprendas cómo combinar todos estos bloques para crear tus propios diseños.
Si tienes cualquier duda contáctame en el formulario de soporte.
Y si no eres suscriptor te animo a que eches un ojo a mis cursos para WordPress.
A día de hoy hay un total de 104 clases publicadas con más de 208 vídeos .
Curso válido para las versiones: 1.5.5
Nº actualizaciones en clases: 0
Si una actualización afecta al curso se actualiza la información de la clase o re-graba el vídeo para mantenerlo al día.
Si una clase está actualizada verás los detalles de cada versión.