Arriba

Rafa Arjonilla

Cursos

#2 Diseñar con Atomic Blocks una página de sobre mí

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.

1

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.

2

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.

<!-- wp:atomic-blocks/ab-container {"containerMarginTop":-5,"containerWidth":"full","containerMaxWidth":1200} -->
<div style="margin-top:-5%" class="wp-block-atomic-blocks-ab-container ab-block-container alignfull"><div class="ab-container-inside"><div class="ab-container-content" style="max-width:1200px"><!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":1610,"align":"center","width":400,"className":"hero-web base"} -->
<div class="wp-block-image hero-web base"><figure class="aligncenter is-resized"><img src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/home-hero-683x1024.jpg" alt="" class="wp-image-1610" width="400"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:atomic-blocks/ab-spacer {"spacerHeight":105} -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:105px"/></div>
<!-- /wp:atomic-blocks/ab-spacer -->

<!-- wp:heading {"level":1} -->
<h1>Patricia Swachts<br></h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"larger"} -->
<p class="has-larger-font-size">Especialista en Facebook Ads y Google Ads</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Escribe aquí una descripción con gancho en la que incluyas cómo puedes ayudar a tu cliente y un par de enlaces como <a href="https://authoritypro.wpclon.com/sobre-mi/#">éste</a> o <a href="https://authoritypro.wpclon.com/sobre-mi/#">éste</a> para tener llamadas a la acción que no sean demasiado agresivas pero que estén ahí.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">¡Espero que disfrutes de mi página!</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<a href="#" class="button primary"> Ver mis servicios</a>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p><br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:atomic-blocks/ab-spacer {"spacerHeight":105} -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:105px"/></div>
<!-- /wp:atomic-blocks/ab-spacer -->

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Encabezado para empezar a contar mi historia</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat odio dolor, eget dignissim velit sollicitudin quis. Sed laoreet cursus velit, a placerat orci tempus sit amet.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Curabitur tempus eros sodales, fringilla orci vel, posuere tellus. Nam orci libero, hendrerit non dictum vitae, blandit ut libero. Donec iaculis, urna ut rhoncus blandit, tortor tortor tincidunt purus, et ornare quam urna sed ipsum. Pellentesque nibh arcu, sodales et convallis in, porttitor ut elit. Suspendisse placerat augue id sem consequat, at dignissim sapien viverra.<br>Aliquam placerat dolor nec lacus porta mollis. Suspendisse dapibus imperdiet molestie. In est ligula, iaculis vitae nisi id, interdum vulputate ex. Donec dolor elit, malesuada eget est nec, euismod consectetur mi. Quisque eu nulla eros. Nullam et imperdiet leo. Donec nec turpis sodales, tincidunt neque sed, dictum augue. Maecenas venenatis tristique metus.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:atomic-blocks/ab-spacer {"spacerHeight":120} -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:120px"/></div>
<!-- /wp:atomic-blocks/ab-spacer -->

<!-- wp:gallery {"ids":[1443,1605,1606,1607],"columns":2} -->
<ul class="wp-block-gallery columns-2 is-cropped"><li class="blocks-gallery-item"><figure><img src="https://authoritypro.wpclon.com/wp-content/uploads/2013/09/computer-1024x755.jpg" alt="" data-id="1443" data-link="https://authoritypro.wpclon.com/image-aligned-left/computer/" class="wp-image-1443"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/marketing-3468598_640.jpg" alt="" data-id="1605" data-link="https://authoritypro.wpclon.com/sobre-mi/marketing-3468598_640/" class="wp-image-1605"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/influencer-4081842_640.jpg" alt="" data-id="1606" data-link="https://authoritypro.wpclon.com/sobre-mi/influencer-4081842_640/" class="wp-image-1606"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/online-marketing-1427786_640.jpg" alt="" data-id="1607" data-link="https://authoritypro.wpclon.com/sobre-mi/online-marketing-1427786_640/" class="wp-image-1607"/></figure></li></ul>
<!-- /wp:gallery -->

<!-- wp:atomic-blocks/ab-spacer -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:30px"/></div>
<!-- /wp:atomic-blocks/ab-spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:atomic-blocks/ab-spacer {"spacerHeight":100} -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:100px"/></div>
<!-- /wp:atomic-blocks/ab-spacer -->

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":1606,"className":"hero-web"} -->
<figure class="wp-block-image hero-web"><img src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/influencer-4081842_640.jpg" alt="" class="wp-image-1606"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Mi método</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Descubre mi método de 3 pasos para conseguir buen retorno de tu inversión en publicidad.</p>
<!-- /wp:paragraph -->

