Tech Breakout Summit/2021: Cómo trabajar más rápido y más rentable con las plantillas iniciales para el sitio del cliente

Cuando cree sitios web para clientes, siempre busque formas de aliviar su vida y la vida del cliente. En el video a continuación, aprenderá cómo crear su propia biblioteca de plantillas de inicio para el sitio web del cliente y cómo tener su propia biblioteca de sitios web probados, listos para la conversión, facilitar el comienzo y más rápido, especialmente para los clientes que No tenga necesidades de nicho ni tenga presupuestos más pequeños.
Video: Cómo trabajar más rápido y más rentable con las plantillas iniciales para el sitio web del cliente para esta sesión en esta sesión de video, entrenador independiente y desarrollador de Web Carrie Dils:
El enfoque basado en bloques para la construcción de páginas de WordPress e innovaciones que vienen con la edición completa del sitio.
Cómo puede usar los bloques para crear plantillas de inicio y acelerar su proceso de desarrollo.
La idea es reducir, reutilizar, reciclar. Reduce su cronología, reutiliza componentes dentro de proyectos y plantillas de reciclaje. Todos estos son mucho más fáciles al agregar el editor de bloques a WordPress Core Carrie Dills, Independent Coach y Web Developer Transcript Integral Carrie Dils: Hola, todos. Bienvenido a esta sesión sobre plantillas de inicio para el sitio del cliente. Hoy hablaremos sobre lo más rápido y más rentable. Y quién no cree que eso suene bien. ¿Derecha? Entonces, si usted es un profesional independiente o una agencia y se construye yardas para los clientes, sabe que con cada proyecto, habrá tareas repetitivas.
Y cada vez que puede reutilizar o reciclar, ya sea código o automatización para tratar cualquiera de estas tareas, cubrimos la tierra más rápido, acortamos el ciclo de vida del proyecto y esto es algo bueno. Entonces hablaremos de eso hoy. Ahora, no necesariamente hablaré sobre cómo comienzas tu flujo de desarrollo. Quizás estos son temas estándar o complemento de funcionalidad básica o si usa un entorno local, puede usar clones o planes. Todas estas cosas son geniales, pero eso no es necesariamente lo que trataré hoy. Lo que hablaré sobre cómo podemos usar los bloques para crear plantillas iniciales que nos ayuden a acelerar este proceso. Entonces, nuevamente, construir sitios de clientes y esperar que no haya experimentado lo que está al final de las cosas. Pero si eres como la mayoría de nosotros, probablemente lo hiciste. Cuando algo no va bien en un proyecto, superas la cronología, lo que significa que probablemente superas el presupuesto que has asignado. Sus clientes están frustrados, está frustrado. Y al final, esta ni siquiera es una forma duradera de hacer negocios. Ahora, en el otro extremo del espectro, cuando las cosas van bien: entregue proyectos cuando dice que los entregará, los entregará dentro de los límites de presupuesto, posiblemente incluso bajo el presupuesto, por lo que puede sorprender y deleitar a los clientes con una función o una finalización que no esperaba y ganaba más dinero. Los ciclos de vida más cortos de los proyectos, los flujos de trabajo más eficientes significan que obtienes un margen mayor en los proyectos.
Entonces, la idea es volver a reducir, reutilizar, reciclar. Reduce su cronología, reutiliza componentes dentro de proyectos y plantillas de reciclaje. Todos estos son mucho más fáciles al agregar el editor de bloques a WordPress Core. Y solo para asegurarnos de que todos estemos en la misma página, hablemos de bloques. En primer lugar, un poco de lenguaje de bloque. Los bloques están realmente en el centro de la edición completa del sitio. Estuve visitando a un amigo la semana pasada y ella me preguntó, Carrie, ¿cuál es la edición completa del sitio? Y lo explicaré. Súper fácil de pensar. Entonces tienes tu sitio. Se compone en gran medida de un encabezado, un sótano, un área de contenido y tal vez una barra lateral. Y hoy, ya sea que esté utilizando el editor clásico, o que ya esté utilizando el editor de bloques, está limitado a esa área de contenido. El tema es el que controla el encabezado, el sótano y la barra lateral. Por lo tanto, la edición completa del sitio presenta un conjunto completamente nuevo de bloques que puede usar para construir los otros elementos del sitio, el encabezado, el sótano y la barra lateral. Entonces, cosas como un título de sitio o un bloque de iconos del sitio o un bloque de navegación. Todas estas cosas llegan al núcleo de WordPress. Entonces los bloques son solo unidades de marcado individuales. Como mencioné, podría ser un bloque de navegación, podría ser tan simple como un bloque de párrafo.
Y luego está este concepto de bloques reutilizables. Entonces, digamos que puede crear este impulso realmente hermoso. Tiene un hermoso fondo, tal vez un título, una pequeña copia introductoria y un botón. Y organizarlo para un proyecto o tema en particular y le gustaría poder reutilizarlo en varias páginas. Bueno, puede guardar ese bloque o la configuración de los bloques como un bloque reutilizable, luego puede ingresar y usarlo en todo el sitio. Luego hay un patrón de bloque. Por lo tanto, estos son grupos de bloques pre-estilizados y preconfigurados que puede ingresar y usar como contenido inicial. Entonces, en otras palabras, si puede tener un modelo de botones, puede ingresarlo. Y cada vez, puede cambiar el texto o los colores, hacer lo que necesita hacer. Si bien los bloqueos reutilizables, puede cambiarlos en un lugar y actualizar todas las canchas de ese bloque reutilizable en el sitio. Por otro lado, los modelos son uno y están listos. Son únicos en cada uso. Entonces este es el lenguaje de los bloques. Y hay una variedad de bloques que vienen como parte del núcleo de WordPress. Puede crear bloques personalizados. O también hay bibliotecas de tercera parte que ingresan a sus propios bloques adicionales. Y hay uno del que quiero hablar hoy, y este es Genesis Blocks. Ahora, este es un complemento gratuito de WordPress.org. También hay una actualización pagada disponible. Pero hoy, todo lo que te muestro, solo necesitas la versión gratuita para hacer. Es realmente fuerte por tu cuenta. Así que superemos algunas palabras que suceden en el contexto del complemento Genesis Blocks.
En primer lugar, tenemos secciones. Así que piense en si encuentra una plantilla de tema realmente excelente, una buena página inicial y quería cortar y cortar su plantilla en varias partes. Esta es una sección. Es un modelo de bloque diseñado profesional. Y muchos de estos vienen con el complemento Genesis Blocks. Sigue los modelos. Entonces, si las secciones descomponen los modelos, los modelos se hacen cargo de todas esas secciones y las mezclan y las combinan para hacer modelos en toda la página. Y luego, finalmente, tienes colecciones. Y te mostraré eso en un segundo. Pero solo para derribar la base. Las colecciones son, como parece, una colección de estos modelos y las secciones que son temáticamente elegantes. Ahora, quiero mostrarle una pequeña demostración en la que construyo un aspecto simple de tres páginas usando una colección existente en el complemento Genesis Blocks. Si está listo, continúa, pon tu demostración. Así que aquí solo tengo una instalación simple y fresca, vainilla de WordPress. Y sucedió que dirigió el tema Astra. Pero puede usar cualquier tema con el que se sienta cómodo. También tengo un complemento instalado y este es el complemento Genesis Blocks. Disculpe, activado. OK. Así que creemos una nueva página. Y a partir de aquí, voy a bloquear el inserter. Allí puede ingresar a los bloques de WordPress principales. Y luego está este aspecto que proviene del complemento Genesis Blocks y las secciones de hosts, que puede navegar de alguna manera de acuerdo con la categoría. Y luego tenemos modelos. Nuevamente, estos son un tipo de versiones o variaciones se mezclan y coinciden con todas esas secciones. Y luego, finalmente, colecciones.
Así que aquí está la colección de pizarras. Viene de forma gratuita en la versión gratuita del complemento. Si desea saber más sobre colecciones, solo le muestro una pequeña documentación aquí. No mentiré en él. Pero si abrimos la colección, aquí podemos ver algunas secciones individuales. E incluso al pasar por esto muy rápido, puede ver que hay cierta continuidad visual en términos de colores, fondo, fuentes, etc. Así que acabo de ingresar a una página inicial. Y esta es una página completa. Con un solo clic, ingrese. ESTÁ BIEN. Así que sigamos adelante y publiquemos eso. Y veremos cómo se ve en el front-end. Y eso no se parece a lo que realmente quería que sucediera. Entonces tenemos que hacer algunos cambios. Primero, entraremos en el personalizador. Ahora, para el tema Astra en particular, solo quiero asegurarme de activar el contenido de ancho completo. Y también me gustaría deshacerme de esa barra lateral. Así que está bien, encontremos eso. Y detendré la barra lateral. Perfecto. Continuar y publicarlo. Y lo único que no me gusta aquí es que aparece esta casa de título. Entonces, el tema Astra nos da una forma de deshacerse de él. Si utiliza el marco de Genesis o cualquier tema de Genesis Child, también hay una forma de desactivar el título de esa página, lo cual es bastante bueno. Entonces, ahora, si regresamos y lo miramos, puede ver que el título ha desaparecido. Y tengo una página inicial muy hermosa y de diseño profesional. Sigamos y creemos otra página para nuestro sitio demostrativo de tres páginas. Y esta será la página de contacto.
Volveré a esa colección de pizarra, bajaré y lo encontraré aquí.Tenemos una plantilla de página de contacto completa.Al igual que antes, con un solo clic, presentaré ese grupo y colección completa de bloques.Continuaré y apagaré el título.Vamos a publicarlo.Y echaremos un vistazo.Y exactamente, tenemos un gran bloque de acordeón y una hermosa página.
Creemos uno más. Sé que tenemos prisa. Pero no tenemos todo el día ahora. OK. Entonces esta será nuestra página sobre. Pasaré por el mismo proceso que ya te he mostrado. Abra modelos, colecciones de acceso. Y esta vez, en esa colección de pizarra, elegiré una plantilla para una página sobre. Culo. Entonces esto está ahí. Ahora, por supuesto, si hace esto para un cliente real, debe cambiar los colores, obviamente el texto y las fotos. Entonces, aunque estas son secciones y aspectos preexistentes, aún puede ingresar y cambiar cualquiera de estos como lo hace con cualquier otro bloque, lo cual es muy fuerte. Así que deshabilitemos el título de la página para ello. Vuelve y mira. OK. OK. Entonces, si miramos el sitio tal como lo tenemos, no es realmente interesante. Así que hagamos algunas cosas. El primero es obtener un menú con esas páginas que creamos. De nuevo, solo voy a esa personalización. Crearé un menú para ese menú principal, que aparece en el encabezado. Y sigamos adelante y agregemos esas páginas que creamos, publicar. Y allí, en la esquina superior derecha, puedes ver ese menú. Ahora, la otra cosa que quiero hacer es ir a la configuración de la página de inicio y mostrar la página de inicio que creé en comparación con las últimas publicaciones. OK. Y casi en el menor tiempo, creamos un sitio de tres páginas. Ahora, obviamente, nuevamente, si este fuera un proyecto real, tendría que hacer algo adicional. Pero, solo como ejemplo, puede ver cómo una colección realmente puede ayudarlo a crear el prototipo de un sitio o simplemente tomar un sitio.
Esto es tan bueno para proyectos de nicho o clientes que no tienen presupuestos enormes para temas personalizados. Entonces, al ir más allá, como vi con esa colección de pizarra, piense en ello como una especie de análogo moderno con el tema de Genesis Child. Y lo realmente fuerte es que puedes construir tú mismo. Por lo tanto, además de lo que se le ofrece desde un complemento, puede crear sus propias colecciones y plantillas para reutilizarlas, ya que cree que es apropiado. Así que iremos más allá y haremos una segunda demostración aquí. Y te mostraré cómo puedes construir tu propia colección. ¿Estás listo? Nos moveremos rápidamente. Pero creo que puedes seguir el ritmo. Bien, vamos a conseguirlo. Aqui estamos. Solo mirando, crearé esta colección llamada Brew Collection y comenzaré al frente y trabajaré para ti. HOBA, asegurémonos de que tocemos nuestro video. Está bien, aquí vamos. OK. Entonces, de nuevo, tenemos todas estas secciones individuales. Y luego todas esas secciones se mezclaron y se reunieron en su lugar para formar estos aspectos. Entonces, si regresamos y miramos esta colección de cerveza que creamos, es mucho más simple. Pero tengo estas secciones de cinco páginas. Y luego los combiné para crear un aspecto de página completa. Ahora, este es un tutorial que sigo para ello. Es Rob Stinson’s y compartiré su enlace más tarde. Entonces, de nuevo, ejecuto el tema Astra. Tema independiente. Use cualquier tema con el que se sienta cómodo. Y sigamos adelante y veamos la creación de una nueva página. Entonces esto es inserto de bloque. Y te muestro esto solo para mostrar que estos son los bloques básicos de WordPress. Y luego hacia abajo, abajo, encontrarás los bloques de génesis.
Y cuando hablamos de crear estas colecciones personalizadas, puede usar una combinación de bloques básicos y bloques de génesis o incluso bloques personalizados si las ha creado. Así que esto es lo que hice, ingresé al editor de bloques y acabo de crear esto. Así que olvídate de las colecciones por un segundo. Esto es justo, diseñé esto en el editor. No soy un diseñador, así que no me culpes si las cosas no se ven bien porque no es [riendo] No trato de mostrarte cómo hacer modelos hermosos aquí. Así que creé esto en el editor y solo quería mostrarle cómo puede usarlo para regresar y crear su complemento. Así que corté la página en todas estas secciones y componentes individuales de la página. OK. Entonces, volviendo al tutorial de Rob, aquí muestra las secciones que construyó para su enchufe de demostración. Y lo primero que luego nos muestra que el andamio del complemento tiene que hacerlo. Entonces, para construir nuestra estructura, si lo desea, para nuestro complemento. Y seguiré adelante y iré a mi editor de código. Vamos al lado del tutorial de Rob. A la izquierda solo instalo para mi sitio de WordPress. Tengo Genesis Brew, este es el complemento que creé. Y tengo cada una de estas carpetas y luego este principal Genesis Brew, este es el archivo de enchufe principal. Y volviendo a lo siguiente con el tutorial, tengo el encabezado. Este es solo un encabezado estándar de complemento de WordPress. Y veamos. Si vamos al paso tres aquí en el tutorial de Rob, grabaremos la colección y agregaremos la apariencia de nuestra página inicial. Volvamos a la pantalla completa.
Ahora, no voy a entrar en los detalles del código, porque Rob hace un muy buen trabajo en este tutorial en su tutorial. Pero solo quiero mostrarle esta característica, como funciona, este componente de apariencia del registro de bloques Genesis. E introduzca el contenido que está en este archivo home.php. Echemos un vistazo. Y es solo una apertura de etiqueta PHP, que regresa y mucho marcado de bloque. Permítame mostrarte cómo funciona esto, marcado porque creo que es genial. OK. Entonces, regresando aquí, tenemos todo el aspecto de la página. Si abro estos puntos de suspensión y voy al editor de código, hay dos formas de hacerlo. Podría seleccionar todo esto manualmente, agregarlo al teclado o hay una opción solo para copiar todo el contenido y esto lo pone en el portapapeles. Así que haré eso. Regrese a mi editor de código y continuaré y eliminaré todo esto solo para comenzar desde cero y mostrarle cuán elemental es. Mi etiqueta PHP de apertura, una etiqueta de retorno si puedo escribir, y luego solo inserta literalmente lo que había en el portapapeles y esta es toda la marca de bloque. Lo único que es una especie de captura aquí es que si tiene apóstrofes en copia, deberá deshacerse de ella. Así que haz eso. Guárdelo. OK. Y si volvemos a nuestro sitio, salgamos de aquí. Agregaré una nueva página. HOBA, deshazte de ello. Vamos a nuestros modelos. HOBA, OK. Colecciones, colección de cerveza y abajo. Ahora, cuando hago clic en este aspecto de la página, lo que hace es enviar toda esa marca de bloqueo desde casa.

