Sitio web de portafolio: Elementor y WordPress, diseño web sin código

1. Introducción: Aquí todos somos creativos. Todos tenemos grandes talentos, y todos necesitamos un portafolio en línea para que podamos mostrarle al mundo estas increíbles habilidades. A lo mejor eres fotógrafo, o ilustrador, o diseñador gráfico. De cualquier manera, tu cartera debería provenir de ti. Debería mostrar tu personalidad. Si estás usando Wordpress, puedes comenzar con una plantilla preconstruida, bueno eso va a perder todo tu propio estilo personal. Sin embargo, si empiezas con una página en blanco, cualquier cosa que quieras que suceda puede suceder. Podríamos hacer todo eso usando el constructor de páginas elementales. Entonces echemos un vistazo a esa. Soy John Wolfgang Miller. He sido diseñador profesional desde hace 20 años, y estoy aquí para ayudarte a construir tu cartera en línea. Wordpress puede llegar a ser un poco complejo, sobre todo si nunca lo has usado antes. En esta clase, te enseñaré a usar el Elemental Page Builder. Ese es un programa en línea donde no se necesitan conocimientos de codificación. Todo se reduce a la diversión creativa del diseño. Al final de todo esto, tendrás las habilidades necesarias para crear tu propio portafolio y darle tu propio estilo personal. Y por lo tanto, tendrás el sitio web de aspecto más impresionante del mundo. Ve a hacerte una taza de té y siéntate conmigo y empecemos. 2. Proyecto de clase: Su proyecto principal aquí hoy es crear un sitio web de cartera de una sola página. Aquí solo vamos a utilizar la versión gratuita de elemental, así podrás aprender mucho sobre el uso este programa sin tener que pagar nada. Luego comenzaremos con tu sección de héroe de apertura, mostrando quién eres y de qué se trata tu portafolio. Entonces echaremos un vistazo a tu galería de imágenes. Te mostraré cómo configurar una exhibición de galería muy genial y también te hablaré a través de elementales, opciones de animación y los puntos de luz de la imagen Cuando eso esté completo, hará la sección de pie de página de su sitio web donde podrá incluir cualquier contacto o enlaces de redes sociales. Cuando la versión de escritorio del sitio web esté completa, te mostraré lo fácil que es conseguir que todo funcione perfectamente tanto en tablet como en móvil. Siga cada lección una por una y vea si puede construir cada parte usted mismo antes de pasar a la siguiente. Si quieres hacer exactamente el mismo sitio web que estoy haciendo aquí solo para desarrollar todas tus habilidades. O puedes descargar las imágenes que estoy usando dentro de la sección de recursos aquí. Descarga todo este archivo y sube todo a tu mediateca. O si ahora te sientes lo suficientemente cómodo con elementor, usa tus propias imágenes y muéstrame tu propio portafolio genial con tu propio estilo cool En esta clase y en todas mis clases, estaré cubriendo muchas cosas diferentes y mostrando muchas habilidades diferentes. Te recomiendo a medida que avanzas para reproducir y pausar los videos. Y si necesitas que repita alguna parte de esta clase, solo presiona este botón de 15 segundos, tiempo suficiente para que puedas volver a ver esa parte entera otra vez si estás teniendo algún problema con la calidad del video Puedes ver aquí en Skillshare, solo venimos aquí y damos clic en este ícono de configuración de Cog Está configurado en automático y dependiendo de tu velocidad de Internet, es posible que no aparezca con la mayor calidad posible. Simplemente intente cambiar esto a 720 o 1080 píxeles, e instantáneamente verá un gran cambio de calidad. Cuando hayas terminado toda la clase. Asegúrate de subir un enlace y una captura de pantalla de tu sitio web Arriba aquí en la sección de proyectos. Te daré mis comentarios de inmediato. También me encanta recibir reseñas de todos mis alumnos para ver qué funcionó mejor para ti en esta clase. Entra aquí y déjame una reseña completa. Bien, comencemos. 3. Administrador técnico: Aquí estamos en elementor.com. Este es el lugar al que normalmente vendrías para comenzar con Elementor, incluso con la versión gratuita Puede que ya tengas todo configurado. Es posible que ya tengas un servicio de hosting, y es posible que ya tengas instalado Elementor Si lo haces, puedes simplemente pasar a la siguiente lección. No obstante, te recomiendo quedarte unos minutos solo para asegurarte de que tienes todo configurado correctamente. Y para esta clase, solo estamos usando la versión gratuita de Elementor Desafortunadamente, al construir un sitio web, también necesitas configurar hosting. El hosting es básicamente la empresa que almacena tu sitio web para ti. Y Elementor ofrecen este servicio ellos mismos, sin embargo, hay un costo mensual que implica configurarlo. Si colocas el cursor por aquí hasta donde dice hosting y haces clic en Hosting para WordPress, puedes obtener más información Este es el servicio que ofrecen, y como puedes ver, inicia en apenas 299 por mes. Entonces es muy barato, pero sigue siendo algo por lo que hay que pagar. Si haces clic en Planes C, como puedes ver, tienen diferentes paquetes para esto a diferentes precios en función del tamaño de tu sitio web. Pero no hay una versión gratuita, lamentablemente, disponible en Elemental. No obstante, hay otro servicio que sí ofrece hosting gratuito. Y para esta lección, te recomiendo usar esto solo para comenzar sin tener que entregar dinero alguno. A esto es WoZma. Este es el servicio de hosting gratuito que recomiendo. Es muy fácil de usar y puede permanecer gratis para siempre. Así que ven a este sitio web. El URL es Wosma dot IO, y luego sube aquí a la cima donde dice soluciones y elige hosting para WordPress Entonces, cuando veas esta página, da clic aquí, dice Desplegar gratis. Llegarás a esta página, y aquí es donde puedes calcular tu configuración de WordPress. Y voy a recorrer cada paso aquí, pero es muy fácil de entender de todos modos. En primer lugar, el nombre de la aplicación aquí en la parte superior. Ya te ha generado un nombre que es único. Pero puedes escribir tu propio nombre aquí, así que sólo voy a llamarlo Wolfgang Entonces ubicación del servidor. Tienes dos opciones Bélgica y Estados Unidos. Elija el que esté más cerca del país en el que está configurando el sitio web Después haz click aquí abajo donde dice Configura tu sitio Wordpress. Y vamos a darle un título a nuestro sitio. De nuevo, voy a llamar a éste Wolfgang. El idioma es el inglés para mí. Entonces Admin usa un nombre y contraseña de administrador y correo electrónico de administrador. Aquí es donde está configurando su propio inicio de sesión único el back end de su sitio web. Entonces aquí dentro, voy a escribir a mi nombre. Aquí, ingresaré mi propia contraseña. Luego agregaré mi correo electrónico en la parte inferior y luego haré clic en Desplegar ahora. Llegarás a esta página. Entonces tu sitio web ya está configurado, pero como puedes ver en la parte superior aquí, dice que tu sitio estará en vivo durante 1 hora para mantenerlo en línea, crear una cuenta gratuita. No tienes que hacer esto si no quieres mantenerlo vivo. Pero si lo haces, solo recomiendo hacer clic en este botón aquí, regístrate gratis e inscribirte para obtener una cuenta gratuita con WoZma Estoy usando los mismos datos de inicio de sesión aquí también y haciendo clic en Registrarse. Así que ahora tienes una configuración de cuenta gratuita dentro de WoZma y aquí es donde puedes acceder a tu panel de WordPress y comenzar con Tu nombre de dominio está aquí arriba, y esto es lo que ingresaste en esa primera página. Puede que ese no sea el nombre de dominio que desea usar para su sitio web, pero para probar y configurar su sitio web, nos quedaremos con eso por ahora. Si quieres agregar un nuevo nombre de dominio, te mostraré cómo hacerlo al final de esta clase. Pero por ahora, nos quedaremos con éste. Entonces, para entrar y comenzar a construir tu sitio web, haz clic aquí arriba donde dice administrador de WordPress. Y aquí estamos ahora en el dashboard de WordPress. Podemos empezar a construir todo desde aquí. Si nunca antes has usado Wordpress, te hablaré a través de algunas de las configuraciones básicas Pero lo principal que hay que saber es que el menú para todo está por aquí a la izquierda. Lo primero que tenemos que hacer es instalar Elementor. Elementor es un plug in, así que para hacerlo, ven aquí a la izquierda y pasa el cursor sobre plugins y elige Añadir nuevo Entonces en el cuadro de búsqueda de aquí arriba, escribe Elementor. Verá el creador de sitios web de Elementor aquí, así que haga clic en Instalar ahora y luego elija Activar Y eso te llevará a través de esta página. Es posible que ya tengas una configuración de cuenta elemental. Si es así, haz clic aquí abajo donde dice conecta tu cuenta. Si no, haz clic en este donde dice, crea mi cuenta. Y aquí puedes usar tu cuenta de Google, cuenta Facebook, cuenta de Apple para iniciar sesión o continuar con tu correo electrónico. Seleccionemos esa. E ingresaré mi correo electrónico aquí arriba y luego elegiré mi contraseña. Luego haz clic en Crear mi cuenta. Y luego presiona este botón de conexión. Lo que estamos haciendo aquí es configurar la versión gratuita de Elementor Necesitas una cuenta, pero no necesitas pagar ningún dinero por el programa en esta etapa. Y luego verás esta página, simplemente haz clic en Hagámoslo. Cada sitio comienza con un tema. Cada sitio web de WordPress necesita un tema para comenzar. Y para usar Elementor, debes comenzar con el tema hello Elementor Entonces para instalar eso, basta con hacer clic en este botón aquí. Y luego verás este sitio donde te está ofreciendo características pro adicionales. Esas son las funciones de pago. Y si solo quieres continuar con la versión gratuita, simplemente haz clic en Omitir. Bienvenida a bordo. Eso es todo lo que se hace aquí, así que simplemente haz clic en Omitir de nuevo, y eso te llevará de vuelta al panel de WordPress. Simplemente haz clic en Saltar en esta ventana. Muy pronto entraremos en todo esto. Pero por ahora, salgamos esta página y volvamos al tablero. Antes de hacer eso, queremos configurarlo como una configuración regular cada vez que dejamos el elemento o la página Builder. Entonces para ello, aquí arriba a la izquierda, verás un pequeño elemento o logo. Haga clic en esa y elija las preferencias del usuario. Entonces en esta lista de aquí, en la parte inferior, verás la palabra navegación, salida dos. En el menú desplegable, solo elige el panel de WP. Cuando eso esté hecho, vuelve a subir al logotipo elemental y elige salir a WordPress. Obtendrás este pequeño pop up. Simplemente haz clic en Dejar porque aún no hemos hecho nada en esta página. Y eso te traerá de vuelta aquí. Ahora, lo primero que hay que hacer es asegurarse tener instalada la última versión de elemental. Si pasa el cursor por aquí en el lado izquierdo, verá la opción de actualizaciones. Haga clic en esto. Y si elemental necesita ser actualizado, será debajo de aquí donde dice plugins. Pero como puedes ver aquí, dice que tus plugins están todos actualizados, así que todo está configurado correctamente. Ahora solo una última configuración para verificar antes de comenzar a construir su sitio web. Ven aquí a la izquierda a Elementor y elige ajustes Esta sección aquí, dice, deshabilitó los colores predeterminados y las fuentes predeterminadas deshabilitadas. Solo necesitas asegurarte de que eso esté comprobado. Si no está marcada, simplemente haga clic en la casilla aquí, marque y haga clic en Guardar cambios. Esto significa que estamos anulando cualquier color preestablecido y fuentes del tema hello para que podamos usar el nuestro propio Así que haz clic en Guardar cambios. Y ahora estamos listos para comenzar a construir tu sitio web. 4. Elementor: 101: Ahora que está configurado, ven aquí a las páginas y selecciona todas las páginas. Como puedes ver aquí, un par de páginas vienen automáticamente con el tema. No necesitamos ninguna de estas páginas, pero esa está en vivo que ha sido publicada como puedes ver por aquí. Simplemente apaguemos eso porque es solo una página vacía que no necesita existir. Si pasamos el cursor por aquí en edición rápida, aquí tienes algunas opciones, pero la que estamos viendo es el estado Como pueden ver, se publica. Se puede cambiar eso a un borrador. Ahora vamos a crear nuestra propia página en vivo. Eso es muy sencillo. Haga clic en Agregar nuevo. Llegarás al editor regular de Wordpress. En primer lugar, vamos a desplazarnos hacia arriba aquí para agregar el título y añadir el título de nuestra página, John Wolfgang Design Entonces ven aquí al lado derecho donde dice Resumen, y haz clic en el menú desplegable. Después vaya a esta sección llamada Plantilla. Y da click en donde dice Plantilla Default. En este menú desplegable, elija Elemento o Lienzo. Esto significa que estamos usando el elemento o tema y usando el lienzo uno que es el plan, claro uno que no tiene nada más que pasar. Después desplácese hacia arriba aquí para guardar borrador y haga clic en eso. Cuando hayas hecho todo esto, ven aquí a la izquierda donde dice Editar con Elementor Y eso nos llevará al constructor de páginas Elementor. Bienvenido de nuevo al elemento o editor. Como puedes ver, estamos usando la última versión del menú. Y siempre es bueno simplemente entrar aquí y jugar con todos los escenarios aquí, solo para que sepas dónde está todo. Antes de comenzar, revisaré rápidamente cada parte de la barra de menú en la parte superior aquí. En primer lugar, este elemento o logotipo, ese es un menú desplegable. Aquí tenemos al constructor de temas. No te preocupes por eso. Eso es solo un elemento pro que no estamos usando hoy en día. Historia. Bueno, obviamente si cometas un error puedes volver a versiones anteriores y a los atajos de teclado. Eso es solo decirte todos los atajos para acelerar todo el proceso. Supongo. Luego el icono más agrega elemento, aquí es donde verás todos los elementos, todos los widgets que usaremos en este sitio web, este menú desplegable que está configurado en diferentes subsecciones, diseño, contenedor y cuadrícula Eso es lo que solíamos empezar a construir todos los elementos, cada sección de nuestro sitio web. Tienes tus conceptos básicos, también tienes tu sección. Obviamente puedes ver un pequeño elemento de candado encima de todos estos, pero no te preocupes por eso No podemos usar ninguno de estos, pero nada de eso es necesario para nada que vamos a construir hasta la fecha. Solo estamos usando completamente la versión gratuita para que podamos cerrar esa parte. Y luego obtienes todos los ajustes generales, todo lo que vas a necesitar aquí, carrusel de imágenes, testimonios, etcétera, esos son los elementos Entonces tenemos la configuración del sitio. Aquí es donde puede cambiar la configuración que funcionará en todo el sitio web. Si estás construyendo un sitio web con varias páginas diferentes, cualquier configuración aquí será relevante en cada página que construyas. Entonces si cerramos esta y luego damos click en esta que dice Estructura, obtienes esta pequeña ventana emergente. Esto solía llamarse el Navegador. Si estás familiarizado con versiones anteriores de element, se llamaba Navigator. Ahora se llama estructura, pero hace exactamente lo mismo. Hablaré de eso a medida que empecemos a construir tu sitio web. Después a continuación, esta es la sección responsive. Esto es muy importante y llegaremos a esto más adelante en la clase. Aquí es donde podemos seleccionar diferentes dispositivos, computadoras de escritorio, tabletas y móviles. Entonces este de aquí, Vista previa de cambios. Esto es genial porque a medida que estás trabajando en el sitio web, puedes hacer clic en Vista previa de cambios, y luego puedes ver cómo se vería para todos los demás que miran tu sitio web cuando se pone en marcha. Eso es todo. Ahora podemos comenzar a construir tu sitio web. 5. Portafolio: héroe: Empecemos a construir la sección de héroes de tu sitio web. Lo que les voy a mostrar aquí es cómo hacer un abridor de página completa. Desplázate hacia arriba hasta el plus. Escojamos la caja flex como la queramos. 50, 50. Escojamos esta de las dos columnas que ha caído en nuestro contenedor. Aquí solo hay dos cosas que queremos cambiar, la altura y la anchura. En primer lugar, la altura, como puedes ver, se divide aquí, pero queremos que esto llene toda la página Simplemente hagamos clic en los puntos en la parte superior y asegurémonos de que tenemos el contenedor de ediciones a la izquierda Entonces acércate a esta sección donde dice altura mínima. Entonces este pequeño menú desplegable de aquí a la derecha donde dice x aquí, elige H. H significa altura visual. Esto viene como un porcentaje en cuanto a la altura que queremos que llene. 100% de la página. Literalmente, solo escribe 100 aquí. Verás que ha bajado cada sección hasta la parte inferior de la página. Tenemos nuestra altura ordenada. A continuación estamos viendo de nuevo el ancho del contenido, por aquí a la izquierda, como pueden ver, actualmente se encuentra en caja. No queremos que sea encajonado. Queremos que sea de ancho completo. Como puedes ver por aquí, tienes el tipo de línea punteada y luego un espacio vacío a la izquierda y a la derecha. Lo cambiamos a ancho completo, va al ancho completo de la página. Sin embargo, todavía se pueden ver solo pequeños espacios diminutos en el medio. Esta es una configuración predeterminada dentro de Elementor, donde automáticamente agrega un margen o un relleno a cada contenedor que pones en la página Para mostrarte rápidamente cómo cambiar eso, simplemente haz clic derecho en cualquier parte la página y trae de vuelta la estructura. Después elige el contenedor en el que quieres sacar el relleno. Vamos a ir con el principal aquí. Haga clic en el nivel superior aquí, el contenedor principal de contención. Entonces ven por aquí a la izquierda a Avanzado. Estas son las dos secciones que estamos viendo aquí. Es tanto de margen como de relleno. Se establecen en el elemento o tamaños predeterminados, sin embargo, para sacar ese margen Y ese relleno simplemente puso cero aquí. Y hacer lo mismo en relleno, Como pueden ver, cuando cambio uno de ellos, los cambia a todos. Y eso es porque como puedes ver aquí, los valores están vinculados entre sí. Si alguna vez necesitas diferentes montos en cualquiera de los lados, simplemente haz clic en este botón para desvincularlos. Y luego verás que puedes agregar diferentes cantidades, 50 en la parte superior, 50 en la parte inferior, pero aún cero a izquierda y derecha, pero queremos cero sobre todo. Entonces puedes elegir hacerlo en todos los contenedores aquí seleccionándolos uno por uno. Ahora voy a agregar tres cosas distintas. En primer lugar, voy a cambiar el color de fondo del contenedor principal. Entonces te voy a mostrar cómo agregar una imagen al lado izquierdo y cómo agregar el texto al lado derecho. En primer lugar, comencemos con el color de fondo. Vamos al contenedor principal aquí en la estructura. Después por aquí a la izquierda, elige estilo. Aquí es donde se puede cambiar el fondo de todo este contenedor. En cuanto al tipo de fondo, tienes algunas opciones diferentes. Clásico, eso solo sería un degradado de color recto. Un color se mezcla en otro color o video o presentaciones de diapositivas, es decir, múltiples imágenes que se deslizan de una a la siguiente. Tengan una jugada con eso usted mismo. Vea lo que funciona para usted. No obstante, quiero mantener esto simple y simplemente caer en un color clásico. Voy a dar click sobre este icono. Ahora tienes dos opciones. Puedes elegir agregar un color, o puedes agregar una imagen completa. Busco un color en esta sección. Por lo tanto, voy a venir a esta caja gris que está tachada que está mostrando que no se ha seleccionado ningún color. Este es el seleccionador de color. Puedes elegir tu color aquí o puedes ingresar manualmente un código hexadecimal. En primer lugar, este de aquí arriba elegirá el color y esta es la opacidad de ese color Vamos a establecer esa en 100% el color que se selecciona aquí. Bueno, eso es negro, por eso se ha vuelto 100% negro. Si arrastro este hacia la izquierda y hacia la derecha, me dará diferentes opciones arriba. Ahora estoy buscando un color rosa, magenta. Lo arrastraré hasta este punto. No obstante, puedes ver aquí abajo, sigo seleccionando la versión negra de ese color. Si solo agarro este pequeño icono y lo arrastro hacia arriba y hacia abajo, me permitirá seleccionar por aquí y elegir el color que estoy buscando. Porque este icono está en la parte superior. Ahora puedo jugar con éste. Simplemente elige un color que realmente represente quien soy y mi estilo. La otra opción es introducir manualmente un código hexadecimal aquí abajo. No sabes lo que es un código hexadecimal, o necesitas algún consejo sobre cómo escoger colores, dónde buscarlos. Déjeme una pregunta en la sección de discusión aquí y me pondré en contacto con usted lo antes posible. No obstante, tengo un color favorito. Lo que voy a hacer es pegar eso aquí. Voy a destacar todo el texto aquí. Y luego pegar en mi color elegido, es decir 00f. Este es el color que uso con toda mi marca. Mi tarjeta de presentación tendría este color. Mi logo tendría este color. Es importante que si tienes un color elegido sea consistente. Ahora voy a agregar una imagen de fondo para el primer contenedor, el de aquí a la izquierda. Vuelve aquí para estructurar y seleccionar ese contenedor. Ahora bien, si normalmente te gustaría agregar una imagen, la forma en que se hace a medida que vienes aquí al plus, entonces eliges la sección de imagen aquí en Básico y la arrastras y sueltas en el contenedor al que te gustaría que apelara. No obstante, hay un problema con esto. La imagen no llena todo el espacio que tenemos para este contenedor. Eso no es posible, ya que se mostrará en diferentes dispositivos, en diferentes tamaños, etcétera Eliminemos esa imagen, haga clic con el botón derecho y elija eliminar. Entonces vuelve a subir aquí a Container. Haga clic en eso. Luego ven aquí a la izquierda para editar Contenedor y elige Estilo. Asegúrate de volver a estar en esta sección de fondo desde el tipo de fondo, elige Clásico. Aquí es donde vamos a elegir una imagen en lugar de un color como fondo. Haga clic aquí en el plus. Haré clic aquí para seleccionar el archivo que quiero subir desde mi computadora. En esta carpeta, tengo dos imágenes mías. Me gustaría elegir este de aquí, y cuando se haya subido, simplemente elija Seleccionar. Como pueden ver, eso ha dejado caer la imagen de mí como fondo del contenedor. Por lo tanto, llena todo el contenedor. Afortunadamente, sin embargo, la cosecha de la misma no está del todo bien, ¿verdad? Es demasiado grande. Entonces me está cortando la mitad de la cara para editar eso. Ven aquí a la izquierda. Mira estas secciones por aquí. Coloque, adjunte, repita y muestre el sitio. En primer lugar, comencemos con la posición. Está configurado como predeterminado, pero aquí es donde puedes elegir la posición. Si quieres que sea la izquierda, la derecha, la parte superior, la inferior, me gustaría que estuviera en el medio. Entonces voy a elegir centro, centro. Bueno, ese es un muy buen comienzo. Eso queda bien entonces en términos de repetición. Bueno, esto significa que puedes tener la misma imagen repetida muchas veces dentro de la caja. Yo no quiero eso. Voy a elegir no en ese momento del tamaño de la pantalla, este es el importante. Tienes algunas opciones aquí. Puedes elegir funda o puedes elegir contener. Tú eliges, eso es todo. Eso significa que puedes ver toda la imagen, y por eso tienes espacio vacío en la parte superior e inferior. Voy a elegir portada porque como se puede ver, eso ha llenado la caja perfectamente. La imagen ahora va a la parte superior e inferior de la página, y luego la única división está a la izquierda y a la derecha. Sin embargo, puedo verlo todo. Puedo ver mi cara, puedo ver mi computadora, mi brazo, mi copa. Todo está bien, así que me voy a quedar con esta. Ahora ya lo tenemos hecho. Bueno, sólo un pequeño consejo para ti aquí. Te recomiendo que sigas guardando esto constantemente a medida que avanzas, ya que si tu computadora falla, puedes volver a lo que acabas de hacer. No tienes que volver a hacerlo para hacer eso. Solo vengamos por aquí donde dice Publicar. Haz clic en esta pequeña flecha desplegable y haz clic en Guardar borrador que está guardado. decir, si tu computadora falla ahora seguirás volviendo exactamente a lo que tienes. Bien, tenemos el lado izquierdo de nuestro héroe. Trabajemos en el lado derecho. Destacemos este contenedor. Lo que queremos hacer aquí es agregar texto. Pasemos aquí al plus, elijamos rumbo, y luego arrastremos ese hacia adentro. Ahora bien, esto acaba de caer ya en el texto predeterminado a todos los ajustes predeterminados. Verás por aquí del lado izquierdo, Bueno, antes que nada tenemos el título, ese es el texto que aparecerá. Lo que me gustaría añadir aquí es mi nombre. Entonces voy a poner en John Wolfgang Miller. A continuación vamos a elegir la etiqueta HTML. Da click en este menú desplegable, y verás H 1h2h3, etcétera H significa encabezada. Esta es una configuración por razones de Google, por razones de SEO. Significado H uno es el encabezado de introducción, el título de introducción a su página. Y luego otros encabezamientos que tengas seguirán abajo para que elijas H dos y H tres si es un subtítulo ya que esta es la introducción a nuestra página es la principal Voy a elegir H uno. Y un pequeño consejo para ti solo deberías tener realmente solo una H una en la página y debería ser lo primero que aparezca. Cualquier duda sobre títulos, cualquier duda sobre encabezados H one y SEO Otra vez, ponle eso a las discusiones y me pondré en contacto con usted lo antes posible Ahora vamos a echar un vistazo a la posición de este texto dentro del contenedor. Volvamos por aquí al contenedor, haz clic en éste, luego quieres elegir Layout. Por aquí a la izquierda, estamos viendo contenido justificado, y estamos viendo Alinear elementos. En primer lugar, justificar el contenido. Esto elige dónde aparecerá dentro del contenedor que ya está configurado para comenzar. Podemos elegir el centro, o podemos elegir final. Yo sólo te voy a mostrar el final. Es el fondo mismo donde lo queremos. Lo queremos en el centro. Vamos a elegir eso entonces, a ligne items. Bueno, eso significa de nuevo, está configurado automáticamente para comenzar al final, ese lado o de nuevo en el sentido. Vamos a elegir el centro. Tengo ordenada la posición de mi texto. Volvamos a hacer clic en el texto. O elige Rumbo aquí en la estructura. En realidad solo hago clic en el texto en sí. Entonces ven aquí al estilo. Aquí es donde podemos cambiar la forma en que aparece este texto. Podemos elegir la alineación que queremos que quede alineada, centralizada de nuevo. Podemos cambiar el color, y podemos cambiar la tipografía utilizada en este momento, se deja alineada, y estoy contento con eso No obstante, el color, bueno, no quiero que sea negro sobre un fondo de agenda. Vamos a dar click en éste. Solo arrastremos este pequeño icono hasta aquí hacia el extremo izquierdo que va a elegir el blanco puro. El blanco puro siempre se representa con seis, cualquiera que sea el color que haya seleccionado aquí abajo, la esquina más alejada de este lado, y ese lado siempre será blanco puro y negro puro Bueno, quiero blanco puro. A continuación, voy a mover la estructura por aquí para que no cubra mi texto. Entonces voy a elegir este ícono de pluma por aquí. Para la tipografía, aquí es donde puedes elegir todo lo que quieras sobre la tipografía Puedes elegir la familia. Aquí y puedes elegir sistema. Estos son los básicos que ves por todas partes. Los de Google, los que están libres de Google. Entonces simplemente continúa para siempre. Esto realmente, posiblemente haya otros ajustes dentro de esto, pero sí, como puedes ver, solo hay muchas fuentes diferentes aquí. Volveremos a esa. Lo que en realidad voy a hacer es seleccionar uno que ya conozca. Esto va de la misma manera el color que he elegido como fondo. Tengo una fuente elegida que uso en toda mi marca. Si deseas alguna información sobre dónde encontrar fuentes, dónde encontrar ideas para tipografía Nuevamente, solo envíame un mensaje en discusiones, sin embargo voy a escribir en esta que conozco y sé que me encanta, Se llama Bunge Esta es una gran fuente porque realmente me representa. Es muy grande, es muy audaz y tiene esto como el estilo de los 80. Con el texto en un color blanco sólido, funciona muy bien sobre el fondo brillante de Agena. Escojamos Bunge. Tienes algunas otras opciones aquí. Este peso, bueno, esto es apropiado si has elegido uno que tenga múltiples pesos diferentes, algo así como Futura o Helvetica, tendrán múltiples opciones diferentes de extrato delgado ligero Este es solo uno negrita uno va a dejar eso como está por defecto en términos de transformación. Bueno, puedes elegir si sería , minúscula mayúscula Eso solo significa que la primera letra de cada palabra está en mayúscula Sin embargo, como puedes ver, esta ya es una fuente en mayúscula. No necesito nada de esto. El único que voy a mirar aquí dentro es el tamaño. Por el momento es demasiado pequeño, lo que voy a hacer es simplemente arrastrar este a la derecha y hacerlo mucho más grande. Creo que un acerca de ahí es lo grande que quiero que sea. Quiero que llene mucho espacio dentro de este contenedor. Como puedes ver, hay un problema bastante grande con eso en eso, bueno, es demasiado grande para caber dentro del contenedor. Lo que tenemos que hacer aquí es algo para lo que él trabaja, mi estilo funciona para mi nombre. Voy a dividir un poco la palabra para hacer eso. Sólo voy a mostrarte algunas cosas básicas de codificación muy simples, te lo prometo. Sin código, pero este es uno realmente simple del que es bueno que conozcas. Ven aquí al contenido. Este es el título que tenemos aquí. Lo que quiero hacer es dividir la palabra Wolfgang en dos palabras, Lobo y Gang Para ello, acabo de seleccionar en este cuadro de título la palabra Wolfgang y Click en el medio de la misma Todo lo que voy a hacer aquí es poner algún código. En primer lugar, en tu teclado, elige este soporte, el puntizado, que en un libro Mac está abajo en la luz inferior, elige el lado izquierdo Después escribe en estas dos letras R y luego elige la del lado derecho. Ahí vas. Verás que ha dividido a Wolf y Gang en dos palabras separadas. No obstante, bueno eso lo estropeó ahora tienen a John y Wolf en la misma línea. ¿Cómo voy a arreglarlo? Bueno, antes que nada, voy a ir a las palabras John y Wolf para sacar el espacio que ya estaba ahí y luego agregar en otro descanso. Ahí vamos. Eso me gusta mucho. Eso funciona muy bien ahora. John Wolf Gang Miller. Creo que ni siquiera la palabra Miller realmente se divide tan bien, pero son seis letras. Voy a poner un poco de split entre la L y la L. Otra vez, mismo problema entre pandilla y Mill. Pongamos un respiro ahí. Ahí vamos, John Miller. Eso realmente me resume, quien soy y ¿sabes qué? Creo que la exhibición de eso funciona muy bien. Un pequeño consejo para ti aquí. Esta pequeña flecha en el lado izquierdo, eso es un gran elemento o escenario donde puedes ocultar el panel. Doy click en eso, todo lo demás desaparece, incluida la ventana de estructura. Ahora puedo ver exactamente cómo se vería esto a todos los que visitan mi página web, porque esto es lo que verían. Ahora vamos a hacer clic de nuevo en la flecha para traer de vuelta todas las herramientas. Entonces volvamos a guardarlo. Aquí arriba en Guardar Draft, ahora tenemos una sección de héroes terminada. Pasemos a la galería de tu cartera. 6. Portafolio: cuadrícula de galería: Ahora vamos a agregar otra sección debajo del héroe. Vamos a desplazarnos hacia abajo. Lo que vamos a ver aquí son dos cosas, contenedores y rejillas. Básicamente va a ser una rejilla dentro un contenedor y luego contenedores dentro de una rejilla. Te mostraré cómo usar esos diferentes elementos y esto te mostrará una manera muy genial de presentar toda tu galería. Vamos a empezar con un contenedor regular. Haga clic en el signo más, elija la caja flexible, luego solo elija esta. Una plataforma señaladora de una sola columna. Entonces subamos aquí al plus. Escojamos la cuadrícula y arrastrémosla al contenedor. Esta es una grilla. La forma en que funciona una cuadrícula es que puedes elegir el número de columnas y el número de filas en cada columna. Siempre es exactamente el mismo ancho. Te da un bonito diseño uniforme. Voy a ir por cuatro columnas. Quiero que todo eso se muestre en una fila. Así es como se ve mi grilla. Ahora lo que quiero hacer aquí es caer en una serie de imágenes diferentes para crear una cuadrícula de visualización realmente genial que muestre muchas de las diferentes cosas que he hecho en mi carrera de la manera en que normalmente harías esto. De nuevo, vendrías aquí al plus y dejarías caer una imagen que dejaría caer una imagen en esa columna. Sin embargo, si entonces intento dejar caer otra imagen en la misma columna, no se sentará ahí, automáticamente pasa a la siguiente parte de la cuadrícula. Sólo se puede tener una cosa dentro de cada columna. Sin embargo, quiero tener múltiples imágenes diferentes. Esto es lo que tengo que hacer. Nuevamente, sube aquí al plus y elige un contenedor y deja caer un contenedor en la columna. Lo que puedes ver aquí es un contenedor dentro de una columna de la rejilla que está dentro de un contenedor principal. Lo que esto significa ahora es con este contenedor, puedo dejar caer múltiples imágenes diferentes ahí dentro. Lo que voy a hacer es eliminar estas dos imágenes que están aquí por su cuenta. Voy a pasar el cursor sobre este icono rosa, hacer clic derecho y elegir eliminar Lo mismo en este clic derecho. Eliminar. Ahora lo que quiero hacer es soltar una imagen dentro de este contenedor, por aquí a la izquierda a los widgets, arrastrar la imagen y soltarla en. Entonces si quiero agregar otro debajo de él, nuevamente, ven aquí al plus, selecciona imagen y suéltela. Como puedes ver aquí, tenemos la pequeña línea rosa que está arriba o abajo. Eso significa que se sentará dentro de ese contenedor, ya sea arriba o debajo de la imagen que hay ahí. Vamos a dejarlo caer abajo. Ahora vamos, ahora tenemos dos imágenes dentro de un contenedor que se asienta dentro de esa columna. Creo que quiero tres o tal vez cuatro imágenes dentro de este contenedor. Yo sólo puedo subir aquí para agregar elemento y agregar otro en. Pero una forma más rápida de hacerlo, ven aquí a estructurar. Estamos dentro del contenedor y sabemos que tenemos estos dos elementos dentro del contenedor. Puedes ver que está configurado aquí con un pequeño menú desplegable donde las cosas están listas para mostrar lo que hay dentro de él. Todo lo que voy a hacer es pasar el cursor sobre la última imagen, clic derecho y luego elegir Duplicar Voy a hacer eso dos veces. Ahora tengo cuatro imágenes dentro de este contenedor. Ahora lo que quiero hacer es recrear esto tres veces más. Nuevamente, eso va a llevar mucho tiempo hacerlo todo manualmente. Todo lo que voy a hacer es seleccionar este contenedor aquí. Sólo voy a apagar la flecha para no ver qué hay en ella. Entonces voy a hacer clic derecho sobre eso. Duplicar esa fecha, que esto es lo que tengo aquí. Ahora bien, si hago clic en la flecha, tengo una grilla que se configura y que va a mostrar todas las diferentes partes de mi cartera. Volvamos primero al editor. Bueno, como puedes ver por el espaciado aquí, está encajonado y eso es lo que queremos En realidad queremos un poco de espacio en blanco ambos lados de este contenedor principal, ya que desde el punto de vista del diseño, espacio en blanco es muy importante. Ayuda a enmarcar todo lo que hay dentro de él. Primero, solo necesito jugar con espacios un poco dentro de este contenedor principal. Obviamente, tenemos un poco espacio en blanco a la izquierda y a la derecha. Vamos a agregar uno en la parte superior y en la parte inferior. Escojamos el contenedor principal. Ven aquí para avanzar de nuevo. Vamos a jugar con el margen y el relleno. Lo que quiero hacer es desvincular los valores en ambos. Pongamos un relleno de 100 píxeles en la parte superior y 100 píxeles en la parte inferior. Como pueden ver, ahora tenemos un bonito espacio en blanco alrededor de toda la cuadrícula que se ve genial. Simplemente le da un poco más de espacio para respirar cuando tienes múltiples imágenes, eso es muy importante. Ahora lo único que está un poco mal aquí, y mira, soy diseñadora gráfica, siempre noto este tipo de cosas, es que quiero que esto sea parejo. Se puede ver que el espacio que hay entre estas dos imágenes es más corto que el espacio que hay entre cada columna. Eso es de nuevo debido a la configuración predeterminada en cada contenedor que está dentro de esta cuadrícula. Pasemos al contenedor uno, vengamos a Avanzado y cambiemos todos estos a cero. Nuevamente, se puede ver que todo se alinea correctamente. Entonces lo que voy a hacer es escribir para dar clic en la primera copia del contenedor y luego en el estilo estilo estilo contenedor restante. Ahora, ahí vamos. Eso es perfecto. Ya no me da dolor de cabeza de diseñador gráfico. Puedo ver un espacio absolutamente parejo entre las columnas y las filas de. Ahora solo quiero comenzar a agregar en cada imagen individual. Vayamos a la primera imagen de aquí. Da click en el ícono del lápiz, arriba a la derecha por aquí a la izquierda donde dice Elegir imagen de nuevo, solo verás la imagen de colocación gris ahí Al principio, no queremos eso, obviamente. Vamos a dar click sobre esta imagen. Cuando abro la mediateca, puedo ver cada imagen que he subido. Si quieres saber un poco más sobre cómo subir imágenes, iremos a mi perfil en compartir habilidades y buscaremos este video que te platicará rápidamente sobre lo que se debe hacer cuando subamos imágenes a Wordpress Lo que importa es la proporción de esta imagen, el tamaño del archivo y el nombre del archivo. Mira este breve video, entenderás un poco más. Cuando tengas todas tus imágenes listas para subir o haz clic aquí y selecciona Archivos. Lo que tengo aquí son tres carpetas de imágenes diferentes. Todas son de proporciones diferentes, algunas de ellas son de tres en dos, algunas son de dos por tres y otras son cuadradas. Simplemente abre cada uno de estos para mostrarte. Permítanme cambiar esto para enumerar en términos de los tres en dos. Cada imagen que tengo aquí está ajustada a esa proporción exacta, tres por 23 por 23 por dos. Entonces tengo las mismas imágenes que están todas ajustadas a dos por tres. Todos los pulmones. Eso funcionó como un dos por tres de todos modos. Entonces la última opción que tengo es cuadrada una por una. Nuevamente, mismas imágenes, mismo contenido, recién presentadas de diferentes maneras. Lo que voy a hacer aquí es subir cada una de estas imágenes. No voy a usarlos todos, pero me he asegurado de que todos los tamaños de mis archivos de imagen sean lo más pequeños posible, por lo tanto, no ocupa demasiado espacio en mi web back end. En primer lugar, escojamos todos los cuadrados, ligeros, cada uno de estos. Elija abrir. Cuando todos hayan subido. Ven aquí para volver a subir archivos, seleccionar archivos, elegir dos por tres, y subir todos esos. Después la final 13 por dos. Sube esos también. Cuando estén todos subidos, solo elige el primero que quieras que aparezca en tu galería. Voy a elegir un tres por dos. Creo que voy a elegir este de aquí. 51 Galería de Arte. Ahora te estarás preguntando, ¿por qué he subido diferentes ratios de todas las mismas imágenes? Bueno, esto es solo para ser un poco más creativo. Si bien era importante tener todos los espacios intermedios, filas y columnas iguales, no creo que sea importante tener el tamaño o la proporción de imágenes de todos modos. Déjame mostrarte. Escojamos el número dos. Imagen número dos en esta columna. Aquí, quiero caer en una imagen cuadrada. Bueno, esos fueron los primeros que subí. Escojamos uno de esos. A lo mejor este bucear en Fiji. Entonces quiero seleccionar una relación de dos por tres, una imagen de retrato. Vamos a hacer clic en Editar imagen. Elige la imagen aquí arriba. Esos fueron los segundos que subí, ¿no? Vamos a desplazarnos hacia abajo hasta uno de esos. A lo mejor este de aquí. Sí, eso es un dos por tres. Y es una chica que lleva una camiseta que diseñé para una compañía llamada Get. Seleccionemos eso. Ahí vamos. Ahora tenemos un poco de variedad en imagen, forma y tamaño. Lo que esto también significa es que no siempre está alineado por aquí lo que te llama un poco más la atención, hace que una cosa destaque más que otra cosa. Al mirar esto, ya sabes lo que pienso sobre la base de que tengo muchos tamaños diferentes dentro de esta columna, creo que tres imágenes probablemente serían suficientes. No creo que necesite cuatro. Sólo bajemos y eliminemos este último. Haga clic derecho en el icono y elija Eliminar. Ahora lo que voy a hacer es simplemente agregar tres imágenes diferentes a cada columna, imágenes que son proporciones diferentes. Y entonces podemos tener una jugada con la posición de todos ellos y simplemente ver qué funciona mejor en términos de crear una grilla creativa. Simplemente comenzaré borrando la cuarta imagen de cada columna. Elimine esa. Quizá cambie de opinión en algún momento. Puede que funcione mejor. Si quisiera tal vez 43 por dos imágenes para dejar cuatro en esa columna, eso sucede. No es un problema. Yo solo agrego en otro widget de imagen. Pero ahora solo voy a seleccionar una variedad diferente de imágenes que mejor luzcan mi portafolio de diseño gráfico. Juega con esto y trata de elegir una buena variedad de imágenes. Algunos que pueden ser un poco más de larga distancia, algunos que son un poco más cercanos, algunos que tienen gente, otros que no. Es bueno agregar un poco de variedad ahí dentro. Simplemente elige lo que mejor te parezca. Muestra quién eres y tu estilo, tus elementos resaltados. No tienes que mostrar todo lo que has hecho alguna vez en tu carrera. Solo escoge los mejores pedacitos. Ahora lo que funciona muy bien de esta grilla es que tengo un poco de variedad. Si solo hago clic en la flecha, todo encaja con dentro de una sola página de escritorio. Eso me gusta a medida que la gente se desplaza por mi página web, ven esta sección de héroes donde me ven a mí y a mi nombre. Y luego mientras se desplazan hacia abajo, pueden ver todo de una sola vez. Eso es muy genial. No obstante, creo que todavía puedo simplemente jugar con la exhibición aquí, con la estructura de todo. Vamos a hacer clic en la flecha. Creo que lo que quiero es que tengamos diferente alineación en la parte inferior de cada columna, no creo que debamos tener la misma alineación en la parte superior. Lo que voy a hacer es simplemente centralizar el contenido de cada contenedor en cada columna Volvamos a la estructura por aquí. Aunque solo cierre el menú en cada uno de aquí, el primero 1.1 que quiero hacer para todos ellos, haga clic en el Contenedor, venga aquí a Layout, y luego elija Justify. Contenido nuevamente al centro. Y luego Alinear los elementos nuevamente al centro. Ahora, eso no movió nada por ahí, ¿por qué? Porque está en la grilla. Y esta es en realidad la columna más alta de todas ellas. Sin embargo, hago clic derecho en este contenedor, elijo Copiar, luego elegir Pegar. En los tres siguientes, veremos qué pasa. Estilo Pegar. Ahí vamos. Pegar Estilo A Estilo. Ahora si hago clic en mi pequeña flecha de panel de ocultar, ahí vamos. Eso se ve muy bien. Eso solo se siente un poco más creativo. Ahora cuando alguien se desplaza hacia abajo desde arriba, está viendo todo exhibido en un hermoso patrón de la manera en que no está necesariamente en una cuadrícula, sino que está en una cuadrícula Si eso tiene algún sentido creativo, simplemente hagamos clic en la flecha aquí. Ahora, sólo una cosita. Cuanto más miro esto, no lo sé. Creo que solo está un poco fuera en cuanto a la colocación de cada imagen. Creo que quiero que sea como más alto en los dos en el centro y luego un poco más corto en los de la izquierda o la derecha. Lo que voy a hacer es volver a mostrar el panel. Todo lo que voy a hacer es arrastrar una imagen de un lugar a otro solo para jugar con ella. En primer lugar, quiero que esta imagen de la niña se siente en la columna dos en la parte superior de aquí. Todo lo que voy a hacer es pasar el cursor sobre el icono rosa, editar imagen Mantenga pulsado el mouse y arrástrelo hasta arriba arriba de esta siguiente imagen. Ahí estás, se deja caer en ese contenedor. Se puede ver por aquí en la estructura dos imágenes en este contenedor. Ahora tenemos cuatro quizá. Vamos a mover éste de aquí abajo, vuelta al lugar donde estaba la última imagen. Sí, ahí vamos. Bien, ahora estoy muy contento con ese diseño. Ahora, cada contenedor, bueno, tiene una altura diferente, así que no se alinean exactamente. Ninguna de estas secciones se alinean, ¿saben que no funcionan como un pequeño laberinto para que tus ojos corran por ahí Creo que es una gran exhibición de galería de todos mis mejores trabajos. Volvamos al editor y guardemos el borrador. 7. Portafolio: animación de galerías y Lightbox: Ahora quiero mostrarte dos cosas más geniales que puedes hacer dentro de elementor con tus imágenes Vamos a ver la pantalla de la caja de luz. Eso es lo que verán tus usuarios si fueran a hacer click en una imagen. Pero antes que nada, vamos a mirar la animación. Lo que quiero mostrarte para la animación, tienes muchas opciones diferentes para este elementor interior Lo que podemos hacer es tomar cada elemento y podemos hacer que aparezca de cierta manera. Comenzaré mostrándote cómo funcionaría esto para toda la grilla. Simplemente voy a hacer clic en la grilla y luego vendré aquí para avanzar. Lo que estamos viendo aquí son los efectos de movimiento. La parte que queremos ver es la animación de entrada. El momento está configurado como predeterminado, lo que solo significa que no hará nada. Sin embargo, entra, desplázate el menú y en realidad tienes un montón de opciones diferentes aquí. Simplemente elige uno al azar o algo así. Estas siempre son divertidas. Buscadores de atención. Rebote solo significa que toda la cuadrícula simplemente rebotará mientras alguien se desplaza hacia abajo a esa parte de tu página flash, en realidad es bastante agradable Pulso, sí, hay un montón de diferentes cosas raras que puedes hacer con eso. Esto solo depende tu estilo y de lo que más sientas te representa. No obstante, a pesar de que me gusta ser creativo, me gustaría mantenerlo bastante simple y bastante ordenado. El que siempre elijo para esto es un simple desvanecimiento y se puede ver que llegó bastante rápido ahí Sin embargo, puedes jugar con esa duración de animación establecida en normal. Sólo configúrelo a lento. Ahí vamos. Esa es una entrada mucho más agradable, más lenta Lo que tenemos ahí es animación para que toda la cuadrícula se muestre a la vez. Pero lo que quiero ser un poco más creativo y hacer algo ligeramente diferente para cada imagen dentro del contenedor. Sólo apaguemos eso. Para ello, y da click en esta pequeña x aquí. Y eso lo lleva de vuelta a la configuración predeterminada o puedes elegir no. Ahora, toda la cuadrícula no tiene animación de entrada. Lo que voy a hacer es cambiar la animación de entrada para cada imagen. Vamos a ir de nuevo al primero, 51, dar clic en Edita imagen, luego ven aquí a Avanzado y desplázate hacia abajo hasta Efectos de movimiento Y esto es sólo para esta animación de entrada de imagen. Nuevamente, elegiré fade in. Nuevamente, elegiré Slow. Ahora, cuando un usuario se desplaza hacia abajo hasta esta parte de la página, solo se mostrará esa sola imagen Quiero que todos ellos se muestren. Si solo fuera para seleccionar cada imagen y elegir exactamente lo mismo, todo aparece al mismo tiempo. Eso es exactamente lo que solo tratamos de evitar de la grilla. Animación. Por ejemplo, si solo fuera a elegir el siguiente, bucear en Fiji. Entra aquí, elige efectos de movimiento, entrada, animación, fade in y luego elige Lento. Te diremos qué, solo echemos un vistazo a cómo se ve eso. Ahora para que los usuarios hagan eso, subamos aquí, hagamos clic en Guardar borrador. Entonces solo hagamos clic en este ojito para previsualizar los cambios que me llevan a la página. Así verán todos tus usuarios tu sitio web. Entonces mientras me desplace hacia abajo hasta la sección de la galería, verás a ambos desvanecidos ahí dentro Solo hazlo un poco más rápido para que lo veas. Vamos a recargar Ahí vamos. Entonces ambos se están desvaneciendo, pero ambos se están desvaneciendo a la misma velocidad Solo volvamos a nuestro editor. Lo que quiero ver aquí es un retraso de animación, un ligero retraso de cuando ocurre la animación. Podemos ver el primero aquí, 51, con efecto de movimiento. Ese puede quedarse como está. Vamos a bucear a Fiji. Vamos a los efectos de movimiento lento. Pongamos un retraso de 500 milisegundos. Te voy a mostrar la velocidad de eso en un segundo, luego verdaderamente Oz Cambiemos eso, 12,750 millones. Cambiemos eso, 12,750 millones Guardemos la pista, previsualicemos los cambios luego. A medida que me desplace hacia abajo, verán que estas tres imágenes llegan a velocidades ligeramente diferentes. Volvamos a cargar toda la página. Ahí vamos. Eso es perfecto. Estas tres imágenes llegan en momentos ligeramente diferentes. Todo lo que quiero hacer ahora es elegir una hora completamente aleatoria para cada imagen para que todas se desvanezcan, pero ninguna al mismo tiempo. Volvamos al editor y los cambiaré a todos a una velocidad diferente. Simplemente trabajaré en cada uno de estos súper rápido, pero tómate tu tiempo sobre esto tú mismo. Juega con diferentes velocidades para cada una. Y sigue reabriendo y recargando la página para que encuentres un buen equilibrio que funcione a la perfección para Así aparece ahora la galería. Cuando se deslicen hacia abajo, verás que todos entran en momentos ligeramente diferentes. Ese es un estilo creativo realmente genial que puedes agregar a tu propia cartera. Vamos a recargar éste. Ahí vas. Así. Tienen una grilla que se presenta de una manera algo genial, que también está animada de una manera muy genial. Eso captará la atención de la gente cada vez. Ahora una cosa más a tener en cuenta es la configuración de la caja de luz. Volvamos al editor. Ahora, me gustaría mostrarles la configuración de la caja de luz. Esto es algo que puedes agregar a tu sitio web de portafolio. Cuando los usuarios vienen a visitarla, pueden dar click en la imagen, verla mucho más grande, e enterarse un poco más lo que hiciste en este trabajo. Esto es muy fácil de configurar. Ven aquí a tu primera imagen y da clic en tu icono de editar imagen, Luego ven aquí al contenido de la izquierda. Lo que estamos viendo aquí es la sección de enlaces. Tienen dos opciones. En este menú desplegable, puedes agregar en una URL personalizada si quieres enviar usuarios a través de un sitio web diferente, tal vez para mostrar el proyecto en el que trabajaste. Pero lo que estamos viendo aquí es la caja de luz, así que escojamos archivo multimedia. La caja de luz está establecida en los ajustes predeterminados. Lo que esto significa es cuando alguien llega a tu sitio web y hace clic en la imagen, esto es lo que verá. Simplemente haga clic en la flecha para que pueda ver más. Se ve la imagen que se muestra casi a pantalla completa con un par de iconos por aquí. Esto es culpa, Screen out, Share, y cierra. Tiene este fondo negro claro que se ve realmente genial y esa es una excelente manera de mostrar todo tu portafolio. La gente puede dar click en lo que les gusta en la galería y elegir ver mucho más. No obstante, quiero hacer algunos cambios a esto. Me gustaría cambiar el color del fondo. Quiero que aparezca un poco más de información aquí abajo de la imagen, solo para explicar el proyecto en el que trabajé a todos mis usuarios. Cerremos éste en esa flecha. Vuelva a hacer clic en esta imagen, asegúrese de haber guardado su borrador antes de hacer esto. Entonces ven aquí al panel de la caja de luz y haz clic en esto. Esto mostrará la configuración del sitio. Es la caja de luz dentro de la configuración del sitio, lo que significa que lo que cambie aquí cambiará en todo el sitio web. Tienes algunas opciones que puedes elegir aquí. Estos son los cuatro íconos que estamos mostrando en la parte superior derecha cuando miramos esto antes. Así que zoom de pantalla, comparte, etcétera. Entonces verás título y descripción. Esto es lo que se mostrará debajo la imagen que ya está configurado para mostrar. El problema es que no lo hemos configurado para esta imagen ni para ninguna de las imágenes. Te voy a mostrar cómo hacerlo en unos segundos. Lo primero que queremos cambiar es el color de fondo. A mí me gusta ese negro claro. Pero como tengo un sitio web muy audaz y brillante, como un color más brillante, atrevido, para volver a entrar ahí, puedes venir aquí, hacer clic en este icono y elegir tu propio color. O una forma más rápida de hacer esto, o una sobre la que tengas control total, es hacer clic en este ícono aquí. Esto te mostrará los colores globales de tu sitio web. Todos estos han entrado como la configuración predeterminada. Elemento interior o color primario, Color secundario, texto, color, acento. Si tuvieras que hacer clic en este icono de aquí, puedes ir donde puedes cambiar esos ajustes. Lo que significa que en cualquier parte del sitio web, si eliges este color primario, cambiará en todo el sitio web. No obstante, por ahora, estoy muy contento con este color azul audaz, brillante, A Ion. Voy a elegir esa entonces. Para ser sinceros, no hay nada más que realmente necesite cambiar aquí. Pero sí tienes otras opciones. Puedes jugar con estos tú mismo. Tamaño de icono de barra alta, pongamos eso un poco más alto. Estos son los pequeños íconos que estaban a la extrema derecha. Eran un poco pequeños, tal vez. Vamos a ponerlos 225. Guarda esto y luego vuelve a entrar si necesitas cambiar algo o llevarlo de vuelta a como era antes. Guardemos esto y luego volvamos al editor. Entonces hagamos clic en este primer icono y veamos cómo se ve eso. Ahí vamos, vamos a dar clic en la flecha. Ahora vemos este fondo mucho más brillante, audaz, azul. Aquí vemos iconos un poco más grandes en la parte superior. Creo que funcionan muy bien. Y son geniales que estén en blanco porque creo que eso funciona bien en este color de fondo. Lo que puedes ver aquí abajo, esto es lo que miramos hace un segundo, el título y descripción de la imagen que se mostrará aquí abajo. El problema es que no lo hemos configurado a esa imagen. Volvamos al editor. Vamos a cerrar éste de aquí arriba. Después haga clic en la flecha, luego seleccione su primera imagen. Entonces, salte por aquí. Dice Choose Image y da click en la imagen. Nuevamente, esto no cambiará qué imagen se elige. Te permitirá editar tanto el título como la descripción. La información de texto para cada imagen siempre se configura aquí en el lado derecho. Ahora el título, esto es lo que ya se podía ver en la caja de luz, se ha tomado automáticamente del nombre del archivo. Por lo tanto, tiene todas estas pequeñas, estas pequeñas líneas entre cada palabra. Yo sólo voy a sacar esos. El resaltado, eliminar, luego la descripción. Bueno, aquí es donde solo puedes escribir en la descripción de qué trata la imagen. Esto es de una galería de arte llamada 51. Ya escribí mi descripción. Voy a pegarlo aquí. Ahí vas. Un bolso tote con un logo 51 que muestra la marca en blanco y negro. Perfecto. Ahora vamos a elegir Seleccionar. Ahora cuando haga clic en la imagen, verá cómo se ve ahora. Así que vamos a hacer clic en la flecha. Tenemos el fondo azul brillante y luego tenemos el título y la descripción. Esto es genial. Los usuarios pueden llegar al sitio web, pueden elegir una imagen, pueden hacer click en ella, y pueden averiguar mucho más. Haga clic en su flecha. Ahora todo lo que necesitas hacer es pasar por cada imagen y hacer esto por cada una, porque obviamente la descripción es diferente para cada una. Vamos a hacer clic en esta editar imagen aquí arriba a la izquierda o título de la imagen. Saquemos de nuevo estos guiones luego escribamos en la descripción Si bien se trataba de dos portadas para bucear en Fiji patrocinadas por la Junta de Turismo de BG. Y seleccione ahora, cuando haga clic en esa, verá la información completa a continuación. Ahora todo lo que tengo que hacer es pasar y agregar esto a cada imagen. Cuando eso se hace, todos estamos preparados. Sólo vamos a guardar esto. Echemos un vistazo a los cambios. Verás lo que tenemos. Tenemos al héroe, tenemos una galería animada muy chulo que aparece. Y cuando los usuarios hagan clic en una sola imagen, verán esa imagen mucho más grande. Y van a encontrar mucha más información sobre el trabajo que hiciste. 8. Portafolio: pie de página de contacto: Por lo que ahora agregaremos el pie de página de su sitio web, el final de toda la página. El final del sitio web, el cierre de sesión. Supongo que lo que quiero poner aquí enlaces a mis páginas de redes sociales y un mapa para que la gente pueda venir a visitarme. Empecemos de nuevo por aquí. Agreguemos un nuevo contenedor. Vamos a hacer clic en el Plus. Escojamos flex box. Lo que quiero aquí son dos columnas. Otra vez. Sin embargo, quiero que la columna de la izquierda sea un poco más pequeña porque en lo único que me gustaría hay algunos íconos de redes sociales. Y luego quiero un mapa de mi oficina por aquí a la derecha. En lugar de escoger el 50, 50, escojamos éste primero, cambiemos la visualización de este pie. Queremos que se destaque de manera diferente a la anterior. Obviamente, aquí arriba vamos del rosa brillante al blanco. No quiero que el blanco entre en blanco. Necesito algo separado, lo contrario del blanco, el negro puro. Vamos a hacer clic en estos puntos aquí. Edita contenedor, sube aquí al estilo, elige Clásico, y luego vamos a elegir un color. Vuelva a dar click en éste, como dije antes, si arrastra este pequeño todo el camino hasta la parte inferior izquierda, eso va negro puro 00000. Eso es lo que quiero. Como puede ver, los dos contenedores internos están colocados ahí dentro, pero están hasta el borde. Lo que quiero es más acolchado en la parte superior e inferior. Lo mismo que tenía arriba. No estoy aquí para avanzar. Vayamos al relleno. Desvinculemos los valores entonces solo digamos que son 100 en parte superior y 100 en la parte inferior No, 100, no 1,000 Ahí estamos. Ahora tenemos un poco de espacio por encima y por debajo de lo que entraremos aquí. ¿Qué me gustaría añadir aquí? Bueno, solo quiero un pequeño título, un poco de firma, y luego algunos íconos de las redes sociales. Después agregaremos el mapa por aquí en el lado izquierdo. Vamos a subir al plus, vamos a ir rumbo, dejar caer eso en este contenedor. Sólo quiero llamar a este uno más aquí. Vamos a cambiar de nuevo la visualización de esto. Así que vamos a ir al estilo en el color del texto de fondo negro, eres blanco, Entonces tipografía, me gustaría que se mostrara la misma manera que el encabezado en la parte Haga clic en default, escriba en bunge, cualquiera que sea la tipografía que haya elegido para Ahí vamos. Eso me encanta. Una última cosa. Sube aquí al contenido Otra vez, asegúrate de que esto no sea un H1h2 Perfecto. Dejémoslo así. Me gusta mucho el tamaño de eso. No hace falta que sea una locura grande, como esta de aquí arriba, solo más aquí, punto, punto, punto. Debajo de esto, me gustaría agregar mis redes sociales, estoy por aquí para agregar elementos. Entonces tal vez lo puedas encontrar en este gran menú aquí. Pero es más fácil solo escribir el widget que buscas para iconos sociales, sociales. De nuevo, dragón cae por debajo de tu título. Asegúrate de ver la línea rosa a continuación. Ahí vamos. Esto se elimina en toda la configuración predeterminada. En primer lugar, la alineación está centralizada así. Para quedar alineado así se sienta por debajo de la m de más aquí. Entonces la forma es redondeada, tiene un borde curvo. Puedo elegir cuadrado, puedo elegir círculo, creo círculo. Entonces en cuanto a los íconos sociales, bueno, tengo Facebook, Twitter, o X como ahora se le conoce, y Youtube. No obstante, quiero presumir tres ligeramente diferentes. Quiero presumir Instagram, manos y trabajo de Dribble en cualquier industria creativa Entenderás lo que son Hants y Dribble. También hay excelentes formas de mostrar tu portafolio en las redes sociales. Para cambiarlos, hagamos clic en este primero aquí, Facebook. Este es el icono que se ha elegido para este enlace, obviamente Facebook. Vamos a hacer clic en el icono. Verás la biblioteca de iconos elementor. Aquí es donde puedes elegir cualquier ícono que te gustaría usar aquí, cubriendo la mayoría de los canales de redes sociales aquí. El que quiero es Instagram. No se puede ver de inmediato. Nuevamente, simplemente escriba el nombre aquí arriba, Instagram, y luego elija Insertar ahí. Nos cayó en el logo de Instagram, Twitter. Da click en el icono Nz para Youtube. Cambiemos eso a Dribble. Ahí está. Estos son los tres que quiero. Ahí vamos. Eso es presumir las tres cosas que me gustaría que mis usuarios vieran y en las que pincharan. En primer lugar, necesito agregar en la URL para cada uno de estos. Empecemos por aquí con Dribble. Como estamos en este, puedes escribirlo, o simplemente es más fácil de copiar y pegar. Pero permítanme simplemente escribir este. Al escribir, asegúrese de incluir HTPS, colon, luego drible, ripple B.com slash Entonces simplemente haz clic en este pequeño icono a la derecha dice Opciones de enlace. Asegúrate de que para algo como las redes sociales, para el sitio web de otra persona, siempre se selecciona para que se abra en una nueva ventana. Simplemente significa que abrirá una ventana separada. Eso significa que la gente sigue en tu sitio web. No se los quita. Déjame copiar esto. Https aquí. Diseño de barra de Hunt.com. Instagram. Spell it right.com slash John, diseño Todos mis enlaces y mis iconos están establecidos. Lo único que quiero cambiar, estoy contento con las cacerías y las impulsadas mostrando sus colores oficiales Pero para Instagram no ha elegido un color, ¿por qué? Porque Instagram no es realmente de un solo color. ¿Es un degradado con múltiples colores diferentes? Simplemente tiene este color de fondo negro que realmente no funciona en nuestro fondo negro en la selección de Instagram Aquí, vaya a Color, haga clic en este menú desplegable y elija Personalizado. Lo que quiero hacer, bueno, puedo elegir cualquier color que quiera poner aquí. No obstante, como esto es Instagram, y como es nuestro canal de Instagram, voy a elegir un color de agenda que he elegido en la parte superior. Vamos a traer eso de vuelta. Vamos a sacar a colación una estructura, luego vamos al contenedor en la parte superior de la página. Entonces ven aquí a la izquierda a darle estilo. Ahí verás el color que hemos elegido. Puedes pasar el cursor sobre él. Recuerda que lo más fácil, la forma más fácil es hacer clic en él y hacer una copia rápida. Después desplázate hasta la parte inferior en los íconos sociales, Instagram. Y lo que quiero cambiar aquí es el color primario. Vamos a dar click en éste. Pegar en mi código hexadecimal, eso se ve genial. Simplemente haga clic en la flecha aquí. Eso me gusta mucho. Se ven realmente geniales. Creo que el único problema que tengo con ellos es que son un poco grandes y no hay suficiente espacio, de veras, entre ellos. Si quieres cambiar algo así, muy fácil, asegúrate de tener los íconos sociales resaltados en el. Aquí tienes un estilo, aquí es donde puedes jugar con múltiples cosas diferentes. Tamaño, puedes simplemente arrastrar este hacia arriba y hacia abajo que cambian el tamaño de todo el asunto. relleno es obviamente el espacio alrededor del icono para que eso se ponga a cero a su alrededor. Bastante grande, Tal vez 0.5 espaciado. Este es el que quiero cambiar es permitirme cinco pixeles entre cada círculo. Vamos a poner un poco, presionarlo arriba y abajo 15. Ahí vamos. Creo que eso se ve mucho mejor. Entonces una última cosa que puedes hacer aquí, que es un ícono bastante divertido. Haga clic en eso. Simplemente coloquemos la animación para que cuando un usuario acuda a tu sitio web y pase el cursor sobre este ícono, pueda hacer algo muy genial Haga clic en su menú desplegable significa que crecen, encogen. Que se encogen. Solo juega con todos estos, quiero decir, algunos locos de aquí. Vamos a ver lo que tenemos. Skew. Eso es bastante genial en realidad. Sí, solo elige uno aquí que creas que más te convenga a ti y a tu personalidad. Simplemente me gusta que el loquense quiera ser así. Haga clic en la flecha. Sí, solo demuestra que se mueven así, eso no está activo y más probable que la gente haga clic en él. Bien, entonces esa es nuestra columna del lado izquierdo ordenada. Ahora vamos a dejar caer un mapa aquí. Nuevamente, sube aquí a tu más un tipo de elemento en el mapa de palabras, Google Maps. Eso es lo que vamos a agregar, arrástralo y suéltalo en tu contenedor. Esto se configura automáticamente para mostrar un mapa de Google. Ahora, acaba de elegir una ubicación predeterminada, que es de última hora, Londres, pero queremos cambiar eso a donde está nuestra oficina. Ahora bien, para aquellos de ustedes que alguna vez hayan visto la película, Buscando a Nemo, conocerán de esta dirección en Australia que es 47 Wallaby Vamos a ponerle eso. Ahí vamos. Se escogió 47 Wallaby Street que está en Blackwall en Nueva Y con lo que puedes jugar aquí es el zoom. Como pueden ver ahora mismo, está bastante lejos, lo que le mostrará en qué parte del país se encuentra mi oficina. Pero vamos a acercarnos un poco o alejemos un poco, a ver qué pasa. He acercado, he cambiado eso a 13 y eso acaba de mostrar donde mi oficina solo está mostrando los pueblos que están alrededor en las playas y toda el agua y esas cosas tal vez Vamos a ir un poco más hasta 15, creo. Sí, ahí vamos. Entonces podemos ver que es Wallaby Street y podemos ver dónde está eso en relación con cualquier otra cosa Ahora, también puedes jugar con la altura de esto, pero como no tengo mucho en el lado izquierdo, realmente no quiero hacerlo mucho más grande de lo que es, quiere ser honesto. Simplemente puedes jugar con una configuración de píxeles. De hecho, pienso un poco más pequeño. A lo mejor 250 pixeles. 150. 250, tal vez 300, creo. Sí, creo que se ve perfecto. Ahora mi pie está todo ordenado más aquí, Íconos de redes sociales y un mapa de donde se encuentra la oficina. Volvamos aquí. Vamos a guardar el borrador, luego vamos a previsualizar los cambios. Lo que puedes ver aquí es ahora un sitio web completo. Verás lo fácil y rápido que fue hacer eso. Todo lo que tienes que hacer ahora es seguir lo que te he mostrado aquí y recrearlo en tu propio estilo Tu imagen de aquí a la izquierda, elige una imagen que mejor te represente a ti o a tu trabajo. Elija su título de su sitio web por aquí, tal vez el nombre de la empresa o su nombre. Luego elige tu exhibición de galería como quieres que se muestre, qué imágenes eliges y luego tu pie. Elige lo que quieras aquí, solo tienes los íconos de las redes sociales. Puedes incluir un número de teléfono o una dirección de correo electrónico si quieres que la gente te contacte directamente. Así que solo quiero que sepan dónde está mi oficina y luego puedan encontrar las indicaciones de cómo llegar allí. Desde el punto de vista del escritorio, está todo ordenado. Ahora tenemos que ver cómo cambiarlo tanto para tablet como para móvil. 9. Diseño de teléfonos móviles y tabletas: Tenemos la versión de escritorio de tu página web de tu portafolio todo ordenado. Sin embargo, necesitamos asegurarnos de que funcione perfectamente en computadoras de escritorio, tabletas y dispositivos móviles. La forma en que se configura Elementary es que la tableta hereda las secciones del escritorio y móvil hereda las secciones de la Necesitas trabajar en ello en ese orden, aunque puedas pensar que el móvil es el trabajo más importante en eso. Una última solo significa que obtienes todo funcionando en el escritorio, lo editas para la tableta y luego lo editas para el móvil. El escritorio está todo ordenado. Vamos a hacer clic en este icono de aquí arriba para cambiarlo a tablet, y podemos editar Tablet. Verás en primer lugar, cómo se ve todo. Todo lo que ha hecho es copiar exactamente lo que hicimos en el escritorio y lo cambiamos por tablet. Esto casi está ahí, creo, por la forma en que la gente ve las cosas en la tableta, ya sea que la esté mirando en retrato o en paisaje. Creo que recrear lo que hemos hecho en escritorio sí funciona Sin embargo, hay algunos problemas con el espaciado y el dimensionamiento. Empecemos por el héroe. El principal problema aquí es obviamente el tamaño del texto de aquí, ¿ verdad? Vamos a hacer clic en esa. Entonces vengamos aquí al estilo, vamos a Tipografía. Da clic en este icono, luego vamos a cambiarlo. Está ajustado a 130 píxeles, lo cual es genial tenerlo. Ese gran escritorio, no tablet. Quizá vayamos a aproximadamente la mitad de ese tamaño, 65. Quizá un poco más grande. Simplemente puedes seguir presionando esta pequeña sección arriba y abajo de aquí. Tal vez 90. Creo que eso funciona muy bien, ¿no? Creo que todavía me gusta ese 50, 50 dividido de izquierda a derecha. Y creo que eso se muestra muy bien. Sin embargo, mi cara, guau, se puede ver. Pero un poquito, mi pelo está cortado. Simplemente cambiemos la posición de la imagen de fondo que como recordarás, está dentro de este contenedor aquí. O haz clic en tu icono gris o ven aquí a Estructura. Entonces ven aquí a la izquierda y elige Estilo. Como puedes ver aquí, esto nuevamente ha heredado lo que hicimos para escritorio. Ahora lo tenemos fijado al centro. Creo que centralizado es bueno, pero veamos cómo se ve. Centrado a la izquierda en eso pierde mucho más de mí. Sólo puedes ver mi codo. Intentemos a la derecha. Nuevamente, no lo suficiente. Lo que tengo que hacer aquí es elegir la última selección sobre esto, que es costumbre aquí. Puedo jugar con la posición X y la posición Y. La posición Y está bien porque va hasta la parte superior de la imagen. Y la parte inferior de la imagen, es solo la posición X. Juguemos con esto. Arrastra este pequeño ícono de izquierda a derecha y consígalo para que estés contento con él? Creo que tal vez vamos a correr hasta un buen número, 350. Menos 350. Ahí vamos. Hago clic en mi flecha aquí. El murciélago es perfecto. Estoy centralizado. Estoy sonriendo, y se puede ver el nombre de mí a la derecha aquí en la tableta. Perfecto. Ahora vamos a desplazarnos hacia abajo hasta esta pantalla. Ahora tenemos un par de opciones diferentes aquí. Creo que esto sí funciona como una cuadrícula de cuatro columnas. Sin embargo, puedes cambiar eso si lo cambias aquí, no cambiará eso en Desktop. Si vienes por aquí a la derecha y haces clic en Grid, podrás ver diferentes opciones para escritorio, tablet y móvil. Si quisiéramos que fuera a dos columnas, yo simplemente cambiaría este número aquí a dos. Entonces si hago clic en la flecha, se puede ver que está mostrando las imágenes de una manera diferente. Ha pasado de cuatro columnas a dos columnas. obstante, no creo que eso funcione muy bien porque entonces estás consiguiendo espacios raros aquí y espacios raros. Creo que sólo funcionaría de esta manera si fueran cuatro columnas o una columna. Echemos un vistazo a una columna. Bueno, eso es bastante asombroso, ¿verdad? Está mostrando todo en ancho completo. obstante, no sé, creo que me gustaría añadir cuatro. Creo que voy a poner eso de nuevo. Y creo que voy a ir por una sola columna en el móvil como la tenemos ahora. Es lo mismo, está en escritorio. Solo un pequeño problema aquí es solo el espacio entre el borde de la pantalla. Podemos cambiar esto. Solo necesitamos un poco de relleno extra. Vamos a hacer clic en estos puntos en la parte superior para editar el contenedor de aquí para volver a avanzar, se hereda lo que habíamos configurado para Desktop. Si tuviera que hacer clic en éste y escribir un cero, lo lleva de nuevo a cero. Vamos a desvincularlos entonces. Panning en la parte superior. Bueno, creo que deberían ser un poco más pequeños. Tal vez 50. Eso es bueno. La parte inferior 50. Sólo necesito un poco de relleno a la derecha y a la izquierda. Tal vez probemos 25 píxeles a la derecha, 25 píxeles a la izquierda. Vamos a hacer clic en la flecha o amarla. Ese es un gran movimiento para bajar del héroe a la sección de galería. Y adivina qué, Cuando hago clic en uno de estos, todavía me sale la pantalla. Se cambia automáticamente eso a una pantalla de ancho. En tableta, esa es la galería seccionada, ahora es solo el pie Creo que me gusta esto de aquí todavía. Pero a lo mejor no deberían ser dos columnas. A lo mejor necesitamos cambiar eso a una sola columna. Vamos a hacer clic en los puntos aquí. Lo que vamos a hacer es editar el layout de las columnas internas. Solo en tableta, estamos en el contenedor principal de retención. Ven aquí a la maquetación. Lo que tienes aquí es dirección. Como puedes ver aquí, va en una fila que es horizontal, Dos columnas, una a la izquierda, otra a la derecha. Si hago clic en éste, lo cambiará a vertical. Ahora está apilado, y eso funciona mucho mejor en tabletas. Siento que solo necesitamos jugar alrededor del espaciado de todo aquí. En primer lugar, vayamos al contenedor principal. Vamos a avanzar otra vez. Simplemente hagamos lo que hicimos arriba y juguemos con los ajustes de esto. De hecho, quiero hacer exactamente la misma configuración de relleno. Voy a escribir 50 aquí. Desvincula el cambio, la derecha a 25 y la izquierda a 25. Ahora tenemos el mismo relleno que teníamos arriba, un bonito espacio de 50 píxeles en la parte superior e inferior de 25 píxeles a la izquierda y a la derecha. Sin embargo, como puedes ver, bueno, es como cambiar las cosas alrededor del mapa, no va hasta el borde. Entonces cuanto más aquí, bueno eso es en dos líneas. Quiero que eso sea en una sola. La razón de esto es solo el espaciamiento de los dos contenedores internos. Este se fijó en 33% y éste se fijó 66% un tercio, y 23'. Ahora que están sentados uno encima del otro, sin embargo, eso debería ser del 100% para cada uno. Si lo cambio aquí, no lo cambiará desde Escritorio. Tomemos este primer contenedor. Da clic en tu caja gris, luego por aquí, en lugar de píxeles, cambia ese 2% luego escribe 100 aquí. Ahora veremos que el ancho completo de este contenedor es el mismo que el ancho del contenedor de retención. Hagamos lo mismo para el mapa. Envió 100. Eso se ve mucho mejor. Ahora, prefiero mucho esa exhibición. Como dije, entenderemos que lo que sea que cambiemos aquí no cambia. En Desktop, siempre puedes volver atrás y comprobarlo. Haga clic en Escritorio, eso sigue siendo dos columnas que van de izquierda a derecha, mientras que en la tableta está apilada. Esa es nuestra versión tablet. Eso es todo lo que funciona el héroe. Trabajos de galería Obras. Ahora echemos un vistazo al móvil. De nuevo, esto se hereda todo lo que hicimos en tablet. Por eso estas dos columnas están ahora apiladas. Vamos a desplazarnos hacia arriba y comencemos con el aquí. Este es ligeramente diferente. ¿Por qué? Bueno, porque es móvil. Por lo tanto, una columna a la izquierda y una columna a la derecha. Eso nunca iba a funcionar, ¿verdad? Es demasiado delgada para eso. Lo que se hace es apilar las dos columnas una encima de la otra. Todo lo que necesito hacer aquí es jugar con el tamaño y el espaciado de cada uno. En primer lugar, vamos a cambiar aquí el tamaño de este texto. Ven a la tipografía. 90 es demasiado grande para móviles. Vamos a cambiarlo a 50, a lo mejor a 60. Creo que eso es bastante bueno. Sin embargo, sigo pensando que hay demasiado espacio en la parte superior de esto y no hay suficiente espacio para mí en la parte superior. Doy click en la flecha mostrando menos espacio ahí. Lo que tenemos que hacer es agregar un espaciador. Esta es una columna vacía, esencialmente, No hay imagen dentro de ella. Es solo del tamaño de los contenedores a su alrededor, porque éste está apilado, por eso este es mucho más pequeño que el de abajo. Agreguemos un espaciador de aquí al elemento. Da clic en el separador más elige, otra vez, solo escríbalo aquí. Si no puedes verlo y arrastrarlo encima de la columna por aquí, entonces aquí es donde puedes jugar con el espacio. Vamos a usar esta barra de arrastre de aquí. Entonces vamos a conseguirla a una talla perfecta. Creo que tal vez 260 píxeles es perfecto. Vamos a hacer clic en la flecha. La imagen de mí mismo es mucho mejor. Y luego el texto, bueno, todavía se sienta debajo de la imagen y se puede ver todo de una sola vez. Todavía tiene el mismo impacto que vimos en computadoras de escritorio y móviles, pero ahora solo está apilada en lugar de en columnas separadas a la izquierda o a la derecha. Ahora vamos a desplazarnos hacia abajo hasta la sección de galería. Lo que se hace aquí automáticamente es cambiar estas cuatro columnas a una sola columna en el móvil. Eso es definitivamente lo que queremos. A medida que nos desplazamos hacia abajo, solo verás cómo funciona todo esto. No hay espacios aleatorios entre cada tableta. Tiene el mismo ajuste entre cada imagen. Eso funciona muy bien. Nuevamente, esto se hereda el padding que configuramos para tablet. Solo cambiemos eso por móvil. Dale un poco más de espacio. Vamos a desplazarnos hacia arriba. Da click en estos puntos o elige ese contenedor de aquí en estructura, si sabes dónde está eso. Como pueden ver se trae en el 50 y el 25. Creo que eso es demasiado por todos los bordes. Creo que tal vez como 15 pixeles por todas partes. Sí, eso prefiero mucho. No creo que necesite un gran espacio en la parte superior y no necesita tanto espacio por aquí. Fuera, se ve fantástico. Nuevamente, permítame usar un clic en una de estas pantallas así. Ahora tenemos la imagen en la parte superior y el texto a continuación. Pero se convierte perfectamente para su uso en computadoras de escritorio, tabletas y móviles. Hero está buscando grandes galerías, luciendo fantásticas, para ser honesto. Creo que esta sección de Pota también está funcionando muy bien. Todo lo que voy a hacer es hacer clic en estos puntos. Cambia esta configuración a lo que configuré para la galería de arriba, solo por consistencia de 15. Creo que eso funciona muy bien a la izquierda y a la derecha. No obstante, debido a que es el pie de página, creo que necesita un poco más de espacio por encima y por debajo solo para darle un poco más de espacio al texto y a los iconos. Vamos a desvincularlos entonces. Vamos a ver en la parte superior, tal vez cambiar eso a 30. Doble en la parte inferior, también 30. Ahí vamos. A mí me encanta. Fue así de sencillo tomar todo lo que hacías en el escritorio y simplemente cambiarlo un poco para tablet y móvil. Echemos un vistazo a los tres ahora. Esto es Desktop, luciendo genial. Nuevamente, nada ha cambiado porque lo hicimos en este orden. Empezamos con el escritorio, luego nos mudamos a la tableta y luego al móvil. Eso es escritorio. Esta es tableta también. Perfecto. Esto es móvil. Me encanta. Por lo que ahora tienes un sitio web completo de portafolio. Sólo una cosa más tenemos que hacer. Cerremos esto, y publiquémoslo. Hagámoslo vivir. 10. Lanza tu sitio: Entonces ahora que tu sitio está publicado, ven aquí al ícono de Elementor a la izquierda, y luego sal a Wordpress Después da click aquí arriba en este ícono de Wordpress. Y luego una última cosa para configurar, entra aquí a la apariencia y elige personalizar. Ignora lo que ves por aquí a la derecha. Estas son solo configuraciones básicas de wordpress. Estas son cosas que puedes hacer fuera de Elementor, pero tu página no mostrará la forma en que podamos verla ahí a la derecha Ahora bien, lo único que quiero cambiar aquí es la identidad del sitio. Así que da click en éste. Como puedes ver aquí, está tomada en el título del sitio. Esto es lo que configuré en Elemental antes. No obstante, el lema, solo dice mi blog de WordPress. Ese tipo de entró automáticamente. Lo que en realidad quiero escribir aquí es solo una frase sobre quién soy y qué puedo ofrecer a los clientes. Así que voy a pegar éste en. Y he dicho John Wolfgang Miller, estudio creativo que trabaja con impresión digital y branding Simplemente resumirse en una sola línea. Esto ayudará cuando la gente te esté buscando en Google. Después las dos últimas cosas, tu logo y el ícono de tu sitio. Nuevamente, este es el logotipo de su empresa. No aparece en tu sitio web en este momento, pero puede aparecer en las búsquedas de Google. Y el ícono de tu sitio es el pequeño pequeño, como puedes ver aquí que aparece en las pestañas del navegador cuando estás buscando en Internet, si tienes múltiples pestañas diferentes abiertas, será el pequeño logo minúsculo que está al lado del título de tu sitio web. Entonces, para elegir esto, voy a usar el mismo logo para ambos. Haga clic aquí para seleccionar Logo. Si ya lo tienes subido, eligelo de la mediateca. Si no, haz clic en Subir archivos y búsquela en tu computadora. Este es el que he elegido. Este es el logo de mi empresa que tiene mis iniciales en él. Así que voy a elegir eso, seleccionar. Omitir recorte. No necesito recortar la imagen. Es la forma y el tamaño perfectos tal como es. Y luego escojamos el icono del sitio. Va a ser exactamente la misma. Solo para esta, y verás que las dimensiones de imagen sugeridas son 512 por 512 píxeles. Ese es exactamente el mismo tamaño que he establecido para este. Después simplemente haz clic en Publicar. Después da click aquí en el ARL y ve a esta llamada Configuración de la página principal Aquí es donde eliges qué página de todo tu sitio web será la página principal. El primero que todo el mundo ve cuando visitan tu sitio web. Entonces aquí, elige una página estática, y desde este menú desplegable, elige la que acabamos de configurar. Entonces aquí lo he llamado John Wolfgang Design. Eso es. Sus sitios web ya listos para ir, haga clic aquí arriba en publicar. Y luego cierra esta página por aquí haciendo clic en la X. Así que ahora tienes un sitio web en vivo, y si quieres mis comentarios sobre el sitio web Build, solo usa el nombre de dominio que WoZma te dio cuando te registraste Sin embargo, si este es un servicio que quieres hacer vivo para que todos en el mundo lo vean, podemos cambiar el nombre de dominio uno que hayas comprado en otro lugar. Entonces, para hacer esto, vuelva a iniciar sesión en su cuenta de WoZma y haga clic en aplicaciones implementadas recientemente en el sitio web que acabamos de configurar Y luego aquí abajo, da clic en Configurar Dominios. Entonces aquí es donde puedes agregar un nombre de dominio que quizás hayas comprado en otro lugar. Uno de los lugares más populares para comprar un nombre de dominio es algo así como Go Daddy. Entonces, si has comprado eso, puedes señalarlo al sitio web que acabas de construir. Así que toma ese nombre de dominio y póngalo en esta casilla de aquí. Y luego haz clic en Agregar tienes algunas opciones aquí. Solo tienes que seguir adelante con el recomendado en la parte superior aquí, lo que significa que funcionará con la versión WWW y sin la WWW. Y te compran a través de esta página, y estas son las dos líneas de código que necesitas agregar a tu proveedor de DNS. Entonces ese es el proveedor del sistema de nombres de dominio, para que tal vez Go Daddy dominios locos, uno de estos servicios en línea. Cualquiera de estos que estés usando, si no está claro dónde ingresar esto, envíame un mensaje aquí, y te avisaré para ese servicio específico, cómo configurarlo Entonces tenemos que entrar y configurar este código de registro A aquí y este registro de nombre C aquí. Y cuando todo eso esté hecho, simplemente haga clic en Refrescar en ambos. Puede tomar cualquier cosa hasta 72 horas para trabajar realmente, pero eso normalmente ocurre dentro de una hora más o menos. Así que sigue probando tu nombre de dominio, y cuando esté todo configurado, esto es lo que verás. Llevará a los usuarios a través del sitio web que hayas configurado usando el nombre de dominio correcto, y podrás compartirlo en todo el mundo, a través redes sociales, contarle a todos tus amigos. 11. Gracias: Gracias por ver toda esta clase. Espero que hayas aprendido mucho más sobre elemental y ahora tengas un portafolio de aspecto impresionante. Cuando el sitio esté listo, asegúrate de publicarlo aquí en la sección del proyecto a continuación. Y te daré mis comentarios de inmediato. Si tiene alguna pregunta sobre algo de la clase, publique eso en discusiones y le responderé lo antes posible. Y da click en mi nombre a continuación para ver mi perfil completo de Skillshare. En ahora verás todas mis clases, más de las cuales son sobre elemental y también te preguntas sobre subir imágenes a tu página web. Y que no se olvide de seguirme. Entonces lo averiguas cada vez que subo una clase completamente nueva. Está bien, eso es todo. Que tengas un gran día.