<!-- wp:atomic-blocks/ab-accordion -->
<div class="wp-block-atomic-blocks-ab-accordion ab-block-accordion ab-font-size-18"><details><summary class="ab-accordion-title">Paso 1</summary><div class="ab-accordion-text"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat odio dolor, eget dignissim velit sollicitudin quis. Sed laoreet cursus velit, a placerat orci tempus sit amet. Ut cursus scelerisque leo, a commodo metus venenatis in. Curabitur cursus vehicula sapien, vel rutrum tellus. Fusce pretium nisi a elit ultrices molestie. Duis leo massa, pretium eu nibh nec, finibus venenatis mi. Mauris ut risus vel orci viverra porttitor. Sed mollis ante sit amet suscipit porta. Suspendisse potenti. Mauris ut diam non lorem interdum laoreet. Cras fringilla odio arcu, quis malesuada nisl pellentesque ac. Curabitur tempus eros sodales, fringilla orci vel, posuere tellus. Nam orci libero, hendrerit non dictum vitae, blandit ut libero. Donec iaculis, urna ut rhoncus blandit, tortor tortor tincidunt purus, et ornare quam urna sed ipsum. Pellentesque nibh arcu, sodales et convallis in, porttitor ut elit. Suspendisse placerat augue id sem consequat, at dignissim sapien viverra.<br>
Aliquam placerat dolor nec lacus porta mollis. Suspendisse dapibus imperdiet molestie. In est ligula, iaculis vitae nisi id, interdum vulputate ex. Donec dolor elit, malesuada eget est nec, euismod consectetur mi. Quisque eu nulla eros. Nullam et imperdiet leo. Donec nec turpis sodales, tincidunt neque sed, dictum augue. Maecenas venenatis tristique metus.</p>
<!-- /wp:paragraph --></div></details></div>
<!-- /wp:atomic-blocks/ab-accordion -->

<!-- wp:atomic-blocks/ab-accordion -->
<div class="wp-block-atomic-blocks-ab-accordion ab-block-accordion ab-font-size-18"><details><summary class="ab-accordion-title">Paso 2</summary><div class="ab-accordion-text"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat odio dolor, eget dignissim velit sollicitudin quis. Sed laoreet cursus velit, a placerat orci tempus sit amet. Ut cursus scelerisque leo, a commodo metus venenatis in. Curabitur cursus vehicula sapien, vel rutrum tellus. Fusce pretium nisi a elit ultrices molestie. Duis leo massa, pretium eu nibh nec, finibus venenatis mi. Mauris ut risus vel orci viverra porttitor. Sed mollis ante sit amet suscipit porta. Suspendisse potenti. Mauris ut diam non lorem interdum laoreet. Cras fringilla odio arcu, quis malesuada nisl pellentesque ac. Curabitur tempus eros sodales, fringilla orci vel, posuere tellus. Nam orci libero, hendrerit non dictum vitae, blandit ut libero. Donec iaculis, urna ut rhoncus blandit, tortor tortor tincidunt purus, et ornare quam urna sed ipsum. Pellentesque nibh arcu, sodales et convallis in, porttitor ut elit. Suspendisse placerat augue id sem consequat, at dignissim sapien viverra.<br>
Aliquam placerat dolor nec lacus porta mollis. Suspendisse dapibus imperdiet molestie. In est ligula, iaculis vitae nisi id, interdum vulputate ex. Donec dolor elit, malesuada eget est nec, euismod consectetur mi. Quisque eu nulla eros. Nullam et imperdiet leo. Donec nec turpis sodales, tincidunt neque sed, dictum augue. Maecenas venenatis tristique metus.</p>
<!-- /wp:paragraph --></div></details></div>
<!-- /wp:atomic-blocks/ab-accordion -->

<!-- wp:atomic-blocks/ab-accordion -->
<div class="wp-block-atomic-blocks-ab-accordion ab-block-accordion ab-font-size-18"><details><summary class="ab-accordion-title">Paso 3</summary><div class="ab-accordion-text"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat odio dolor, eget dignissim velit sollicitudin quis. Sed laoreet cursus velit, a placerat orci tempus sit amet. Ut cursus scelerisque leo, a commodo metus venenatis in. Curabitur cursus vehicula sapien, vel rutrum tellus. Fusce pretium nisi a elit ultrices molestie. Duis leo massa, pretium eu nibh nec, finibus venenatis mi. Mauris ut risus vel orci viverra porttitor. Sed mollis ante sit amet suscipit porta. Suspendisse potenti. Mauris ut diam non lorem interdum laoreet. Cras fringilla odio arcu, quis malesuada nisl pellentesque ac. Curabitur tempus eros sodales, fringilla orci vel, posuere tellus. Nam orci libero, hendrerit non dictum vitae, blandit ut libero. Donec iaculis, urna ut rhoncus blandit, tortor tortor tincidunt purus, et ornare quam urna sed ipsum. Pellentesque nibh arcu, sodales et convallis in, porttitor ut elit. Suspendisse placerat augue id sem consequat, at dignissim sapien viverra.<br>
Aliquam placerat dolor nec lacus porta mollis. Suspendisse dapibus imperdiet molestie. In est ligula, iaculis vitae nisi id, interdum vulputate ex. Donec dolor elit, malesuada eget est nec, euismod consectetur mi. Quisque eu nulla eros. Nullam et imperdiet leo. Donec nec turpis sodales, tincidunt neque sed, dictum augue. Maecenas venenatis tristique metus.</p>
<!-- /wp:paragraph --></div></details></div>
<!-- /wp:atomic-blocks/ab-accordion --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:atomic-blocks/ab-spacer {"spacerHeight":50} -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:50px"/></div>
<!-- /wp:atomic-blocks/ab-spacer -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat odio dolor, eget dignissim velit sollicitudin quis. Maecenas venenatis tristique metus.<br></p><cite>NUESTROS CLIENTES OPINAN<br><br></cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:atomic-blocks/ab-spacer {"spacerHeight":50} -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:50px"/></div>
<!-- /wp:atomic-blocks/ab-spacer -->