PHP en esta página. Creo que es muy fuerte porque no tienes que codificar todo esto. Cree literalmente en el editor de bloques y luego copie y pegue esa marca de bloqueo en su enchufe. Así que echemos un vistazo a una sección. La misma cosa. Es solo la marca bloqueada lanzada con ella. Y déjame mostrarte al héroe. Así que esa es la sección Heroes. Todo está en un bloque de cobertura. Es un bloque de cobertura con una imagen interior. Y no sé qué tan práctico es usar eso. Pero es lo que tengo para mi manifestación. Así que abriré el editor de código nuevamente. Y esta vez, en lugar de copiar todo el contenido, solo quiero copiar el código que necesito para esa sección en particular. Así que vamos a poner eso en nuestro portapapeles. Y entraría aquí y me metería directamente en este héroe.php. Y ya he hecho esto antes de esta demostración para cada una de esas otras secciones. Ahora, esta carpeta de activos, que tiene capturas de pantalla como el producto terminado, si lo desea, para cada una de estas secciones, así como para la apariencia. Entonces, si regreso. OK. Abramos aspectos, colecciones. OK. Entonces, esa captura de pantalla que analizamos allí, en cada una de estas capturas de pantalla, esas son las imágenes que viven en ese archivo activo, solo para saber de dónde vienen. OK. Entonces, como el tutorial de Rob nos mostró, en principio, podemos construir nuestra propia colección, construirla en el editor, presentar la marca de bloque en código y listo.
Y puedes ver que realmente debo tener ese enchufe activado que acabo de crear para que esa colección esté disponible. Y otra nota aquí, le muestro solo un complemento que solo tiene una colección. Pero también sería posible crear un complemento que tenga muchas colecciones. OK. Sé que fue muy rápido. Pero podrás ver esto de nuevo más tarde si quieres. OK. Entonces, yendo más allá, cada vez que construye una nueva plantilla de inicio o una colección como lo hice, su biblioteca crece. Entonces, si trabaja con una determinada industria o un cierto nicho de clientes, entonces podría construir estas colecciones y reutilizarlas en cualquier momento que desee. Por supuesto, puede cambiar los colores o la tipografía o tales cosas. Pero imagine, con cada proyecto, que está ajustando esta biblioteca. Entonces, a medida que avanza, puede regresar y construir nuevos proyectos rápidamente, lo cual es bastante bueno, porque nuevamente vuelve a la idea de reducir, reutilizar, reciclar, ciclo corto del proyecto y trabajar básicamente más, no más inteligente . . Esperar. No. Esto fue [risas], lo cual fue algo absolutamente incorrecto. No. Quieres trabajar más inteligente, no más difícil. Entonces sí. ESTÁ BIEN. Bien. Estaba viendo si tenías cuidado. Así que gracias por estar despierto. OK. Entonces, cuando terminemos aquí, solo quiero compartir algunos recursos que puede usar para continuar explorando de lo que hablé hoy. OK. Entonces, este primer punto que tengo aquí es el tutorial oficial sobre cómo crear secciones, modelos y colecciones utilizando bloques de génesis.