¡Crea un sitio web con el tema de Astra!

1. 1 introducción a Astra: Bienvenidos al curso y me llamo David. Te voy a guiar por el paso uno a paso hecho, y cómo crear un blog y sitio web usando el Tema de Astra. Astra es un tema completamente gratuito en uno de los demes más descargados para WordPress está diseñado para ser luces responsive en rápido. En este tutorial, te voy a mostrar cómo utilizar el editor Gutenberg predeterminado y la versión gratuita de Asherah para juntar esos dos para diseñar cualquier tipo de sitio web que quieras. Este curso es perfecto para cualquiera que quiera crear un sitio web y blog de estilo informativo. Al ser este un paso uno para dar un paso abajo tutorial, te voy a guiar por todos los pasos que necesitas conocer. Vamos a conseguir un nombre de dominio en un registro de nombres de dominio, vamos a conseguir una cuenta de hosting compartida. Entonces vamos a instalar WordPress InDesign o sitio web. Entonces si has estado buscando un curso acelerado sobre cómo diseñar un sitio web y un blog usando el tema de Azure. Este curso es para ti. Da click a ese siguiente video y te veré por dentro. 2. 2 introducción y configuración del sitio: Muy bien, bienvenidos al tutorial. Entonces esta es la página web que vamos a estar construyendo. Vamos a estar haciendo un sitio web orientado a la información. Y te voy a mostrar cómo diseñar este sitio web específico usando solo Astra, literalmente solo Astra y solo el editor predeterminado de WordPress. En realidad puedes hacer esto bastante impresionante. De todos modos, te voy a mostrar cómo obviamente crear una imagen de héroe bonita. Cómo agregar unos botones de superposición de texto, mensaje de bienvenida, cómo agregar estos guía en profundidad. Por lo que, al pasar el mouse sobre él, da un poco de textos que van junto con él, cómo agregar en una sección justo aquí y romperlo, y cómo hacerlo súper ancho así. Por lo que es una especie de destaca visualmente en la superposición de texto sobre. Así es como agregar en tus últimas entradas de blog. Tenía que tener un email opt-in formularios severidad en la parte inferior. ¿ Cómo cambiar el pie de página y agregar una página de términos de privacidad y divulgación, blog reales, cómo hacemos, cómo agregamos en migas de pan así? ¿ Cómo agregamos en esta revelación por defecto que va a estar en cada entrada de blog individual. ¿ Cómo se vincula a la revelación así? ¿ Cómo agregamos en una bonita cajita como esta para promocionar productos? ¿ Cómo agregamos un formulario de email opt-in para sentarnos en la parte inferior de cada entrada de blog individual, etcétera. Entonces si estás listo, empecemos. Bienvenido al nombre cheaper.com. Entonces este es el spot donde te recomiendo que registres tu nombre de dominio. Ahora puedes registrar totalmente tu nombre de dominio en un host web, pero va a ser más caro UN término. Y así uso personalmente llamado Ovejas, guardo todo mi nombre de dominio, los divido. Los dominios pueden comenzar a los 80 al año y solo eso es un precio fantástico. Entonces de todos modos, para que puedas empezar con el nombre Oveja es muy sencillo. Por lo que acaba de llegar al cuadro de búsqueda, poner en el nombre de dominio que desea registrar. Entonces si escribo mi super increíble blog.com, está bien, haremos clic en el icono de búsqueda. De acuerdo, Así que mi super increíble blog.com está disponible, por lo que se agrega a tu carrito es muy simple. Simplemente podría ser el botón Agregar al carrito. Ahí vamos. De acuerdo, así que vamos a seguir adelante y ver el elemento y vamos a seguir adelante y echar un vistazo. De acuerdo, así que esta es la pagina de checkout para su nombre barato. Y así vas a tener que crear una nueva cuenta barata obviamente. Pero aquí tienes tu registro de nombre de dominio. Se puede registrar un nombre de dominio con un año hasta diez años de anticipación. Sí te recomiendo registrarte por unos años porque sí caminas en esos nombres de dominio de bajo precio. Do burr sabía alrededor de $12, así que no es tan caro, pero si quieres caminar en ese bajo precio de AAT, entonces solo tienes que seguir adelante y seleccionar como cinco años son lo que creas que es mejor para tu proyecto. Ahora, quién es guardia es fantástico. Es gratis obtenerlo completamente gratis. Hosts web y otros registros de nombres de dominio. Cobran extra por esto si eres como, ¿Qué es esto? Bueno, quien fue Dios mantiene tu información privada porque parte de yo no puedo reglas es que tienes que revelar una información de contacto. Entonces quién es va realmente agradable porque mantiene solo todo privado y es gratis para siempre. Que esto básicamente es todo lo que tienes que hacer es seguir adelante y hacer clic en Confirmar pedido, pagar, y crear una cuenta de oveja nombre. Y tú estás bien para ir. Bienvenido a siteground.com. Entonces digamos que el terreno es uno de apenas tres hosts web que son recomendados por WordPress. Y son uno de los hosts web más rápidos, de mayor rendimiento en todo el definitivamente superan a los anfitriones de un sueño y Bluehost en términos de velocidad, pero su punto de precio es un poco más alto. Pero lo que realmente me gusta de SiteGround es que tienen una gran tasa de introducción para principiantes que ni siquiera tienen un sitio web para empezar. Ahora en la página de inicio, vas a ver un montón de opciones diferentes. No queremos que éste que diga gestionado porque teníamos que tener acceso sobre el backend de nuestras cuentas no están iniciando una tienda. El hosting en la nube es para lugares de interés de alto rendimiento, sitios web de alto tráfico, que no somos nosotros. Estamos iniciando una nueva página web. Así que sólo tienes que seguir adelante y dar click en hosting web. Ahora tenemos tres opciones diferentes. Startup, crecer a lo grande, y vete geek. A mí me gusta mucho el crecer grande más. Y se trata de sitios web ilimitados, 25 mil visitantes al mes más o menos, 30000 visitantes, etcétera. Eso es como un 1000 visitantes diarios, que es una buena cantidad de tráfico. Startup. Solo se puede tener un sitio web. Entonces te digo como una vez que entiendas cómo crear un sitio web de WordPress, definitivamente vas a querer tener sitios web ilimitados. De todos modos, adelante y haz click en él, consigue plan. De acuerdo, así que ahora en esta página, tenemos que poner en nuestro nombre de dominio para poder registrar un nombre de dominio a través de sake round, cual no recomiendo porque el registro de nombres de dominio es de 1595 al año llamado barato, es AAA, razón por la que te hice ir a través de ovejas nombradas. Por lo que debiste haber conseguido tu nombre de dominio oveja. Entonces ve aquí. Ya soy dueño de este nombre de dominio. ¿ De acuerdo? Ahora pon en nombre de dominio que te registraste. A continuación, dar click en Proceder. Y ahí tienes. Por lo que ahora solo tienes que revisar y completar tu información de pago y crear un sitio de cuentas terrestres. No voy a insultar tu inteligencia y guiarte como cómo pagar algo en línea. Simplemente sintió la información como apropiada. Y quieres simplemente bajar aquí para asegurarte de que todo se vea bien. Por lo que tienes tu elección de centro de datos por aquí. Entonces si quieres cambiar el centro de datos, tenemos a USA, Australia, Alemania. Entonces, ¿cómo es esto, de dónde, de dónde va a venir tu tráfico principalmente? ¿ De acuerdo? Entonces si tienes como un público americano, entonces probablemente quieras USA, ¿de acuerdo? Si tienes público europeo, tal vez quieras como Europa o Alemania por ejemplo. Y eso es todo. De acuerdo, entonces ven aquí, di que me gustaría, me gustaría lograr noticias sagradas y actualizaciones tal vez si quieres, y definitivamente tienes que dar click en esta donde puedo formarme. He leído y estoy de acuerdo en citar motivos, términos de servicio, y entonces eso es todo. Así que adelante y haz clic en el botón pagar ahora y ya estás bien para ir. 3. 3 configuración del sitio web: Bienvenido a siteground.com. Por lo que después de enviar el pago, se te va a presentar con tu panel de cuenta de alojamiento web de SiteGround. Ahora tenemos esta configuración, nuestra página web, te voy a mostrar cómo se hace rápido y fácil en como cinco minutos. Por lo que solo puedes seguir adelante y dar clic en este sitio de configuración allí. O puedes hacer click en la pestaña arriba allá y dar click en do sitio web ahí o en esta, crear un sitio web ahí. Lo que sea, todos te llevan a la misma página exacta, que es esta página de aquí mismo donde podemos añadir un nuevo sitio web. Por lo que podemos agregar un nuevo nombre de dominio. Y entonces lo que eso va a hacer es ir a registrar un nombre de dominio a través de Sacre, lo cual no recomiendo. Nombre de dominio temporal significa una casilla 1, 2, 3 punto siteground.com, lo que sea. Literalmente sólo un nombre de dominio temporal para como simplemente practicar algo o lo que quieras hacer. Queremos que este sea un nombre de dominio existente. Por lo que ahora queremos bajar aquí, introduce tu nombre de dominio. Por lo que queremos utilizar el nombre de dominio que usamos cuando nos registramos a siteground. Entonces déjame seguir adelante y poner eso aquí mismo. Irían y seguirían adelante y pinchaban en continuar. De acuerdo, Entonces el nombre de dominio que usas no está registrado en tu sacro y cuentas. Ahora para proceder blablabla. Está bien. Todo esto está diciendo es que vas a tener que configurar servidores de nombres. No es gran cosa. No te preocupes por ello. Haga clic en continuar. De acuerdo, entonces ahora queremos dar click en este donde podemos iniciar un nuevo sitio web porque estamos iniciando un nuevo sitio web, no estamos migrando un sitio web de otro host web, etcétera. Pero si sí tienes una cuenta de hosting diferente y quieres pasar a siteground, solo puedes ir aquí y migrar tu sitio web, pero sigamos adelante y pinchemos en iniciar un nuevo sitio web. De acuerdo, así que ahora podemos dar click en WordPress, WooCommerce, Wembley, otros, queremos WordPress. Entonces sigamos adelante y hagamos eso. De acuerdo, ahora WordPress inicio de sesión configurable. Entonces así va a ser como iniciamos sesión en nuestra página web. Entonces déjame seguir adelante y dar clic en una dirección de correo electrónico. Entonces déjame solo poner aquí mi dirección de correo electrónico. De acuerdo, y luego déjame seguir adelante y poner una contraseña. De acuerdo, y vamos a dar click en Continuar. Ahora podemos instalar escáner sagrado, que no vamos a hacer. Y seguir adelante y dar click en Finalizar. Y ahí tienes. Por lo que ahora el SiteGround está creando nuestro sitio web. De acuerdo, entonces dice que todos estamos preparados, pero una cosa que tenemos que hacer es que tenemos que apuntar el nombre de dominio. Y entonces lo que eso significa, tenemos que entrar a nuestro nombre cuenta barata y actualizar los servidores de nombres para apuntar a nuestra cuenta de SiteGround. Tan muy, muy sencillo. Por lo que solo quieres saltar aquí y solo quieres llevar lo que sean tus servidores de nombres que quieras navegar a tu nombre de dominio. ¿De acuerdo? Nosotros queremos bajar aquí y queremos ir dar click a este desplegable y quieres ir al servidor de nombres DNS personalizado uno. Pega eso en. Boom. Ok. Y ahora ve a Servidor de Nombres para tomarlo. Copia, boom, ahí mismo. Pegar. Después haga clic en la pequeña marca de verificación. De acuerdo, Así que ahora acabas de actualizar con éxito los servidores de nombres. Dice que va a tomar 40 fuera podría tardar 40 horas. Es que nunca he visto eso. Por lo general toma como cinco minutos. Entonces lo que tienes que hacer ahora. Sólo espera un poco. De acuerdo, así que espera como cinco minutos, seis minutos para que todo se propague correctamente. Y entonces tu sitio web debería estar todo listo. Una vez que hayas esperado unos cinco minutos más o menos, vuelve a tu pestaña de sitios web y esto tendrá los detalles de tu sitio web. Quieres hacer click en kits de WordPress y luego quieres ir al administrador de WordPress porque queremos iniciar sesión en nuestro sitio web. Entonces tu administrador para tus páginas, así que va a haber tu website.com, sea lo que sea, slash WP admin. Ahora probablemente deberías ver algo como esto donde un gran mensaje de miedo. El motivo es que este sitio web no cuenta con un certificado SSL activado. Y así podemos seguir adelante y de forma rápida y fácil hacerlo nosotros mismos aquí abajo. Entonces con el SSL, baja aquí y haz click en Agregar. Y así en SSL agrega un pequeño icono arriba allá arriba. Ahora podemos usar, Let's Encrypt y Let's Encrypt es completamente gratis y asegurarnos de que eso está seleccionado. Baja aquí y haz click en activar. De acuerdo, así que ahora estamos en nuestro gestor SSL. Selecciona nombre de dominio, selecciona el certificado SSL que queremos. Vamos a Encriptar y seguir adelante y dar click en Obtener. Muy bien, así que ahora está instalando el certificado SSL. Sí toma un minuto, tal vez dos minutos, no demasiado. Fantástico. Por lo que vamos a cifrar está instalado para nuestra página web. Fantástico. Entonces todo lo que tenemos que hacer ahora es dar click en Ir a mis cuentas. Y para que eso nos vaya de vuelta a donde estábamos. De acuerdo, así que vamos a los sitios web. De acuerdo, ve de nuevo, ve al kit de WordPress, ve al administrador de WordPress. Y ahí tienes. Entonces ahora tu sitio web debe ser seguro, y este es tu administrador de WordPress. Entonces lo que necesitas poner aquí son las credenciales que usas al configurar el sitio web. Por lo que solo pon tu dirección de correo electrónico que utilices, así como tu contraseña, y luego haz clic en iniciar sesión. Bienvenido a WordPress. Entonces este es tu panel de WordPress y hay un par de configuraciones de back-end que necesitamos ocuparnos rápidamente antes de empezar a diseñar nuestro sitio web. Entonces, solo lleguemos a ello. Muy bien, Así que lo primero que quiero que navegues hacia donde dice plugins. Ahora plugins, obtienes el plugin de inicio de WordPress. Esto es de terreno del sitio. Definitivamente no lo necesitamos. Definitivamente dejo el optimizador de Saigon este un fantástico enchufe patentado y por siteground, que hace que su sitio web se cargue más rápido para el usuario final. Entonces sigamos adelante y eliminemos eso. De acuerdo, Así que el primer plugin que quiero que agregues, y ahora es bueno agregar. Y quiero que añadas algo llamado Yoast SEO. De acuerdo, sigamos adelante y pinchemos en Instalar ahora. Y vamos a dar click en Activar. De acuerdo, entonces lo que hace Yoast SEO es que solo nos da un poco más de control sobre nuestro SEO en página, igual que nuestros títulos de página, descripción del Meta nos permite tener migas de pan en nuestra página web. Muchas cosas realmente útiles. Entonces estás como, ¿De qué estás hablando? Diría que sido sitio web creative pro.com. Entonces como una descripción de Meta es esta sección derecha arriba justo aquí en el título de la página. Lo que Yoast nos permite tener todo ese poco control granular sobre cómo esto aparece a los motores de búsqueda, etcétera. Ahora el siguiente Bogan quiero que sigas adelante y sumar se llama smush. Entonces teclea en smush. Ahí vamos. Ahora lo que hace mucho es que nos permite optimizar tus imágenes que subimos a nuestra página web. Y así por ejemplo, si venimos a página web create pro.com, esta es una imagen de héroe. Es una gran imagen. Está optimizado por lo que se carga rápidamente. Si recargo, esto cubrirá solo boom, lodes realmente rápido. ¿ De acuerdo? Porque y eso es smush ayuda hace eso porque optimiza tus imágenes haciéndolo hacer hacer un tamaño de archivo más pequeño, pero aún así sin reducir la calidad. ¿De acuerdo? Y luego el último plugin que quiero que sigas adelante e instales se llama jetpack. Ahora jetpack es en realidad de un WordPress. Y me gusta jetpack porque te permite tener principalmente lo que sí muere. Lo principal para lo que lo uso son las publicaciones relacionadas. Entonces si bajamos de nuevo, por lo que un sitio web gran pro.com fue simplemente saltar a la entrada de blog registrado Dominion. Si me desplaza todo el camino hasta el fondo aquí, vas a ver un montón de poco. También te puede gustar boom, boom, boom. Esto está siendo impulsado por jetpack. Está en los servidores jetpacks, no en mi servicio. No soy como trato. No está ocupando ningún ancho de banda. Es sólo una cosita útil que aumenta. La gente está haciendo clic alrededor de tu sitio, enlaces internos en Pete's, más tiempo en tu sitio web, etcétera. Y así solo déjalo ahí. Y así estamos bien para ir. Eso es todo lo que necesitamos hacer. Ahora, quiero que navegues hacia donde dice usuarios. Haga clic en eso. Muy bien, entonces ahora deberíamos tener un usuario por aquí. Ahora se abrió este usuario y hay un par de pequeñas cosas que necesitas saber. Entonces bajamos aquí. Entonces aquí abajo, información biográfica, es donde puedes poner como a David le gusta tomar café y le gusta largos paseos por la playa, etcétera, bla, bla, bla. Ya sabes, ves una entrada de blog, ves una biografía de autor en la parte inferior de las entradas de blog. ahí es de donde se está poblando. Ahora tienes tu foto de perfil ahí mismo. Puedes hacer click en esto y te va a llevar a un sitio web llamado gravedad. Entonces la gravedad es un sitio web que te permite asociar una imagen con un correo electrónico. Por lo que cuando dejas un blog comentarios o tu propio sitio web tiene una imagen para asociarse con el correo electrónico. De acuerdo, y así ahora aquí, la gestión de cuentas aquí podemos configurar una nueva contraseña. Y así si quieres cambiar tu contraseña, aquí es donde solo puedes hacerlo de forma rápida y sencilla. De acuerdo, y ahora otra cosita para, volvamos a todos los usuarios. También podemos añadir nuevos usuarios. Hacemos click en esto. Ahora cuando veas el rol aquí mismo, para que puedas crear un nuevo nombre de usuario, correo electrónico, nombre, etcétera, que puedas establecer el rol. Y así que ahora mismo estamos en sus cuentas de administrador, está bien, Así que tiene acceso completo. Entonces, por ejemplo, si contrataras a un escritor de blog, por ejemplo, solo podrías hacer que alguien venga aquí y las mujeres a ser editora. Por lo que sólo tienen acceso a como decir, la publicación del blog por ejemplo. Y así es una buena idea también solo crear una cuenta de editor para ti e iniciar sesión en tu propio sitio web como un editor o un autor tú mismo. De acuerdo, y solo deja la cuenta de administrador por solo editar el sitio web, etcétera, totalmente depende de ti, pero agrega otra capa de seguridad. De acuerdo, Ahora, última vamos a venir aquí a ajustes y quiero bajar a promover enlaces. De acuerdo, entonces ahora queremos venir aquí y queremos dar click en Estructura Personalizada. Ahora para los blogs, personalmente me gusta la estructura de slash blog post title. Ahora puedes usar ya sea nombre del post, que es bueno, o puedes hacer la estructura personalizada que me gusta. No hay manera correcta. No es tan grande de un trato, pero definitivamente prefiero este tipo de estructura porque proporciona una bonita arquitectura de sitio para el sitio web. Organiza todo apropiadamente bajo el blog. Pero depende totalmente de ti. Pero definitivamente no quieres avión porque es p igual a 1, 2, 3. Eso no da ninguna indicación de qué se trata la publicación del blog. Y queremos alejarnos de cualquier cosa con fechas porque las fechas son geniales si estamos produciendo contenido sensible al tiempo. Pero si no somos como una página web de noticias que no necesitamos fechas en nuestros euros. Por lo que de todos modos ir al blog de estructura personalizada slash. Ok. Y ahí vamos. Y ahora quieres dar click en guardar cambios. Fantástico. Está bien, genial. Por lo que ahora tenemos instalados nuestros plugins. Ahora es el momento de instalar el Tema Astra. Entonces pasemos a Apariencia. Vamos a los temas. Ahora, por defecto, WordPress viene con un montón de ellos ya está instalado. Y tengo tutoriales honestamente en este canal de cada uno de estos, si quieres, echa un vistazo. Pero de nuevo, solo pasemos por esto y solo podemos seguir adelante y eliminar cada uno de estos temas. Pero sigamos adelante y primero instalemos el Tema Astra. Así que adelante y haga clic en agregar nuevo en la parte superior. Buscar temas. Astra. Respuesta. Boom, aquí mismo estaba. Haga clic en Instalar. Y sigamos adelante y pinchemos en Activar. Grandes. Ahora lo siguiente que tenemos que hacer es por razones de seguridad, queremos seguir adelante y simplemente eliminar estos otros temas que se instalan. No los necesitamos en nuestra página web. No los estamos usando. No hay necesidad de que lo estén. Entonces sigamos adelante y hagamos esto. Haga clic en el pequeño ícono. Y boom, ahí vamos. Una última cosita que quiero que hagas es habilitar HTTPS. Por lo que avanzamos e instalamos un certificado SSL en nuestra página web a través de nuestro panel de control de SiteGround. Ahora sólo necesitamos habilitarlo. Por lo que solo tienes que navegar hacia donde dice psich run optimizer. Y luego quieres ir bajo medio ambiente y optimización. Y luego solo querrás asegurarte de que habilitas HTTPS. Y lo que esto hace es forzar una conexión segura a tu sitio web. Por lo que funcionalmente hablando, en realidad tienes dos versiones de tu sitio web. Tienes una versión no segura, que es la versión HTTP, y tienes la versión segura que la versión HTTPS. Y así sólo habilitando esto, obligará a cualquiera que intente acceder a la versión insegura a la versión segura. Es solo algo que realmente hace que tu sitio web más seguro y mejor para el usuario final. Y tienes cualquier tipo de problema simplemente baja aquí y habilita arreglar contenido inseguro. Si estás teniendo algún tipo de problema. 4. 4 Comienza el sitio web de diseño: De acuerdo, entonces nuestro miércoles está configurado y listo para salir. Por fin estamos listos para diseñar una página web con el Tema Astra. Entonces solo quería darles algún contexto sobre mi enfoque, sobre cómo vamos a estar haciendo esto. En primer lugar, nos vamos a centrar en la página de inicio, y vamos a convertir la página de inicio en un hermoso menú visual para la página web. Entonces te voy a mostrar cómo personalizar las páginas individuales de tu sitio web así como tu post de blog específico y tus páginas legales. Te voy a mostrar cómo configurar un logotipo, un icono fabuloso, y agregar varias secciones a tu página de inicio para hacer un sitio web de aspecto realmente impresionante que se ve muy bien en dispositivos móviles. Entonces sigamos. Empecemos a diseñar nuestro sitio web. Entonces si le echas un vistazo a un sitio web como lo que es una carrera pro.com. Lo que vas a notar es que esta es la página principal y esta es literalmente una página dentro de WordPress que creé para ser la página de inicio, y luego tienes un montón de otras páginas diferentes. Entonces, por ejemplo, si navegamos hasta la página del blog, esta es la página de blog específica para el archivo del blog. Ahora dentro de WordPress, si quieres tener una página de inicio para tu sitio web, que es lo que vamos a estar haciendo. Tienes que crear una página y que se establezca como tu página de inicio y otra página, y que se establezca como el blog. Entonces, sólo vamos a navegar aquí abajo. Iremos a leer y queremos ir a una página estática. Ahora tenemos que seleccionar la página de inicio y oponernos a la página, pero notarás algo. Solo tenemos página de muestra. Eso significa que tenemos que literalmente, literalmente crear estas páginas. Así que adelante y dar click en páginas, y luego queremos dar click en agregar nuevo. De acuerdo, así que adelante y solo escribe en la página de inicio. ¿De acuerdo? Y así queremos que esta sea nuestra página de inicio, así es como lo vamos a llamar así. Ahora, adelante y dar click en Publicar. Está bien, Ahí vamos. Ahora, a continuación quiero que se desplace por aquí, y quiero que salten aquí abajo a su descripción de Meta. Y aquí es donde puedes dar título a tu sitio. Por lo que quieres tener algo donde sea un título de sitio, separador de páginas, y luego una descripción de palabra clave del sitio web. Por ejemplo, si echamos un vistazo a web career pro, separador de páginas, planean, facturan, promueven ganancias, lo que quieras hacer, algo similar, tienen una frase de palabra clave que describa de qué se trata tu sitio web, entonces esta es tu descripción de Meta. Por lo que su meta descripción debe contener varias palabras clave y frases y ella solo describe de qué se trata el sitio web. Entonces, por ejemplo, si grabo fue un profesional creativo. Aquí mismo, crea un sitio web, inicia un blog lanzado tienda en línea. ¿ Por qué tengo esas palabras? Porque esto ayuda a describir a los motores de búsqueda y a los usuarios finales como de qué se trata el sitio web. Se trata de crear sitios web, iniciar blogs, tiendas en línea, tutoriales gratuitos, ese tipo de cosas. Entonces es una especie de arte y una ciencia con tu Meta descripción, pero quieres poner algo ahí y eso es todo. Y así a continuación, una vez que tengas tu página de inicio lanzada, tenemos que volver atrás e ir a Agregar nuevo. Y ahora solo queremos hacer exactamente lo mismo para el blog. Así que adelante y teclea en blog. Y se asegura de que la estructura de URL justo ahí sea tu nombre de dominio.e.com slash blog. Adelante y dar click en Publicar. Ahí vamos. De acuerdo, entonces otra vez, ven aquí y queremos bajar a la descripción del Meta. Y aquí es donde quieres poner algo y no quieres que solo sea esta estructura por defecto. Por lo que queremos sólo darle algo. Por ejemplo, con programa de licenciatura webs, lo llamo el sitio web Greer pro blog, estudios de casos, tutoriales y más como podrías justo lo que digas, ¿es bajo? Entonces si tienes como una blob orientada al café por ejemplo, el como el café, la cafetería camina. De acuerdo, entonces separador de páginas, cualquier consejo, consejo, consejo y guías, lo que sea, ya sabes, algo así. Tan solo ten un poco de consideración a la descripción de tu página para tus entradas de blog y la página de inicio. De acuerdo, así que ahora podemos navegar de regreso a nuestras páginas. Tenemos la página de inicio, tenemos el blog. Estamos bien para irnos. Entonces una vez que configuras los títulos de página y las descripciones de Meta, entonces esas páginas se hacen funcionalmente. Y así podemos simplemente bajar aquí, volver a leer y hacer clic en página estática, página inicio, boom, página de inicio, página de publicación. Yo quería ser la página del blog. Y luego seguir adelante y dar click en Guardar Cambios. Fantástico fue echar un vistazo a nuestra página web. Y ahí vamos. Entonces ahora tenemos, ahora tenemos esta página de inicio ahora está configurada para ser nuestra página de inicio y estamos listos para personalizar el look y el diseño de nuestro sitio web. 5. 5 Image de héroe y el llamado a la acción: Establecer una imagen de héroe y un llamado a la acción. Entonces empecemos a diseñar nuestra página de inicio. Y entonces lo que quiero decir por imágenes de un héroe, este tipo de imágenes con este texto y un llamado a la acción, etcétera. Eso lo puedes hacer totalmente con Astra. Es muy, muy sencillo. Y así el primer paso en el proceso es ir a tu página de inicio y quieres editar la página. Y así quieres editar tu página de inicio, ¿de acuerdo? Y así aquí mismo en la barra lateral, tenemos ajustes de Asherah, ¿de acuerdo? Y así por aquí es donde puedes tener ajustes específicos para esta página específica. Y así queremos desactivar el título. De acuerdo, y entonces lo que eso hace, eso apaga esto. Ahora, la barra lateral de aquí, no quiero barra lateral en la página de inicio. Entonces vamos aquí, los clientes se están poniendo y podemos decir que no hay barra lateral. Ahora, disposición de contenido, podemos tener Box content box full width en full width stretch. Entonces queremos que la imagen estire toda la longitud, ¿verdad? Entonces vamos a querer completo, vamos a escribir aquí lleno con contenido. ¿ De acuerdo? No queremos estiramiento porque lo que estirado hace es que elimina el relleno, por lo que todo simplemente se estira todo el camino de izquierda a derecha. Luce súper raro también. No queremos eso. Queremos que se contenga un poco. Y ahí vamos. Y así sigamos adelante y ahora subamos una imagen. Entonces bajamos aquí y luego esta es tu cuadra. Entonces da click en el signo más y quieres escribir en algunos casos portada. Ahora este es un bloque de portada y ahora tienes que subir una imagen poder encontrar imágenes gratis copyright gratis aquí en Unsplash. Entonces para este tutorial, voy a estar haciendo un blog de café, ¿de acuerdo? Y así vamos a seguir adelante y subir una imagen. De acuerdo, Así que descargo esta imagen de unsplash aquí mismo. Creo que se ve realmente bonito. Ahora una nota sobre imágenes. Se desea disminuir el tamaño de las mismas cuando sea posible. Por ejemplo, como esta imagen aquí mismo es de ciento quinientos por ciento quinientos. Es grande, pero no es demasiado grande porque si una imagen grande se corteará manera despacio, ¿de acuerdo? Está bien, así que aquí mismo, es muy sencillo. Por lo que ahora sobre esta imagen puedes empezar a escribir en Europa llamadas acciones. Entonces voy a decir Café, cafetería, está bien. Entonces solo diremos consejos y guías para elaborar café. Ahí vas. Y así quiero que esto esté centrado, ¿de acuerdo? Y lo dejaremos así por ahora. Entonces sigamos adelante y pinchemos en Actualizar. Ahí vamos. De acuerdo, entonces vamos a recargar la página. De acuerdo, así que eso se ve bien. Entonces hay un par de cosas diferentes. Por lo que en primer lugar, quiero que la imagen se estire de izquierda a derecha. No quiero este espacio en blanco en. Además, quiero un encabezado transparente como este. Por lo que parece en la imagen detrás de ella en lugar del encabezado blanco. ¿Cómo hacemos eso? Muy fácil. Por lo que de nuevo, tenemos que hacer clic en la página de inicio. Ahora estamos editando la página. Así que ven aquí. Encabezado transparente personalizar lo que está habilitando. De acuerdo, y a continuación queremos ajustar esta imagen. Entonces, ¿cómo ajustamos su imagen? Haga clic en él. De acuerdo, eso es todo. Ahora cuando haces clic en él, te da un montón de opciones diferentes para editar este bloque específico. Por lo que queremos venir aquí y queremos cambiarlo a ancho completo. Ahí vamos. Ahora no lo cambia en este extremo, pero cambia en el front-end. Entonces sigamos adelante y actualicemos esto, y recarguemos esto. De acuerdo, entonces ahora tenemos un encabezado transparente grandes en la imagen se expande de izquierda a derecha. Se ve bien. Ahora estás como, ¿por qué está oscuro? Como si no lo consiguiera. ¿ Al igual que por qué es tan oscuro esto? Bueno, se llama superposición. De acuerdo, Así que tienes que bajar aquí a la opacidad, y así puedes bajar esto. Puedes convertir esto a lo que quieras si querías estar como un poco oscuro o lo que sea. Y así solo lo haría, ya sabes, si vas a estar poniendo textos en general, necesitas en superposición sobre una imagen para que el texto sea legible. Pero de nuevo, depende de la imagen. Entonces por ejemplo, tal vez haga negro este texto o lo que sea, pero lo que sea. Entonces esto es como lo que tienes que bajar y cambiar la opacidad. Entonces si bajo esto solo un poquito, diremos, diremos como lo vamos a dar a 0 ahí abajo. De acuerdo, Entonces nos gusta eso. Sigamos adelante y actualicemos. De acuerdo, y así eso se ve mucho mejor, Eso es mucho más legible y no es súper oscuro, pero realmente es así de simple. De acuerdo, entonces eso es todo lo que tienes que hacer para agregar una imagen de héroe muy hermosa a tu sitio web de Azure. De acuerdo, así que sigamos adelante y ajustemos nuestro llamado a la acción. Entonces de nuevo, este va a ser tu logo por aquí en la página web. Y tu llamado a la acción debe ser un llamado a la acción como decirle a la gente que haga algo que debería estar dando la bienvenida a la gente para que diga que debes explicar rápida y fácilmente de qué trata los sitios web y decirle a la gente qué hacer, a dónde ir. Tal vez proporcionar un botón, correo electrónico, formulario opt-in, o simplemente introducir el sitio y tener algún título rico en palabras clave en la página de inicio. Y eso es lo que vamos a hacer aquí. Entonces déjame solo ajustar esto. Así que volvamos a saltar de nuevo a nuestra página de inicio y déjame simplemente deshacerme de esto. Y así llamándolo cafetería, voy a decir, diremos que hagamos café increíble. ¿ De acuerdo? Y así eso ayuda a describir de qué se trata el sitio. Y luego tenemos guías asesoras para elaborar café. Eso se ve bien. Ahora si quieres cambiar los colores, solo puedes venir aquí y debajo aquí es donde está tu configuración central. Entonces si alguna vez, como, si cualquiera que sea tu diseño que viste, necesitas cambiar el texto de negro o gris o algo más. Ahí es donde lo haces aquí, pero voy a dejarlo blanco para mí porque creo que el blanco se ve realmente bonito. Déjame seguir adelante y sólo tienes que dar click en Actualizar. Está bien, así que ahora lo que quiero asegurarme es que asegúrate de que este sea H1. Entonces H1 solo significa encabezado, encabezado, un encabezado, encabezado 2, encabezado 3. Tu etiqueta H1 para mostrar solo sea una frase, esa es H1 porque este debería ser el título de la página. Ahora se trata de un subtítulo, por lo que podemos seguir adelante y convertir esto en un encabezamiento, y podemos convertir esto en un encabezamiento H2. Y luego centraremos el texto ahí mismo. Y sigamos adelante y pinchemos en actualizar. Y déjame recargar la página. Y eso se ve mejor. ¿ De acuerdo? Y así ahora si quieres cambiar el estilo de la fuente, no lo estamos. Eso es muy sencillo con Astra. Simplemente vamos por aquí a la opción de personalizar. Y quieres ir a navegar a donde dice global. De acuerdo, entonces hay que hacer click en tipografía, y luego queremos ir a encabezamientos. De acuerdo, entonces ahora tenemos la configuración predeterminada para todos los encabezamientos. Entonces aquí es donde puedes cambiar tu familia de fuentes de encabezado a otra cosa. Tenemos muchas opciones diferentes. De nuevo, puedes jugar con él como más te convenga. Yo sólo voy a usar Poppins. Muy sencillo. Ahí vamos. De acuerdo, así que eso se ve bien. Por lo que ahora quiero personalizar el H1. Entonces, ¿qué ha venido aquí abajo a cada uno? Familia de fuentes establecida para heredar. Heredar solo significa como si estuviera heredando los ajustes que tenemos arriba ahí arriba. Entonces podemos dejar eso tal como está. Muy bien, Así que ahora quería cambiar un poco la altura de la línea así que la haremos un poco mejor así. Eso mira a la realidad se ve mucho mejor. Lo dejaremos ahí mismo. Se ve bien. Está bien. Entonces ahora normal tal vez quiero que esto sea como semi audaz, eso se ve bien. Y a continuación queremos que los textos sean realmente grandes. Entonces tal vez haga algo así como 70. Y ahora eso se ve realmente bonito. Por lo que tenemos un llamado realmente fuerte a la acción ahí mismo. Haz café increíble. Se ve bien con el subtítulo un poco más pequeño. A mí me gusta la forma en que esto está mirando. Entonces solo voy a seguir adelante y dar clic en Publicar. Está bien, genial. Y así vamos a dar click en la X. Y eso se ve realmente bonito. Y así podemos simplemente dejarlo tal como está. Una cosita que también podrías hacer es hacer clic derecho e ir a Inspeccionar. Y ahora cuando inspeccionas, solo quieres asegurarte de que lo tienes configurado para me guste como se vería en un teléfono. Está bien. Y así siempre quieres asegurarte de que con el equipo de Azure solo cargue tu sitio web en tu teléfono para asegurarte de que todo se vea bien. Porque a veces cuando haces los textos demasiado grandes, se verá bien por ejemplo, una tableta o un portátil, pero cuando estés en tu teléfono, podría ser un poco raro, así que solo asegúrate de que todo se vea bien. Tanto su laptop como su teléfono. Y eso es realmente todo lo que tienes que hacer para personalizar el texto arriba aquí. Ahora con el fin de agregar un botón que sea súper duper simple también, basta con hacer clic en el signo más. Entonces tipeas botón, ¿de acuerdo? Y luego hay un botón, boom. De acuerdo, y luego aquí mismo puedes personalizar el texto del botón. Entonces tienda, diré tienda ahora. Está bien, genial. Entonces ahora quiero tipo de ajustar esto y tener esto un poco centrado. Ahora agregar un límite aquí también es muy fácil. Para que podamos venir aquí y sólo tenemos que navegar de vuelta por aquí. Es click en el signo más, y luego solo quieres teclear algo que diga botón, ¿De acuerdo? Y luego haga clic en botón. Ahí vamos. Ahora el botón, tienes dos opciones diferentes. Entonces si haces clic en el uno, estás editando el específicamente el botón. Si haces clic en el área de bloques, ahora estás editando el bloque. De acuerdo, Así que sólo me preguntaba cómo funciona todo. Entonces si hago clic en el bloque aquí mismo, puedo decir algo como suscribirse, ¿de acuerdo? Diremos suscríbete, boom, así. Ahora estás como, quiero centrarlo una cuadra. Tienes que hacer clic en la sección de bloques. De acuerdo, no dejes el bollo porque vas a estar como, ¿A dónde te mandé? No lo entendí. Qué es Porque tienes que hacer clic en la sección de bloques. Entonces vamos a movernos aquí, luego podemos alinear centro, y luego ya está. De acuerdo, entonces cuando pones el bloque, entonces tienes un montón de opciones diferentes para cómo quieres cambiar el look y la sensación y el estilo del este botón aquí mismo. Por lo que si quieres tener un estilo predeterminado no establecido contorno, solo puedes cambiar las cosas según la tarifa apropiada allí. Por lo que voy a dar clic en Actualizar. Déjame recargar lo mismo. De acuerdo, entonces ahora tengo un botón transparente. Entonces, ¿por qué es eso transparente? Porque he establecido el estilo por defecto está delineado tan rápido y hacer ese relleno. Entonces aquí mismo podemos cambiar el color canta para el botón mismo. Y así otra vez, ¿de qué color es esta imagen de fondo? Necesitas escoger algo que coincida un poco. A lo mejor iré un poco con un negro. Nuestro, ya sabes, nuestro LED, el texto blanco. Haré el botón negro. Ahí vamos. 6. 6 Mensaje de bienvenida: De acuerdo, entonces ahora lo que quiero hacer es seguir construyendo el cuerpo de la página web. Entonces voy a empezar con un bonito mensaje de bienvenida que un poco explica de qué se trata los sitios web. Entonces esto es algo que personalmente me gusta hacer. Me gusta tener un llamado a la acción en la parte superior de cualquiera de mis sitios web de información. Entonces justo debajo de aquí, un rápido párrafo poco de una a tres oraciones que explica de qué se trata el sitio web y un poco más de detalle, pero simplemente volvió a ayudar, escaneable ayuda a captar la atención de las personas y de las personas que saber instantáneamente si este decir es para ellos o no, etc. Y así con WordPress y astra, esto es súper duper simple. Entonces de nuevo, sólo volvemos a nuestra página y todo lo que tengo que hacer es añadir en un párrafo. Por lo que solo tienes que hacer clic en este signo más y solo quieres agregar en un párrafo. Y entonces todo lo que tienes que hacer es simplemente literalmente escribir algo. Eso es todo. Entonces ya me adelanté y escribí algo. Entonces, solo sigamos adelante y hagamos eso. Voy a pegar eso ahí dentro. De acuerdo, entonces ahora quiero que este de aquí sea el título, ¿de acuerdo? Y así no quiero que esto sólo sea un párrafo estándar, así que lo haremos un encabezamiento. Y quiero que eso sea H2. Entonces quiero que esto sea censurado. Ahí vamos. Y sigamos adelante y atrevidos eso. De acuerdo, sigamos adelante y actualicemos y veamos cómo se ve esto. De acuerdo, entonces déjame recargar la página. De acuerdo, así que eso se ve bien. Entonces estás, si te estás preguntando, bueno, ¿cómo agrego velocidades? ¿ Cómo otra vez, cómo lo hago? Entonces no es tan amplia. Hay un par de opciones diferentes que puedes hacer para cambiar eso. De acuerdo, así que primero, de nuevo, para agregar cualquier tipo de espacio, de nuevo, solo tienes que añadir otro espaciador. Entonces otra vez, vamos aquí. Simplemente haremos esto y agregaremos un espaciador. Y ahí vamos. Mueve eso hacia arriba y mueve eso hacia arriba justo ahí. Qué es actualizar eso, ver cómo se ve eso. De acuerdo, así que eso nos ha dado un poco más. Simplemente reduciremos eso solo un poquito, tal vez así. De acuerdo, sigamos adelante y actualicemos eso y echemos un vistazo rápido. De acuerdo, así que eso se ve bien. A lo mejor, ya sabes, lo que sea, ya sabes, puedes ajustarte como quieras, pero así es como agregarías espacio a diferentes elementos. De acuerdo, Entonces ahora en cuanto al ancho de la página web, ¿a dónde vas para cambiar eso? Solo estoy recargar la página rápidamente. Está bien. El cambiar el ancho de la página. Un par de cosas diferentes. En primer lugar, yo regrese a esto. De acuerdo, así que venimos aquí a Ashley ajustes ser un ancho completo en contenido. Entonces si vas por aquí y vas de ancho completo estirado y lo actualizaremos. Ya verás qué pasa como ¿qué se estira el Texas de todo el camino de filo a filo? Eso se ve realmente raro. Entonces lo primero es lo primero, asegúrate de que esté contenido de ancho completo. Y entonces eso significa que está activado ese contenedor. Ahora, puedes ajustar el ancho del contenedor para la página. Para hacer eso, de nuevo, fácil, tenemos que ir a personalizar. Y una vez que haga clic en personalizarlo, se va a abrir. Y podemos venir aquí a global. Queremos venir a donde dice contenedor. Si eres como, ¿qué es un contenedor? Un contenedor es sólo medio como el ancho de la página. De acuerdo, así que ahora mismo aquí podemos jugar en el cambio como queramos. Entonces si queremos que sea realmente amplio, podemos hacerlo. Si queríamos ser un poco más estrechos, podemos seguir adelante y hacer eso. Yo recomendaría algo que no es demasiado ancho, no demasiado estrecho, sólo algo en el medio así se ve bien aquí mismo. Siempre podríamos hacer más grande el texto si quisiéramos hacer algo así. Pero de nuevo, es tu sitio web totalmente depende de ti, lo que quieras hacer. Entonces si quieres que te guste minimizar lo más posible. Y así con esta opción de contenedor, puedes cambiar el contenedor por diferentes aspectos de tu sitio web. Al igual que tenemos la Página, entradas de blog, maquetación, diseño de archivo. Y así puedes cambiar el ancho como quieras aquí mismo. Entonces eso es todo lo que tienes que hacer para cambiarlo. Entonces sigamos adelante y publicamos eso. Algo así como pegamento que se ve. Entonces si voy, un valor predeterminado en realidad es bastante ancho, por lo que son cien, doscientos píxeles. mí sí me gusta mantenerlo un poco como lo vamos a mantener como 900 de una recta y 900, creo que eso es bonito. De acuerdo, entonces vamos a seguir adelante y publicar eso. Y así que eso hace, eso hace que el ancho 900 de plano se dé click en X. De acuerdo, así que ahí vamos. Por lo que ahora tenemos nuestra configuración de pequeño mensaje justo aquí. De acuerdo, Así que ha venido aquí abajo. De acuerdo, Entonces ahora si queremos cambiar el tamaño del texto, Es muy, muy sencillo, así que solo destacamos lo que queremos. Y por aquí, va a tener tipografía. Y entonces solo puedes venir aquí y cambiarte a lo que quieras. Entonces si quieres que sea mediano, solo puedes hacerlo de forma rápida y sencilla o simplemente podrías convertirlo en un tamaño personalizado también. Y entonces, ¿qué es lo que hace que esto sea un poco más pequeño? Diremos 18. Está bien, sigamos adelante y actualicemos eso. Muy bien, recarguemos esto y veamos cómo se ve eso. De acuerdo, así que eso viene bastante bien. De acuerdo, entonces creo que en realidad lo haré un poco más grande. 22. Está bien, bien. Está bien, así que tenemos que todos los anchos establecidos hacen que esto sea un poco más grande. De acuerdo, sigamos adelante y actualicemos eso. Y solo echemos un vistazo rápido para ver cómo se está juntando esto. De acuerdo, así que eso es un poco demasiado grande en realidad. Entonces bajaremos aquí 18, actualicemos eso. Y ahí vamos. De acuerdo, así que eso se ve bien. Está bien. Entonces eso me gusta. Diga, ya sabes, similar tipo de legible, no demasiado pequeño, no demasiado grande. Lo que se ve raro. Y así estamos bien para ir. Por lo que ahora sigamos agregando elementos a nuestra página de inicio. 7. 7 Menú visual: De acuerdo, Entonces lo que quiero hacer es convertir la página principal en una especie de menú visual como. Pienso en los medios visuales es un bonito diseño para cualquier blog, sitio web de estilo orientado a la información. Es un poco como lo que hago aquí en sitio web career pro.com, donde tenemos lo mejor en piezas de contenido que creciendo después de términos muy competitivos, tutoriales, últimas entradas de blog en la parte inferior se convirtieron en email opt-in form, etcétera. Este es un bonito diseño para el sitio web porque introduce el sitio web e introduce el contenido. Entonces, ¿cómo empezamos? Entonces lo primero que tenemos que hacer es añadir un nuevo plugin. Entonces ve a tus plugins, bueno, Añadir Nuevo y quieres encontrar algo de esto es apilable. Ahí vamos. De acuerdo, Así que constructor de páginas apilables, bloques Gutenberg. Vamos a seguir adelante e instalarlo. Ahora si te preguntas ¿qué carajos es Gutenberg? Este es Gutenberg. Esta página, este editor de bloques que hemos estado usando, en realidad se llama Gutenberg. Muy bien, fantástico. Por lo que Gutenberg está instalado. Déjame seguir adelante y recargar la página. Recargar la página sólo porque entonces se activan los bloques o un axón a esto. De acuerdo, así que empecemos. Entonces voy a sumar un poco de título como este. De acuerdo, así que me gusta mantener mis secciones un poco de título ahí mismo, así que es, es escaneable, te llama la atención, etcétera. Así que adelante y haga clic en el signo más. Y si hacemos click en Navegar Todos estos son tus bloques, lo vas a saber. Observe que son bloques de colores brillantes. Estos vienen de apilables. Ahora, la que quiero son columnas. Y entonces lo que hacen las columnas es que solo lo rompe, está bien, se rompe en cuadritos. Podemos agregar contenido. Ahora el ancho de columna por aquí, voy a escoger este en el medio. Voy a hacer de esto un botón y luego este el título. De acuerdo, así que sigamos adelante y sumamos en contenido. Entonces hubo click en párrafo y luego diremos compra y elaboración de cerveza dirá algo así. De acuerdo, Entonces debajo está en nuestra profundidad. Guías en profundidad. Ahí vamos. Ahora voy a hacer de esto una etiqueta H2. Entonces iremos aquí. Y el rumbo H2 se ve bien. Y me quedaré con ésa justo como está. Y sigamos adelante y sumemos aquí un botón. Entonces escribe botón y voy a añadir el botón apilable ahí mismo. De acuerdo, entonces ahora que nuestro botón está negro arriba ahí arriba, queremos que este botón coincida. Por lo que queremos que este botón sea negro también. Y así aquí mismo, en primer lugar, podemos cambiar el texto del botón y dice cualquier botón para acceder, digamos que podemos decir View, todos chicos. De acuerdo, pueden estar bien con este botón. Podrías enlazar a una página de categoría o puedes tener una página dedicada en tu sitio web, sin embargo quieres configurarla para que solo puedas agregar esto. Entonces aquí mismo puedes poner en el Euro que quieras. Está bien, así que ahora cambiemos el color de esto. Por lo que tenemos el color del botón ahí mismo. Voy a hacer este negro. Ahí vamos. Eso se ve bien. De acuerdo, entonces ahora podemos cambiar la tipografía. Yo quiero que la tipografía coincida con el sitio web, así que he estado usando pop-in, Así que simplemente cámbialo a cualquier tipo, sea cual sea el estilo de fuente que estés usando para que coincida. Entonces porque quieres tener como tus fuentes para que todas coincidan, quieres que una fuente sea el cuerpo y luego una fuente para ser tus títulos. Entonces quieres fuentes, no quieres tres o cuatro. No quieres que las cosas sean como un estilo de fuente diferente, etcétera. De acuerdo, así que echemos un vistazo a eso. Entonces me gusta la forma en que se ve eso. A ver si hay algo más que podamos hacer en términos del estilo aquí mismo. Entonces si venimos por aquí, tenemos la gorda del hover y como lo que pasa cuando la gente pasa el mouse sobre el botón. Muy bien, y así tenemos aquí relleno vertical, radio de borde. Entonces si quieres hacer el botón un poco más redondo, podemos venir aquí tal vez como por un poco. De acuerdo, así que sigamos adelante y actualicemos esto. Y sólo echémosle un vistazo, sólo el ojo. A ver cómo se ve. Está bien, así que eso se ve bien. Por lo que preferiría que hubiera un poco más de espacio por encima de este elemento. Me gustaría que esto fuera un poco más grande, audaz, solo destaque un poco mejor. Entonces sigamos adelante y arreglemos eso. Está bien, así que primero lo primero, quiero ir aquí mismo y vamos a sumar un espaciador. De acuerdo, así que agregando nuestro buen espaciador handy-dandy viejo, minimiza eso solo, solo necesitamos un poco de espacio, no demasiado. Dar un poco de espacio para respirar entre los elementos. Ahí vas. Está bien, bien. Está bien, así que sigamos adelante y hagamos esto más grande. Por lo que el tamaño del texto predeterminado, tal vez quiero que esto sea en negrita por defecto. Yo quiero que esto sea tal vez grande. Puedo venir aquí y tener un tamaño personalizado. A lo mejor. Cambiaremos esto por algo así como 45. Está bien, Ahí vamos. De acuerdo, y así podemos tal vez atrevidos eso, ver cómo se ve eso. Adelante y actualicemos eso. Y vamos a recargar esto. De acuerdo, Así que eso es, se ve bien. Creo que tal vez me deshaga de ese tazón que realmente no coincide. Simplemente lo dejaremos así. Déjame sólo ir aquí para deshacerme de eso. Y cambiaremos este ajuste de color a tal vez un gris, y luego iré al color personalizado. Y así yo tal vez quería sólo ser un poco gris, sólo un pellizco Grey. Entonces solo, ya sabes, destaca solo un poquito. Recarguemos eso. De acuerdo, así que eso se ve bien. A lo mejor puedo hacer esto un poco más grande. Iremos con, iremos con 50. A ver cómo se ve eso. De acuerdo, Así que quiero que esto llene un poco más del espacio, así que tiene 54. Está bien. Echemos un vistazo. Está bien, eso se ve bien. De acuerdo, entonces ahora tenemos un bonito mensaje de bienvenida y tenemos un poco de introducción para el título aquí mismo sobre lo que esta sección va a estar debajo aquí en agregar un botón, aquí mismo, este es Lincoln a la página de inicio. Pero de nuevo, puedes cambiar donde quieras que esto vincule. Entonces estoy teniendo este ojo vista todas las guías. Entonces tal vez puedas crear una página dedicada entera en todas las guías que tengas, o podrías enlazar a una página de categoría o lo que sea que tengas esa flexibilidad. Por lo que ahora agreguemos algunas imágenes debajo en el enlace a guías en profundidad. De acuerdo, entonces ahora vamos a estar agregando imágenes específicas para un sitio web que tengan un poco de descripción para acompañarlo. Entonces lo primero que quiero que hagas es bajar aquí, no aquí, ¿de acuerdo? Porque este está asociado a este bloque aquí mismo. Así que asegúrate de seleccionar un nuevo bloque donde esté en su propia sección justo aquí. El motivo es porque esto se divide por la mitad. Por lo que no queremos estar agregando imágenes sólo bajo esta sección aquí mismo. Quieres tenerla sea toda la sección. De todas formas, con apilable porque instalamos bate lo hace muy, muy fácil. Para que podamos venir aquí y podemos ir a decir Cuadro de imagen. ¿ Está bien? Y entonces lo que el cuadro de imagen hace es que te permite exactamente exactamente lo que ves. Se pasa el ratón sobre él y le da un bonito título y descripción. Está bien, Entonces, ¿cómo se agregan imágenes? Por lo que solo tienes que hacer click en la plaza y ahora puedes seleccionar la imagen que quieras. Por lo que ya me adelanté y seleccioné, ya instalé un montón de imágenes en mi sitio para que puedas seguir adelante y en tu propio tiempo y hacer eso. Por lo que voy a añadir estas imágenes de forma rápida y sencilla. Ahí vamos, y ahí vamos. De acuerdo, así que sigamos adelante y hagamos una actualización rápida. A ver cómo se ve eso. Recargar el sitio. Está bien, así que eso se ve bien, así que eso se ve muy bien. Contamos con guías en profundidad. Boom, tenemos diferentes imágenes ahí mismo, y sólo podemos empezar a lanzar un título ahora mismo, aquí mismo. Está bien, entonces, está bien. Comprar dirá comprar, elaborar cerveza. Y luego diremos hechos divertidos en nuestros hechos divertidos, buenos o no signo de exclamación. De acuerdo, entonces ahora por aquí en esta sección es donde puedes editar la forma en que cada bloque se ve bien? Y así venimos, voy a dar click en éste por ejemplo. De acuerdo, así que aquí mismo puedes cambiarlo a los bloques para que sea llano o básico. Puedes venir aquí al estilo. Se puede cambiar la forma en que funcionan las columnas. Entonces si quieres dos o tres, Entonces por ejemplo, como si fueras como, no quiero tres, quiero, bueno, ahí es donde puedes entrar aquí y cambiarlo. Se puede cambiar también la altura. Entonces si quieres que sea un poco más cuadrado o más largo o lo que sea. Entonces creo que me gustaría que fuera un poco más cuadrada al 95. Ok. Ahora el radio fronterizo, está bien, Así que aquí tienes. Se pueden cambiar ligeramente las cosas. Entonces tal vez sólo un poco redondeado, no demasiado contorno de sombra. Entonces si quieres que estas cosas se salgan un poco de la página, puedes darle una sombra. Y ahí tienes. Para que puedas cambiar la forma en que se alinean las cosas, etcétera. De acuerdo, Así que ahora con la sección de imagen, por lo que la imagen grande predeterminada aquí, puedes cambiar cosas específicas como el color de la superposición, por lo que sobre el color de la superposición, obviamente lo que sucede cuando la gente pasa el mouse sobre la imagen. Personalmente me gusta la forma en que es por defecto donde da una bonita sombra, superposición oscura, se ve muy bien. Y así, ya sabes, entonces puedes venir aquí y cambiar el subtítulo y los títulos. Por ejemplo, aquí mismo tenemos el título, por lo que todos los títulos son H4. Y así de nuevo, hay que prestar atención a eso porque este es H2, este es H2. Entonces, ¿cuáles deberían ser estos? Se trata de un subrubro de esta sección. Entonces honestamente como estos deberían ser h3, para ser honesto contigo. Entonces vamos a seguir adelante y cambiar esto, cambiarlos todos a H3. Aquí. Podemos cambiar el tamaño si realmente querías ser odiosamente grande o pequeño. Por lo que podríamos cambiarlo igual que va a ser conseguir 28. Eso se ve bien. Está bien. Podemos cambiar el color de la fuente como queremos aquí. Y así de nuevo, en tu tiempo libre, puedes contar y simplemente saltar aquí y editar las cosas como más te convenga. Y así es realmente simple porque aquí mismo haces clic en esto, entonces eso es justo aquí abajo es donde puedes agregar en una URL. Entonces, por ejemplo, si tienes una página de categoría en la compra estás elaborando cerveza o lo que sea, o simplemente tienes unas entradas de blog específicas a las que quieres enlazar. Ahí es donde se podría hacer esto aquí mismo. Y así podremos deshacernos de mí. Sólo tienes que seguir adelante y actualizar esto. Vamos a echar un vistazo rápido. De acuerdo, así que ahora en la película mouseover CSS subtítulo descripción. Entonces sí tenemos que conseguir un dar sin embargo sí tenemos que dar una breve descripción en un subtítulo si queremos órbita. Elimina eso también. Si de verdad no quieres poner nada ahí, eso también está bien. Entonces puedes venir aquí y simplemente retroceder todo esto y actualizar eso. Y cada cargarlo. Y ya veremos, boom, nada. De acuerdo, Así que totalmente depende de ti. A mí me gusta que surja esa descripción. No estoy loco por el subtítulo, pero sí me gusta la descripción. Tan totalmente a ti, lo que quieras hacer si solo quieres dejarlo llano viejo como este y gente lo pasa por encima y luego se puede enlazar a algo. No se adelantó y hizo eso. Entonces, ya sabes, es tu diseño, tu sitio web, totalmente a ti. Es así como puedes agregar en estos útiles pequeños bloques para que tu sitio web sea visualmente más atractivo. 8. 8 de publicación de blog: Ahora lo siguiente que quiero agregar es nuestro último libro de entradas de blog desde una perspectiva de diseño, creo que sería realmente bueno solo para romper esta sección y luego tener un como un separador de imágenes. Y luego nuestras últimas entradas de blog, creo que eso sería un poco más visualmente atractivo. Entonces sigamos adelante y hagamos eso. Entonces va a ser un poco de la misma manera que agregamos la imagen arriba aquí arriba. Sólo tenemos que hacer lo mismo. Entonces bajamos aquí, vale, así que debajo de nuestras cuadras aquí mismo, queremos venir al signo más y quieres navegar a donde dice portada. Ahora quieres subir una nueva imagen, ¿de acuerdo? Y así ya me adelanté y lo hice. Entonces tengo esta imagen aquí mismo. Obtuve esta imagen de unsplash. Yo lo redimensiono para hacerlo un poco más pequeño. Por lo que voy a seguir adelante y dar click en seleccionar. Ahí vamos. Ahora de nuevo, haga clic en la imagen misma. Rápido aquí, ve a ancho completo. Ahí vas. Ahora es de ancho completo. Y así personalmente lo que haría esta sección aquí mismo es como tal vez vinculado a un producto o curso específico, o tal vez usted tiene, tal vez usted tiene, va a tener una página de recursos o una página de curso en su sitio web. Nos gusta listar los mejores cursos de café en Udemy, Skillshare, etc Como afiliado, lo que sea, o tu propio producto, lo que sea. Entonces solo tecleemos voy a escribir en brecha su pro aprender más. Está bien. Entonces de nuevo, quiero que esto asegúrate de que esto no sea sólo un párrafo. Yo quiero que esto sea un rubro, y quiero que ese sea H2, y quiero que eso esté centrado. Tamaño predeterminado normal, vale, así que solo diremos normal. Muy bien, haremos que esto sea un poco más visualmente atractivo así. De acuerdo, Y así aquí mismo podría resaltar esto y luego puedo hacer esto como un enlace específico y enlazar a una página. Y así no se hace. Sí, definitivamente queremos sumar un poco más. Está bien, así que aprende a preparar un gran café con nuestro, , aprendiendo con nuestros cursos favoritos on, aprendiendo con nuestros cursos de fav o lo cursos, simplemente lo dejaremos simple así. De acuerdo, déjame seguir adelante y dar click en sensor. Está bien, así que eso se ve bien. Adelante y actualicemos eso. Y veamos cómo salió eso. Entonces volvamos a cargar la página. Y ahí vamos. Maravilloso. Por lo que eso se ve fantástico. Entonces tal vez estas superposiciones un poco oscuras. Creo que me gustaría cambiar eso. Entonces otra vez, ¿cómo cambias eso? Tienes que hacer clic en la imagen. De acuerdo, navega hacia abajo. Ve a buscar donde dice opacidad. Bajemos eso de 50. Hagamos tal vez eso como 15 o 14. De acuerdo, sigamos adelante y actualicemos eso una vez que votemos. Está bien, así que eso se ve increíble. Entonces ahí vamos. De acuerdo, entonces ahora tenemos nuestras guías en profundidad. Tenemos una sección donde podemos enlazar a tal vez como un curso como afiliado o algo así. Y ahora es el momento de añadir en nuestras últimas entradas de blog. De acuerdo, así que ahora es el momento de añadir en nuestras últimas entradas de blog. Por lo que personalmente me adelanté y publiqué un montón de posts de blog para los que publiqué ahora mismo. Probablemente no tengas ninguna entrada en el blog, así que puedes seguir adelante y hacer eso en un momento posterior, pero solo quiero mostrarte cómo funciona cuando estés listo para agregar blogposts a la página de inicio. Entonces lo primero es lo primero, necesitamos agregar un título. Entonces esto, tenemos ahí nuestro pequeño título. Tenemos que hacer algo similar justo debajo de ahí, por lo que coincide un poco en el sitio web. Entonces otra vez, sólo ve aquí. Signo plus. Y voy a ir a columnas, ¿de acuerdo? Y así avanzaron columnas y cuadrículas en, y voy a volver a seleccionar esa otra vez. vez voy a dejar esto vacío, pero por aquí voy a añadir en texto, ¿de acuerdo? Y así último últimamente, bien, último, último contenido, lo que sea. Está bien. Entonces ahí vamos. Entonces por lo que veo desde la cuadra, bien, ahí tienes. Lo que sea. Ahora, puedes cambiar eso a lo que quieras, sea que coincida con tu sitio. Entonces otra vez, H2. Ahora vamos a que coincida. Entonces, vamos a venir aquí. Talla personalizada 54 y es negrita. De acuerdo, así que vamos a hacer eso. Entonces voy a seguir adelante y audaz es Boehm. Voy a decir grande, vamos a hacer este 54 para que la fuente coincida con la de arriba. Ahí vamos. De acuerdo, y así ahora quiero venir aquí y agregar cambiar esto. ¿ De acuerdo? Y entonces, ¿qué hicimos aquí? que hicimos esto un poco más claro, gris como un no negro, no negro jet-black, pero sólo algo un poco más ligero. Así que ven aquí, ve ese color personalizado. Ahí vamos. Y solo haz algo así. De acuerdo, ahí vamos. Entonces ahora vamos a recargar para decir asegurarnos de que todo esté en su lugar. Está bien, así que está bien. Entonces de nuevo, como si quieres tener más espacio entre este elemento o este elemento, puedes seguir adelante y hacer el separador. Creo que eso se ve bien. Por lo que de todos modos, voy a añadir en las últimas entradas del blog. Entonces otra vez, no queremos poner este porque este bloque, vale, esto, esto se está ajustando para esta sección ahí mismo. Queremos la nueva sección ahí mismo. De acuerdo, Entonces ahora ¿qué es realmente agregar en nuestras entradas de blog? Por lo que de nuevo, asegúrate de estar en una nueva sección y un nuevo bloque. No quieres estar editando sólo esta sección. Así que vamos a seguir adelante y hacer clic en el signo más y solo quieres escribir en post. Ahí vamos. Posts hueso. Ahí vamos. Se ve genial. Entonces vamos al estilo y voy a cambiar esto por tal vez una columna de cuatro, ¿de acuerdo? Y me gusta mucho la forma en que se ve. De acuerdo, así que esto es todo el contenido demo que acabo de subir de forma rápida y sencilla. Y así definitivamente recomiendo deshacerme de la mayoría de estas cosas. Entonces, sólo vamos a meternos en ello. Está bien, Así que la imagen característica, la imagen característica es esta. Queremos la categoría de imagen de característica arriba allá arriba. Sí, eso es un poco útil. O sea, totalmente a ti si quieres tener la categoría mostrada o no. Entonces creo que voy a dejar eso, pero quería categoría para ser negro, no azul. Está bien. Y ahora tenemos el título ahí mismo. Sí, queremos titularlo para que se muestre. Absolutamente. Entra aquí, cambia la tipografía, hazla para que coincida con tu página web. 25, eso está bien. De acuerdo, Así que vamos a deshacernos de eso. ¿ De acuerdo? De acuerdo, Ahora, lo siguiente que tenemos que hacer es h3. Entonces eso es bueno porque esa es nuestra etiqueta h2 justo ahí. Entonces estos deberían ser h3 está bien. Entonces volvamos y volvamos a hacer clic en el bloque de nuevo. Y Ok, entonces ahora minimizamos ese extracto. No quiero un extracto. Excerpt significa como el texto que viene debajo, eso es completamente inútil. Eso es minimizar esa meta-descripción. Mostrar autor, sin mostrar fecha, Sin Mostrar comentarios. No, en realidad no me importa nada de eso. Está bien. Por lo que ahora queremos cambiar el color del texto a negro. ¿ De acuerdo? Está bien, minimicemos eso. Perdón, ¿Qué le viene al título? Parece que es que no lo sé, negro. Ahí vamos. De acuerdo, y así entonces tenemos el enlace Read More justo ahí. Tan personalizado leer más enlace. Por lo que podemos decir Haga clic para aprender más, leer más, lo que sea. O si no quieres nada, solo puedes deshacerte de él. Simplemente puedes hacer clic en eso y luego la gente puede hacer clic en el título de las entradas del blog para ver la pieza de contenido feudo. Por lo que de todos modos, sigamos adelante y pinchemos en actualizar. Y recarguemos lo mismo y veamos cómo se ve eso. Muy bien, Tan genial. Por lo que ahora tenemos enlaces a unas entradas de blog específicas. Entonces otra vez, si quieres deshacerte de la categoría totalmente a ti, creo que me voy a deshacer de la categoría yo típicamente, como se puede ver más en Web, digamos crear protocolo, personalmente solo me gusta mantener las cosas súper duper simples. Por lo que me gusta tener, para mí, me gusta sólo tener la imagen y el título personas que dan clic en la pieza de contenido y meten más en ella. Entonces los cargamos. Y sí, creo que eso se ve genial. Entonces tal vez si podemos hacer que esta fuente sea un poco más pesada, es como delgada y simplemente no coincide también. Por lo que fue sólo saltar de nuevo al título. Está bien. Entonces el tamaño, tal vez podamos hacerlo del tamaño un poco más pequeño. De acuerdo, y vamos a la tipografía y el valor por defecto de peso dirá negrita. Veamos cómo se ve eso. Haz que el texto sea un poco más pequeño, atrevido. Ah sí, eso se ve mucho mejor. De acuerdo, entonces ahí vamos. Por lo que ahora tenemos nuestras guías en profundidad. Boom, tenemos nuestra pequeña sección donde podemos promocionar como un enlace a un producto afiliado, etcétera. Y ahora tenemos nuestras últimas entradas de blog. Y así terminemos la página de inicio con puedo enviar por email formulario opt-in o alguna llamada final a la acción. 9. 9 correo electrónico: Está bien, así que sigamos adelante y sumamos en una última llamada a la acción y a la imagen justo en la parte inferior, sentados justo encima del pie de página. Entonces definitivamente aquí es donde los spots de conversión más altos en un sitio web porque la gente golpea tu sitio web y luego se desplazan hacia abajo y luego llega al fondo. Tener algo para ellos, tener un llamado a la acción, dirigir a la gente en algún lugar, lo que sea. Está bien. Podría ser un producto de formulario de email opt-in sobre mí, lo que sea. Es sólo darle a la gente algo que hacer cuando golpean el fondo. Podrías dejar justo el blog aquí, eso está bien, pero definitivamente es mejor solo tener algo. Por lo que el proceso va a ser exactamente el mismo que agregar esta imagen y agregar esta imagen. De acuerdo, así que vamos a llegar a ello. Por lo que volveremos a saltar a nuestro editor, haga clic en el signo más, y queremos agregar en una portada. Y así ya me adelanté y descargué esta imagen de granos de café que obtuve de Unsplash. Y así solo vuelve a obtener tu propia imagen, como redimensionarla. Entonces es un 2000 para el 2000, no demasiado grande. Muy bien, así que vamos a asegurarnos de que esto sea ancho completo y ahora podemos escribir aquí nuestro llamado a la acción. Entonces diré como conseguir nuestro curso de 377 días sobre cómo hacer la mejor cerveza fría que hayas tenido. A partir de ahí vamos. A lo mejor lo hará, tal vez tomaría este curso gratuito de siete días de siete días. Yo tomaré eso y lo atreveré. Entonces ese tipo de popa un poco. Está bien, sigamos adelante y pinchemos arriba D. Recargamos la página y veamos cómo se ve eso. Sí, eso se ve fantástico, Genial. Así que en realidad me gustó mucho la forma en que esta superposición mira a los granos de café donde está oscuro y solo se ve muy bien. Ahora necesitamos agregar un formulario como un email opt-in, lo que sea. Entonces, sea cual sea el proveedor de servicios que quieras usar, esta es solo mi cuenta demo para kit de conversión, pero esto funciona igual con cualquier tipo de proveedor estar en Lake Miller way, MailChimp, un weber, etcétera. Y así sólo necesitamos conseguir un formulario. Entonces voy a usar el formulario en línea ahí mismo. Y luego voy a ir por aquí con Claire. Yo voy a elegir este. De acuerdo, Así que ahora aquí dentro de tu editor de correo electrónico, puedes cambiar las cosas como quieras. Como le parezca conveniente. Ya sabes, puedes venir a la configuración y simplemente jugar con todo. Esto no es convertir kit tutorial, así que sólo voy a dejarlo como es así. Y así de todos modos en realidad déjame simplemente seguir adelante y cambiar ese color de botón sólo hará que sea algo un poco más. Ahí vamos. De acuerdo, entonces iré a incrustar. Ahora queremos comerme en HTML. Y sé que dices, Oh, pero hay WordPress, bueno, tienes que descargar el plugin de kit de conversión. Yo sólo voy a usar el HTML. Está bien, vamos a hacer clic en eso. Copia. Ahí vamos. Está bien, así que ahora queremos saltar de nuevo aquí. De acuerdo, entonces ¿qué quiero agregar en signo más? Tengo HTML, tipo en espuma HTML, clic derecho pegar. Está bien, sigamos adelante y previsualice. Entonces estás como, Bueno, David, es un apagado a la izquierda. Te gusta cómo lo haces centrar? ¿Al igual que qué carajo? De acuerdo, fácil. Y ve aquí. Y vamos a, volveremos al formulario HTML. Está bien, así que tendré que hacer es teclear sensores. Así que está bien, triángulo mirando cosa centro. Está bien, ahí vamos. Y luego la última etiquetada, por lo que estos se llaman etiquetas chicos. De acuerdo, así que ese es el texto central. Por lo que tenemos centro ahí mismo, llegar al final mismo, final colectivo en una etiqueta de cierre. De acuerdo, ahí vamos. Haga clic en Vista previa. Ahí vas. Ahora está centrado. Vamos a seguir adelante y dar click en Actualizar. Volvamos aquí y recarguemos. Y eso se ve genial. Entonces sí, la página de inicio se ve fantástica. Bueno, guías de mensajes de bienvenida. Boom, como un marketing de afiliados justo ahí tal vez desde el blog, luego email opt-in formulario sentado bastante en la parte inferior de nuestro sitio web. 10. 10 Menú Favicon de logotipo: De acuerdo, así que ahora en términos generales, tenemos nuestro diseño de página de inicio correctamente. Así que arreglemos el encabezado y arreglemos el pie de página ahora. Entonces vamos a empezar con el encabezado. Entonces lo que necesitamos hacer es crear un logotipo para nuestra página web. Y un sitio web que personalmente me gusta crear logotipos rápidos simples es en realidad canva.com. Y así voy a estar usando la plantilla de miniaturas de YouTube de enlace profundo. Podrías usar la plantilla que quieras. No es tan importante. Por lo que queremos solo entrar aquí y solo usar las herramientas disponibles para crear un logotipo. Entonces voy a ir al texto y voy a ir a encabezarme. Y voy a estar llamando para decir como coffee house, como vamos a fingir que tenía como coffee house.com o el coffee house.com, lo que sea. Muy bien, entonces tenemos nuestro título aquí. Y primero lo primero, queremos el partido del Fontan. Por lo que quería hacer Poppins negrita. De acuerdo, ahí vamos. Entonces solo haré esto un poco más grande. Ahí vamos. De acuerdo, así que ahora sólo podemos dejarlo como textos, pero podríamos ir a agregar algo. Entonces acude a elementos. Escribiré algo así como café y veré qué sale. De acuerdo, vamos a pasar por esto y sólo echemos un vistazo rápido. Ah, eso se ve fantástico y es gratis. Fantástico. Entonces algunas de estas sí tienes que pagarlo y cuando cuestan como un dólar, entonces, ya sabes, es tu logo. Entonces si crees que es importante, abre la ley y gasta un dólar para conseguir los gráficos que necesitas. Pero éste en realidad está liberado, así que solo puedo seguir adelante y usar eso. Entonces haz que eso se vea así. Está bien, bien. Y así una cosa quiero agregar 2s, tal vez como una línea debajo de eso. Entonces vayamos aquí y vayamos a la fila y veamos qué sale. Genial. De acuerdo, Entonces creo que en realidad voy a sumar en este gratis aquí mismo. O sea, lo haré un poco más pequeño para que la mentalidad no sea tan gruesa y pesada. Muy bien, así que puré a la izquierda. Muy bien, entonces vamos a expandir eso todo el camino para cubrir la palabra. De acuerdo, así que déjame minimizar eso. Creo que me gustaría hacer eso un poco más grande. Ahí vamos. Está bien. Está bien. Entonces vamos a mover eso allá arriba. Y bueno. Entonces me gusta la forma en que se ve. Entonces solo reduzca eso ahí. Y hemos reducido eso a tal vez ahí. Sí. De acuerdo, así que eso se ve bien. Entonces lo primero que tenemos que hacer es ahora descargar la imagen. Entonces descarga como PNG. Png significa que esa va a ser la imagen de mayor calidad guardada. De acuerdo, así que solo arrastremos y soltemos eso a nuestro escritorio. Ahora lo primero que tenemos que hacer es cortar todo ese espacio en blanco. Entonces iremos a Editar imagen. Ahora de nuevo, podrías hacer esto con cualquier editor de imágenes que quieras. Yo sólo voy a recortar la parte superior hacia abajo justo ahí. No necesitamos todo ese espacio en blanco ahí. No necesitamos todo este espacio en blanco por aquí. Lo mismo con esta zona por aquí. Boom. Y nos desharemos de eso ahí mismo. De acuerdo, Así que toma un poco más, Eso es hop justo ahí. Está bien, bien. Está bien. Ahora ve a redimensionar, y queremos redimensionar nuestro logo. Y el logotipo no debe ser tan grande. Al igual que esto literalmente significa ser como 200 y algo pixeles como logotipos son pequeños, ¿de acuerdo? No necesitas algún logotipo grande complicado. Está bien. Es 260. Está bien, genial. Sí, Literalmente eso es lo que se ve genial. Por lo que el rápido el x voy a dar click en Guardar. Ahora el tema es que el logo es como tiene un fondo blanco. Por lo que vamos a utilizar un servicio llamado Remove BG, eliminado RBG, por lo que eliminar fondo. Fácil. Vayamos aquí. Sube tu imagen. Boom, boom. Hecho. Está bien. Ahora esto utiliza el aprendizaje automático para eliminar automáticamente el espacio en blanco. Ahí vamos. Podemos descargar nuestro logo, acuerdo, y el arrástrelo y soltarlo ahí. Déjame ir a Renombrar logo de la cafetería. Ahí vamos. De acuerdo, así que ahora en realidad agreguemos nuestro logotipo a un sitio web así que tenemos que ir a Personalizar. Oh bien, y queremos ir a Global, y luego queremos ir a arriba no global. Nosotros queremos ir a cabecera. Ahí vamos. De acuerdo, así que queremos navegar a la identidad del sitio, y aquí mismo es donde podemos subir un logotipo. Entonces vamos a seguir adelante y seleccionar Logo y arrastrar y soltar o logotipo en su lugar. Entonces conseguimos 260 por 53. Eso se ve bien. Los textos alt sólo dirían que es el logotipo. Haga clic, haga clic en Seleccionar. Está bien, déjame llegar justo ahí, Crop Image y ver cómo se ve eso. Está bien, así que eso se ve muy bien. Ahora estás como, Espera, ¿por qué dice Mi WordPress? Bueno, sólo tengo que quitar eso. Entonces ven aquí, muestra un título. No, Ahí vamos. Por lo que ahora se ha quitado el logotipo. Está bien. Entonces ahora si quieres que te guste hacer más pequeño el logo, etcétera, lo que tienes que hacer es otra vez, solo vuelve aquí. Y de nuevo, solo edita de nuevo tu imagen y solo hazla más pequeña como te parezca. Entonces si quería cambiar eso y hacerlo aún más pequeño, como diremos, diremos tarde al 26, ¿de acuerdo? Solo tienes que entrar aquí, editar la imagen. Y así de nuevo, juega con eso hasta que estés contento con la forma en que tu logotipo específico busca tu sitio web. Creo que eso se ve bien. Voy a dejarlo así como es así. Y eso es todo. Entonces así es como se agrega un logotipo. Por lo que a continuación vamos a estar editando nuestro menú. De acuerdo, así que sigamos adelante y ajustemos nuestro menú ahora porque esto está bien mirando, pero podemos hacerlo mucho mejor. Entonces Vamos a entrar en nuestro panel de WordPress, vaya a los menús de Apariencia Goodson. Ahora en realidad tenemos que establecer un nuevo menú porque ahora mismo tenemos un menú primario y un menú de pie de página. Tenemos esas dos secciones donde podemos agregar un menú, pero no tenemos menú. Entonces, ¿cuál es genial? Entonces solo llamaré a este menú primario y me aseguraré de que este es el menú primario seleccionado ahí mismo. Vaya, vaya en click, haga clic en Crear menú. Ahí vas. De acuerdo, Así que ver todos. Y añadiré en la página del blog. Y seguiré adelante y guardaré el menú. Y recarguemos esto. Está bien, se ve fantástico. Está bien, así que sigamos. Entonces vamos a personalizar esto un poco más para que podamos ir por aquí y dar click en personalizar. De acuerdo, entonces primero lo primero. Entonces si venimos a cabecera y luego al menú principal, aquí es donde tenemos opciones adicionales para el menú. Entonces por ejemplo, Asch es realmente útil porque el último elemento del menú, si quieres agregar en un botón, ahí tienes, entonces puedes cambiar el color y jugar con él como quieras. O puedes agregar en una función de búsqueda, ¿de acuerdo? O puedes agregar en un widget lo que quieras. Entonces voy a llevar a la función de búsqueda ahí. Ahora pueden notar que es azul. El motivo por el que es azul es que porque todos los hipervínculos en la página web están configurados para ser el color azul. Y así puedes cambiar los colores de los enlaces, pero que este artículo va a ser azul todo el tiempo dependiendo del color que elijas. Entonces, de todos modos, vamos a navegar por aquí. Globales, colores debajo, colores base, color de enlace, para que cuando el color es azul, así que si quieres cambiarlo por otra cosa, aquí es donde un poco puedes saltar a tu propio sitio web y tipo de cambio de colores alrededor. Entonces tal vez haga algo un poco más. Ves, quieres algo que se mezcla en un poquito para que realmente no coincida. Entonces solo manténgalo bien, solo lo mantendré azul así. Eso es sutil, está bien. Entonces déjame dar click en Publicar, ¿verdad? Entonces lo siguiente, lo siguiente es, no me gusta lo delgado que es ese texto. Y así esta es una especie de ajuste de Astra Pro personalmente con el fin de que los elementos del menú arriba allá arriba sean audaces. Ya sabes, CSS, en realidad puedes simplemente acercarte, cambiarlo tú mismo. Y así tengo un poco de CSS que acabo de escribir. Por lo que su cabecera principal, menú, elemento de menú, tamaño de fuente, pesos de fuente. Y así podemos simplemente agregar esto a nuestro CSS personalizado. Ahora, si pagas por Astra Pro, puedes ajustar el menú Solo de forma rápida y sencilla. Si no te gusta tienes la versión gratuita como yo, entonces solo tienes que hacer esto para que el elemento del menú sea un poco más WordPress. Interesante, poco adelante y sumar en sus propias marcas R1 terminó. Entonces déjame solo tal vez esto al abrir mi logo y ahí mismo, voy a hacer la taza de café. Tengo la tela puesta por lo que minimizaremos eso. Entonces eso parece, está bien, eso se ve bien un desenlace. Y en realidad ves que algo más, como decir eso como el ícono, Ahí vamos, vale, y lo guardo en mi escritorio. Ahí vamos. No Ahorre. Está bien, así que lo siguiente todo lo que tenemos que hacer es ir a personalizar. Y solo necesitas navegar de nuevo a donde cambiaste tu encabezado. Entonces vamos a Cabecera, digamos identidad. Por lo que tenemos nuestro logo ahí, diga ícono aquí mismo. Haga clic en eso, arrástrelo y suéltelo en su lugar. De acuerdo, haga clic en seleccionar. Eso se ve bien. De acuerdo, haremos click en Recortar imagen. Y ahí vamos. Por lo que ahora tenemos un bonito ícono para asociar nuestra marca. 11. 11 sobre la página de contacto: Página razonable para su sitio web. Por lo que su sitio web sí necesita una página sobre. Un enlace a la página Acerca de debe ir en el menú principal en la parte superior o en el pie de página en la parte inferior de su sitio D Acerca de la página es sobre el sitio web. No se trata de ti. Deberías incorporar por qué personalmente tienes la autoridad para escribir este sitio web, pero a nadie le importa de ti de doble página, es como de qué se trata este sitio web? Entonces, de todos modos, sigamos adelante y creemos una página sobre. Entonces ve a agregar nuevo. De acuerdo, así de nuevo, como pueden ver, como, me gusta decir algo como bienvenida a la página web, etcétera, etcétera. Entonces déjame seguir adelante y hacer eso. Bienvenido a la cafetería. Está bien. Está bien. Por lo que ahora queremos asegurarnos de que el documento sea el dicho sobre. No queremos que eso sea como una URL larga. Sólo queremos cambiar eso para que sea sobre, ¿de acuerdo? De acuerdo, así que sigamos adelante y pinchemos en Publicar en realidad. Por lo que quiero mostrarles un par de configuraciones diferentes. Entonces, sólo vamos a abrirla. De acuerdo, así que ahora mismo, por defecto tus páginas tienen una barra lateral. Yo personalmente, Depende totalmente de ti si quieres o no tener una barra lateral en las páginas, yo personalmente no lo haría. Y así con Azure, puedes un poco diseñado a medida cada página al igual que hiciste la página de inicio, lo cual recomendaría personalmente solo seguir el mismo proceso. Por lo que vengo aquí abajo a los atributos de página, por ejemplo. Y quieres venir aquí a la barra lateral. Podría tener que no sea una barra lateral, Ok, Entonces encabezado transparente, desea habilitar el encabezado transparente. Y luego esto, quieres desactivar el título igual que hicimos, exactamente como lo hicimos para la página de inicio. Así que desactiva el título, vale, entonces ven aquí, haz clic en el signo más. Ir a cubrir. Ahora ve a nuestra Mediateca por ejemplo, usemos esa imagen que usamos anteriormente. De acuerdo, vamos a dar click en esa. Y otra vez, vaya a esto, vaya a lleno con un anexo, diga como bienvenido a la cafetería. Está bien. Y así, ya sabes, vuelve aquí, tal vez pueda cambiar esta superposición a algo un poco como diferente o como un color verde o lo que sea, solo dale a la gente así que están en una sección diferente del sitio web, tal vez un poco más naranja, algo así. Y así, y luego justo aquí abajo, podemos seguir agregando en texto, como va el texto, va aquí. Y vamos a dar click en Actualizar. Está bien, y luego déjame abrir esta página. De acuerdo, entonces ahora podemos tener una bienvenida a la cafetería y luego simplemente seguir el mismo proceso que hicimos para la página de inicio. Ahora recomendaría hacer esto para cada una de sus páginas, como su página sobre, página contacto, etcétera. Porque puedes hacerlo realmente hermoso, sitio web de aspecto impresionante de forma rápida y sencilla haciendo esta una página de contacto para tus sitios web. Entonces seguí adelante y ya un poco salté el encabezado de nuestra página Contáctanos. De nuevo, sólo tienes que seguir este recorrido para la página de inicio. Enviando la imagen, etcétera. Entonces lo que tenemos que hacer ahora es que quiero agregar en un formulario aquí mismo que la gente pueda simplemente llenar rápida y fácilmente. Y entonces, ¿cómo hacemos eso? Entonces lo primero es lo primero, vamos a pasar por la página de contacto. Por lo que la página de contacto, absolutamente necesita una página de contacto. El punto de una página de contacto es proporcionar una forma para que las personas te envíen un mensaje. Por lo que debes enlazar a como tu página de Facebook o Instagram. Das un poco rápido bio sobre como lo que la gente debería esperar. Debe proporcionar un formulario. Todas esas cosas buenas deben ir dentro de la página de contacto y también de la estructura de URL. Personalmente lo dejaría como contextos slash contacto. ¿ De acuerdo? Y así entramos aquí otra vez. Para que puedas de nuevo, así que tengo el título de la página oculto y vamos a ir debajo de aquí a permanente, así que está bien, sólo cámbialo y haz que diga contacto. Ahora quieres asegurarte de que vengas aquí abajo y ajustas tu información según corresponda. Por lo que cambiaría esto a algo así como la página de contacto de la cafetería. Entonces puedo pegar separados como necesito ponerme en contacto, interrogación, lo que sea, algo así. Entonces sigamos adelante y actualicemos eso. Está bien. Por lo que cuando estás solo de seguir, sintió configurado esta página según corresponda. De acuerdo, Así que agreguemos en un formulario justo debajo de aquí. De acuerdo, así que para hacer eso, voy a tener que navegar de nuevo a WordPress. Y vamos a ir a Plugins y luego agregar un nuevo plugin que quiero instalar se llama formularios WP. De acuerdo, entonces formularios WP, es bueno instalar. Y vamos a dar click en Activar. Fantástico. De acuerdo, entonces vamos a crear nuestra primera forma. Y queremos ir a simple contacto. Crear un formulario de contacto simple. De acuerdo, genial, así que ahora podemos editar cada una de estas secciones. Voy a cambiar esto y sólo hacer esto simple. ¿ De acuerdo? No hace falta tener nombre y apellido. Simplemente lo mantendremos simple. A mí me gustó la forma en que se ve eso, a mí me parece bien. De acuerdo, así que quieres navegar a donde dice Configuración, y luego quieres navegar a notificaciones y a notificaciones aquí mismo, enviar a dirección de correo electrónico. Aquí es donde se puede cambiar qué correo electrónico que se te envía. Por lo que en este momento se envía a, enviar al correo de administración. Si quieres, cambia esto en el ratón, solo salta aquí y cámbialo como quieras. Y eso es más o menos. Así es hacer click en Guardar e ir a incrustar. Está bien, así que ahora wb forms of tiene esto, estos dos bollos un poco te caminan a través de él. Creo que es un poco molesto. Personalmente solo me gusta usar un código corto. Entonces da click en Usar código corto. Ahí vamos. Tenemos nuestro código corto. Haga clic derecho. Copia eso. De acuerdo, entonces volvamos a nuestra página de contacto. Podemos ir a editar página aquí mismo. Está bien, así que aquí otra vez, daría algunos contextos como hey, gracias, gracias por su interés en el sitio, etcétera, etcétera, etcétera. De acuerdo, entonces ahora queremos dar clic en el signo más y quieres escribir código corto. Ahora, código corto ahí. Después haga clic derecho, pegue. Así de simple. Haga clic en Actualizar. Muy bien, así que sigamos adelante y recarguemos esta página y veamos cómo se ve esto. Muy bien, Genial. Entonces, ya sabes, de nuevo, desarrolla esto un poco más apropiadamente y luego la forma se ve bien y funciona. Entonces de nuevo, déjame solo mostrarte la página de contacto para un sitio web create product com. De nuevo, eso es sólo mantenerlo súper duper simple ya que tengo o amigos, bla, bla, bla. También puedes ponerte en contacto con nosotros a través de nuestra página de Facebook. Preguntas, afiliado, asociaciones de afiliados, etc. Aquí está la forma, philadelphia, y estás bien para ir. Podrías hacer lo mismo aquí mismo. Entonces, ya sabes, de nuevo, como, si estás como, Hey David, como demasiado cerca de la parte superior, como hago yo, nuevo, tienes que sumar en tu espaciador. Ok, entonces íbamos al espaciador, luego boom arriba, ahí arriba. De acuerdo, Entonces si quieres tener un poco más de espacio para respirar entre tu párrafo de texto en esta imagen aquí mismo. Simplemente puedes hacer eso rápida y fácilmente así. Y así es más o menos como me acercaría a la página de contacto. Basta con seguir el ejemplo. Poco párrafo de introducción rápido vinculado a Instagram, Facebook, de cualquier forma de otra forma la gente puede ponerse en contacto contigo. Tu correo electrónico, número de teléfono, lo que creas que es importante. Y eso es todo. Eso es todo lo que tienes que hacer para tirar en la página de contacto. 12. Diseño de 12 pies: De acuerdo, así que ahora era ajustar el pie o en nuestra página web. Entonces el pie de página es una sección donde como las revelaciones van, política de privacidad Términos de Uso, esas páginas tipo. Entonces entrémonos en ello. Entonces en primer lugar, ¿en qué hacer click en personalizar? Y cuando haces click en Personalizar con Astra, en realidad tienes muchas opciones diferentes para tu pie de página. Entonces, en primer lugar, tenemos widgets de pie de página. Por lo que en este momento los widgets de pie de página están desactivados. Pero si queremos encender los widgets de pie de página, podemos seguir adelante y hacer eso. Entonces aquí mismo puedes agregar diferentes artículos si estás como, whoa, ¿de dónde carajo está siendo controlado esto? personal, tienes que ir a widgets de apariencia y luego a un área de widgets de pie de página 12341234. Entonces si quieres seguir adelante y agregar cosas aquí, puedes seguir adelante y hacer eso. Personalmente no voy a estar usando widgets por solo querer instruirte. Por lo que solo tienes control total y opciones sobre lo que quieres hacer. De acuerdo, así que vamos a Footer Bar. Ahora. A mí me gusta esto, ya sabes, personalmente los guardo. Otra vez. Yo todo lo que guardo mi pie de página es lo más sencillo posible. Entonces en primer lugar, quiero cambiar este fondo. Entonces no soy lancha loca. Yo quiero que este sea un bonito color negro. Está bien. No quiero que esto sea como un color raro. Negro, gris negro. De acuerdo, Así que arriba arriba aquí es donde podemos cambiar las cosas. Y así volvamos a salir. Vamos a deshacernos de todo este C. Ver, para que podamos decir derechos de autor. Podemos decir derechos de autor, cafetería. ¿ De acuerdo? Y entonces lo que personalmente quiero hacer es añadir en mi política de privacidad Términos de Uso todas esas páginas misceláneas ilegales. Entonces llegamos a navegar de nuevo a nuestras páginas y tenemos que seguir adelante y crear esas páginas. Pero quiero crear esos enlaces a esas páginas primero. Entonces déjame solo entrar aquí y escribiré en la política de privacidad. Ellos GO términos. Ahí vamos. Y diremos así, cierres, lo que sea. Está bien, así que sigamos adelante y resaltemos esto y lo doblaré. Y luego vamos a añadir en un enlace y vamos a crear un nuevo enlace. ¿ De acuerdo? Por lo que solo puedes agregarlo en nuestros sitios. Y llamaré a esta página privacidad. Y luego volveré a hacer esto para esta página aquí mismo, negrita, y luego estos términos. Ahí vamos. Y lo último es la divulgación. Impresionante. Ahí vamos. De acuerdo, ahora tenemos nuestros enlaces. Entonces ahora venimos aquí y queremos editar como HTML. Ahí vas. Entonces solo tomas esto arriba. Ahí vamos. Ahí vamos. Ahí vamos. De acuerdo, copia BOM, vuelve aquí, pega. Y ahí vamos. Entonces ahora tenemos un pie de página bonito donde todo se acaba de agregar sutilmente. Se ve bien. A lo mejor podemos venir aquí adentro, deshacernos de este separador de ahí. De acuerdo, así que sí, creo que eso se ve bien. Por lo que ahora tenemos nuestros términos de política de privacidad en divulgación. Vamos a seguir adelante y dar click en Publicar. Y ahí vamos. Entonces para un blog completamente nuevo, eso es lo que definitivamente recomendaría empezar, solo crearé algo rápido y sencillo al punto a medida que tu sitio se desarrolle con el tiempo, si quieres saltar hasta que puedan crear múltiples widgets y tener una variedad de diferentes páginas enlaces en el pie de página, puedes seguir adelante y hacer eso. Pero para un sitio completamente nuevo dentro de eso no tiene mucho contenido. Yo sólo haría algo como esto. Mantenlo súper duper, simple. 13. 13 páginas jurídicas: Tus páginas legales. Entonces ahora que hemos puesto las páginas legales en el pie de página, realidad sí tienes que seguir adelante y crear estas páginas porque va a salir como página no encontrada. Entonces estas son en realidad páginas que necesitas entrar y publicarlo. Así que ve a Páginas, bueno, Añadir Nuevo. Y luego solo quiero que te asegures de que la página que vas a agregar. Entonces por ejemplo, vamos a, vamos a la política de privacidad aquí. De acuerdo, Así que por defecto, WordPress viene con su propio borrador de la política de privacidad predeterminada. Y así el enlace que utilizo era la privacidad en el pie de página justo aquí. Entonces, solo sigamos adelante y cambiemos esto. Volver hacia fuera la URL Slug, que sea privacidad. Y entonces podemos simplemente dejarlo así. Voy a dar click en publicar. Ahí vamos. De acuerdo, entonces por ejemplo, ahora recarga para decirlo y tenemos una política de privacidad, ¿de acuerdo? Y así solo necesitas pasar y hacer eso por cada una de esas páginas. Definitivamente necesitas una política de privacidad en una página de términos y términos de uso. Está bien. Y así el objetivo de las políticas de privacidad solo para dar a conocer cómo sus sitios web recogieron datos e información. Y entonces los términos es como, cuáles son los términos de servicio que las personas acuerdan acatar al visitar tu sitio. Y entonces la revelación debería ser sobre cualquier cosa que, ya sabes, cómo tu ensayo gana dinero, por ejemplo, con cualquier conflicto de intereses, ese tipo de cosas pasarían por debajo de las revelaciones. Pero como mínimo, definitivamente necesitas privacidad en términos. Eso es más o menos. Y luego tienes que simplemente entrar aquí en manualmente crea estas páginas tú mismo. ¿ De acuerdo? Entonces otra vez, vuelve y entra aquí, Añadir Nuevo, y de nuevo, revisa el enlace, comprueba el enlace que creamos. Entonces esto se llamaba términos, ¿de acuerdo? Y así se le llama términos ahí. Para que puedas cobrar términos, términos de servicio, ¿de acuerdo? Términos, condiciones dash. La gente también llama a esta página, lo que sea. Está bien. Entonces hay que crear una página. Y tengo otra guía en mi sitio web, pro creativo que puedes consultar solo páginas legales de Google, web say creative, bro. Y deberías poder encontrarlo, cómo escribir tus páginas legales y la verdadera guía para principiantes, otra vez, no soy abogado y que definitivamente quiero consultar con un perito jurídico conforme crece tu negocio. Pero solo para ayudarte a empezar, ya sabes, solo crea algo. Nuevamente, no es tan importante con un sitio web completamente nuevo que no tiene contenido, pero a largo plazo, es algo que definitivamente necesitas cuidar. Entonces solo quiero que estés al tanto de eso. 14. 14 de diseño de blog: De acuerdo, así que ahora es el momento de editar nuestros blogposts y la página de archivo del blog. Entonces seguí adelante y agregué, sólo tienes que añadirlo la página sobre y la página Contacto al menú y seguir adelante y hacer eso también. Entonces eso se ve bien. Entonces, de todos modos, saltemos a la página del archivo del blog. Muy bien, así que este es nuestro blog archivos. Creo que se ve bastante bonito solo por defecto, pero hay un par de cosas que podemos cambiar. Por ejemplo, al igual que este texto de aquí viene. Por lo que de todos modos, ve a personalizar. Y bajo personalizar tienes la sección o bloque, ¿de acuerdo? Y así tienes archivo en publicaciones individuales. Entonces Archive significa como si fueras página de blog slash. Entonces ve al archivo. Aquí es donde puedes cambiar las cosas. Entonces, por ejemplo, si no quieres que se muestre la categoría, solo tienes que hacer clic en eso. Autor. No quieres que se muestre el autor, solo tienes que hacer clic en eso y ahí tienes. De acuerdo, y así publicar extracto de contenido, contenido completo. Desafortunadamente, hay que mostrar un extracto que es éste. No hay otras opciones, extracto de contorno súper completo. Por lo que sólo lo dejaré como extracto. Y eso es más o menos. De acuerdo, y así sigamos adelante y pinchemos en publicar. Ahí vamos. Impresionante. De acuerdo, así que ahora podemos editar esta página específica por sí misma. Y así ahora estoy editando actualmente la página del blog de slash. Y así justo aquí tenemos diferentes ajustes de Astra. Entonces si quieres, de nuevo, si quieres tener, haber desactivado el encabezado o quieres quitar la barra lateral, podrías hacerlo. Pero en lo personal, me gusta la forma en que se ve de forma nativa justo fuera de la caja. Creo que eso se ve decente para un blog no necesita ser super-duper complicado. Ahora, esta sección está siendo impulsada por tu sección de widgets. Entonces otra vez, ve por aquí y ve a Apariencia y cabras, tú widgets en rojo por aquí, barra lateral principal, aquí es donde tienes todo por aquí. Entonces, ¿qué debería ir en la barra lateral? Bueno, definitivamente no necesitamos unos botones de inicio de sesión para nuestra página web aquí. Y así sólo nos gustaría ir aquí y sólo queremos quitar un par de cosas diferentes. En realidad, las únicas cosas que yo personalmente, al incluir la barra lateral, sería hacer enlaces a sus páginas de archivo, páginas de categoría. Y eso es un reciente post categorías y luego cualquier tipo de display publicitando un formulario de email opt-in. Está bien. Ese tipo de cosas es lo que incorporaría. Entonces déjame sólo ver cómo se ve eso ahora. De acuerdo, entonces ahí vamos. Para que puedas tener tus categorías están en sus publicaciones recientes, email opt-in formulario ahí mismo, y publicidad, lo que quieras. Entonces eso es en términos generales cómo ajustas la página del blog. Añadamos pan rallado a nuestra página web. Por lo que las migas de pan son realmente útiles para las entradas de blog. Da una bonita arquitectura de sitio a tu sitio web, ayuda a las arañas de los motores de búsqueda tipo de gatear e indexar diferentes páginas y solo ayuda a las personas a entender dónde están en tu sitio web. Entonces, por ejemplo, sitio web creative pro.com justo aquí, esto, estas son migas de pan, vale, así que solo es útil para el usuario final y no es tan difícil de agregar. Entonces, de todos modos, vamos a estar agregando migas de pan a una entrada de blog. Entonces lo primero que tenemos que hacer. Volvamos a navegar de nuevo a una pestaña de CEO. Está bien, así que quiero ir a buscar apariencia. Y queremos ir a pan rallado, y queremos habilitar el pan rallado. Ahí vamos. De acuerdo, así que mostrar la página del blog, Sí, negrita, última página, negrita, sí. Taxonomía para mostrar en pan rallado. Quiero mostrar mis categorías, ¿de acuerdo? Entonces quiero el, quiero que aparezcan las categorías, ¿de acuerdo? Y así aparecen ahí las categorías. Y ahora podemos seguir adelante y dar click en guardar cambios. Ahora si volvemos a nuestras publicaciones y lo recargamos, vas a notar que nada cambia. Eso se debe a que en realidad tenemos que añadir la miga de pan. Entonces, vale, así que vamos a Yoast pan migajas todo si Google usa pan rallado debería ser la primera página de resultados. Está bien, así que ahora lo que sólo necesitamos agarrar es el código corto, ¿de acuerdo? Y así aquí mismo, WP SEO, hueso de miga de pan, haga clic derecho Copiar. Muy bien, así que sigamos adelante y añadamos un nuevo plugin. Entonces es buena apariencia. Y vamos a Plugins. Vamos a añadir nuevo. Está bien, así que vamos a PY, RC ahora PRC, a donde vamos PR, ¿por qué CWP? Ahí vamos. Así que adelante y dar click en Instalar. Ahí estamos. Y seguir adelante y dar click en Activar. Fantástico. Entonces lo que esto hace es agregar una pequeña sección justo encima de las entradas del blog. Entonces vamos a la configuración y luego PR, YC, WP. Ahora constante en la parte superior, copia y pega en nuestro código corto. Ahí vamos. Toma eso para ser P-I-C-O estaba saltando hasta aquí. Boom, ahí vamos. De acuerdo, y haga clic en guardar cambios. Está bien, así que vamos a echar un vistazo rápido. Qué es recargar la página. Está bien, así que eso se ve bien. Entonces, vamos a deshacernos de todas estas otras cosas. Entonces ahora voy a entrar en personalizar. Ah, justo dentro. Por lo que quiero ir al blog y quiero ir a Single Post. Y dirá que quiero ocultar la categoría. Digamos que quiero ocultar al autor. Yo quiero ocultar los comentarios. Ahí vamos. Entonces eso se ve, eso se ve bastante bonito. De acuerdo, así que sigamos adelante y pinchemos en Publicar. Está bien, bien. Está bien, así que ahora estamos bien para irnos. Por lo que ahora también podríamos agregar en Lake una revelación. Si quisieras hacer eso. Ves algunos sitios web que se dedican marketing de afiliados siempre tienen como una revelación en la parte superior, puedes decir algo así como, somos compatibles con lectores, enlaces soportados, enlaces al producto que podemos ganar, como nosotros puede, podemos ganar de enlaces a productos. Gracias por leer más, leer, leer nuestra divulgación para más. Tú. Algo tan sencillo como eso. Sigamos adelante y pinchemos en guardar cambios, y sigamos adelante y recarguemos lo mismo. De acuerdo, así que eso se ve terrible. Entonces, ¿cómo hacemos nosotros, cómo ajustamos esto? De acuerdo, entonces primero lo primero, queremos tener algo de espacio, así que queremos usar algo llamado break. Br slash. Entonces sólo tenemos que romperlo. Eso se llama solo una etiqueta de rotura. Y así sigamos adelante y pinchemos en guardar cambios. Y recarguemos el sitio. Y entonces lo que eso hace sólo le da un poco más de espacio. De acuerdo, entonces podemos sumar otra. B se cortan. Ahí vamos. Y uno debajo también. Br slash. Ahí vamos. Br slash, ahí tienes. Y haga clic en guardar cambios. Echemos un vistazo a esto y solo veamos cómo está saliendo esto. De acuerdo, así que no sé qué tan bien. Así que un poco, me gusta que éste esté un poco más cerca. Vamos a dar click en eso. Ahí vamos. Genial. De acuerdo, Así que ahora quiero que este texto sea un poco más pequeño, para que podamos agregar algo llamado una pequeña etiqueta, ¿de acuerdo? Y así simplemente hacemos esto pequeño y luego cerramos la etiqueta con slash pequeña. Y lo que eso hace es que hace que el texto sea más pequeño para que no se mezque con el párrafo. Tenemos asiento. Eso se ve realmente bonito. De acuerdo, Así que ahora es como, bueno, está todo a la izquierda. Hay alguna manera de que podamos hacer de centro todo como, Claro, No hay problema. Entonces otra vez, que es una cabra arriba por ahí y tecleamos en sensor. Está bien. Después ven al final y cerró todo el asunto con sensor. Así que slash centro. Ahí estamos. Está bien. Y luego haga clic en guardar cambios. Y entonces podemos recargar. Y ahí tienes. Entonces ahora tienes un buen poco de migas de pan, agrégalo a la parte superior, da y digo arquitectura, y tienes esta pequeña revelación. Y así de nuevo, es como si quieres enlazar a tu página de divulgación, ¿cómo haces eso? Bueno, hay que usar HTML aquí. No demasiado duro. De acuerdo, solo te mostré, solo te mostré a todos cómo hacerlo. Por lo que sólo iría a las páginas. Está bien. Simplemente saltas a páginas. Whoops, uno equivocado. De acuerdo, déjame solo ir a añadir nuevo. De acuerdo, así que vamos a ir aquí. Podemos teclear como este cierre. Está bien, déjenme audaz es resaltar esto. De acuerdo, déjame poner mi página web. Ahí vamos. Boom. Y luego haga clic aquí, edite como HTML. Ahí vamos. Entonces podemos simplemente llevarnos esto aquí mismo. Simplemente no necesitamos el párrafo, sólo necesitamos esto. De acuerdo, la sección fuerte ahí mismo. Ahí vamos. Oh, bien, ahí vamos. Copia. Y entonces podemos venir aquí y podemos simplemente respaldar esta revelación y simplemente copiar y pegar todo en hueso. Por lo que tienes una etiqueta fuerte ahí mismo. Ahí vamos. Así que haga clic en guardar cambios y recargar. Y ahora nuestra divulgación es una vinculada apropiadamente a nuestra página de divulgación. Ahora por favor enfatizar no copiar el P el párrafo de pinturas. No necesitamos eso. No copiar eso en. Basta con copiar sólo esta sección media. Y ahí tienes. De acuerdo, Así que no demasiado técnico. Hay un poquito, un par de cosas que necesitas para entender lo que las etiquetas de break y el centro. Ahora es súper complicado, pero como una vez que termines, estás listo. Y así ahora eso se ve realmente bonito. Entonces tenemos migas de pan y tenemos una bonita revelación que dicen, oye, ya sabes, lo que sea, ya sabes, para cumplir con cualquier ley y reglamento. Y ahí tienes. De acuerdo, Así que algunas publicaciones de blog, consejos. Por lo que quiero solo terminar esta sección con tan solo cubrir ampliamente hablando, qué, cómo acercarme a tu blog. De acuerdo, entonces antes que nada, tienes una página de archivo de blog. Definitivamente recomiendo mostrar la imagen de la función en la página de entrada del blog. Ahora, agregar una imagen característica es muy sencillo. Vayamos a Editar Post, y solo saltemos a él. Está bien, así que solo minimicemos todos estos para que sea muy fácil de ver. ¿ De acuerdo? Por lo que ahora debajo de aquí tienes algo llamado imagen característica. Aquí mismo es donde puedes subir una imagen de entidad y lo que hace la imagen de característica. Asocia la imagen con la entrada del blog. Ahora es realmente agradable hacer eso dentro del blog, ¿de acuerdo? Porque eso hace que sea visualmente más interesante y más fácil para la gente simplemente navegar por el sitio web de forma rápida y sencilla con estas imágenes específicas. También es útil porque en la parte inferior justo aquí en contra de que se muestren imágenes o imágenes de características. Pero como me notas, para mí personalmente, no tengo imágenes de características en la pieza real de contenido y te recomiendo que hagas lo mismo porque sabes esto la publicación del blog. O sea, si quieres, Depende totalmente de ti, pero personalmente no me gusta tener la imagen porque solo empuja todo el contenido hacia abajo, no es particularmente útil. Y así de nuevo, podemos simplemente saltar e ir a la entrada del blog. Y luego justo aquí, puedes ir a la configuración de astro y puedes desactivar, desactivar la imagen de la función, bien, dar clic en actualizar. Y entonces lo que eso hará es que solo está Oculto, vale, Solo es hit y cuando la gente realmente abre las entradas del blog, pero aún está disponible cuando la gente está en la página del blog de barra. Por lo que tenemos un bonito archivo de blog visual, atractivo. Y luego cuando la gente realmente abre la pieza de contenido, boom, se meten justo en el contenido también. De acuerdo, Así que de todos modos, ahora es que ajustas los textos y lo que hay dentro de una entrada de blog es simple. De acuerdo, de nuevo, con un Azure, tienes que ir a personalizar. Y luego tienes que ir a Global y luego a topografía, ¿de acuerdo? Por lo que la topografía base justo aquí. Y así aquí mismo está el tamaño de fuente. Si quieres que el tamaño de la fuente sea más grande, puedes hacerlo. Si quieres cambiar la línea, cuelga en cosas separadas solo un poquito más para que sea demasiado. Sólo un poquito. Eso sigue siendo demasiado. Bajaremos hasta ahí. Está bien. Algo así, lo que sea. Está bien. Y así puedes jugar un poco con la forma en que el contenido se ve como quieras. Entonces tal vez lo haga 17. De acuerdo, eso es bonito y grande, agradable y legible, etcétera. Entonces déjame seguir adelante y dar click en Publicar o k. Está bien, así que eso va a ocurrir. Ajusta el texto. Ahora con el blogueo, tienes que organizar todo bajo una categoría. Definitivamente no recomiendo sin categoría. Y así cuando publicas una pieza de contenido justo por aquí, Ha venido aquí abajo. Categorías. Se puede agregar una nueva categoría. Definitivamente lo recomiendo con un blog. Apenas empieza con cuatro categorías. Eso es sólo para pick cuatro. Por lo que consigo esto es un blog de café. Yo escogería como, ya sabes, guías de compra, guías de elaboración de cerveza, hechos y luego algo más, ya sabes, nuestro equipo, lo que sea, ya sabes, escoge cuatro categorías que puedes llenar con constante rápida y fácilmente. No quieres, no quieres que te guste crear una categoría diferente para cada entrada de blog. Eso es una locura. Sí, al igual que con el sitio web crave pro.com, solo tengo siete categorías en esto. Sitios web como constructores de sitios web, nombres de dominio , alojamiento web, contenido, marketing, ese tipo de cosas. Entonces cosas que son ricas en palabras clave y relevantes para el sitio web, Eso es lo que quieres, vale, como títulos de categoría de una a dos palabras de largo. Y eso es todo lo que tienes que hacer. ¿ De acuerdo? Y así vamos a venir aquí. Vamos a saltar de nuevo aquí. Otra cosa que puedes hacer también es entrar en tus publicaciones y entrar en tus categorías. Y así justo debajo de aquí categorías, aquí es donde tienes todas tus categorías y puedes añadir nuevas categorías desde aquí así como dentro de la sección de publicaciones de blog. Entonces de todos modos, por ejemplo, si tuviera como granos de café, crearé una nueva categoría. Y entonces llamaré a esto frijoles como sea. Haga clic en agregar nueva categoría. Puedo abrir esto. Y luego como aquí, puedo entrar aquí en como pesada descripción de esta categoría específica si quiero. Y luego aquí abajo con Yoast, puedes cambiar la forma en que esto realmente se ve. Diga, archivos de grano de café. Eso está bien. Entonces como el mejor ick, todo, todo el contenido, todo el contenido relacionado se trata de, son todo sobre granos de café, lo que sea que sepas, puedes darle un bonito título de SEO. Y así sólo siendo una página de archivo de categoría, bla, bla, bla, como muy robótica. Tienes un poco más de personalidad, ¿de acuerdo? Y eso es todo lo que tienes que ver con respecto a tus categorías, etc. 15. 15 Post estructura de blog: Por lo que seguí adelante y actualizé la categoría de uncategorized a granos de café. De acuerdo, entonces lo que hice funcionalmente es que solo navegamos, minimizamos el estilo, permalink. Ahí vamos. Categorías, vale, Así que solo lo tengo comprobado como grano de café y también con categorías, asegúrate de agregarla a una categoría solo que no quieras agregar una pieza de contenido a 23 categorías, una entrada de blog para una categoría. Y así ahora si hacemos click en granos de café ahí mismo, boom. De acuerdo, entonces estamos ahora estamos en la página de categoría D para esto. Déjame simplemente recargar esta página. Ahí vamos. Descripción de granos de café va aquí. De acuerdo, Entonces esto está siendo impulsado por esto de aquí. Y así como puedes hipervincular las cosas como quieras, etcétera. Y así esto es realmente útil porque ahora cuando la gente visita tu sitio, pueden hacer clic en esta categoría de la que hay en esta página dedicada sólo está relacionada con esta categoría. Y puedes crear una buena descripción esperanzadora para esta página de categoría ahí mismo. Ahora en cuanto al contenido real para el blog, No olvides, como estás usando el editor de WordPress, por lo que tienes acceso a todos los diferentes bloques que hemos estado usando este tutorial. Y así definitivamente me aseguro de romper tu contenido en diferentes secciones. De acuerdo, Entonces por ejemplo, yo hago que un H2 justo ahí y puedes revisar la estructura de tus publicaciones de blog arriba ahí arriba, ver cómo dice el título H2. De acuerdo, y así fingir que esta es otra pieza de concentrado ahí. Y sólo diremos que voy a romper esto y hacer esta tal vez su propia pequeña sección aquí mismo. Entonces, está bien, me llevaré esto y haré de éste un H3. Entonces rumbo entonces H3, ¿de acuerdo? Y luego podemos echar un vistazo a esto en para que solo quieras asegurarte de que tu esquema de documento tenga una estructura lógica. No quieres tener este H2, entonces éste es uno. Ya sabes, no quieres hacer eso. Por lo que H2 nuevamente significa cabecera. De acuerdo, así que sigamos adelante y actualicemos eso. A ver cómo se ve eso. Yo recargo el dicho, sí, ahí vamos. De acuerdo, así es como se rompe las cosas con diferentes títulos específicos. Ahora, debido a que instalamos apilables, también obtenemos acceso a un bloque de agua realmente útil. Entonces déjame seguir adelante y agregar uno de esos bloques que me gusta mucho. Por lo que venimos aquí, puedes escribir algo llamado característica, y luego tenemos un cuadro de características aquí mismo. Y así esto es realmente útil para como marketing de afiliados. Y así voy a decir como el título del producto va aquí, entonces tenemos una bonita descripción y se puede agregar una imagen del producto por ahí. Para que pueda hacer este estilo básico. Podemos bajar aquí y simplemente cambiar las cosas como le parezca conveniente. De acuerdo, así que ven aquí a la celda, déjame bajar aquí al contenedor. Ahí vamos. Por lo que border-radius contorno de sombra. Y creo que eso se ve muy bien. Y así voy a hacer clic en una imagen y sólo vamos a añadir una imagen aleatoria. Voy a añadir este en. De acuerdo, déjame seguir adelante y seleccionar eso. Ok, Entonces eso se ve bien. Y venimos aquí a la imagen. De acuerdo, así que déjame hacer ese cuadrado o círculo o una mancha, lo que quieras hacer. Por lo que de todos modos, déjame seguir adelante y dar clic en actualizar. Está bien, es recargar la página. De acuerdo, entonces ahí vamos. Por lo que ahora tenemos una bonita cajita de producto. Genial para como recomendar como productos y servicios al tener algo realmente, realmente destaque. Ahora una última cosita que podemos hacer es que también podemos sumar en publicaciones relacionadas. Y así que déjame volver rápidamente a tu página web, crear un producto, ven y solo te enseñas lo que quiero decir. Entonces si vamos aquí y sólo abrimos este sitio web constructor blog posts que tengo. Entonces si bajamos al fondo aquí, esta es publicación de blog relacionada. Para agregar eso, uso algo llamado jetpack, que es un plugin de WordPress. Así que vamos a ir a plug-ins. Y vamos a añadir nueva OSEP en. Jetpack ahí arriba es jetpacks ahí mismo. Jetpacks ya activos. Está bien. Así que asegúrate de tener jetpack instalado. Y así venimos aquí y vas a tener que montar jetpack por tu cuenta. Entonces déjame seguir adelante y hacer eso. Está bien. Entonces déjame seguir adelante y aprobar. Está bien. Así que una vez que tengas todo configurado un jetpack, solo vas a tener que crear una cuenta de WordPress. Probablemente se te presente una página donde te puede gustar actualización pagada, etcétera. Pero como una vez que acabas de crear una cuenta, jetpack ya está instalado. Por lo que de todos modos, solo debes navegar de nuevo a tu sitio web. Jetpack estará bien para ir. Y todo lo que haces es hacer clic en la configuración. De acuerdo, y luego queremos ir a, creo que es tráfico. Ahí vamos. Sí. Tráfico. Después publicaciones relacionadas. Entonces lo quieres solo asegúrate de encender esto. Eso es todo. ¿De acuerdo? Y así aquí vamos. El realmente oposito ¿quién va a tomar esto? Y queremos destacar las publicaciones relacionadas. Y también queremos mostrar la imagen característica que va junto con ella. Eso es todo. Está bien. Todo lo que tienes que hacer acaba de instalar jetpack, navegar al tráfico. Haga clic en este botón, haga clic en estos botones. Y a medida que tu sitio crece y tiene contenido, esto solo se poblará automáticamente sin que tengas que hacer nada. ¿ De acuerdo? Y así entonces tendrás blogposts realmente bonitos y atractivos ubicados en la parte inferior de tus entradas de blog. De acuerdo, y eso realmente ayuda. Vinculación interna da a la gente algo más en lo que hacer clic, etc Ahora, una última cosita que solo quiero mencionar es porque también tenemos un plugin adicional. Déjame navegar a donde está esas sesiones, ahí vamos. Pr YC. Una cosa genial de esto es que también podemos simplemente agregar contenido al fondo. Entonces si quieres lanzar aquí como un anuncio de Adsense, entonces todos y Adsense anuncios aparecerán en la parte inferior de cada entrada de blog. O bien puede agregar en un formulario opt-in o, ya sabe, anuncio de display de Amazon Associates, lo que sea. Entonces, de todos modos, déjame ir aquí y déjame añadir un formulario realmente rápido solo para mostrarte cómo es. Entonces voy a hacer en línea. Está bien, así que ven aquí, voy a sumar un Mills aquí mismo. Está bien, eso se ve bien. Déjame ir a incrustar y déjame ir al HTML. Adelante y copia, toma eso está bien, así que déjame navegar a este contenido fondo. Copia y pega eso en. Literalmente así, sólo el HTML. Adelante y haz clic en Guardar. Está bien, así que ahora si recargamos la entrada del blog, vamos a tener un formulario de email opt-in sentado en la parte inferior de cada entrada de blog. Y entonces eso es lo que esto, por eso me encanta este libro. Es muy, muy simple en subvalorada porque es tan útil. Puedes poner cosas, leer la parte superior y la parte inferior de tu post de blog con facilidad. Y es que, está en, así es como te recomendaría que vayas a personalizar tus publicaciones de blog de forma rápida y sencilla. Entonces no hay mucho para ello. De acuerdo, así es como instalas pan rallado. Es así como se agrega esta pequeña revelación debajo de h2, h3. Etiquetas de título aprovechan los diferentes bloques que tiene con su editor de WordPress y agregan apilables en publicaciones de blog relacionadas en la parte inferior. Y así también es como agregas como un formulario de suscripción por correo electrónico o un anuncio en la parte inferior de tus entradas de blog. 16. 16 INOS ANALÍTICOS y consola de búsqueda: Es solo en Google Analytics en tu sitio web. Entonces Google Analytics es lo que te va a decir qué páginas se están viendo, cuánto tiempo pasa la gente en tu sitio, etcétera. Y una vez que tengas la analítica instalada, entonces podrás verificar tu sitio web con consola de Search Engine donde está, ¿de acuerdo? Y así el primer paso es instalar Analytics. Entonces puedes venir aquí e iniciar sesión y verificar tu sitio web y lo hará, detectará que tienes analíticas instaladas. Y así podrás adivinar que con la consola de búsqueda, solo asegúrate de usar el mismo correo electrónico cuando estés meneando sus analíticas que eres Con Google Search Console. De todos modos, ahora no te voy a guiar a través de cómo configurarte y analítica. Ya hay otros tutoriales encendidos, así que vamos a ir y llegar directo al grano una vez que llegues a esta sección donde realmente tienes el guión, quieres copiarlo y luego dice que tienes que ponerlo en la cabeza de cada página web que quieras medir. De acuerdo, Entonces con Astra, ¿cómo carajo haces eso? Muy fácil. Tenemos que ir de nuevo a Plugins. Y el plugin que vamos a estar instalando, qué vamos a añadir nuevo. De acuerdo, ahora queremos teclear en encabezado y pie de página, ¿de acuerdo? Plug-in muy, muy sencillo. Ahí vamos, 1 millón más activaciones. Ahí vamos. Es instalarlo y dar click en activar. Muy bien, genial, Así que navega a la configuración y ve a insertar encabezados y pies de página. Y ahora queremos insertar el guión y el encabezado. ¿ Por qué? Porque nos dice demasiado literalmente. Y así esto sólo nos va a permitir añadir Google Analytics. Ahí vamos. Después sigue adelante y haz click en Guardar ahí mismo. Y eso es todo. De acuerdo, y así ahora Google Analytics está instalado, dale un poco de tiempo para que empiece a recolectar información, y entonces eso es todo. De acuerdo, Entonces ya estás listo y vas a empezar a obtener datos de Google Analytics. Y luego puedes seguir adelante y pasar a Google Search Console, ¿de acuerdo? Y luego una vez que entras a Search Console por aquí, puedes hacer clic en Iniciar ahora, entonces todo lo que tienes que hacer es verificar tu sitio web. Por lo que solo tienes que poner en el sitio web y asegurarte de que estás iniciando sesión con el mismo correo electrónico. Basta con poner aquí tu nombre de dominio, detectará que tienes analítica instalada y luego verificará la propiedad de esa manera en Search Console es muy útil porque te dice cómo tu contenido está clasificando dentro de Google y qué, cuántas impresiones estás recibiendo, etcétera. Y así es muy útil. Entonces por eso quieres seguir adelante e instalar Analytics. Y así es. 17. 17 conclusión: De acuerdo, eso es todo para este curso y cómo diseñar una página web y un blog con el Tema Astra. Espero que te haya resultado realmente útil y espero que tengas una fuerte comprensión sobre cómo usar asteroides que crean cualquier tipo de sitio web que quieras. De todos modos, sólo quería decir un rápido agradecimiento por inscribirse y tener un buen día. Adiós adiós.