<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:atomic-blocks/ab-testimonial {"testimonialImgID":1605,"testimonialFontSize":15,"className":"testimonio"} -->
<div style="background-color:#f2f2f2;color:#32373c" class="wp-block-atomic-blocks-ab-testimonial testimonio left-aligned ab-has-avatar ab-font-size-15 ab-block-testimonial"><div class="ab-testimonial-text"><p>Patricia es una gran profesional que proyecta un plan de acción y cumple con objetivos y plazos eficazmente.</p></div><div class="ab-testimonial-info"><div class="ab-testimonial-avatar-wrap"><div class="ab-testimonial-image-wrap"><img class="ab-testimonial-avatar" src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/marketing-3468598_640.jpg" alt="avatar"/></div></div><h2 class="ab-testimonial-name" style="color:#32373c">Pedro Melgar<br/></h2><small class="ab-testimonial-title" style="color:#32373c">CEO paraguas.com<br/></small></div></div>
<!-- /wp:atomic-blocks/ab-testimonial --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:atomic-blocks/ab-testimonial {"testimonialImgID":1605,"testimonialFontSize":15,"className":"testimonio"} -->
<div style="background-color:#f2f2f2;color:#32373c" class="wp-block-atomic-blocks-ab-testimonial testimonio left-aligned ab-has-avatar ab-font-size-15 ab-block-testimonial"><div class="ab-testimonial-text"><p>Patricia es una gran profesional que proyecta un plan de acción y cumple con objetivos y plazos eficazmente.</p></div><div class="ab-testimonial-info"><div class="ab-testimonial-avatar-wrap"><div class="ab-testimonial-image-wrap"><img class="ab-testimonial-avatar" src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/marketing-3468598_640.jpg" alt="avatar"/></div></div><h2 class="ab-testimonial-name" style="color:#32373c">Pedro Melgar<br/></h2><small class="ab-testimonial-title" style="color:#32373c">CEO paraguas.com<br/></small></div></div>
<!-- /wp:atomic-blocks/ab-testimonial --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:atomic-blocks/ab-testimonial {"testimonialImgID":1605,"testimonialFontSize":15,"className":"testimonio"} -->
<div style="background-color:#f2f2f2;color:#32373c" class="wp-block-atomic-blocks-ab-testimonial testimonio left-aligned ab-has-avatar ab-font-size-15 ab-block-testimonial"><div class="ab-testimonial-text"><p>Patricia es una gran profesional que proyecta un plan de acción y cumple con objetivos y plazos eficazmente.</p></div><div class="ab-testimonial-info"><div class="ab-testimonial-avatar-wrap"><div class="ab-testimonial-image-wrap"><img class="ab-testimonial-avatar" src="https://authoritypro.wpclon.com/wp-content/uploads/2019/04/marketing-3468598_640.jpg" alt="avatar"/></div></div><h2 class="ab-testimonial-name" style="color:#32373c">Pedro Melgar<br/></h2><small class="ab-testimonial-title" style="color:#32373c">CEO paraguas.com<br/></small></div></div>
<!-- /wp:atomic-blocks/ab-testimonial --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div></div>
<!-- /wp:atomic-blocks/ab-container -->

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.

3

Copia y pega los estilos

Copia éste código y pégalo al final de tu archivo style.css

/*Estilo imagen*/
.hero-web img{
	box-shadow: 0 20px 80px rgba(0,0,0,.2);
	border:10px solid white;
}

/*Elemento before*/
.wp-block-image.base::before {
    background: #f4f4f4;
    content: "";
    display: block;
    right: 0;
    height: calc(22.5% - 140px);
    position: absolute;
    top: 40px;
    width: 80%;
	left:0;
    z-index: -1;
}

/*Testimonials*/
.testimonio {
	padding:40px;
	box-shadow: 0 20px 30px rgba(0,0,0,.1);
	border:5px solid white;
}

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 108 clases publicadas con más de 216 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.