Crea un sitio web de blog profesional con WordPress y Elementor Pro

1. Introducción a la creación de un blog profesional con WordPress y Elementor Pro: ¿Estás listo para crear un blog profesional que no solo luzca increíble, sino que también pueda monetizarse Bienvenido a crear un sitio web de blog con Wordpress y elemento pro. En esta clase, te guiaré paso a paso a través de la construcción en un blog de WordPress moderno, receptivo y completamente funcional receptivo y completamente funcional usando elemento pro? Empezaremos desde muy principio. Comprar hosting y dominio, instalar WordPress y configurar elemento de pro. Después pasaremos al diseño donde aprenderás a diseñar un blog único totalmente personalizado, crear páginas de blog, páginas de publicaciones individuales y páginas de categorías. Añade funcionalidad de búsqueda para que el contenido sea fácil de encontrar. Configura un formulario de suscriptor para comenzar a construir tu lista de correo electrónico. Construye páginas importantes como sobre contacto, política de privacidad y términos y condiciones. Arregle la capacidad de respuesta móvil, para que su sitio se vea perfecto en todas partes Conjunto de correo electrónico y SMTV para comunicación profesional. Al final de esta clase, tendrás un blog hermoso, fácil de usar y monetizable personalizado para tu marca personal, negocio o clientes Hola, soy Akinka, diseñadora web de Sri Lanka y también fundadora de UX Alchemy Creé esta clase para hacer que los blogs sean más fáciles, rápidos y más accesibles, incluso si recién estás comenzando. Si alguna vez te has sentido abrumado por WordPress o no sabías por dónde empezar, esta clase te dará la claridad y confianza que necesitas Si estás listo para construir un blog profesional, la manera inteligente usando herramientas modernas como WordPress y elemento pro, comencemos a construir tu blog juntos, vemos dentro de la clase. 2. Ventajas y desventajas de Elementor y WordPress: En esta clase, utilizaremos principalmente dos herramientas, WordPress y elemental pro. Echemos un vistazo a lo que hace cada herramienta, sus pros y sus contras. También algunas alternativas. Sabes exactamente lo que lo estás trabajando. Primero, usaremos WordPress. WordPress es nuestra plataforma web, la base que impulsa tu sitio. Es una de las plataformas más populares del mundo. Utilizado por más del 40% de los sitios web. Hablemos de prosa. Es de código abierto y gratuito. Obtienes el control total de tu sitio web desde el diseño hasta el SO y el rendimiento. Puede instalar enchufes para agregar casi cualquier característica que se le ocurra. Y es amigable para principiantes, especialmente cuando te emparejaste con un constructor visual como elemento. Ahora, aquí hay algunas desventajas. Necesitarás comprar un dominio y hosting para convertirte en un sitio en vivo. Requiere actualizaciones y copias de seguridad periódicas para que las cosas funcionen sin problemas. Si bien es flexible, configurarlo puede parecer técnico al principio. Alternativa a Wordpress, semanas y espacio cuadrado Earl en un creador de sitios web que son más fáciles de comenzar, pero ofrecen menos control Webflow le brinda más libertad de diseño. Además, para un sitio web sencillo, framer es otra mejor opción. El elemento finalmente elemento de pro es nuestro creador de páginas. La herramienta que te permite convertir este diseño de Pt VoluFGma en un sitio web de palabras completamente funcional Hablemos de pros. Es extremadamente amigable para principiantes sin necesidad de código, sala de dragón. Obtendrá un control total del diseño sobre cada parte de su sitio, incluida la vista móvil. Elementp incluye widgets avanzados como formularios, deslizadores, intervalo de premios, Testimonios y Con el creador de temas, puedes diseñar toda la estructura de tu sitio, encabezados, pies de página, plantillas de bloques, visuales Element of P es un plug in pagado, así que no es gratis. Además, si decides deslizarte a otro constructor más tarde, tu diseño no se transferirá, necesitarás reconstruir y aunque sea fácil de usar, aún necesitarás pasar algún tiempo aprendiendo la interfaz y las prácticas básicas Ahora hablemos de algunas alternativas. Hay constructores como Prix builder, Brave builder, DV oxygen. No sólo eso, tenemos Wordpress editor predeterminado Gutenberg En la siguiente lección, vamos a saltar al diseño 3. Comprar alojamiento y un nombre de dominio: Hola a todos. Ahora es el momento de comprar un dominio y alojarlo porque necesitamos el dominio y el host para alojar nuestro sitio web de WordPress. Así que primero menos escoger dominio. Hay un sitio web llamado taldls.com. En este sitio web, podrás ver todas las promociones y ofertas de los proveedores de dominios, y desde aquí, podrás comprar un dominio que seleccione mejor Hostin y conseguir dominio más barato Aquí, verás un filtro. Aquí, buscaré nuestro nombre de dominio como diseño web personalizado, y aquí tengo que dar click en verificar que no eres robot. Bien, aquí tenemos los dominios disponibles, y de este filtro de precios, lo pondré como $1 y veamos qué tipo de dominio tenemos por $1. En aquí, tenemos diseño web personalizado punto S dominio 4099. Nombre Jeep. Entonces voy a elegir este en la nave espacial que podemos conseguir punto dominio XYC por dólar Entonces aquí solo hago clic en Nombre Jeep y se redirigirá al nombre foque Y aquí puedo buscar el nombre de dominio. Así que vamos a copiarlo de aquí y pegarlo. Después haga clic en buscar. No necesitamos el.com. Necesitamos puntos. Entonces aquí podemos ver punto s, en realidad, podemos agregar punto S. Bien. Ahora aquí lo tenemos por dólar 2.98. Simplemente hago clic en agregar a tarjeta y se agregó a la tarjeta. Ahora hago clic en Pagar y aquí puedo agregar el código promocional. Entonces iré aquí y averiguaremos el código promocional. Este especial 99 es el código promocional. Entonces solo lo copio y lo pego aquí, da clic en aplicar. Bien, ahora tengo que ingresar a la cuenta de Name Jeep, en realidad ya tengo una cuenta Jeep con nombre. Si no tienes una, puedes hacer clic en Crear cuenta gratuita y seguir el paso. En mi caso, daré clic en iniciar sesión, y aquí agregaré mi nombre de usuario y contraseña. Bien, acabo de iniciar sesión en la cuenta de Namechp y aquí, agregaré el código promocional, lo copiaré de aquí y lo pegaré así Da click en aplicar, y ahora tenemos el subtotal como 0.99, y voy a desmarcar todas estas cosas, así que elimínala No necesitamos ninguna de esas cosas. Así que ahora puedo hacer clic en Confirmar pedido. Antes de confirmar el pedido, iré a namjb.com, y vamos a refrescarlo. Entonces podemos seleccionar anfitrión haciendo click en este anfitrión y haciendo click en compartido Hostin Y en Name GP, podemos conseguir este paquete iSTlla y I Stellar plus para diseñar y desarrollar nuestro sitio web WordPress En el istllaPackage, tendremos función de correo electrónico y tendremos GB, SSD En el ITLlarPlus tendremos dominio ilimitado. Sin embargo, hay un límite, aunque es ilimitado, nunca es ilimitado. Creo que es solo un gimmick de marketing. Sin embargo, aquí, tenemos buzón ilimitado y tenemos esta función de autobup Esta función de autobup es muy potente, y mi recomendación es elegir esta cuenta de ItellarPlus si vas a usar el nombre servidor barato para el nombre servidor barato Por lo que actualmente hay un acuerdo del Black Friday. Por eso la cantidad es tan baja. Sin embargo, aún así, Namecheap es el proveedor de alojamiento más barato y asequible Y aquí podemos establecer la facturación como mensual o anual. Si lo establecemos como mensual, va a costar tanto. No obstante, lo configuré anualmente, y ahora podemos obtenerlo por 22.80 $0.08 y podemos renovarlo tras año por Así que ahora hago clic en Get start y aquí lo configuramos como nuevo dominio y pulsamos en ya en la tarjeta y nuestro costo total será de 23.80 $0.07 Ahora puedo hacer click en. Agregar al carrito y aquí puedo hacer clic en confirmar pedido. No obstante, ya tengo lágrimas hospedando, así que no necesito este hosting, así que simplemente hago clic en este icono de cláusula y solo necesito dominio. Además, puedes obtener dominio de esos otros proveedores. Y si vamos a este dominio XYZ en nave espacial, podemos buscar el nombre de dominio aquí y continuar con el trabajo Pero para esto, voy a elegir el nombre GIP, y ahora hago clic en Confirmar Pedido y continuar la compra también cosa muy importante antes de que compres el dominio, siempre revisa el texto del dominio Si compras dominio con texto incorrecto o caracteres incorrectos, no representará tu marca. Así que siempre vuelve a revisar el texto de tu dominio. Si buscas dominio como diseño web personalizado, verás que este dominio ya está tomado, lo que significa que podemos obtener este dominio y en lugar de obtener ese dominio, podemos obtener este tipo de dominio. Entonces cuando conseguimos un dominio, siempre tenemos que comprobar el dominio es dominio de nivel superior o para hacer eso, puedes simplemente buscar en Google como si vamos al dominio B punto XYZ, podemos buscar es dominio XYZ dominio de nivel superior. Entonces dice que XYZ es un nombre de dominio de nivel superior, y de esa manera, puedes averiguar el nombre de dominio oeste, pero los nombres de dominio más familiares son.com punto. Punto org. Si es, es punto co punto k, así. Obtener un dominio de nivel superior es realmente importante porque Google y otros motores de búsqueda clasificarán los dominios de nivel superior más fácilmente que solo clasificar algunos dominios de bajo nivel. Entonces te veo después de completar el proceso de compra del dominio. Bien. Ahora aquí tenemos el nombre de dominio, y ahora tenemos que cambiar el DNS para cambiar el DNS, voy a hacer clic en Administrar DNS colgando significa que tenemos que configurar el dominio con el servidor. Y aquí tenemos nombre jefe DNS básico. Lo voy a cambiar por nombre jefe web hosting DNS. Entonces voy a dar click en este savy y cambia. Bien. Ahora lo que tenemos que hacer es ir al panel C. Voy a hospedar en lista, y en la lista de hosting aquí está nuestro anfitrión en. Entonces aquí vamos al panel C, ¿puedo simplemente dar click en él y se redirigirá al panel C. Por lo que no importa qué tipo de dominio o proveedor de hosting elijas. Los paneles A C tienen la misma funcionalidad. Entonces me desplazaré hacia abajo y aquí tenemos sección de dominio, así que simplemente hago clic en él y ahora desde aquí, hago clic en, crear un nuevo dominio. Aquí tenemos es conjunto de dominios, basta con hacer clic en, crear un nuevo dominio, y aquí vamos a agregar el nombre de dominio, copiar el nombre de dominio y pegarlo así. Entonces en el servidor de hosting, creará nuevo fold call custom website design dot. Bien, entonces tendremos un subdominio. Así que ahora hago clic en el botón de enviar. Bien, el dominio se ha creado con éxito. Entonces, si hago clic aquí y voy a la página web, se verá así. A nombre G, tenemos certificado de presl para uno cerca. Entonces cuando hacemos clic aquí, podemos ver la conexión Cece, lo que significa que el certificado SSL está configurado correctamente y además nuestra URL es TTP Bien Entonces ahora, Earl Wood, si no obtuviste esta página, solo espera de cinco a 10 minutos y esta página aparecerá Bien. Ahora lo que tenemos que hacer es instalar WordPress en el dominio. 4. Cómo instalar WordPress desde cero: Hola a todos. Es hora de instalar WordPress. Voy al panel C y en panel C, tenemos instalador de app soft tacular Simplemente hago clic en él y aquí tenemos Wordpress y desde aquí, simplemente hago clic en Instalar. Y ahora aquí tengo que seleccionar los detalles. Primero, seleccionaré TTP y sin esta parte www dot, así que solo TTP como protocolo, después seleccionaré el nombre de dominio Así que aquí está nuestro nombre de dominio y aquí voy a elegir la última versión del Wordpress y no voy a añadir ningún directorio. Simplemente instalaré WordPress en la carpeta raíz, y aquí podemos cambiar el nombre del sit y la descripción del sitio. Pero cambiemos esos tu mientras diseñamos el sitio web. Por ahora, mantengamos esas cosas tal como están. Y aquí tenemos que agregar usuario de administrador y contraseña de administrador. Voy a agregar esos detalles también agregaré una contraseña. Asegúrate de recordar tu nombre de usuario y contraseña porque deberías tener usar este nombre de usuario y contraseña para iniciar sesión en el Wordpress y desde aquí, voy a cambiar este correo de administración a correo electrónico de trabajo porque actualmente este correo electrónico no funciona. Bien, desplácese hacia abajo y aquí no necesito esto ningún complemento adicional. Retira los plugins adicionales y ahora da click en este botón Instalar y comenzará a instalar el wordpress en el sitio web. Bien, Wordpress se instaló correctamente y desde aquí, puedo hacer clic en esta URL e ir al sitio web de WordPress en la URL administrativa, puedo ir a Wordpress así. Desde aquí, solo hago clic en No, no quiero intentar probar un proceso de configuración ET, y aquí está nuestro panel de WordPress. Para acceder al panel de WordPress, podemos simplemente en la URL de nuestro sitio web y luego agregar WP Admin al final de la URL del sitio web. Ahora aquí está nuestro sitio web parece. En la siguiente lección, aclararemos el Wordpress y eliminaremos cosas innecesarias de nuestro sitio web de WordPress. 5. Instalar y activar Elementor Pro: Hola a todos. Vamos a utilizar Elementor Pro para diseñar nuestro sitio web personalizado porque Elementor es el mejor creador de sitios web de WordPress que existe. Elementor tiene una versión pre, pero tiene características limitadas Vamos a revisar los planes de Elementor. Para llegar a esta página, haz clic en la sección de tinta sobre recursos o descripción, y redirigirás a esta página. Entonces aquí tenemos unos planes de precios. El plan de precios recomendado es Advanced solo website builder. Con este plan de precios, podemos obtener 118 pre y pro budget, y tiene 86 proyectos, pero con el plan esencial, solo tenemos 57 proyectos. Como si fuéramos al mercado en la sección de comercio electrónico con Advanced solo obtendremos pop up Builder. Esta es una característica que vamos a utilizar, y en la marca esencial, no obtenemos muchas características. No obstante, si vas a diseñar más de un sitio web, puedes ir al plan Avanzado. O si eres freelancer que construyes sitio web para tus clientes, puedes adquirir la versión experta. Al elegir este tipo de plan, podremos reemplazar muchos complementos y complementos y ayudará a aumentar la carga de la página en velocidad y optimizar el sitio web en general. Entonces comencemos a instalar Elementor. Para ello, iré al dashboard de nuestro sitio web, y aquí iré a plugins y haré clic en AdneU. Primero, tenemos que instalar el elemento pre plugin. Entonces a partir de aquí, buscaré Elementor. Entonces aquí tenemos elemento website builder plugin. Está desarrollada por elemento.com, y es compatible con nuestra versión de Wordpress Así que hago clic en Instalar ahora. Bien. Después hago clic en Activar. Todo bien. Ahora hago clic en Escape y me saltaré esos pasos o haré clic en este botón Cerrar porque vamos a configurar Elementor Pro usando el sitio web de Elementor Nuevamente, haz click en la URL de la sección de recursos y te redirigirás a esta página, y desde aquí, haré click en el botón Por ahora en Advance sitio web solo, Plan Builder. Y aquí voy a tener que llenar los detalles. Entonces haré clic en pagar ahora y realizaré el pago. Después de que te hayas registrado correctamente, puedes descargarlo desde aquí haciendo clic en este botón Descargar, o puedes ir al panel de Elementor agregando ind elemento.com Y cuando lo hagas, verás este tipo de icono de descarga, y luego verás elemento enchufar en Descargar, pincha en entonces empezarás la descarga y ahora tienes el elemento de plugin. Ahora vamos a configurar con nuestro sitio web para hacer eso. Iré al panel de WordPress e iré a plugins y haré clic en Instalar Plugin. Después hago clic en agregar nuevo plugin. Después hago clic en este botón de subir plug in. Después hago clic en para apile, y aquí tenemos el elemento pro enchufado descargado. Entonces es un archivo C. Así que solo lo selecciono y hago clic en Abrir. Después hago clic en Instalar ahora. Tardará unos minutos en instalarse. Bien. Entonces verás esta ventana. Entonces a partir de aquí, solo haz clic en este botón de activar plug in. Y se instalará con éxito. Entonces aquí está el enchufe de instalación. Ahora hago clic en conectar y activar. Entonces llegaré a este tipo de página. Así que aquí hago clic en activar mi licencia. Bien, elemento pro se activó con éxito, y ahora podemos usar las características del elemento pro. 6. Limpia el panel de control de WordPress: Hola a todos. En tu panel de WordPress, verás este tipo de elemento. Para eliminarlos todos, simplemente puedes dar click sobre estas opciones de Estren y aquí puedes desmarcarlos el Itab que no te gusta Así, cuando los desmarques, ya no verás esas pestañas A en plugins, iré a Instalar Plugin. Se instala automáticamente caché de velocidad de la luz en el sitio web. Aquí hay un plugin de caché de velocidad de la luz que se instaló en mi servidor. Voy a hacer clic en Desactivar porque por ahora no necesitamos ningún plugin de caché Yo lo eliminaré. Bien, perfecto. Empecemos a diseñar el sitio web en la siguiente lección. 7. Guía del editor Elementor: Hola a todos. Conozcamos el editor de elementos. Así que vamos a crear una página. Ahora estoy en nuestro panel de control del sitio web de WordPress, y desde aquí, pasaré el cursor sobre las páginas y haré clic en Agregar nueva página Y aquí voy a añadir título como página de sabor. Entonces aquí tenemos un pop up de plantillas. Lo cerraré, y aquí agregaré página de sabor. Entonces lo que voy a hacer es click en esta edición con botón de elemento. Cuando haga clic en él, redirigiré al editor de elementos. Voy a omitir esto por ahora, y aquí está nuestro editor de elementos, y primero, haré clic en el conjunto de páginas en, y desde el conjunto de páginas en, voy a cambiar el diseño de página a elemento canvas. Así, cuando hagamos eso, nos dará una página en blanco que podremos usar para diseñar nuestro sitio web personalizado. En nuestro lado izquierdo, podemos ver los widgets que podemos usar con elemento pro. Si tienes un elemento de pre versión, no podrás acceder a todos esos widgets. Simplemente puedes arrastrar y soltar cualquiera de esos elementos en el lienzo. El lienzo es esta área en blanco. Por ahora, voy a cerrar esta pestaña de estructura y si comprobamos en esta barra superior, podemos ver en el lado izquierdo, tenemos lado establecido en icono, así que vamos a dar clic en yo clic en él, iremos a la configuración lateral. En esta configuración lateral, podemos cambiar o configurar las opciones de nuestro sitio web principal como ejemplo, si hago clic en el diseño y actualmente el ancho del contenido del tamaño del escritorio es 1140 Si cambiamos esto a 101,060, afectará a todo el sitio web, pero lo mantendré Y si queremos agregar relleno a la parte superior del sitio web, solo podemos desvincular este valor haciendo clic en este ícono de cadena, y aquí podemos configurarlo como 60 y luego vamos a hacer clic en guardar y ahora hago clic en volver a Editor y luego solo arrastremos y soltamos un titular como este y el titular caerá como aquí porque tenemos 60 de relleno superior Entonces, si volvemos a sentarnos y vamos a layouts y hacemos esto como cero, el encabezado será cero. Ahora voy a hacer clic en Guardar cambios y volver al editor. Después haciendo click aquí, podemos ver la estructura del sitio web. Actualmente, solo tenemos un titular. Entonces aquí podemos agregar nodos, basta con hacer clic en nodos y luego si quieres agregar el nodo o pensaste en una sección, simplemente puedes seleccionar la sección. En este caso, seleccionaré este titular y aquí puedo escribir node lie. Esto es para pruebas. Entonces puedo dar click en dejar un nodo y ese nodo aparecerá aquí. Piensa si trabajas con el equipo y tienes pocos diseñadores que trabajen en las páginas. Al agregar este tipo de nodos y cuando tus co-diseñadores iniciarán sesión en el sitio web y comprobarán la página y podrán leer esos nodos y entender muy bien el diseño. Vamos a cerrar esta. Ahora aquí tenemos el nombre de la página. El nombre de la página es página de prueba y actualmente está en borrador. Si hacemos clic en este botón publicado, estará disponible en la página web, pero actualmente es modo borrador. Entonces tenemos este icono, este icono G para acceder a esta configuración de página. Si haces clic aquí y cambias los detalles, esto afectará a todo el sitio. Pero si haces clic aquí y cambias esos detalles, solo afectará la configuración de la página como lo hice antes al cambiar el diseño de la página. Entonces tenemos tres puntos de vista. El primero es de escritorio, segundo es tableta y el tercero es móvil. A modo de ejemplo, si queremos cambiar este tamaño de texto en el móvil, simplemente podemos hacer clic en el texto e ir a Etyle luego cambiar el tamaño de fuente En realidad, tengo que hacer clic en este texto así e ir a Etyle y ahora puedo cambiar su tamaño así Cuando hagamos eso, sólo afectará en el móvil. Si vamos a la versión de escritorio, el texto será el mismo y es el mismo en la versión tablet. Versión móvil, cambia al tamaño que ya configuramos. Ahora vuelvo a la versión de escritorio. Ahora la parte más importante es esta sección rara. Como dije antes, podemos usar estas características pro en el elemento pro y en la versión pre, cosas van a ser bajas vamos eliminar este texto y vamos a crear la sección. El primero eres tú, tenemos que añadir el contenedor. Esa es la forma correcta de crear el sitio web. Voy a dar click en el contenedor y se agregará así de este contenedor, podemos ajustar en detalle. Por ahora, mantengámoslo como predeterminado y luego agregaré otros elementos para hacer eso, haré clic aquí y luego agreguemos el titular y también haga clic en este ícono más y agreguemos editor de texto así. Ahora hago clic en el contenedor y actualmente su dirección es vertical. Tiene una columna, pero si hacemos clic en horizontal , cambiará a la horizontal. Hay muchas opciones que podemos usar para diseñar un sitio web perfecto. Y veamos si queremos cambiar este texto. Podemos dar click en este ícono de lápiz o dar click aquí y dar click en Editar, y luego podemos cambiar el texto desde aquí. Lo voy a cambiar como amarillo Palabra. Y luego hago clic en estilo y voy a cambiar este color de texto a por ahora, cambiémoslo a negro, y cambiaré este tipo por pines de Grappy Pines es mi fuente favorita, y cambiemos su tamaño a 60. Hagámoslo como 60. Entonces lo voy a cambiar a medio. Tal vez lo normal se vea mejor así, y podemos cambiar la altura de la línea así y establecer la alineación para colocar. Bien. Ahora por ahora, eliminemos este editor de texto. Simplemente hago clic aquí, y luego solo puedo presionar el botón Eliminar o simplemente puedo hacer clic derecho y hacer clic en Eliminar, así. Ahora de nuevo, hago clic en el contenedor y agreguemos este Mint alturas 600 y la altura del contenedor se convierten en 600. Después hago clic en este texto y hagamos un centro de línea así que haga clic aquí y hagamos que esto justifique el contenido como centro. Y hagamos esto como medio para hacer eso. Doy click en este centro así. Y ahora aquí tenemos dos líneas. Así que vamos a arreglarlo. Para arreglarlo, iré al Avance, y de antemano, hemos dicho este ancho como ancho personalizado, así podemos dar click en default y hará el ancho completo. Así que hay muchas cosas que hacer, y en futuras lecciones, usaremos todas esas cosas y podrás crear un letrero increíble. Bien. Ahora aquí nuestro sencillo hola mundo toma y ahora si hago clic en este icono de panel de altura, podemos ver la vista real y además podemos dar click aquí para recuperarlo. Y si hago clic en este icono de flecha y hago clic en ver páginas, no se actualizaba. Vamos a hacer clic en publicar e intentemos volver a verla. Bien, yo veo esto. Si queremos otra sección, simplemente podemos dar click aquí y dar click en el contenedor para aquí así o podemos dar click en este icono más y dar clic en Plex Box y seleccionar la estructura. Si quiero agregar cuadrícula de dos columnas, solo podemos dar click aquí y ahora tenemos columna. Entonces podemos hacerlo de forma manual. A modo de ejemplo, vamos a conseguir este contenedor, y hago clic aquí. Entonces vamos a Estyle y déjame agregar el tipo de fondo Así que haz clic en este clásico y cambiemos el color a este color azul y hagamos clic en Layout. Desde Layout, estableceré alturas Mint hagámoslo como 300. Bien. Y esta estructura es un poco de dolor de cabeza, así que para arreglarla, solo la voy a poner así y solo la arrastro al sitio izquierdo y se convertirá en una sección para que podamos verificar fácilmente la estructura de nuestro sitio web. Y a partir de aquí, necesitamos agregar este tipo de dos columnas para hacer eso. Haré clic en este ícono más y solo agregaré un contenedor como este. Ahora tenemos el contenedor dentro del contenedor así que hacemos clic derecho y pulsamos en Dublgate entonces lo que puedo hacer es que puedo hacer clic en el contenedor principal y cambiarlo de dirección a u horizontal y simplemente se convierten en dos Y aquí tenemos una brecha para arreglar esta brecha, voy a cambiar esta brecha a cero, y ahora no tenemos brecha. Por lo que ahora hago clic aquí para seleccionar este contenedor. Ve a tyle, haz clic en Clásico y cambia el color. Vamos a cambiarlo al color de la pantalla y cambiemos este totyle clics Cambiemos a este color de texto. Elemental Editor es un editor realmente simple de usar. Así que simplemente hago clic en publicar o simplemente podemos hacer clic en este icono de vista previa para previsualizar los cambios. Podemos hacer clic en este icono o icono de vista previa y comprobar los cambios de Elger en las lecciones reales y futuras, profundizaremos en el editor elemental y aprenderemos mucho más 8. Instalación del tema y configuración de publicación del blog: Ahora vamos a instalar el tema. Voy a ir a aquí aparición y dar clic en Equipo. En Decenas, da click en ellos. Aquí, buscaré Hola Elementor. Tenemos el tema. Podemos dar click en Instalar y dar click en Activar ahora mismo tenemos elemento pro y elemento Halo. Tema. Ahora lo que tenemos que hacer es que tenemos que crear pocas entradas de blog. En post, da click en todas las publicaciones y aquí actualmente tengo tres entradas de blog, pero necesito más entrada de blog porque si no tengo ninguna entrada de blog, no podremos obtener la vista previa de calidad de nuestro sitio web, lo que significa que tendremos muchos Ipaces Vamos a crear algunas publicaciones ficticias y después de que terminemos el diseño, podemos dejar que todas ellas y haga clic aquí y haga clic en modelos y basura esas publicaciones y eliminarlas permanentemente. Voy a ir a ChAGPT y en el prompt de Dover, aquí voy a decir que eres asesor financiero y quiero que generes 12 posts de registro y voy a 12 posts de registro y voy Aquí hay más información parte y aquí voy decir que deberían tener título 500 a 600 palabras categoría debe ser finanzas personales, impuestos, manejo de deuda. Inversiones. Voy a quitar esto, dame tres opciones parte y aquí voy a decir también dame pequeña desscrption para cada categoría para cada categoría y presiona Enter, aquí tenemos descripciones de categorías para cada categoría y presiona Enter, , y aquí tenemos blogposts Los postes de bloque son realmente pequeños, lo que significa que no es bueno, tengo que decir que deberías Generales y E host deberían tener al menos 700 palabras más A ver. Sí, por favor. Aquí genero el post de registro. Ahora tiene que generar el B dos. Diré, por favor, va a generar el resto de post de blog, y en esta entrada de blog actual, esas no están relacionadas con el nicho financiero. Simplemente eliminaré todos ellos, haga clic en esta casilla de verificación y haga clic en acción masiva siega toash aplicar en Rash, haga clic aquí, eliminar por Todo bien. Y ahora voy a ir a categorías, y actualmente tenemos esta categoría sin categorizar, pero ya generamos pocas categorías. Entonces digamos, por favor aquí para generar el resto. Y vamos a subir. Y aquí, agreguemos esas categorías, simplemente haga clic en las finanzas personales y agregue el nombre y la descripción así, haga clic en en la categoría, luego una descripción fiscal, en categoría en gestión de deuda, es descripción, finalmente inversión. Todo bien. Ahora tenemos cuatro categorías y la categoría sin categorizar es la categoría predeterminada. Déjalo ahí mismo y luego vamos a todos los post y ahora tenemos que agregar esos posts. Aquí está la primera entrada del blog. Primero copia el título y vamos aquí, da clic en en el post. Bien, aquí tenemos editor de Gutenberg tenemos que usar este editor, solo copia el título y vamos a copiar el resto de post de registro así y simplemente pegarlo Aquí podemos eliminar esas cosas así, eliminarlas y también podemos eliminar esta, seleccionar el elemento y Oh, solo tienes que seleccionar el ítem y presionar eliminar en el teclado. Nosotros esto y estos títulos están en H tres, los haré H dos. También, voy a hacer este H dos y este título está en el título principal está en el H uno y el resto del título será H dos y si hay muchos H dos eso no es bueno En ese caso, podemos averiguar los encabezados de este encabezado principal luego hacerlos H tres. Por ahora, solo lo haré así y el plug in rank math, puedes hacerlo fácilmente. Ahora voy a dar click en publicar y publicar la entrada del blog. Actualmente tenemos la entrada de blog así y volveré y aquí tenemos que añadir imagen destacada. Sin esta imagen destacada, esta entrada de blog no quedará bien. Voy a crear imágenes destacadas y nos vemos en la sec. Todo bien. Acabo de crear la imagen destacada. Vamos a dar click sobre este título, y luego podremos ver esta característica Botón de imagen. Simplemente hago clic en él y aquí subiré todas las Imágenes destacadas que ya creé. Aquí vamos. Selecciono todos tengo nueve de ellos, y esperemos a que se cargue y podrás encontrar esas imágenes destacadas o imágenes establecidas en la sección de recursos Aquí, si revisas esas imágenes, todas esas imágenes en ancho y alto son iguales. Aquí tenemos 1060 como ancho y 720 como altura. Así que siempre asegúrate de agregar imágenes de fuerza que tenga el mismo ancho y alto para hacer la singularidad del sitio web Si agregamos imágenes que tienen diferentes tamaños que afectarán el diseño de nuestro sitio web. Ahora hago clic en establecer característica Imagen. También, tengo que agregar etiqueta ol, etiqueta ALT, luego hago clic en, dicho futuro Dimag ahora hago clic en guardar y aquí vamos Acabamos de crear nuestra primera entrada de blog y nos quedan ocho más. También en categoría, tenemos que seleccionar la categoría. Ya creamos nuestras categorías, la categoría Fst predeterminada no está categorizada Lo voy a quitar y aquí tenemos finanzas personales, Entrada de blog, ahora hago clic en Concebir derecho Ahora este editor de Gutenberg tiene muchas características. Si quieres, puedes usarlos. Como ejemplo, digamos, si quieres agregar una nueva sección aquí, simplemente haz clic en aquí y presiona Enter y luego haz clic en este anuncio Blog y aquí podrás seleccionar qué tipo de elemento quieres agregar. Además, si haces clic en Navegar o haces clic en este ícono más, podrás ver todos los elementos. Por ahora estamos bien, así que voy a dar click en guardar. Ahora voy a dar click aquí y vamos a ir a una página de post y dar click en en post para agregar New Post. Ahora vamos a subir. Ya agregamos este y ahora tenemos que agregar el segundo, copiar el título y enfrentar el título. Supongo que hacen que se vea mejor que esto. Esto es solo para probar, copiar y pegar así. Bien. Ahora voy a dar click en este post y dar click en guardar imagen destacada. Lo sentimos, establecer imagen destacada, y aquí tenemos imagen de fondo de emergencia, agregue la categoría Al tag and slate, finanzas personales, haga clic en publicar, publique la entrada. Ahora puedo aquí, dar clic en en Post y agregar el primero de post, así lo haré y nos vemos después. 9. Cómo configurar la configuración del sitio: Bien. Ahora tenemos todo el post y aquí se selecciona esta categoría de post como uncategorized. Vamos a hacer clic en Edición rápida y aquí podemos configurarlo como actualización de gestión de profundidad. Ahora también tenemos los detalles de nuestra marca. Aquí está el logo de la marca. Acabo de crearlo y aquí tenemos la guía de estilo. Entonces aquí tenemos los detalles de la marca y tenemos los códigos de color, también encabezado y texto corporal. Que estamos planeados para usar. Bien. Ahora sí tenemos toda la información. A continuación, lo que podemos hacer es que podemos ir a las páginas, hacer clic en todas las páginas. Y aquí, da clic en en la página para crear nuestra página principal. Para el nombre de la página de inicio, solo agregaré riqueza sabia. Perdón por el título, voy a copiar y lo pegaré así. Entonces agreguemos esta parte a la línea de etiqueta del sitio web. Cuando solo lo pego presionando Comando V o Control V en Windows, agregó como párrafo. Lo que podemos hacer es que podemos pegar ese texto aquí y resaltar el texto, Comando A o Control A, luego comando X. Y vamos camino de pegarlo así. Bien. Ahora voy a dar click en editar con elemento. Bien. Bonito. Ahora estamos en elemento editor. Lo que podemos hacer es definir esas cosas en el escenario. Haga clic aquí y haga clic en esta configuración lateral. En la configuración lateral, vamos a los colores globales y aquí tenemos texto secundario primario y colores de acento. Vamos a copiar esos códigos de color. Agregar a nuestro sitio web así. Aquí vamos. En realidad, este debería ser el color de fondo, no el color del texto, así que solo agregaré fondo sin necesidad colorear solo agregue fondo para el texto, agreguemos color primario como texto, lo que significa que copiemos este color primario de aquí y lo peguemos así. O tal vez hagamos este poco más oscuro como este color porque debería ser fácil de leer porque esto es un bloque y aunque esto no sea un bloque, cuando creamos un sitio web, tenemos que verificar la accesibilidad del color, y ahora hago clic en guardar cambios entonces aquí tenemos las fuentes. Lo que podemos hacer es volver atrás y hacer clic en Fuentes globales, y aquí tenemos las fuentes. Agreguemos esas fuentes. Primero, tenemos fopens copiar los pop ins, agregar familia de fuentes como fopen, y el tamaño será vamos a hacer el tamaño como 62 y con cien negrita Voy a hacer la transformación mayúsculas y vamos a cambiar la línea nueve Hagámoslo así y el espaciado entre letras es bastante bueno. Entonces aquí voy a cambiar esta cabecera primaria dos. Entonces aquí necesitamos agregar subencabezado para subencabezado, familia de fuentes familiares será popping y tamaño, hagamos el tamaño como 52, no 62, 52 con mold crasformg line night, hagámoslo como 52, bien, y aquí necesitamos Es Laura solo cópielo. Aura y hagámoslo 21. A lo mejor 20 serán trabajo. Entonces con esta normal, vamos como Linet, a lo mejor necesitamos cambiar la altura de la línea Vamos a comprobarlo después de que lleguemos a esto. Entonces tengo que en el botón para el texto del botón, vamos a conseguir HopInshPins 21, hagamos esto como semivol paese A lo mejor hagamos esto como medio. Linet también tendrá 21 años. Ahora por favor concibe así que ahora tenemos las fuentes globales y el color global e ignoramos el estilo de ellos. Entonces en la identidad del sitio, agreguemos esos para más adelante. Por ahora, tenemos que ir a fondo. En fondo, voy a dar click en el tipo de fondo como clásico, y aquí tengo que añadir el color de fondo, así que da clic aquí y selecciona el color de fondo así. Entonces el concepto cambia, luego volvamos. Y ahora tenemos que añadir el layout. Entonces vamos a establecer el valor por defecto con esto, entonces gap será dos. El relleno de contenedor predeterminado es diez, vamos a mantenerlo así y volvamos y todo bien para ir. Ahora cierra aquí y vamos a ir a la página web. Ahora aquí voy a hacer clic en configuración de página, en configuración de página, diseño será elemento de ancho completo. También en el layout, hagámoslo elemento de ancho completo. Entonces volvamos y en la identidad del sitio, agreguemos esos detalles ahora mismo. Entonces primero, copia el nombre st, pega el nombre sit aquí, luego copia la línea de etiqueta. Pase la línea de etiqueta aquí. Además, aquí podemos agregar el logo del sitio, dar clic aquí, y aquí vamos, aquí tenemos el logo del sitio solo agrégalo y en etiqueta antigua, haga clic en seleccionar y sentarse icono FV. Acabo de crear el Fav Con. Hagamos click en esta imagen de Qs y agreguemos este ícono de FV y podrás encontrar estos detalles en la sección de recursos Bien, ahora haz clic en ocultarlo ahora mismo haz clic en Guardar cambios Y vamos a la ventana del editor. Todo bien. Ahora el sitio web se ve así, así que ahora hago clic en publicar y vamos a reprimir esta página Cuando reprimí la página, se ve así 10. Crear y personalizar un encabezado: Todo bien. Ahora como primer paso, tenemos que crear el encabezado. Así que vayamos al panel de WordPress. Así que nuestro sitio web, UrlaGP Admin. Entonces desde aquí, tenemos estas plantillas y damos clic en Team Builder. En Team Builder, aquí tenemos encabezado, da clic en el icono más. Bonito. Desde aquí, podemos seleccionar un encabezado o podemos crear uno desde cero. Aquí voy a cerrar esto y vamos a crear desde cero. Desde aquí, hago clic en el icono más y selecciono el cuadro plex y el cuadro plex será fila de dirección. Y aquí vamos, solo hay que ir a avanzar de este contenedor y quitar todos los márgenes y acolchados. Y como la percha es profundidad, agregaré el logo de St Simplemente haga clic aquí para agregar elemento y aquí tenemos logo lateral. Aquí vamos. Entonces vamos a EtyleoEtyle, podemos cambiar el ancho de la misma Hagamos que la M se quede con como 75% y el descanso es bueno. Así que ahora hago clic en el contenedor y agrego relleno superior e inferior. Agreguemos la parte superior como seis y la parte inferior como seis así. Ahora tenemos que agregar el hombre así que da clic en agregar elemento y buscar Menú. Y aquí tenemos un menú fresco solo agrégalo así. Actualmente no tenemos menú en los menús. Entonces lo que tenemos que hacer es que podemos hacer clic en esto, ir a la pantalla del menú. Y gestionar menú desde aquí. Entonces lo que voy a hacer es hacer clic en esto, crear un nuevo menú. Entonces aquí agregaré el nombre del menú. Hagámoslo menú principal y creemos Menú. Bien, creamos con éxito el menú principal, y ahora tenemos que agregar el elemento del menú. Aquí está la página principal. Simplemente haga clic en la página de inicio y haga clic en Agregar a Menú. Y si vamos a ver todos, no tenemos ninguna otra página. Aquí tenemos página llamada home. Pero veamos para comprobarlo, iré a páginas y páginas. En todas las páginas, no tenemos ninguna página. Ahora lo que puedo hacer es hacer clic aquí y cambiar esta etiqueta de navegación a home así como esta. Entonces tenemos que agregar sobre blog y páginas de contacto. Lo que podemos hacer es que podemos crear un enlace personalizado aquí, solo ve a customink y agrega el hashtag URL aquí, agreguemos Link textas Da click en Meno, luego otra vez, en el hashtag y en el Link Texas Blow. Tenemos que crear páginas separadas para todos estos enlaces personalizados, pero por ahora, centrémonos en el menú principal y la página de inicio. O en realidad podemos crear la página vacía para cada página o podemos crear páginas vacías y asignarla a aquí directamente. Entonces de esa manera, no tendremos mucho trabajo por hacer. Así que voy a eliminar esos post y hacer clic en Guardar Menú. Ahora lo que podemos hacer es ir a páginas y dar click en At NW. Y aquí voy a añadir este título de página como sobre nosotros publicarlo, dar clic en la página AD, blog, publicarlo, dar clic en la página y contactarnos publicar. Bien. Ahora lo que puedo hacer es que puedo volver a los menús y aquí bajo apariencia, aquí tenemos menús y aquí ahora podemos dar click en páginas y ver todas y aquí tenemos todas las páginas así, seleccionarlas todas y dar clic en Atomnu y agregó así Después en categorías, podemos categorizar y dar clic en Agregar Menú y podemos agregar esas categorías bajo este golpe así. Solo agrégalo así debajo de la página de mainblow. Ahora da click en Guardar Menú y ahora vayamos al encabezado Elementor y solo publiquemos esto por ahora En realidad, podemos guardar esto como borrador, dar clic aquí y dar clic en Guardar borrador. De esa manera, podemos guardarlo sin publicarlo. Ahora selecciona el Worresmnu y aquí, elige el menú como menú principal Bien, el menú se cargó así y ahora seleccionaré el contenedor principal y en disposición, agregaré esto como espacio entre así. Bien, ahora tenemos que cambiar el diseño del menú. Lo que puedo hacer es dar clic en el menú e ir a Etyle y la tipografía será No obstante, tenemos que cambiarlo de tamaño. Vamos a cambiarlo como 18. Entonces el color del texto será texto, color normal, y en HA en realidad, no necesitamos un divisor. Si te gusta el divisor, te gusta esto. Entonces al borde sobre, el color del texto será este color verde. Entonces cuando termine, se verá verde y no necesitamos un puntero. Entonces en el color activo, el color del texto será secundario. Y sobre el contenido aquí como puntero, verifíquelo como ninguno. Si te gusta el puntero así, puedes quedártelo, pero no me gusta simplemente hacer clic en ninguno, y la alineación se iniciará. Bien, ahora todos se ven bien y van al estilo E. Y aquí, hagamos este patrón horizontal como cero, y el patrón vertical también será cero. Ahora voy a agregar I espacio entre nosotros. Vamos a agregarlo como 90, 90 es demasiado grande. Hagámoslo como 60. Sí, 60 se ve bien. Bien. Ahora vamos a bajar. Hagamos el color del texto desplegable como color primario aquí. Entonces el color de fondo será este color de fondo, y la tipografía será botón, pero el tamaño de fuente es 80 así Y al borde sobre, el color del texto será de color verde, y el color de fondo será. Hagámoslo de color primario y veamos que funciona. Sí, funciona perfectamente. Y en activo, hagamos esto. Bien. Ahora aquí no necesitamos una frontera. Y aquí, agreguemos patrones horizontales, hagámoslo como 30, y veamos en realidad debería ser patrón vertical. Hacer patrón vertical como 30, 30 es demasiado. A lo mejor vamos a los 20 y el patrón horizontal también será 20. Ahora se ve así, y aquí podemos cambiar la distancia del menú. Hagámoslo 2020 es demasiado. Hagámoslo como nueve es bastante bueno. Botón de alternar. Esta alternancia pero necesitamos ajustar los detalles del botón de alternar en la vista móvil porque actualmente la onda móvil se ve así. Pero en lecciones futuras, arreglaremos la vista móvil, y por ahora, mantengamos esto así y hagamos que sea como centro. Simplemente haga clic en este contenedor principal y alinee los artículos serán el centro y también haga clic aquí. Ahora voy a seccionar este contenedor y en líneas de pedido, haga clic en Centro para hacer este centro así y se ve bastante bien. Además, arreglemos las versiones de tablet y móvil también al mismo tiempo. Entonces lo que puedo hacer es hacer clic en la versión tablet. En versión tablet, seleccionaré el contenedor y al marchar izquierda y derecha como, hagámoslo como 15 y la izquierda será 15 Bien. Ahora esta imagen se ve bastante bien, y ahora da click en este menú de Hamburguesas Y aquí podemos cambiar el tamaño como queramos. Vamos a cambiarlo. 36 y frontera con será cero, radio fronterizo también será cero. Y el color de fondo será este color primario o el color del texto, y el menú Hamburguesa en color será el color de fondo. Bien. Ahora tenemos un problema. Cuando abrimos este menú, se abrió con el resto del contenedor. Para arreglarlo, voy a dar click en la palabra Rsmo y en aquí en el contenido, voy a hacer esto como ancho completo Y entonces si lo reviso, se abrirá así. Y ahora aquí tenemos un problema. Este botón de alternancia consigue no respondan y es como fuera del diseño Lo que podemos hacer es que podemos dar click en el contenedor y y contenedor cambiar de dirección a columna vertical, y ahora si lo reviso, se verá así, y ahora queda muy bien. También aquí, podemos hacer que el contenido del logotipo de este sitio medio sumando al cien por ciento así. Y si revisas estas propiedades, verás este ícono de protrit de tableta Por lo que significa que cuando hagamos cambios mientras estamos en la versión tablet, esos cambios sólo afectarán a la versión de tablet. Si vamos a la versión de escritorio, el diseño es el mismo, y aquí puedes ver el icono del escritorio. Y si haces clic en el móvil, puedes ver aquí el móvil. Bien, ahora vamos a trabajar en la versión móvil. Bien, vayamos al móvil y aquí vamos a ver, solo hago clic en el contenedor principal y pongamos la dirección a pro horizontal. Bien. Ahora, aquí vamos. Este elemento del menú debe estar en el lado derecho para hacer eso. Lo que puedo hacer es ir a sentarse logo. Aquí, ahora vamos a ir a avanzar por adelantado, voy a cambiar este ancho no la imagen con el ancho del logotipo de este sitio. Hagámoslo personalizado y disminuyamos así su tamaño. Vamos a agregarlo así. Bien. Hagámoslo 270 Niza. Ahora bien, teníamos este tema antes, que es el lado a lado no se muestra correctamente y encontré el motivo de ese problema. Si vamos al contenedor sobre contenedor, agregamos margen derecha e izquierda como 15. Pero lo que tenemos que hacer es agregarlo en el relleno. Hagamos el margen izquierdo a la derecha como cero. Cuando hagamos eso, se solucionó el problema y aquí voy a agregar los seis primeros y el relleno será de 15. Y también el relleno a la izquierda será de 15. Nuevamente, tenemos que disminuir este tamaño a un poco más así. En realidad, si vamos a no aquí en contenedor, vayamos a maquetación. En el diseño, hagamos hueco como cero. Y ahora en logo lateral, podemos agregarlo así, no 25245 Bien. Ahora se ve bastante bien. Y si vamos a la versión tablet, podemos hacer lo mismo en la versión tablet. Así que simplemente haz clic aquí y haz esto como fila de dirección horizontal. Y vamos a avanzar, quitar este margen derecho y margen izquierdo. Entonces vamos a agregarlo aquí mismo. En realidad, tenemos que hacer clic en el valor del enlace juntos para comprobarlo 615615 Todo bien. No agregamos el margen derecho e izquierdo en versión de escritorio, así podemos ponerlo así y aquí vamos, aquí está nuestro menú y logo, y este es el encabezado. Ahora da click en Publicar y luego aquí tenemos A condición. Por lo que voy a hacer clic en Condición, y voy a hacer que incluya todo el sitio. Después hago clic en Guardar y la cláusula Ar ahora vamos a nuestra página principal. Volvamos a la página de apuestas. Y aquí vamos. Aquí está la página principal. Vamos a revisar Bien, ahora se ve así, y esta es la parte del pie de página. Por ahora, vamos a crear un pie de página vacío y podemos crear el pie de página después de completar la sección de héroe. No sección héroe, la página principal. Bien, vayamos a Plantillas de Team Builder Team Builder. Y aquí tenemos dos cabeceras. Este es el encabezado. Entonces si voy aquí. Este es el encabezado, así que voy a eliminar este encabezado. En Trash, mod trash y da clic aquí y da clic en Renim. Entonces vamos a Head, cámbialo así. Todo bien. Luce bien. Entonces vamos a Pie de página. Simplemente hago clic aquí, y aquí hay algunos pies de página. Por ahora, voy a saltarlo y simplemente dar clic en publicar en condición todo el sitio, dar clic en Guardar y Cerrar. Bien. A ver. Aquí vamos. Ahora aquí está el sitio web. En la siguiente lección, tenemos que diseñar la página de inicio. 11. Diseño de la sección principal: Todos. Ahora diseñemos la página principal. Actualmente, si vamos a la página de inicio, se verá así, y quiero configurar la página de inicio. En nuestro caso, vayamos al tablero y a la página de las páginas 0, y necesitamos configurar esta página. Entonces para hacer eso, lo que puedo hacer es ir a presionar dashboard, y vamos a entrar y Tding Lo abriré en nueva ventana, y aquí en sus pantallas de inicio, haga clic en una página estática y establezca esta página de inicio como nuestro pozo dos veces la página de inicio que creamos. Ahora hago clic en Guardar cambios. Ahora si visito el sitio web, se verá así porque nuestra página de inicio está vacía. Ahora le doy click con elemento bien. Ahora es el momento de diseñar la página de inicio. Bien, comencemos el diseño. En primer lugar, tenemos que crear la sección de héroes. Entonces mi plan es crear un control deslizante de publicaciones. Por lo que este slider tendrá alrededor de tres post, probablemente los más recientes tres posts. Vamos a hacerlo. Primero, hago clic en este ícono más Xbox y la dirección será columna. Bien, ahora aquí voy a ir a Avanzar y quitar todo el relleno y márgenes bien. Ahora voy a dar click en este elemento de anuncio. Entonces yo elemento de Pro, tenemos carrusel de bucle Usando este carrusel de bucle, podemos crear deslizadores con contenido dinámico Entonces post es un contenido dinámico, lo que significa que podemos agregar post usando nuestro dashboard en otro término. En otro término, WordPress es un sistema de gestión de contenidos CMS. Así que usemos esta función para crear nuestra cuadrícula de publicaciones. Para ello, sólo voy a trapar y robar este carrusel de bucle dentro del contenedor Bien. Ahora aquí, puedo seleccionar el tipo de plantilla. En nuestro caso, deberían ser puestos. Si crea diferentes tipos de fuerza usando campos personalizados avanzados de plug in, todos esos elementos se cargarán aquí. En nuestro caso, tenemos post, y luego aquí podemos establecer la consulta antes de establecer la consulta. Vamos a crear una plantilla. Así que hago clic en Crear plantilla y en Guardar aquí para guardar este diseño. Bien. Ahora aquí, lo que voy a hacer es hacer clic en este icono más y cuadro de Plex, la dirección será columna. Bien, entonces como lo hice antes, elimino todas las cosas innecesarias de E y hago clic en agregar elemento. Y aquí tenemos posar título, post extracto, característica Dimag, publicar contenido, post info Lo que tenemos que añadir es fondo. Para agregar el fondo, agregaré la característica forzada Dimage Lo que puedo hacer es seleccionar este contenedor e ir a Estyle haga clic en Clásico y aquí, puedo usar esta función de etiquetas dinámicas, clic en él, y aquí tenemos etiquetas dinámicas En nuestro caso, necesito característica Dimage. Simplemente haga clic en la función Dimage. El largometraje Dimage se muestra así. Antes de ir más allá, voy a dar clic en este elemento de bucle establecido en y aquí voy cambiar este título para pausar plantilla slider. Entonces publicaré esto. Ahora hago clic en Guardar y volver y estamos de vuelta a nuestra página principal, y aquí lo que tenemos que hacer es seleccionar el bucle garsel y ahora aquí tenemos que agregar el número de diapositivas Necesito tres diapositivas. Sentarse en exhibición será uno y sentarse en Scroll también será uno. Ahora hago clic en ella plantilla, y aquí vamos, nuestra plantilla cambia así. Ahora lo que puedo hacer es hacer clic en el contenedor y agreguemos Might. Vamos a sumar la altura como 700 así. Ahora vamos a Es tiles en E diles. La posición será centro central, y el accesorio será predeterminado, repetir sin repetir, tamaño de pantalla, hagamos que cubra así. Entonces podemos agregar efecto scroll, pero no lo voy a agregar, y aquí podemos agregar efecto mouse. No lo estoy haciendo. Lo que voy a hacer es agregar en una superposición de fondo, clic aquí, hacer clic en normal, y el tipo de fondo será clásico y el color será nuestro color primario. O eso. Hagámoslo color de fondo, y vamos a aumentar la opacidad como cinco seguramente no voy a añadir ningún color de fondo Ahora lo que quiero hacer es agregar el título de pose y un poco de descripción o poco de información sobre el post como extracto y aquí un botón llamado Léeme Vamos a hacerlo. Para ello, lo que podemos hacer es dar clic en agregar elemento y primero, agreguemos post title. Bien, no me permito que me diga. Entonces lo que puedo hacer es que puedo publicar esto y hacer clic en Editar página. Bien. Ahora de nuevo, da clic en Editar plantilla. Todo bien. Ahora puedo agregar es como una falla. Entonces solo agrega el título de la publicación y el título de la publicación está aquí. Quiero ponerlo aquí. Antes de hacer eso, vamos a crear el diseño. Entonces quiero post extracto. Agreguemos así. Entonces lo que quiero es un botón. Vamos al botón así. Bien. Ahora bien, este texto no se muestra correctamente. Entonces lo que podemos hacer es agregar el color de fondo a este texto. Entonces para hacer eso, tengo que crear un nuevo contenedor. Vamos a la cuerda de dragón un contenedor como este. Y nuevamente, vamos a eliminar todas las cosas innecesarias, y en daction vamos a hacerla columna vertical, y la pondré aquí mismo, luego agrego todo el título de pausa y el extracto del post y el botón dentro En realidad, hagámoslo así. Bien. Ahora voy a seleccionar el contenedor e ir a Estyle, clic en tipo de fondo, y vamos a cambiar el color de fondo Color primario como este. Bien, bastante bien. Ahora, editemos con el título. Seleccione el título de la publicación, vaya a Azulejo Este. Se dejará alineación, y la tipografía será encabezado así Entonces el color del texto será el color del texto de fondo. Bonito. Ahora tenemos que agregar el extracto Entonces aquí voy a establecer la longitud como diez. Vamos a revisar. ¿Qué tal hagamos clic en aplicar para publicar contenido?. Bien, ahora está aquí diez no es bueno. Hagámoslo como 225. Bien, 25 es mucho mejor. Y vamos a la alineación de Etyle, alineación a la izquierda, y la tipografía será texto Entonces el color del texto será el color de fondo. Y ahora se ve así, y ahora lo que quiero hacer es mejorar este botón. Haré clic en el botón y el texto del botón se leerá más. Entonces leemos más así. Y si quieres, puedes agregar etiquetas dinámicas, pero yo no voy a hacerlo. Y para el enlace, podemos agregar etiqueta dinámica. Da clic en la etiqueta dinámica, y aquí podemos agregar la URL del post. Si no tienes idea sobre etiquetas dinámicas y uv garausel o si quieres profundizar, ya tengo un curso completo sobre elemento pro y puedes comprobarlo o simplemente agregar tu comentario en la sección de preguntas y respuestas, voy a crear lección separada sobre etiquetas dinámicas, carser de lóbulo y calificación sobre carser de lóbulo y Bien. Ahora vamos a ir a Estes on Es muere la posición quedará, tiempo para gap será botón ¿Recordaste que establecemos todas esas cosas en el ajuste lateral y el color del texto será vamos a hacer color de fondo, y el color será color secundario ¿Viste lo que hice? Aquí el color del texto, código de color global hay fondo y el color de fondo es este color verde. Radio de borde, será cero y hagamos relleno como. Hagamos top 22, derecha, 30, abajo, 22, izquierda 30 así, aunque es un poco más grande. Hagamos esto como 20 a 20 ahora es mucho mejor, tal vez 25. Si. 25 se ve mucho mejor. Y aquí dentro, vamos al borde sobre el diseño, así que da clic en él y haga clic en toma el color al color primario, y el tipo de fondo será o el color de fondo se cambiará a color blanco como este. ¿Ves? Además, puedes agregar transacción como cómo animación, así. Vamos a crecer, ¿ves? Sí. Y ahora siguiente, lo que quiero hacer es que quiero agregar esto a continuación aquí y hacer esto mucho hacer que esto sea más pequeño. Para ello, selecciono el subcontenedor que creamos, y vamos a avanzar y pero agreguemos relleno. Así que haga clic aquí y agreguemos relleno como 20 a todos esos lados y comience la alineación. Y aquí puedo cambiar el vamos a cambiar el ancho a 60. No 60 no es bueno. A lo mejor 90 funcionarán. Sí, 90 es bastante bueno. Entonces tengo que ir al contenedor principal sobre contenedor principal. También tengo que añadir el pad. Vamos a decirlo como 20. Y ahora vamos a la maquetación. Y aquí puedo establecer el contenido de justificar como fin y alinear elemento será inicio. Bien, ¿viste ahora que es mucho mejor? Y también lo que podemos hacer es que podemos dar click en este segundo contenedor o en el contenedor de fondo, y aquí, si hago clic aquí y podemos simplemente disminuirlo opacidad, este segundo contenedor o en el contenedor de fondo, y aquí, si hago clic aquí y podemos simplemente disminuirlo opacidad, hagámoslo así Bien, ahora se ve bastante bien y también en nuestro extracto, podemos agregar texto después del final de este párrafo Lo que podemos hacer es ir a Avance y después. Agreguemos tres puntos así. Y en botón, este tres punto no se ve bien, así que solo lo voy a quitar. Entonces, cuando alguien haga clic en este botón, esa persona redirigirá a esta página o a esta publicación. Además, hagamos clic en la opción Vincular y cambiarla en cambiarla para que se abra en Nueva Ventana. Bien, ahora se ve bastante bien. Bien, ahora lo que puedo hacer es dar clic en publicar y dar clic en Guardar y B. Y veamos aquí vamos. Aquí está el diseño. Y ahora vamos solo el diseño. En primer lugar, vamos a configurar la consulta. Así que da clic en el carrusel Loop y ve a Consulta. El origen de la consulta será pausa. Y aquí, si queremos, podemos agregar términos de autor, incluir o excluir, pero no voy a hacerlo ninguno. Entonces la fecha será todo un pedido por aquí, esto debería ser DESC descendente, lo que significa que la última publicación se mostrará primero y la publicación más antigua se mostrará la última. Bien. Ahora, al configurar, podemos cambiar la velocidad EPL. Y cuando bordeemos, el sider será empujado y podremos cambiar la dirección, o si tenemos más de un sider, podemos agregar de diapositivas de set, y en nuestro caso, no necesitamos ninguna de ellas, y voy a quitar la navegación porque no la necesitamos Y también, voy a quitar la paginación. Bien. Ahora lo principal que me preocupa de este diseño no es cubrir completamente el layout y es bastante feo. Parecía viejo, así que lo que podemos hacer es hacer clic en el contenedor, y aquí el ancho del contenido estará lleno con así. Ahora se ve bien. ¿Bien? Bien, ahora se ve mucho mejor, y también lo que necesito es, aumentar la noche Min. Intentemos hacerlo aquí. No, no va a partir de aquí. Así que voy a dar clic en Editar plantilla, siete dejan y aquí, dan clic en el contenedor, y cambiemos esta Min Night para que me guste VH y pH 200. Significa que esto se mostrará en toda la página de inicio. Pero el tema es, olvido que ya tenemos este encabezado. Entonces lo que puedo hacer es que puedo hacer esto Min alturas 80. Sí, funcionará y haga clic en Guardar. Después da click aquí para editar el encabezado. Y ahora estoy en el encabezado, simplemente haga clic en el contenedor de encabezado y establezca Mnhight en VH a 20 OMG es grande, pero veamos que debería ser perfecto. Demos clic aquí para editar la página. Sí, es más grande de lo que esperaba. Entonces seguramente esto debería ser 80, no pixel VH ET, publique, veamos. Aquí, hagámoslo como diez. Diez serán trabajo, guárdalo. Vamos aquí, en realidad selecciona este contenedor y agrega esto como 90 y guárdalo. En realidad, lo agregué para rome place, así que tengo que editar en la sección homepage, no dentro de esta plantilla, así que iré a Editar plantillas y aquí, aquí, selecciono el contenedor y cambio esto a. Vamos a cambiarlo así y hacer clic en cambiarlo a Hundren y haga clic en Publicar A ver. Entonces volvamos a nuestra página de inicio, da clic aquí. Haga clic así. Bien, ahora es LF 12. Diseña la sección de publicaciones destacadas: Bien. Ahora vamos a crear la sección de publicaciones destacadas. Para ello, voy a ir aquí y dar clic en el icono más, luego Flexbox y la dirección de Pex Box serán columna Después en Avance, eliminaré todos los márgenes y patines Después hago clic en un elemento, y aquí buscaré publicaciones. Aquí obtenemos elementos de post, así que solo voy a ponerlo así nueve. Ahora a partir de aquí, podemos cambiar la piel. Selecciono este cardkin y tres columnas serán trabajo y el post por página será seis, lo que significa seis o post se mostrará así Ahora la resolución de la imagen se ve bien y relación de imagen también es buena en este número, entonces tenemos que verificar sobre el título. Aquí, necesitamos mostrar el título y la etiqueta del título será H tres. Entonces en exerp agregaré longitud de ejercicio ya que agregaron como 15 Creo que no se actualizo. Sí, no está actualizando. A lo mejor vamos a eliminar EAP, da clic en este botón de mostrar para ocultarlo. Ahora es así y además voy a quitar el botón leer más y no necesitamos contar fecha ni comentarios, y voy a hacer abrir nueva ventana. Entonces esta placa estará bien no necesitamos mostrar al Avatar dos. Ahora se verá así. Pero si realmente necesitas exerpt, puedes mostrarlo y hacer exp length como cinco y vamos verlo en las vistas reales en vista real, se muestra correctamente, así que tenemos que hacer esta longitud exp como 50 Ahora si lo comprobamos, aquí vamos, lo tenemos talla como 50. Ahora vamos a consultar sobre consulta. El origen es posts y la fecha será todo, entonces el orden B será aleatorio, que significa que lo hará aleatoriamente en los posts para esta sección o podemos ordenarlos por conteo de comandos o última modificación o usando orden de menú, pero lo haré aleatorio. Entonces en la paginación, no necesitamos una paginación. Lo que podemos hacer es ir a la pestaña de estilo en la pestaña Estilo, hagamos esta brecha de columna como 20. El hueco de fila también será de 20 alineaciones a la izquierda, y el color de fondo de la tarjeta será este color de fondo, y no cambiemos el color del borde. Voy a hacer radio de borde como cero y aquí tenemos sombra de caja, que se abra, y vamos a tener esta sombra de caja. Y en la imagen, me quedaré con la imagen por defecto. Entonces vayamos al contenido. En el contenido, el color del título será primario y la tipografía será subencabezado, pero tenemos que cambiar los detalles Aquí, lo haré como 21, entonces el cerrojo será mediano. Medio, no, no mediano. Tal vez semibold funcione. Sí, Semibold es bueno, y también aquí, hagámoslo 25 Espaciado entre letras, hagámoslo por defecto. A lo mejor hagamos esta altura de línea como 30. Ahora, 28 serán trabajo. Bien. Ahora podemos ajustar el espaciado, así que agregaré seis y aquí no tenemos meta detalles. Entonces lo que podemos hacer es que podemos ir a Excepto en extracto, el color será el color del texto y también aquí podemos hacer que este color de texto sea el color del título, pero mantengámoslo como primario y luego la tipografía Esta tipografía está demasiado cerca, según recuerdo, ya la cambio, pero veamos antes de hacer eso, agreguemos algo de espacio en la línea de fondo 20 Y para el contexto tipográfico clic, haga clic en esta fuente administrar global y haga clic en Contexto y hagamos esta línea Vamos a agregarlo como 26 y guardar los cambios de nuevo al editor Bien, ahora es bastante bueno, pero aun así está demasiado cerca. Así que de nuevo, vamos aquí y haga clic aquí, haga clic en Establecer y texto, hagamos esto como 30. Ahora es mucho mejor. Ahora, si queremos, podemos agregar el leer más. En realidad, agreguemos la lectura. Da click aquí, y aquí vamos. Y vamos a Estyle en el contenido de Etyle bajo Contenido, aquí hemos leído más Voy a hacer color como color secundario y establecer la tipografía del botón, pero aquí tenemos que reducirlo tamaño de fuente Hagámoslo como 16. Y aquí está cambiar este espacio en como seis. Y aquí, hay agregar espacio en como 20. Bien, ahora se ve bastante bien. Bien, ahora todos se ven bien. Entonces lo que puedo hacer es simplemente dar clic en publicar, ver los cambios. Bien, ahora se verá así. También, tenemos que aquí en el título. Entonces hagámoslo. También aquí, no tenemos una imagen destacada, y el espacio entre el título y esta imagen es demasiado grande, así que vamos a arreglarlo. Vamos aquí, y podemos cambiar este espacio en, como, vamos a hacerlo como tres. Y aquí podemos cambiar los detalles de la insignia. Aquí podemos cambiar el color del suelo así y color del texto será en realidad el color del texto de fondo funcionará así. Bien, ahora publícalo. Y aquí vamos. Ahora aquí está el diseño y se ve bastante bien. Entonces agreguemos el título para agregar el título, haré clic aquí y agreguemos el encabezado. Entonces el encabezado, etiqueta M será H dos. Vamos a agregarlo como nuestros insights lats e ir a set in, que sea una tipografía line lay será encabezado y además voy a duplicar esto, entonces la etiqueta ML será P y's en esto no te pierdas nada Lee nuestros artículos más recientes y populares, y hagámoslo como texto. Y luego voy a dar click en esta sección de post, y vamos al margen cae dos. Ahora tiene más espaciado. Publica y aquí vamos. Ahora se verá así y voy a hacer clic en este botón Léeme en la profundidad Bola de nieve fue profundidad Avalancha Haga clic en la publicación Editar y haga clic en Concepto imagen destacada. Agreguemos esta imagen destacada como esta y haga clic en el concepto. Bien. Ahora pasemos al siguiente paso. 13. Diseño de la sección de categorías: Bien, ahora vamos a crear una sección para mostrar todas las categorías. Entonces primero, voy a hacer clic en este icono más y vamos a agregar flexbox, dirección tipo columna, contenedor, luego en avance eliminar todo el margen y relleno. Entonces aquí voy a agregar margen como uno a 20. El espacio así, luego agreguemos encabezado y heada texto será explorar tu viaje financiero y además lo duplicaré y agregaré el subtitular así, luego lo haré párrafo Ahora voy a poner este centro. Da click en el título, estilo, haz clic en tipografía y selecciona el tipo de subencabezado aquí, hazlo centro y además hagamos este centro y el texto Ahora aquí tenemos que agregar categorías. Entonces vamos a nuestra página web y en los posts, aquí tenemos categorías, y aquí tenemos cuatro categorías. Lo que podemos hacer es que podemos usar la caja de iconos. Entonces, antes que nada, agreguemos elemento y agreguemos el contenedor dentro de este contenedor principal. Entonces eliminemos todos los acolchados y márgenes, y luego vayamos al layout y la dirección del layout debería ser fila A continuación voy a hacer clic en Agregar elemento e icono de búsqueda Box, aquí vamos, aquí tenemos el cuadro de iconos, y agreguemos los detalles de la categoría primero copio el nombre de la categoría y lo pego en el título, y luego copiemos la descripción de la categoría, más allá de la descripción así. Después también daré clic en la vista y haré clic en copiar dirección y agregar la dirección del enlace ahí y dar clic en abrir Nueva Ventana. Ahora tenemos que cambiar el diseño para hacer eso. Vamos a Estilsoets si queremos, podemos poner el icono así y hacer esto a la izquierda y a la derecha para hacer eso, voy a hacer click aquí y la alineación vertical como esta alineación quedará a la izquierda y el espaciado de iconos, hagamos que sea como 15 y también para el espaciado de contenido, hagamos que sea como 15 15 es demasiado, pero está bien Ahora, cambiemos el icono. Vamos a icono y de hecho en el contenido, tengo que cambiar el icono de aquí. En realidad, lo que puedo hacer es que puedo copiar todas las categorías así y luego vamos a hag BT y vamos a pegar esto y vamos a eliminar esos elementos así Entonces voy a decir, dame un ícono increíble para cada uno veamos, aquí vamos. Vamos a copiar este, pegarlo. Tienes que quitar estas líneas. En realidad, no hay ningún icono llamado asidero en dólares. Dame teléfono gratis para que los iconos. A ver. Digamos que hay más. Sí, vamos a copiar la universidad y pegarla. Bien, insértelo. Y ahora vamos al estilo E sobre el estilo E, Cambiemos el color del icono a color secundario. Y el tamaño está bien. Después en el contenido, cambiemos la tipografía a botón. La tipografía del título es botón, y el color normal es el color del texto Go color será este color verde así. Después descripción TiroF será texto y el color será el color del texto Bien. Ahora por qué escribimos y damos clic en bligate y se duplicará así Entonces lo que tengo que hacer es cambiar esos contenidos. Vamos categorías, copiemos inversiones, no seleccionemos inversiones, inversión. Así, entonces copiemos este texto. Ahí está el texto, haga clic derecho copiar dirección de enlace, pegarlo y graficar. Gráfico de iconos. Aquí vamos, entonces sólo puedo hacer clic en el contenedor y hacer clic derecho, luego duplicar. Se duplicará así. Entonces agreguemos nuevamente los detalles, agréguelos así. Vamos a añadir la cartera. Siempre obtenga la ayuda de la IA cuando diseñe un sitio web. Vamos a copiar en parte de ruido y vamos a ponerlo aquí ruido y venir aquí impuesto. Tanques. Copiarlo, pegarlo aquí. Y además, tengo que pegar la URL. Creo que me olvido de pegar la URL en finanzas personales. Es clic derecho copiar enlace dirección, pegarlo así. Bien. Ahora aquí vamos. Aquí tenemos los cuatro artículos, pero tenemos muchos problemas. Vamos a arreglarlos uno por uno primero. Quiero hacer esta talla como 50%, así que vamos a Avanzar y sobre mí haga clic en personalizado y 50. Después también da click aquí y ve a Advance y custom 50 así. Después voy a hacer clic en copiar, después hacemos clic en pegar estilo, pegar el estilo. Ahora también tenemos un problema, que es que no tenemos suficiente espaciado. Entonces lo que podemos hacer es crear un contenedor separado. Pon ese contenedor aquí, luego vamos a quitar esas cosas y voy a poner este contenedor dentro de ese contenedor. Y además, este estará dentro de este contenedor principal que creamos, y en el layout aquí, puedo establecer la fila y la columna. Hagámoslo como 40 y 40 así que no necesito agregar 40 a la columna. Y ahora aquí se verá así y hagámoslo 60. Y luego voy a dar click en uno de estos recuadros de iconos y vamos a ir a Itis y vamos a avanzar en Avance, vamos a ir a la frontera y hacerlo sólido En realidad, no necesitamos una frontera, pero lo que necesitamos es sombra de caja. Agreguemos una sombra de caja como esta, y no voy a cambiar los detalles de la sombra de caja, y en el diseño, cambiemos el relleno a seis, tal vez sí, 15 va a ser trabajo y luego ahora con razón copiar, pegar este estilo, pegar este estilo, también aquí, pegar estilo. En realidad, lo que podemos usar es grid, no este contenedor, y si usamos la grilla, automáticamente se ajustará de acuerdo a la grilla. Vayamos a aquí y agreguemos la grilla. Vamos a agregar la grilla así y la cuadrícula será de dos columnas y esas serán también a la brecha es 40 es demasiado. Hagamos Gaps 20. Entonces agregaré esos recuadros a la grilla. Podemos simplemente agregarlo y ponerlo aquí y también desde aquí, hacerlo tamaño predeterminado y agregarlo aquí, haga clic derecho en copiar, presione el estilo. Cuando hacemos esto, podemos obtener el diseño que tiene el mismo tamaño del fondo. Vayamos aquí y matemos la culpa. Declarado así. Y sí, entonces vamos a retirar todo este contenedor. Y ahora tiene exactamente el mismo tamaño en cada artículo. También, para esta sombra de caja, vayamos a la frontera. Y aquí voy a cambiar esto a, como, no, sigamos así y la propagación será tres y el desenfoque será 22. Hagámoslo difuminar como diez y p será uno. Hacemos clic en copiar Patty, ft style, pastyle. Todo bien. Ahora tenemos esta sección completamente desarrollada. Además, si queremos, podemos agregar margen de como 60 así. 60 es demasiado. A lo mejor 30 será la talla. Ahora, vamos a comprobarlo en el diseño. Entonces, si alguien da clic en esta categoría, irá a la página de categoría y en realidad tenemos que editar la página de categoría, cual lo haremos en futuras lecciones. 14. Cómo crear una sección de formulario de suscripción: Ahora vamos a crear un formulario de suscriptor. Para hacer eso primero, vamos a crear el contenedor. Así, entonces tenemos que ir a avanzar enlace los valores, entonces aquí uno, 20 será margen superior. Entonces tendré que agregar el encabezado para hacer eso, vamos a ir a elementos sobre elementos, arrastrar y soltar el titular, y agregaré esto como el texto del título. Vamos al estilo en la alineación de Etyle será centro la tipografía será Ahora solo duplicaré este subencabezado, encabezado principal y haré un subencabezado Vamos a Estyle on Estyle cambiarlo a texto, y luego agregaré el texto como este y podrás encontrar todo este contenido en la sección de recursos Ahora tengo que agregar el formulario de suscriptor. Lo que podemos usar es la forma elemental. Yo formaré aquí. Aquí tenemos el formulario. Simplemente lo arrastraré y soltaré así. Entonces vayamos a avanzar y agreguemos márgenes superiores a la entrada. Ahora tenemos espacio. También lo hicimos aquí, si recuerdas, ¿ves qué? Ahora veamos qué tipo de campos necesitamos. En el formulario de suscriptor, necesitamos correo electrónico y no necesitamos campo de mensaje, necesitamos campo de correo electrónico. Además, si quieres, puedes quedarte con el nombre, pero yo eliminaré el nombre y solo guardaré el correo electrónico y el botón. También aquí como nombre del formulario, lo estableceré como subscribe. Bien. Ahora en etiqueta, voy a ocultar la etiqueta. Entonces, tenemos el botón para el texto del botón, configuraré suscribirse así. Bien. Ahora quiero hacer esto en línea, lo que significa área de texto o el campo de texto y el botón estará en la misma línea. Para ello, voy a dar click en el campo de correo electrónico, y aquí como el ancho de columna, lo haré como 75. Bien, ahora ves con este cambio y también voy a botones en botones, el ancho de columna será de 25. Bien. El campo de texto es 75% y el botón es 25%. Así es como podemos crear el formulario en línea. Bien, hagamos mejor este diseño. Primero, iré a Estyle en Etyle como hueco de columna. Hagámoslo como 15, y no necesitamos preocuparnos por la brecha de fila. Vamos a agregarlo como 15 por ahora, y no necesitamos preocuparnos por etiquetar el campo HDML, y luego vamos al campo En campo, podemos agregar el color del texto, así agregaré el color del texto como texto, y agreguemos la tipografía como texto, luego el color de fondo es blanco y hagamos el color del borde como un poco gris así, hagamos el radio del borde como cero porque tenemos que seguir los botones y otros diseños de tarjetas, tenemos que mantener la singularidad del Entonces todo bien aquí y en la posición del botón será esh y centro de alineación. Después la tipografía, hagámosla como tipo botón y borde Ninguno, entonces el color de fondo será este color secundario, y el color del texto será de color blanco, y no necesitamos un color de borde, y no tenemos ningún botón anterior o siguiente, y el radio del tablero será cero y el relleno de texto será como 14 14 funcionará porque tenemos que hacer coincidir el campo de texto y la altura del botón así. Entonces aquí voy a ir al color de fondo será color primario, y le va a gustar esto. Entonces voy a mantener el color del texto como color blanco. Y si quieres, podemos agregar animación así, pero no es necesaria. Cuando hagas esos cambios, aplica siempre el diseño y estilo que uses aquí porque mantendrá la singularidad del sitio web Ahora tenemos el formulario de suscripción y si queremos, podemos ir a Vamos a avanzar y así podemos agregar pátina derecha 60 y el relleno izquierdo 60 es demasiado pequeño, tal vez 90 90 por 90 va a ser bueno, tal vez uno a 212120 por 120 será Entonces ahora tiene menor tamaño, también, iré al contenedor principal. En contenedor principal, agregaré la altura de menta como 350, tal vez 400 y justificaré que el contenido sea centro. Entonces un estilo, podemos agregar el color de fondo. Agreguemos este color verde y reduzcamos así la opacidad del color verde y hagamos esto como 600 Sí, 600 va genial y continuación vamos al formulario en formulario, tenemos que establecer la acción después del envío. Aquí, voy a eliminar esto que tenemos que hacer es que necesitamos recopilar el envío, lo que significa que cuando el usuario envió este formulario de correo electrónico, esa dirección de correo electrónico se arrepentirá de nuestra colección de correo electrónico, y te mostraré cómo se ve en unos minutos y también aquí si lo deseas, podemos agregar herramienta de email marketing como mail Jim. Si seleccionamos este correo le, puedes ver aquí tenemos la pestaña Mailchimp, y aquí podemos agregar el ABI de Mailchimp De esa manera, puedes conectar tu formulario de suscripción a Mailchimp En esta lección, no lo voy a hacer, así que voy a quitar este chimpancé de correo y también aquí tenemos esta acción de correo, lo que significa que si vamos aquí, si alguien se suscribe a esta lista de correo electrónico, vamos a recibir una notificación, y tenemos que configurar los dos correos electrónicos también desde correo electrónico y cosas que queremos obtener los campos significan campos que tiene esta forma Además, si haces clic en este ícono más, tenemos muchas opciones aquí si seleccionamos este correo, también podemos enviar un correo a nuestro visitante o a la persona que complete este formulario y haga clic en el botón de suscripción, para que podamos notificarle que recibimos su correo electrónico. Voy a quitar ambos, y si te gusta agregarlo, puedes escribirte tú mismo o si tienes algún problema mientras lo intentas, solo avísame. Voy a crear un láser. Y en el envío por cobrar, podemos recopilar la IP del usuario y el agente de usuario del remitente. Si alguien envía ese formulario, podemos recoger el correo electrónico también agente de usuario de UIP En opción adicional, voy a mantener la promulgación por defecto como navegador predeterminado y volvamos al campo de formulario y en el campo Formulario, aquí podemos el orden de la página, así podemos decir, digamos que ingrese su correo electrónico para suscribirse con anticipación, si lo desea, puede establecer un valor predeterminado, y si lo desea, puede cambiar el ID Entonces, en las lecciones de creación de formularios o las lecciones de diseño de páginas de contacto profundizaremos en estos campos, y por ahora, todo se ve bien, y ahora publicaré esto y vamos a probar este formulario de suscriptor, así que haré clic en la vista previa de los cambios y vamos aquí. Ingresaré mi correo aquí, luego hago clic en suscribirse y aquí tenemos el mensaje de éxito. También, podemos cambiar el diseño del mensaje. Entonces si vamos al estilo, aquí tenemos el mensaje y vamos a cambiar la tipografía del mensaje a texto y el color será de este El color del mensaje de error será rojo así, publícalo. Ahora el color del mensaje será diferente. Entonces iré al tablero y en el tablero, debajo de Elementor, puedes ver la sección de envío Si haces clic aquí, puedes conocer todo el correo electrónico o todos los envíos de formularios que tienes en el sitio web. Así que aquí bajo formulario de suscripción, recibimos este correo electrónico. Lo que podemos hacer es seleccionar el formulario aquí. Si tienes más de un formulario y si quieres obtener solo suscriptores, puedes seleccionar el formulario y puedes hacer clic en Exportar filtro CSV y obtener el archivo CSV también en el futuro o si planeas usar la herramienta de email marketing, puedes usar este archivo CSV para agregar esos correos electrónicos a tu herramienta de email marketing. Ahora se ve bien. 15. Diseñar el pie de página: Ahora tenemos que crear el Potter. Entonces hagámoslo. Para hacerlo, iré al panel de WordPress. En el panel de Wordpress, voy a ir a las plantillas de ellos Builder. En ellos Constructor, aquí tenemos Pie de Página. Simplemente haga clic en este icono más. En realidad, creo que ya creamos un Footer. Intenta editarlo. Aquí está el pie de página. Voy a quitar este pie de página innecesario, y aquí tenemos el pie de página y pulsamos en Editar. Aquí vamos. Iré a establecer en el set in. Simplemente eliminaré este texto y mantengamos solo pie de página aparte. Bien, ahora voy a crear una caja flexible como esta. Entonces en altura media, hagámoslo como 300. Sí, entonces balanceemos el margen y los acolchados. Entonces agreguemos 20 como margen superior. Entonces en su estilo, agreguemos alrededor. Agreguemos antecedentes como este. Hagamos esto como 350 píxeles. Sí, eso es mucho mejor. Entonces a partir de aquí, voy a añadir un elemento. Primero, agregaré el logo lateral, y también nuevamente en el contenedor, seleccionemos la dirección como cuervo horizontal. Y sin solo agregar únicamente el logo lateral, agregaré contenedor, eliminaré las cosas, luego pondré este logo dentro del contenedor así en contenedor, será columna vertical, y un line item start justify content will be start also start. Ahora necesito el texto del anuncio. Agrega el titular aquí, intercambia este dos párrafos y será texto en realidad, este logo no está funcionando aquí porque este texto de logo es el mismo que el color de fondo. Por eso esa parte no se muestra, así que tenemos que cambiar el logo antes de cambiarlo. Cambiemos este color del texto. Y lo que puedo hacer es sin solo agregar el logo lateral, voy a quitar el logo lateral y agregaré la imagen. Y así, pongámoslo aquí. Entonces tengo que cambiar la imagen, hacerla aquí voy a agregar el logo, elegir esta imagen y aquí en la sección de recursos, puedes ver este es logo blanco. Vamos a agregarlo así. Entonces enfrentemos la etiqueta ALD. Ahora tenemos este logo sin el fondo blanco. Es bueno. Ahora aquí tenemos que añadir un pequeño párrafo. Voy a añadir texto así y ahora luplgate este contenedor y lo haré tres veces así Entonces voy a quitar este texto y el logo, y lo haré por aquí también. Bonito. Ahora aquí voy a añadir el enlace importante. Entonces primero, voy a agregar el titular, después agregaré el título como enlaces importantes, y al morir, hagámoslo centro de alineación La tipografía será sub d, pero tenemos que cambiar el tamaño Hagámoslo 30 y la altura de la línea también será 35. Y el color del texto será este color de fondo. Entonces hagamos esto como centro para hacer eso, haga clic en el contenedor y hagamos el centro de líneas de pedido así. Ahora voy a tener que añadir un menú. Menú de búsqueda aquí y voy a agregar este menú de wordpress aquí en el desplegable móvil, lo haré como ninguno En realidad, tengo que agregarlo en este contenedor así y ahora tengo que crear un menú o puedo elegir el menú de encabezado seleccionar la palabra pres meno elemento o la palabra tras elemento de menú, y el menú será el menú principal, y vamos a hacer el layout como vertical así, luego centro de alineación, y puntero será ninguno Ahora vamos a Etyle. Aquí buscaré. Aquí, voy a cambiar el nombre del menú a enlace importante. Y en el menú Icecream, tenemos que cambiar este menú, pero hagámoslo después de que creamos todo Por ahora, vamos a su dado y aquí, vamos a cambiarlo texto a botón y el color del texto será color de fondo como este y borde sobre color será color verde y el color activo también será color verde. Y podemos cambiar el relleno vertical si quieres. Y aquí voy a añadir el espacio entre como 15. Y aquí, eliminemos estos acolchados horizontales y verticales y hagamos esto como 30 30 será trabajo, y se verá así. Entonces lo que puedo hacer es copiar texto y pegarlo así, luego dar clic en el contenedor, convertirlo en un centro de líneas de pedido, y aquí voy a cambiar esto a post razonado Después voy a hacer clic en agregar elemento y añadir un elemento post. Rastrearé estas publicaciones y las dejaré así. En realidad, debería caer aquí así y voy a salar la piel como clásica y actualmente está en horizontal, pero necesitamos esto en vertical. Para ello, haré esta columna como una y post page será tres, no menos dos, tres, y la posición de la imagen quedará así. Y el medio de resolución de imagen será trabajo y aquí en el ancho de la imagen, hagámoslo como 30%, así. A lo mejor vamos a hacerlo como 40. Bien necesitamos mostrar el título y no necesitamos mostrar el esfuerzo y no necesitamos mostrar los metadatos. Y además, no necesitamos leer más botón, y hagamos abrir una nueva ventana, así que cuando alguien haga clic en él, se abrirá en una nueva ventana. Bien. Ahora vamos a Consulta sobre Consulta, seleccionaré publicaciones, ordenará por la fecha y el pedido será DESC Entonces voy a dar click sobre esto ignorar iTigiPose y paginación, no necesitamos paginación no necesitamos Entonces vayamos a eTyleoEtyle, hagamos hueco hagamos En realidad no necesitamos un hueco de columna aquí. Hagamos esta brecha cruda como dos y también hagamos esta brecha de columna más dos. De todas formas quedará una alineación y aquí no necesitamos preocuparnos por la caja, y además no necesitamos preocuparnos por la imagen. Vamos al contenido, y cambiemos el color del título del contenido a color blanco como este. Además, la tipografía será texto así. Hagamos que este tamaño de texto sea 16. Ahora es mucho mejor y también aquí, hagamos altura de línea 20. Bien, se ve bastante bien. Y si queremos, podemos hacer esta piel como tarjeta. Entonces el fondo será en color blanco, pero lo voy a mantener como clásico. Bien. Ahora voy a dar click en este contenedor principal, y vamos a ir a Adlace agreguemos abajo como 220 así Y además, vamos a reducir este tamaño de imagen de esa manera vamos a tener una buena alineación. Hagámoslo como 30. Bien, ahora tenemos la parte superior del pie de página está terminada. Aquí tenemos que agregar la sección de copyright. Entonces hagámoslo. Para hacerlo, haré clic en el icono de Clase y agregaré una nueva caja Plex como esta, luego iré a avanzar todos los márgenes y acolchados, y un estilo, agreguemos el color de fondo como este color de texto Entonces voy a dar click aquí y añadir titular vamos a arrastrar y soga y vamos a hacerlo como H tres. Y aquí voy a dar click aquí y tengo que seleccionar la etiqueta dinámica de fecha. Entonces aquí tenemos fecha y hora actuales. Después hago clic en este icono G y el formato de fecha será personalizado, y aquí solo queremos ver la E. Así que me quedaré con la Y y eliminaré todos entonces por adelantado, podemos agregar el texto de antes y después. Para antes, agregaré seno y para después, agregaré o rese riqueza sabia, o descansada. Ahora vamos a Estyle en estilo E, hacer centro de alineación, y la tipografía será botón Entonces el color será el color de fondo. Ahora aquí, hagamos esta tipografía al 60, 18 será por y luego hago clic en el contenedor sobre contenedor Hagamos relleno superior como 15 y también el acolchado inferior será 15. Aquí vamos. En realidad, cambiemos esta tipografía a texto y aquí, hazla media, 18 hará el trabajo Después hago clic en publicar y ahora si comprobamos el diseño, podemos ver beat design Footer. Además, si queremos, podemos eliminar el contenido de aquí y también tenemos que crear un nuevo menú para los enlaces de importación. Hagámoslo ahora mismo y para hacerlo, iré a apariencia y menús. En los menús, voy a dar click en Crear Nuevo Menú. El nombre del menú será importante. Enlaces y haga clic en Crear. Ahora aquí voy a añadir Voy a añadir página de inicio AS, página de Blog, y página de Contáctenos y haga clic en En Tomenu aquí, voy a cambiar esto a casa y dar clic en Guardar Menú Actualmente, sólo tenemos esos cuatro ítems, pero en el futuro, tenemos que agregar más. Regresaré a nuestro editor de pie de página y haré clic aquí, luego cambiaré el menú a enlaces importantes como este para enlaces importantes, también tenemos que crear políticas de privacidad y páginas de términos y condiciones. Te voy a mostrar cómo crearlos también, y luego tenemos que agregar esos enlaces también. Vamos a publicarlo. Bien. Ahora en el siguiente paso, tenemos que arreglar los problemas móviles. Tenemos que arreglar los problemas móviles de esta página de inicio. Entonces podemos ir al Diseñador Aus, al blog y a la página de Contacto, y hagámoslos en el siguiente video. 16. Cómo corregir la capacidad de respuesta móvil: Adelante, solucionemos los problemas de respuesta. Haga clic en editar este elemento para editar esta página principal. Entonces vamos a la tableta Atriov me veo así. Ya arreglamos el menú y el encabezado aparte. Ahora tenemos que arreglar desde este deslizador héroe. Si vamos a la vista móvil, se verá así. Lo que puedo hacer es hacer clic en Editar plantilla para editar la sección héroe. Entonces estoy en la sección de héroes. Si compruebas aquí, puedes ver cuatro plantilla slider, y aquí está el contenedor. Vamos al contenedor principal y al contenedor principal. Voy a añadir Mnhight como cien. Me refiero a que la sección de héroe en realidad estará en altura mínima, agregaré como 80, por lo que será el 80% de la vista de la tableta. Entonces en el contenedor, voy a hacer esto con el 100%. Como tengo que cambiar el tamaño de fuente para hacer eso selecciono el título de la pose y vamos a ir a Eyle en Eyle Aquí hago clic en este icono, después hago clic en Administrar fuente Global, un Entonces desde aquí, podemos ver que estamos en el móvil Portriot. Entonces en móvil Potriot voy a cambiar este tamaño a como 46. Entonces también, la altura de la línea será vamos a hacerla como 1.2. No. Hagámoslo como uno solo. Y también en el subeter lo haré como 41.21 será línea alta También en el texto, cambiaré este tamaño de fuente de texto a 18, y para el botón, hagámoslo 18 así. Después haré clic en Guardar cambios y dar clic en volver a Editor. Y aquí vamos. Ahora tenemos fuentes de menor tamaño y en plantilla de héroe móvil, muestra dos elementos, pero solo necesito un artículo. Vamos a tratar de arreglarlo. En realidad, tenemos que hacer ese cambio en la configuración del carrusel Loop, así haré clic en guardar y embolsar y aquí puedo seleccionar el contenedor dentro del contenedor Aquí tenemos Loop carrusel en Loop carrusel. Aquí tenemos slide on displays dos en la tablet, voy a hacerla una. De esa manera, se mostrará así. Bien. Ahora se ve bastante bien. Hagamos clic en Editar plantilla y haga clic en Guardar y aquí, el tamaño intermedio es un poco más grande. Entonces lo que podemos hacer es cambiar la brecha. En realidad, si vamos a la configuración lateral en el diseño de configuración del sitio aquí, podemos ver la brecha. Para que podamos cambiar esta brecha a 15 o diez. Sí, diez serán obras. Entonces en tablet, serán diez, y para el relleno de contenido, si queremos, podemos sumar cero. Entonces vayamos a la vista móvil en la vista móvil, se ve así y la brecha diez trabajará allí también. Ahora voy a concebir rápidamente el cambio y volveré aquí, entonces si voy a fuentes globales y aquí está el tamaño de fuente del encabezado en el móvil Entonces cambiémoslo a 36 y inet será uno. En realidad, la pelusa predeterminada es una, así que no hay necesidad de cambiarla. Y aquí, hagamos esto como 32, y el tamaño del texto será 18 y la altura de línea será 1.2. Hagámoslo 1.4. Entonces será fácil de leer también para los botones, hagámoslo como 18. Y ahora haz clic en concebir cambios de nuevo a Así que cuando usamos fuentes globales, no necesitamos ajustarlas manualmente. Cuando lo ajustemos en la fuente global, afectará a todos los elementos. Ahora nuestro encabezado se ve bien. Ahora vamos a nuestra última sección interior, y arreglemos primero la versión para tablet. Entonces en la versión tablet, tenemos que añadir el relleno izquierdo y derecho. Vamos a agregar el relleno derecho como diez y también el relleno izquierdo como diez o tal vez 15 15 es el tamaño que tenemos que uh, sí, es 15. Bien, y se ve muy bien. Entonces vayamos a la vista móvil y veamos qué podemos hacer. En vista móvil, no tenemos que hacer nada. Es ajustar en consecuencia. Si queremos, podemos cambiar el tamaño entre medias, pero voy a mantener el predeterminado 15. Entonces tenemos esta sección, así que iré a la versión tablet, y como hicimos antes, tenemos que cambiar la derecha a 15, también a la izquierda a 15, y se ajustará también, se ajustará en el móvil. Entonces aquí tenemos que hacer la misma sección de dos suscriptores, qué avance aquí serán 15 y la izquierda serán 15. Si crees que este espacio es demasiado, puedes eliminarlo, pero creo que este espacio es mejor. Ahora nuestra página principal es totalmente receptiva y aquí tenemos un problema pincha en el formulario de suscriptor y agregamos el relleno derecho e izquierdo, así lo haré cero y se verá como Bien, ahora lo publicaré, entonces tenemos que editar el pie de página, hacer ahora lo publicaré, clic en pie de página y en pie de página, vamos a ir a la versión tablet. Y aquí, lo que tenemos que hacer es agregar izquierda y derecha. Top será 20, será 15, inferior a 20. Y entonces aquí la pose de la razón, tenemos que hacerla una columna y se verá así. Entonces en el móvil, la parte superior está bien, un enlace importante está bien. Por el motivo post, se ve así. Y si hacemos que la imagen posicione arriba, podemos ver el texto así y el problema es que va a afectar a toda la sección, así que lo haré como a la izquierda como antes. Entonces en situación como esta, lo que podemos hacer es que podemos duplicar esta sección, y luego voy a ocultar esta sección anterior en la vista móvil, por lo que solo estará disponible para escritorio y tableta, y no estará disponible para vista móvil. Entonces iré a Avance y aquí Responsive on responsive, podemos dar click en ocultar en Mobile Portal. Y cuando vayamos al móvil, bajemos. No va a mostrar. Y entonces no queremos mostrar esto en tab lat y versión de escritorio. Para ello, voy a dar clic aquí e ir a Avanzar y receptivo. Aquí, puedo hacer que se oculte en la pestaña y Hy en el escritorio. Por lo que se ocultará en esas pantallas, y solo estará disponible en la versión móvil. Ahora aquí, lo que puedo hacer es hacer clic en Contenido y hacer que la imagen posicione arriba. Entonces nuestro título de pose se mostrará así también en el Is dies we can to image y podemos cambiar el espaciado así, hacerlo como dos tal vez tres funcionarán. Ahora en escritorio, esto no se mostrará. Voy a mostrar la imagen con el lado izquierdo, ésta, y en el móvil, ésta se mostrará. Ahora hago clic en publicar y vamos a comprobarlo en diseño real. Aquí, voy a hacer clic derecho y dar clic en Inspeccionar. Entonces aquí voy a dar click en esta barra de herramientas Toggle device. Y aquí ahora tenemos la versión móvil, y si me desplazo hacia abajo, aquí está el resultado que muestran. Y en la versión de escritorio, aquí está el resultado. Espero que hayas entendido la idea. Bien, ahora diseñamos con éxito el encabezado pero también aquí, tenemos que agregar altura y dejar disponibilidad 15 y publicarlo agradable. Ahora aquí tenemos el diseño. 17. Diseño de la página Acerca de: Tenemos que diseñar la página ATS. Vamos a hacer clic aquí. Actualmente tenemos la página vacía. Lo que hago es hacer clic en Editar página. Entonces aquí, hago clic en Editar con botón de elemento. Ahora estoy en elemento editor, así que solo puedo hacer clic aquí y hacer clic en Bloques de contexto y hacer clic en columna de dirección para crear un nuevo contenedor y vamos a hacer Margen y Padina cero aquí hay en Margen para pasar 60 así y aquí tenemos que agregar los detalles y primero voy a agregar el titular el texto del título será centro y el tipográfico será y también lo duplicaré y haré esto como párrafo y en este texto tipográfico Ahora lo que tengo que hacer es tener que generar contenido. Lo que puedo hacer es conseguir la ayuda de la IA. Bien, aquí estoy en el chat de IA que utilicé para generar entrada de blog, y aquí voy a decir, dame sobre el título de la página y el contenido, necesitas tener encabezado sub encabezado y descripción sobre nosotros. En tu caso, tienes que escribirlo tú mismo o usar ayuda de IA de acuerdo a tu nicho y generó algo que no quiero, así que tengo que decirle a esta IA que esto es para el sitio web del bloque, incluye todos los vamos a subir y revisar nuestras categorías. Sólo tienes que copiar la categoría. Incluye las tres categorías, tres categorías y otras tres categorías y me dan sobre el contenido de este sitio web en bloque. Y veamos qué va a pasar. Bien, esto es bueno. Vamos a copiar esta parte, y aquí sólo voy a agregarla así y en su caso, no haga lo mismo. Tienes que hacerlo de acuerdo a tu nicho y de acuerdo a tu sitio web está atado. Entonces aquí, podemos agregar lo que cubrimos así. Agreguemos ese después de esta sesión. Entonces lo que puedo hacer es que puedo lamer aquí, dar clic en Cuadro de contexto y dirección como columna. Después ir a avanzar en Avance. Vamos a agregar margen para pasar uno, 220, y dentro de este, voy a crear otro contenedor y vamos a eliminar todos los márgenes y los rebordes y en maquetación, voy a decir la dirección como horizontal y el contenido Y va a estar aquí, y luego voy a dar click aquí y añadir la imagen Entonces voy a añadir un titular aquí mismo. ¿Recuerdas que este contenedor es un contenedor horizontal directo? Por eso este titular se agregó así y vamos aquí. Simplemente copiaré el texto del titular aquí y agregaré el texto del título así. En realidad, podemos usar este contenedor. Añadiré la imagen y titular a este contenedor principal y luego hagamos este contenedor principal como dirección horizontal. Entonces agregaré este titular, solo este titular dentro del contenedor y este contenedor, el subcontenedor será columna vertical así De esa manera, no necesitaremos agregar muchos elementos luego vamos a las ITS y las ITS hagamos esto como subencabezado Entonces duplicaré esto y hagamos esto como contenido H tres. Además, esta será H cuatro y aquí en la persona. En realidad, podemos agregar esa grilla que ya creamos. Voy a eliminar este y vamos a ir a la página principal y en la página principal, voy a dar clic en Editar con Elementor Verás, no estoy diseñado este sitio web ni llamado a un plan. Me acaban de crear en tiempo real. Sabes, yo solo copio esta cuadrícula, solo cópiala y vengamos aquí, luego pasea la cuadrícula así. Entonces en la cuadrícula, realidad no necesitamos la cuadrícula aquí, pero vamos a cuadrar la cuadrícula, las columnas serán una y las filas serán una, dos, tres, cuatro filas. Oh, así. Y aquí, hagamos que esta imagen tenga un tamaño del 40%. En realidad, tenemos que ir a avanzar. Hagamos el tamaño de la imagen aquí como hundrn y de antemano, el ancho será a la parte posterior, lo que significa 40% Así. Bonito. Rango real como 50 , 60, 60% funcionará, y este será 40 por. No, esta debería ser 60% y esta imagen debería ser 40% así. Ahora aquí, tengo que añadir una imagen. Esta imagen debe ser imagen vertical. Cuando creo la imagen, debería considerarlo. Voy a crear la imagen. Vuelve aquí. Acabo de crear la imagen, así que crear imagen uso el sitio web de cnmaouse como fxs.com y uso Figma para cortarla y Aquí tenemos la imagen, esta imagen ha uso es 700 y el ancho es 600. Vamos a agregarlo aquí y veamos qué tenemos que hacer. Yo solo y lo dejaré caer así y aquí copia la etiqueta ol, más allá de la etiqueta ol, y aquí se verá así y no está completamente cubierta aquí. Lo que podemos hacer es aumentar la altura de la imagen. Iré a Canva y lo haré y volveremos. Simplemente diseñe la imagen, iré aquí y en esa imagen ataque y veamos todavía no está perfectamente alineada con nuestro diseño. Entonces lo que puedo hacer es que puedo hacer esto como centro alineado, o puedo aumentar esta costumbre con vivir hazlo como 50, 50 valdrá la pena. O lo que puedes hacer es conocer el ancho y alto de esta sección. Entonces para hacer eso, puedes hacer clic en los cambios de vista previa. Y aquí vamos aquí. Voy a hacer clic derecho en Inspec y dar clic aquí. Entonces aquí se puede ver la altura de la imagen y la imagen con altura. Puedes usar esto con altura para crear la imagen. Ahora pasemos a la siguiente sección y vayamos aquí. Veamos la siguiente sección. En la siguiente sección es la razón por la que hacemos esto y nos unimos a nuestra comunidad. Vamos a crear esas dos secciones. Puedo duplicar fácilmente esta sección y pegar si tenemos que pegarla debajo de esta. Lo que cubrimos sección, podemos simplemente hacerlo así y aquí hacer esta marcha en el pase superior uno, dos, 20, y cambiemos este texto a por qué hacemos esto así, y luego podemos agregar esta sección. Ahora tenemos que agregar únete a nuestra sección de comunidad. Lo que puedo hacer es que puedo copiar este texto, simplemente duplicar este texto y ponerlo abajo, luego aquí, luego copiar esto y ublgate esta sección y pegarlo abajo así y agregarlo así Entonces tengo que agregar aquí, agregar este formulario, así que simplemente lo copiaré y lo pegaré así. Aquí, voy a dar click sobre este titular y vamos a hacerlo ya que H tres también hará lo mismo para ser un H tres. Y cuando añadimos esto como medio, no es muy útil al parecer, lo que podemos hacer es que podamos dar click aquí y convertirlo en una línea dejada así. Además, tenemos que hacer lo mismo aquí y la sesión de suscripción, hagamos a la izquierda y escribamos patines así Ahora lo que quiero hacer es agregar imagen como esta a este lado para hacer eso, tenemos que envolver estos artículos en diferentes contenedores. Hagamos clic aquí y agreguemos un contenedor como este y todas las cosas aquí solo agregaré todo el artículo dentro de este contenedor así. Aquí vamos. Ahora, tengamos un espacio entre esas dos secciones. Podemos agregar fácilmente una caída de margen a aquí o podemos usar dos contenedores diferentes. Solo voy a agregar un margen arriba aquí. Hagámoslo como 30 o tal vez 60, 60 funcionarán. Y las otras formas podemos dar click aquí y añadir un contenedor como este y otra vez, quitar esas cosas y dentro de este contenedor, ponemos éste y éste. Entonces duplicaré ese contenedor y retiraré éste y éste, después pondré éste y éste dentro de ese contenedor. Ahora, en realidad, tenemos que añadir éste también. Esto es un poco trabajo, pero solo agrega en el margen superior será pero solo quiero mostrarte esto ahora en este contenedor principal, puedo ir a diseño y puedo agregar el hueco de fila como 60 así. Entonces quiero agregar una imagen aquí. Para ello, voy a dar click en el contenedor principal y cambiarlo de dirección a fila horizontal y solo duplicaré esto. No, vamos a copiar esta imagen y simplemente dar clic aquí y pegar la imagen así. Será justo de acuerdo con el diseño y haga clic aquí. Hagamos esto como 60. A continuación, haga clic aquí y haga que esta alineación de elementos se centre. También tenemos que hacer lo mismo aquí así. Ahora puedo cambiar esta imagen. Aquí está la imagen recién creada y hago clic aquí, luego voy a Contenido y subo la imagen. También tenemos que añadir el texto ALT. Cuando agregas el texto ALT, siempre agrega texto significativo y O palabras clave amigables como cómo ser rico o algo así. Y aquí vamos, solo diseñamos la página a. Además, si queremos, podemos agregar más sección a esta página, pero mantengamos esto como minimalista Ahora blanco en publicado, y siguiente lección, tenemos que arreglar el problema de respuesta móvil. 18. Cómo corregir la capacidad de respuesta móvil en la página Acerca de: Bien, ahora tenemos que arreglar los problemas de respuesta móvil. Antes de hacer eso, en último video que hacemos la capacidad de respuesta móvil, cambiamos esta brecha a diez, pero solo queremos hacerlo en versiones tablet y móvil, pero la versión de escritorio también cambió Vamos a la configuración lateral y al layout aquí, hagamos esto como dos y porque si lo hacemos diez, siempre será diez y vamos a hacer clic en los cambios, haga clic en volver a Editor Bien, perfecto. Ahora vamos a la versión retrato de tableta, y vamos a cambiarlos. Agreguemos agregando a la derecha como 15 y a la izquierda en como 50. También aquí, cambiemos esto. Vamos a hacerla dirección columna y luego dar click en la imagen e ir a avanzar y hacer esto como cien o simplemente podemos hacerla completa y además tenemos que hacer lo mismo aquí. En realidad está en el diseño, hazlo 100% así. Entonces podemos agregar los patrones de la derecha 15, patinusfty izquierda Ahora aquí también podemos hacer lo mismo hacer columna vertical, luego ir a avanzar en paddin derecho como 15 y patrón izquierdo como 50 Entonces vamos a dar click aquí por adelantado. Haz esta w completa. Muy bien. Ahora se ve bastante bien. Entonces vamos a movil patriota en movil Port riot. Parece que todo se ve muy bien y no tenemos que hacer nada. Bien, ahora da clic en publicar, como así, simplemente diseñamos la página A también. Ahora tenemos que configurar la página del blog y hagámoslo en la siguiente lección. 19. Configuración de página de blog: Bien, ahora vamos a configurar la página de bloque para hacer eso, podemos usar element o Ellas Builder. Debajo de las plantillas, aquí tenemos al Team Builder. Simplemente haga clic en él y ahora aquí, haga clic en esto en Nuevo. Al hacer clic en esto, aquí podemos ver todas y cada una de las secciones de nuestro sitio web que podemos editar. Tenemos que editarlos todos. Primero, editemos la sección de bloques. Aquí tenemos archivo. Si hago clic en este ícono de Info, aquí podemos tener la descripción. Así que aquí podemos crear la lista de bloques. Hagámoslo, haga clic en este icono más y aquí podremos obtener las plantillas preconstruidas. Si quieres, puedes usar uno de ellos, pero yo solo lo cierro y vamos a construirlo desde cero. Voy a dar click en este ícono más, Tex Box aquí, luego hacer este cero como valor y para el margen superior, hagamos 60 en elementos, aquí tenemos título de archivo. Simplemente lo agregaré y esto se ajustará automáticamente de acuerdo a la página. Aquí lo haré centro y cambiemos la tipografía a encabezado así Entonces otra vez, voy a dar click en agregar elemento y aquí tenemos arco fuerza solo trapar y soltarlo ¿Te acordaste de la última vez que hicimos lo mismo en la página principal y aquí podemos hacer lo mismo? Ahora aquí tenemos que ajustar el estilo para hacerlo primero, seleccionemos la piel como parte así, luego la columna será tres y deberíamos mostrar la imagen. Hagamos resolución de imagen como mediana grande para que podamos obtener imagen clara y tenemos que mostrar el título exerpt y excepto la longitud será, vamos a hacerla como dos Entonces si quieres, puedes mostrar la fecha y los comandos. Entonces en este caso, no estoy mostrando los datos ni comandos, así que simplemente lo eliminaré así y aquí podemos quedarnos el botón leer más, y aquí tenemos el lote. Entonces vamos a la paginación. Podemos establecer la paginación así o podemos usar este Escod infinito, lo que significa que al desplazarse por el sitio web, el resto de las imágenes se cargarán También aquí, no podemos agregar más mensaje post. Voy a mantener el mensaje por defecto. Si quieres mensaje personalizado, puedes usar esto. Bien. Ahora vamos a ir a eTyletap en ITyLETab, hacer pasar hueco de columna y un hueco también 20 alineación centro alineación y tarjeta, tenemos la sombra de trabajo y no voy a También en el contenido, necesito ocultar al autor. Aquí, balanceemos a este Atison porque no lo necesitamos. Ahora vamos al estilo en la tarjeta. Voy a mantener los datos por defecto para aquí. Vamos a la imagen y cambiemos el espaciado de la imagen. Hagámoslo como C y el color de fondo de la insignia será este color y el color del texto será de este color. Ahora en el contenido, el color del título será el color primario y el color de la fuente será, hagamos este subtítulo, entonces tenemos que cambiarlo a 21 Aquí serán 28, podemos hacerla semiv así Ahora en meta, no necesitamos preocuparnos por meta porque no agregamos ninguno. Después en el extracto, agreguemos el color del texto. También la tipografía será texto así y también podremos cambiar el espaciado y ahora tenemos que encargarnos del botón leer más Hagámoslo de color verde. El error tipográfico será botón, pero tenemos que reducir su tamaño Hagámoslo 16. Puedes comprobar este diseño y seguir ese mismo patrón de diseño porque tenemos que mantener la singularidad de la página en cada página No tenemos paginación y aquí hacen que este mensaje de nada libra color primario y es un poco como subtítulo Bien. Ahora todo bien. No obstante, el solo hecho de agregar este texto de archivo no es una buena idea. Vamos a crear un titular y subeding usando IA. Ahora estoy en nuestro chat de JG BT, aquí voy a decir, dame encabezado y encabezado o página de blog Aquí, copiemos este sub. En realidad, voy a copiar éste y cambiemos esto. Yo sólo voy a quitar esto. Tengo que quitarlo. Después da click aquí y agrega un titular como este, luego estilízala encabezado Men. En realidad, hagámoslo cabeza de subtítulo es dos B. Aquí necesito mostrar esto en dos líneas Lo que puedo hacer es agregar una etiqueta RO break como esta. Entonces duplicaré esto, luego vengo aquí y cambiaré tipográfico a texto y agreguemos este texto aquí mismo así Bien. Ahora necesito agregar algo de espaciado aquí para que simplemente pueda agregar el margen inferior como 20 así. Bonito. Ahora se ve bien. Ahora lo que puedo hacer es que puedo dar click en Publicar y ahora hago clic en Agregar condición. On Add condition, puedo incluir archivos de Earl, pero esto no es lo que necesitamos Tenemos que agregar post archive. Necesitamos mostrar solo publicaciones, hacer clic en el archivo de publicaciones y hacer clic en guardar cerrar. Ahora, ¿cómo acceder a esta página? En realidad, voy a ir a establecer y cambiar esto a anfitrión dio. Creo que esa palabra es correcta, pero no sé. Ahora bien, si vemos esto así, se va a mostrar pero eso no es lo que necesitamos. Necesitamos cuando hacemos clic en este bloque o cuando vamos a la página del blog que ya creamos, debería aparecer esta lista de bloques. Para ello, tengo que ir al Panel de WordPress. Vayamos al Panel de WordPress. Y en el tablero de Wordpress, aquí voy a ir a establecer y subestablecer, ir a Lectura Al leer, establezca las páginas de publicación del blog, luego haga clic en Guardar cambios. Ahora si lo reviso aquí, me pareció así. Mira, se ve bastante bien y automáticamente mostrará el siguiente conjunto de post o el post del blog. En realidad, si reviso esto, el espacio aquí es realmente pequeño. Necesitamos agregar espacio de bits entre esas dos secciones. Entonces para hacer eso, iré a Pie de página. Haga clic en Luego haga clic aquí y vayamos a Avanzar. En Avance, agreguemos el margen superior como 1220. De esa manera, tendremos un mejor espacio. A lo mejor vamos a agregarlo como 60 y dar clic en Publicar. Y ahora, si lo reviso en las señales la página de inicio, aquí podemos ver el espaciado y también en la página de registro, podemos verlo claramente aquí. Bien, ahora se ve bastante bien y no es así, tenemos que hacer más cosas. Como ejemplo, aquí en la página de inicio, tenemos categorías. Aquí están nuestras categorías. Aquí está la categoría. Si hago clic en la categoría, se muestra así y esto no se ve nada bien. Lo que tenemos que hacer es que tenemos que ir al Team builder debajo de ellos constructor, clic en forzado dio, y aquí voy a dar clic derecho aquí y dar clic en OpenNW ventana torre postal Entonces lo que puedo hacer es hacer clic en Nuevo e ignorar esto. Lo que vamos a hacer es si vamos a la página de categoría como esta o a la página de búsqueda como ejemplo, busquemos ABC. En realidad, no hay post ABC, busquemos impuesto. Cuando hagamos el impuesto al foco, se mostrará así, pero esto no es lo que queremos Tenemos que crear cada página archi para esas secciones. Hagámoslo. Hacerlo es realmente fácil. Primero, arreglaré problemas de capacidad de respuesta en este blog archiv Después de eso, sólo podemos copiar esto. Para ello, voy a dar click aquí y aquí tenemos que añadir el pad en vamos a la derecha Paden 15, relleno izquierdo 15. También este texto es demasiado grande para arreglarlo, ir al estilo en el contenido. Déjame ir a la página principal y revisarla también. Creo que en la página principal, lo arreglamos, pero tenemos que verificarlo y asegurarnos en la página principal, lo arreglamos correctamente. Veamos el contenido, la tipografía cambió a 21. Nosotros lo hicimos. Hagamos lo mismo aquí. Por aquí, el contenido y el título serán 21 así aquí también 2.1 0.1 será trabajo y el resto del texto está bien. El 21 real es demasiado pequeño, ¿no? No, está bien t's go to mobile and on mobile, se ve bastante bien. Aquí no hay nada que hacer. Estamos bien para irnos. Ahora lo que podemos hacer es simplemente copiar con razón. Entonces podemos ir a nueva página de archivo y podemos enfrentar esto. Entonces aquí tenemos que agregar título de archivo, no el título personalizado, tenemos que agregar este título de archivo así. Eliminemos este también borremos este y volvamos a hacerlo. Simplemente trapar y soltar el título del archivo así. Entonces uno d lo hace centrar y agregar subencabezado, luego aquí, veamos el tamaño del pin invit Son 20. Hay un fondo de margen como 20. Ahora puedo publicar esto. Cuando publique esto, tengo que agregar la condición, clic en agregar condición y luego aquí podemos establecer esto. Si lo configuro todos los archivos, se configurará en todas las páginas de archiv, lo que quiero hacer es agregar todos los archivos y agregar otra condición Entonces en esta condición, tengo que excluir post archive porque tenemos una página de archivo diferente para ello y también tenemos que excluir el resultado de búsqueda Archiv y después voy a hacer clic en Guardar y Cerrar Bien. Ahora aquí, si verificamos así en la búsqueda Archiv, no va a funcionar porque excluimos esa búsqueda Archiv p type Iré a la página principal y vayamos a nuestra categoría. En esta categoría, se muestra así y ve. Ahora lo que quiero hacer es agregar el campo de búsqueda. Si añadimos el campo de búsqueda para bloquear la página, podemos buscar en el post. Hagámoslo. Para hacerlo, primero los eliminaré a todos. Publiquemos esto y aclaremos la página así y vayamos al dashboard. En el tablero, tengo que ir al Elm Builder. En ellos Constructor, de nuevo, tenemos que ir al archivo. En realidad, se nos olvidó cambiar el nombre de esta página de archivo editar y aquí pongamos el nombre como oh Dios mío, y publicarlo. Bien, ahora volvamos. 20. Cómo añadir una barra de búsqueda: Bien, aquí en la página del post, tenemos que agregar o necesitamos agregar el campo de búsqueda. Vamos a hacer clic en Editar y aquí agregaré la búsqueda. Ahora agreguemos la barra de búsqueda aquí mismo. Aquí vamos. Aquí tenemos la barra de búsqueda. Aquí, puedo cambiar este texto si quiero, así lo voy a mantener así. Ahora aquí tenemos resultados. En estos resultados, podemos mostrar los resultados en vivo y te mostraré cómo se configura en la siguiente lección o después completar esta funcionalidad de búsqueda. Entonces tenemos consulta. En consulta, configuraré esta fuente como posts porque si configuramos esto como todos, mostrará las páginas de post y otras cosas que nuestro sitio web tenga, pero solo necesitamos buscar posts. Da click en las publicaciones y en la configuración adicional, no necesitamos preocuparnos por esto, y luego vamos a eTyleoeStyle, configuraré la tipografía de campo de búsqueda a texto como este, luego pongamos el color del texto y no tenemos También en foco, podemos cambiar el color del texto así. Entonces para el hueco entre entrada y botón serán dos así. Y luego en claro, no tenemos un icono así que no tenemos que configurarlo. Entonces para el botón enviar, color del texto será el color de fondo, y el tipo de fondo será secundario este color verde. Además, tenemos que establecer la tipografía a botón así. Entonces este radio de tablero de botón de búsqueda será cero y tenemos que agregar el relleno superior e inferior. En realidad arriba e abajo está bien. Tenemos que agregar el patrón correcto. Vamos a los 30 y a la izquierda también serán 30, tal vez 60. Agreguemos un 60. Será mejor porque necesitamos hombro aquí y en el botón y en unas duchas cambiar el color del texto será blanco y el color de fondo es el color primario así. También podemos agregar el efecto HA así. Ahora se ve bastante bien. Si queremos, podemos agregar instrucción como post de búsqueda, pero no voy a hacer eso, así que iré a avanzar avanzar vamos al fondo Patmus 20 Tendremos espacio para respirar así. Ahora se ve bastante bien. Ahora voy a hacer clic en Publicar y tenemos mucho más que hacer, pero probemos esto para probar esto , voy a aportar cambios y vamos a la página del blog y aquí voy a escribir impuesto y dar clic en Osearch Cuando hago clic en CSearch tiene todos los detalles o todo el post que se relaciona con impuestos, pero tenemos que crear el campo de búsqueda Archiv y hagámoslo Para hacerlo, tenemos que ir al Team Builder Team Builder, vamos a Plantillas Team Builder y ahora tenemos que crear la página de búsqueda Archiv Para ello, haga clic en adn y haga clic en Archivo. Y aquí, vamos a eliminar esto y sólo podemos obtener esta sección sólo hay que copiar y pegar. Bien. Ahora lo que tenemos que hacer es agregar texto, así duplicaré esto y luego lo pondré aquí abajo. Aquí debería estar aquí. Entonces vamos a cambiar esta alineación así y hacerla párrafo y eliminar este texto y dar clic aquí y establecer este Archiv o Archiv tit Se mostrará el título del archivo aquí y vamos a ir a E tyle en Es style. Vamos a cambiar la tipografía, vamos a 21 y aquí hacemos este montaje y aquí 26 va a estar aquí vamos Esta es una etiqueta dinámica. Recuerda, nosotros en el título del archivo. Este título de archivo es similar al título de la página. Como ejemplo, si buscamos pistas aquí, este será el título del archivo o el título de la página. En este caso, no va a estar aquí en este caso, se mostrará Ahora quiero tomar aquí y establecer el título búsqueda archivo. ¿Recuerdas que no configuramos página de búsqueda cuando la publicamos aquí en condición? Aquí tenemos resultados de búsqueda. Cuando configuramos toda la página de archivo, no configuramos esto. Eso es porque necesitamos una página separada como esta para hacerlo. Ahora hago clic en SavanClos y se publicó. Ahora si lo reviso, si acabo de reprimir esta página, será así Intentemos copiar esta sección. Ahora veamos que busca a la perfección. Ahora como siguiente paso, en realidad tengo que comprobar la capacidad de respuesta Aquí puedes ver que la capacidad de respuesta no se ve genial. En la versión tablet, es perfecta y en el móvil, hagamos clic aquí y vayamos al estilo en el botón Enviar de Etyle, tenemos que enviar por correo esto como 20 todos 20 Seguramente, hagámoslo cero y será de 15 por 15 así. Y también, aquí tenemos el ícono claro, y este es el ícono claro. En realidad, podemos cambiar su color así. Y si quieres, podemos cambiar el tamaño del icono. Entonces aquí está ese icono. Simplemente lo olvidé. Bien. Ahora se ve bastante bien. Ahora publícalo. En realidad, voy a copiar esta parte y en la búsqueda Aga tenemos que darle un ritmo al estilo así. Bien. Ahora publícalo y a continuación tenemos que configurar esto. Vamos a hacer clic aquí resultados. Para configurarlo, voy a cavar resultados y dar clic en Mostrar aquí tenemos que crear un resultado temporal en vivo media cuando busque así, el resultado se mostrará aquí. Se mostrará en tiempo real. Para ello, voy a hacer clic en reattemplate, concepto aquí, cambiemos esto a resultados de búsqueda en vivo Da clic aquí xbox y agrega el ex box así, luego quita tu STA. Para relleno vamos a Padins seis. Ahora aquí tenemos que agregar el grifo que necesitamos mostrar. Primero, necesitamos la imagen destacada, haré 300 por 300 y luego lo que necesitamos mostrar es post title. Si queremos, podemos mostrar el extracto del post, pero no mostremos el extracto del post Si quieres, solo puedes agregarlo así y no voy a hacer eso, así que lo eliminaré. Ahora voy a dar click aquí y vamos a la maquetación. La dirección del diseño será horizontal y esta imagen debería estar aquí, luego haga clic aquí, luego cambie la tipografía a texto como este y esta imagen se vea bien Entonces lo que tengo que hacer es que tengo que agregar border bottom porque esto cargará artículo así porque el post se cargará así horizontal. La primera fila está aquí, la segunda fila está aquí. Vamos a hacer clic en contenedor principal un estilo que llamamos frontera. El borde es sólido y se molestan con, vamos a llegar al borde el color será de este color y en realidad solo necesitamos fondo, solo necesitamos el borde inferior así y hagamos esta pequeña ceniza incolora así. Esto es y no es así. Tenemos que agregar el enlace, lo que significa que al hacer clic en esta imagen o en este texto, debe ser redirigido a la publicación en particular. Para ello, haga clic en. Hagámoslo primero para la imagen, haga clic en la imagen. Haz esto como URL personalizada y aquí en etiqueta dinámica y aquí, haz clic en PostrLT es etiqueta dinámica y post URL también habrá, hagamos lo mismo para este texto aquí, podemos publicar fácilmente bien y el color del texto en primaria, vamos a mostrar el color primario en normal en el borde sobre Hagámoslo secundario así. Bien, ahora hago clic en publicar y volvamos aquí. Después daré click en publicar, y aquí buscaré aquí Plantilla de resultados de búsqueda en vivo que acabamos de crear, solo selecciónela y publicarla. Entonces probémoslo. En realidad, tenemos que probarlo en Live que está justo aquí. Cuando lo hacemos, aquí está el resultado, pero no se ve nada bien. Cambiemos el diseño para cambiar el diseño, aquí, iré a eTyleoeStyle ahora tenemos En el resultado, agreguemos el color de fondo. Agreguemos este color como color de fondo. Agreguemos sombra de caja pequeña. A no lo agreguemos. Busquemos como etiqueta aquí. Ahora podemos cambiarlo en el diseño comprobando el diseño. Primero haré la distancia desde el campo de búsqueda como cero y el radio de negrita será relleno cero, hagamos padding como cero. Si queremos, podemos cambiar el ancho del impuesto. Con el resultado así. Pero mantengamos anchos el tiempo. Campo de texto así, esa es la mejor manera, y la brecha entre fila será cero y gap entre columna, no tenemos columna, y esta es la. El resto del diseño, podemos cambiar usando la página de resultados de búsqueda en vivo así que haga clic aquí y primero comencemos con la imagen. Bien. Vamos a la alineación de estilo quedará, y vamos a agregar ancho como 100%. Y para el contenedor, vamos a justificar los artículos, alinear el centro. Hagamos ancho completo, y luego veamos. Vamos a hacer clic en publicar y vamos a probarlo de nuevo. Impuesto. Todavía es más grande y las imágenes no están alineadas correctamente o tienen diferentes tamaños. Tenemos que arreglarlo y cambiar el tamaño de la imagen. Para ello, voy a ir a aquí y vamos a agregar un contenedor aquí mismo. En el contenedor, hagamos margin y padding un cero, luego agreguemos la imagen y en contenedor, agregaré contenedor con un 40 y luego duplicaré el contenedor, y aquí tenemos que no presentar imagen. Tengo que duplicar el contenedor así, luego quitar la imagen de aquí y en el título de la pose. También haz esto con como 60. Y el entre tamaño, vamos a hacer entre tamaño como 50 tal vez este tamaño será 30 será trabajo 30 será trabajo, y aquí, haz esto 70 y haz clic en CPablish y veamos la vista previa ahora mismo. Dejemos de lado este trabajo. Etiqueta de búsqueda E. Ahora las imágenes están alineadas correctamente, pero aún así el tamaño de la imagen es demasiado grande. Para arreglarlo, vayamos al archivo forzado y necesito hacer esta imagen más pequeña. Intentemos hacerlo desde aquí. Cambiarlo con 50% y aquí el tamaño del contenedor será también entonces vamos a contenedor y en contenedor, no, tenemos que ir a contenedor sobre contenedor, hacerlo centro. Centro así. Hagamos max con ácido agregar Centro de Alineación aquí. El radio del agua será cero, y veamos si funciona. Vamos a tener tanques post cueva. Por último, ahora se ve mucho mejor. Ahora tenemos este espacio, así que no va a funcionar. Lo que podemos hacer es que podemos hacer clic en el contenedor y eliminar el máximo así. En realidad, sin cambiarlo, cambiemos el tamaño de este contenedor. A lo mejor vamos a agregarlo como 50 y probemos ahora. Esperemos que funcione. Por último está funcionando. Lo que hice es simplemente mantener el tamaño de la imagen destacada como 100% y aquí cambio este contenedor a 15% así y este contenedor será vamos a hacerlo así. Voy a autocompletar y hacer clic en publicar y ahora se ve bastante bien C. Tanques. Y ahí puedes agregar muchas cosas. Como ejemplo, se puede agregar el EAP. Entonces lo que podemos hacer es que podemos ir aquí y clcpas icono aquí en post exp e ir a Estilo y primero hacer clic en estos ajustes y en configuración, agregar longitud Exap ya que tal vez 15 Y de antemano si quieres, puedes agregar más cosas. Después en Etyle hagamos una línea lave y cambiemos la tipografía Hagámoslo como s 60. Hagamos este espaciado como 15 y agreguemos el color del texto como el color ceniza. Entonces podemos publicar y veamos el diseño ahora mismo es a donde lo acabo de publicar, pero no pasa nada. Impuesto. No aparecí, vamos a lamer y menos buen contenido Hagamos que esto se aplique para posar contenido y veamos si connota texto texto fiscal Ahora aquí vamos. Aquí está el extracto, y aquí está el texto, también, aquí agregamos mucho espaciado esto como seis no cero Vamos a hacerlo. Sí, hagámoslo un cero y en este contenedor, hagamos este O como sixk Ahora publícalo y hagamos clic aquí en búsqueda Oh. Aquí vamos. Aquí está el diseño final. Y si quieres, puedes probar más ideas y hacer esto mejor, pero esto es bueno para mí. Y ahora tenemos página de búsqueda hecha, también resultado de búsqueda en vivo hecho. Ahora tenemos que agregar la misma funcionalidad a esta búsqueda Archiv solo agregamos a la copia forzada de archiv y venimos También aquí, tenemos que ir al resultado abrir y escuchar la búsqueda de búsqueda porque tenemos que configurar la plantilla y dar clic en Fablsh ahora si vamos a la página de resultados de búsqueda, y vamos a probarla Cuando lo probemos, le va a gustar esto. Bastante bien. Siguiente paso, tenemos que editar el single post, y hagámoslo en la siguiente lección. Actualmente, si vamos a finanzas personales, lo veremos así y texto, lo veremos así. En la siguiente lección, si hacemos clic en este único post, necesitamos cambiar este diseño. Hagámoslo en 21. Diseño de publicación de blog individual: Bien, ahora diseñemos esta plantilla de publicación de blog única. Para hacer eso, iré al panel de WordPress, o al panel de WordPress. Entonces aquí vamos a Team Builder. Dentro de Team Builder, haz clic en Nuevo, y aquí tenemos un solo post. Haga clic en él. Aquí vamos. Voy a quitar este porque no lo necesitamos. Después primero, voy a dar click aquí y crear una caja Plex como esta. En realidad, vamos a crear dos columnas uno porque no creamos e estructura de dos columnas, así que vamos a hacer clic aquí y vamos a crear este tipo de una. Sin embargo, podemos hacerlo manualmente. Pero vamos a dar click aquí y vamos a quitar todo el margen y los rebordes y hagámoslo aquí, lo mismo también Hagamos lo mismo aquí. Bien. Ahora en la parte superior, agreguemos el margen superior como 60. Ahora primero, tenemos que agregar el título de pose. Agrégalo y luego tenemos que agregar el contenido del post. En realidad, antes de publicar contenido, tenemos que agregar la imagen característica así y luego en la parte inferior, agreguemos post navigation, así navegará post anterior y siguiente después de que agreguemos en todo esto, podemos hacer el diseño entonces antes de eso, necesito agregar botón Compartir. Aquí, tenemos juego de botones para compartir. Vamos a agregarlo así y luego si permites que los usuarios comenten, puedes agregar la sección post comando así y antes de eso, voy a agregar la sección post. En esta sección de post, obtendremos post agregado. Ahora comencemos a diseñar. Antes de diseñar, agreguemos todo el contenido que planeamos agregar a la barra lateral. Para esta barra lateral, agregaré búsqueda. En realidad, podemos obtener la barra de búsqueda desde aquí, solo correctamente copiar. Aquí está la barra de búsqueda de post arch. Después pegarlo así. Tenemos que cambiar el diseño, y después voy a añadir post set así. Bien. ¿Qué más? Esto es suficiente por ahora. Si tienes más cosas como autor, si quieres agregar los detalles del autor, podemos agregar orthobox así Y sí, agreguemos también orthobox. Entonces de esa manera, se puede ver claramente aunque no lo agreguemos aquí, pero si lo agrego, se puede ver claramente cómo usarlo. Bien. Ahora tenemos que editar el diseño. Así que comencemos desde el tema de espaciado. Entonces aquí necesitamos tener un espaciado de esas secciones, clic en el contenedor principal e ir a disposición en la masa de columna 20. Entonces vamos a encargarnos de este encabezado ir al estilo. La tipografía izquierda será subtítulo así. Entonces la imagen, la imagen, no necesitamos hacer nada. Lo haré completo y para este texto, haré alineación a la izquierda y el color del texto será texto, y el tipograma será este texto así Bien, ahora vamos aquí y aquí, podemos agregar el botón Compartir, así que hagamos clic en el botón Compartir y agreguemos Pinterest, duplicado, Twitter, no huevo de twitter agreguemos solo esas cosas. Si quieres, puedes agregar otros, y aquí puedes cambiar el diseño. Diré que el tipo de degradado es cuadrado, la columna estará en alineación URL de destino izquierda, página actual, y un estilo, no necesitamos hacer nada Ya se ve bien. Después por adelantado, agregaré margen inferior como 60. Ahora tiene más espacio también. El top es 30, 33 30, así. Ahora tenemos que editar este botón anterior y siguiente para hacerlo, ve aquí. Y si tu como la etiqueta, puedes ocultarla, pero yo la voy a mostrar y vamos a mostrar la flecha para azulejo y también este borde. Entonces pasemos al estilo E en E tyle. El color de la etiqueta será este color verde y la tipografía será la tipografía de botones y hagámoslo 16 O 18 serán trabajo. Entonces, post title color será también este color y el texto será este, pero tenemos que reducirlo como 12 12 va a funcionar y flecha, el color de flecha también será este color verde o podemos agregar color gris claro como este y voy a dar el tamaño por defecto. La frontera se verá así. Si queremos, agreguemos algo de espaciado como este. Bien. Ahora se ve bien. Traday hubo fuertes lluvias, así que dejé de grabar Entonces, continuemos. Y lo que hicimos es agregar el Her color o dgo color a este elemento de navegación post Así que repasamos todos esos artículos y agregamos el borde del color. Bien, ahora subamos y comencemos desde aquí. Bien, ahora entonces tenemos que encargarnos de esta sección. Fácilmente lo que podemos hacer es ir al dashboard de la palabra prensa. Entonces en realidad tenemos que visitar el sitio y voy a lamer en editar con elemento o. Podemos copiar fácilmente Este es un elemento post. Entonces en homepage, aquí tenemos el mismo elemento post. Lo que voy a hacer es hacer clic derecho a copiar, ven aquí, clic derecho y pegaré el estilo. En realidad, hagámoslo tarjeta. Cuando la hago tarjeta, el diseño cambió. Bien, ahora lo que hago es cambiar el recuento de columnas a dos y tendremos dos columnas publicadas y post por página también serán dos. Mostrar imágenes, y vamos a mantener toda la información, y aquí voy a eliminar metadatos y comentarios y la longitud del extracto será, vamos a hacerlo como 50 y mostrar leer más, que será categoría, y lo importante es En consulta, lo que podemos hacer es establecer la fuente como puertos y la fecha será todo el orden será aleatorio. Entonces, cuando alguien visite este post, tendrá un azar de dos posts y paginación ninguno, no necesitamos preocuparnos por la paginación, y este contenido también se completa Entonces lo que podemos hacer es ir a la sección de comandos. No voy a usar la sección de comandos para este blog, pero te voy a mostrar cómo mejorarlo. Entonces aquí, da clic en este icono de lápiz y en comando aquí tenemos una piel, seleccionamos los comandos del tema, y la fuente será forzada actual de antemano. No tenemos muchas cosas que hacer, pero aún así los enlaces y el color de los botones no son los mismos que nuestro color de tema. Para arreglarlo, voy a dar clic aquí y hacer este borrador de guardado y vamos a ir a stsetting En el ajuste lateral, tenemos que darle estilo a este tema. Entonces para hacer eso, vamos a la tipografía Hagamos el color del texto del cuerpo como texto, y la tipografía será ver si cuando ID lo haga, cambió y espaciado tipográfico, simplemente lo dejaré como está, y aquí los colores de enlace serán este color en HO vamos a hacerlo primordial así y la tipografía también será misma y luego tenemos este botón de comentario aquí si quieres, puedes seleccionar la tipografía así, pero no voy Voy a guardar los cambios aquí y aún tenemos que arreglar los colores de los botones para hacer eso, voy a volver y aquí tenemos botones. En los botones, diré el tipo de botón gapio y en el color de texto normal será color de fondo y el color de fondo será color secundario y no tenemos radio de borde Además no tenemos un tipo de borde, y tenemos que sumar los rebordes y el margen Hagamos el pase superior 15, 22, 15, 22, así. Si quieres más espacio, puedes agregarlo, pero lo voy a mantener así y al borde sobre, el color del texto será color marrón empacado, y el tipo será color primario así. Bien. Así es como lo podemos hacer, y ahora podemos dar click en Guardar cambios y dar click en volver a Editar Bien. Como te dije antes, voy a quitar esto porque no lo necesito. Yo sólo te lo muestro para. Si necesitas agregarlo a tu sitio web, puedes seguir los pasos. Ahora aquí tenemos el perfil del autor en el perfil del autor. Podemos hacer el layout como queramos, y aquí vamos a Etyle. Yo me quedaré con la imagen. Voy a mantener la configuración tal como está, y el nombre será vamos a hacer el color primario y la tipografía será botón Conservemos el texto. Hagámoslo tamaño de botón. Como esta biografía toma tipografía con este texto y botón, actualmente, no vemos un botón, así que mantengámoslo En realidad, tenemos que agregar nuestros datos de usuario para que esto se vea mejor. Así que hagámoslo después de completar el resto del diseño, y ahora aquí tenemos la barra de búsqueda, da clic en ella, y vamos al botón de envío de eTyleoEtyle Tenemos este acolchado. Eliminemos completamente así, entonces hagámoslo ya que seis por seis o 12 por 12 va a ser mucho mejor. Ahora bien esto es bastante bueno también en versión tablet, se verá así y está bien. Entonces iré a la versión de escritorio y aquí tenemos otro conjunto de postes de bloque. Lo que podemos hacer es agregar el diseño de un poste de bloque. Este diseño de publicación de bloque para conseguirlo, hago clic en Editar pie de página, copiar, ven aquí, ritmo de este estilo. Entonces lo que voy a hacer es ir a la tarjeta de Skins. En realidad, la piel es clásica veamos. La piel es clásica, columna es una, la página postra es tres Hagamos esas columnas es 14 por página. Mantengámoslo como seis. Y llamemos a esas dos cosas. No necesitamos mostrar el extracto, y además no necesitamos mostrar el botón leer más en el Estyle, vamos al contenido, vamos al contenido, y aquí el color de fondo es el blanco Hagámoslo de color oscuro así. Ahora está bastante Bien, ahora tenemos una publicación de blog única supercool Lo que podemos hacer es que podemos hacer clic en publicar en condición y en incluye, tengo que seleccionar estas dos publicaciones, y aquí hacer que todo publique y haga clic en Guardar y Cerrar. Todo bien. Ahora vamos a nuestro sitio web de WordPress y vayamos a leer MotorAd el post, y aquí vamos Aquí tenemos la entrada del blog, y se ve como queremos que se vea y vea, esto es bastante genial, y aquí tenemos ajustarnos para hacer eso, tenemos que ir al dashboard de WordPress. Vamos al panel de WordPress y en el panel de WordPress, iré a usuarios y perfil. Aquí en el perfil, tengo que entrar a esos S. voy a agregar esos SF, voy a agregar el primer nombre John Doe y apodo será Edwin Este nombre de obra será John Doe. Y aquí vamos a ir a JGPT y buscar dame información biográfica para este En realidad, tenemos que añadir el nombre. Su nombre es John Doe. Bien, aquí, vamos a copiar este y pegarlo aquí, entonces necesitamos tener una función de perfil. En realidad, tenemos que conectar este sitio web con Gravata para hacerlo. No lo voy a hacer, así que voy a dar click en Actualizar Perfil y luego si voy aquí y vamos a publicar, Oh Dios mío. Aquí tenemos toda la información sobre el autor. Pero es demasiado largo, lo que podemos hacer es que podemos ir al tablero y construir equipo hacer clic en este elemento de publicación única. En realidad tenemos que cambiar el nombre. Cambiémosle el nombre aquí, haga clic en el icono de configuración y digamos publicación de un solo bloque o publicación única y aquí, haga clic en este Avatar y vayamos al estilo hagamos que este texto de biografía sea como 40. No, aún así es demasiado. En realidad, lo que podemos hacer es que lo podemos poner aquí abajo así. Entonces de esa manera, los visitantes pueden leer sobre él. Además, si quieres, puedes agregar el botón de archivo para que puedas ver todos los post de esa persona aquí, aquí, Jack. Agreguemos etiqueta dinámica. Agreguemos el nombre del autor de la publicación, y haga clic aquí. Y en antes de AddRD y después del apóstrofe S, post leído es cara, John Ahora aquí voy a ir a Etyle en Etyle Martin, cambiemos el color del texto al color de fondo Y el color de fondo será color secundario y la tipografía será botón Es demasiado grande, así que vamos a tamaño de texto como 16. Ho, hazlo primario así. No, en realidad, esto debería ser esto y el color de fondo debe ser color primario así. Voy a mantener el desvanecimiento predeterminado, así que aquí está la manera de mostrar los detalles del autor Si publicamos esto y vamos a ir aquí aquí todavía no lo actualizaba, pero por alguna razón, no se está actualizando. No obstante, si hacemos clic en ese botón, iremos a esta página de arco. Ahora se completa la parte del poste de un solo bloque y se completa la mayor parte del trabajo. Ahora tenemos que crear la página de contacto. Hagámoslo. 22. Diseño de la página de contacto: Ahora vamos a crear la página de contacto. Para ello, iré a la página de Contacto y haré clic en Editar página. Entonces desde aquí, da clic en Editar con elemento y voy a ir a ChagBT y decir, me contenido para la página de contacto Así, debería ser contacto. Nosotros y esto es un registro financiero. Digamos, bonito. Ahora agreguemos esa información. Para ello, puedo ir a página diferente. En realidad, vamos a ir a la página y dar clic en Editar con Elementor y desde aquí, podemos copiar esta sección De esa manera no necesitamos construirlo desde cero. Y luego vamos a copiar este texto, colocarlo aquí, copiar este texto. Bien. Ahora tenemos que ponernos en contacto con parte y asociaciones y colaboración de invitados. Vamos a agregar esa información. Primero, creemos la columna de fila de dirección y eliminemos todos los márgenes y rellenos y agreguemos el pase superior del margen uno al 20 Después haré clic aquí y agregaré el contenedor. Además, eliminemos el margen y el relleno en ese contenedor. Después da click aquí y agrega un titular. Este titular se pondrá en contacto, lo copiará, lo pegará así, irá a Estyle align hasta que nos vayamos, la tipografía será Entonces tenemos que agregar este teléfono de correo electrónico y horario de oficina. Para ello, iré aquí y buscaré la lista de iconos. Aquí vamos solo arrastrarlo y soltarlo así. Entonces aquí cambia este ícono a nlop. Consigamos esto en realidad. Consigamos este y luego tenemos que agregar el correo electrónico. Vamos a recibir este correo electrónico. El correo electrónico se invocará en el sitio web personalizado design.us y también en el enlace si lo desea, puede agregar correo dos y dirección de correo electrónico Creo que esto debería ser correcto búsqueda de información Correo dos en Google. Correo para trabajar así. Se Niza. Cuando alguien haga clic en este icono, abrirá este correo electrónico, abrirá el buzón de correo electrónico, y luego tenemos que agregar la ubicación, la ubicación es el número de teléfono. Vamos a agregar este número de teléfono. Esta es una página uno. Simplemente agregaré ya que es buscar teléfono y agregar el número de teléfono aquí mismo, entonces tenemos que agregar el horario de oficina. Copia el horario de oficina y aquí busca lolock de oficina a un reloj Bien, bastante bien. Ahora, entonces lo que tenemos que hacer es copiar esta asociación y las contribuciones de los invitados y lubricar esta y ponerla aquí mismo, pegarla así Después copia este y pégalo aquí mismo y en este estilo, haz la alineación a la izquierda y aquí, copia el texto, pega el texto. Bonito. Ahora voy a crear un nuevo contenedor, dar clic aquí y agregar ese contenedor aquí mismo. En realidad, tengo que agregarlo aquí mismo, clic aquí y agregarlo así. Bien. Ahora está en este segundo contenedor, pero lo queremos aquí, aquí mismo. No aquí en realidad aquí. Bien. Ahora aquí, voy a cambiar los márgenes y relleno y copiar éste, pegarme dentro, y aquí enviarnos un mensaje a este texto, enviarnos un mensaje y copiar esta parte y pegarla así y en este texto así, entonces aquí buscaré formulario en formulario, solo arrástrela y soltarla así. Y aquí vamos ahora en formulario, voy a buscar lo configuro como formulario de contacto. Y aquí necesitamos nombre debe ser requerido colocado Vamos a colocar un lugar de soldadura en el que va a nombrar aquí, entonces email email Presder será menor que la dirección de correo electrónico esta presionarlo así Entonces mensaje, no etiqueta marcador de posición en las pilas no no ninguna sugerencia Ahora también podemos agregar un tema. El tipo de texto debe ser texto y aquí la etiqueta será asunto y marcador en el ingrese el asunto del correo electrónico como este y irá justo aquí arriba Esto es bastante bueno, y si quieres, puedes agregar más campos de correo electrónico, y en Advancetting, puedes establecer el valor predeterminado a cada correo como ejemplo en mensaje, necesito agregar halo solo puedes agregarlo cuando agrego, automáticamente se agregará al buzón Y agradable. Además, queremos mostrar la marca requerida, y este mensaje debería ser requerido así y el botón está bien. Entonces si queremos, podemos cambiar este texto del botón de envío, pero no voy a hacer eso. En acción después de enviar será la presentación de la colección y el correo electrónico. Entonces, en el envío de la colección, podemos recopilar los datos de este formulario en el formulario de envío de recopilación que se encuentra debajo de Elementor y envíos y luego en el correo electrónico, aquí podemos configurar los dos correos electrónicos Entonces, cuando alguien hace una pregunta, puedes enviarla directamente a tu casilla de correo electrónico. Y aquí como mensaje, si agregamos todos los campos, podemos obtener los todos los campos. O si quieres específicamente un campo, puedes ir a cuatro campos. Pensemos que necesitamos este nombre. Entonces vamos a avanzar y podemos copiar el código corto y venir aquí. Entonces en el correo electrónico, podemos simplemente tach su nombre es el nombre, dos serán nuestro correo electrónico y el baile de graduación será la persona que envió este correo electrónico Ya creé cómo configurar correos electrónicos y SMDB. Si no los revisaste, lo agregaré después de esta lección y después de configurar todas esas informaciones, podemos ir a Estilsotils, podemos cambiar Hagamos hueco de columna como 15 y el hueco de fila debe ser 15, no hueco de columna. Hagámoslo como dos. Entonces etiqueta es espaciado. Hagamos este espacio para etiquetar. A lo mejor seis funcionarán. Sí. Y si quieres, puedes cambiar el color del texto. Y si quieres, también, puedes cambiar la tipografía Entonces aquí voy a hacer esto como un poco pequeño como 18 y la noche de línea también será 18 y llenaré el borde con lo haré como cero. En realidad, necesitamos una frontera. Uno y aquí primario, entonces el radio del borde será cero así, y hagamos este pequeño color ceniza así. Bien. Entonces vamos a botón. El botón está todo bien. Nada que hacer. Entonces en el mensaje, podemos decir mensaje de éxito en verde, mensaje de error en rojo en línea color del mensaje será este color. Esto debería ser rojo. Bien. Ahora no necesitamos preocuparnos por los pasos porque solo tenemos forma simple. Ahora podemos publicar esto y si es así, aquí está el formulario, y ahora si relleno el formulario, luego haga clic en consentimiento, obtendremos el enviar mensaje. Además, podemos cambiar esos mensajes si quieres cambiar esos mensajes, vamos a opciones adicionales y en mensaje personalizado, puedes agregar mensajes personalizados, y yo no voy a hacer eso. Vamos a la página de envío y en la página de envío, aquí está el mensaje de prueba que acabo de enviar. Ahora sí tenemos la página de contacto y el blog en pleno funcionamiento como siguiente paso si planeas conseguir Google Adsens o planeas publicar anuncios, tienes que tener páginas de términos y condiciones y política de privacidad Yo siguiente lección, te voy a mostrar como generarlos 23. Crea un correo electrónico y configura SMTP: Hazlo, iré a mi cuenta de chip de nombre. Debes ir al HSTMPvider y acceder al panel C. Así que aquí solo hago clic en aquí y da clic en Ir al panel C. Bien, redirijo al panel C y al panel C, así que si no usaste Name JP, no importa. El panel C es el mismo en todos los proveedores de HoStem. Puede que tenga algunos cambios, pero es bastante similar. Y si no tienes cuenta de correo electrónico o si eres proveedor de servicios, cuenta de correo electrónico, tienes que contactarlos y obtenerla de ellos. Entonces en nombre Jsi ya nos llegan los correos electrónicos. Entonces si me desplazo hacia abajo, podemos aquí cuenta de correo electrónico, o simplemente podemos buscar aquí correo electrónico. Aquí vamos. Bien. Desde aquí, sólo voy a hacer clic en la cuenta de correo electrónico. Bien, aquí, tengo mis viejos correos electrónicos. Desde aquí, solo hago clic en Cre y aquí solo selecciono la URL de nuestro sitio web, y para usar Nombre, agregaré info y vamos a generar una contraseña Entonces voy a generar una contraseña y volveremos. Todo bien. Ahora hago clic en Concrear el correo electrónico será info en diseño de sitio web personalizado punto, así puedes agregar cualquier nombre o cualquier nombre aquí como ejemplo, si eres Joan, puedes agregar Joan en la URL de tu sitio web, y ahora hago clic en C Crear Bien. Necesitamos otro correo electrónico para agregar como dos correos electrónicos. De correo electrónico será info, y vamos a crear dos email como Vamos a seleccionar el dominio, y voy a añadir mi nombre. Bien. Entonces configuraré la contraseña así. Bien, entonces hago clic en crear. Bien, ahora tenemos esos dos correos electrónicos. Vamos a establecer esa información. Entonces, antes que nada, vayamos a los complementos y hagamos clic en Agregar nuevo complemento. Y aquí, busquemos WP mail SMTP, no correo principal. Correo. Todo bien. Aquí está el plugin y es compatible con nuestra versión de WordPress. Haga clic en Instalar ahora. Todo bien. Ahora, da clic en Activar. Simplemente voy a hacer clic en volver al tablero de instrumentos. Bien. Ahora aquí tenemos el escenario. Además, podemos probar si nuestro correo electrónico funciona correctamente o no. Si vamos a herramientas sobre herramientas, aquí tenemos prueba de correo electrónico, y aquí podemos agregar nuestra dirección de correo electrónico y hacer clic en enviar correo electrónico, entonces se dice que hay un emisor detectado Sin embargo, este correo electrónico del sitio funciona antes. Veamos si esta vez nos llega el correo electrónico. Bien, acabo de iniciar sesión en mi cuenta de Gmail y no estoy viendo el correo electrónico, lo que significa que este plugin rompe la funcionalidad de correo electrónico de mi sitio web. Entonces vamos a arreglarlo. Entonces primero, iré a ajustes en la configuración aquí, tendré que configurar el correo electrónico del baile de graduación. Entonces nuestro correo de graduación será este. Copiarlo y el ritmo del pmmail aquí. El correo de Prom significa correo electrónico que enviamos correos electrónicos desde este sitio web, y luego aquí forzar el correo electrónico de Prom, hacerlo encendido, y aquí podemos establecer el nombre. Voy a mantener el nombre por defecto, y voy a mantener los datos por defecto. Después en correo Iwa el SMTP. Bien, aquí tenemos que agregar el host SMTP. Entonces, consigamos esa información. Para obtener esa información, solo puedo ir al Panel C y aquí está nuestro correo electrónico, y simplemente hago clic en Conectar Dispositivos. Bien, aquí tenemos toda la información. Primero, necesitamos host como host, usaré esta dirección de correo electrónico. Vayamos aquí y agreguemos host como nuestra dirección de correo electrónico actual. Entonces para el cifrado, seleccione SSL, y aquí el bote SMTP es 465, host SMTP debería ser este servidor saliente Simplemente copiarlo y pegarlo aquí, no la dirección de correo electrónico, y SMTP use name será el correo electrónico el usuario y aquí la contraseña a la cuenta de correo electrónico ¿Recordaste que cuando creamos una cuenta de correo electrónico, simplemente creamos la contraseña para ello a esa contraseña, el ritmo de la contraseña? Bien, la autenticación se activa, luego hago clic en Savesetting Entonces, si usas Google Workspace u otro proveedor de correo electrónico, simplemente selecciona el mailer que usas y configura los detalles En este caso, estamos usando SMTP del servidor, así que configuré esa información Bien, vamos a las herramientas y aquí tenemos algún problema, refrescarlo. Bien, aquí en el enviar al correo electrónico y haga clic en SendMil veamos qué pasará Por alguna razón, el sitio web no se está cargando, pero esperemos que esto funcione. Bien, dice éxito y aquí está el mensaje de advertencia, y por ahora, vamos a ignorarlo. Entonces ahora aquí tenemos el correo electrónico. Si sigues el mismo paso que utilizo, podrás solucionar con éxito el problema del correo electrónico que no envía. 24. Creación de páginas de Política de privacidad y Términos y condiciones: Ahora tenemos que crear la página de política de privacidad, también página de términos y condiciones. Para ello, hay dos métodos. El primero es ooe AI HAG PT y te dicen bloquear nicho y otras cosas que haces y dejar que AI genere tu contenido cuando generes el contenido o la página de privacidad y la página término y condición, tienes que revisar minuciosamente el contenido y agregarlo al sitio web y el siguiente método es usar términos y condiciones o generador de políticas de privacidad Usemos el generador de Políticas de Privacidad e intentemos crearlo. Acabo de buscar generador de Políticas de Privacidad en Google y aquí tengo un par de resultados, y aquí voy a ir a esta política de privacidadgenador punto info sitio web, y aquí tenemos que seguir el paso Primero, seleccionaré la versión como sitio web. Entonces cuando continúe aquí, tengo que agregar la URL del sitio web y el nombre del sitio web. Y aquí voy a añadir soy un individuo. Si eres un negocio, puedes agregar el negocio y aquí agregar la información. Entonces puedes ingresar al país. Entraré a mi país y daré click en el siguiente paso. Y si recopila información personal de los usuarios, puede agregarlos aquí. En este caso, tenemos formulario de suscriptor, lo que significa que recopilamos la dirección de correo electrónico y también podemos crear nombre y apellido en el formulario de contacto. Y luego hago clic en el siguiente paso, y aquí tienes que mencionar la forma en que otras personas o visitantes pueden contactarte. Utilizaré el método como correo electrónico y agregaré el correo aquí, luego hago clic en el siguiente paso. Y aquí, si quieres utilizar esta política de privacidad profesional, tienes que pagar así que voy a hacer clic en No, no quiero una política de privacidad profesional y da clic en el siguiente paso. Y aquí tengo que añadir Dirección de correo electrónico, entonces recibiremos el código. Simplemente agregue en la dirección de correo electrónico y haga clic en generar. Todo bien. Aquí está la página de política de privacidad y desde aquí, podemos copiar el texto o versión HTML, o puede copiar este enlace y directamente en ese enlace. La mejor manera es crear tu propia página. Vamos a hacerlo. Ahora voy a aquí nuestro blog y todas las páginas. Y aquí voy a dar click en la página y título de esta página será política de privacidad, después hago clic en editar con Elementor y además abriré página sobre página para poder copiar el diseño desde ahí Entonces voy a dar click en editar con Elementor y aquí está. Yo sólo voy a copiar esta primera parte y venir aquí, después sólo pegarla así. Aquí, voy a quitar esto. En realidad, voy a duplicar esto y luego voy a quitar aquí así, entonces no necesito esta parte y aquí, lo haré. En realidad, no necesito esta parte también, y aquí voy a agregar el texto de la política de privacidad esto, luego copiemos este portapapeles dos, y aquí voy a agregar editor de texto Aquí está el editor de texto solo agrégalo. Vayamos al código y enfrentemos el código. Y agradable y voy a quitar este H uno de la página de política de privacidad. Ahora si voy aquí, puedo hacer una línea a la izquierda y seleccionar el texto. Además, si quiero, puedo cambiar el color del texto, y también el color del enlace, pero por defecto, obtuvimos toda esa información, y aquí está la página de política de privacidad. Una vez que lo terminamos, solo puedo publicar esto y si lo veo, aquí está nuestra página de política de privacidad. Sí. Ahora tenemos que agregar este Footer, también, tenemos que generar el término y condición. Es bastante fácil. Puedes Google generador de términos y condiciones, y aquí puedes obtener generator.com término y condición y puedes seguir el paso como hicimos antes y completar el formulario, entonces obtendrás el código SDML Yo no voy a hacer eso. Ahora lo que voy a hacer es ir a Mino en los menús, aquí usaré enlaces importantes, y en enlaces importantes, agregaré el enlace de política de privacidad así Ahora voy a hacer clic en Guardar. Entonces si reviso el sitio web, bajemos por aquí. Tenemos el enlace de política de privacidad. Si hago clic en él, redirigiré a nuestra página de política de privacidad. Bien, diseñamos con éxito nuestro blog. Ahora tenemos que publicar artículos de blog, y puedes ampliar esto creando más categorías y haciendo otras cosas. 25. Conclusión de la clase y proyecto final: Enhorabuena por completar esta clase. Ahora es tu turno de poner en acción todo lo que has aprendido. El proyecto de tu clase es diseñar y construir un sitio web de bloques para un nicho de tu elección. Aquí te explicamos cómo puedes abordarlo paso a paso. Primero, arregla tu nicho. Podría ser viajar, comida, tomar, fitness, bajo o cualquier cosa que te fascine El segundo paso es configurar Wordpres con Elementor Pro en publicaciones y dominios más nuevos El tercero es paso, diseñar un blog más nuevo, crear una página de inicio, una página de blog, diseño de publicación de impulso único y páginas de categorías, y el cuarto paso es agregar funcionalidad, incluir la barra de búsqueda y configurar un formulario de suscriptor para comenzar a recopilar correos electrónicos. El siguiente paso es construir tus páginas esenciales sobre contacto, política de privacidad y términos y condiciones. Entonces prueba tu blog en el móvil, asegúrate de que todo se vea genial en todos los dispositivos. Cuando hayas terminado, comparte tu proyecto en Skillshare Project Gallery Incluye la captura de pantalla del blog, una breve descripción de tu nicho y por qué lo elegiste. Además, si está disponible, puedes compartir un enlace en vivo al blog. Me encantaría ver lo que creas. Gracias por acompañarme en esta clase. Te veo la próxima vez.