Construye un blog de WordPress con Elementor

1. Introducción a la clase: En la era digital que cambia rápidamente hoy, tener una fuerte presencia en línea ya no es opcional, es esencial. Porque un blog fácil de usar bien diseñado puede ser una herramienta poderosa para conectarse con audiencias en el mercado global. Hola, mi nombre es Ken, y he estado enseñando a la gente a construir sitios web de Wpress durante los últimos 5.5 años Y en esta clase, te estaré mostrando cómo construir tu propio blog hermoso y profesional con Wpress y elementor Lo estaremos haciendo desde cero. Y para cuando terminemos, tendrás un blog listo para el lanzamiento que podrás empezar a dirigir a la gente desde tus cuentas de redes sociales o perfiles de redes sociales. Puedes comenzar a escribir y publicar publicaciones de blog en tu blog, y compartir esos enlaces en tus cuentas de redes sociales para atraer a la gente a tu blog. Y a lo largo de la clase, te estaré mostrando todos los elementos esenciales que necesitas para entender el flujo de trabajo del elemento Wordpress Entenderás cómo usar diferentes elementos que te ofrece Elementor y sabrás la razón por la que los estamos usando. Solo para darte una visión rápida de algunos de los conceptos que vamos a estar aprendiendo, Esta clase estará cubriendo cómo configurar Wordpress desde cero. Eso significa que comenzaremos desde cómo comprar hosting Wpress, cómo instalar Wpress una vez que compres hosting, para que puedas empezar a usarlo Cómo instalar y trabajar con temas de wpress y plug ins. Veremos cómo crear páginas web y entradas de blog. Te mostraré cómo crear artículos y publicarlos en tu blog. Te voy a mostrar cómo categorizar esos artículos o blog para que puedas organizar tu blog correctamente Te mostraré cómo crear hermosos diseños funcionales con elementors drag and drop builder, así tendrás un hermoso sitio web Entenderás cómo personalizar tus blogs, tipografía, colores, imágenes y todos los demás elementos que usaremos en la clase Y esto es solo una punta del iceberg de los conceptos que vamos a estar cubriendo Y para cuando terminemos esta clase, tendrás las habilidades para construir cualquier otro tipo de sitio web que quieras con Wordpress, elementor y otros complementos Entonces, como se puede decir, esta va a ser una clase muy práctica. Te va a dar la experiencia que necesitas para pasar de principiante completo a un diseñador web seguro en poco tiempo. Y si te estás preguntando si esta clase es una buena opción para ti, Esta clase está creada para emprendedores que quieran aprender a construir un sitio web para su negocio. Entonces, si eres una persona de negocios que quiere compartir tu experiencia a través de artículos o publicaciones de blog en tu propia plataforma, no una plataforma de terceros, verás cómo construir un blog con el que puedas hacerlo. Esta clase también está creada para cualquiera que quiera aprender a construir sitios web y publicaciones de blog con nosotros presionamos y ganar dinero haciendo eso. Si quieres que la gente te pague por construir sitios web o entradas de blog para ellos y ganarse la vida haciendo eso, esta clase te dará los fundamentos y mucho más Para que puedas salir preparado para hacer eso. Entonces, si esto suena como una habilidad, te interesaría aprender. Si quieres aprender a construir blogs y sitios web para ti o para los clientes. Te animo a unirte a mí ahora mismo, y te prometo, para cuando terminemos, no tendrás un sitio web dammi, sino un blog del mundo real que esté listo para atender a los visitantes o clientes Entonces, sin perder el tiempo, quiero mostrarles el proyecto en el que estaremos trabajando. Entonces en la siguiente lección, te estaré llevando a un recorrido por el blog que estamos construyendo. Te veré en breve. 2. Proyecto de clase: I. Y como siempre te recuerdo en cada clase. La mejor manera de aprender diseño web o cualquier otra habilidad técnica es trabajando en un proyecto del mundo real o básicamente solo un proyecto. Y así que aquí está el proyecto en el que vamos a estar trabajando. Este es el blog que vamos a construir, y quería llevarte a un rápido recorrido por todo el blog. Entonces, antes que nada, esta es la landing page o la página de inicio. Como puedes ver, tenemos esta página de héroe con algún texto de encabezado, alguna descripción. Entonces estas son las entradas del blog. Si haces clic en un blog, serás redirigido para leer ese blog Pero ya veremos eso en breve. Como puedes ver aquí a la izquierda, tenemos un perfil o la biografía del autor. Esa es tu biografía, si eres tú quien dirige el blog. Aquí mismo, tenemos artículos recientes, y puedes ir a hacer clic en cualquiera de ellos para ir a leer Abajo aquí en la foto, tenemos tres columnas. Tenemos algunos enlaces rápidos. Tenemos un formulario de registro por si acaso el lector quiere inscribirse en su lista de correo, y aquí tenemos una breve descripción. Muy sencillo, pero lo más importante que puedes llevar de esta clase es cómo usar Wpress y elementor para construir todas estas diferentes secciones Pasando a la página de artículos, es donde hemos acordado todas las entradas de blog que has publicado, y como puedes ver, están muy bien dispuestas con espaciado uniforme, independientemente de la altura de cada elemento aquí mismo, como puedes ver esto es más alto. Entonces este de abajo es empujado un poco hacia abajo para mantener ese espaciado. Y si abres una entrada de blog para leerla, por ejemplo, esta, así es como se ve la entrada del blog. Todavía tenemos esa lista de artículos recientes, y usted tiene control total sobre lo que quiere mostrar aquí. Entonces ahora mismo, estamos mostrando artículos recientes. Pero al usar las categorías de Wpress, puedes definir qué categoría quieres mostrar aquí, y te mostraré cómo hacerlo Mencioné que aprenderemos a categorizar tus publicaciones de blog Entonces ya veremos cómo hacer eso. Ahora, el usuario puede venir y leer. Como puede ver, esta es la categoría de productividad, y la fecha en que se publicó fue el 7 de marzo de 2024. Puedes continuar y leer la conclusión del artículo y aquí tienes una breve biografía de la persona que publicó esta entrada de blog específica. Entonces tenemos el Pie de Página. Si tienes videos, puedes publicarlos en esta página. Ahí vamos. Y si reproducimos uno de los videos aquí, todo lo que necesitas es un enlace a tu video en YouTube. Están pasando a la página de contacto. Página de contacto muy simple con un bonito y hermoso formulario de contacto, veremos como usar un bonito formulario plug in cold forminator para construir esta página de contacto Y también tenemos esta barra lateral de artículos recientes. Ahora, notarás que todavía tenemos esta barra lateral, y eso es porque siempre es bueno tener llamadas a la acción en tu sitio web, quieres mantener a los clientes o visitantes en tu sitio web o tu blog el mayor tiempo posible. Y al darles enlaces para hacer clic que los redireccionan a una parte diferente de tu sitio web, los estás manteniendo en tu sitio web por más tiempo, y eso es bueno para tu SEO. Ahora, si hacen clic en este popular botón, verán esta barra lateral fuera del lienzo con más contenido, y tendrás control total sobre lo que quieres mostrar en esta barra lateral. Entonces, como he mencionado, la conclusión más importante de esta clase será tener la mentalidad de un diseño de sitio web, un diseñador web de Wpress Entonces mi objetivo con esta clase es mostrarte cómo usar una combinación de diferentes herramientas dentro del ecosistema Wpress para armar un blog o un sitio web Y este ejemplo de blog va a ser un buen proyecto para que entendamos cómo funcionan todas estas diferentes herramientas. Elementor siendo el foco central porque elementor es lo que nos permitirá tener este layout Todos estos diseños que hemos visto en todas las diferentes páginas serán elementor Entonces, básicamente, eso es solo una rápida visión general de lo que vamos a estar trabajando. Este es el proyecto de clase. En la siguiente lección, veamos dónde y cómo comprar alojamiento de WordPress y un nombre de dominio. Entonces te veré en breve. 3. Compra alojamiento y nombre de dominio para WordPress: A, bienvenido de nuevo. Ahora, recientemente publiqué un tutorial completo sobre cómo comprar alojamiento web wPress cuando quieres construir un sitio web elemental Ahora, el tutorial fue para un curso de primaria diferente. Pero debido a que el proceso de compra WPresshsting sigue siendo el mismo, decidí incluirlo en esta clase acaso no sabes cómo comprar Entonces sin perder más tiempo, aquí está el proceso para comprar WPresshsting y un Entonces ahora que has visto el sitio web vamos a estar construyendo a lo largo de este curso, es momento de hablar sobre cómo y dónde obtener tu alojamiento web y un nombre de dominio. Ahora, cada sitio web que visita se almacena en algún lugar en línea en un servidor que siempre está disponible para Internet. Es por eso que puedes acceder a un sitio web que está en los Países Bajos o Estados Unidos o México porque está almacenado en un servidor que siempre está conectado a Internet. Entonces eso significa que cada vez que haces clic en un enlace que te lleva a un sitio web específico. Por ejemplo, pk gratis, digamos, pick.com gratis Lo que hizo el navegador fue que envió una solicitud para esta página específica, y se puede acceder a esta página específica a través de esta dirección o esta URL. Y así cuando envió la solicitud, esa solicitud fue recibida por el servidor que está almacenando el sitio web de pick gratis, y el sitio web de Freepk está conformado por muchas páginas web Pero debido a que esta página web está representada por este nombre de dominio específico, ese servidor devolverá una respuesta con la página que solicitó. Entonces ese servidor es lo que te proporciona un proveedor de alojamiento web. Su proveedor de alojamiento web le proporciona espacio de almacenamiento para su sitio web y se asegura de que su sitio web esté disponible para cualquiera que quiera visitarlo. Ahora, la otra cosa que necesitarás es un nombre de dominio, pick.com gratis es un nombre de dominio, y este nombre de dominio específico es único para echar un vistazo gratis, así que nadie más puede tener el mismo peek.com gratis De la misma manera nadie más puede tener tu número de teléfono. Tu número de teléfono es único y se utiliza para llegar solo a ti, a nadie más. Por lo tanto, su sitio web necesita tener un nombre de dominio único, y la gente usará ese nombre de dominio para acceder a su sitio web. Entonces ahora, volviendo aquí, estoy en wordpress o. Este es el sitio web oficial de WordPress. Aquí es donde puedes descargar Wpress si quieres desarrollar tu sitio web sin conexión, puedes instalar Wpress en tu sistema y trabajar sin Internet y construir tu Pero lo que nos interesa es la página de hosting. WordPress tiene una lista de servidores web recomendados. Y te recomiendo tomarte un momento y leer esta página. Como puedes ver, cuentan con tres host web principal recomendado, Bluehost, dream host y wordpress.com Pero esto no significa que estos sean los únicos servidores web que puedes usar para tu sitio web de wpress Hay otros servidores web que son igual de buenos, si no mejores que estos tres. Entonces estas son solo recomendaciones de prensa, pero aquí descubrirás leyendo esto que hay cientos de miles de servidores web por que hay cientos de miles de ahí, la gran mayoría de los cuales cumplen con los requisitos mínimos de prensa. Wpress decidió simplemente hacer tu trabajo más fácil y decidió darte los tres primeros que te recomiendan Ahora, personalmente, he usado Blue Host, y hace mucho tiempo cuando empecé a usar Wpress probé wpress.com, y no debes confundir wpress.com y no debes confundir WordPress.org es la plataforma que está dirigida por la WpressFoundation, porque recuerda Wpress es de código abierto, y wpress.org existe para brindarte recordar con la descarga de W Press y todo lo que necesitas saber sobre wPress y Pero ahora, cuando se trata de hosting, hay un servicio dedicado llamado wpress.com. Déjame abrirla. Esta es una plataforma que te proporciona herramientas y hosting para construir tu sitio web. Son como semanas. Si has visto semanas, sabes que cuando estás construyendo un sitio web en semanas, no necesitas pensar en dónde conseguir hosting porque ellos alojan el sitio web por ti. Simplemente te dan las herramientas para comenzar a construir tu sitio web de inmediato. Pero claro, tiene sus limitaciones. la misma manera semanas tiene sus limitaciones al compararlo con instalar Wpress usted mismo en un servidor Cuando instalas Wpress en un servidor en algún lugar, tienes más control para hacer muchas más cosas sobre las que no tienes control cuando estás usando un servicio alojado como wpress.com Pero claro, es un lugar agradable que puedes probar si quieres. Ahora, a nivel personal, uso el chip de nombre, especialmente cuando solo estoy experimentando con algunas ideas antes comprometerme a comprar un alojamiento web dedicado para esa idea específica Así que Name tip tiene varios servicios aquí mismo. Uno de ellos es este hosting gestionado de Wordpress y migración a Wordpress. Pero otro servicio aquí se llama hosting compartido. Si abro eso, tenemos este plan stela stela plus aquí mismo, y te diré por qué me gusta usar esto. Número uno, mira estos sitios web ilimitados. Eso significa que si tengo diez ideas para diferentes sitios web, tengo diez ideas. A lo mejor quiero abrir una tienda de comercio electrónico. No voy a abrir una tienda de cosméticos. No voy a abrir un blog personal. A lo mejor no voy a abrir una comunidad social. A lo mejor quiero crear un foro. Esas son cinco ideas diferentes. Puedo alojar todos esos sitios web bajo este plan sin tener que comprar alojamiento separado para cada sitio web. Puedo tener un número ilimitado de sitios web alojados bajo este plan, y solo puedo pagar esta tarifa por mes. Por supuesto, este es el primer año tiene descuento, pero luego en el segundo año, estarás pagando 68.88 por año Pero piénsalo. Si tienes tres ideas o cuatro ideas para diferentes sitios web, y quieres ver cuál funcionará antes de comprometerte completamente a obtener un plan de alojamiento web dedicado para ello. Puedes crear el sitio web bajo este plan. Crea los cuatro sitios web. Habrá en vivo en Internet. Puedes comenzar a enviar personas a ese sitio web a través de enlaces en redes sociales, simplemente vinculados a los cuatro sitios web. Y si uno de los sitios web realmente se da cuenta y comienza a atraer mucho tráfico. Ahora puedes decidir ahora este sitio web parece que se está poniendo de manifiesto. Así que déjame obtener un plan de alojamiento web dedicado para ello por separado, y luego puedes migrar al hosting dedicado porque ahora es una idea que se inició. El resto puede permanecer como sitios web experimentales, pero siguen en vivo en línea. Pero lo bueno es que estás pagando por un plan de hosting. No estás pagando diferentes planes de hosting para los diferentes sitios web. Y claro, por esas ventajas, por eso soy capaz de construir un sitio web como este. Este es el sitio web que acabo de mostrarte. Déjame simplemente ir a la parte delantera. Este es el sitio web de referencia que construí mientras preparaba este curso, y lo construí, por supuesto, que podamos tener un sitio web para mirar mientras trabajamos en el curso. Ahora bien, con eso dicho, esta es una de las páginas web que he alojado bajo este plan. Y es bajo este nombre de dominio, vi com. Y ahora, en esta clase, estaremos construyendo nuestro sitio web, y estaré usando un nombre de dominio diferente, que será wordpress com y también estará bajo este plan. Entonces tendré esos dos sitios web, sitios web demostración bajo el mismo alojamiento. Por eso estoy usando esto. Pero ahora, me he tomado demasiado tiempo hablando de esto. No estoy tratando de convencerte de que entiendas esto. Esto es solo yo explicando el razonamiento detrás de lo que uso y cómo trabajo porque tal vez te resulte útil Pero recuerda, siempre puedes ir aquí y probar estos otros servidores web. También son buenos. Ve y pruébalos, elige el que quieras. Y una vez que hayas hecho eso, volvamos aquí. Como puedes ver aquí, tenemos dominios. El chip de nombre es uno de los mejores vendedores de nombres de dominio del planeta. Has visto los anuncios por todas partes en YouTube y en diferentes sitios web Puedes buscar tu sitio web. Digamos caridad today.com. Veamos cuánto es eso. Bien, charity today.com es el dominio premium. Son 1.700 dólares. Pero también tenemos otros dominios más baratos, caridad al día a día. Depende de ti ser creativo y comprar un nombre de dominio que puedas vivir con un nombre de dominio que tenga sentido. Por supuesto, quieres usar el nombre de tus organizaciones benéficas o tu startup. Si buscas fondos para proyectos tecnológicos y no para caridad, también puedes simplemente usar el nombre de tu empresa. Mi empresa today.com. Y como se puede ver. Sí. Así que solo juega con esto, y luego una vez que estés listo, puedes agregarlo al carrito. Pero recuerda, cuando volvemos al hosting compartido, cuando compras este plan, obtienes un nombre de dominio gratis. Entonces eso significa que tienes oportunidad de obtener un nombre de dominio gratis durante el primer año sin tener gastar este dinero que acabamos de ver. No necesitarás comprar un nombre de dominio durante el primer año, pero claro tendrás que pagar por el nombre de dominio el segundo año en adelante. Por supuesto, te dejaré un enlace en la descripción a continuación de este reproductor de video para que vayas y compres cualquiera de estos servidores web de los que hemos hablado, incluido el chip de nombre. Y algunos de ellos podrían ser enlaces de afiliados. Si quieres apoyarme y el trabajo que estoy haciendo, la mejor manera de apoyarme es hacer clic en mis enlaces de afiliados porque seguirás comprando el servicio al precio que aparece en su página web. Pero si usas los enlaces que te he proporcionado, obtendré una pequeña comisión por tu compra, y eso me ayudará a pagar las facturas y obtener la motivación para seguir creando nuevos cursos. Entonces con eso dicho, eso es todo acerca del alojamiento web y cómo obtener un nombre de dominio. En la siguiente lección, veamos cómo instalar WordPress una vez que obtengas acceso a tu panel C después de comprar hosting. Entonces te veré en la siguiente pieza de la lección. 4. Instalación de WordPress: Entonces ahora que te has comprado un nombre de dominio y hosting, es el momento de acceder al panel C para que podamos instalar WordPress. Entonces sigamos adelante y hagamos eso. Ahora, diferentes servidores web tendrán diferentes formas de acceder al panel C. Así es como lo haré usando chip de nombre. Pero lo más importante es que accedas al panel C porque es a través del panel C que podremos instalar WordPress. Así que déjame iniciar sesión. Después iré directamente a la lista de hosting. Ahí es donde están listados todos mis planes de hosting. Iré al panel C. Como mencioné, tus servidores web podrían darte una forma diferente de acceder al panel C. Entonces aquí estamos dentro del panel C, y lo que queremos es la sección Softaul App Installer porque nos proporciona un CMSs y servicios diferentes que podríamos querer usar, y queremos usar WordPress Así que déjame hacer clic en WordPress en Soft App Installer. Y recuerda, mencioné que este plan, el plan Seo plus por chip de nombre te permite tener varios sitios web bajo ese plan de alojamiento único. Así que aquí mismo, tenemos Instalar Ahora. Haré clic en Instalar ahora, y nos llevarán al formulario Instalador de wPress Sólo tenemos que llenar estos campos. Y lo primero aquí es seleccionar el protocolo o prefijo. Y me gusta mi sitio web empezando por WWW hacer entonces mi nombre de dominio. Pero entonces otra vez, notarás que tenemos HTP y HTTPS. Si tu sitio web, si tu nombre de dominio tiene un certificado SSL, debes usar HTTPS. Cuando hagas clic afuera, hará una comprobación rápida, y si no tienes un certificado necesario, te dará una alerta aquí de que no tienes un certificado necesario y solo puedes usar HTTP. Pero es crucial que tengas un certificado SSL para tu sitio web. En 2024, eso es imprescindible. Lo siguiente, claro, aquí, porque vifxpo.com ya tiene el Voy a usar wpress com. Y aquí mismo, podemos agregar una carpeta en la que almacenar nuestro sitio web WordPress. Pero entonces eso significará que nuestra página de inicio será wpresst com slash Pero si quieres que la página de inicio de tu sitio web sea www.domainname.com, no agregues ninguna carpeta aquí Entonces lo dejaré así. Entonces aquí puedes seleccionar la versión de Wpress que deseas usar Quiero usar lo último. Entonces mi sitio web será www press slash cualquier cosa. Lo segundo aquí, podemos darle un nombre a nuestro sitio web. Si vamos a abrir CNN cnn.com. Como puedes ver, el nombre que le han dado a su página de inicio es noticias de última hora, últimas noticias y todo eso. Entonces este es el nombre que aparecerá en tus pestañas. Por ejemplo, el blog de Ken, transformando vidas a través de publicaciones de blog o artículos. Entonces esta sección le proporciona las credenciales de inicio de sesión para su panel de prensa de trabajo. Por si acaso no quieres iniciar sesión en tu panel de Wpress a través del panel C, quieres pasar por tu nombre de dominio WP login Puedes usar estas credenciales. Así que voy a dejar el mío en el defecto. Este correo electrónico se generó para ti automáticamente cuando obtuviste acceso al panel C, cuando compraste tu hosting y obtuviste acceso a tu panel C. Estos son plugins que puedes instalar junto con wordpress. Vienen liados con Wordpress, pero dependiendo de tu host, que no tengas esta lista, pero no necesitas instalar ninguna de ellas porque hay muchas opciones en el directorio de plugins de WordPress, y probablemente puedan hacer un mejor trabajo que estas Entonces, a continuación, si quieres hacer algunas copias de seguridad automáticas, puedes entrar aquí, dejar la ubicación de copia de seguridad por defecto. Selecciona, tal vez si quieres hacer una copia de seguridad una vez al día, una vez a la semana, una vez al mes. Déjame elegir una vez a la semana. Después rotación. Esa es la cantidad de copias de respaldo de copias de seguridad que tienes en un momento dado. Y aquí, puedes ingresar tu correo electrónico de Gmail para recibir una notificación una vez que se haya instalado la prensa de trabajo. Pero no hace falta que hagas eso. Déjame hacer clic en Instalar. Y dice que tardará 3 minutos, pero en realidad toma menos de un minuto. Y ahí vamos. Ahora este es tu nombre de dominio. Esta es la URL de su página de inicio, y esta es la URL de su panel de control. Ahora, debido a que estamos justo aquí en el panel C, solo podemos hacer clic en este y seremos redirigidos directamente a nuestro panel Así que déjame hacer clic en eso. Y como pueden ver, aquí está el dashboard. Y como mencioné, como pueden ver aquí mismo, tenemos el blog de Ken. Este es el nombre que le dimos a nuestro blog o página web. Ahora, si hago clic en el blog de Ken, nos llevará al default en la página, que por supuesto vamos a cambiar. Y como pueden ver, aquí está el nombre del sitio web. Esto debería leer tu nombre o el nombre que diste a tu sitio web y el eslogan o eslogan que pones debajo del nombre. Ahora bien, este es el tema por defecto. Veremos cómo cambiar el tema de wordpress a medida que avanzamos, pero así es como instalar WordPress, y ahora estamos listos para pasar al siguiente paso, que es instalar elementor Entonces te veré en un minuto. 5. Instalación de Elementor: Entonces ahora que tenemos presionamos instalados, es el momento de instalar Elementor porque, claro, estamos construyendo el sitio web de War press con elemento Así que vamos dentro de los plugins. Y antes que nada, voy a hacer clic en plugins para ir a la lista de plugins preinstalados. Y estos son los plug ins que siempre vienen con War press. Entonces solo seleccionaré los dos, seleccionaré eliminar debajo de este menú desplegable y aplicar Bien. Todo bien. Entonces ahora no tenemos ningún plug ins. Déjame refrescar esa página. Actualmente no hay enchufes disponibles. Así que si hago clic en Agregar nuevo enchufe, será redirigido al directorio we press plug in Y aquí tenemos más de 50,000 enchufes libres que puedes instalar y usar. Entonces, claro, busquemos elementor. Y aquí estamos. Entonces Elementor es la primera opción aquí Así que voy a seguir adelante y hacer clic en Instalar ahora. Y ahora está instalado. Lo único que queda es activarlo. Pero antes de que lo activemos, notarás aquí tenemos otros elementor relacionados con agregaciones o enchufes Y estos son productos creados por plug in de terceros desarrolladores de plug in de terceros que no están afiliados a element, el equipo de Elementor Se trata de desarrolladores independientes que crearon complementos adicionales, elementos adicionales que podemos usar de forma gratuita con la versión gratuita de Elementor Ahora, Elementor tiene una versión pro que tienes que pagar y una versión gratuita Y la versión gratuita ya tiene varios elementos que vamos a ver. Pero los elementos gratuitos que vienen con Elementor no son suficientes para construir un sitio web de prensa de trabajo agradable con Puedes construir un sitio web básico con ellos pero no un sitio web muy agradable con. Pero ahora, estos elementos adicionales que obtenemos de estos complementos elementales relacionados nos proporcionan más opciones, y por supuesto, vamos a estar usando bastantes de ellos, así podrás entender exactamente de lo que estoy hablando. Pero por ahora, permítanme seguir adelante y dar clic en Activar. Y ahora será redirigido a este elementar Setup Wizard para hacer algunas Entonces, el primer paso es crear una cuenta con Elementor para acceder a todos estos beneficios, pero no es necesario tener una cuenta elemental para usar Elementor Para que pueda seguir adelante y saltarme esta parte. A continuación, aquí, puedes elegir qué tema quieres usar. Puedes optar por ir con el tema hola. Este es el tema que presionamos creado por el equipo de Elenta para trabajar específicamente con Elementor Pero no vamos a estar usando este tema hola porque vamos a usar el tema de Astro, que también es otro tema increíble que presionamos, y es creado por profesionales, y funciona perfectamente con Elementor Así que voy a seguir adelante y saltarme esta parte. Y aquí podemos elegir un nombre para nuestro blog o página web. Este es el nombre que le diste a tu sitio web. Ahora bien, este es el lenguaje de código para un apóstrofo. Así, recuerda que ese es el nombre que le dimos a mi sitio web. Pero de hecho, permítanme llamarlo en el blog. Voy a hacer clic en siguiente. Pero si estás satisfecho con el nombre que le diste cuando estábamos instalando eran press, no necesitas cambiarlo. Este soy yo solo cambiándolo porque no quiero que ese apóstrofe afecte este nombre Así que lo he cambiado aquí. Voy a hacer clic en siguiente. Aquí puedes subir el logo de tu sitio web. Pero vamos a hacer eso cuando estemos construyendo el sitio web. Entonces no necesitamos agregarlo aquí, así que omita. Y por último, paso cinco, edita un Canvas en blanco con el editor Elemental o elige una plantilla diseñada profesionalmente o importa una plantilla que ya habías creado. Pero no vamos a hacer ninguna de estas. Pero si hacemos clic en Omitir o cerrar aquí o en alguno de estos botones, Elemento generará una página elemental solo para mostrarnos el editor elemental. Así que voy a golpear a Skip. Y ahora Elementor ha generado una página web de muestra, que vamos a eliminar, pero se genera solo para redirigir al constructor para que podamos echarle un vistazo desde el principio Ahora, aquí hemos desbloqueado el poder de Elementor AI. Estamos viviendo en la era de la IA, así que esto se espera fácilmente. Puedes seguir adelante y leer toda esta información. Pero para usar Elementar AI en tu sitio web para editar tu texto y generar imágenes mientras lo construyes, necesitarás crear una cuenta elementor Recuerda, el primer paso en el Mago fue crear una cuenta. Crear una cuenta es gratis, así que no tienes que preocuparte. Puedes seguir adelante y hacer eso. Haré clic en Continuar. Y ahora, esta es la página. Está etiquetado como Elementor número ocho. Pero como dije, vamos a eliminar esta página. Pero antes de eliminarlo, vamos a usarlo para tener una visión general del espacio de trabajo elementor, para que puedas familiarizarte con todas las partes del editor Entonces vamos a hacer eso en la siguiente lección. Pero antes de que hagamos eso, permítanme darle solo a publicar. Ahora está publicado, y quiero que salgamos al panel de WordPress. Así que cuando hacemos clic en esto por primera vez, salir, vamos a obtener esta opción. Elige a dónde salir cada vez que presionas el botón de salida Lo configurarás solo una vez, y cada vez que lo golpees, serás redirigido a la parte de tu sitio web que elijas Entonces elijo el tablero. Y aplicar. Así que cada vez que haga clic en él, siempre seré redirigido al tablero Déjame simplemente hacer clic en dejar porque no estamos tratando de guardar ningún cambio ahí. Ahora, aquí estamos en el tablero. Y como mencioné, en la siguiente lección, vamos a tener una visión general rápida, un recorrido rápido por el espacio de trabajo de elementor Entonces te veré en breve. 6. Recorrido por el espacio de trabajo de Elementor: Así que ahora es el momento de tener una visión general rápida del espacio de trabajo elementor Así que recuerda, teníamos una página pre generada. Así que sólo voy a ir a las páginas. Y cuando instalamos Elementor, claro, generó Elementor número ocho Pero cuando instalamos WordPress, vino con estas dos páginas pregeneradas. Voy a seleccionar esos dos. En este menú desplegable, me mudaré a Papelera, luego aplicaré. Entonces ahora nos quedamos con esta página solamente. Ahora, para editar con Elementor, puedo hacer clic en editar con Elementor, o puedo ir a Y aquí tenemos editar con Elementor. Sigue siendo lo mismo. Así que déjame hacer clic en eso. Y aquí estamos. Entonces esto aquí del lado izquierdo es la caja de herramientas. Yo lo llamo la caja de herramientas. Y si golpeo ojo de control, tenemos al navegante. Este navegador es como un mapa o una vista de pájaro de la página que tenemos aquí. Entonces como ejemplo rápido, porque vamos a mirar esto, pero hablemos del navegador. Si hago clic en esto para agregar una grilla, y tal vez agreguemos esto. Ahora tenemos una grilla. Si duplico esta grilla seleccionándola y duplicar derecha, ahora tenemos dos cuadrículas. Y ahora, esta grilla, si la expandimos está vacía porque no hemos puesto nada dentro. Si subo a este icono de aquí arriba para revelar los elementos y arrastrar este rumbo ahí dentro, Ahora notarán que tenemos un rubro ahí dentro. Aquí, si hago clic en ese plus y agrego un elemento de imagen, ahora tenemos un elemento de imagen. Si selecciono esta cuadrícula, notará que esta cuadrícula también está seleccionada. Déjame seleccionarlo. Ahora está seleccionado, y ahora como puedes ver, está seleccionado. Y esto cambia para editar la cuadrícula. Entonces estos son los ajustes de la grilla. Si selecciono esta imagen así, esta cambia para editar imagen. Entonces estos son los ajustes para la imagen. Si selecciono este texto, este cambia para editar encabezado porque se trata de un elemento de encabezado. Si selecciono esto, esto cambia para editar la cuadrícula porque esta es una cuadrícula que duplicamos a partir de esta, y está resaltada aquí mismo. Entonces esto es una vista de pájaro o un mapa, de donde estamos. Así que imagina si tienes varios elementos, 20 elementos alineados hasta el fondo, y quieres seleccionar rápidamente uno de ellos. Por alguna razón, no puedes seleccionarlo aquí mismo. Puedes entrar aquí y seleccionarlo, y ahora será seleccionado en tu espacio de trabajo. Ahora, volviendo aquí, como mencioné, siempre que queramos agregar un elemento, simplemente hacemos clic en este icono aquí mismo, revela los elementos, y puedo arrastrar tal vez un elemento de video ahí mismo. Y esa es la razón por la que a esto se le llama elemento. Nos da elementos para agregar a nuestro sitio web. Y cada vez que seleccionamos un elemento aquí arriba y lo arrastramos y soltamos en cualquier columna aquí o sección, el momento en que lo soltamos, es el elemento activo. Y los cambios a ese elemento para decirte que ahora estás haciendo cambios a ese elemento específico. Anteriormente, en mi clase más anterior, teníamos un sistema ligeramente diferente. Ahora me estoy dando cuenta de que tenemos este ítem de la grilla. No estaba disponible en las clases anteriores que publiqué, así que esto debe ser nuevo. Déjame cerrar estos en las clases anteriores que estaba usando contenedores, y eso es lo que vamos a estar usando. Podemos simplemente arrastrar elementos desde aquí y soltarlos dentro de los contenedores también. Volviendo aquí. Déjame cerrar esto. Si colapso todos estos paneles contienen los diferentes elementos que Elemental nos proporciona. Ahora, como puedes ver, tenemos los elementos de la versión pro. Solo se puede acceder a estos si has pagado por elemental pro. Pero en los paneles básicos y generales de Wpress, tenemos elementos libres Entonces si expando Wpress tenemos elementos podemos arrastrar y soltar aquí Y ahora que lo he dejado caer, ahora esto cambia para editar páginas porque este es un elemento pages. Si colapso esto y voy a general. Si dejo caer un cuadro de imagen justo debajo cuando aparece esa línea rosa, si la dejo caer ahí, esto cambia para editar cuadro de imagen porque ese es un elemento de cuadro de imagen. Y estos son los ajustes de elementos de cuadro de imagen. Ahora, una cosa que notarás de cada elemento caemos aquí es que tiene tres pestañas. Una pestaña de contenido, una pestaña de estilo y una pestaña avanzada. Entonces en la pestaña de contenido, ahí es donde proporcionaremos el contenido que debe mostrar el elemento. Entonces, por ejemplo, si es una imagen, si es una caja de imagen, claro, necesita un tipo de imagen de contenido. Entonces aquí podemos proporcionar la imagen. A modo de ejemplo, permítanme ir a mi computadora y seleccionarlo. A continuación, seleccione. Ahora ese es un contenido que hemos agregado. Pero ahora por dentro y por supuesto, el contenido también puede ser texto, y aquí está el texto. Aquí está el título, aquí está el título. Entonces esta es la provisión de contenido. Ahora, una vez que proporcionamos el contenido, podemos darle estilo, es decir podemos darle apariencia, color, tamaño, cómo queremos que aparezca. Podemos darle estilo en esta pestaña. En las pestañas avanzadas, tenemos cosas como margin y padding y responsive donde queremos que se muestre, tenemos efectos de movimiento. Entonces esa es la pestaña avanzada, y casi todos los elementos que agreguemos a la página tendrán esos ajustes de contenido, estilo y avanzado. Ahora bien, si vuelvo a la lista y colapso general, claro, si explico P, estos tienen candados y no podemos acceder a ellos. Pero ahora, recuerden, cuando estábamos instalando Elementor, cuando buscamos elementor en el directorio Wpres plug in , vimos otros Esos son complementos de terceros creados para agregar más complementos elementales a esta lista Entonces cada vez que instalemos alguno de esos enchufes, se enumerará aquí, y traerá sus propios elementos que podemos arrastrar a nuestra página elemental. Y seguir construyendo. Y algunos de esos elementos que obtendremos gratis con esos otros addons de terceros son los mismos elementos que solo están disponibles con Elementor Pro En otras palabras, aunque no podemos obtener algunos de estos como carrusel de bucle o formulario con elementor, podemos obtenerlos instalando esos complementos relacionados con elementor de terceros, y podremos usarlos de forma gratuita, y verás cómo Lo siguiente que queremos mirar es aquí abajo, tenemos el icono de vista previa. Entonces, si actualizo esta página, una vez que realice algún cambio, puede hacer clic en Actualizar y luego obtener una vista previa de los cambios. Se abrirá una nueva pestaña, y ahora así es como se ve nuestra página. Aquí tenemos el modo responsive cuando hemos creado la página y estamos listos para hacerla responsive en diferentes tamaños de dispositivo, escritorio, tablet y teléfono móvil, podemos hacer click en este. Y ahora vamos a tener estas tres opciones. Podemos cambiar a la vista de tableta y vista móvil, y podemos hacer ajustes en ese tamaño de pantalla específico, y solo afectará ese tamaño de pantalla. Así podremos ajustar cada tamaño de pantalla para que independientemente de dónde estés viendo el sitio web desde el sitio web se vea increíble. Ahora, aquí dentro. Ahora, permítanme simplemente hacer clic en eso para deshacerme del modo de respuesta. El tercero aquí es la historia. Y esto es como una cápsula del tiempo. Nos permite remontarnos a un punto en el tiempo. Entonces esta es una lista de todos los movimientos que hemos hecho desde que abrimos esta página. Recuerda que empezamos a editar comenzó. Si queremos deshacernos de cada cambio que hicimos después de agregar y del icono que agregamos, podemos hacer clic en icono agregado. Recuerda, hay un tiempo que agregamos este ícono. Cada cambio que vino después de eso ahora se descarta. Si quieres rehacer eso, podemos volver a tal vez el momento que eliminamos ese contenedor, tal vez el momento en que agregamos el cuadro de imagen, o podemos volver a la edición iniciada Esto es cuando la página estaba en blanco. Entonces esto es como una cápsula del tiempo y te permite ir hacia atrás y hacia adelante en tu proyecto. Si no te gustan los seis cambios que has hecho, podemos remontarnos al tiempo anterior a los que hiciste esos cambios. Ahora, ese es el icono para sacar a colación el navegador. Por último, aquí, podemos hacer cambios en la página. Entonces al igual que el nombre de la página, podemos cambiarlo. Mi puesto. Podemos cambiar el diseño de la página, tal vez a ancho completo elemental. Y ahora es de ancho completo que va de borde a borde y mucho más. Veremos cómo hacer todas estas cosas a medida que avanzamos. Por último, quiero que entremos en este menú de hamburguesas. Tenemos varios ajustes aquí. Nunca toco realmente estas configuraciones aquí arriba excepto entrando dentro de las preferencias del usuario, Y ahí está esta cosa que llamamos manejadores de edición. Esa es una herramienta muy útil para tener como usuario regular de primaria. Déjame mostrarte a lo que me refiero. Si volvemos adentro aquí y decimos básico, déjame arrastrar en un contenedor y dejarlo caer ahí. Ahora, tenemos un contenedor, déjame volver aquí, arrastrar un rumbo. Ahora bien, si quiero duplicar este encabezamiento, tendré que colocarlo con el botón derecho del ratón duplicar Esas son tres cosas que he tenido que hacer. Coloca el cursor derecho, haz clic en duplicado. Pero ahora, si entramos en este menú, las preferencias del usuario y habilitamos los manejadores de edición. Con esos manejadores de edición habilitados, todo lo que necesito hacer es pasar el cursor sobre esto y duplicar Coloca el cursor sobre esto, borra. Si voy aquí, esto no estaba aquí antes. Si voy a las preferencias del usuario, desactive eso, no lo tenemos aquí. Entonces si quiero duplicar este contenedor, tengo que hacer click derecho en duplicar. Pero si tenemos habilitados los manejadores de edición. Ahora tenemos este ícono extra aquí, y puedo simplemente duplicar rápidamente estas secciones. Entonces ese es el único escenario con el que suelo meterse aquí. El otro, vamos a ver la configuración del sitio a medida que avanzamos porque hay una sección en la que vamos a hablar de ello brevemente. Pero en general, eso es todo lo que quería mostrarles sobre el espacio de trabajo elemental. Vamos a llegar a ver mucho más sobre el espacio de trabajo a medida que avanzamos a medida que construimos nuestro blog. Entonces, en la siguiente lección, sigamos adelante e instalemos el tema astra. Entonces te veré en breve. 7. Instalación de un tema: Así que ahora que hemos tenido una visión general rápida del espacio de trabajo elemental, es el momento de instalar el tema de wordpress que vamos a usar. Ahora, cada sitio web de wordpress debe tener un tema porque el tema y el constructor determinan la apariencia del sitio web. Entonces para instalar un tema de wordpress, voy a entrar en temas de apariencia. Y por defecto, cada vez que instalas WordPress, siempre hay un tema predeterminado ya instalado, y suele ser el tema de ese año. Entonces ahora mismo estamos en 2024, y así el tema es 2024, y es el tema activo. El año pasado, era 2023. El año anterior era 2022. Entonces, antes que nada, de hecho, permítame simplemente eliminar esto. Entonces también eliminaré 2023. Y ahora nos quedamos con 2024. Pero queremos usar Astra. Entonces iré a agregarlos. Después iré a Astra y lo instalaré. Ahí vamos. Así que déjame hacer clic en Activar. Y aquí estamos. Entonces Astra es ahora el tema activo en nuestro sitio web, y 2024 es el tema de respaldo Entonces en caso de que, por alguna razón, Astra se rompa, deja de funcionar como se esperaba. El sitio web retrocederá al tema 2024. Así que siempre es una buena idea dejar un tema de respaldo predeterminado en tu sitio web Y básicamente, así es como instalar un tema de prensa were. En la siguiente lección, sigamos adelante y comencemos con la construcción real del sitio web. Entonces te veré en unos pocos. No vayas demasiado lejos. 8. Añade el logotipo: A. Y, bienvenidos de nuevo. Entonces ahora es el momento de crear la Navbar o lo que llamamos la sección de encabezado Déjame simplemente cambiar al sitio web de referencia. Este aquí es el encabezado del sitio web. Lo primero que vamos a hacer es agregar el logo. Pero para construir el encabezado en sí, vamos a usar un enchufe especial que es un complemento a elementor y se llama Elements Kit Elementor add elementor y se llama Elements Kit Elementor Así que entremos aquí. Vamos a los plugins, agreguemos nuevos. Y en el campo de búsqueda, busquemos a Elementor Y aquí estamos. Dónde está el kit de elementos. Sí, aquí mismo. Así que instálalo ahora. Y vamos a seguir adelante y activarlo. Ahí vamos. Entonces ahora está instalado. Entonces, ahora para construir un encabezado, sigamos adelante y colocemos el cursor sobre el kit de elementos y elijamos el encabezado pie Y ahora tendremos que pasar por este conjunto de kits de asistente para elementos, solo para asegurarnos de que algunos de estos widgets estén disponibles en el front-end en nuestro editor por defecto, ya que si vamos con la configuración básica, algunos de los widgets aquí no estarán encendidos por defecto, lo que no estarán disponibles para nosotros en el editor. Entonces me gusta usar avanzado. Y si solo vuelvo a cambiar esto, creo que uno de estos se encendió. Déjame volver a lo básico. Mira el constructor de widgets. Ahora está encendido, y también lo son muchos otros que estaban apagados en el escenario básico. Siguiente paso. Siguiente paso, siguiente siguiente. Y por último, el kit de elementos Now está configurado y listo para que lo usemos en la parte frontal. Entonces vamos a la cabeza de pie de página. Ahora aquí es donde se supone que debemos ver una lista de todos los encabezados y que hemos creado para nuestro sitio web Vamos a deshacernos de estos anuncios. Ahora digamos agregar nuevo. Vamos a darle un nombre. Encabezado y el tipo es encabezado. Cuando estemos construyendo el poder seleccionaremos el pie de página, y queremos que esté disponible en todo el sitio web. Estos otros solo están disponibles con la versión pro del plug in. Ahora vamos a activarlo. Puedes desactivar tu cabeza toda tu sección de encabezado cuando tal vez estés haciendo algún mantenimiento en el encabezado y no quieras que gente pueda verlo Pero ahora lo queremos activo. Ahora, podemos guardar los cambios y se enumerará aquí, pero también podemos ir directamente a editar el contenido, y Elementor lo guardará automáticamente La encontraremos aquí la próxima vez. Pero ahora, al hacer clic en Editar contenido se llevará al front-end donde ahora podemos comenzar a construir el encabezado. Si colapso todo aquí, todos estos paneles, Como mencioné durante la gira elementar, cada vez que agreguemos un elemental relacionado agregue on, va a ser listado aquí Y así aquí estamos Kit de Elementos y Kit Elementos encabezado pie de página. Así que aquí podemos obtener todos los elementos que necesitamos para construir esta sección de encabezado. Entonces uno de los elementos vamos a conseguir con esto, y lo mencioné, vamos a poder obtener elementos que de otro modo tendríamos que pagar para usar en Elementor Pro es el menú de navegación del kit Elements, porque si tecleamos aquí, NV Verás que tenemos menú NAV. Esto es lo que obtenemos con Elementor Pro. Por lo que no está disponible para nosotros con una versión gratuita de elementor, pero Elements kit NAV está disponible Entonces ahora comencemos con el logo. Así que voy a seguir adelante y hacer clic en Plus. Y recuerden, ya mencionamos anteriormente, Elementor no tenía esta opción de grilla, pero ahora sí Y eso es algo bueno porque cada enchufe necesita actualizarse y mejorarse continuamente. Y Elementor es uno de los plug ins más actualizados y mejorados del mercado Por eso es tan popular. Cada nueva semana, tienen algo nuevo, algo increíble que agregar a elementor Y así, Grid es lo más nuevo. En los meses anteriores, estábamos usando Flexbox. Y así si hago clic en Flexbox, tendremos estas opciones Si tomaste mi clase anterior, ya conoces estas estructuras de contenedores. Para que puedas volver atrás y seleccionar cuadrícula. Y ahora tenemos estas nuevas estructuras con las que no he jugado. Probablemente voy a cubrir las cuadrículas en la siguiente clase que voy a publicar, pero en esta clase, sólo vamos a estar usando las estructuras flexbox Así que tenlo en mente. Y ahora para empezar, Porque nuestro encabezado tiene tres secciones. Tres columnas, una, dos, tres. Esos son tres contenedores. Vamos con esta estructura. Entonces voy a hacer clic en eso, y ahora tenemos esos tres contenedores. En el primer contenedor, sigamos adelante y hagamos clic en ese signo más. Y aquí dentro, solo buscaré, de hecho, déjame colapsar estas cosas y abrir básico. Y ahora, sigamos adelante y seleccionemos imagen y suéltela ahí. Eso es un elemento de imagen. Y ahora podemos seguir adelante y seleccionar nuestro logo. Ahora, todavía no tengo ninguna imagen porque esta es una instalación nueva. Para que pueda ir a seleccionar archivos. Y yo había preparado esta carpeta que tiene todas las imágenes que utilicé en la página web de referencia, y la voy a poner a disposición debajo de este reproductor de video. Así que consulta bajo la pestaña de proyectos y recursos. Allí encontrarás el enlace de descarga. Si quieres usar mis imágenes, pero también puedes usar las tuyas. Entonces seleccionaré el logo. Y aquí vamos, haz clic en Seleccionar, y ahora tenemos nuestro logo. Actualiza eso. Y vamos a previsualizar los cambios, y así es como agregar el logotipo. Entonces, en la siguiente lección, sigamos adelante y agreguemos un elemento NV. Este elemento conformado por artículos. Nos vemos en breve. 9. Añadir un elemento de navegación: A, bienvenido de nuevo. Entonces, ahora que hemos agregado el logotipo de nuestro sitio web, es el momento de agregar el menú NAV. Así que volviendo aquí, vamos a ir a nuestro editor, y por supuesto, ahora aquí, voy a escribir NV y vamos a arrastrar el elemento del menú del kit elementos NAV a esta etapa. Y una vez que lo dejamos ahí, ahora es el elemento activo. Entonces ahora, la primera opción aquí en la configuración del menú de contenido es seleccionar menú. Cuando hacemos clic en este menú desplegable, se supone que debemos ver una lista de menú que hemos creado en el tablero. Pero ahora no tenemos ningún menú, lo que significa que tenemos que ir y crearlo. Entonces, primero que nada, actualicemos eso. Y quiero cerrar nombre chip y la ficha Softacular. Entonces nos quedamos con esto. Y quiero hacer clic en este menú de hamburguesas, luego salir al tablero. Y aquí estamos. Déjame simplemente cerrar estas cosas. Incluso eso. Entonces ahora queremos crear un menú. Así que vamos al menú de apariencia. Y aquí estamos, como puedes ver, crea tu primer menú a continuación. Para que podamos seguir adelante y darle a nuestro menú un menú con nombre. O digamos simplemente menú principal. Y ahora, una cosa que notarás aquí es darle un nombre a tu menú, luego hacer clic en Crear menú. Así que vamos a hacer clic en Crear Menú. Pero antes de hacer eso, fíjate ahora mismo que tenemos agregar elementos del menú, y esta sección está graduada, y eso es porque necesitamos crear el menú. Entonces déjame hacer clic en Menú principal para hacer el menú principal, nuestro menú principal, luego crear menú. Y ahora, esta área está activa, lo que significa que ahora podemos agregar elementos de menú a nuestro menú, como esto dice, agregar elementos de menú desde la columna de la izquierda, esta columna. Entonces, si colapso eso, un elemento del menú puede ser una página web, una entrada de blog, un enlace personalizado, una categoría, lo que quieras. Pero en este caso, vamos a usar páginas, las páginas donde hemos creado. Pero aún no tenemos páginas. Entonces eso significa que tenemos que ir y crear un montón de páginas porque si cambiamos a nuestro sitio web de referencia, estas son páginas web. Si hacemos clic en artículos, seremos llevados a la página de artículos. Déjame hacer clic en eso. Aquí estamos. Entonces esta es la página de archivo de artículos. Entonces, esencialmente, queremos crear páginas web. Entonces, ahora que ya hemos creado nuestro menú y está guardado, podemos ir de manera segura a las páginas, pasar el cursor sobre las páginas Haga clic derecho en Agregar Nuevo. Abrir enlace en páginas de nueva pestaña, haga clic derecho en Abrir enlace en nueva pestaña. Páginas, un nuevo lápiz Enlace en Nueva Pestaña. Entonces ahora tenemos el Déjame cerrar eso. Ahora tenemos estas tres páginas que estamos a punto de crear. Vamos a crear la página de inicio artículos, videos y contacto. Yo sólo voy a publicar. Y ahora eso está publicado. Así que vamos a crear uno más, haga clic derecho en Agregar nuevo. Esto es opcional. Si no tienes videos quieres compartir. Todo bien. Ahora, si volvemos aquí y hacemos clic en páginas o en todas las páginas, ahora vamos a ver todas las páginas que hemos creado. Ahora, recuerde, cuando instalamos WordPress, vino con algunas páginas preinstaladas, como la página de muestra y la página de borrador de política de privacidad. Entonces esta es la página del elemento que se generó cuando estábamos instalando elemento. Entonces voy a seleccionar eso. Esos tres editan este menú desplegable, se mueven a la basura y luego aplican eso. Ahora bien, estas son las cuatro páginas que hemos creado. Ahora podemos volver al menú de apariencia, porque ya creamos nuestro menú, ahora podemos agregar estos elementos al menú. Seleccione todos ellos y luego agréguelos al menú. Aquí vamos. Ahora podemos arrastrar para reorganizarlos. El video llega después del contacto. No. El contacto es el último elemento. Después guarda el menú. Ahora podemos seguir adelante y cerrar todos estos Ahora, volviendo a Elements kit header footer. Aquí está nuestro encabezado. Podemos hacer click en editar con Elementor, pero quiero abrir link en nueva pestaña para que podamos dejar intacto el dashboard Entonces cambiemos al editor de encabezado. Y aquí estamos. Aquí es donde lo dejamos. Seleccionaré el elemento NAV. Y ahora en este menú desplegable aquí está el menú principal. Seleccionemos eso, y ahora está mostrando los elementos del menú. Vamos a alinearlo a la derecha así. Y así es como agregar un menú NV. Ahora, vamos a darle estilo. No te preocupes. Como puedes ver, nuestro sitio web de referencia tiene una bonita zona de nV bien alineada. Pero esto se ve un poco raro. Nosotros vamos a encargarnos de eso. Pero así es como agregar el elemento n a nuestro sitio web. En la siguiente lección, sigamos adelante y agreguemos este botón aquí mismo que trae a colación esta barra lateral con algo de contenido extra en el lateral. Se llama el elemento off Canvas. Nos vemos en breve. 10. Button fuera de la tela: Entonces ahora es el momento de agregar este botón aquí mismo que trae a colación esta barra lateral o esta barra lateral off Canvas que tiene algunos artículos extra. Así que volviendo a nuestra estación de trabajo. Aquí estamos, vamos a usar otro elementor enchufe relacionado Así que volvamos aquí, los plugins agregan nuevos. Digamos elementor Royal elemental agrega y plantillas. Entonces voy a instalar eso ahora. Cuenta con 300,000 instalaciones activas, muy populares. Y voy a seguir adelante y activarlo. Entonces, saltemos esto. Y ahora aquí estamos. Estas son plantillas. Entonces, sigamos adelante al front-end y actualicemos este editor. Y ahora vamos a refrescar esta página. Todo bien. Así que colapsando todo aquí, Aquí estamos Royal agrega y Royal agrega salarios de prima. Estos son premium. No podemos tenerlos. Pero al menos quería mostrarles que aquí estamos. Tenemos tantos elementos gratuitos para usar aquí, y uno de ellos es el off Canvas. Ahora, para que tu trabajo sea más rápido solo tipo de contenido Canvas, aquí estamos. Lo arrastraré y soltaré aquí mismo. Y ahí vamos. Entonces ahora, ¿qué dice esto? Artículo popular. Entonces, si bien todavía está seleccionado, es el elemento activo aquí. Podemos darle un nombre diferente justo debajo del título del botón de contenido. Digamos artículos destacados destacados. Yo actualizo eso, y podemos alinearlo a la derecha. Entonces justo abajo aquí, tenemos una línea, derecha, y ahora va a ser empujada para ese fin. Ahí vamos. Así es como agregar el off canvas. Por supuesto, ahora cuando hacemos clic en él, solo va a traer una barra lateral en blanco, y vamos a poblar esto con el contenido que queramos Pero lo haremos en una lección posterior cuando tengamos artículos que mostrar. Pero puedes exhibir lo que quieras, no solo artículos. Entonces por ahora, solo queríamos mostrar ese botón para que podamos tener un encabezado completo. En la siguiente lección, sigamos adelante y estilizemos el encabezado. Entonces te veré en breve. 11. Dale estilo al encabezado: Entonces ahora es el momento de darle estilo a la sección de encabezado porque ahora mismo, cada elemento se ve un poco apagado. Entonces, cuando añadimos un contenedor o sección o columna, viene con algún relleno y márgenes predeterminados. Cada elemento tiene relleno y márgenes aplicados por defecto, y podemos ajustarlo. Entonces antes que nada, si seleccionamos el kit elemento por elemento, como puedes ver a continuación aquí, tiene un margen enorme y aquí arriba. Entonces, si vamos a avanzado después de seleccionar este avanzado, rompamos eso y aquello. Y ahora vamos a reducir el margen inferior hasta ese punto, y también vamos a reducir el margen superior hasta ese punto. A lo mejor digamos 4040, así. Ahora una cosa acerca de los contenedores es que puedes alinear los elementos que están dentro. Entonces, si seleccionamos este contenedor, y el layout, podemos justificar el contenido y podemos darle una dirección al contenido. Te voy a mostrar donde aplican estas. Pero por ahora, veamos justificar el contenido. Como puedes ver aquí, tenemos este ícono que tiene una línea superior más larga para mostrar que el elemento está alineado en la parte superior o justificado en la parte superior. En este tercer icono aquí, la línea más larga se encuentra en la parte inferior para mostrar que los elementos dentro de este contenedor, contenedor seleccionado estarán en la parte inferior. Entonces si selecciono eso, todo dentro será empujado hacia abajo, y tenemos este que muestra centro. Entonces, si hacemos clic en eso, todo estará alineado al centro en el eje vertical. Entonces eso es lo que queríamos. Hagamos lo mismo para esto, seleccione este contenedor que sostiene este elemento de lona. Vamos a justificarlo y alinearlo en el medio. Hagamos lo mismo con el logo, Align está en el medio, pero no notarás ningún cambio porque está ocupando el 100% de la altura y el ancho. Entonces ahí vamos. Si digo actualizar, y previsualizar los cambios. Ahora, todo está correctamente alineado. Ahora, a medida que avanzamos a la sección de héroe y otras secciones, vamos a hacer ajustes a esta sección de encabezado porque recuerda, en nuestro sitio web de referencia cuando comenzamos a desplazarnos, necesita encogerse En primer lugar, como has notado, se encoge, y también debe permanecer pegajoso en la parte superior. Entonces vamos a ver cómo hacerlo en lecciones posteriores. Por ahora, solo queríamos asegurarnos de que todo esté correctamente alineado. Entonces eso es todo por ahora. Pero antes de irnos, notarás aquí mismo que no tenemos un espaciado tan grande como lo hacemos en nuestro sitio web actual. Así que vamos a quitar eso. Entonces quiero seleccionar este contenedor que está sosteniendo todo, y quiero ir a avanzado y eliminar el relleno predeterminado, y ahora colapsa todo Porque como digo, cada elemento que añades tiene algún relleno por defecto y margen aplicado a él. Entonces, actualicemos eso. Y repasemos los cambios. Ahí vamos. Entonces eso es lo que queríamos. Entonces así es como agregar el encabezado. En la siguiente lección, sigamos adelante y comencemos a trabajar en la sección de héroes. Entonces si nos vamos a casa, Esta de aquí es la sección de héroes. Veamos cómo crear esta parte. Entonces te veré en breve. No vayas muy lejos. 12. Configurar la página de inicio de WP: Ya es el momento de trabajar en la página principal, y comenzaremos con esta sección de héroes aquí mismo. Tiene algunos patrones agradables en el fondo, y luego algo de texto de encabezado y una breve descripción. Ahora, mientras todavía estamos aquí en el sitio web de referencia, si hacemos clic en el blog de acción o en el logotipo de nuestro sitio web, estamos redirigidos a la página principal Y este es nuestro dominio de página principal, tu sitio web Ahora, cada vez que las personas ingresen a tu dominio.com, deben ser llevados a esa página de inicio que seleccionaste Pero cuando volvemos a nuestro sitio web en este momento, no tenemos nuestro propio conjunto de páginas de inicio. Hay una página de inicio predeterminada establecida por WordPress cuando la instalas. Déjame mostrarte. Entonces si vuelvo a nuestro editor, selecciono este logo, podemos convertirlo en un enlace. Entonces seleccionaré URL personalizada y podemos ingresar la URL de nuestra página de inicio. Entonces va a ser wordpress evthing.com. Y en tu caso, va a ser un sitio web.com. Actualiza eso y vamos a previsualizar los cambios. Entonces ahora, cuando pasamos el cursor sobre esto, note que cambia a nuestra mano para demostrar que puedes hacer clic en eso Y si hacemos clic en eso, nos va a llevar a la página de inicio predeterminada de hello world generada por W pulse cuando la instale. Pero eso no queremos. Estamos trabajando en una página de inicio diferente que vamos a construir con elementor, así que tenemos que configurarla Volviendo al interior de nuestro tablero, vamos a las páginas. Recuerda que creamos nuestra propia página de inicio, y esta es la página de inicio que queremos establecer como la página de inicio real a la que apunta este nombre de dominio. Así que volviendo aquí para configurarlo, vamos a ajustes leyendo, vamos a eliminar esto. Y leyendo la configuración, tu página de inicio muestra una página estática, y podemos seleccionarla aquí mismo, página de inicio. Cambios de venta. Ahora, si vuelvo aquí y refresco esta página, Y luego vamos a previsualizar los cambios. Si hago clic en el logo aquí, será redirigido a la página de inicio que creamos Esta es la página de inicio anterior, y ya no estamos usando eso. Entonces ahora que tenemos nuestro propio conjunto de páginas de inicio, ahora podemos construirlo con elementor y eso es lo que vamos a hacer en las próximas lecciones Entonces te veré en breve. No vayas demasiado lejos. 13. Configuración básica de la página de Astra: A, bienvenido de nuevo. Así que ahora que hemos establecido nuestra página de inicio, y nuestro nombre de dominio ahora apunta a la página que vamos a construir con Elementor Es hora de editarlo y de hecho construirlo con elementor Pero antes de hacer eso, necesitamos hacer algunas configuraciones en el back end y serán ajustes de Astra porque el tema es Astra y algunos ajustes de Wpress Entonces para ir al editor de back end, podemos ir a editar página. Haga clic en eso. Y ahora aquí estamos. O mientras estemos dentro del tablero, podemos ir a las páginas publicadas. Puede hacer clic en publicar o simplemente hacer clic en las páginas para ver las páginas publicadas, y aquí está la página principal, haga clic en Editar. Y estamos en el mismo lugar. Así que permítanme hacer clic de nuevo, y ahora estamos tratando con este de aquí. Ahora, antes de continuar, cambiemos a este editor de encabezado. Ahora ya terminamos con el encabezado por ahora, así que no necesitamos este editor porque aquí no es donde vamos a construir la página de inicio. Este era solo el editor solo para el encabezado. Así que sólo puedo cerrar esto y esto. Entonces ahora nos quedamos con esto. Así que recuerda, instalamos Astra porque es nuestro tema. Tiene algunas configuraciones que necesitamos establecer. Entonces entrando aquí, verás que tenemos este ícono. Si selecciono eso, debajo del contenedor, tenemos que ir y seleccionar ancho completo. Eso significa que nuestro sitio web o página web se ejecutará de borde a borde, como se puede ver en el patrón de fondo. Colapsar eso. Vamos a la barra lateral. No queremos que tenga barras laterales porque vamos a construir nuestra propia barra lateral. No vamos a usar las barras laterales por defecto eran. Entonces ninguna barra lateral colapsa eso. Y no te preocupes por estos ajustes aquí. estilo de contenedor solo se aplicará cuando el diseño se establece normal o estrecho estrecho o normal, pero hemos seleccionado el ancho completo. Así que no necesitamos meternos con eso. El mismo caso se aplica a la barra lateral. Debido a que no hemos seleccionado ninguna barra lateral, no necesitamos preocuparnos por esto. Colapsar eso. Entonces necesitamos desactivar estos tres elementos. Ahora, antes de que los deshabilitemos, permítanme actualizar eso. Y vamos a ver la página haga clic derecho en abrir enlace en nueva pestaña. Ahora que hemos hecho la página de ancho completo bajo contenedor, ancho completo, observe ahora el título de inicio se ha movido al borde. Otra cosa que notarás aquí es que tenemos este AstraG de vuelta aquí, necesitamos deshabilitar todos esos porque vamos a construir nuestros propios encabezados y todas estas otras partes Entonces si desactivo esa actualización, Volviendo aquí y refrescando la página. Ahora el pie se ha ido. Este es el encabezado. Sigamos adelante y deshabilitemos eso. Actualiza eso. Vuelve aquí, refréscate. Oh, espera. Esta es el área de pancartas. Déjame desactivar esa actualización. Refresca eso. Ahí vamos. Entonces ahora tenemos un lienzo en blanco para trabajar mientras construimos nuestra página. Volviendo aquí, veamos qué más necesitamos establecer. Creo que creo que tenemos todo cubierto, pero también necesitamos establecer una configuración más aquí, y esa es la plantilla. Pero esta es una configuración de wordpress, no una configuración astra, pero es crucial. Entonces plantilla, tenemos que ir con elemento ancho completo. Actualiza que esta opción está disponible cuando instalas elementor Si no has instalado elementor, no tendrás esta opción de plantilla. Ahí vamos. Ahora vuelve aquí, Control R para refrescar la página, y ahora tenemos todas las configuraciones básicas del conjunto de temas. Ahora estamos listos para comenzar a construirlo con elementor, y vamos a hacer lo mismo al trabajar en todas estas otras páginas En la siguiente lección, veamos cómo crear esta sección de héroes. Te veré en breve. 14. Sección del héroe de la página de inicio: Entonces ahora es el momento de comenzar a trabajar en la sección de héroes. Así que volviendo a nuestra estación de trabajo. Déjame cerrar esto. Y mientras todavía estamos aquí en el editor de back end de la página de inicio, haré clic en Editar con Elementor. Y aquí estamos. Este es el editor. Y claro, ahora no podemos editar el encabezado porque este no es el editor que usamos para construir el encabezado. Construimos el encabezado por separado. Entonces aquí mismo estamos construyendo la página. Entonces voy a hacer clic en esto para agregar una caja flexible y vamos a ir con esta estructura dirección bajando. Entonces voy a seleccionar eso porque como puedes ver aquí, todo va a la baja. Tenemos un ícono, luego debajo de él, tenemos el encabezado, y debajo de él, tenemos eso. Entonces voy a seleccionar eso. Ahora dentro de aquí, voy a hacer clic en ese signo más. Entonces voy a escribir icon, arrastrar este elemento de icono aquí, y cuando lo soltemos, sigue siendo el elemento activo aquí. Podemos cambiarlo. Yo quería escribir leer. Tal vez puedas seleccionar algo como esto, pero quiero texto para representar artículos. Entonces voy a seleccionar eso. Inserte, y ahí vamos. A continuación, seleccionemos un encabezado. Entonces para traer de vuelta elementos, recuerda, decimos que puedes seleccionar eso, y ahora voy a dar click en un encabezado. También volveré otra vez y seleccionaré un editor de texto, AKA, un párrafo. Ahí vamos. En primer lugar, voy a seleccionar que vaya al estilo, Allige al centro Seleccione esto, vaya al estilo, A alinéelo al centro. Ahora, volviendo a este contenido, queremos cambiarlo a uno H porque cada página necesita tener un H un elemento. Un elemento H one es bueno para el SEO porque un elemento H one en cada página le dice los motores de búsqueda de qué trata esa página. Es como un resumen de toda esa página. ¿De qué trata esta página? Y así, si tienes varias páginas web, cada página con su propio H un encabezado, especificando de qué se trata cada página, los motores de búsqueda pueden tener una idea clara de lo que trata tu sitio web y recomendar tu sitio web en los resultados de búsqueda. En otras palabras, tener un H uno en cada página es bueno para el SEO de tu sitio web. Entonces mientras se selecciona esto, iré a aquí y seleccionaré esta copia que. Entra dentro de esta caja y pegarla aquí. No voy a pegarlo aquí porque cuando lo pegue aquí, vendrá con cualquier preformado que tuviera Entonces si lo pego aquí, como pueden ver, tiene su preformado y hacer eso Así que siempre es una buena idea pegar tus cosas aquí. Pero si quieres editarlo, puedes hacer clic en él y teclearlo dentro del propio elemento. Así que vuelve al estilo, alinéalo en el centro. Quiero seleccionar ese texto. Carpa. Seleccione el contenido de este elemento de texto. Seleccione toda esta eliminación. Entonces Control Shift V, no control V. Control Shift V, lo pegaremos sin ninguna preformity Ahora, volvamos a esto y pasemos al color del texto. Ahora, recuerda que teníamos esa carpeta. Te dije que puedes encontrar a continuación este reproductor de video en la pestaña de proyectos y recursos. Voy a abrirla. Y ahí dentro, encontrarás estos códigos de color que utilicé para el sitio web original. Voy a escoger esta copia azul marino. Y para este color, recuerda que seleccioné esto, fui a encabezado de estilo, color de texto. Voy a pegar eso aquí, y ahora es ese color. Ahora, también quiero cambiar esta fuente tipográfica a Mont Monat, pero quiero aumentar el peso a 900, que es negra, y también quiero aumentar el tamaño a tal vez Actualiza eso. Revisemos los cambios. Y ahí vamos. Pero ahora, por supuesto, necesitamos agregar algo de respiro aquí arriba. Entonces déjame seleccionar este el contenedor que lo está guardando todo. Y ahora queremos ir a avanzado y darle un poco de relleno en la parte superior e inferior. Recuerda, tiene algún relleno por defecto. Entonces cuando rompa eso, se quitará el acolchado en los lados y en la parte superior. Pero lo que queremos hacer es ir arriba y decir 50 o digamos 100. Y para el fondo, no hay problema. Simplemente podemos dejar eso. De hecho, déjenme decir ocho hasta ahí. Ahora bien, si bien esto todavía está seleccionado, quiero que agreguemos este patrón de fondo. Entonces mientras se selecciona, voy a ir al tipo de fondo de estilo. Seleccionaré este clásico. Revelará más escenarios. Y aquí podemos agregar una imagen. Entonces iré a subir archivos, seleccionaré archivos dentro de aquí. Se me olvidó poner eso aquí. Entonces déjame ir a activos, FreeP ¿Dónde puse eso Entonces aquí estamos. Lo he encontrado. Volver a los activos, activos finales, pegarlo ahí, y ahora es el fondo de la sección héroe. Entonces haré doble clic en eso, seleccionaré, y ahora está apareciendo. Ahora, déjame cerrar esto. Queremos ir a la posición. Quiero que esté así en el centro centro. Quiero ir a repetir, decir no repetir. Y para el tamaño de la pantalla, intentemos cubrir. La cubierta se ve bien. ¿Qué pasa con contener? No, se supone que es tapadera. Actualiza eso. Y déjame aumentar el acolchado en la parte inferior apenas un poco. Entonces digamos 50 así, actualicen y previsualicen los cambios. Ahí vamos. Entonces nuestra sección de héroes ya está lista. Se ve increíble. De hecho, me gusta más que el sitio web de referencia. Sí, se ve increíble. Entonces así es como agregar la sección de héroes. En la siguiente lección, empecemos ahora a trabajar en esta barra lateral, la barra lateral del autor. Te veré en breve. 15. Barra lateral de la página de inicio: sobre mí: Entonces ahora es el momento de crear esta barra lateral. Entonces volviendo a nuestro editor, aquí estamos. Volvamos aquí. Ahora, se dará cuenta de que tenemos dos contenedores que contienen estos dos conjuntos de contenido. Entonces el primer contenedor es este, y este es el otro contenedor. Entonces es un contenedor de doble columna. Déjame mostrarte entrando aquí, vamos a seleccionar flexbox. Esta estructura así. Ahora bien, este sitio puede ocupar tal vez digamos 40%. Asegúrate de que esto sea en porcentaje, no estas otras unidades, 40%, y esto debería ocupar 60% para hacer el 100%. Así como así. Entonces ahora, aquí dentro, podemos seguir adelante y agregar un contenedor. Entonces ese es un contenedor dentro de otro contenedor, pero este contenedor está vacío. Aquí es donde vamos a poner este post grid. Entonces volviendo aquí, podemos antes que nada, darle al contenedor una columna de fondo, este color. Y ese color está aquí, barra lateral copia de fondo porque esa es la barra lateral. Entonces mientras esto todavía está seleccionado, el contenedor interior va a estilo, tipo de fondo color. Pasemos eso ahí dentro, y ahora ha cambiado de color. Seleccionemos también el borde de la barra lateral. Copia eso porque como puedes ver, tiene un color de borde. Así que volviendo aquí, voy a ir a los valores predeterminados del borde tipo de borde, sólido, y ahora eso revelará el color del borde Entonces voy a pegar eso ahí dentro. Por supuesto, si actualizamos y revisamos los cambios, La frontera es demasiado gruesa. Entonces, sigamos adelante y digamos que necesitábamos ser uno. Actualiza eso, y vamos a previsualizar los cambios, así como así. Pero puedes hacerlo tan grueso como quieras. Otra cosa es que tiene estas esquinas afiladas. Queremos que sean suaves, igual que aquí. Entonces volviendo a nuestro editor, radio fronterizo, vamos a darle 20. Actualiza eso y vamos a previsualizar los cambios. Ahí vamos. Ahora bien, si solo vamos a agregar un encabezamiento aquí. Déjame dejarla caer ahí. Agreguemos también algunos textos. Déjame agarrar este texto. Copia. Seleccione los textos, haga clic derecho en pegar, actualizaciones. Vista previa de los cambios. Tiene esa esquina redondeada. Pero lo siguiente que queremos hacer es ir al sitio web de referencia. En primer lugar, permítame simplemente copiar este texto. Seleccione esto. Elimine eso, luego Control Shift V, pegarlo ahí. Pero ahora para el estilo, quiero que esté alineado a la izquierda. También volvamos aquí sobre mí. Déjame copiar eso. Seleccione esto entonces aquí a mí. ¿Qué más tenemos? Tenemos esta imagen del autor y su nombre y título. Entonces aquí abajo, lo que queremos hacer es agregar un contenedor. Entonces voy a dejar caer un contenedor aquí. Y ahora, recuerden, una cosa sobre los contenedores es que pueden contener otros contenedores, esto está dentro de este, que está dentro de este. Entonces aquí dentro, podemos tener dos contenedores más. Uno para la imagen y otro para el texto, el nombre. Bien. Lo dejaré caer justo debajo de esto. Entonces ahora tenemos estos dos contenedores dentro de esto. Ahora bien, si selecciono el contenedor exterior que está conteniendo estos dos nuevos, este contenedor, y vamos a la dirección de diseño. Recuerden que mencioné vamos a hablar de esto. Ya vimos lo que justifica. Dirección significa que puede cambiar de izquierda a derecha de arriba a abajo de izquierda a derecha u horizontal. Eso significa que ahora están uno al lado del otro. También podemos cambiarlos a verticales. Eso es hacia abajo. Lo que queremos es uno al lado del otro. Así como así. Ahora podemos arrastrar esto para hacerlo más pequeño aquí, podemos poner una imagen, así como así. Aquí, antes que nada, permítame seleccionar este texto para darle estilo. Déjame escoger este color azul marino. Copia ese estilo de texto color que. Entonces también quiero ir a la tipografía y decir, con 900, pero tiene que ser Montserrat Así como así. Pero ahora, hagámoslo tal vez de esa talla. A ver. Sí, no es tan grande. Quizá talla 20. Ahora, notarás que todo está demasiado cerca del borde. Actualiza eso. Vista previa de los cambios. Todo está demasiado cerca del borde. Lo que queremos hacer es seleccionar este contenedor que los sostiene, la barra lateral ahora, acolchado avanzado. No rompamos este vínculo. Entonces, lo que sea que escribamos en una celda se aplica al resto, y vamos a darle un relleno de 3030 Actualiza eso. De hecho, esto necesita ocupar Vamos al contenedor más exterior que sostiene el contenedor de la barra lateral, y hagamos que sea 30% Eso quiere decir que deberían ser del 70%. Actualiza eso. Y ahora se ve más como una barra lateral, así como así. Entonces ahora sigamos adelante y agreguemos una imagen aquí. Seleccionando el elemento de imagen. Voy a seleccionar que vaya a APLODFiles. Seleccione imágenes. Ahora voy a necesitar ir a Así que encontré mi imagen. Ahí vamos. Seleccione, y ahora esa es mi imagen. Déjame duplicar esto. Ahora, te darás cuenta aquí mismo, no tengo esas asas de edición que mencioné en el recorrido por el espacio de trabajo. Quiero habilitarlos. Entonces entrando aquí, las preferencias del usuario, habilitan los manejadores de edición. Seleccione eso. Ahora puedo duplicar esto, arrastrarlo y soltarlo ahí, y ese se convierte en mi nombre. Copia eso. Pega eso ahí dentro, luego experto en productividad. Ese es tu título. Quiero duplicar eso y pegar eso ahí dentro, pero quiero que sea muy pequeño, así que la tipografía Ahora, notarás que el espaciamiento entre estos dos es demasiado grande. Entonces, si selecciono esto y voy a huecos y el layout, este contenedor que está sosteniendo los dos huecos de disposición a continuación justifican, podemos eliminar esta brecha por defecto de 20. Así que vamos a hacer que tal vez cinco o tal vez cero. Entonces no tenemos toda esa brecha. Si bien esto es seleccionado, quiero hacerlo más pequeño también. Así que así, selecciona esto. Ahora, seleccione el contenedor que les está sujetando este contenedor, y queremos justificar todo en el centro verticalmente así. Así que selecciona esto. demasiado avanzados y reduzcamos el margen inferior. Entonces los acercamos más. Actualiza eso. seleccionar este contenedor que los sostiene. Quiero ir a avanzado y quitar ese relleno para acercar la imagen a esta línea invisible. Ahora déjame seleccionar este contenedor avanzado. Vamos al margen izquierdo. Vamos a reducirlo hasta ese punto. Actualiza eso Revisemos los cambios. Ahí vamos. Creo que hemos creado la barra lateral, pero hagamos esta fuente. Editemos ligeramente la fuente. Entonces voy a volver aquí, seleccionar esta fuente, ir a estilo, Tipografía cambiar eso a Permítame también seleccionar esto. Cámbialo a Montserrat. Entrar. Pero ahora te darás cuenta en el sitio web de referencia, es más oscuro y es ese azul marino. Entonces déjame elegir esta copia azul marino. Vuelve aquí. Mientras se selecciona esto, iré al color del texto, pegaré eso, pero quiero entrar aquí y que sea 600, semi negrita. Actualiza eso. Yo haré lo mismo para esto, seleccione esto. Ahora puedo repetir los mismos pasos o puedo seleccionar este texto click derecho copiar. Seleccione, haga clic derecho al estilo de pegar. Básicamente, así es como crear la barra lateral. En la siguiente lección, veamos cómo crear los posts recientes. Barra lateral. Porque necesitamos agregar estos artículos recientes, y hay algunas cosas técnicas que debemos mirar. Entonces te veré en breve. 16. Barra lateral de la página de inicio - Entradas recientes: Entonces ahora es el momento de trabajar en esta barra lateral de artículos recientes. Saltando de nuevo aquí, una cosa que olvidé hacer es seleccionar este texto e ir al margen avanzado, eliminar o reducir el margen inferior así. Sólo así tenemos este espacio más pequeño aquí. Vamos a aumentarlo ligeramente hasta ese punto, actualizar eso. Vista previa de los cambios. Ahora es un espaciado uniforme en comparación con la parte superior. Ahí vamos. Lo que tengo que hacer es duplicar esto justo abajo, así como así porque lo que queremos hacer es crear esto. Voy a seleccionar estos artículos recientes, copiar eso. Selecciona esto aquí, pega eso, y voy a quitar esto. Ahora nos quedamos a eso. Déjame simplemente quitar eso también. Actualiza eso. Y ahora, recuerden que hablamos de los complementos elementales. Recuerda que agregamos kit de elementos. Vamos a usar un elemento de kit de elementos para agregar estas publicaciones recientes. Así que volviendo aquí, buscaré lista. Yo sólo voy a escribir lista, y luego aquí estamos. Lista de publicaciones. Así que voy a arrastrar esto y soltarlo justo debajo de artículos recientes. Permítanme obligarlo a continuación de artículos recientes. Bien, déjeme dejarlo arriba. Es un poco complicado dejarla caer ahí. Entonces arrastraré esto y lo pondré por encima de él así como así. Ahora, mientras se selecciona esto, iré a seleccionar publicaciones. Puesto de categoría. Y ahora podemos seleccionar las diferentes categorías de posts que queremos mostrar aquí. Ahora, aún no tenemos ninguna publicación, ningún artículo todavía. Entonces vamos a dejar esto así porque vamos a estar haciendo eso en la siguiente sección. Pero ahora mismo, al menos lo hemos agregado, vamos a hacer algo al respecto en breve. Entonces básicamente, ahora hemos preparado el lugar que llevará a cabo el reciente post en la barra lateral. En la siguiente lección, sigamos adelante y construyamos nuestro primer post de blog, AKA, un artículo. Nos vemos en breve. 17. Crear una publicación: Entonces ahora es el momento de construir nuestro primer post. Y claro, si volvemos a nuestro sitio web de referencia, este es un solo post. Este es otro post, y este es otro post. Entonces, déjame ver. Déjenme abrir esto. Si abrimos eso para leerlo, ahí vamos. Entonces así es como se ve. Tiene esta imagen destacada. Entonces tenemos barras laterales aquí que tomamos prestadas de la otra página Nos vamos a deshacer de esto. Tenemos el título. la fecha en que se publicó y la categoría en la que cae. Entonces tenemos su contenido. Abajo aquí, tenemos el nombre del autor y nuestra comida. Entonces vamos a ver cómo crear este único post. Entonces esto es lo que llamamos una imagen destacada, y vamos a ver cómo configurarla de inmediato. Así que volviendo aquí, volvamos a nuestro tablero. Y de la misma manera que pudimos crear nuestras páginas, también podemos hacer lo mismo para nuestro post. Pero antes de crear post, vamos a ver todos los posts que tenemos haciendo clic en eso. Tenemos el post Hello World. Así que déjame simplemente basura eso. No lo necesitamos. Ahora, digamos agregar nuevo. misma manera que hemos creado una página, podemos crear un post. Entonces le voy a dar el nombre de pila. Déjame tomar prestado este nombre, el poder de priorizar. Ahí vamos. Necesitamos establecer la plantilla por defecto element o full width. Entonces también necesitamos ir dentro de los ajustes de astra para establecer la barra lateral completa, sin barra lateral. Y para los elementos aquí, necesitamos inhabilitarlos todos. Publica eso y ahí vamos. Por lo que ahora está publicado. Pero antes de dejar este espacio, tenemos que volver a la configuración de la prensa W y establecer una imagen destacada. Recuerda, esta es nuestra imagen destacada, y si no la configuramos, tus publicaciones no tendrán una imagen en la página. Esta imagen no aparecerá. Así que establece la imagen destacada. Déjame ver qué imagen usar. Despierta. Entonces voy a ir a nuestra carpeta aquí. Despierta y di conjunto de imagen destacada. Ahí vamos. Ahora, volviendo a nuestro sitio web de referencia, este texto aquí mismo es lo que llamamos un extracto Si eres escritor o has estado escribiendo, sabes lo que es un extracto, y necesitamos proporcionarlo si queremos verlo exhibido aquí mismo en este lugar De hecho, permítanme copiar esto. Vuelve aquí, justo debajo de la imagen destacada. Sigamos adelante y peguemos nuestro extracto. Actualiza eso. Ahí vamos. Ahora, así es como crear una publicación o artículo sobre nosotros presionamos y agregamos una imagen destacada junto con un extracto En la siguiente lección, veamos cómo mostrar en la página de inicio aquí mismo. Entonces te veré en breve. 18. Exhibir la publicación - parte 1: Así que ahora es el momento de mostrar nuestra entrada de blog en la página de inicio. Y claro, si cambiamos aquí mismo, queremos mostrarlo así. Así que vamos a hacer eso con otro increíble plugin relacionado con elementor llamado premium add para Elementor Así que volvamos a nuestra prensa de trabajo. Vuelva al tablero de instrumentos. Vayamos a casa. Vamos a los plugins, agreguemos nuevos. Y aquí dentro, buscaré a Elementor. Aquí vamos. Entonces queremos agregar add ons premium para elementor Así que instala ahora, activa ahora está activado. Entonces volviendo al front end, si refresco este peso, antes de refrescar, actualicemos eso. Y ahora vamos a refrescar la página. Y ahora, si colapso estos paneles, aquí estamos. Tenemos complementos premium. Y entonces lo que queramos solo voy a escribir blog. Y lo que queremos es este blog por PA premium add ons. Así que voy a arrastrar y soltar esto dentro de ese espacio. Y ahora, por supuesto, solo tenemos una sola entrada de blog dentro de nuestra lista de publicaciones. Solo esto, y por eso es solo esto lo que se muestra. Pero cuanto más agreguemos más posts de blog, más tendremos que mostrar aquí, y terminaremos con algo como esto. Entonces ahora mismo, lo que queremos hacer es darle estilo para que cuando agreguemos nuevas entradas de blog, automáticamente tengan ese mismo estilo. Entonces volviendo aquí, lo primero que queremos hacer es cambiar la orientación porque como puedes ver, el texto debería estar de este lado, como en nuestro sitio web de referencia. Entonces mientras esto todavía esté seleccionado, iré al clásico, luego cambiaré la piel a un lado. Bien. Así. Y claro, queremos darle una columna para que sea sólo una columna de izquierda a derecha así. Actualiza eso. Volvamos a cambiar aquí. Como puedes ver el fondo es blanco como el fondo de nuestro sitio web. Así que vamos a quitar este color gris. Déjame colapsar eso. Vayamos al estilo. Vamos al cuadro de contenido, color de texto. Por supuesto, antes que nada, el color del texto debería ser este azul marino. Déjame copiar eso. Content box prueba el color, pega eso, y ahora es ese azul marino así como este. También deberíamos ir a la tipografía y hacerla 600, así como así Lo siguiente que queremos hacer es deshacernos de ese fondo gris. Mientras esté dentro de la caja de contenido, cambiemos aquí, al color de fondo, hagamos eso blanco, y ahora sea blanco. Actualiza eso. Revisemos los cambios. Ahí vamos. Lo siguiente que queremos hacer es, por supuesto, cambiar este texto a azul marino. Así que voy a volver aquí, copia eso. Entra aquí. Si bien se selecciona esto, iré al título. Color Hagamos que sea ese azul marino al flotar, queremos que sea ese color rojizo rosáceo. Copia eso. En Hover, queremos que sea ese color rojizo rosáceo. Y claro, no hace falta decir que necesitamos que la fuente sea Monerat Mont entrar. Vamos a darle un poco de grosor, 900. Queremos que sea de color negro, y podemos aumentar el tamaño apenas un poco. A lo mejor eso es demasiado grande. A lo mejor ese tamaño. Sí, como esa talla. Y vamos a reducir la altura vertical o interlineado hasta ese punto, actualicemos eso. También aumenta el espaciado en la parte inferior del título, aquí mismo, ligeramente para separarlo de los meta datos. En los meta datos, este es el nombre de usuario. Entonces este sería tu nombre, y te mostraré cómo cambiar esto. Esta es la fecha en que se publicó el post y si hay algún comentario. Entonces antes que nada, actualicemos que quiero ir dentro de las publicaciones para mostrarte dónde puedes cambiar este nombre. Vayamos a la configuración. No, de hecho, vamos a ir a los usuarios O usuarios. Y claro, este es tu nombre de usuario. Este es el mismo nombre de usuario que recibiste cuando estabas instalando wordpress dentro de espectaculars Entonces podemos decir editar. Y desplazándose hacia abajo, aquí tenemos nombre de pila. Puedes dar tu nombre, apellido, y aquí está el nombre. Apodo. Puedes dar tu nombre real. Un Bessa Para que puedas decir nombre para mostrar públicamente como cualquier nombre que quieras que la gente vea, actualizar perfil. Volvamos a entrar aquí. Si duro refrescar el control R, Aquí vamos. Ahora dice el nombre que especificé en el back end. Entonces, una vez más, mientras esto todavía está seleccionado, editemos la imagen. Así que volviendo al interior del contenido, general , imagen destacada, podemos aumentar el ancho hasta donde queramos. A lo mejor 35 es bueno para mí. No voy a meterse con la altura. Todo bien. Entonces ahora, creo que ahora mismo, lo que tenemos es lo suficientemente bueno. Por supuesto, como puedes ver en nuestra página web de referencia, también tenemos este artículo leer más. Vamos a ver cómo agregar este botón en la siguiente lección a medida que hacemos algunos ajustes más a cómo se muestra nuestro post. Por lo que también tendremos que hacer algunos cambios a esto. Entonces veamos cómo hacerlo en la siguiente lección. Nos vemos en breve. 19. Agrega contenido de publicaciones en Elementor: Entonces, antes de pasar a terminar de diseñar este post, sigamos adelante y creamos el contenido del post en el front end con elementor Vuelve aquí, queremos construir esto ahora mismo. Así que volvamos a nuestro editor dentro de nuestro panel de control, y vamos a las publicaciones. Y ahora aquí estamos. Podemos ir a editar, pero quiero hacer clic derecho y abrir enlace en nueva pestaña. Entonces dejamos intacto el dashboard, y ahora digamos editar con Elementor. Y aquí estamos. Entonces ahora, voy a seguir adelante y hacer clic en este signo más, luego flex box, y queremos una sección de doble columna o contenedor de doble columna. Entonces voy a hacer clic en eso. Y la razón es porque también tenemos esta barra lateral y el artículo principal. Entonces esto debería ser del 30%. Y deberían ser del 70%. Actualiza eso. Todo bien. Entonces ahora, claro, agreguemos nuestra imagen para empezar. Así que dejemos caer una imagen ahí dentro, y voy a seguir adelante y seleccionar esta misma imagen que usamos como imagen destacada. Y claro, tiene esquinas afiladas. Sigamos adelante y elegimos estilo. En el radio fronterizo, vamos a darle 2020. Actualiza eso. Todo bien. Ahí vamos. Déjame copiar este título una vez más debajo de él, mientras aún está dentro de este contenedor, eso está sosteniendo la imagen. Queremos hacer clic en eso y seleccionar título título título título. Déjalo caer dentro del mismo contenedor. Haga doble clic en pegar ahí. Por supuesto, quiero que sea un estilo H one. Ponlo en el centro. Por supuesto, seleccionemos este color aquí mismo, azul marino. Copia, Pega ahí Tipografía. Vamos a hacerlo Mont. Entrar. Hagamos también 900, así como así, y reduzcamos la altura de la línea a algún lugar allí. Actualiza eso. Vamos a desplazarnos. A mí me gusta. A continuación, sigamos adelante y creamos el primer párrafo. Entonces haré clic en eso, agregaré un párrafo, lo colocaré dentro del mismo contenedor, y aquí, controlaré Shift V para pegar sin ningún estilo. Actualiza eso. Ahora, te darás cuenta aquí, tenemos esta categoría de productividad, y luego hablaremos de categorías, y también tenemos la fecha. Así que entremos aquí a nuestro editor y busquemos metadatos. Post materia. Así que voy a dejar eso ahí dentro. Y como pueden ver, ya se ve así. Ahora, por defecto, nuestro post dice que está en la categoría sin categorizar, y eso es porque no hemos creado ninguna categoría y no hemos colocado ningún post en ninguna categoría específica. Tenemos sólo un puesto. Veremos cómo cambiar eso. Actualiza eso. Y podemos espaciarlo mientras todavía está seleccionado avanzado, romper eso, y vamos a aumentar el margen superior e inferior. De hecho, se supone que debemos aumentarlo a 20 y arriba, así como así. Revisemos los cambios. Ahí vamos. Agreguemos este encabezamiento. Copia eso aquí. De hecho, permítanme duplicar esto, duplicar eso así. Déjalo justo debajo de ese párrafo. Por supuesto, voy a seleccionar eso. En primer lugar, hagamos que sea una H dos porque estamos tratando de construir una jerarquía, y eso es lo que los motores de búsqueda buscan una jerarquía en una página web, comenzando por la H, resumiendo la página, y luego para los títulos principales, usamos H dos Para títulos menores, usamos H tres y así sucesivamente. Entonces, si bien se selecciona esto, ahora, este es un estilo H two. Pongámoslo a la izquierda. Y como lo copié, déjame pegarlo ahí así. Ahora necesitamos una imagen. Entonces el mismo caso aplica a esto. Simplemente duplico eso y lo arrastre. Déjalo justo debajo de ese texto. Mientras esté seleccionada, entraré aquí, seleccionaré una imagen de aquí. A lo mejor digamos esta imagen. Haga doble clic en eso. Seleccione, y ahí vamos. Permítanme simplemente duplicar este texto. Entonces estamos asumiendo que esta es una historia, y está compuesta por imágenes. Entonces esta es la imagen principal, y luego tenemos un título, luego el punto número uno, una imagen para resumir este punto Entonces tenemos estos textos. Podemos seleccionar estos textos, ir a avanzado, romper eso, y luego aumentar la actualización del margen superior. Revisemos los cambios. Desplazándose hacia abajo, y ahí vamos. Entonces ahora, claro, creo que aquí tenemos muy poco espacio. Entonces seleccionaré ese avanzado. Seleccione eso, aumente el margen superior. Así como así. Ahora, crear el resto de estas secciones es la misma historia. Y ahora para crear el resto de las secciones hasta el número tres, puedes repetir el mismo proceso. Pero a lo mejor tu artículo no necesita tener todas estas imágenes. A lo mejor quieres que sea prosa sin romper el texto. Para que podamos eliminar esta imagen. Y seleccione este texto, reduzca este margen superior hasta tal vez ahí. Ahora podemos duplicar este lugar justo debajo de ahí. Duplica esto, colócalo justo debajo de ahí. Cambia eso al número dos. Copia eso, selecciona esto, pega que tal vez el número dos sea muy largo, así que actualízalo, revisa los cambios, desplazándote hacia abajo Ahí vamos. Entonces solo voy a seleccionar este texto y agregar más párrafos a esto. De hecho, debería estar agregándolo aquí, no directamente ahí. Pégalo ahí dentro. Si estás escribiendo, puedes escribir directamente ahí, pero si está pegando pega aquí con el control Shift V. Voy a repetir lo mismo y lo mismo Ahora podemos duplicar esto, ponlo debajo de eso. Llamémoslo conclusión. Copia eso mientras esté seleccionado, pégalo ahí. Entonces copiemos eso. Duplicar ese lugar ahí. Seleccionar todo eliminado, control turno v. Actualiza eso. Este margen es demasiado grande. A ver, previsualizar eso. Ahí vamos. Me gusta la entrada del blog. Ya se ve bien. Pero ahora vamos a espaciarlo en la parte superior. Como pueden ver aquí, tenemos un buen espaciado, justo aquí. Selecciona el contenedor que está guardando todo. Avanzado, rompe eso. Vamos a darle tal vez 50. Actualizar y previsualizar los cambios. Así. Entonces ahora, claro, necesitaremos agregar la barra lateral aquí como la tenemos en la página web de referencia. Y claro, esta es una lista de artículos recientes, y eso no lo hemos creado. Así que vamos a crear eso un poco más tarde. Algunas lecciones a partir de ahora. Pero en la siguiente lección, sigamos adelante y retomemos el estilo. Déjame ir a casa hecho esto es casa. Sigamos adelante y retomemos el estilo de esto ahora que hemos creado esa página. Entonces te veré en breve. 20. Mostrarás la publicación parte 2: Así que ahora volviendo a nuestra estación de trabajo. Creo que este es el lugar. Si volvemos aquí, ahora hemos terminado con esto por ahora, volveremos a agregar la barra lateral. Entonces déjame cerrar eso y ahora aquí estamos. Este es el lugar donde estábamos editando la página de inicio. Entonces si le pego Control R para leer. Aquí vamos. Entonces ahora también queremos mostrar este botón de leer artículo. Entonces veamos cómo hacer eso. Si bien esto sigue seleccionado, vamos a colapsar eso. Ahora busquemos esa opción aquí. Opciones de publicación, tipo de extracto, leer más. Bien. Exactamente. Entonces ahí es donde establecer esa actualización que. Así que ahora podemos darle estilo a este botón leer más. Entonces entrando y por supuesto, como puedes ver aquí, tenemos diferentes metadatos. Puedes elegir mostrar algunos y ocultar otros. Entonces, por ejemplo, podemos ocultar los comentarios, así ocultar eso. Para que no se muestren los metadatos de comentarios. Así que vamos al interior del estilo. Y busquemos botón. Vamos a darle un color de fondo. Oh, entonces ese es el color del texto. Entonces queremos darle un color de fondo. El color del texto debe ser blanco. Ahora, por supuesto, ha desaparecido. Pero cuando agregamos un color de fondo, este azul marino se supone que es esta copia rosa rojiza Color de fondo, pega eso, y ahora ahí vamos. el cursor, queremos cambiar el color de fondo a ese azul marino, Al pasar el cursor, queremos cambiar el color de fondo a ese azul marino, así que el color de fondo sobre el azul marino así, y al pasar el cursor, deberían ser Ahora, por supuesto, no tenemos relleno en el botón, pero aquí podemos establecer el relleno. Así que rompe eso. A la izquierda, podemos darle tal vez 50. No, tal vez 40. A la derecha 40 en el top ten en el diez inferior. Creo que 15 está bien. 15 15. Ahí vamos. Ahora bien, espaciado en la parte superior del botón, creo que esa es una buena posición. Di eso. Volvamos al contenido imagen destacada y aumentemos ligeramente el ancho. Queremos que sea más cuadrada que rectangular. Ahí vamos. Volvamos también al estilo, y tenemos metadatos. No, vamos a las categorías porque queremos editar eso, y podemos eliminar este relleno, así. Ahora a la izquierda, vamos a darle 20 y a la derecha 20. Ahora, vayamos al punto uno. Seleccionaré ese radio de borde. Vamos a darle diez. Entonces ahora tiene esa esquina curva. De hecho, vamos a darle cinco, así como así. Actualiza eso, y revisemos los cambios. A mí me gusta. Entonces volviendo aquí a nuestro sitio web de referencia, eso es lo que tenemos. De hecho, lo había eliminado en nuestro sitio web de referencia, pero voy a dejar eso ahí en este sitio en particular que estamos construyendo ahora. Entonces básicamente, así es como presentar el post en tu landing page, en tu página de inicio. Creo que ahora se ve presentable y de estilo profesional Ahora que tenemos un estilo agradable para nuestro elemento blog, todo lo que necesitamos hacer es crear más entradas de blog, y se mostrarán aquí con el mismo estilo. Heredarán el mismo estilo, y lo único que será diferente es la imagen destacada, el título, la categoría, y todos estos detalles, pero el estilo seguirá siendo el mismo Y veremos cómo hacerlo en futuras lecciones. Pero ahora mismo, quiero terminar esta lección aquí mismo porque hemos logrado lo que queríamos. Queríamos darle estilo a la entrada del blog. Ahora, en la siguiente lección, hagamos que este encabezado pegajoso porque cuando empezamos a desplazarnos, está desapareciendo, y queremos que quede pegajoso como aquí, como lo que tenemos en nuestro sitio web de referencia Entonces hagámoslo en la siguiente lección. Ver en breve. 21. Cabecera pegajosa: Entonces ahora que tenemos nuestra entrada de blog estilizada así, queremos que este encabezado sea pegajoso, como en nuestro sitio web de referencia Entonces volviendo aquí, antes que nada, quiero cerrar estos porque ya terminamos con ellos. Y ahora, volviendo aquí, recuerden, fuimos al header footer de Elements Kit, y creamos un encabezado. Entonces aquí es donde iremos para hacer pegajoso el encabezado. Así que haz clic derecho en abrir enlace en nueva pestaña, y entraremos ahí. Pero antes que nada, déjame cerrar eso y aquello. Así que vamos a nuestro editor aquí mismo. Aquí estamos. Entonces antes que nada, antes de ir más allá, quiero que este botón sea rosa así, y en hover, se supone que es ese azul marino Estamos tratando de mantener la cohesión de la marca. Estamos tratando de mantener esa consistencia de marca. Entonces estamos usando los mismos colores en todas partes. Así que copia bien ese color rojizo rosáceo. Volviendo aquí, selecciona este elemento, estilo, color de fondo, pega eso ahí. Después en hover. Correctamente copiar eso. Al pasar el cursor. Queremos que el color de fondo sea ese azul marino, así como así. Actualiza eso. Ahora, queremos que este encabezado sea pegajoso en scroll. Y para ello, vamos a agregar otro relacionado con elementor, y se llama efectos de encabezado pegajoso para elementor Así que volviendo aquí, los complementos agregan nuevos. Oh, vamos a escribir Elementor. Y aquí estamos. Efectos de encabezado pegajoso para elementor con 200,000 instalaciones activas. Instala eso ahora. Vamos a activar. Y aquí estamos. Entonces volviendo aquí, voy a refrescar esta página. Y eso significará que ahora está listado aquí. Entonces, si colapso todos estos, ¿Dónde están los efectos de encabezado pegajoso? Oh, no va a aparecer en la lista, solo seleccionaré este contenedor, luego iré al diseño de colapso avanzado, y ahora tenemos efectos de encabezado pegajoso. Entonces voy a habilitar eso. Ahora eso revela todos estos ajustes. Pero no vamos a meternos con todos ellos. Queremos cambiar el color de fondo a blanco cuando alguien empiece a desplazarse Volviendo aquí, en el momento en que empezamos a desplazarnos y esto se vuelve pegajoso Cambia de color a ese gris muy tenue porque si es transparente, no podremos ver el texto cuando esté por encima de otros textos, déjame mostrarte a el texto cuando esté por encima de otros textos, lo que me refiero Entonces ahora mismo, no le demos un color de fondo. Vamos a solo que hemos activado la pegajosidad. Vayamos a casa. Si empiezo a desplazarme, no es cambiar de color a blanco o a cualquier otro color Y eso significa que no podemos ver estos elementos. Pero ahora, si cambiamos el color de fondo, vamos a convertirlo en un gris muy tenue que se acerca al blanco Actualiza eso. Revisemos los cambios. Vayamos a la página principal. Comienza a desplazarte. Sí, ese es un bonito gris, pero aún así quiero que sea un poco más gris. F 7f7f7. Creo que ese es un buen lugar. Sí, ese es un buen gris. Entonces ahora, pero te darás cuenta cuando empecemos a desplazarnos, no se está encogiendo Mientras que en nuestro sitio web de referencia, parece encogerse. Y eso es lo que queremos. Así que volvamos aquí. Si bien esto todavía está seleccionado y mientras todavía estamos bajo efectos de encabezado pegajoso. Vayamos a encoger cabecera. Podemos decir encogerlo a tal vez 60%. También podemos encoger el logotipo porque está dentro de un encabezado que se encoge Así que podemos hacerlo tal vez el 60% también. Actualiza eso. Ahí podemos ver. Entonces iré a esta otra pestaña donde estamos en casa, y ahí vamos. Así como así. Básicamente, así es como hacer que el encabezado sea pegajoso. En la siguiente lección, hablemos de fondos globales. Te veré en breve. 22. Establece fuentes globales: Entonces ahora es el momento de hablar de los teléfonos globales muy rápidamente Y antes de ir a los phonts globales, noto que no cambiamos los efectos hover ni el color de estos elementos del menú Así que volvamos aquí y seleccionemos los elementos hit N elemento del menú. Ir al estilo. Contraer el envoltorio de menú, vaya al estilo de elemento de menú. Ahora, el color del texto del elemento del menú. Hagámoslo ese azul marino. Copia eso. Selecciona eso, pégalo ahí. Ahora es ese azul marino, pero al flotar, quiero que sea de este color rojo rosado. Entonces selecciona eso, pega eso. Ahora en hover, es ese color, y cuando está activo, también debería ser ese color rosado Cuando está activo, nos referimos a cuando estamos en una página específica. Si estamos en la página de artículos, debería ser de este color para mostrarle a alguien muy rápidamente que estamos en la página de artículos. Vamos a previsualizar eso. Si vamos a la página principal, deben permanecer rosados. Si vamos a la página de contacto, debería quedar rosa, así como así. Entonces ahora, hablemos de teléfonos globales muy rápidamente. Te das cuenta mientras estábamos construyendo todo aquí, tuvimos que seguir cambiando manualmente el texto. Si agregamos este editor de texto, tuvimos que cambiar manualmente esta fuente específica. Tuvimos que venir aquí y cambiar esto a Monert. Esto ni siquiera es Monert todavía. Y si vamos a construir más artículos para mostrar aquí, así. Tendremos que configurar manualmente los teléfonos todo el tiempo. Si queremos usar Monert tendremos que seguir cambiando de roboto a Montserrat todo Por eso necesitaríamos una manera de configurarlo una vez, y luego cada vez que añades algún texto después de eso, simplemente entra automáticamente como Mont. Entonces veamos cómo hacer eso. Volviendo aquí, quiero decir editar con elementor porque estamos editando esta página Ahora, ya terminamos con este rubro. Entonces déjame cerrar eso y que estamos cargando al editor de casa. Si vamos aquí a ese menú de hamburguesas, configuración del sitio, fondos globales, podemos establecer todos los fondos para que sean Montserrat Entonces quiero seleccionar eso. Cambia eso a Montserrat. Monat. Haga clic en cualquier lugar aquí. Seleccione que Montserrat. Haga clic en cualquier lugar aquí. Hagamos lo mismo para todos ellos. Oh, espera. Montserrat. Ahí vamos. Ahora déjame actualizar eso. Y volvamos al editor. Ahora bien, si selecciono esto, permítanme seleccionar esto y aplicar, ver si esos cambios también se aplicarán. No han aplicado a esto. Pero si agrego algún nuevo editor de texto. Por ejemplo, si me dejan caer algunos textos ahí, ahora es Montserrat, ya no es roboto Si vuelvo aquí y agrego un encabezado, es tipografía estilo Monat Monst Esto es estilo Tipografía Monct Entonces, por defecto, todos los textos serán Monert a partir de ahora. Y lo he hecho porque vamos a construir más entradas de blog para llenar este espacio, y no queremos seguir cambiando esos ajustes todo el tiempo. Pero ahora, veo que esto no ha cambiado a Monert así que lo cambiaré manualmente porque una vez que lo cambies una vez, todas las entradas de blog que vendrán por debajo también heredarán todas estas configuraciones, incluida la configuración de fuente Así que yendo dentro de estilo, caja de contenido, tipografía, Familia, vamos a elegir Montserrat Family stands for familia de fuentes. Y si, quiero que sean 600. Tal vez aumentemos un poco el interlineado. Hasta ese punto. Actualiza eso. Revisar los cambios. Ahí vamos. Por lo que ahora todo el sitio web está conformado por Mont font. Entonces eso es todo acerca de fuentes globales. La siguiente lección, veamos cómo agregar enlaces a tu entrada de blog porque los enlaces son buenos para el SEO. Veamos cómo hacerlo en la siguiente lección. Ver en breve. 23. Agregación de enlaces a tu publicación: Es hora de crear enlaces para tu entrada de blog. Y solo quiero abrir esta entrada de blog. Entonces lee más. Y aquí estamos. Entonces tal vez queramos vincular tal vez algún texto aquí a otra entrada de blog que escribiste, o tal vez Wikipedia. A lo mejor te estás vinculando a alguna definición de un término sobre el que quieres que la gente lea más en Wikipedia. Entonces, ¿cómo agregas un enlace en tu texto? Entonces voy a seguir adelante y decir editar con Elementor. Y aquí estamos. Entonces, para agregar un enlace, todo lo que necesitamos hacer es, por ejemplo, seleccionar el texto que queramos seleccionar. Por ejemplo, si quieres vincularte al significado de burnout. Resalta eso, luego aparecerá este menú. Puede hacer clic en este enlace y luego proporcionar un enlace. Tomaré un enlace de Wikipedia y lo pegaré aquí. Burnout ocupacional, luego golpeó enter. Entonces ahora eso se convierte en un eslabón. Entonces si actualizamos esto y previsualizamos los nuevos cambios. Si nos desplazamos aquí, aquí estamos, puedes hacer clic en este burnout, y se abrirá el burnout ocupacional Volvamos. El problema es que ahora se está abriendo en la misma página, y es posible que quieras que la gente continúe leyendo sin interrupción. Entonces quieres que se abra en una nueva pestaña. Así que volviendo aquí. Mientras se selecciona este bloque de texto. Entremos aquí y busquemos ese enlace. Debería estar en algún lugar aquí, aquí estamos. Burnout. Yo seleccionaré eso. Esto sacará a colación esta opción de edición. Haga clic en eso. Después haga clic en esta Rueda Dentada. Eso abrirá este pop up. Se puede decir enlace abierto en nueva pestaña. Actualiza eso. Ahora vamos a revisar los cambios. Aquí estamos. Ahora, si hago clic en él, se abrirá en una nueva pestaña. Nuestro artículo sigue intacto. Ahora, otro problema que podrías haber notado es que esto no es coherente ni consistente con los colores de nuestra marca. Queremos que estos enlaces sean tal vez este rosa rojizo, y estos son los colores establecidos por el Recuerda que te dije que el tema es lo que determina el aspecto predeterminado de tu sitio web. Entonces estos son colores astra, y para cambiarlos, podemos ir a personalizar. Esto se abrirá presionamos ajustes generales. Aquí estamos. Y ahora, claro, todavía tenemos el artículo abierto aquí para vista previa. Si vamos a global, podemos ir a los colores y cambiar estos colores aquí. Por ejemplo, enlaces. Si voy aquí y selecciono esta copia rosa rojiza, puedo seleccionar esta, desplazarse hacia abajo, y aquí, si pegamos esa publicación, seleccionemos eso también Ritmo que publican. No está cambiando. ¿Por qué? Déjame refrescar esto que se supone que surta efecto al instante. Bien. Tuvimos que refrescar eso para ver ese cambio. De hecho, también me gustaría seleccionar esta una vez más y hacerla actualización audaz. Vista previa de eso. Para quemarse así así. Ahora, acabo de recordar que para esto, lo configuramos manualmente con elementor Entonces esto no lo establece Astra. Volviendo aquí, recuerda que esto era un elemento post meta. Puedes ir a categorías de estilo. Vamos a colorear, pegar y convertirlo en rosa rojizo Ahora, para que esto surta efecto en el editor, podemos actualizar la página. Y ahora, aquí vamos. Entonces, básicamente, así es como agregar enlaces a tu entrada de blog en caso de que quieras vincular a otros artículos dentro tu sitio web o a un sitio web de terceros diferente. En la siguiente lección, cómo agregar la sección de autor. Entonces volviendo a nuestro sitio web de referencia, veamos cómo crear esto. Entonces te veré en breve. 24. Sección de autores: Entonces ahora es el momento de crear esta otra sección. Esto debería ser muy fácil porque ya creamos algo así. Entonces volviendo a nuestra estación de trabajo, ¿dónde está? Aquí estamos. Para crear eso, tendremos que copiar esta sección desde la página principal, y podemos hacerlo. Ahora bien, este es el editor de la página de inicio. Así puedo seleccionar esta copia de clic derecho. Entonces ahora he copiado este contenedor. Volviendo a nuestro editor aquí, déjame cerrar esto y Wikipedia. Seleccione este contenedor. Pegar. Ahora lo pegamos dentro del contenedor Así que selecciona esta línea o simplemente sube aquí, haz clic derecho en pegar. Desplazándose hacia abajo, ahora todavía está dentro de ese contenedor porque queremos mantenerlos dentro de este contenedor Toma este texto, colócalo debajo de eso. ¿Qué más tenemos aquí? No tenemos sobre mí. Así que vamos a quitar eso. Podemos cambiar este texto, tal vez hacerlo un poco más grande. Y de hecho, esto debería ser un H tres. La práctica debe ser una edad de cuatro años, y esta es una edad de tres. Estamos tratando de mantener esa jerarquía. Se trata de una edad de dos años. Se trata de títulos menores, y esto es más menor que esto. Jerarquía. Ténganlo en mente. ¿Qué más tenemos aquí? Hacer esta tipografía un poco más grande tal vez esta debería ser 15, pero tal vez 700 Tal vez aumentemos ligeramente el margen superior, y cambiemos su color de texto de color. ¿Tengo ese rosa? No, yo no. Entremos aquí y seleccionemos esta copia pega eso ahí, actualicemos. Primero que nada, permítanme seleccionar esto y reducirlo a cero. Oh, eso es de arriba. Oye, déjame devolverlo. Para el fondo, quiero reducir eso un poco. Seleccionemos este texto, aumentemos el margen inferior. Todo bien. Vamos a poner eso a cero. Voy a seleccionar este contenedor avanzado margen superior, vamos a darle esa separación. Actualiza eso. Revisemos los cambios. Desplazamiento hacia abajo. Conclusión, entonces tenemos al autor. Impresionante. Entonces me encanta lo que tenemos hasta ahora. En la siguiente lección, ahora vamos a darle estilo este artículo porque este es uno de los artículos recientes. Pero claro, es el único artículo que hemos agregado hasta ahora. Se muestra aquí. Veamos cómo darle estilo para que se vea así. Entonces te veré en un minuto. 25. Dale estilo a la barra lateral: Entonces ahora es el momento de darle estilo a esta barra lateral conformada por publicaciones recientes. Así que volvamos aquí con nuestro editor, y aquí estamos. Entonces esta es una lista de publicaciones. Entra aquí, contenido. Vayamos a la configuración. Digamos que no muestres icono. Así como así, actualización. Entonces podemos decir fondo imagen destacada, no. Mostrar imagen destacada. Sí. Por lo que se mostrará la imagen destacada en el lateral. Ahora, también vamos a reducir el tamaño del teléfono aquí. Entonces texto, tipografía. Todo bien. Solo hagámoslo manualmente así, y vamos a reducir la altura. También aumentémoslo ligeramente. El peso le dan 600. Pero quiero darle ese color. Ese azul marino. Vuelve aquí, selecciona aquí, color del texto. Pegar ahora es ese azul marino. Pero al flotar, debería ser ese color rojizo rosáceo. Copia eso, pega eso ahí, así como así. Ahora, relleno a la izquierda, vamos a reducir eso. Para la imagen destacada, vamos a darle un radio de borde de cinco para darle esa esquina redondeada. De hecho, volvamos también aquí para la tipografía. A lo mejor vamos a dar este 800 700 es bueno. Sí, eso es mejor. También redujamos esa altura de línea. Hasta ese punto, actualice eso. Y revisemos ahora los cambios. Desplazamiento hacia abajo. Ahí vamos. Ahora bien, ¿qué es esto? Tenemos que deshacernos de eso. No sé qué es eso. Enumere el espacio divisor entre el contenido. Vamos a ver sobre la lista y el espaciado cuando tengamos más artículos, cómo van a ser listados. Volviendo al contenido aquí. Ajustes. No sé qué es eso, pero voy a averiguarlo, déjame simplemente averiguar qué es eso muy rápido. Todo bien. Entonces me di cuenta de que el problema. La razón por la que teníamos ese punto aquí fue esta configuración aquí, el diseño. Entonces como pueden ver, ahora mismo, tenemos una especie de balas, y eso no es lo que queremos. Queremos esto sin balas porque si volvemos a las balas y previsualizamos los cambios, como pueden ver, tenemos una bala ahí, pero si está ajustada a esta disposición horizontal, previsualizar eso. Ahora se ha ido. Entonces eso es lo que queremos. Entonces básicamente, así es como darle estilo a las publicaciones recientes de la barra lateral. En la siguiente lección, veamos cómo agregar esta barra de progreso de desplazamiento. Así que desplazándote, como puedes ver, tenemos esta barra superior que te muestra lo lejos que estás y cuánto te queda, todo el camino hasta la parte inferior de la entrada del blog Creo que agrega vida a tus publicaciones de blog y hace que tus publicaciones de blog sean únicas. Eso lo he visto en algunos sitios web, y siempre me he preguntado cómo hacerlo hasta hace poco. Entonces veamos cómo hacerlo en la siguiente lección. 26. Agregación de la barra de progreso: Entonces ahora es el momento de agregar esa barra de progreso, algo así. Así que volviendo al interior de nuestro editor. Ahora, queremos agregar eso solo a las publicaciones de blog. Vamos a entrar en nuestra entrada de blog. Leer más. Déjame cerrar estos. Queremos sumarlo aquí arriba para que cuando alguien esté desplazándose y leyendo nuestra entrada de blog, pueda verlo Pero antes de hacer eso, quiero que agreguemos esa barra lateral ahora. Volver a la publicación de bloque y agregarla con elementor, porque mi objetivo es guardar esta publicación de bloque que hemos creado como una plantilla que podemos reutilizar cuando estamos construyendo el resto de las entradas del blog. Ya verás a lo que me refiero. Y no quiero guardar la plantilla sin todo lo que conforma una publicación de bloque. Vendré aquí, clic derecho copia. Entra aquí, selecciona esta pasta lik derecha. Se pegará ahí De hecho, lo que quería era este siguiente, clic derecho copiar, ven aquí. Ahora, seleccione este contenedor que los esté reteniendo, haga clic derecho en pegar, y eso es lo que queremos. Entonces creo que voy a dejar eso ahí. Cuando creamos más artículos, van a aparecer en una lista aquí. Así que no te preocupes por eso. Pero por ahora, quiero decir. De hecho, permítanme limitar esto a cinco puestos. Entonces voy a seleccionar eso. Si ya está limitado a cinco puestos, en realidad. No queremos tener 50 publicaciones listadas aquí. Sólo queremos cinco. Entonces haré clic en Actualizar. Revisemos los cambios. Ahí vamos. Desplazándose hacia abajo, quiero un poco espaciado entre estas dos columnas Entonces iré al contenedor que sostiene los dos contenedores. Y ahora por la brecha, vamos a darle eso así, actualización. Revisar los cambios. Sí, necesitamos ese espaciado así. Ahora, lo único que queda es agregar esa barra de progreso. Entonces voy a hacer clic en eso y escribir progreso. Recuerda, uno de los plugins que agregamos fue Royal elementor add ons. De hecho, solo quiero mostrarte algo rápidamente aquí. Este es el sitio web oficial de Royal Elementa Adoms. Y si quieres probar alguno de sus elementos, puedes venir aquí Elemento real addos.com y comprobarlo Entonces quiero ir a la barra de progreso de lectura. Entonces, si hago clic en eso, desplácese hacia abajo para ver el progreso en acción. Entonces ahí vamos. Olvidé mostrarte este sitio web y decirte cómo puedes simplemente revisar algunos de los elementos antes de usarlos. Por ejemplo, el flip box, no vamos a usar flip box, sino que solo quiero mostrarte. Algo así. Volviendo a casa. Entonces básicamente, solo visita estos sitios web y ve los elementos que te traen. Aquí está el sitio web de complementos premium para Elementor. Recuerda que es otro complemento que agregamos. Y si vas a todos los widgets, puedes ver una lista de todas estas cosas aquí mismo. Utilizamos un blog. A ver. Si nos desplazamos hacia abajo, Estas son las diferentes formas en las que puedes presentar tu entrada de blog. Y si vamos al último de aquí abajo, así es como hemos hecho el nuestro. Volvamos aquí. Así es como lo hemos hecho. Entonces solo quería poner eso ahí por si quieres ver cómo determinar si algún elemento que quieras usar es bueno para tu sitio web. Puedes tener una vista previa en la página web oficial del creador. Entonces déjame cerrar eso y aquello. Si venimos aquí, habíamos escrito progreso y ahora leyendo barra de progreso Lo podemos dejar caer aquí. No será visible encima de la imagen. Solo lo estamos colocando dentro de esta actualización de publicación de blog. De hecho, dejémoslo justo debajo de la imagen. De hecho, este título está demasiado cerca de la imagen. Déjame seleccionar ese top avanzado. Vamos a ponerlo ahí. Ahora, permítanme simplemente dejar esto encima de la actualización del texto. Revisar los cambios. Ahora bien esto está bien espaciado, y cuando empezamos a desplazarnos, ahora nuestra barra de progreso está funcionando porque dejamos caer en cualquier parte de la página Podemos dejarlo en cualquier parte de la página, y eso es todo lo que cuenta. Volviendo aquí, podemos cambiar el color del campo. Quiero darle esa copia de color rosáceo. Seleccione esto, pegarlo en la actualización, previsualizar los cambios. Desplazamiento. Ahora, ahí vamos. El color de nuestra marca está funcionando. Entonces así es como agregar la barra de progreso de lectura. En la siguiente lección, hablemos de guardar plantillas. Te veré en breve. 27. Guardar la plantilla de blog: Entonces, ahora que estamos satisfechos con cómo se ve nuestra entrada de blog, podemos usar esto como nuestra plantilla de publicación de blog para que en el futuro, cuando queramos crear una nueva entrada de blog, no tengamos que empezar a diseñarla de nuevo. Y podemos hacerlo yendo a editar donde lo estábamos editando. Luego haz clic en este menú desplegable. Guardar como plantilla. Ahora digamos plantilla de publicación de blog. Haga clic en Guardar. Ahora, aquí estamos, plantilla de publicación de blog. Entonces, la próxima vez que queramos crear una entrada de blog, podemos venir aquí e insertar esto y solo podremos cambiar el texto de la nueva entrada del blog, pero la estructura será la misma. Y lo veremos a partir de la siguiente lección porque eso es lo que estamos haciendo. Estamos creando más publicaciones de blog para poblar nuestra página de inicio con el resto de las publicaciones del blog Entonces te veré en un minuto. 28. Crea más publicaciones de blogs: Así que ahora hemos guardado nuestra plantilla de publicación de blog. Es hora de usarlo para crear el resto de publicaciones de nuestro blog. Así que déjame cerrar eso. Y de hecho, porque ya terminamos con esta página, la voy a cerrar. Cierra eso también, incluso eso y aquello. Ahora, volvamos a las publicaciones. En la lista de publicaciones, solo tenemos un puesto. Ahora, solo diré que haga clic derecho en Abrir enlace en Nueva pestaña en Agregar nueva publicación. Ahora una forma rápida de hacer clic derecho y abrir en una nueva pestaña es simplemente usar la rueda del mouse. Si haces clic en eso, se abrirá una nueva pestaña. Haz eso, abre esto en una nueva pestaña. Vamos a crear uno, dos, tres, cuatro, cinco. Digamos seis. Ahora, volviendo aquí, déjenme darle un título a esto. Yo sólo voy a copiar esto. Déjame ir a la página principal. Déjame copiar esta copia que. Voy a pegarlo ahí. Página por defecto. Elemento de plantilla predeterminado o ancho completo. Vamos a establecer una imagen destacada. Vuelve aquí. Digamos que tal vez este cachorro. Establecer imagen destacada. Agreguemos también un extracto, así que me desplazaré aquí Copia eso, pegarlo ahí, ph publicar. Ahora, eso está publicado. Pero recuerda, solo estamos estableciendo las configuraciones básicas de tal vez la plantilla y la imagen y extracto destacados No hemos establecido los ajustes de astra. Pero si queremos construir el poste de bloque en el front-end usando esa plantilla que acabamos de guardar, tendremos que configurarlos también. Eso, déjame ponerlos. Yo quería rápidamente, antes que nada, crear estos y luego volver a esto más tarde, pero ya podemos hacerlo. Barra lateral sin barra lateral. Desactivemos estos tres. Actualiza eso. Ahora nuestra página web está lista para ser editada con elementor. Ahora, de hecho, no es nuestra página web, es una entrada de blog. Voy a cerrar eso. Voy a volver aquí. Escojamos esta copia, peguemos eso ahí. De hecho, permítanme establecer la imagen destacada. Seleccione. Seleccione esto. No, déjame seleccionar esa imagen destacada de conjunto abierto. Tomemos esta página los huevos ahí dentro. Publicar. Entonces eso es todo. Déjame cerrar eso. Ahora, volviendo aquí, si actualizo esta página, ahora tenemos tres entradas de blog. Si pasamos el cursor sobre esto, no tiene ninguna opción para editar con Elementor Pero ahora aquí, esto tiene editar con Elementor porque ya lo construimos con elementor, así podemos editarlo con element Ahora, yendo a esta que ya configuramos con Elementor full width y todas estas otras configuraciones, podemos editar con Elementor Y claro, es una página en blanco. Pero ahora, incluso antes de que vayamos lejos, solo sostengamos ese pensamiento ahí mismo. Vuelve aquí, si vuelvo a casa y luego voy a la página de inicio haciendo clic en esta se llevará a la página principal. Como puedes ver, ya tenemos tres entradas de blog ya agregadas a nuestra lista de publicaciones de blog recientemente agregadas, y todas están sin categorizar. Y mira los artículos recientes. También está apareciendo en los artículos recientes. Ahora, podemos cambiar y determinar qué entrada de blog se mostrará en esta lista. No es rígido ni fijo, y no es algo que debamos aceptar como es. Podemos determinar Precisamente qué entradas de blog queremos se muestren en estas diferentes partes porque aquí mismo, queremos las más recientes. Pero aquí podríamos querer una categoría específica de blogposts. Veremos acerca de las categorías en breve. Así que ahora, volviendo a aquí, recuerda que estábamos a punto de crear nuestro post de blog. Podemos ir a plantillas. Y en la lista de mis plantillas, tenemos plantilla de entrada de blog. Puedo decir insertar, aplicar eso. Y ahora aquí está la plantilla que guardamos. Entonces todo lo que necesito hacer es editar el contenido de esta plantilla para tener el contenido de la nueva entrada de blog que quiero publicar. Pero claro, no voy a hacer eso porque mi objetivo es mostrarte cómo usar estas cosas, pero voy a cambiar esta imagen para reflejar esa nueva. Creo que fue este cachorro. Seleccione actualizar. Creo que también deberíamos cambiar ese tema. Yo era la copia de señales de enfoque. Sí, dice las señales de enfoque. Entonces si selecciono esto, puede venir aquí y darle ese título, actualizar. Pero ahora el contenido debería ser sobre estas nuevas entradas de blog. Así que edita todo hasta el fondo y luego actualiza y previsualiza los cambios. Ahí vamos. Entonces ahora, si abrimos esta entrada de blog original, aquí estamos, y si abrimos esta nueva, es única para esta entrada de blog en particular, y tendrá el contenido de la nueva entrada de blog. Entonces ahora, este es el momento en que avance rápidamente esta parte porque básicamente voy a repetir el mismo proceso para el resto de las publicaciones del blog, y eso va a llevar demasiado tiempo, así que esto va a ser un lapso de tiempo. Y una vez que termine, ya podemos pasar a la siguiente sesión. Entonces déjenme adelantar rápidamente esta sección. Así que volviendo aquí, voy a crear otra entrada de blog. Y así aquí estamos. He terminado de crear el resto de la entrada del blog que necesito. Y como puede ver, necesitamos hacer algunos ajustes en comparación con nuestro sitio web de referencia aquí. Necesitamos agregar un poco más de espaciado. A lo mejor te gustaría esto con ese tipo de espaciado. Pero quiero mostrarte cómo agregar ese espaciado ligeramente Así es como hacer eso. En la siguiente lección, veamos cómo agregar ese espaciado y pasar a la página de archivo de artículos. Esa es una página que muestra todas las publicaciones de tu blog. Así que volviendo aquí, artículos. Aquí estamos. Este es el archivo del blog, una lista de todos los artículos que he publicado a lo largo del tiempo, y los lectores pueden venir aquí y leer todo lo que hayas publicado. Entonces hagámoslo en la siguiente lección. Nos vemos en breve. 29. Página de archivo de publicaciones: Entonces ahora es el momento de crear la página de archivo de blog o la página de archivo de publicaciones. Entonces volviendo a nuestro editor, aquí mismo, vayamos al tablero, cerremos eso. O ya creamos una página. Vamos a las páginas. Y se llama artículo. Entonces voy a decir editar. De hecho, permítanme abrir el enlace derecho en Nueva Pestaña. Ahí vamos. Así que vamos a editar las configuraciones básicas. Vamos a la configuración astra, Elementor completo sin barra lateral También deshabilitemos esos. Ahí vamos. Vamos a editar con Elementor Y aquí estamos. Entonces ahora, déjame ver esto. Esta es nuestra página de inicio. Quiero elegir esta sección de héroes aquí arriba porque te darás cuenta en nuestro sitio web de referencia, tenemos algo similar a la sección de héroes en la página de inicio. No necesitamos reinventar la rueda. No necesitamos recrear o repetir lo que ya hicimos. Así que edita con Elementor en la página de inicio. Todo lo que tenemos que hacer es seleccionar este contenedor que sostiene la sección héroe, correctamente copiar. Vuelve aquí, justo li dentro de esta caja, pega. Eso lo pegará en la parte superior. Esto dice archivo de blog. Copia eso, selecciona eso, haz doble clic aquí, pega. Una lista de todos los artículos que he publicado a lo largo del tiempo. Seleccionando esta eliminada. De hecho, vamos a pegar eso ahí dentro. Control Shift V para pegar así. Centro de estilo alinea esa actualización. Y ahora necesitamos agregar flex box, esta estructura aquí, contenedor único. Ahora, para mostrar nuestras publicaciones de blog de esta manera, vamos a usar un elemento adicional add on llamado essential add ons for element. Así que volvamos al interior de nuestros dashboards add. Addons esenciales para elementor. Aquí estamos, o podríamos haber escrito elementor. Y aquí estamos complementos esenciales. Instalar ahora. Instalado, activemos. Y ahora podemos pasar por este asistente de configuración, elegir avanzado siguiente siguiente. Podemos habilitar plantillas, pero no necesito las plantillas ni saltarlas. Siguiente cuéntame en o no gracias. Sólo voy a decir que no, gracias porque este no es un sitio web permanente. Todo bien. Entonces ahora estamos activos. Volviendo aquí, voy a decir refrescar. Todo bien. Entonces colapsando todos estos, veremos complementos esenciales Así que voy a escribir grid post grid por esencial add ons EA. Entonces déjame arrastrarlo y soltarlo dentro de ese contenedor, y esto es lo que estábamos buscando. Entonces mientras se selecciona esto, voy a cambiar esto a Primero que nada, digamos que queremos seis posts por página. Pero para la maquetación, queremos tener tres columnas, no cuatro, tres columnas. Actualiza eso. Y déjame refrescar la página. Entonces ahora tenemos tres columnas. Déjame refrescar esta página. Por lo que se refleja en el editor. Esta es la vista previa. Pero claro, necesitamos hacer mucho más para que se vea así. Entonces entrando aquí, mientras esto todavía está seleccionado, vamos a primero que nada, a la maquetación. Queremos desactivar algunas de estas cosas. Baje, no muestres fecha. O puedes mostrar la fecha. No es necesario mostrar el nombre del autor a menos que tengas varios otros autores en tu blog. No muestres el avatar, la imagen. Sí, así. Ahora, vamos al interior del estilo para estilizarlos . Estilo de cuadrícula de poste. Vamos a darle un radio de borde de 20, así, todo el camino hasta la cima. Ahora bien, si vamos a la miniatura y también le damos un 20, está todo redondeado, pero no queremos estos bordes Así que volviendo al estilo post grid, tipo de borde. Ahora es no. Pasemos al meta estilo, los centralizaron así. Pasemos a la tipografía y al espaciado. Ahora, podemos tener el estilo de título y el estilo de extracto. Entonces título, podemos ponerlo en el centro y el extracto en el Vayamos al leer más, Aaign al centro también. Ese es el botón. Podemos volver a la tipografía de color y espaciado y cambiar el color del texto del título Déjame seleccionar este azul marino. Pegados ahí y al flotar, queremos que sea rojizo al flotar ese color rojizo flotar ese También queremos ir al título de tipografía. Queremos darle ese grosor 900 así como así. Creo que ese tamaño está bien, pero podemos 25 está bien, pero la altura de la línea es un buen lugar. Bien. Ahora, notará que tenemos muy poco texto en el extracto Así que vamos a la disposición de contenido. Para las palabras del extracto, hagámoslo 20. Eso significaría que en el extracto se muestran 20 palabras. Vuelve al interior del estilo. Pasemos al botón leer más. El color del texto debe ser blanco. Pero ahora, hagamos del fondo este color rojizo. Así que volviendo aquí, leer más tipo de fondo. Vamos a darle ese color. Rompamos este acolchado. Y para la cima, vamos a darle 15. De hecho, vamos a darle diez, para el fondo, quiero decir arriba. Vamos a darle diez. Para el margen superior, empujémoslo hacia abajo. Creo que 30 está bien. Démosle también un radio fronterizo de cinco, digamos diez. Actualiza eso. Revisemos los cambios. Ahí vamos. Pero ahora, hagamos algo con respecto a esa fecha. Ajustes de diseño. Creo que me voy a deshacer de esa fecha porque está destruyendo la maquetación. Así que voy a actualizar eso. Revisemos los cambios. Pero puedes quedártelo ahí si quieres. Ahí vamos. Obviamente, ahora sigamos adelante y agreguemos esta sombra paralela para hacer que cada publicación de bloque destaque. Vuelve aquí, estilo, es la sombra de cuadro estilo post grid, así como así. Pero ahora está demasiado oscuro. Podemos hacerlo más ligero tal vez hasta 20 en algún lugar ahí. También vamos a extenderlo ligeramente. Desenfocarlo. De hecho, quiero que sea más desmayado, así como así Actualización. Revisemos los cambios. Ahí vamos. Ahora por defecto, está establecido en Albañilería. El diseño se establece en Albañilería. Disposición de contenido. Albañilería, y por eso si esto es corto, el de abajo será empujado hacia arriba para mantener este espaciado uniforme. Entonces, aunque esto fuera mucho más corto hasta este punto, esto sería empujado hacia arriba para seguir teniendo esta misma cantidad de espaciado, y creo que eso lo hace parecer más presentable de lo acordado Entonces creo que lo hemos clavado. Creo que lo hemos hecho Así que todo lo que necesitas hacer es agregar más publicaciones de blog, y se agregarán a esta lista. Y también puedes limitar el número de publicaciones de blog que se mostrarán. Actualmente, tengo cinco, pero esta página podrá mostrar seis. Si quieres mostrar 12, puedes mostrar 12 aquí y habrá 12 de ellos si tienes 12 de ellos. Entonces creo que en ese momento, podemos llamarlo envoltura. Este es el final de esta lección. Así es como crear la página de archivo del blog. En la siguiente lección ahora, hablemos de categorías. Y me acabo de dar cuenta de que no hicimos algo al respecto de este texto. Esa puede ser tu tarea, pero podemos volver al color, ir a extracto, tipografía, Montserrat Podemos aumentar el tamaño, pero lo dejaré ahí. Pero lo que quiero hacer es aumentar ligeramente el margen superior. Para separarlo del título. Ahí vamos. Así como así. Entonces, en la siguiente lección, hablemos de categorías de publicaciones. Te veré en breve. 30. Categorías de publicaciones: Por lo que ahora es el momento de hablar de las categorías de post. Entonces te darás cuenta aquí mismo que estamos mostrando todas las entradas de blog que tenemos en el blog. Si vamos a la página de inicio, estamos mostrando indiscriminadamente cada entrada de blog que tenemos en la página Pero es posible que queramos mostrar publicaciones de blog específicas en una sección y diferentes publicaciones de blog en otra sección. Y ahí es donde las categorías vienen muy bien. Así que volviendo a nuestro tablero, quiero ir a categorías de publicaciones. Déjame cerrar esto. No, gracias. Y déjame cerrar eso. Y ahora, como pueden ver, solo tenemos una categoría llamada uncategorized. Y eso es porque por defecto, pulsamos siempre tiene esta categoría por defecto cuando la instalas. No tiene la opción de eliminarlo. Ahora podemos crear nuestras propias categorías. Pero ahora, si volvemos a la lista de todas las publicaciones, porque no teníamos ninguna categoría, cada publicación que creamos se coloca automáticamente en la categoría sin categorizar. Ahora, hay dos formas de crear una categoría de blog. Si vamos, por ejemplo, aquí, voy a hacer clic derecho y abrir enlace en nueva pestaña aquí, y quiero cerrar estos otros. Ahora, aquí estamos dentro de este post. Supongamos ahora que estamos creando el post. Podemos venir aquí y abrir el panel de categorías o pestaña. Podemos desmarcar esto, y ahora podemos decir agregar nueva categoría y escribir un nombre Por ejemplo, ¿qué es esto? Priorización. Gestión del tiempo. Gestión del tiempo, hogar, T, hit Enter. Ahora, las entradas de este blog caen en esta categoría en particular gestión del tiempo de llamadas. También puede caer en dos categorías o múltiples categorías. También puede tratarse de productividad. Si entro, ahora pertenece a dos categorías. Si actualizo eso, ahora está actualizado, volvamos aquí y actualicemos esta página. Ahora como puedes ver, está en estas dos categorías. Podemos hacer lo mismo por estos. Ahora, otra cosa que notarás es una vez que hayamos creado estas dos categorías, si vamos a las categorías aquí mismo, también se incluyen aquí. Entonces esa es una forma de crear categorías haciéndolo dentro de una publicación como creaste. Otra forma es venir aquí y agregar más. Entonces, por ejemplo, Salud. Si entro, puedes proporcionar la babosa. Pero si pulsas enter, wPress usará el nombre que le diste a la categoría como babosa, y así es como debería ser Si le pego enter, Wpress ha creado una nueva categoría salud fría y si dices Edición rápida, la babosa es Si vamos aquí a la productividad, la babosa es la productividad Ahora, permítanme crear dos categorías más. Digamos publicaciones recientes tal vez recientes. Descartar eso Cancele eso. Tal vez también podamos crear otra categoría llamada destacada, Enter. Ahí vamos. Ahora bien, si vamos a todos los puestos y abrimos tal vez esto. Déjame solo presionar el ratón para abrirlo en una nueva pestaña. Aquí estamos. Si vamos a las categorías, Ahora, tenemos una lista de todas estas categorías que hemos creado, y por supuesto, se listó categorizado. Pero ahora podemos colocarlo en cualquier categoría. Digamos salud. Actualiza eso. Volvamos a entrar aquí. Editemos esto Vamos a las categorías. Eliminar eso categorizado. Digamos que es un post reciente, y también es por productividad, actualización. Vamos a entrar aquí. Voy a abrir esto y esto. Permítanme cerrar estos otros. Entonces nos quedamos con estos dos. Vamos a las categorías. Quita eso. Diré destacado y reciente. Y también está en productividad. Actualiza eso. Ahora, depende de ti idear categorías creativas. Vamos a entrar aquí, quitar eso. Así es como transformar tu vida. Quizás podamos agregar uno aquí llamado transformación. No, eso no me gusta. No lo deletreamos correctamente, pero simplemente lo dejaré así. Y digamos que la salud actualiza eso. Ahí vamos. Entonces ahora, si cerramos eso y actualizamos esta página. Cada entrada de blog ahora pertenece a una categoría. En ocasiones, dos entradas de blog pueden pertenecer a la misma categoría. Ahora bien, he aquí por qué las categorías son buenas. Entonces si vamos a la parte frontal, voy a hacer clic con el ratón para abrir en una nueva pestaña. Aquí estamos en casa. Mira las categorías ahora. Ahora bien, si digo editar con Elementor, no se encontraron publicaciones aquí Entonces, si digo editar con Elementor, La razón por la que no se encuentran publicaciones aquí es porque recuerda que este elemento estaba tirando de las entradas del blog para mostrarlas de la categoría sin categorizar Si hago clic en él y miro las categorías. Si seleccionamos eso y queremos poder hacer click en este. Bien, olvidemos eso por un segundo. Ahora, volvamos a ésta. Si colapsamos general, podemos ir a consulta, y aquí es donde determinamos lo que vamos a mostrar. Por ejemplo, aquí dentro, podemos decir, sí, vamos a mostrar posts, reglas de categoría. Vamos a hacer coincidir el filtro de categorías. Podemos decir qué categorías queremos mostrar. Entonces tal vez queremos mostrar publicaciones de blog que solo están en la categoría de productividad. Ahora se mostrarán todas las entradas de blog que pertenezcan a la categoría. Si una entrada de blog no tiene productividad como categoría, no se mostrará. Vamos a cerrar eso. Eliminemos eso y elijamos tal vez la salud. Creo que tuvimos uno o dos. Sí, tenemos dos. Pero ahora, tendrás que estilizar cada categoría individualmente, lo cual no tiene sentido. Esto debería heredar el estilo en las categorías que ya diseñamos Así que sólo voy a deshacerme de eso. ¿Dónde estaba? Las categorías de opciones de publicación importan. No muestres eso. Actualiza eso. Pero ahora, como puedes ver, podemos usar las categorías que queremos mostrar para mostrar tipos específicos de publicaciones de blog que queremos en una página o sección específica. Ahora, todavía no sé por qué esto se está portando mal así Creo que hay un problema con este elemento porque se supone que debe hacer exactamente lo que esto ha hecho aquí. En las consultas, se supone que debemos ser capaces de seleccionar categorías específicas. Entonces tendré que encontrar una solución antes de que termine esta clase. Pero por ahora, creo que vamos a terminar la lección aquí, actualizar eso. Podemos hacer lo mismo para la página de archivo de artículos. Déjame ir aquí y editar con Elementor. Si seleccionamos esto. Ahora bien, este es un elemento diferente. Esta es la cuadrícula de correos por complementos esenciales, y también tiene la opción hacer tus consultas categorías tal vez digamos que solo queremos mostrar salud. Seleccione eso. Ahora vamos a ver sólo dos posts porque solo tenemos dos entradas de blog con la categoría salud. Entonces espero que entiendas ahora las categorías para ayudarte a mostrar lo que quieras en tu página web. Entonces, en la siguiente lección, veamos cómo agregar esta función de Canvas para mostrarlas. Y claro, como habrás adivinado, vamos a usar categorías Veamos cómo hacerlo en breve. 31. Barra lateral fuera de lienzo: Entonces ahora es el momento de mostrar algunas publicaciones de blog en nuestro off Canvas wget Así que volviendo a nuestro editor aquí mismo. Voy a sumar esta productividad. Entonces ahora tenemos más. Actualicemos eso. Vamos a revisar los cambios para que podamos realmente lo que quería es llegar a esta página para que podamos decir encabezado. Edita el encabezado con elementor. Y aquí estamos. Entonces ahora estamos editando el encabezado. Si hago clic en esto, se supone que debe mostrar algunas publicaciones de blog aquí. Entonces, para mostrar contenido aquí, se supone que debemos usar una plantilla. Recuerda, como la plantilla que guardamos para las entradas del blog. También podemos crear una plantilla que podemos mostrar aquí. Entonces si entramos dentro seleccionamos plantilla, mientras esta es seleccionada, Como puedes ver, solo tenemos una plantilla, y es la plantilla de entrada de blog. Así que vamos a seguir adelante y crear una plantilla para usar aquí mismo. Volveré a casa. Déjame cerrar todo aquí. Y sólo voy a venir aquí publicaciones. Sí, podemos crear un nuevo post. Entonces mientras estamos aquí, podemos llamar a esto tal vez de contenido Canvas. Todo bien. Entonces por supuesto, las configuraciones básicas aquí barra lateral. Publiquemos eso. Y luego vayamos al front end y editémoslo ahí mismo o creémoslo ahí mismo. Y aquí estamos. Entonces solo necesitamos una cosa. Entonces si hago clic en eso, vamos a Flexbox y necesitamos solo una columna así Y si volvemos de hecho, quiero ir a páginas, y quiero copiar los artículos editar con elementor Quiero copiar los artículos post grid. Recuerden que todavía tenemos esto abierto. Entonces quiero copiar esta cuadrícula de publicación. Entonces quiero hacer clic en eso, clic derecho en copiar. Ir a este contenido de Canvas off. De hecho, permítanme simplemente eliminar esto y aquí mismo, haga clic derecho en pegar. Ahora, con esta seleccionada, en primer lugar, solo quiero seleccionar la categoría llamada reciente. Recientes. Tenemos dos entradas de blog. Y también quiero que sea posts por página, tal vez digamos tres, y para el layout, digamos que queremos solo una columna. Actualiza eso. Revisemos los cambios. Desplazamiento hacia abajo. Entonces eso es lo que tenemos. Ahora, permítanme refrescar a los editores para que reflejen los cambios aquí, así como así. Entonces ahora, lo que quiero hacer es seleccionar este clic derecho guardar como plantillas, y quiero llamarlo De contenido o publicaciones de Canvas. Guarde eso, y ahora aquí está. Vamos a cerrar eso. Volvamos a entrar aquí. Ahora estamos en el editor jefe, y aquí es donde se supone que debemos buscar plantillas. Si hacemos clic en eso, es s ahora también tenemos publicaciones fuera de Canvas. Si seleccionamos eso. Ahora, si hacemos clic en esto, está mostrando las publicaciones de Canvas apagadas. Entonces, por supuesto, podemos jugar con estos ajustes. No vamos a profundizar en eso, pero así es como agregar la barra lateral off Canvas. Déjame actualizar eso y revisemos los cambios. Hacemos clic en eso. Ahí vamos. Entonces déjame ir a la página principal. Esto es lo que hasta ahora hemos presentado. Todo bien. Entonces, básicamente, eso es todo sobre la barra lateral off Canvas. En la siguiente lección, sigamos adelante y creamos el pie de página, porque, como puedes ver ahora mismo, solo podemos desplazarnos hasta el momento. No tenemos un pie de página aquí para tener todo ese contenido que se supone que debe estar en el pie de página. Entonces veamos cómo hacerlo en la siguiente lección. Te veré en breve. 32. El pie de página: Entonces ahora es el momento de crear el pie de página. Ahora, como puedes ver, en nuestra página web de referencia, tenemos un bonito pie de página sencillo. Así que volviendo a nuestra estación de trabajo, déjame cerrar eso y todo esto porque ya terminamos con ellos. Ahora, lo que tenemos que hacer es ir al elemento skit header footer como de costumbre Porque recuerda, aquí es donde creamos el encabezado. Entonces digamos agregar nuevo. Pie de página, y esto debería cambiar a pie de página, todo el sitio, habilitar ese contenido de edición. Iremos directamente al front end para comenzar a construirlo. Y aquí estamos. De la misma manera que creamos el encabezado, vamos a crear una foto. Voy a hacer clic en eso. Después flex box. Creo que esto tiene tres columnas en el sitio web de referencia. Dónde está nuestro sitio web de referencia. Sí, Tres columnas. Vamos a elegir esto. Ahí vamos. Seleccione eso. Por supuesto, para agregar un logo, soltamos un elemento de imagen. Haga clic en eso. Selecciona el logo, selecciona eso, y ahí vamos. A continuación, un párrafo. Entonces entremos aquí, editor de texto. Dejémoslo ahí mismo. Entonces Control Shift V. Por supuesto, queremos darle ese color gris azul marino. Copia eso. Pégalo ahí para el color, Tipografía, 600, así como así Actualiza eso. Máximo que queremos crear son estos enlaces. Vamos a escoger los enlaces. Queremos decir lista. Y esa es una lista de iconos. Entonces voy a arrastrar y soltar la lista de iconos ahí mismo, como puedes ver, y encima de ella, enlaces rápidos. Así que encabezando, Enlaces rápidos. Deben ser de un estilo de tres años. Vamos al color del texto. Creo que todavía tengo ese no. Copia. Cámbialo a eso. Vamos a la tipografía. Hagámoslo 900 así como así. Ahora, lo que tenemos que hacer es crear este formulario de inscripción. Y lo hacemos con otro plug in el mejor plug in para crear formularios wordpress, y se llama forminator Me encanta ese enchufe, y voy a volver a cambiar a nuestro tablero de instrumentos. En primer lugar, permítanme actualizar eso. Antes de hacer eso, ¿por qué no terminamos esta cosa? Así que vamos a hablar de mí todos los artículos privacidad. Entonces voy a seleccionar eso. Puedes editarlo aquí mismo. Acerca de mí, artículos privacidad. También puedes editarlo aquí. Artículos. Términos de uso de privacidad. Entonces duplicaré esos términos de uso. Todo bien. No venimos los cambios aquí, así que sobre mí. Ahí vamos. Todo bien. Entonces déjame escribir eso aquí sobre mí. Ahí vamos. Y claro, ahora vamos a darle un estilo. Vayamos al icono. Queremos darle ese color rojizo. Copia eso, pegarlo ahí. Pero al flotar, queremos que sea este azul marino. En pastas de color flotar. Así como así. Entonces sobre el texto, vayamos al icono. Vayamos al mensaje de texto. El color debe ser ese azul marino. Pero al flotar, debería ser así de rojizo, así como así Ahora podemos cambiar estos íconos. Así que volviendo al contenido sobre mí. Entonces tal vez usuario. Artículos. Tal vez texto. Privacidad. ¿Qué vamos a utilizar aquí Voy a usar un objetivo Ttérminos de uso. Libro que es un libro enorme con términos de uso. Privacidad, tal vez podamos usar una caja fuerte. Bien, actualice eso Bien. Por supuesto, como pueden ver el fondo tiene este color que usamos aquí. Así que déjame elegir este fondo de barra lateral. Copia eso, ve aquí. Seleccione el contenedor, estilo, tipo de fondo. Pega eso ahí dentro. Escojamos también el color del borde. Color de borde. Sólido. Vamos a darle uno. Y vamos a darle color al borde Bien. Y también, fíjense que tenemos espaciado aquí y aquí abajo. Si bien esto todavía está seleccionado, vaya al margen superior avanzado, AD o espere, que se supone que es relleno, ocho y ocho. Actualiza eso. También queremos tener un buen espaciado entre estos elementos. Si bien esto todavía se selecciona, diseño, brechas, digamos 30. Actualiza eso. Revisemos los cambios. Ahí vamos. Entonces quiero empujar esto un poco hacia abajo porque parece estar más elevado que esto. Entonces seleccionaré el contenedor que lo sostiene y aumentaré el relleno en la parte superior. Espaciado desde el borde del contenedor hasta el contenido. Actualiza eso, previsualiza los cambios, así. Entonces ahora, creo que pararemos aquí mismo para esta lección. En la siguiente lección, sigamos adelante y creamos la forma forminadora y los íconos de las redes sociales Entonces te veré en breve. 33. Formulario de suscripción a la lista de correo: Y, bienvenido de nuevo. Entonces ahora es el momento de crear la lista de correo formulario de registro con forminador Así que volvamos al interior del tablero. Quiero hacer clic en esto para tablero de instrumentos de Togo y el front end. Entonces aquí vamos. Vayamos a plugins añadir nuevo. Voy a escribir forminador así. Ahí vamos. Instalar ahora. 500 mil instalaciones activas. Es muy popular. Activar. Ahí vamos. Entonces aquí está, y sólo voy a arrastrar esto a la izquierda e ir al forminador Ahora, como pueden ver, aquí mismo, hemos creado cualquier tipo de forma o Paul. Nuestro objetivo es crear un formulario, así que haré clic en Crear. Queremos que se suscriba a un boletín, así que haré clic en Continuar. Formulario de registro, crear. Ahí vamos. Entonces aquí estamos. Tenemos dos campos, nombre, dirección de correo electrónico y el botón de suscripción. Si tenemos una vista previa de eso, eso es lo que tenemos. Si cierro eso, podemos reorganizarlos así, así que uno al lado del Si tenemos una vista previa de eso. Podemos tenerlos uno al lado del otro. También puedes cambiar el contenido haciendo clic en él y diciendo tal vez enviar. Pero ahora, esto está suscrito porque es un boletín Puede editar cualquiera de estos campos haciendo clic en ellos. Ahora, como se nota, no quiero el nombre de pila, así que voy a borrar, eliminarlo. Entonces nos quedamos con el correo electrónico y el botón. Así como así. Cierra eso y publica esto. Voy a seleccionar esta copia de código corto, y voy a ir al front-end donde estamos editando nuestro pie de página. Haré clic en Código corto tipo Plus. Y este es un portalugares de código corto. Entonces cuando lo dejamos ahí, nos da un espacio aquí para ingresar nuestro código corto. Entonces voy a pegar ese código corto. Acabo de copiar aquí en este espacio, y ahora nuestro formulario aparecerá aquí. Entonces déjame actualizar eso. Así que permítanme hacer clic en Aplicar para reflejar los cambios que hemos hecho en el back end, y ahora aquí está nuestro formulario. Por supuesto, necesitamos hacer algún trabajo para que sea más atractivo. Volvamos a entrar aquí. Oh, espera. Déjame volver al tablero de instrumentos. Cierra esto porque es el tablero. Vayamos al tablero. Ahora, dentro del forminador volvamos a nuestra forma. Voy a hacer clic en formularios. Tenemos dos. Quiero borrar esto. Es porque presioné Enter, y luego presioné el botón de crear mientras lo creaba. Edítelo. Volvemos a nuestro editor. El segundo paso aquí es la apariencia. Voy a hacer clic en eso, y aquí podemos elegir diferentes presets Vamos a usar esta. Bien. Y para los colores, podemos usar colores predeterminados, estos colores o personalizados. Vamos a elegir personalizado. Botón Enviar. Debe ser de qué color o ese color rojizo. Este color. Entonces copia eso. Enviar color predeterminado. Pega eso ahí dentro, y si lo previsualizamos , ahora es ese color. Como pueden ver, ahora no tenemos esas fronteras de parte. Al pasar el cursor, copia eso. Al hover, queríamos tener ese azul marino y en foco. Pegar actualizarlo. Ahora, si vamos al front-end, lo seleccionamos y aplicamos, vamos a ver los cambios que hemos hecho en el back end reflejarse en el front end, así como así. Pero ahora, una cosa que notarás es si tenemos una vista previa de los cambios, esto tiene esquinas muy duras. Podemos hacerlos más redondeados como aquí. Y para ello, necesitaremos usar algún CSS. Ahora, cada enchufe tiene configuraciones específicas que te proporciona, pero por si acaso no puedes ver la configuración que quieres usar. A lo mejor el plug in no te ha proporcionado esos ajustes. Ese plug in generalmente te proporciona un lugar para agregar tu propio CSS para cambiar la apariencia de lo que estás creando. Entonces forminator aquí abajo la apariencia tiene este campo CSS personalizado donde podemos agregar algunas líneas de código en CSS para afectar cómo se ve esto Entonces, aquí abajo, podemos usar el selector de entrada. Este es un campo de entrada. Entonces podemos usar el selector de entrada. Cuando hacemos clic en eso, se rellena automáticamente. Y aquí dentro, podemos decir, radio fronterizo cinco celdas pico, y si tenemos una vista previa de eso. Ahora son cinco celdas pico. Si decimos 50 celdas pico, será súper redondeado. Volvamos a 50. Podemos hacer lo mismo con el botón, pero el problema es que no tenemos un selector para el botón aquí mismo. En primer lugar, permítanme actualizar eso, y vamos aquí, seleccione esto y luego aplique. Entonces ahora si tenemos una vista previa de los cambios, claro, ahora esto tiene esquinas redondeadas, pero tenemos que hacer eso para el botón. Entonces, para obtener el selector para el botón, hagamos clic derecho sobre este elemento y vayamos a inspeccionar. Déjame ampliar esto. Si elegimos este icono aquí mismo, vamos al modo de selección de elementos totales y podemos seleccionar un elemento específico. Por ejemplo, si selecciono este botón, ahora puedo mirar el Déjame solo arrastrar esto. Ahora puedo ver el nombre de este elemento que he seleccionado con este icono aquí mismo. Aquí abajo, como pueden ver, tenemos botón formulador de puntos enviar, y este es el selector Así que volviendo aquí, voy a pegar botón de envío, llaves, enter, Radio de orden, cinco píxeles también Vamos a previsualizar eso. Y ahora tiene esas esquinas redondeadas. Por supuesto, aumentemos el ancho al 100% del espacio disponible de izquierda a derecha, 100%, así como así. Actualiza eso. Ahora si vamos al front-end y seleccionamos esto, luego aplicar Luego previsualizar los cambios. Ahí vamos. Entonces déjame cerrar esto y ahora eso es un hermoso fooder Entonces creo que vamos a detener esta lección aquí mismo. En la siguiente lección, sigamos adelante y agreguemos estos íconos sociales debajo del formulario de inscripción. Te veré en breve. 34. Añade iconos sociales: Es momento de agregar los íconos sociales, estos íconos sociales, y no los había estilizado muy bien en mi página web de referencia. Están demasiado cerca de esto. Pero de todos modos, cambiando a nuestra estación de trabajo aquí mismo. Volvamos a nuestro editor. Aquí estamos. Quiero decir avanzado, y vayamos al margen y reduzcamos este margen inferior porque está consumiendo demasiado espacio, así como así. Ahora entremos aquí y escribamos social. Y queremos usar los iconos sociales por kit de elementos. Así que voy a arrastrar y soltar esos ahí abajo, y ahí vamos. Avanzado, quiero ir al margen y aumentar el margen superior a diez actualización. Y repasemos los cambios. Ahí vamos. Ahora, solo quiero cambiar los íconos por dentro para que sean blancos en hover. No me gusta el negro. Entonces volviendo aquí mientras esto todavía está seleccionado, ve al contenido, Facebook en hover El color tiene que ser blanco, así como así. Hagamos lo mismo con Twitter. Color al pasar el cursor, blanco. Y vamos a Link en sobre blanco. Ahora, por supuesto, ahora puedes proporcionar tu enlace aquí mismo para ir a la plataforma específica de redes sociales. Deberían ser Linkedin y puedes optar por abrirlo en una nueva pestaña. También puedes agregar más iconos sociales si quieres, y luego buscarlos aquí. A lo mejor digamos YouTube. Haré clic en YouTube Insertar. Ahora ahí vamos. Podemos cambiar este nombre a YouTube y cambiarlo a White. Revisemos los cambios. Ahí vamos. Por supuesto, ahora, estos están usando los colores oficiales de la marca en hover, así que hagamos lo mismo con YouTube Al pasar el cursor, el color de fondo debe ser rojo. Actualiza eso, y ahora es así de rojo. Revisemos los cambios. Ahora una cosa que quizás te estés preguntando es, ¿ seguirás viendo este enlace de edición del formulario aquí mismo? Y la respuesta es que los usuarios no verán esto porque no están conectados a tu panel de control. Si has cerrado sesión, no verás este formulario de edición. Solo lo verás si eres el editor como propietario. Por lo que los usuarios no podrán ver esto. Entonces así es como agregar los íconos sociales. Ya casi terminamos, pero antes pasar a hacer que el sitio web sea receptivo, sigamos adelante y creamos la página de contacto. Entonces si hago clic aquí para ir a la página de contacto. Así se ve la página de contacto. Entonces veamos cómo construirlo en la siguiente lección. Te veré en breve. 35. Página de contacto: I. Entonces ahora es el momento de crear la página de contacto, y así es como se ve. Entonces volviendo a donde estamos trabajando, entremos aquí. Antes de mudarnos a este lugar, hagamos esto clicable. Yo seleccionaré esto. Ir al enlace de contenido, URL personalizada, y quiero que apunte a casa. Entonces seleccionaré mi domicilio y luego actualizaré. Vamos a previsualizar los cambios. Y ahora puedo hacer clic en esto para irme a casa. Ahí vamos. Oh, espera. Una cosa más. Necesitamos agregar algo de espaciado entre el pie de página y este contenido. Entonces necesito editar la página en sí, no la comida, la página. Entonces voy a decir editar con elementor. Ahí vamos. Y debido a que tenemos este contenedor conteniendo todo este contenido, seleccionaré el contenedor en sí Margen avanzado inferior. Vamos a darle 100. Actualiza eso. Ahora vamos a previsualizar los cambios. Desplazamiento hacia abajo. Ahí vamos. Un buen espaciado entre el contenido y la carpeta. Ahora vamos a ir a la página de contacto, y así es como se ve por defecto. Vamos a editar página para hacer algunas configuraciones. Cambiemos la plantilla por defecto a elemento a ancho completo. Vamos aquí y digamos lleno sin barra lateral. Cerremos estos tres actualización abajo. Ahora vamos a editar con elementor. Voy a cerrar esto y esto también. Esto está bien. Dejémoslo ahí. Este es nuestro editor de contactos. Entonces echemos un vistazo a esto. Todo bien. Vamos a crear una doble columna así. Ahora esto será del 30% y esto será del 70%. Haré clic en eso y en el marcador de posición de código corto. Porque queremos soltar un formulario aquí creado con formulador Vamos al formulador y digamos formularios. Crear. Ya tenemos el formulario de inscripción. Ahora es el formulario de contacto. Déjame usar esta plantilla. Continuar. Contacto para Crear. Ahí vamos. Cuenta con cuatro campos. No necesito el número de teléfono de nadie, así que voy a borrar eso. Ahora tenemos nombre de correo electrónico y su mensaje. Estos dos son campos de entrada, y esto es un área, área de texto multilínea Este es un campo de entrada de una sola línea. Eso, publicar. Vamos a copiar ese código corto. Y ahora que tenemos este elemento de código corto, dejemos caer esa forma ahí dentro. Ahora es display, actualízalo. También vamos a crear algo de espacio aquí arriba. Seleccione el contenedor que lo contenga. Rompe eso, y vamos a darle tal vez 50. Digamos 60. Actualiza eso. Lo siguiente es cambiar esta apariencia. Queremos ir a apariencia, plano, y luego vamos a ir a colores personalizados. Entonces ahora mismo cuando es plano, no tiene esos bordes duros. Pero ahora para los colores, el botón de envío calzado también consigue esos colores que usamos la última vez Así que copia ese color rojizo por defecto, pega eso Así. Al flotar, queremos que sea este azul marino Copia eso al flotar, acuéstate ahí, y hagámoslo Actualiza eso. Revisemos los cambios. el cursor. Eso está bien. Ahora bien, si vamos al front-end, mientras se selecciona esto, apliquemos. Y vamos a previsualizar los cambios. Ahí vamos. Ahora, aumentemos el margen del bote en este contenedor. Entonces 100. Actualiza eso. Vamos a previsualizar los cambios. Así como así. Ahora está bien alineado en el centro. Lo siguiente, ¿por qué no hacemos estos redondeados? Estos son campos de entrada, recuerde, y esta es un área de texto. Entonces, si volvemos aquí y nos desplazamos hasta la configuración personalizada, tenemos un selector de campo de entrada y un selector de área de texto. Entonces, para todos los campos de entrada, queremos que el radio del borde sea de cinco píxeles, no de 50. Y si tenemos una vista previa de eso, se redondean los dos campos de entrada. Ahora, hagamos esto para el área de texto. El selector de área de texto. Cinco células pico. Ahí vamos. Y recuerdo que el selector de botones es forminator button submit button Lo sé porque la he estado usando tantas veces. Lo recuerdo. Solo quería mostrarte cómo agarrarlo desde el front-end cuando estábamos creando el formulario de inscripción. La mayoría de las veces, siempre quedará botón forminador, enviar Repetimos lo mismo. Cinco células pico. Ahí vamos. Todo bien. Entonces claro, Por el ancho, vamos a darle el 100%. Vamos a repasar eso. Ahí vamos. Actualiza eso. Vamos a seleccionar esto y aplicar los cambios. Entonces revisemos los cambios al front end y ahí vamos. Entonces ahora, claro, notarás que tenemos esta barra lateral. Pero tuvimos ese pequeño problema con estos no se sacaban de donde se supone que deben ser sacados. Veamos qué va a pasar. Entonces si vamos a la página de inicio en una nueva pestaña, rueda central del ratón y abrimos eso, quiero editar con elementor de contenido Canvas ¿Qué es eso? Quiero desplazarme aquí. Por qué tenemos esto Oh, sí. Entonces ahora después de refrescar esto, ahora podemos escribir las categorías. Esto es increíble. Entonces ahora, digamos productividad. Eliminar esta categorizada. Y mostremos la productividad ahí mismo en la página principal. Entonces ahora déjame seleccionar esa copia de clic derecho. Vamos a entrar aquí. Seleccione este clic derecho pegar. Todo bien. Ahora, permítanme seleccionar este cierre esto, y ahora ¿cuál seleccionaremos aquí? Recientes digamos destacados. En destacado, solo tenemos uno. Podemos asegurarnos entrando aquí puestos. Quiero que más de estas publicaciones estén en la categoría de publicaciones destacadas, así que editaré rápidamente cada una de ellas. Edición rápida. También deberían estar en la función, actualizar también, edición rápida, actualización destacada que. Por último, bastante actualización. Bien. Todo bien. Entonces ahora si actualizamos eso. Y permítanme solo seleccionar esto y aplicar para que todos los cambios puedan aplicarse desde el back end. Ahí vamos. Entonces ahora todavía tenemos tres. Todo bien. Entonces ahora post limit, se supone que tenemos cuatro. Esto ahora se está portando mal. la misma manera se portaba mal hace un momento. Todo bien. Entonces no creo que vaya a seguir luchando por encontrar una solución para esto. Pero probablemente podría agregar una lección extra aquí después de todas estas otras lecciones. Una vez que haya hecho mi solución de problemas y encontré una solución a esto. Así que no te preocupes, al menos ya sabes cómo llegar hasta aquí. Así que vamos a previsualizar los cambios una vez más. Ahora necesitamos algo de espaciado aquí mismo. Entonces aumentemos esa brecha, seleccione esta brecha 30. Actualicemos eso. Vista previa de los cambios. Ahí vamos. Básicamente, eso es todo lo que tenía para ti en esta clase. Si encuentro una solución para esto, la compartiré. Si no lo hago, encontraré una manera diferente de mostrar estos artículos recientes. Así que no te preocupes. Lo encontrarás en algún lugar de la lista de lecciones, creo, al final, como una lección extra. Entonces te veré en la siguiente lección donde estaremos haciendo el encabezado responsive. Así que no vayas demasiado lejos. 36. Mostrarás publicaciones recientes en la barra lateral: Me tomé un breve descanso de grabar estas lecciones, y cuando regresé, mi mente estaba fresca y encontré una solución a cómo mostrar estos artículos recientes. Entonces quiero mostrarte cómo hacer eso. Así que volvamos aquí con el editor, y yo estaba practicando, y esto es lo que se me ocurrió. Creo que se ve mucho mejor que vamos a ir a la página principal. Bien. Y mira el original. Este es el original. Y si voy al sitio web de referencia, esto es lo que tenemos en el sitio web de referencia. Todavía también se ve bien. Se ve increíble, pero en realidad haremos menos trabajo que yo mientras estaba creando esto. Ahora mismo, mientras estamos creando las nuevas publicaciones recientes, vamos a hacer menos trabajo de lo que hubiéramos hecho. Entonces ahora, esto de aquí es un elemento de entrada de blog por kit de elementos. Entonces solo voy a escribir Déjame simplemente quitar esto. Y aquí, voy a escribir blog. Entonces porque tenemos kit de elementos instalado, existe este elemento de entradas de blog. Así que arrastra y suelta esto justo debajo de ese encabezado. Y vendrá con todo esto. Esto se ve aterrador. Quizás te preguntes cómo vamos a editar esto. Pero no se preocupe. Entonces, antes que nada, vayamos a mostrar contenido, digamos que no. Entonces no mostramos ese extracto. En segundo lugar, queremos ir al estilo. Vamos a colapsar envoltorio e ir al título y reducir la tipografía, el texto del Entonces, déjame arrastrar eso. Déjeme dejarlo ahí por ahora. Vamos a jugar con eso. Pero al menos ahora, como puedes ver, está empezando a caber en un espacio más pequeño. La otra cosa es, si vamos a la lista de posts, los posts que creamos, recuerda que creamos esto fuera contenido de Canvas para que podamos mostrarlo aquí mismo en el lateral. Así que lo creamos como post, y actualmente se encuentra en la categoría sin categorizar. Por eso está apareciendo aquí. Porque si seleccionamos esto y vamos al contenido colapsar maquetación e ir a consulta. Ves uncategorized está en la lista de los posts para mostrar. Así que vamos a eliminar sin categorizar. Echemos un vistazo también a las destacadas. De hecho, permítanme simplemente eliminar esto porque está categorizado. Debe permanecer como se presenta. Todo bien. Así que volviendo a entrar aquí, también eliminemos destacados. Aquí está destacado. Vamos a quitar eso. Y eso significa que la publicación off Canvas no se mostrará aquí porque no estamos mostrando publicaciones destacadas. Lo siguiente que queremos hacer es Pasemos a los metadatos. Veamos si podemos cambiar algo aquí. No, maquetación. Entonces entrando aquí, aquí es donde vamos a hacer algunos cambios. Entonces, antes que nada, rompamos el relleno en este fondo, esta caja. Ese es el envoltorio. Así que el relleno del contenedor. Aumentemos el margen en los contenedores en la parte superior para espaciarlos. Así margen contenedor. Rompamos eso y luego aumentemos el margen superior para espaciarlos. 15 está bien. Entonces aumentemos también el acolchado superior. Hasta 15 y acolchado inferior 15 también. Porque recuerden, estamos tratando lograr como viste en mi ejemplo, esto se empujó un poco. Déjame ir envoltura de lapso y ampliar la imagen destacada. Vayamos a la izquierda principal. Reduzcamos eso para empujarlo un poco hacia la izquierda. Pero vamos a seleccionar este contenedor que los sostiene. Romper el margen también. Reducir ligeramente el margen de la derecha porque queremos equilibrar este espaciado con este espaciado de la imagen, no del fondo blanco en sí. Todo bien. Entonces con eso, mientras aún esté seleccionado, volvamos al interior del estilo. Vayamos al título. Margen. Aumentemos el margen en la parte superior. Vamos a darle diez, y vamos a reducir el margen de la izquierda. Volvamos al rapero, aumentemos el acolchado de la derecha para empujarlo en este lado para crear más espacio, así. Pero también vamos a colapsar rapero para aumentar el tamaño del título. Titulo Tipografía. Haré clic aquí y usaré la tecla ap de mi teclado para aumentarla gradualmente. Creo que esa es una buena talla. Entonces también aumentaré altura de la línea con la flecha de mi teclado. Creo que esa es una buena talla. Digamos 16 ahora volviendo dentro del envoltorio, vamos a reducir de hecho, está de vuelta aquí título, margen superior. Vamos a reducir eso hasta ese punto. Así que volviendo al interior del contenido, como puedes ver ahora mismo, estoy mostrando sólo tres artículos, pero si entramos dentro de la consulta, tenemos el recuento de posts. Podemos aumentar eso tal vez a seis y tendremos seis exhibidos aquí. Ahora, por supuesto, algunos de los títulos son más largos que el resto, y así no están equilibrados así. Creo que depende de ti jugar con el nombre de tus artículos para hacerlos aproximadamente del mismo tamaño en términos de longitud en palabras para que se vean uniformes, como los tres primeros Entonces, si eliminamos estos dos que están desbordando más allá de la imagen, hagamos estos tres Y ahora eso se ve bien. Entonces déjenme decir actualización, y vamos a previsualizar los cambios. Entonces ahí vamos. Creo que esto se ve increíble. Y claro, si haces clic en alguno de ellos, ellos abrirán el artículo para que puedas leer como puedes ver la escoria aquí mismo. Así que volvamos a entrar aquí. Creo que esto tenía Sí, ya habíamos creado esta entrada de blog, y creo que nos olvidamos de agregar un bonito margen en nuestra plantilla. Y así cada vez que añadimos la plantilla a una entrada de blog para crearla, siempre no tendrá este espacio aquí mismo. Así que editemos eso muy rápido antes de dejar esto. Bien, entonces seleccionaré este contenedor que lo está guardando todo. Está guardando todo hasta este lugar. Iré al margen avanzado inferior 100. Actualiza eso. Revisemos los cambios. Desplazarse todo el camino hasta la parte inferior. Ahora, tenemos un buen espaciado. Y ahora que tenemos esta entrada de blog actualizada, necesitamos deshacernos de la plantilla antigua y guardar esta nueva. Mientras se selecciona esto, voy a la derecha le guarda plantilla. Nueva plantilla de entrada de blog, Enter. Y eliminemos la vieja plantilla de publicación de blog. Suprímase eso. Eliminarlo no eliminará las publicaciones de blog que lo estén usando. Todo bien. Ahora, volviendo aquí, quiero ir a la página principal. Y quiero reemplazar esto con la nueva barra lateral de artículos recientes que hemos creado. Así que edita con elemento. Vamos a desplazarnos hasta aquí, y luego voy a quitar eso. Vuelve aquí. Haga clic en este contenedor, haga clic derecho en copiar. Vuelve aquí. Seleccione este contenedor, haga clic derecho en pegar. Entonces está pegada ahí dentro. Ahora podemos seleccionar esto y decir, a lo mejor queremos dentro de la consulta, queremos mostrar solo la productividad. Entonces me desharé de estos otros. Y ahora solo nos quedan puestos de productividad. A esto lo puedo llamar artículos de productividad. Seleccionando estilo, tipografía, tecla de flecha hacia abajo en el teclado para reducir el tamaño, actualizar Revisemos los cambios. Desplazamiento hacia abajo. Eso me gusta. Así que eso se ve increíble. Ahora, en la siguiente lección, quiero que sigamos adelante y si vamos a nuestra página web de referencia , claro, como pueden ver, tenemos este formulario de registro. Ya teníamos otro formulario de inscripción aquí abajo, pero tenemos otro aquí. Quiero mostrarte cómo construir eso en la siguiente lección. Así que no vayas demasiado lejos. Nos vemos en breve. 37. Sección de registro en la página de inicio: Entonces ahora es el momento de crear este registro en mi formulario o sección de lista de correo. Entonces volviendo a nuestro espacio de trabajo, aquí estamos. Mientras seguimos editando la página de inicio. Es muy fácil agregar esa sección. Entonces, antes que nada, voy a seleccionar esta copia de clic derecho. Seleccione este contenedor aquí mismo, haga clic derecho en pegar. Entonces ahora lo hemos pegado ahí, y deshagámonos de esto Ahora, claro, sólo voy a tomar un código corto. Y déjalo caer ahí. Y ahora, recuerden, ya creamos un formulario de inscripción. Entonces todo lo que tenemos que hacer es agarrar el código corto del back end. Así que volviendo aquí, formas formadoras. Y tenemos un formulario de inscripción. No necesitamos abrirla. No necesitamos ir a editar. Podemos hacer clic en esta rueda de cremallera y copiar código corto y volver aquí Pega ese código corto ahí dentro, y ahí está nuestra forma. Todo lo que tenemos que hacer ahora es darle estilo para que se vea así. En primer lugar, permítame agarrar esta copia que, seleccione esta, haga doble clic aquí, peguela. Consigue los últimos artículos, copia eso. Quiero agarrar un editor de texto y dejarlo ahí mismo. Todo bien. Haré doble clic ahí y luego controlaré turno V para pegar ese texto ahí dentro. Seleccione. Si bien esto todavía está seleccionado, iré a avanzado, romperé ese enlace ahí mismo. Después margen inferior. Vamos a reducirlo hasta ese punto. Seleccione esto, aumente el tamaño tipografía. Hasta ese lugar. Déjame reducirlo hasta tal vez 40. Actualiza eso. Quiero ir a agarrar mi color aquí, azul marino. No, se supone que es blanco, por cierto. Sí, se supone que este texto es blanco. Entonces, antes que nada, hagamos el fondo azul marino. Así que seleccionando esta pasta de color estilo contenedor. Selecciona los textos, los blancos seleccionan estos textos. Blanco, actualización. De hecho, necesitamos agregar algo de espaciado aquí mientras todavía está seleccionado, ir a avanzado, eliminar eso para poder editar celdas individuales, margen superior, tal vez hasta ese punto, y por cierto, nos olvidamos de aumentar el espaciado entre estas dos también. Entonces seleccionaré el contenedor que contiene los dos contenedores, y voy a ir a disposición. Digamos 30. Ahora tenemos un buen espaciado ahí. Voy a tener que reducir el tamaño hasta ese punto. Si bien esto todavía está seleccionado. Por supuesto, antes que nada, vamos a guardar y previsualizar los cambios. Desplazamiento hacia abajo. A mí me gusta. Pero quiero verlo mientras esté desconectado. Déjame copiar eso. Después controla turno para abrir una ventana de incógnito. Después voy a pegar ahí la URL para verla como invitado. Desplazamiento hacia abajo. Sí, entonces tenemos demasiado espacio aquí. Sigamos adelante y reduzcamos esto seleccionando este fondo de margen avanzado, reduciéndolo hasta tal vez 15, negativo 15. Déjame ir aquí y refrescarme. Ahora tenemos una cantidad equilibrada de espacio aquí y aquí arriba. Entonces en los lados, también podemos aumentar el acolchado. Digamos, a la izquierda y a la derecha, necesitamos. T. Actualizar eso. Vamos a previsualizar los cambios. Exactamente. Ahí vamos. Entonces así es como agregar la sección de registro a nuestra página de inicio. Los usuarios pueden hacerlo mientras los usuarios se desplazan hacia abajo y ya les están gustando los artículos que están viendo Obtendrán este formulario y se les pedirá que se registren, y en ese momento, es muy fácil conseguir que se registren porque pueden ver el beneficio de registrarse. Lo siguiente que quiero hacer es cambiar el color de esta dirección de correo electrónico. Pero si lo hacemos yo lo hacemos blanco, porque estamos usando el mismo formulario de registro, aquí también va a ser blanco porque es el mismo formulario de registro. Si queremos hacer este color de la etiqueta aquí, dirección de correo electrónico, blanco, y dejar esto como gris oscuro, entonces necesitamos crear otro formulario de registro que se vea así. Así que volvamos aquí. Formulario de registro, rueda de dientes. Podemos duplicar esa copia del formulario de registro. Entonces quiero editar esto. Cambiemos esto a Formulario de registro en la página. Actualiza eso. Vamos a la apariencia, colores, conceptos básicos de campo, etiqueta. Queremos que la etiqueta sea blanca. Si tenemos una vista previa de eso, ahora la etiqueta es blanca, por eso no podemos verla porque el fondo aquí es blanco, actualiza. Ahora, si volvemos aquí y seleccionamos el formulario, luego haz clic en Aplicar. Los cambios ahora reflexionarán sobre esa forma particular. Desplazándose hacia abajo, déjame refrescar esto. ¿Qué está pasando? Control art. No sé por qué no es Oh, espera. Seguimos usando el mismo código corto. Pero aquí, esto tiene un código corto diferente. Entonces déjame copiar este código corto. Vuelve aquí y pega el nuevo código corto. Como puede ver, ha cambiado a 4809 de 3809. Entonces ahora, esto es blanco. Actualiza eso, previsualiza los cambios. Entonces ahora es blanco, y aquí abajo, esto sigue siendo gris porque se trata dos formas de registro diferentes que se ven idénticas. Entonces espero que entiendas la diferencia ahí. Entonces básicamente, así es como agregar la página de inicio suscribirse o registrarse formulario. En la siguiente lección, sigamos adelante y creemos el encabezado responsive. Hagamos que este encabezado receptivo en diferentes tamaños de dispositivo. Ya se ve bien en las pantallas de escritorio. Ahora, hagamos que se vea bien en tabletas y teléfonos móviles. Entonces te veré en breve. 38. Encabezado receptivo: Es momento de hacer que el sitio web sea receptivo y comenzaremos con el encabezado. Entonces subiendo aquí, antes de comenzar a trabajar en la capacidad de respuesta, veamos cómo se ve en diferentes dispositivos Entonces Control Shift para que aparezca las herramientas de desarrollo, así Control Shift en mi teclado, Sigamos adelante y haga clic en este toggle responsive. Cuando hago clic en eso, podemos alternar entre vista normal y las simulaciones del dispositivo Y aquí arriba en este menú desplegable, podemos simular diferentes tipos de dispositivos Podemos verlo desde un iPhone 14 max. Así es como se ve. Vamos a verlo en un iPad mini. Así es como se ve. Entonces aquí está el encabezado en un iPad mini no se ve muy bien. De hecho, vayamos a la ventana de incógnito. ¿Dónde está mi ventana de incógnito ? Aquí está. Quiero que nos desconectemos porque cuando estás registrado, tenemos esta barra bien presionada que nos impide ver en qué estamos trabajando Entonces yendo a la ventana de incógnito, control de turno, Ahora, así es como se ve. Así que volvamos al iPhone 12. Así es como se ve. Entonces comencemos con el encabezado. Cierra esto junto con eso porque ya terminamos con eso, todos estos. Para comenzar con el encabezado del kit Elements, vamos a los kits Elements Haré clic en editar con Elementor aquí, haga clic derecho en Abrir enlace en Nueva pestaña Y aquí estamos. Entonces, si lo selecciono, podemos ir al modo responsivo, así que haga clic en ese icono, que revelará los diferentes modos. Ya se ve bien en el escritorio, así que cambiemos a tabletas. Ahora, así es como se ve en la tableta en nuestro editor. Para que podamos dejar ese botón ahí mismo. Pero ahora, lo que quiero que hagamos es seleccionar este elemento del menú. Bien. Déjame seleccionar afuera. Es un poco complicado seleccionarlo, así que golpearé control para que aparezca el navegador. Bien. Y sí, en realidad está seleccionado. Quiero ir a Avanzado, luego eliminar estos ajustes que configuramos para el escritorio. Como puedes ver, están graduadas, pero si cambiamos a escritorio, ahora están activas porque estamos editando escritorio. Si cambiamos a tablet, están calificados para decirnos que estos no son los ajustes para la tableta. Voy a romper eso. Eso es como reiniciarlo, y creo que se ve bien. Actualiza eso. Y ahora, vayamos a esta ventana de incógnito, refrescar. Pasemos al iPad Mini, y así es como se ve. Pero esto se ve raro en un iPad mini. Entonces déjame cerrar eso. Y así queda el menú en un iPad Mini. Volviendo aquí. Sigamos adelante y agreguemos nuestro logo aquí. Así que ve al contenido, configuración del menú móvil, logotipo del menú móvil. Seleccionemos el logotipo y lo pongamos ahí, actualicemos. Ahora cuando abrimos el menú, se ve bien. Pero podemos agregar algún margen a la izquierda, así estilo, colapsar envoltura de menú, logotipo de menú móvil, margen, romper eso. Vamos a abrirlo de nuevo. Margen derecho izquierdo. Vamos a empujarlo un poco hacia adentro. Actualiza eso. También podemos aumentar el ancho para hacerlo más grande, actualizar eso. Creo que hasta ahora me gusta. Pasemos a la vista móvil. Y así es como se ve en el móvil. Entonces ahora mismo, este contenedor que sostiene el logo, mientras estamos aquí, está ocupando 25%. Pero cuando cambiamos a la vista móvil, está ocupando el 100% de izquierda a derecha. Queríamos ocupar 25% 50%. Entonces seleccionando ese cambio aquí al porcentaje, luego al 50%. Y este contenedor móvil también debería ocupar el 50%. Así como así. Entonces podemos dejar ese botón ahí mismo. Actualización. No hagamos una vista previa de los cambios aquí. Vamos a cambiar aquí. Refrescar ventana de incógnito. Vamos a cambiar al iPhone 12. No te preocupes por esto. Esto es por el texto y el contenido. Por eso todo se empuja hacia la izquierda. Pero como puedes ver, están bien estructurados. Bien, ahora esto se ve mucho mejor. Se puede cerrar. Si abro el menú, así es como los menús. Aumentemos el tamaño del menú móvil. Vamos a abrir esto. Ir al menú móvil logo con actualización? ¿Vista previa? No. Estoy acostumbrado a eso. Así que refrescar. Ahora, vamos a abrirla. El logo es bueno. Ahora, todo se empuja hacia la izquierda porque como se puede ver el H uno de aquí es demasiado ancho. Entonces la línea debería estar a la altura de alguna parte de aquí. Todo debería encajar perfectamente sin este espacio en blanco. Así que volvamos aquí y confirmemos que todo lo demás se ve bien antes de que lo llamemos envoltura. Creo que ahora tenemos un encabezado bien parecido en todos los dispositivos. Sí, en todos los dispositivos, el encabezado se ve bien. Entonces así es como hacer que el encabezado receptivo en diferentes tamaños de dispositivo. En la siguiente lección, veamos cómo hacer lo mismo para la página de inicio y todo su contenido antes de pasar a la carpeta. Entonces te veré en breve. 39. Páginas receptivas: Entonces ahora es el momento de hacer que la landing page sea receptiva. Entonces porque ya terminamos con el encabezado. Solo voy a presionar los cambios de vista previa solo para poder hacer clic en este botón de inicio. Entonces cierra ese editor. Entonces ahora podemos editar esta página misma con elementor. Y aquí estamos. Entonces déjame cerrar el navegador. Y ahora hagamos clic en modo de respuesta y cambiemos a tablet. Así se ve en la tableta. Vamos a desplazarnos hasta el fondo. Todo bien. Entonces comencemos con esta sección de héroe superior, seleccionándola. Voy a ir a avanzado. Entonces queremos mantener este acolchado superior e inferior. Entonces, si rompo eso, tendremos que teclear 50 otra vez y 80. Ahora, digamos 60 aquí arriba en tabletas. Pero por los lados, queremos darle tal vez 30 y este otro lado 30. Selecciona esto y pongámoslo en el medio. Así como así. Seleccionemos este contenedor que contiene todo lo demás. También vamos a darle un acolchado de 20 en los lados, izquierda. Y 20 a la derecha, así como así. Ahora, cuando seleccionamos esto, mientras que en el escritorio, está en este formato en la tableta, está cambiando al estilo de cuadrícula, y no queremos eso. Queremos seguir manteniendo el diseño original. Entonces entrando aquí, queremos una columna. Y deberíamos estar en el lugar. ¿Por qué está en t tomando cartas de efecto? Creo que porque no tenemos suficiente ancho como lo hacemos en el escritorio. Es decir, esto es muy amplio. Y aquí mismo, no tenemos el espaciado suficiente para tener una imagen y todo este contenido a la izquierda. No creo que podamos aplicar el mismo layout donde tenemos una imagen y el texto a la derecha en modo escritorio. Entonces creo que vamos a tener que optimizarlo como se ve. Entonces aquí mismo, lo hemos establecido en el sitio, y creo que estoy satisfecho con esto. Lo único que me gustaría hacer es separar esto un poco. Así estilo. Vayamos al contenido. Ahora, volvamos a las opciones de contenido y visualización, espaciado entre filas. Vamos a incrementar eso. Eso son 20, digamos 30 para separar cada publicación del anterior. Creo que eso me gusta En lugar de previsualizar eso, antes que nada, vamos a reducir la brecha entre las dos columnas Seleccionando esto ir al diseño. La brecha aquí debería ser de diez. De hecho, no hay brecha, cero. Sólo déjalo así. De hecho, creo que lo que podemos hacer es hacer que esto ocupe el 40% del espacio. Al hacer clic en ese 40%. De hecho, digamos que el 50% y este otro lado también ocupará el 50%, así como así. Y podemos dejar eso ahí mismo. Probablemente podamos ajustar el tamaño de la baldosa ahí, Tipografía No, podemos dejarlo en ese tamaño, pero reducir la altura de la línea. Actualiza eso. Ahora, volvamos a nuestra ventana de incógnito del simulador Voy a refrescar esa página. Y luego vamos a previsualizarlo en un iPad mini. Vamos a revisarlo en un iPad Pro. Así se ve en un iPad pro. Surface Pro, iPad Air. Ahora bien, parece que cuando lo vemos en la ventana de incógnito o cuando acabamos de cerrar sesión desde el editor, somos capaces de mantener el diseño lado a lado, pero creo que el otro layout mucho más sentido que tener esta imagen estrecha Al menos ahora podemos ver por qué no es buena idea tener el texto y la imagen uno al lado del otro. Bueno, esto es seleccionado. Vayamos al contenido. Digamos tarjetas ¿Y qué pasa con el clásico? Bien, actualicemos eso. Y volvamos a entrar aquí, refrescarlo. Ahí vamos. Entonces así es como se ve. Creo que se ve mucho mejor que lo que teníamos antes. Sí, se ve bien. A continuación, veamos cómo hacerlo receptivo en el teléfono móvil. Entonces seleccionaré este estilo de texto Tipografía. Redujamos también la altura de la línea a ese punto. Creo que todo lo demás se ve bien en esa sección de héroes, podemos reducir esto creo dejémoslo ahí. Desplazamiento hacia abajo. Aquí están las entradas del blog. El subscribe viene antes de eso, y por eso queríamos mantenerlo en este contenedor del lado izquierdo porque este contenedor colapsará y vendrá después de este contenedor. Entonces volviendo a la vista móvil, Entonces ahora lo que queremos hacer es aumentar este espacio, seleccionar este contenedor, ir a avanzado, romper el margen ahí, y aumentar el margen superior hasta ese punto tal vez. Ahora está equilibrado. Desplazamiento hacia abajo Tenemos que hacer algo al respecto, así que seleccionaré ese estilo. Vamos a romper que aumentan el acolchado inferior. Mientras aún estamos bajo el envoltorio. Vamos al título. Rompamos los ajustes predeterminados que habíamos establecido, así como así. Pongamos todo en el centro. Volvamos al envoltorio y aumentemos el relleno a la izquierda y a la derecha. Entonces digamos cinco. No, son 50. Digamos diez y a la derecha, diez, eso empuja todo hacia adentro por diez y diez Entonces para la imagen destacada, vamos a reducir ese margen. Quitar este margen que habíamos establecido. Y vamos a establecer un margen inferior para empujar hacia abajo el texto. Redujamos el margen superior para empujar la imagen hacia arriba y fuera del fondo blanco. Ahora, volvamos al interior del envoltorio y reduzcamos el margen inferior sobre el fondo blanco. Digamos 20. Creo que eso se ve mucho mejor. Selecciona este encabezado, estilo, centraliza los textos, avanzado, margen inferior Empujemos las cosas hacia abajo. Pasemos también a la tipografía, aumentemos el tamaño un poco, aumentemos el tamaño un poco, 20 pero reduzcamos la altura de la línea Bien. Actualiza eso. Desplazamiento hacia abajo. Lo haremos en la siguiente lección, vamos a trabajar en la carpeta. Pero ahora volvamos a cambiar aquí y refrescar el simulador. Ahora cambiando al iPhone 14. Así se ve en un iPhone 14. Así es como el blog publica en un iPhone. Ahora, por supuesto, esto es solo una ilustración de cómo funcionan estas herramientas. No vamos a tener un sitio web perfecto en este momento. Depende de ti tomarte tu tiempo para darle vida y usar todos estos ajustes para asegurarte de que todo encaje perfectamente. Por ejemplo, creo que este texto es un poco demasiado pequeño, por lo que podemos aumentar ligeramente el tamaño. Pero estas son cosas de las que esperaría que te encargaras. Seleccionando eso, yendo al estilo, colapsar el ajuste o ir a la tipografía del título, aumentemos ese tamaño del texto y también la altura de la línea Eso es demasiado. Digamos hasta ese punto, actualización. Entonces estas son algunas de las cosas que necesitarías para tomarte tiempo y mejorarte. Y cada otra parte que podríamos haber olvidado cuidar. Esto es lo que estoy brindando es solo una guía sobre cómo hacer estas cosas para ayudarte con la mentalidad, sobre cómo lograr un buen sitio web Entonces ahí vamos. Ahora, puedes seguir adelante y hacer algo al respecto a esta parte. Déjame terminar con eso. Seleccionando esto. Hagamos que ocupe tal vez el 40% y esto puede ser el 60%. No sé por qué no va a subir, se supone que se derrumba aquí atrás porque tenemos suficiente espacio. Vamos a hacer que ocupe el 100%. Y esto también puede ocupar déjame ir a avanzado, quitar este margen, luego aumentar su ancho. Y actualizar eso. Como puede ver, estos son empujados hacia adentro más que el texto y el encabezado Seleccionando este Avanzado, rompe ese margen a la izquierda. Hagamos también lo mismo por eso. Margen avanzado a la izquierda. Actualiza eso. Ahora, veamos esta actualización. Ahí vamos. Entonces creo que ya es suficiente por ahora. Depende de ti seguir adelante y jugar con eso. También vamos a reducir el, el margen superior en eso. Oh, espera, seleccionemos este texto, vayamos a avanzado, reduzcamos el margen inferior para que suba la imagen. Actualiza eso. Refresca esto. Todo bien. Entonces creo que eso es mucho mejor por ahora, pero siéntete libre de seguir retozando con todos los ajustes para obtener mejores resultados Entonces, en la siguiente lección, veamos cómo hacer que la comida sea receptiva. Entonces te veré en breve. 40. Pie de página receptivo: Entonces ahora es el momento de hacer que el pie de página sea receptivo. Entonces vayamos a editar con elementor, luego editemos el pie Bien, así que aquí vamos. Así que ahora cambiemos al modo responsivo, y quiero cambiar al modo tablet porque ya se ve bien en el escritorio. Ahí vamos. Entonces lo que quiero hacer es darle un poco de relleno en los costados. Sí, así que hagámoslo. Si bien se selecciona este contenedor en sí, pasemos a avanzado, y queremos mantener este acolchado superior e inferior, pero agregar 20 a los lados. Entonces rompamos eso dejó 20, 20. Entonces arriba tal vez 50. No, de hecho, digamos 40 y top 40. Todo bien. Vamos. Entonces se ve bien en una tableta. Vamos a cambiar al móvil. Así se ve en un móvil. Seleccionaré este texto, voy a estilo. Ponlo en el medio. Vamos a agregar algún margen en la parte superior para separarlo del logo. T es bueno. Y pongamos también estos en el medio. ¿ Podemos dejarlos ahí? Sí, creo que deberíamos dejarlos ahí porque creo que se ven bien. Pero seleccionemos este contenedor contiene los enlaces rápidos Advance. Quiero aumentar aún más el acolchado superior. De hecho, llévala nuevo a cero e incrementa el margen superior en su lugar. Así como así, actualización. Revisemos los cambios. Digamos control de turno, y así es como se ve en una tableta. No quiero poner estos en el medio porque veamos cómo se verán, seleccionando ese estilo, ponerlos en el centro. Como puedes ver, no están correctamente alineados. Si seleccionamos estos enlaces rápidos. Vamos a centralizarlo, actualizar. Entremos aquí y veamos los cambios. Creo que se ve increíble, por cierto. Entonces lo dejaré así. Puedes usar puedes volver a cambiar al otro diseño o dejar eso en el medio así. Entonces, si hacemos clic en esto para ir a casa, O , de hecho, vamos a verlo también en una tableta, iPad mini. Vamos al fondo. Así se ve en una tableta. Vamos a subir. Así es como se ve esto. Entonces así es como hacer que el sitio web sea receptivo, las diferentes secciones respondan en los diferentes dispositivos. Ahora, notarás que no hicimos que estas otras páginas respondieran, y claro, ese es un ejercicio para ti. En cada clase que publico, siempre te dejo con un ejercicio. Usando los principios que hemos utilizado para hacer que esta página de inicio y el encabezado y la foto respondan, puedes hacer que estas otras partes respondan también, la página de contacto, los artículos. Y por último, también tenemos la página de videos, que quería darte como ejercicio. También es parte del ejercicio. Si vamos al sitio web de referencia aquí, Aquí vamos. Entonces al sitio web de referencia como ya viste. Si vamos a la página de videos, tenemos cuatro videos de muestra. Y si haces clic en uno de ellos, aparece y reproduce automáticamente un video, y tienen estas esquinas redondeadas. Y claro, esta sección de héroes se parece más o menos a los artículos, a la sección de héroes. Entonces eso significa que solo puedes copiar esto. Pero para los videos, tendrás que usar un elemento de video. Así que volvamos aquí. Si vamos aquí y buscamos video, verás diferentes elementos de video. Ahí está este video por kit de elementos, otro de element, la versión gratuita de Elementor, entonces tenemos lo que es esta caja de video Juega con ellos y ve cuál te permitirá obtener un resultado como este. Eso es un ejercicio para ti. Por si acaso necesitas una página de video para tu blog. Pero en caso de que no lo necesites, no necesitas trabajar en esta página. Así que ahora hemos hecho que el sitio web sea receptivo. Una cosa habrás notado si volvemos a la página principal, volvamos a donde estamos trabajando. Quiero alternar y dejar el modo de respuesta y actualizar esta página. Ahora, notarás que aquí perdimos nuestro diseño que tenía la imagen a la izquierda y el texto del post a la derecha. Entonces la imagen y el texto no están uno al lado del otro. Y descubrí que este elemento que usamos para crear esta grilla no tiene la configuración del modo responsive. Entonces eso significa que si lo configuras para que se vea así, se verá así en todos los tamaños de dispositivos. Si lo configuras para que tenga la imagen la izquierda y el texto a la derecha, me quedaré así en todos los dispositivos. Entonces esa es una deficiencia de ese elemento. Podría agregar una lección extra más adelante para mostrarte tal vez cómo usar un elemento diferente que no tenga esa deficiencia donde podamos establecer diferentes diseños para la visualización de las publicaciones del blog en diferentes dispositivos Pero por ahora, creo que esto es lo suficientemente bueno. Es aceptable. Recuerde, nuestro objetivo en esta clase era entender cómo usar elementor y word press juntos y complementos adicionales para armar un sitio web completamente funcional Así que hemos acertado a nuestra meta. Hemos aprendido a usar esas herramientas. Ahora, antes de que te vayas, tengo algunas reflexiones finales cruciales. Quiero compartirlo con ustedes. Entonces, si has estado conmigo hasta aquí, creo que querrás escuchar lo que tengo que decir, así que te veré en breve. 41. Reflexiones finales y próximos pasos: Y bienvenidos de nuevo. Entonces solo quiero tomarme un momento para darte las gracias por acompañarme en esta clase, y quedarme conmigo desde el principio hasta el final. Es muy fácil comenzar una clase o un curso, pero es un juego de pelota diferente para terminar el campo. Mucha gente se rinde en el camino o se pone ocupada y se olvida de terminar sus cursos. Pero has estado conmigo todo el camino hasta el final. Y entonces quiero darte las gracias por seguir conmigo hasta el final. Ahora, creo que durante la clase, mencioné en varias lecciones que necesitas hacer ciertas cosas para mejorar tu SEO, el SEO de tu sitio web, la optimización de buscadores. Tu sitio web permanecerá invisible para los motores de búsqueda a menos que lo optimices para que sea visible para ellos. Y hay formas de hacer que tu sitio web sea más visible para los motores de búsqueda como Google y Bing. Pero es tu día de suerte porque tengo una clase integral de SEO que te muestra cómo optimizar tu sitio web wordpress para los motores de búsqueda. Entonces, ahora que has aprendido a construir un sitio web con Wordpress y elementor, el siguiente paso lógico que debes dar es aprender a hacer que ese sitio web sea visible para que ese sitio web sea visible para optimización de motores de búsqueda en buscadores Así que echa un vistazo a esa clase en mi perfil. Y estoy bastante seguro de que aprenderás una o dos cosas muy cruciales para hacer por tu sitio web y tu negocio. Y antes de que te vayas, quiero pedirte un favor rápido. Si pudieras tomarte poco menos de un minuto e ir por debajo de este reproductor de video a la pestaña de revisión, me gustaría escuchar tus comentarios sobre lo que pensaste de esta clase. Tus comentarios realmente me ayudarán a entender el tipo de impacto que estoy teniendo en mis alumnos. Y también ayudará a otros estudiantes a saber si esta clase es una buena opción para sus necesidades porque hay futuros estudiantes que buscan una manera de construir un sitio web, y no están seguros de si esta es una buena clase para que tomen. ¿Los recomendarías para tomar esta clase? ¿Te gustó esta clase? Si lo hiciste, ¿qué te gustó de la clase? Eso te llevará menos de un minuto. Simplemente vaya a la puñalada de revisión debajo de este reproductor de video, y en menos de un minuto, puede dejar sus comentarios ahí mismo, y realmente lo agradecemos Entonces eso es todo lo que tengo para ti por ahora. Ahora estoy trabajando en la próxima clase que estaré publicando en una o dos semanas. Así que no olvides seguirme para ser notificado tan pronto como publique una nueva clase. Pero hasta la próxima, no te deseo nada más que lo mejor y quiero que te mantengas creativo. Nos vemos pronto. Paz.