Transcripciones
1. Cómo crear sitios web profesionales Witohut: He estado tratando de aprender a construir sitios web. O tal vez eres un diseñador que quisiera ofrecer servicios de profundidad web a tus clientes. Bueno, ya sabes, diseñar es una cosa, pero luego convertir eso para diseñarlo en un sitio web real en vivo. Bueno, eso es algo completamente diferente. Y para muchos, esto puede parecer una especie de brujería b. Y muchos simplemente se rinden y rápido. Pero por suerte, no tiene por qué ser así. Porque en este curso aprenderás a construir sitios web desde cero sin la necesidad de codificar nada. Y para eso, usaremos constructor de oxígeno, que te permite crear un control cualquier aspecto de tu sitio web. Y en el camino, aprenderás a construir encabezados, menús
sensibles, encabezados adhesivos, encabezados de superposición. Cómo Construir un héroe secciones dentro de deslizadores de ancho completo en fondo. Y cómo agregar iconos animados, cómo agregar foros de contacto, testimonios, blogs y publicaciones de blog, etcétera. Pero básicamente, aprenderás todo lo que hay que saber para crear un sitio web usando constructor de oxígeno. Simplemente me parece que es la mejor solución en este momento para crear sitios web profesionales, sobre todo si vienes de un fondo de diseño. Entonces si realmente estás interesado en aprender a desarrollar sitios web, la prueba futura espera, solo inscribirte en este curso ahora. Y realmente espero verte por dentro.
2. Introducción: Entonces dime, ¿has estado intentando aprender a desarrollar sitios web? O tal vez seas diseñador te gustaría ofrecer servicios web dev a tus clientes. Ya sabes, diseñar es una cosa, pero convertir ese diseño en un sitio web real. Bueno, esa es una historia completamente diferente y una historia más compleja, debo decir. Y para muchos, esto puede parecer una especie de Brujería. Cuando piensan en desarrollar sitios web, se intimidan y muchas veces simplemente renuncian. Pero por suerte, realmente no tiene que ser el caso porque hoy en día crear sitios web profesionales personalizados es realmente más fácil que antes. Entonces, ¿los puntajes son apenas eso? Bueno, déjame decirte primero qué no es este curso. Bueno, definitivamente no es otra palabra, cuerpo de prensa. Si eres un total Wordpress noob, te
aconsejo que primero aprendas lo básico y luego vuelvas a este curso. Ahora, Poderes de Guerra va a ser un entorno en el que estaremos trabajando, pero no nos vamos a centrar en ello en absoluto. Y aprenderás a construir cualquier tipo de sitio web usando algo llamado constructor de oxígeno. Ahora, el oxígeno y Builder es un constructor de sitios, lo
que significa que te permite diseñar, desarrollar y controlar básicamente cualquier aspecto de un sitio web, tus encabezados, pies de página, menús, blogs, colonos, plantillas para 04 páginas, y así mucho más. Y lo que es distintivo al respecto es que te
da un control total sobre su parte de desarrollo. Es, es realmente difícil de imaginar y diseñar que no se pudiera desarrollar con oxígeno. Y la gran mayoría de los diseños se
pueden convertir en sitios web sin siquiera tocar el código. Es decir, puedes usar las herramientas proporcionadas y no escribir una sola línea de código. Pero por supuesto, si necesitas algo más complejo, puedes agregar código extra porque el oxígeno te da total libertad. Y déjame ser claro. El discurso de ninguna manera es un pitch de ventas para el plugin. Ahora, nuestros puntos de vista y probados muchos otros constructores han utilizado Devi element o Visual Compositor de Vada theme ultimátum. Pero realmente nunca entregaron lo que esperaba. Y de verdad, sé que es un cliché,
pero a una vez que he encontrado oxígeno, nunca
he mirado atrás. Pero claro, tiene sus defectos. Es decir, al principio puede parecer intimidante. Y a mis diseñadores, no me gustan algunas de sus soluciones de usabilidad. Pero después de unos minutos, sobre todo si estás familiarizado con básicamente cualquier herramienta de diseño, anuncio y empezará a tener sentido. Y por supuesto, estoy aquí para guiarte. Entonces teman no una vez que
hayamos instalado oxígeno, comenzaremos a desarrollar un sitio. Y en el camino, aprenderás diversas herramientas y aspectos del plugin. Por lo que vamos a construir encabezados incluyendo encabezados pegajosos, pies de página y menús ,
vamos a agregar deslizadores, incluyendo un fondo de ancho completo deslizadores como los
que puedes, ya sabes, como el que puedes ver aquí. Por lo que agregaremos galerías, iconos, videos, y portafolios. Y por supuesto vamos a hacer todo muy responsable. Y para terminar el curso, agarraremos un listo hecho el diseño y lo recrearemos usando oxígeno. Y pasaremos del encabezado por las secciones principales con imágenes, iconos, transiciones todo el camino hasta un pie de página extendido. Y por cierto, esta será una página web en vivo. Podrás simplemente buscarlo en línea y podrás ver cómo funciona,
cómo funciona una vez que se desarrolla. Entonces realmente si has estado buscando un curso para
enseñarte a desarrollar sitios web personalizados profesionales. Y eso lo haría directo al grano. Creo que la investigación ha terminado. Entonces, solo saltemos directamente a nuestro primer video.
3. 2.11lo es creador de oxígeno: Entonces para construir nuestro sitio, vamos a estar usando el constructor de oxígeno. En el pasado han probado otros constructores como Devi o elementales, pero siempre fueron Mason algunas,
algunas características, sobre todo en cuanto a creación de bloques. Ahora tal vez en estos días algo, algo ha cambiado. Pero realmente cuando salió el oxígeno 3 o 3.1, verdad, ya sabes, estaba enganchado. Decidí conseguirlo. Decidí comprarlo porque realmente vi el potencial. El potencial. Y realmente finalmente encontraré algo que me permitiera construir los lados. Esa no es la forma en que realmente me gustaría. Entonces si vas a la página web de oxigeno builder.com, por supuesto, podrás leer alguna información de ventas sobre, sobre el oxígeno. Podrás consultar el tour del producto o ver los tutoriales. Tú, podrás comparar quizá el oxígeno o con eso,
con la competencia como Beaver elemental, Builder o Devi y constructor. Pero lo que me gustaría saber, como,
volcar su atención es que el oxígeno no es sólo un constructor de páginas, sino que también es un, un constructor de sitios. Ahora, la mayoría de estos constructores, definitivamente DV o elementales, usan temas, por lo que siempre hay que tener un tema. Se puede tener un tema gratis, pero siempre hay que tener uno. El oxígeno no usa temas, así que no tienes que preocuparte por ello. Y para ti como aspirante a desarrollador web y diseñador gráfico que quiera ofrecer más servicios a tus clientes, ofrecerte un desarrollador web servicios a tus clientes. Creo que una de las cosas más importantes sería que si obtienes oxígeno, en realidad es igual
que Dv. Dv, solo puedes comprar una licencia o byte una vez y
tienes las actualizaciones para siempre, actualizaciones de por vida. Y tienes tu licencia es válida para un número ilimitado de sitios web, por lo que no tienes que recomprar las licencias para todos y cada uno de los sitios que vas a crear. Por lo que es básicamente todavía esperemos para siempre una sola vez compra para la vida tipo de trato. Entonces este es solo un breve video solo para mojarte los pies, solo para mostrarte qué herramienta vamos a estar usando en este curso. Y en los próximos videos, vamos a echar un vistazo a cómo descargar el oxígeno, pero también cómo probar el oxígeno. Si primero quieres solo comprobar si realmente es algo para ti. Y podrás, gracias a la,
a este tipo de como una característica demo del oxígeno, podrás hacer exactamente lo que estoy haciendo en cuanto a construir nuestro sitio.
4. 2.2No lo buy prueba: Entonces el oxígeno es básicamente un plug-in. Y si estás familiarizado con los mismos fundamentos de Wordpress, que es una especie de prerrequisito para este curso. Como mencioné antes, oxígeno funciona como un plugin. Entonces una vez que, una vez que lo obtengas y cómo uno debe descargarlo, podrás subirlo igual que un plugin normal. Y podrás ingresar tu, ya sabes, tu clave de licencia y podrás obtener actualizaciones gratuitas y gratuitas para ese sitio web en particular. Y estamos a punto de hacer eso. Estamos a punto de subir el plugin. No obstante, si no estás convencido, si no quieres comprarlo, solo
puedes ir de la mano. Simplemente puedes desplazarte hacia abajo a, a este pie de página bien. Y verás esta opción aquí mismo que dice probar oxígeno. Entonces vamos a dar click en él. Y aquí dentro, en realidad puedes entrar allí una demo, un entorno de sandbox donde podrás usar oxígeno igual que lo utilizarías si decidieras morder, si decidieras descargarlo. Y aquí dentro puedes elegir la instalación en blanco, que creo que sería mejor porque realmente queremos construir nuestro letrero desde abajo. Y realmente queremos aprender todo, bueno, mayoría de las cosas que vienen con oxígeno, definitivamente todas las cosas que te permitirán empezar a usarlo de forma independiente. Pero por supuesto, también podrías elegir el ejemplo preconstruido Sitio Web, que cargaría algunos elementos de la biblioteca que viene con oxígeno. Pero voy a elegir instalar en blanco. Y después de unos momentos estamos escribiendo el Dashboard de WordPress. Y aquí dentro puedes ver que ya tenemos oxígeno instalado y somos capaces de usarlo igual que usarías oxígeno si lo compraras,
si lo descargas y lo subes a tu biblioteca de plugins de tu lado, por
supuesto, nos pusimos en nuestra Dashboard estándar de WordPress. Podemos agregar páginas, ya sabes, cambiar la apariencia y cambiar el manual, todas esas cosas. Entonces si no estás convencido de que quieres, que quieres comprar oxígeno, siempre
puedes probar Oxygen desde su página web. No obstante, ya estoy convencido. Por lo que voy a estar usando mi propia instalación. Voy a estar usando mi propia versión o licencia del plugin. Y supongo que podemos empezar solo a construir nuestra página web. ¿Por qué no?
5. 2.3 subir Oxygen a nuestro sitio: Entonces como puedes ver, me dieron una fresca a partir de 20-20 instalación de WordPress. Y si le echan un vistazo a mi barra de direcciones, van a ver localhost. Y eso es porque estoy ejecutando Wordpress localmente. Yo sólo decidí hacerlo así porque si fuera a ponerlo en un servidor en vivo, estoy podríamos experimentar alguna pérdida de conexión, tal vez algo de efectivo y problemas. Y realmente quería evitarlo. De verdad quería hacer las cosas lo más pequeñas
posible, lo más rápido posible. Porque por supuesto, no tendrás que esperar a que responda el servidor. Y entonces sólo tendremos que esperar a que mi computadora responda o todo debería ser mucho más rápido y más fácil de editar para mí después de eso. Pero de todos modos, si lo eres, si tienes instalado tu Wordpress solo servidor en vivo, claro que tendrías tu nombre de dominio aquí mismo. Y lo que tenemos que hacer es que tenemos que iniciar sesión. Entonces solo voy a escribir barra y luego solo WP dash admin. Y aquí solo voy a usar mis credenciales de inicio de sesión. Entonces en este momento podemos realmente subir el plugin. Entonces voy a ir a plug-ins, voy a añadir uno. Voy a subirlo. Yo sólo voy a tener que encontrarlo. Oxígeno 3.5. Y voy a golpear Instalar ahora. Una vez que esté instalado los van a activar. Estoy ejecutando un multi-sitio para que pudieras ver una red activar el botón, botón en tus servidores. Sólo se va a activar. Y entonces en realidad puedes empezar a usar oxígeno.
6. 2.4Activar el oxigen: Entonces una vez que nuestro plugin, una vez que se suba oxígeno, ingresemos a nuestro licenciante. Mantener. Ahora, si decidiste comprarlo, claro que lo conseguirás en un correo electrónico de ellos, equipo constructor de oxígeno. Y si solo estás probando oxígeno en su servidor, por
supuesto que no tienes que no tienes que ingresar a la licencia, así que solo puedes saltarte este video. Entonces lo que voy a hacer es ir al oxígeno y luego a dos ajustes. Aquí dentro. Voy a elegir licencia. Y aquí dentro vamos a teclear nuestra clave de licencia. Eso de nuevo viene en un correo electrónico una vez que compres el constructor de oxígeno, y luego solo puedes golpear submit y vas a hacerlo, ojalá deberías ver el texto válido aquí mismo. Y ahora significa que el oxígeno se actualizará de por vida. Vas a conseguir todas las actualizaciones. Dentro de tu panel de WordPress. Básicamente puedes actualizar tu plug-in al igual que cualquier otro plug-in que puedas obtenerlo del repositorio estándar de WordPress. Entonces una vez que se instala oxígeno oxígeno, una vez es una vez que su licencia ha sido y se pone aquí mismo, tal vez
podamos pasar a un poco más de una delgada básicamente relacionada con Wordpress, no solo delgada relacionada con oxígeno. Vamos a añadir nuestras páginas a nuestro sitio. Entonces, así que nosotros, así tenemos algo de nuestro lado. Entonces pasemos a eso.
7. 3.1añadir las páginas: Entonces agregamos oxígeno, nos dieron la licencia. Ahora vamos a conseguir algunas páginas. Cuando vayamos a nuestro menú Páginas aquí mismo, empecemos. A lo mejor, bueno, veamos primero qué páginas ya tenemos. Bueno, no tenemos ningún pago aquí mismo, pero si tienes una nueva instalación de WordPress y probablemente
tengas una política de privacidad o una página de muestra. Y lo que voy a hacer es que sólo voy a añadir las páginas que vamos a estar usando en nuestro, en nuestro caso. Entonces para el título, voy a ir con primera casa. Esta será nuestra página de inicio, obviamente. Entonces voy a añadir otra. Ya que somos diseñadores que deseamos ofrecer su desarrollo web y servicios, lo
vamos a utilizar. Bueno, vamos a estar necesitando un portafolio. Entonces publiquemos este sitio. Añadamos, digamos que tenemos muchas cosas que decir, muchas cosas interesantes que decir sobre nuestro trabajo. Entonces vamos a estar, vamos a estar agregando un blog a nuestro sitio. Y digamos que tenemos muchas cosas que decir de nosotros. Entonces tecleemos sobre, y por supuesto, necesitamos agregar una página de contacto. Entonces hagámoslo. Vamos al contacto y publiquemos este lado. Ahora antes de pasar a realmente crear o inmutar nuestro hogar, la página, vamos a la configuración, y luego vamos a permalink. Y vamos a asegurarnos de que tenemos Post Name seleccionado aquí mismo. Y ahora mismo cuando nosotros, cuando tratemos de visitar nuestra página, vamos a tener que simplemente escribir ese nombre de páginas y estaremos bien para ir. Y eso es, esa es la mejor práctica para propósitos SEO también. Entonces sólo voy a guardar los cambios. Y si vamos a opciones de lectura, podemos usar esta opción de pantallas de tu página de inicio para mostrar realmente un sitio específico, tan bien la página, así que podríamos usar tus últimas entradas si acabamos de tener un blog. Pero vamos a tener un lado más como un más desarrollado. Entonces voy a elegir una página estática y mi página de inicio va a estar casa y se van a poner posts en mi página de blog. Entonces solo voy a guardar esto. Ahora aquí, he decidido ir con desalentar motores de búsqueda de índice en este sitio porque es una instalación local y bueno básicamente no va a afectar el ranking de mi pepsina se sienta solo en mi computadora. Pero cuando estás construyendo tu propio lado, tu sitio en vivo, es posible que quieras revisar esto porque los motores de búsqueda podrían, podrían indexar tu, ya sabes, tu progreso una vez que estés construyendo el sitio. Y si quieres desalentar a los motores de búsqueda de eso, quizá
quieras revisar esto. Pero por supuesto, cuando vas a estar usando un plugin SEO, una vez que los diseñadores estén hechos, esta opción debe estar sin marcar.
8. 3.2Añadir la primera plantilla: Entonces, ¿qué son las plantillas en oxígeno
o, o, o plantillas en general? Las plantillas serán básicamente igual que las piezas de diseño y contenido que básicamente mirarán el trabajo igual. Generalmente en el, cada, cada página que se crea. Ya sea, es una página dinámica basada en contenido, como una página de blog o es una página estática. Entonces una vez que pongas esa plantilla, eso se verá igual en todas y cada una de las páginas. El escenario más común para una plantilla sería agregar tu encabezado como plantilla y tu pie de página como plantilla. Debido a que un encabezado usualmente hospedará su logotipo, el nombre de su, de su empresa o de sus servicios, o su nombre. Y el menú en tal vez alguna información de contacto o iconos de redes sociales. Y en el pie de página, por supuesto, también
necesitarías agregar algo más de información. A lo mejor agregarías algunos, algunos enlaces, puede ser algún otro menú. Y yen básicamente, básicamente necesitarías crear una plantilla para un encabezado y un pie de página. Entonces si vamos al oxígeno y luego las plantillas, se
puede ver que aquí no tengo plantillas. Entonces voy a añadir una nueva plantilla, y voy a llamarla mis plantillas principales. Yo sólo voy a teclear en principal. Si echas un vistazo a estas opciones aquí mismo, puedes ver que normalmente podríamos ser capaces de simplemente agregar, heredar el diseño de otra plantilla. Pero como esta es nuestra principal, esta es nuestra primera plantilla. No hay nada que heredar de ninguna otra plantilla. Aquí dentro. Podemos decir oxígeno a qué parte de nuestro sitio en esta plantilla debe corresponder. Entonces si solo estuvieras creando una plantilla para, para algún tipo singular y
singular de contenido, como una publicación o una página, o para una página de archivo para una categoría específica o para un autor específico. Podrías, podrías agregarlo aquí mismo. Pero estamos creando una plantilla para un encabezado y un pie de página. Y normalmente nos gustaría añadir el mismo tipo de encabezado y pie de página también, y a todas nuestras páginas. Entonces, vamos a mantenerlo simple. Dejémoslo así por ahora. Asumamos que queremos agregar el mismo tipo de pie de página y un encabezado a todas nuestras páginas. Entonces en esta otra sección, sólo
vamos a seleccionar esta opción catch all. Y entonces solo voy a pegarle a publicar. A partir de ahora, esta plantilla va a ser, va a estar diciendo a todas las páginas qué encabezados y pies de página debe representar esa página específica. Entonces una vez que esta plantilla esté lista, podemos, podemos golpear editar con oxígeno y en realidad empezar a editar esta plantilla dentro del oxígeno.
9. La interfaz de 3.3 Oxygen: Antes de empezar a editar nuestra plantilla o agregar algo a una página web, es una buena idea saber qué estamos mirando primero, sobre todo si nunca antes habías visto oxígeno. Entonces echemos un vistazo rápido a la interfaz del oxígeno. Y en realidad, al principio, podría
parecer un poco aterrador porque básicamente no hay nada aquí. Tenemos sólo algo de lienzo en blanco, algunas opciones, algunos botones aquí en la parte superior, algunos botones aquí en el lado izquierdo, y eso es básicamente todo. No obstante, en solo unos segundos verás que las interfaces del oxígeno, creo que bastante similares a muchos programas de diseñador como Photoshop,
Illustrator, diseñador, o lo que sea que estés usando para tu herramienta de diseño. Entonces aquí en oxígeno, tenemos herramientas a la izquierda. Si solo hacemos clic en este botón de agregar, vas a ver que tenemos muchas, muchas herramientas diferentes, diferentes que podemos agregar a nuestra página web. Entonces conseguimos lo básico como algunos contenedores, enlaces de
texto, y podríamos agregar imágenes, videos, y otros delfines. Tenemos algunos ayudantes, ráfagas, así se llaman Ayudantes. Pero en realidad son solo algunas, como las cosas más comunes o módulos que podrías estar usando en el diseño web. Y así es como una entrada de galería que vamos a estar usando el módulo Easy posts para nuestro blog. Tenemos el constructor de cabeceras que estaremos usando para construir nuestro encabezado, iconos
sociales, testimonial, sliders, todos, todas esas, todas esas cosas. Nos dieron algunos Wordpress,
Wordpress, Wordpress relacionados en realidad módulos como un menú pro, códigos abreviados, commons y todos esos. Y todas esas cosas. Tenemos algunos datos dinámicos. Entonces estas son las cosas que se van a sacar de nuestra base de datos, pero eso es para un video posterior. Conseguiremos algunos widgets. Entonces si estamos usando widgets para adentro donde primero podemos usar, podemos arrastrarlos desde aquí. Y también tenemos como conjuntos de diseñadores de bibliotecas que vienen con, que vienen con, con oxígeno. Y tenemos algunas piezas reutilizables, pero aún no hemos creado nada. Por lo que no tengo ningún hecho a medida, hecho por nosotros y piezas que pudieran, podrían añadirse a nuestro diseño. Entonces básicamente aquí a la izquierda, vas a ver todas tus herramientas. Y aquí, la búsqueda superior y el cuadro que podríamos simplemente escribir tal vez como algunos, como una imagen. Ahí vamos, tenemos nuestro módulo de imagen. O podríamos teclear puede ser algún más ligero o SL, Y nos dieron nuestro slider y etcétera. Por lo que simplemente podemos escribir las menos letras, las primeras letras del nombre de cualquier módulo. Y que se va a filtrar un módulo de este panel. Aquí mismo. Aquí a la derecha, arriba a la derecha, tenemos algunos botones justo aquí, y tenemos este gran botón azul Guardar que necesitamos, Bueno, necesitamos hacerlo, es una buena idea hacer click en él con frecuencia. Y tenemos algunos, algunos otros botones. Entonces, primero pinchemos sobre la estructura. Botón y como puedes ver, tenemos nuestra estructura y en solo unos segundos se va a,
va a quedar como básicamente,
básicamente como capas en Photoshop, Illustrator o diseñador. Entonces todos nuestros elementos que nos van a poner aquí en
nuestro lienzo van a ser representados aquí en esta estructura. Sin dolor. Tenemos el panel de historia, pero aún no hemos hecho nada, así que las historias vacías. Y obtuvimos las opciones Gestionar que nos permiten llegar a una configuración
diferente, diferente o global. Entonces, por ejemplo, si nosotros, si tratamos de cambiar algunos ajustes, por ejemplo, podríamos tal vez cambiar algunos ajustes de pavimentación con los que podríamos establecer nuestra página. Podríamos jugar con configuraciones globales para animaciones. Y, pero también, si solo seguimos adelante y elegimos unos estilos globales, estaremos jugando con estos en tan solo un segundo. Estamos en condiciones, podremos sumar nuestros colores globales que estarán siempre presentes cuando queramos utilizar los colores. Habrá, siempre que hagamos click en como un recolector de color, nuestros colores globales estarán ahí. Y por supuesto también tenemos como fuentes. Para que pudiéramos elegir nuestra fuente de visualización predeterminada, pantalla frontal de caballos, una fuente para nuestro, para nuestros encabezados. Y también tenemos fuentes para nuestro texto. También podrías agregar fondos aquí mismo si tú, si quisieras hacerlo. Y podríamos cambiar nuestros encabezamientos para poder establecer globalmente el tamaño y los colores para cada uno de nuestros rubros de uno hasta los seis años de edad. Y también podríamos cambiar el texto del cuerpo, el tamaño de la fuente, peso, el color de nuestro pozo, este texto del cuerpo. Entonces todas esas cosas que, que te gustaría establecer globalmente. Ahora, digamos que solo quieres y fijamos tus encabezamientos para que estén, no
sé, escritos en fuente Bree Serif. Y quieres que se lean Siempre. Podrías simplemente poner eso justo aquí. Y luego cuando estás agregando un encabezado de nuestro, como este tipo de aquí mismo desde nuestro panel de herramientas, entonces no tendrías que preocuparte por los colores y el tamaño y el peso y la altura de la línea. Puedes ponerlo todo aquí, ¿verdad? Por lo que hablamos brevemente de eso y de la interfaz de oxígenos, por supuesto, vamos a bucear,
sumergirnos mucho más profundamente una vez que empecemos a agregar en nuestros elementos a nuestra página web. Pero en realidad, tal vez juguemos con estos ajustes globales. Vamos en realidad algunos globales, color, colores globales. Y agreguemos algunas fuentes a nuestro, a nuestro sitio. Y para eso, vamos a tener que echar un vistazo rápido algunos otros sitios que suelen estar usando mi escenario de diseñador. Y simplemente no quiero saltarme ningún paso a la hora de crear este diseño. Por supuesto, ten en cuenta que el diseño en sí no es lo más importante aquí mismo. Lo más importante es el aprendizaje de la UE, o de nuevo, en todas las habilidades que necesitarás para crear, recrear tus propios diseños. Entonces pasemos realmente a un sitio que uso para recoger algunos colores y algunos fans.
10. 3.4 fuentes y fuentes globales: Entonces empecemos tal vez con agregar algunos conjuntos de colores a nuestra página web. Entonces voy a elegir, voy a ir a un sitio llamado coolers dot co. Y probablemente bien, probablemente
hayas visto este sitio web o oído hablar de él, al menos. Es solo un gran sitio para llegar a diferentes esquemas de color, color. Entonces, pongamos en marcha el generador. Y un aquí dentro, como se puede ver, tenemos algunas muestra de color. Por defecto obtuvimos 12345 muestra de color. Pero si quieres, podrías simplemente hacer clic en esto, agregar colores más símbolo para solo agregar otra muestra de color. Y por supuesto podríamos quitarlo si quisieras. Y podríamos hacer lo mismo con otros con otros colores. Entonces lo que suelo hacer, lo que suelo empezar es tratar de llegar a ellos en color para mi texto y color para el fondo del texto. Y realmente no me gusta ir con Leckie llano negro y avión. ¿ Por qué? Porque yo sólo creo que están demasiado sobreutilizados el HIPPA, demasiado aburrido. Pero claro que eso va a estar totalmente ti si quieres ir con blanco liso y negro liso. En fin, solo me gusta usar algún color gris
muy, muy claro. Y sé que el código hexadecimal para eso es F8, F8, F8. También podríamos ir con algo aún más ligero, que sería F9. F9, F9, F9. Ahí vamos. Y una vez que esté contento con el color, solo lo voy a bloquear. Y luego sólo voy a tratar de llegar a algún fondo bonito,
como, uh, como el color más oscuro. Yo, me gusta ir de lo más ligero y más oscuro y entonces podemos tratar de llegar a otra cosa. Entonces para este tipo, solo
voy a intentar quizá encontrar algún tono bonito de esto, tal vez este color marrón ultra oscuro que se ve bien, y sólo voy a bloquearlo. Y luego si solo tratamos de venir bien, si solo dejamos que el generador nos presente algunos otros colores, podríamos simplemente presionar la barra espaciadora para solo encontrar algunos colores que podríamos usar terminan esos colores podrían ser para nuestros enlaces. Podrían ser para nuestros botones o estados hover, todas esas, todas esas cosas. Pero la parte más importante aquí es simplemente tratar primero llegar
a tu esquema de color cuando estás diseñando tu sitio web. Y luego usar todos estos, todos estos colores, todas estas muestra de color, tal vez agreguemos una más. Todas estas muestra de color al oxígeno. Y eso es básicamente lo que me gustaría que aprendieran de este video. Entonces tenemos este F8,
FATF , F9, F nueve de nueve. Yo sólo voy a copiar este color. Y voy a ir al oxígeno. Y voy a añadir un conjunto de colores. Y voy a llamarlo tal vez como colores predeterminados. Ahí vamos. Y yo estoy, sólo voy a Edit. Y ahora dentro de este conjunto, este conjunto de colores por defecto, solo
voy a agregar un color. Y llamémoslo puede ser gris claro. Y sólo voy a pegar ese valor
hex, hexadecimal así. Entonces nos dieron nuestra, nuestra
luz, gris claro y luego sigamos adelante y. Agarra este código hexadecimal también. Y este va a ser nuestro marrón oscuro. Marrón oscuro. Ahí vamos. Lo voy a pegar. Y ahí vamos, tenemos nuestro gris claro y nuestro marrón oscuro. Y por supuesto, en tu caso, estarías agregando colores diferentes, diferentes. Vamos a tal vez sólo, así como la práctica, vamos a añadir tal vez algunos, tal vez vamos a agarrar este marrón claro Y nada. Este podría ser un buen color para nuestros botones. Entonces solo voy a mezclarlo se llama marrón medio. Ahí vamos. Y otro hashtag y añadir el color. Entonces no lo voy a guardar. Por lo que esta sería nuestra paleta de colores por defecto. Por ahora, vamos a mantenerlo simple y mantenerlo así. Como dije, es, no
se trata realmente de la parte de diseño. En realidad no quiero que sea super bonito. Yo sólo quiero que sea práctico. Yo solo quiero que aprendas las habilidades. Solo quiero que aprendas a manejar el oxígeno para crear tus propios diseños. Por supuesto estará creando un diseño en el camino. Pero por ahora, sólo aprendamos ese defecto. Cómo configurar algunos valores por defecto aquí dentro del oxígeno. Entonces estos son nuestros colores. Entonces, ¿qué pasa con las fuentes? Entonces cuando se trata de fuentes, me gustaría ir al par de fuentes. Padres de familia aficionado. Ahí vamos de parent dot co. Y aquí dentro conseguimos un bonito, bastante extenso conjunto de diferentes, de diferentes vamos a pares de fuentes. Y podríamos ir con como fuentes Sans Serif y Sans Serif o san-serif sería nuestra pantalla encontró nuestro teléfono de cabecera y serif. En este caso, Alejandría, sería nuestra fuente de texto corporal. Podríamos ir con sensor de san-serif, display y san-serif como éste, o display y Serif. Y podríamos, ya sabes, simplemente elegir la categoría que queramos aquí mismo. Por lo que todos estos teléfonos son fuentes de Google o son gratis y vienen con oxígeno también. Entonces tratemos de encontrar algo bonito. Sé que voy a estar usando para nuestra fuente de logo llamada Bree Serif. Entonces, veamos si podemos encontrarlo. Ahí vamos. Tenemos a Bree, Serif y Laura justo aquí. A ver si viene en otro par. Bree Serif y la apertura termina. Y creo que me voy a ir con este par porque es sólo un buen contraste entre tipo de encabezamiento funky y un texto realmente legible. Entonces podríamos ir con estas fuentes Paris, pero también podríamos ir a un sitio de código de sitio llamado Font font joy. Ahí vamos. Y aquí dentro podríamos jugar con esto contrastando el deslizador, Deslizador Contraste. Por lo que podríamos decir que nos gustaría tener más contraste entre nuestros encabezamientos y nuestro texto. O nos gustaría tener un contraste muy, muy bajo. Y se puede ver que tenemos el nombre de la fuente aquí a la izquierda, y el nombre de la fuente para nuestro subtítulo aquí a la izquierda también. Y nuestros textos y bueno, el nombre de nuestra fuente de texto corporal también está aquí mismo. Entonces si quieres ir con un par de fuentes muy alto contrastante, podríamos hacer justamente eso. Entonces tendríamos un Enrico Letta y también un laboratorio de travesuras para nuestro, para nuestro texto corporal. Pero eso es sólo otra sencilla y una herramienta muy interesante para encontrar algunos pares de fuentes con buen aspecto. Entonces voy a ir con Bree Serif y Open Sans. Entonces voy a ir al oxígeno. Mi fuente display va a ser Bree Serif. Y lo voy a dejar como ciencia abierta y sólo lo voy a salvar. Entonces ahora mismo cuando esté agregando algún encabezado o estaré agregando algún texto. Y el oxígeno va a estar asumiendo que quiero usar esta fuente Bree Serif para mi encabezado, una frase abierta para mi texto corporal, pero también para menús y enlaces terminados. Entonces nos dieron los colores, colores
por defecto, nos dieron las fuentes. También podríamos pasar a nuestros encabezamientos si quisiéramos. Entonces digamos que nos gustaría tal vez mantengamos este Encabezado, uno como 36 píxeles. Pero vamos a añadir tal vez, bueno, vamos a cambiar un color. Por lo que sólo voy a dar clic en este color. Y se puede ver aquí abajo tenemos nuestros colores predeterminados mostrados. Por lo que solo podría agregar este marrón oscuro como nuestro color. Y luego solo golpea guardar. Podríamos hacer lo mismo para el rumbo dos, marrón oscuro. Y ahora cada vez que agregamos este rubro uno o
rumbo a, rumbo al rubro tres, si nosotros, si solo
agregamos ese color, sabemos que ese es exactamente el color que estaremos usando para ese rubro. Y por supuesto, también podríamos cambiar el tamaño de la fuente si quisiéramos. Pero ahora vamos a mantenerlo simple. Solo agreguemos los colores. Siempre podríamos cambiarlos. El valor de rumbo de una instancia específica de un rubro una vez que se ha puesto en nuestro, en nuestros caníbales. Está bien. Entonces conseguimos los colores, conseguimos los fondos, conseguimos algunos rubros. Podríamos quizá disminuir el tamaño de la fuente a quizá 15. Y quizá cambiemos el color a nuestro marrón oscuro. Ahí vamos. Dejemos la altura de la línea por ahora, como está. Podemos cambiarlo más tarde y solo lo voy a guardar. Por lo que conseguimos nuestra configuración de valores por defecto. Llegamos a, aprendemos a usar la interfaz de oxígenos básicamente. Por lo que ahora realmente podemos empezar a agregar nuestra plantilla. Y sí vamos a empezar con agregar, por
supuesto, una sección. Y aprenderemos qué son las secciones, cuáles son las columnas y los devs en videos posteriores. Y comenzaremos con agregar nuestro logo en la esquina superior izquierda de nuestra página web. Página web. Entonces empecemos a hacer eso a continuación.
11. 3.5 comienza a construir el encabezado: Para empezar a añadir nuestros logotipos y menús e iconos sociales y todas esas cosas, primero
necesitamos pensar en dónde vamos a estar poniendo eso. Necesitamos algún tipo de contenedor aquí dentro de un oxígeno. Y en realidad en cualquier tipo de proyecto de desarrollo de armas, es una buena idea tener primero algún tipo de contenedor para guardar todas tus piezas más pequeñas, todos tus elementos más pequeños. Ahora, generalmente en oxígeno, comenzaríamos con una sección y luego podríamos agregar un div o columnas. Y hablaremos de esos en unos pocos, en unos momentos. Uno de los, uno de los próximos videos. Pero estamos construyendo un encabezado, nuestra plantilla con un encabezado ahora mismo. Entonces en oxígeno, obtienes un constructor de Hadoop. Ese es un tipo especial de elemento de módulo de sección. Entonces si solo escribimos cabecera y luego constructor de Hatteras, se
puede ver que en realidad se ha agregado a nuestra página web. Si nos dirigimos a nuestra estructura, se
puede ver que tenemos nuestro constructor de cabeceras. Esta es nuestra sección principal. Y luego tenemos nuestra fila de cabecera con tres elementos. Entonces conseguimos nuestro elemento izquierdo, elemento central, y elementos de escritura. Entonces izquierda, centro, y derecha. Y por lo general en un escenario típico de diseño web, pondríamos nuestro logotipo en la parte izquierda de nuestro encabezado. Y para eso, podríamos usar la parte izquierda de fila aquí dentro de nuestra fila de encabezado. Entonces vamos a añadir en realidad un logotipo de creado es algo así como, bueno, un logotipo muy, muy
simple, sencillo para nuestra página web. Yo llamo al diseño wow porque y nada, acabo de tomar este sencillo icono del icono plano. Y como pueden ver, obtuve dos versiones diferentes de esto, de este logotipo. Uno es, bueno, nuestro oscuro, marrón
oscuro y uno es nuestra luz, luz, Genial. Por lo que en este caso, podríamos agregar nuestro logotipo de dos maneras diferentes. El más sencillo, el más fácil será solo convertir a este tipo en una imagen sencilla y luego subirlo como nuestro logo, que vamos a hacer ahora. Y normalmente lo harías así si tu tipo es algo un poco más especial, algo funky, algo hecho a medida, algo que no es fácilmente recuperable con solo texto simple y simple. Entonces sólo voy a agarrar a estos tipos. Y voy a presionar Alt más control más Shift plus S para exportar estos elementos. Como puedes ver, estoy usando Affinity Designer, pero si estás usando Photoshop o Illustrator, básicamente
puedes convertir tu texto y este icono en, en una imagen. Entonces voy a elegir el PNG porque no necesito el fondo. Y sólo voy a usar la selección sin antecedentes. Y el tamaño está bien. Yo sólo voy a golpear a Export. Y voy a llamarlo tal vez logo uno. Y voy a pegarle a Save. Y ahora voy a volver a mi diseño. Y quiero agregar una imagen aquí en la parte izquierda de mi constructor de cabecera. Entonces de nuevo, voy a elegir agregar y voy a encontrar una imagen. Ahí vamos. Y sólo voy a tener que encontrar mi imagen en mi, mi mediateca. Entonces sólo voy a ir a navegar. Y ahora sólo voy a tener que encontrar esa imagen. Entonces una vez que encontré mi imagen, solo
voy a hacer doble clic en ella y simplemente elegir Seleccionar imagen. Y como pueden ver, esa imagen se ha puesto justo dentro de mi flecha izquierda. Entonces este es mi logo. Y, ya sabes, si quieres, y eso, creo que sería una buena idea. Podríamos quizá jugar con esta imagen. Es decir, podríamos, por ejemplo, hacerla más pequeña. Así que déjame tal vez cambiar la altura a algo así como 45 píxeles, o tal vez incluso durar, algo así como 32 píxeles, o tal vez incluso 26 píxeles. Podríamos bajar y bajar y bajar tanto como nosotros, como queramos. Por lo que esta es una forma de agregar en el logotipo a nuestra página web. Por supuesto, todavía tenemos que jugar con algo de espacio alrededor de todos estos elementos. Pero por ahora, solo estamos aprendiendo a agregar un elemento a nuestro sitio web. Y en realidad, si solo trabajáramos y guardáramos esto, y si fuéramos a agarrar
nuestros, nuestros sitios web, bueno, dirección, sólo
voy a copiarlo. Y como ya que estoy en un Firefox, sólo
voy a usar el control más
Shift más P atajo de teclado para agregar para entrar a eso el modo de incógnito. Pero si estás en Chrome, usarías,
podrías usar control más Shift plus n para entrar en modo incógnito. Entonces sólo voy a esa dirección de tableta en. Y se puede ver que en realidad ya estamos empezando a construir nuestro sitio web. Vamos a comprobar si eso, si funciona también en Chrome. Ahí vamos. Obtuvimos nuestro sitio web básicamente empezando, empezando a funcionar realmente. Fue, ¿fue así de simple? Pero como dije, esta es solo una de las formas de agregar un logotipo como este. Lo que podríamos hacer, sin embargo, es que quizá podríamos agregar el justo nuestro, a nuestra imagen como esta pieza de nuestro diseño. Entonces sólo voy a agarrarlo. Y de nuevo, voy a controlar turno como selección PNG sin fondo. Exportación. La exportación es, como se puede ver, ya, explotada, exportada antes. Entonces solo voy a llamarlo iniciar sesión para guardar a este tipo. Vuelve a Firefox y de nuevo, agrega una imagen. Y voy a tener que encontrar a ese tipo. Entonces una vez que lo
encontré, sólo voy a leerlo de nuevo, seleccionar una imagen. Vamos a pegarle a Save. Como siempre, a veces sólo tenemos que refrescar la página y nos pusieron nuestro logo aquí mismo, otra vez en nuestra fila izquierda, izquierda. Si quieres, simplemente podrías arrastrar esa imagen a otra parte de nuestro, bueno, este constructor de encabezados si quieres, pero, ya sabes, es solo, es algo que podrías hacer, pero lo vamos a poner al revés y pertenece. Y yo, sólo voy a quitar este logotipo ahora mismo. Entonces para hacer eso, solo
voy a pasar el rato sobre esta imagen de aquí mismo, esta Capa. Y solo voy a golpear este icono x Eliminar componente. Ahí vamos. Entonces conseguimos nuestra imagen y quizá la hagamos más pequeña, pero no tenemos el texto, entonces ¿cómo agregar el texto para nuestro logo? Cuando otra vez, de nuevo, sólo voy a golpear add. Bueno, encontremos el texto. Ahí vamos. Y yo sólo voy a escribir, WOW, diseñar su ego. Pero como esto es sólo un texto plano y lo ponemos a sentido abierto, como se puede ver, nuestra fuente no es la fuente que, que supone
que iba a vencer, se supone que es Bree Serif. Podríamos cambiarlo aquí mismo. Podríamos simplemente seguir adelante y elegir mostrar el serif, o podríamos simplemente dejarme quitar eso. O podríamos añadir un encabezamiento. Por lo que sólo teclea en encabezamiento. Y como pueden ver, ya tenemos la fuente que necesitamos. Pero como está configurado, esta etiqueta está puesta en una. Y en nuestros valores
globales, globales, lo pusimos a, creo, 36 píxeles. Es demasiado grande, pero aún así podríamos hacerla más pequeña, como 24. Por supuesto, escribamos el texto mientras diseñamos. Y ahí vamos. Podríamos quizá cambiar algunas cosas. A lo mejor déjame hacer un pueblo tal vez sólo un poco más pequeño, 36 porque esto debería estar bien. Y aún podríamos ir quizá a la pestaña Avanzado, después a la topografía. Y aquí dentro, podríamos quizá aumentar el espaciado entre líneas, espaciado entre
letras al mu principal para que se vea algo así. Creo que se ve bien. Ahora bien, si quisieras quizá aumentar o disminuir el espacio entre ellos, estos elementos, podrías agarrar tu texto o tu imagen en este caso. Y otra vez, vaya a avanzado, esta vez al tamaño y el espaciado. Y aquí dentro, podrías, podrías, por supuesto, n cambió su altura o altura mínima o anchura. Pero también podrías jugar con algo llamado relleno y margen. Pero hablemos de esos dos en el siguiente video.
12. 3.6 el relleno y la marcha al logotipo: Entonces hablemos ahora rápidamente de dos ideas, dos elementos en un desarrollo web y son extremadamente importantes, pero afortunadamente extremadamente fáciles de entender. Y son extremadamente importantes porque las estarás usando bastante. Y esos elementos son relleno y margen. Y la diferencia entre ellos es que básicamente anuncian espacio alrededor de un objeto, pero Relleno agrega como un espacio interior dentro de un contenedor y el margen espacio exterior de Ed. Pero en nuestro caso básicamente en este momento podríamos usar cualquiera de estos valores. Entonces si quisiéramos agregar, digamos, algún espacio entre nuestro pájaro y el texto, podríamos usar ya sea relleno o margen. Entonces si solo escribimos, digamos, diez píxeles, se
puede ver que estamos expandiendo este contenedor aquí mismo. Se puede ver esta línea, esta línea púrpura, esa es una marca en nuestro contenedor. Y si tuviéramos el margen, se
puede ver que el contenedor sigue siendo el mismo. Pero conseguimos algo de espacio entre nuestro pájaro y el texto, igual que hicimos con el relleno, pero el contenedor se mantiene intacto. Ahora, otra cosa que podríamos hacer en términos de margen y relleno es que podríamos agregar algo de relleno a nuestro contenedor principal, nuestra fila de encabezado justo aquí. Y casi siempre encontrarás algunas opciones de relleno y margen bajo la pestaña avanzada. Y luego el tamaño y el espaciado. Estamos de nuevo dentro de esta opciones de
relleno, relleno y margen ahora. Pero antes de empezar a hacer eso, y antes de que realmente empieces a entender la diferencia entre el relleno y el margen, especialmente cuando se agrega a los contenedores. Déjame cambiar rápidamente el fondo de nuestro encabezado a algo realmente arbitrario, Algo así. Lo cambiaremos en tan solo un segundo. Entonces otra vez, tamaño y espaciado. Y si ahora agregamos algo de relleno a arriba e abajo, digamos 50 pixels y luego 50 pixels, dos top e bottom. Se puede ver que nuestro contenedor crece. Ahora tenemos mucho de este color rojo pálido justo aquí. Pero si agregamos el margen, pesar de que los valores son los mismos, puede ver que básicamente estamos manteniendo intacto
el contenedor en cuanto a su tamaño visible o perceptible. Pero estamos sumando margen al extremo superior y al final inferior. Por supuesto que no se puede ver nada ahora mismo porque es blanco contra ancho. Pero si solo pasas por encima de este espacio aquí mismo, puedes ver que lo estamos, realidad
estamos sumando en algún margen. Y por cierto, si no quieres agregar margen ni relleno como manualmente como aquí, siempre
podrías simplemente agarrar esto como un borde de un contenedor. Los bordes juegan alrededor de él, juegan alrededor con él. Y lo mismo para el relleno así. Y luego como puedes ver, esos valores se han escrito automáticamente aquí dentro de nuestros valores de relleno y margen. Ahora bien, no quiero que estos tipos se vean así. Yo sí quiero agregar algo de relleno, pero no tanto. Vayamos con tal vez 2525. Supongo que esto debería distribuirse, ¿verdad? A lo mejor, tal vez 18. Por supuesto, si antes hubiéramos desarrollado un diseño adecuado, ya
tendríamos todos esos valores. Pero como dije, se trata más de sólo la llanura alrededor de un aprendizaje de las habilidades para construir un sitio que simplemente realmente pegarse directamente a nuestro diseño y hacer un anuncio luca delgada, la más bonita posible. Entonces conseguimos la configuración de nuestro logotipo, conseguimos algún margen, y tenemos algo de espacio aquí mismo. No he ido a, sin embargo, quitar ese color de fondo. Y estamos de vuelta con nuestro, nuestro diseño. Y si quieres comprobar cómo se ve, si no estamos ingresados. Ahí vamos. Tenemos nuestro bien diseñado y nuestro logotipo justo aquí en la parte superior izquierda. Ahora, esto se ve todo, esto se ve todo bien. Pero por supuesto, aún tenemos que recordar acerca nuestro diseño cuando lo van a tener acceso los usuarios desde muy probablemente un dispositivo no móvil. actualidad, la mayoría del tráfico y los sitios web proviene de dispositivos móviles, no de escritorios o laptops ni lo que sea. Por lo que tenemos que prestar atención a eso. Y creo que ya deberíamos empezar a entender cómo abordar ese tema desde el principio, desde el
principio, desde el principio, porque es extremadamente, extremadamente importante. Entonces en realidad es empezar a hacer eso en el siguiente video.
13. 3.7el cuidado de la responde.: Entonces como dije, nuestro diseño se ve bien. Bueno hasta ahora nuestro logo se ve bien en dispositivos de escritorio, pero ¿qué pasa con los dispositivos más pequeños? Por lo que necesitamos cuidar el lado receptivo de las cosas aquí dentro del oxígeno. Y en realidad es realmente fácil. Si le echamos un vistazo a este pequeño switcher justo aquí de la izquierda, se
puede ver que nos dieron algunos iconos. Y si solo hacemos clic en alguna de estas opciones, así que vamos con contenedor de página, 1120 pixels y abajo. Esto es lo que probablemente nuestro diseño, bueno, quiero decir, el tamaño de nuestro logotipo se va a ver como una La mayoría de los portátiles. Por ahora, se ve bien. Vayamos a menos de 992. Eso podría ser como algunas tabletas de tabletas más grandes. Eso también está bien. Vayamos a menos de 768. Ahora en este punto, ya que vamos a tener algo de menú aquí mismo, tal vez podríamos cambiar algunas cosas al respecto. A lo mejor podríamos, por ejemplo, cambiar el tamaño del texto. Entonces solo voy a seleccionar, esto es rumbo, este tipo de aquí. Y para 768, me gustaría tal vez hacerlo solo un poco más pequeño, tal vez esta imagen también. Entonces solo voy a usar tal vez este deslizador ahora mismo. Y voy a bajar a este tipo tal vez como 18 píxeles. Y para este tipo, tal vez yo voy a, vamos a verlo en píxeles también. Ahora eso va a ser demasiado pequeño. 2424 debe estar bien. Ahí vamos. Entonces tenemos nuestro hmm, ya
sabes qué, tal vez también cambiemos esto. El tamaño de nuestra brecha justo aquí. A lo mejor hagámoslo un poco más pequeño. Y como puedes ver, si vas al tamaño y al espaciado, quizá
podríamos hacer como cinco píxeles, no más. Entonces si ahora vamos a nuestros viejos dispositivos, entonces este es nuestro logo. Después contenedor de página, luego menos de 992, y luego 768. Ahora se hace más pequeño y vamos a ir menos de cuatro AD. Para 80, sigue pareciendo bien. Por supuesto que vamos a estar jugando mucho más con el lado receptivo de las cosas en los próximos videos. Si quieres, podrías tal vez, tal vez porque así es como quieres hacer tu diseño. Vamos tal vez a la, nuestra fila de encabezado. Y digamos que tal vez nos gustaría cambiar el color del fondo para,
para nuestro como Cain, tal vez como una vista de smartphone. ¿ Por qué no? Sólo, ¿sólo por diversión? Entonces si estamos en menos de 480, este momento, vamos a Advance. Por supuesto que conseguimos nuestra fila de encabezado seleccionada. Vamos al fondo, color de fondo. Y vamos a deslizarnos tal vez cambiemos
el color del fondo a este gris claro o tal vez incluso algo visible. Entonces sólo para que puedas ver el cambio. Y lo vamos a dejar así. Yo lo voy a guardar. Entonces si ahora vas a nuestros viejos dispositivos o grandes hace un contenedor de página de escritorio nada pasa menos que mi 92, no pasa mucho. Menos de 768. El logo y el texto cambia ahora todo es más pequeño y menos de cuatro AD. Y vayamos a nuestro, nuestro diseño. Y que por cierto, podríamos, por ejemplar, ahora mismo, simplemente empezar a cambiar el tamaño de nuestro puerto de vista de nuestro navegador. Entonces como pueden ver, ahora nos estamos haciendo más pequeños. El saltó demasiado bien a menos de 768, creo que lo fue. Y la ecuanimidad del paisaje, más pequeño, más pequeño. Y ahí vamos. Nos dieron nuestro smartphone más pequeño tendrá en la fila de encabezado en los dispositivos más pequeños se verán así. Y si no quieres quedarte con estos cambios, estos cambios como este, solo recuerda siempre asegurarte de que estás en el descanso correcto. Por lo que menos de cuatro AD en este caso, sólo lo voy a quitar. Y vayamos a menos de 768. A lo mejor voy a dejarlo. Déjalo así, y recuerda siempre que todos estos cambios funcionan. Bueno, hay una jerarquía entre todos estos, todos estos tipos. Entonces si pones algo para como menos de 992, digamos que vas a cambiar el color de este texto a, vamos con algo amarillento tal vez o simplemente algo visible. Ahí vamos. Entonces por menos de 992, es así. Entonces para los valores más altos, así para el elemento padre, nos quedamos quietos, todavía tenemos nuestro original. Pero si bajamos, si vamos al niño, ese valor cambia y luego vamos si vamos al otro niño,
ese valor cambia, pero sólo el tamaño cambia porque no tocamos el color, por lo que el color permanece igual. Si lo cambiaras por algo como esto. Después vamos a 1992. Nos pusimos verde, luego 768, nos pusimos marrones. Si no le aplicamos nada, y no aplicamos el color, el color. Bueno, cualquier atributo en realidad toma los valores del elemento padre, que en nuestro caso es el 992 Breakpoint. Pero claro que no necesitamos el color verde, así que sólo voy a deshacerme de él. Supongo que podríamos quedarnos con nuestro con la talla para nuestro logo. Esto se ve así se ve bien. Mantengámoslo así. Entonces tenemos nuestro logo, nos pusimos bien, cuidamos un poco de un lado receptivo del lado de las cosas. Entonces supongo que ya es hora de que agreguemos nuestro menú principal a la derecha. Entonces empecemos a hacer eso en el siguiente video.
14. 3.8Añadir el menú de escritorio: Entonces ahora empecemos a añadir nuestro menú. Esto es una especie de proceso, quiero decir, alargar o complejo, pero hay unos pasos para construir un menú en cada,
cada sitio web, no solo aquí dentro de un oxígeno. Entonces, empecemos con la adición de nuestros elementos de menú. Entonces otra vez, voy a golpear y,
y luego empezar a escribir menú. Ahora como puedes ver, hay dos módulos para nuestro menú. Este menú es el, bueno es que no quiero decir en desuso, pero es un viejo módulo de menú. Y ya que, creo oxígeno de tres puntos, 3.2 o 3.3, conseguimos el menú pro. Entonces lo voy a hacer, así que voy a estar usando nuestro menú aquí mismo. Ahora como puedes ver, se agrega a nuestra primera fila, esta fila, parte izquierda, justo aquí. Y yo quería estar del lado derecho, así que sólo voy a arrastrarlo hacia la derecha. Ahora por defecto, puedes ver que hay algunos sencillos enlaces de menú ficticio agregados a nuestro, a nuestro menú. Entonces voy a ir a la opción de menú. Y como puedes ver, básicamente AMT no tenemos nada aquí. Bueno, eso es porque aún no creamos un menú. Entonces solo voy a salvar mi, mi sitio. Y voy a volver al panel de administración. Y de vez en cuando vas a ver estos mensajes aquí mismo informándote que algunos,
algunos de almacenamiento en caché, que cambias algunos ajustes globales y necesitas refundir tus ajustes de oxígeno. Entonces, solo hagamos clic en esto. Y entonces estás básicamente entonces, como puedes ver, todo hecho, efectivo CSS universal generado con éxito. Eso es básicamente para refrescar la memoria del oxígeno. Entonces pasemos a crear realmente ese menú. Voy a ir al panel de apariencia y luego a los menús. Y vamos a crear nuestro primer menú. Yo lo voy a llamar Menú Principal. Ahí vamos. Y voy a golpear a crear menú. Y sólo sumemos todos nuestros elementos. Por lo que conseguimos contacto sobre un portafolio de AN. Yo sólo voy a mover tal vez a estos tipos por ahí. Por supuesto, también podríamos agregar algunos elementos del submenú, pero por ahora vamos a mantener, mantenerlo simple. Y voy a pegarle a crear. Y luego podemos volver a nuestras páginas Inicio. Y luego solo voy a golpear editar plantilla. Y ahí vamos. Se puede ver que nuestro menú es, está justo aquí a la derecha, el lado derecho. Entonces como puedes ver, oxígeno agregó nuestro único menú aquí mismo donde se supone que debe ir. Pero claro, hay mucho de lo que necesitamos cuidar. Aquí mismo. A la izquierda se pueden ver diferentes pestañas que
controlan el aspecto y la sensación de nuestro, de nuestro menú. Entonces primero sigamos adelante y cambiemos algunas cosas sobre la apariencia de escritorio de nuestro menú. Entonces si nosotros, si hacemos click en ellos y en el menú de escritorio, puedes elegir entre la orientación vertical y horizontal de tu menú si eso es algo que quieres hacer, por ejemplo, si quieres hacer como una página de portafolio. O sitio de portafolio, tal vez podrías simplemente agregar un menú vertical en el costado y como una gran pieza de cartera en el otro lado. Y aquí mismo nos pusimos diferentes en diferentes momentos. Y eso en realidad controlará el aspecto y la sensación de diversos aspectos de nuestro menú. Entonces si vamos a la tipografía, no
necesitamos jugar con la font-family porque no, nuestro d, ya
fijamos el valor predeterminado de nuestra topografía para elementos distintos a los encabezamientos. Por lo que quizá podríamos jugar con el tamaño de fuente si queremos. A lo mejor vamos con algo así como 14. Y podríamos cambiar el color. Vamos con nuestro color predeterminado. Y tal vez, tal vez vamos a Chido. Veamos cómo se va a ver si lo ponemos en mayúsculas,
mayúsculas, nuestra transformación de texto. También podríamos usar minúsculas si quisiéramos, pero voy a ir con mayúsculas. No tenemos demasiados elementos de Menú. Entonces supongo que quizá podríamos hacerla más prominente, hacerla más visible por un cambio en el, transformar el texto para que sea superior, mayúscula. Ahora bien, si quieres, también podrías cambiar el font-weight. Recuerda que esta es la fuente de Google, ciencia
abierta, la ciencia abierta, y esa tipografía. Por lo que vamos a conseguir diferentes pesos de fuente para esta fuente y ángulo específicos. Dejémoslo, dejémoslo como default. Creo que si vas con 600, eso podría ser un poco demasiado. A lo mejor si no lo fuera, si no fuera mayúscula, tal vez eso se vería mejor. Entonces como dije, conseguiste total flexibilidad cuando se trata del cambio en el aspecto y la sensación de estos elementos. Y básicamente dependerá tus gustos artísticos y de tu diseño y las expectativas de tus clientes, cómo se va a ver esto. Pero ya sabes, obtienes todos los, todos los cambios aquí mismo visualmente, bien dispuestos. Por supuesto, todos estos elementos se están tocando entre sí. Están demasiado cerca el uno del otro. Entonces vayamos al espacio en una línea y frontera. Entonces lo que me gustaría hacer es agregar algún margen entre estos elementos. Entonces veamos, ocho píxeles. Ocho píxeles podrían estar bien. Ahora bien, si añadirías, si quieres agregar algo de relleno a tus elementos, podrías por supuesto hacer eso. Y eso sería, eso podría ser útil si quieres
agregar algunos colores a este elemento, al fondo. Entonces digamos que quisiéramos sumar algo autonómico. Nos gusta esto, este tipo de un, este tipo de color. Y luego vayamos a nuestros manuales de escritorio, basemos y alineemos. Y quizá agreguemos como diez píxeles. Y como se puede ver aquí mismo, se
puede, hay un, hay un poco Botón Aplicar Todo. Si hacemos click en él, vamos a aplicar al mismo valor a todos nuestros, todos nuestros elementos. Pero eso no es realmente lo que quiero hacer. Yo sólo voy a eliminar todos estos, todos estos elementos. Y por supuesto, realmente no quiero que este tipo sea así de marrón. Creo que eso se ve, esto se ve mejor. No obstante, siempre pudimos simplemente jugar. Con la topografía, tal vez aumente el Tamaño ya que desde que lo pusimos a minúscula, tal vez como 15. Pero como dije, va a ser totalmente, totalmente a ti. Y la última pestaña aquí en este menú de escritorio es la pestaña hover y activa. Todos estos elementos, todos estos, todos estos valores te van a permitir cambiar la apariencia de tu, de tus enlaces de menú cuando son Hubbard o cuando están activos. Entonces cuando la página específica está activa. Entonces digamos que nos gustaría cambiar el color del texto en un hover. Digamos que nos gustaría que fuera en nuestra vida. Color rojo funky. Entonces siempre que pasemos por encima de nuestra pieza de texto, se va a, va a cambiar. Además, podríamos cambiar el color de fondo de Hubbert. Entonces como pueden ver ahora, estamos cambiando el texto y el fondo. Y aquí es donde ese ningún relleno realmente, ya
sabes, jugaría bien junto con estos cambios, tendríamos más espacio para respirar aquí. Tendríamos más espacio. Por lo que se vería definitivamente mejor. Pero ya sabes, estamos aprendiendo las opciones. Entonces esto es lo que no hace este color de fondo flotante. También podrías tener una frontera. Entonces si pasamos el rato, nuestro elemento va a agregar un borde. Entonces tal vez déjame simplemente quitar eso. Vamos a añadir un fondo de borde de dos píxeles. Y como pueden ver en este momento, ya
tenemos este fondo,
este borde inferior aplicado a nuestro,
uno de nuestros ítems de menú porque estamos previsualizando esta página en este momento. Entonces vamos, si previsualizamos sobre, esa frontera está apareciendo bajo el enlace sobre aquí mismo. Entonces esto es algo que ella podría hacer. Por supuesto, también podrías agregar la opción de desplazamiento de la parte superior del borde de la frontera. Eso es lo que quieres hacer. Creo que lo voy a dejar como uno. Creo que me gusta esta opción. Y me voy a deshacer del color del texto flotante. Yo solo quiero un bonito, bonito subrayado fronterizo. Siempre que pase el cursor sobre adentro, pasé el cursor sobre el menú, menú te vincula, también podríamos cambiar el color del texto activo. Entonces si ahora estamos previsualizando la página sobre, entonces esta es nuestra página activa. Podríamos cambiar ese color a, no
sé, tal vez algo, algo así. Entonces, siempre que esa página esté activa, ese color de enlace de menú va a cambiar. Y no quiero este color igual para el color de fondo activo. Y también podríamos cambiar la duración de la transición. Por lo que si queremos agregar un color a nuestra clase de textos que se cierren, vayamos con el rojo de nuevo solo para que puedas ver todo mejor. Y si cambiamos la duración de la transición, así que digamos, no sé 5.5 segundos. Si pasamos por encima de este elemento, se
puede ver que está muy bien desvaneciéndose cuando estamos rondando sobre el eslabón y desapareciendo cuando estamos rondando así. Entonces eso es algo que podríamos hacer. Voy a dejarlo y sólo voy a dejar este fondo Hover Border. Eso también va a ser, como puedes ver, también
va a ser una transición como esta, pero claro que eso es un peso demasiado grande. Entonces uno debe ser, debe estar bien. Entonces este es nuestro menú de escritorio. Si empezamos a hacer de nuestro lado más pequeño. Ahora en este punto, sigue
pareciendo bien, pero sólo porque no tenemos demasiadas piezas aquí mismo, aquí
mismo, no demasiadas, no demasiados elementos de Menú. Pero una vez que empecemos a añadir algunos enlaces más aquí mismo, eso
sería, ya sabes, totalmente estropearía nuestro menú. Se, no se vería bien. Entonces, en realidad, tal vez agreguemos algunos enlaces más a nuestro portafolio. Simplemente, ya sabes, solo para aprender a agregar esos y cómo se vería una vez que estén aquí. Y también podríamos agregar algunos ítems del submenú solo para ver todos los efectos que podemos agregar. Cuando estás, cuando tienes algunos elementos del submenú en tu, en tu menú y qué puedes hacer con ellos aquí dentro del oxígeno.
15. 3.9 Haz que la meu sea más grande: Entonces si alguna vez tienes elementos de submenú en tu menú, como lo tenemos aquí dentro, no
puedes cambiar su apariencia aquí mismo. Si es por supuesto, un menú de escritorio aquí mismo en esta pestaña desplegable de escritorio. Por lo que en primer lugar, podemos habilitar desplegable. Entonces cuando hacemos eso, en realidad
podemos ver estos elementos aquí mismo. Por supuesto, si no habilitamos el desplegable, Eso está realmente bien, eso se ha ido. Todavía está ahí. Todavía está en la base de datos. Nosotros sólo, simplemente no lo estamos viendo. Entonces lo primero que podemos hacer aquí mismo es que podemos cambiar el tipo de animación ahora mismo está configurado para desvanecerse, desvanecerse. Entonces tal vez veamos cómo se ve cuando nosotros, cuando salimos de este modo de construcción, pasemos al modo incógnito. Entonces esta es nuestra, esta es la animación que tenemos, esta animación se desvanece. Déjame solo hacer, hazlo más pequeño para que podamos ver aquí mismo. Y si vamos a algo así como, no lo
sé, vamos a voltear arriba. Voy a salvar esto. Y luego voy a refrescar la página. Se puede ver que nos dieron otro aceite en diferente animación. Por supuesto, te lo voy a dejar a ti. Podríamos aumentar o disminuir la duración de esta animación. Entonces veamos tal vez cómo se ve eso, qué efecto hace. No podías verlos que no, ahora mismo lleva mucho, mucho más tiempo animar estos elementos. Pero claro, no querríamos que la animación tardara tanto. Yo diría que algo entre 0.2 segundos a 0.4 debería ser suficiente. Queremos que todo suceda a inocentes peligrosamente, No
queremos que nuestros usuarios esperen a que se cargue nuestra magnitud. Entonces esto debería estar bien. Entonces ahora lo que podemos hacer es añadir una sombra de caja a nuestro, a nuestro menú. Por lo que todo este menú obtendría una sombra detrás de él. Entonces voy a seguir adelante y elegir un color, un color de sombra. Y suele decir En caso de que algo oscuro, pero también, voy a disminuir la transparencia siempre tan ligeramente. A lo mejor hacer algo como esto. Y ahora podríamos hacer tal vez jugar con los valores de desplazamiento horizontal, desplazamiento
vertical solo para mover nuestro, nuestra sombra de caja. Y podríamos intercambiar, aumentar y el desenfoque y, y aumentar o disminuir la propagación. Por supuesto, todas estas opciones son para que juegues. Y básicamente funcionan igual que trabajan en cualquier diseño y esa pieza de software de diseño. Entonces vamos a ver realmente qué efecto lo hizo, lo hizo. Entonces ahí vamos, nos agregaron nuestra sombra. Por supuesto, se ve horrible, pero en realidad se puede ver que simplemente funciona. Y solo depende de tu imaginación, hasta tu app, hasta tu diseño para que se vea estéticamente agradable. Y a ti y por supuesto a tu cliente, si realmente quieres hacer eso,
que la sombra de caja ahora se ve bien un poco diferente. Ahora, realmente no necesito esta caja sombras Amoco en acaba de borrarse. Pero claro, quería mostrarles cómo es esta opción porque por supuesto
queremos aprender a usar oxígeno para construir nuestros sitios web. Por lo que ahora podemos ir al icono desplegable. Y por supuesto podemos mostrar el icono desplegable o no necesitamos mostrar eso. Entonces eso solo sabría que eso dejará
al usuario pensando si hay algunos sub menús que queremos mostrar, no le
informamos al usuario que en realidad hay algo escondido dentro de este enlace. Pero tal vez este icono no sea lo que te gustaría. Ya lo sé, realmente no me gusta. Para que quizá pudiéramos encontrar algo más. Por defecto, podemos elegir entre y Font Awesome fuentes o iconos lineales. Ahí vas. A lo mejor encontremos algo aquí. Si los conoces. Si conoces el, ya sabes, el nombre del icono, solo
puedes teclearlo. Déjame ver cómo se verá este tipo. Supongo que se ve mejor que ese ícono, pero tal vez sólo voy a cambiar el tamaño, algo así como ocho píxeles y tal vez aumentar el margen, tal vez no a diez, pero al igual cinco, esto debería estar bien. Y si quieres, también
podrías rotar el icono. A lo mejor dos, algo así. A ver, 120 o 90. Conoce, cada vez que alguien se cierne sobre este ícono, lo harían, verían nuestro, nuestro sub-menú. Por lo que hay
bastantes, bastantes opciones para que elijas aquí mismo. Y creo que estas explicaciones son bastante claras. Se puede cambiar la rotación abierta, se
puede cambiar incluso esa transición de eso, de esa rotación. Pero de nuevo, te lo voy a dejar a ti, hasta tu gusto de diseño, una app a tu experimentación, porque esta es realmente la única manera en que te vas a poner bien en esto. Para que después del desplegable Ico, obtuviéramos colores desplegables. Entonces si cambiamos el color de fondo a tal vez algo así. Si pasamos el rato, se
puede ver que nuestro fondo es, está cambiando. Y si cambiamos este color de fondo que se cierne a algo así como este rojo oscuro, al pasar el rato, tal vez déjame simplemente guardar eso sería más fácil ver los cambios aquí. Cuando pasamos el rato, se puede ver que en realidad es, en realidad está cambiando. Nuestros antecedentes están cambiando. Entonces déjame deshacerme de estos tipos. Por supuesto, podríamos cambiar el color del enlace, el color del texto del hover, pero vamos, te lo voy a dejar a ti si quieres cambiar eso. Y también podríamos cambiar los enlaces infantiles o si tuviéramos como un submenú. Dentro de un submenú, quisiéramos cambiar a todos estos tipos de aquí. Ok, entonces supongo que nos ordenaron nuestro menú de escritorio. Y ahora creo que ahora podemos pasar a hacer realmente nuestro menú sensible. Entonces empecemos a hacer eso. En el siguiente video.
16. 3.10responsive menu: Como ya sabemos, una vez que empezamos a ir, di suerte, como menos de 768, nuestro menú se ve horrible. Está rompiendo nuestro sitio. Entonces aquí, cuando vamos a nuestro menú pro primario, pro menu elementos, se
puede ver esta opción aquí mismo que dice Mobile Menu toggled debajo de unos con giros abiertos, se
puede ver que podemos, que nos dieron nuestros puntos de descanso el igual que aquí. Y también siempre y nunca. Todas estas opciones controlan cuándo va a aparecer tu menú como un, como un menú responsive. Entonces si lo hacemos siempre, nuestro menú siempre va a lucir ya que es un menú responsive. Si lo hacemos, nunca, nuestro menú nunca se va a ver como un menú responsive. Pero si elegimos, digamos menos de 992. Si empezamos a previsualizar
nuestro, nuestro lado ahora mismo, cuando está establecido en 11120 píxeles y por debajo, todavía
se ve bien. Pero cuando vamos a menos de 992, se
puede ver que nuestro menú se está convirtiendo en un, en un menú móvil, en el menú del smartphone. Voy a guardar mi sitio porque creo que voy a dejarlo como menos de 992. Se ve bien. Entonces, ¿qué podemos hacer con nuestro menú? En primer lugar, cuando hacemos clic en él, se
puede ver cómo se va a ver nuestro menú cuando, cuando lo abramos. Entonces cuando vas a la opción de menú móvil justo aquí, y puedes ver que tenemos toneladas y toneladas de opciones para controlar nuestro manual móvil, móvil. Entonces, en primer lugar, podemos comprobar, podemos ver qué bien, que puedo, Podríamos usar como nuestro menú. Por lo que normalmente usaríamos algo así como una simple barra de tres. Entonces, veamos si podemos encontrarlo. A lo mejor no así. Veamos las líneas. Si bien todo bien, tal vez supongo que nos vendría bien este. Pero sé que hay un diferente, déjame solo empezar a escribir menú que tal vez, eso tal vez sea mejor. Entonces voy a elegir y estas barras aquí mismo, y puedes ver que estamos cambiando nuestro,
nuestro menú, icono del menú lo hará básicamente instantáneamente. Y aquí abajo, puedes optar por dejar esto como palanca manual, este texto como menú. Podríamos escribir algo más como abrir tal vez o como yo. Si quisieras, ese sería solo el texto para nuestro menú, pero normalmente solo lo dejo en blanco. Por lo que tenemos justo el menú simple buscando longitud es, por supuesto, si hacemos click en él, se puede ver que tenemos nuestro menú justo aquí. Podríamos por supuesto cambiar su tamaño, hacerla más grande, hacerla más pequeña. Yo voy a vivir. No será como 42. ¿ Por qué no? Podríamos cambiar el margen, podemos cambiar el color. Entonces tal vez le voy a dar mi color predeterminado. Sé que no hay demasiado cambio, pero me estoy quedando y los colores consistentes. Podríamos cambiar el color del icono del ratón si quisiéramos. Entonces cada vez que alguien lo haría, bueno básicamente tocarlo, entonces ese color cambiaría. Podríamos cambiar el relleno. Entonces si quisieras tener tal vez como decir, déjame solo tal vez convertir a este tipo negro y luego el yo pueda colorear. Hagámoslo, hagámoslo de color blanco o blanquecino. Se puede ver cómo podemos cambiar el aspecto de nuestro botón. Botón completamente. Eso sólo va a ser, bueno, puede ser tu elección de diseño si quieres hacerlo así, y tal vez podrías simplemente hacerles que Penn es más pequeño. Entonces eso es lo que ella podría hacer si tú quisieras. Simplemente voy a deshacernos tal vez de estos tipos y volver a nuestro original. Y no necesito el color de relleno. Y supongo, ya sabes, todos estos valores son bastante autoexplicativos, pero solo necesitas hacer clic y revisar y deslizar. Y son solo todas estas opciones solo para que veas qué efecto tienen en tu ícono de menú. Entonces este es el ícono del menú, pero por supuesto solo es el diseño del icono Abrir. Si querías cambiar, si querías tener algún texto aquí mismo como ese texto del menú, puedes cambiar, puedes controlar ese texto desde esta topografía de icono Abierto. Ahora si nos movemos a cerrar, puedo maquetar. Esa va a ser la ONU, ese menú aquí mismo. Este, quiero decir, este ícono de aquí. Si quisieras hacer que se vea diferente, quizá
intentemos encontrar alguna cosa que coincida con nuestro icono Open, como un hacha o algo así,
que coincida con nuestro ícono como bebé, este actos que se vería un poco mejor . Y de nuevo, se podría optar por dejar que el, este icono textos tan cerca. Si quisieras hacer eso. A lo mejor podríamos cambiar la posición de nuestro ícono. A lo mejor moverlo desde el lado izquierdo todo el camino hacia la derecha. Y en realidad, creo que esto es yo creo que esto es algo que el equipo de oxígeno podría cambiar tal vez. No sé por qué ellos, este ícono siempre se establece por defecto a la izquierda cuando normalmente las personas son diestros. Y supongo que es sólo una mejor usabilidad de UX cuando este icono de cierre está más cerca del lado derecho y nosotros no, no
tendríamos que cambiar. Y todos estos elementos, todos estos valores sólo para mover el icono a la derecha. Y por supuesto tenemos todas las mismas opciones aquí mismo que teníamos con nuestro diseño Open icon. De acuerdo, entonces tal vez no, tal vez aumentemos este ícono a 42. Creo que el diseño abierto de Eigen se estableció para abrir eigenstates se configuró para totalmente, creo, supongo que siempre podríamos comprobarlo como 42, así que estamos manteniendo las cosas consistentes. Vayamos a nuestros estilos de menú. Y supongo que lo más importante aquí sería cambiar el texto del elemento alinear al centro. Por supuesto, si quisieras tenerlo alineado a la izquierda o a la derecha, podrías hacerlo. Pero usualmente, cuando conseguí que muchos parecieran así, usualmente lo mantengo centrado. Entonces sólo voy a guardar esto. Y si ahora sólo vamos a nuestro diseño, se
puede ver eso y b, déjame hacerlo más grande. Si ahora sólo lo hacemos más pequeño. Ahí vamos. Si empezamos a hacer nuestra ventanilla gráfica más pequeña y golpea el punto de ruptura 992 se va a convertir en un Líbano sencillo, así de sencillo, pero definitivamente un Menú Móvil.
17. 3.111de lienza de lienzo: Otra cosa interesante del Menú Móvil Aquí
está aquí y el oxígeno es el hecho de que puedes hacerlo fuera de lona. Si solo haces clic en esta opción aquí mismo, vas a poder animar un poco como la leva en el lienzo en el menú. Algo como si viniera de fuera de la ventanilla. Entonces déjame mostrarte a lo que me refiero. Entonces si acabamos de quitar a este tipo, así que tenemos todas las, todas las opciones por defecto, por defecto aquí mismo. Yo lo voy a guardar. Y luego vamos a nuestro menú. Voy a refrescar la página. puede ver que es como desvanecerse desde el lado derecho. Ahora mismo. Lo que podríamos hacer es que podríamos hacer tal vez aumentar el tamaño de nuestro lienzo. Podríamos tal vez incluso hacerlo, vamos por ahora, hacerla más pequeña. Hagámoslo como el sesenta y seis por ciento sólo para que podamos ver qué está pasando. Y lo voy a guardar y voy a cambiar el color de fondo sólo para que puedas ver este menú un poco mejor. Y así si ahora refrescamos la página, de nuevo, se
puede ver que este es nuestro, este es nuestro manual que es un poco como fallar desde la derecha. Podemos, por supuesto, cambiar algunas cosas al respecto. A ver si lo alineamos a la izquierda. Y veamos cómo se verá esto. Y se puede ver que ahora se está alineando a la izquierda. Pero supongo que por la derecha sería mejor. Y podríamos por supuesto, cambiar la animación off Canvas. Y hay bastantes opciones para elegir. A ver, aleje el zoom y veamos qué es, qué va a hacer. Voy a refrescar la página. Y se va a ver algo así. Es bastante pesado. Pero supongo que tal vez, ya sabes, tal vez esto es algo que te gustaría hacer. Yo tal vez disminuiría la duración para que sea más rápido. Entonces veamos qué hace ahora mismo. Entonces puedes ver, supongo que no es la más pequeña de las animaciones, sino anotar algo a algo que podrías hacer. Entonces solo voy a hacer tal vez algo sencillo como diapositiva, diapositiva a la izquierda. ¿ Por qué no? A ver, deslízate a la izquierda. Y así. Y se ve mucho, mucho mejor, mucho, mucho más suave. Entonces por supuesto, cuando disminuimos el tamaño de nuestro mirador, ya que nosotros, ya que este ancho se pone a hervir, establece en porcentajes, ya sabes, siempre
va a ocupar el, una cantidad específica de espacio justo aquí, que se muestra en porcentajes. Si lo pusiéramos a solo píxeles. Ahí vamos. Y vamos a refrescar la página. Ahora siempre va a tomar ese valor. Pero en píxeles que no se ve, no se ve demasiado bien. Si sin embargo quisiéramos tal vez como cubrir toda esta página, podríamos usar el valor de ancho de la ventanilla gráfica. Y si lo configuramos en 100, eso significa que toda la vista, toda la ventanilla se ocultará. Entonces si solo salvas a este tipo y luego refrescas la página y la vamos a aumentar. Y se puede ver que ahora mismo, nuestros menús que cubren todo nuestro mirador de izquierda a derecha porque esto es lo que no hace esta unidad el ancho de la vista VW. Entonces lo voy a dejar como esa diapositiva izquierda 2.2 segundos. Eso se ve, eso se ve bien. Entonces ahora que llegamos a nuestro menú off Canvas ordenado, aún
podríamos jugar con los menús desplegables móviles. Entonces abramos nuestro menú. Y como pueden ver, tenemos nuestros menús ocultos aquí mismo, pero ellos, no se ven tan bien. Podríamos quizás cambiar el color de fondo a lo que realmente quisiéramos. Podríamos quizás cambiar el ancho de nuestro borde a unos 1.1 píxeles para que coincida con nuestros bordes del menú de escritorio. Y por supuesto, si quisieras pero jugar con el color harías el estilo. Pero supongo que eso se ve, eso se ve bien. Tenemos nuestra mm-hm. Menú Móvil. Menú. Bastante, bastante ordenados. Entonces si solo salvamos a este tipo y refrescamos esta página, y yo sólo la voy a hacer más grande. Si ahora empezamos a bajar, bajamos, bajamos. Obtienes nuestro menú móvil. Si hacemos click en él, obtienes nuestra animación y nos dieron nuestros dropdowns. Entonces todo está funcionando, funcionando sin problemas, funcionando bien. Entonces al trabajar con menús aquí dentro del oxígeno, si no quieres jugar con todas estas opciones, podrías usar uno de sus presets que vienen con el, con el programa. Entonces supongo que podríamos simplemente echar un vistazo brevemente a los siguientes.
18. 3.12menú: Antes de empezar a usar los presets de menú de D, voy a guardar mi propio menú como mi propio preset. Entonces le voy a nombrar mi menú. Sé que no es para creativo, pero lo voy a guardar igual que mi menú. Y ahora se sienta justo aquí en mi, en mi lista con otros presets de menú. Entonces digamos que me gustaría usar el slider para escribir venue. Y como se puede ver, no sólo se va a aplicar el efecto deslizante, sino también todos los demás elementos. Entonces por ejemplo, el menú está configurado en móvil y como siempre, si hacemos click en él, se puede ver que se mueve a la izquierda y tenemos todos, todos estos elementos. Y si vamos a, digamos de escritorio y móvil, puedes ver eso de nuevo, cambia el menú. Ahora se ve así. Y por supuesto que podríamos, veamos mínimo como mi minimalismo me gusta. Bueno, eso no es demasiado para mínimo dividir días. A ver cómo se ve. Cuando nosotros, cuando lo previsamos aquí mismo. Si hacemos click en él, este es, este es nuestro, este es nuestro menú. No se ve tan mal,
pero claro que aún podríamos cambiar los enlaces. Podríamos cambiar la fuente, todas esas cosas. Pero de nuevo, si quieres usar uno de los, uno de los presets que vienen conmigo, ven con oxígeno. Definitivamente, definitivamente podrías hacer eso. Pero creo que me voy a quedar con mi, con mi menú y lo voy a guardar. Y yo sólo pienso que, se ve un poco mejor. Y esta es una especie de look que voy por este diseño porque
estamos creando un diseño para nuestros servicios como diseñadores. Entonces creo que si solo para mantenerlo sencillo, eso nos va a mostrar como diseñadores quién, quién consiguió, quién consiguió gusto. Entonces dejémoslo así. Pero claro que aún no hemos terminado. Ni siquiera terminamos con nuestro encabezado. En el, en los videos posteriores, vamos a echar un vistazo a los encabezados pegajosos y también añadir encabezados de superposición. Aquí dentro del diseñador, terminamos con el menú. Ahora vamos a terminar ese encabezado con el,
con el encabezado pegajoso y el encabezado de superposición.
19. 3.13Inner y contenido interior: Por lo que ahora vamos a cuidar el encabezado pegajoso y también un encabezado de superposición. Pero para que esos efectos sean visibles en absoluto, necesitamos tener algo más de contenido en nuestra página web. Y en realidad, es un paso muy importante aquí en oxígeno
interno porque sin ese módulo de contenido interno, no
podríamos agregar nada a nuestro sitio web una vez que nuestras plantillas estén leyendo. Entonces lo que voy a hacer es ir adelante a las plantillas de oxígeno y lo voy a agregar mi plantilla principal con, con oxígeno. De acuerdo, entonces estoy dentro de mi plantilla y voy a seguir adelante y hacer clic en este botón Añadir. Y voy a empezar a escribir en contenido. Y una vez que tenga este módulo de contenido interno justo aquí, solo
voy a dar clic en él. Y como pueden ver, se agrega a mi estructura y en realidad no pasa mucho. O sea, podríamos darle estilo si quisieras, pero ese no es realmente el punto de este módulo. Básicamente, este módulo nos va a permitir mostrar todo en nuestra página web sin él. Yo, supongo que sería posible, pero sólo estaremos construyendo nuestras plantillas. Y ahora si quisieras agregar imágenes o texto aquí mismo ese día sería parte de la plantilla. Y se mostrarían en, en todas y cada una de las páginas que vería un usuario. Entonces cada vez que solo quieras, ya sabes, como terminar de diseñar tu, de tu plantilla, de tu plantilla principal. Solo recuerda tener listo el módulo de contenido interno y a la espera,
para tus próximos pasos de diseño. Porque sin ella, serían básicamente imposibles. Entonces una vez hecho eso, sólo
tenemos que salvarlo. Entonces voy a volver a mi panel de administración. Porque ahora mismo si queremos ver ese encabezado pegajoso y si queremos ver el, el, el efecto de cabecera de superposición, necesitamos tener algún contenido en nuestra página web, en nuestra página. Entonces voy a ir a las páginas y lo voy a agregar con oxígeno. Voy a editar la página principal con oxígeno. Como puedes ver en este momento llegamos a este click Añadir a, añadir elementos a esta área. Y este botón básicamente debería corresponder con este botón. Pero ya que, como puedo recordar esto, esta pieza de texto es un poco diferente a esta pieza de texto. Sé que es solo el posicionamiento de este símbolo plus, pero anulo siempre, ya
sabes, siempre lo veo. Siempre lo noto. Pero de todos modos, una vez que tenemos a este tipo justo aquí, bueno, tenemos este texto. Sabemos que ahora tenemos que añadir algunos elementos a nuestra página web. Entonces si solo vamos a sumar como, como de costumbre, sólo voy a empezar con una sección. Y esta sección va a estar albergando nuestra imagen de héroe. Y voy a ir al Avanzado y luego fondo y enaquí en la imagen de fondo. Simplemente voy a agregar esta imagen a mi fondo. Y como puedes ver, se ha agregado a toda mi sección y
dice panning a través de toda la página por defecto, pero ese no es el caso en cuanto al tamaño, bueno, la altura de nuestra de nuestra sección. Entonces si quieres, solo
puedo volver al tamaño y al espaciado. Entonces si quieres, puedes establecer la altura aquí mismo. Y por supuesto, si lo configuras como píxeles, 500 píxeles, básicamente vas a ver esto. Y si tuviéramos que cambiar el valor de la unidad de píxeles a esta vez VH, que es la altura de la ventana. Ahora le vamos a decir al navegador que, ya sabes, extienda nuestra imagen de fondo
a través de toda la altura
de nuestro, de nuestro contenedor e independientemente del básicamente del contenedor. Entonces si lo pusiéramos a 100, este diseño lo hará, esta imagen va a tomar,
tomará hasta 100 unidades de altura de la ventanilla. Sé que aún podemos ver así,
esta pieza aquí en la parte inferior. Pero eso es solo porque conseguimos este encabezado en la parte superior y lo vamos a, una vez que inicialicemos la superposición manejada, vamos a arreglar eso. Pero por ahora, sólo voy a dejarlo así. Y cuando vas a nuestra página principal, puedes ver que tenemos esta imagen, imagen aquí mismo. Entonces tal vez agreguemos un poco más de contenido. Yo estoy bien para ir y voy a ir al panel de estructura y tal vez sólo voy a agregar sección. Y como puedes ver, se agrega justo debajo de nuestra sección anterior. Y también sólo voy a, voy a añadir algún texto ficticio que voy a pedir prestado del lado lorem ipsum. Yo sólo voy a ir yo sólo voy a copiarlo. Y luego sólo lo voy a pegar. Y tal vez déjame simplemente duplicar esta pieza de texto. Y creo que esto debería estar bien. Se trata de cuatro. Ahora esto es suficiente, suficiente texto que sólo tenemos que
aprender a usar el encabezado pegajoso y el encabezado de superposición. Entonces empecemos a hacer eso a continuación.
20. 3.14y pegajoso y superposición: Para agregar un encabezado pegajoso y para cambiar nuestro encabezado en un hetero de superposición, tenemos que hacerlo desde el, desde nuestro nivel de plantilla. Entonces sólo voy a asegurarme de que conseguí esto guardado. Y solo vamos a dar clic en mi encabezado y hacer clic en Abrir y editar plantilla. Sí, sí, abierto de todos modos. Y ahora mismo podemos cambiar nuestro, nuestro encabezado, ya que puedes ver nuestro avance en los hogares. Para que podamos ver todos estos elementos que acabarían de establecer para nuestra página principal. Y una vez que nuestro constructor de cabeceras esté activo, podemos ir a sticky y puedes hacer clic en Habilitar cabecera pegajosa. Entonces esto va a hacer es que nos va a permitir crear un encabezado pegajoso, que sería visible cada vez que un usuario se desplaza en nuestro sitio web. Entonces cuando alguien se desplaza hacia abajo, todavía
podemos mostrar ese menú a nuestros, a nuestros usuarios. Entonces solo voy a dejar la distancia de desplazamiento en un 2-300 porque cuando los usuarios se desplazan hacia abajo en unos 300 píxeles, se
puede ver que tenemos nuestro menú y apareciendo, pero vamos a arreglar este diseño en tan solo un segundo. Entonces voy a dejarlo así. Voy a cambiar el fondo pegajoso a este color. Entonces ahora cuando un usuario se desplaza hacia abajo, se
desplaza hacia abajo, el usuario va a ver
esto, este manual así. Y voy a elegir desvanecerse, pegarse eso va a simplemente muy bien animado. Podríamos quizá aumentar este desvanecido en velocidad. Ahí vamos. Esto se vería, se vería mucho más bonito. Y voy a salvar a este tipo. No obstante, quizá podríamos cambiar algunas cosas sobre nuestro menú que va a ser pegajoso. Es decir, yo soy, no creo que ellos quisieran que se viera así. Por ejemplo, quisiera que este menú fuera más pequeño. Y tal vez quisiera que respondiera siempre todo el tiempo. Entonces para eso, solo voy a ir a mi fila de encabezado y voy a duplicarlo. Entonces ahora mismo conseguimos dos filas de encabezado idénticas. Pero lo que voy a hacer es agarrar
mi imagen a la izquierda y la voy a hacer más pequeña. Voy a hacer como 24, tal vez incluso menos que eso, como 18. Y yo voy a hacer lo mismo con el rubro. Voy a hacerlo más pequeño, como puede ser 16. Esto debería estar bien. Y déjame simplemente agarrar la imagen puede ser y tal vez disminuir este margen siempre tan ligeramente a algo así como cinco píxeles. Y luego voy a agarrar mi manual pro. Y yo voy a decirle que esté bien, que sea móvil. Siempre así. Y a lo mejor voy a ir al menú Móvil y al diseño de icono Abrir. Y lo voy a hacer más pequeño, como 24. A lo mejor esto va a estar bien. Entonces ahora tenemos dos menús. A lo mejor sólo voy a cambiar también este relleno a algo así como 1010, o tal vez incluso menos que eso, como 55, ¿verdad? Entonces voy a guardar esto. Y si ahora vamos todo el camino de regreso a la primaria, ahora
podemos elegir mostrar esta fila,
esta fila de encabezado solo como un encabezado pegajoso. Entonces voy a dar click solo mostrar en pegajoso. Y voy a dar click en esta fila y voy a decir esconderse en pegajoso. Y ahora cuando salvemos a este tipo, y voy a refrescar mi página. Si ahora empiezo a desplazarme hacia abajo, se
puede ver que ese encabezado solo se muestra una vez que el pegajoso está oculto. Y cuando bajes, tenemos nuestro menú aquí mismo. Por supuesto, tendríamos que arreglar algunos problemas aquí mismo, pero claro que eso es, eso es fácilmente reparable. Podemos arreglar eso fácilmente. Pero el punto principal aquí mismo es que se puede cambiar la forma en que este cabezal stick hetero se comporta. Y una vez que desplácese hacia abajo por su página, cuando subamos, ese encabezado más viejo vuelve. Y cuando bajamos, tenemos nuestro nuevo encabezado pegajoso mostrado justo aquí. Entonces ese es ese encabezado pegajoso. ¿ Y el encabezado de superposición? Voy a quitar este encabezado pegajoso. No lo necesito. Déjame guardar esto y voy a refrescar mi página. Entonces tengo mi, mi encabezado aquí mismo. Y lo que voy a hacer es ir al constructor de cabecera de estructura. Y voy a seguir adelante y elegir Overlay. Y voy a decir que siempre quiero superponer el encabezado, que va a hacer mi,
mi imagen subir y hacer mi,
mi encabezado vaya como sobre nuestras secciones principales. Entonces si lo guardo y si refresco la página, ahora se
puede ver que nuestro, que nuestro encabezado está todo superpuesto sobre esto, sobre esta sección. Y esta imagen es en realidad ahora mismo porque la pusimos en 100 vh, como se puede recordar, ahora mismo, retomó todo, todo este espacio. Pero por supuesto algunos, bueno, esto, bueno, tal vez
podríamos jugar con todos estos colores a los que quizá no queramos hacer que esto se vea así. Entonces lo que haría es que tenemos otra vez, ir a la fila de encabezado y podríamos duplicarlo,
duplicar esta fila de encabezado. Y no, no quiero hacerlo más alto y pegajoso. Eso no es lo que queremos. Lo que queremos es, por ejemplo, vamos a querer esconder a este tipo cuando esté en superposición. Entonces esta cabecera superior, así que diría Haydn superposición. Pero este chico de abajo, tal vez
nos gustaría cambiar algunos colores. Entonces vamos a, déjame sólo agarrar mi rumbo. Y cambiaría el color del texto. Por supuesto tendríamos que cambiar este color mientras esta imagen también. Pero si no quieres cambiarlo, si no quieres simplemente subir una versión en blanco de este logotipo, quizá
podríamos hacer un truco rápido. Vamos a ir al avanzado que efecto. Entonces puedes ir a Filter. Y a partir de aquí podríamos cambiar, elegir, invertir, y luego simplemente ir al 100%. Y simplemente invertiríamos el color de nuestro, de nuestro local. Ahora funciona en este caso, pues estamos invertiendo el negro. Entonces del negro vamos a ir al blanco. Y si se leía, supongo que bueno podría invertirse en verde o azul. No estoy realmente seguro, pero en este caso, este efecto funciona en, por lo general estaríamos mejor si acabamos de cambiar esta imagen a una versión más ligera adecuada de nuestro, de nuestro logo. Pero de todos modos, podemos hacerlo así por el momento. También podemos ir a nuestro menú pro. Y quizá podríamos cambiar, cambiar el color de nuestro, de nuestro menú. Entonces podríamos cambiar el color aquí mismo. Podríamos agarrar el color del deslizador. Y yo sólo lo voy a dejar como está por ahora. Simplemente, solo para mostrarte lo que hace este encabezado de superposición en realidad en nuestro caso. Y como puedes ver, se ve bastante bonito. Básicamente, conseguimos un contraste adecuado entre nuestros antecedentes y nuestro encabezado. Entonces supongo que podríamos, podríamos dejarlo así. Por supuesto que nosotros, supongo que tendríamos que trabajar en nuestro logo, en nuestro menú aquí mismo, porque en este momento no se ve tan genial. Y sabes qué, supongo que voy a ir con este tipo de diseño. Voy a ir con este tipo de encabezado de superposición. Entonces supongo que tal vez podríamos arreglar este menú para que se vea adecuado. Por lo que quizá podríamos jugar con el fondo. Podríamos jugar con los enlaces,
el ícono, sólido, empezar a hacer eso a continuación.
21. 3.15 colorear el menú: Entonces arreglemos nuestro menú. Hagamos que se vea bien. Entonces voy a ir a mi menos de 992. Y voy a cambiar este ícono aquí mismo. Entonces voy a ir a mi menú móvil. Estoy abierto, puedo maquetar. Y voy a cambiar el color a mi color más claro así. Y si hacemos click en él, déjame ver cómo se ve. Nos dieron los antecedentes que tendríamos que cambiar y los enlaces que tendremos que cambiar. Pero para tal vez empecemos con el fondo de tierra. Entonces voy a ir a estilos de menú, y voy a ir al color de fondo. Y vamos a quitarlo. Y sabes qué, tal vez intentemos algo diferente. Voy a ir con este color marrón más oscuro, pero van a disminuir esa transparencia a algún salmo diez mentira. Entonces esto debería quedar bien. Y ahora no tenemos que jugar con nuestros, con nuestros enlaces porque tenemos suficiente contraste. Pero tenemos que ir a nuestro icono de menú de cierre, por lo que cerrar el diseño de iconos. Y déjame solo encontrar el color para ello. Por lo que solo voy a dar clic en esta opción y cambiarla a blanca. Y a lo mejor voy a tratar de moverlo a un lado. Por lo que un poco como cubre esta y esta opción aquí mismo, esta parte justo aquí. Entonces solo voy a seguir adelante y hacer puedo posicionarme a la izquierda y voy a ir con los porcentajes. Y veamos 75, veamos 85. Veamos 19. A lo mejor 90 estará bien. Guardemos esto. Y vamos a ver cómo se va a ver en realidad. Una vez hecho. Supongo que se ve bien. Supongo que podríamos dejarlo así. O nuestro pozo, casi todos nuestros menús están funcionando bien. Todavía necesitamos cuidar los menús desplegables móviles. Entonces vayamos a nuestros dropdowns móviles. Y voy a quitar este color desplegable. Entonces veamos cómo se ve ahora. Se ve mucho mejor. Salvemos a este tipo, refresquemos. Y otra vez, y este es nuestro menú. Mirando, luciendo bastante bonito, creo que se ve bien. Entonces tenemos nuestro,
tenemos nuestro Menú de Cabeceras terminado. También tenemos nuestra imagen principal para nuestro héroe terminado también. No obstante, vamos a jugar con nuestro héroe tranquilo extensamente en los próximos videos. Y no olvides que todavía teníamos nuestro cabezal pegajoso aquí mismo. Por lo que podría ver a alguien errores. Por supuesto, si quieres mantener el encabezado pegajoso, podrías hacer eso. Ya sabes hacer eso. Y definitivamente, definitivamente te animo a jugar con todas esas opciones, pero sólo voy a deshacerme quizá de eso. Yo sólo voy a ir a las opciones pegajosas. Y voy a desactivar el encabezado pegajoso. Y veamos si eso funcionó. Entonces solo voy a refrescar la página y como pueden ver, el encabezado pegajoso se ha ido. Entonces como dije, ahora mismo, podemos pasar a hacer nuestra sección de héroes aquí mismo un poco más interesante. Podemos agregar algún encabezado, algunos textos, tal vez algunos botones, y tal vez algún slider, pero ya veremos de eso en los próximos videos.
22. 4.1centrar el contenido de una sección: De acuerdo, así que pasemos a nuestra página principal. Entonces voy a ir a las páginas, a todas las páginas, y voy a elegir la página de inicio y voy a editar con oxígeno. Entonces este es nuestro diseño. Por lo que tenemos nuestro propio, tenemos nuestro encabezado de superposición. Tenemos nuestra sección dos, que agregamos una imagen de fondo, esta de aquí. Pero también como recordarán, también lo
fijamos en 100 vh. Por lo que esta imagen se extiende por toda la altura de nuestra sección de héroes. Y por supuesto tenemos algo de contenido ficticio
aquí mismo que supongo que en realidad podríamos eliminarlo, pero vamos a mantenerlo por ahora. Por lo que el siguiente paso aquí sería hacer que nuestra imagen de héroe fuera un poco más interesante. En este momento sólo tenemos una imagen. Y básicamente, bueno, no
estamos comunicando demasiadas cosas a nuestros, a nuestros usuarios. Entonces qué, lo que me gustaría hacer aquí es que me gustaría agregar tal vez como un encabezado, me gustaría agregar algún texto. A puede ser un llamado a la acción en un formulario, en forma de botón. Pero antes vamos a hacer todo eso, y hay algunas cosas que debemos tener en cuenta. Si ahora solo añadiéramos, Digamos que ese rubro. Y luego nos gustaría añadir algo de texto. Ahí vamos. Y luego nos gustaría añadir un botón. Ahí vamos. Se puede ver que todas estas cosas se están agregando en la esquina superior izquierda. Por supuesto, hay un poco de relleno justo aquí porque la sección por defecto está configurada para tener tamaño y espaciado está configurado para tener 75 píxeles de relleno superior e inferior y 20 píxeles de relleno izquierdo y derecho. Entonces hay algunas cosas que me gustaría hacer para este texto aparezca en el punto central, no sólo horizontalmente sino también verticalmente. Pero también me gustaría cambiar un poco esta imagen. Y quiero decir, me gusta asegurarme de que esta imagen de fondo, que también esté centrada. Y ahora mismo parece que está centrado, como si estuviera bien. Pero cuando empecemos a hacer todo este diseño responsivo, verás que vamos a estar perdiendo nuestra composición, por así decirlo. Entonces tomémoslo despacio, paso a paso. Entonces primero echemos un vistazo a cómo hacer todo este contenido, cómo centrar este contenido en relación a nuestra sección. Y podría estar pensando que tal vez tenemos que como agarrar el rubro o el impuesto o el fondo. Y entonces tal vez como en Photoshop e Illustrator o cualquier otro programa, solo golpea alguna opción de alineación justo aquí en la parte superior. Pero en la construcción de sitios web, yo soy, sería sobre todo aquí en oxígeno. Sería mejor idea decirle a la sección,
esta sección aquí mismo cómo renderizar todo el contenido. Y eso en realidad se está poniendo en nuestra sección y en nuestra, en nuestra sección de héroes y héroes. Así puede ser, por cierto, vamos a hacer click en estos, en este menú, en estas flechas. Y cambiemos el nombre de nuestra sección. Vamos a llamarlo. Ahora llamémosla sección de héroes. Ahí vamos. Voy a guardar mi diseño. Entonces lo que quiero hacer es asegurarme de que este encabezamiento, que este texto, y que este botón esté establecido exactamente en el punto central vertical y horizontalmente. Entonces cuando yo, cuando conseguí mi sección de héroes seleccionada aquí mismo, voy a pasar a estas opciones de alineación horizontal de elementos. Y voy a dar click en centro. Como pueden ver, ahora todos mis elementos están siendo centrados horizontalmente, pero no están centrados verticalmente. Yo quiero que todos estos tipos estén exactamente en medio de nuestra sección. Entonces para hacer eso, voy a ir a la pestaña Avanzado y voy a ir a Layout. Por cierto, todos estos elementos se quedan mirada. Bueno como si fuera como, se ve como algunas cosas bastante aterradoras aquí. Pero déjame decirte que básicamente lo que estamos haciendo aquí mismo es le
estamos diciendo al oxígeno que escriba algunas reglas CSS para nosotros. Y CSS por supuesto significa Hojas de Estilo en Cascading. Básicamente, esos estilos son los responsables de hacer que nuestros encabezamientos se vean de la manera en que se supone que deben verse. Ellos son los responsables del alineamiento. Todas esas cosas. Es decir, no tenemos que escribir ningún código. Podemos simplemente decirle al oxígeno que escriba ese código, por supuesto, en el back-end para nosotros simplemente haciendo clic en ciertas, ciertas opciones. Entonces como pueden ver, tenemos nuestro centro de alinear artículos. Eso es básicamente lo que hicimos. Déjame ir a la primaria. Eso es básicamente lo que hicimos aquí. Y ahora lo que queremos hacer, de nuevo, layout es que quieres poner todos estos elementos en el centro. Entonces para hacer eso, todo lo que tenemos que hacer es simplemente dar click en esta opción de centro de contenido justificar. Y básicamente hemos terminado. Establecemos nuestro contenido exactamente en el medio. Y si ahora salvaremos a este tipo y empezamos a echar un vistazo. Y echaremos un vistazo a nuestras opciones de respuesta. Se puede ver que todos, todo el tiempo, todos estos elementos siempre se quedarán exactamente en el medio. Por supuesto, como se puede ver en
este momento, se está poniendo este impuesto. Se ha alineado al centro y nos
gustaría que se alineara mientras se está alineando a la izquierda. Pero queríamos estar alineados con el centro y
por supuesto vamos a ocuparnos de ello en tan solo un segundo. Pero también se puede ver que nuestra imagen de fondo, Es un poco como se recortó. Al igual que no vemos ese punto focal exactamente en el centro. Y eso es algo que tenemos que cuidar también. Pero empecemos a hacer eso en el siguiente video por ahora, solo
quiero que entiendas que si quieres asegurarte de
que estás alineando todo el contenido exactamente en el spot central. Todo lo que necesitas hacer es ir a la pestaña Avanzado y luego a diseñar y tienes todas las opciones de alineación listas y esperándote aquí mismo. Entonces ahora pasemos a alinearlos o centrar nuestra imagen también.
23. 4.2Centrado la imagen de fondo: Si empezamos a previsualizar nuestro diseño f, como si fuera renderizado en algunos dispositivos más pequeños. Podrás ver que nuestra imagen de fondo es xm. Es como ser recortado. No estamos, no somos capaces de ver a nuestro punto focal, en este caso nuestro punto central. Bueno, estamos instantáneamente en el punto central. Si vamos a menos de 480, se
puede ver que, bueno, este tipo de luce un poco raro y piensas que esta laptop está recortada costado y básicamente no estamos seguros de lo que estamos viendo. Entonces para evitar que esta situación suceda, hay una pequeña solución rápida, un pequeño truco rápido que te permitirá mantener tu punto focal exactamente donde quieres que esté en cuanto a ver tus imágenes de fondo. Ahora en nuestro caso, queremos el punto focal que exactamente en el medio. Entonces lo que podemos hacer es ir a cuando se seleccione nuestra sección. Se puede ir al fondo. Y aquí abajo verás estas opciones izquierda y superior. Por lo que estos chicos te permiten mover tu imagen de fondo en relación con el punto izquierdo y el punto superior. Ahora bien, si tuviéramos que decir, no
sé, hacer algo así como el 50%. Ahora, en este punto, no está pasando mucho porque estamos previendo el gran escritorio. Pero si empezamos a bajar, se puede ver que en realidad ahora mismo nuestra imagen se está moviendo. Si puedes recordar, cuando estábamos, cuando esto se fijó en el 0, así es como, esta era nuestra, nuestra imagen de fondo. Y ahora mismo lo movimos para decidir. Y si quieres mantenerlo
así, bueno, por supuesto que podrías, pero esa no sería una buena técnica de producción igual a significar buena práctica de producción. Lo que es mejor hacerlo es mantener los valores izquierdo y superior siempre al
50% y a la izquierda y 50% a la parte superior porque esto
siempre se asegurará de que tu punto focal esté exactamente en el medio. Por supuesto, si quieres, gustaría poner tu punto focal como en la esquina superior derecha, podrías jugar con estas opciones también. Pero si ahora empezamos a mirar nuestro diseño en dispositivos más pequeños, se
puede ver que nuestro punto poco, un punto focal llamado B1, está siempre, siempre en el medio. Por lo que esta es solo una pequeña y agradable técnica de producción para que, para que lo utilices siempre que quieras jugar con la capacidad de respuesta de tus imágenes de fondo y con centrar tu focal, punto focal.
24. 4.3Ajustar el contenido del héroe: Entonces una vez que tengamos el fondo ordenado, bueno, como en 99%, vamos a hacer un poco delgada una vez que tengamos nuestro contenido aquí mismo ordenado. Entonces claro, lo que quiero hacer es cambiar el color de mi rubro. Entonces solo voy a agarrar a este tipo y simplemente elegir este color claro. Y yo voy a hacer lo mismo por este tipo. Y voy a dejar el botón como está por ahora. Lo que quiero hacer es querer quizá agregar algo más de texto aquí mismo. Entonces vamos a lorem, ipsum. Eso va a algún Lorem. Agarremos un poco de texto de Lorem Ipsum. Esto debería ser, supongo que podemos agarrar sólo esto. Y sólo voy a hacer doble clic aquí y sólo presionar el control V para pegar a este tipo aquí mismo. Cuando lo echamos un vistazo, bueno, tenemos, bueno tenemos algunos problemas en realidad, no sólo un problema. Entonces, en primer lugar, nuestro texto ha sido, bueno ,
es mucho, demasiado grande, es demasiado, demasiado ancho. Además, podríamos quizá jugar con el espaciado entre todos estos elementos, como entre los encabezados en el texto y la parte inferior. Pero también nosotros, no creo que tengamos suficiente contraste entre nuestro texto y nuestros antecedentes. Entonces tal vez abordemos ese último tema ahora mismo. Por lo que sigo aquí en mi sección. Conseguí mi seccional seleccionada. Voy a ir a Avanzado y luego a fondo. Y aquí abajo tenemos esta opción que dice color de superposición de imagen. Si elegimos nuestro color, digamos que voy a agarrar a este tipo aquí mismo. Se puede ver que en este momento estamos superponiendo un color sobre nuestra imagen de fondo. Y por supuesto, eso no es del todo lo que queremos. Déjame volver a agarrar el color. Lo que quiero hacer es que quiero disminuir la transparencia cada vez tan ligeramente al verano aquí solo para agregar algunos contrastes entre el encabezado MyText y por supuesto el extremo inferior, ese fondo. Entonces lo voy a dejar como un así que ese es un tema ordenado. Ahora, el otro tema es que si empezamos a hacer en nuestro texto, bueno, nuestro mirador más pequeño, se puede ver que nuestro sistema tributario bien se extiende a través de casi toda y toda la página. Y eso no es exactamente lo que quisiéramos. Entonces voy a volver a mis viejos dispositivos. Yo me voy, voy a volver a esto, bueno, esta vista aquí mismo. Y lo que me gustaría hacer es que me gustaría hacer más pequeños a todos estos chicos. A mí me gustaría, ya sabes, podríamos tal vez sólo agarrar este texto e ir a Avanzado. Y luego a dimensionar y espaciar y tal vez jugar con el ancho. Digamos que escribirías 50 píxeles o 50% y pondrías a este tipo más pequeño. Y podríamos hacer lo mismo por el contenedor de nuestro rumbo. Pero vamos, vamos. Un poco diferente, y en realidad aprendamos una técnica más, creo, muy importante aquí dentro del oxígeno. Pongamos todos estos elementos en un contenedor específico. Y ese contenedor será nuestro div. Entonces un div básicamente es solo un poco como un contenedor genérico que te permite poner otras piezas de contenido dentro de él. Y bueno, ya sabes, no tiene ningún tipo de atributos específicos al mismo, pero permite controlar el diseño y el tamaño de muy, muy fácilmente. Y es una, es una muy poderosa,
una poderosa pieza de, bueno, un CSS o HTML en realidad aquí dentro del oxígeno. Entonces la forma en que pudimos hacer esto es simplemente que podríamos ir adelante a nuestro rumbo. Y de nuevo, usa este pequeño menú aquí y solo elige envolver con DIV. Lo que va a hacer es que va a poner esa pieza específica de contenido, en este caso el rubro. Y lo va a poner dentro de este div. Y lo que quiero hacer es simplemente mover a estos tipos también a nuestro contenedor. Como se puede ver, bueno, algunas cosas han cambiado, pero aún así el impuesto no está funcionando correctamente. Entonces ahora mismo cuando tengamos nuestro div, podríamos ir al centro de alineación horizontal de elementos, poner el contenido en el centro. Pero creo que también debemos ir a nuestro texto que a topografía
avanzada y alinear el texto al centro también. Entonces ahora cuando vamos a nuestro contenedor de página, se
puede ver que todos estos elementos están muy bien alineados con el centro y se puede ir a menos de 992. Sucede la misma situación. Ahora en este punto de ruptura, se
puede ver que nuestro rumbo empieza a mirar, bueno, no lo mejor que podríamos quizá cambiar algunas cosas al respecto, pero creo que quizá podríamos cambiar el tamaño de la misma, la altura de la línea, pero también el alineación. Entonces como puedes ver un cuando tú, cuando compruebas tu capacidad de respuesta en el camino, si no esperas hasta que todo tu diseño esté, está terminado, si solo ajustas la capacidad de respuesta a medida que vas, eso solo te va a salvar un mucho tiempo, confía en mí en eso. Entonces voy a ir a todos los dispositivos. Nuevamente, agarrar este rumbo, ir a topografía avanzada y alinearlo con el centro. Entonces ahora si vamos a menos de 992 o 68, se
puede ver que nuestro rubro está siendo muy bien alineado. Entonces lo que también voy a hacer es que quizá vaya a aumentar el tamaño de la fuente. A ver 48. Esto debería estar bien. Y tal vez escribamos algo aquí. Digamos, bienvenidos a wow, diseño. El lugar de tu próximo proyecto. Ponlo así. Voy a dejar ese texto ficticio, ficticio como está aquí mismo. Y ahora cuando empezamos a cambiar nuestra capacidad de respuesta, se
puede ver que tenemos un, bueno, la altura de línea justo aquí es, creo que es un poco demasiado grande. Entonces voy a agarrar el rumbo otra vez. Y desde la topografía de tabulador Avanzado, vamos a facturar y altura de línea como uno o puede ser 1.1. Y voy a ir a la página contenedor 1120. Creo que esto debería quedar bien. Creo que creo que está bien. Pero al principio como recuerdas, pusimos a todos estos tipos en un div específico y como que nos olvidamos de ello. Pero eso es sólo porque empezamos a jugar con estos elementos. Yo, yo no actué y me olvidé de ello. Entonces cómo esto, todo este div, situación nos puede ayudar cuando echamos un vistazo a otros puntos de ruptura más pequeños y más pequeños, puede ver que este div es No a mi base golpea un poco también, es un poco demasiado ancho si vamos a nuestros viejos dispositivos. Y luego cuando se seleccione el div, cuando vayamos a esto, vamos a nuestra pestaña primaria. Y conseguimos esto con opción aquí mismo. Voy a cambiar las unidades de píxeles. A lo mejor vamos a porcentajes. Y vamos a teclear como 75%. Se puede ver que todas las, todas nuestras piezas de contenido o ser y a diferencia de re-ajustadas para caber dentro de este div. Entonces no tenemos que simplemente agarrar encabezado y luego etiquetas y luego Barton para, para hacerlos más pequeños ni más grandes, podemos simplemente manipular el look de nuestro div, solo esta pieza de contenido para hacerla,
hacerla más pequeña, más pequeño, o más grande. Y al mismo tiempo, todas estas piezas de contenido son cada vez más pequeñas o más grandes. Pero cuando vamos a como page container 1120, supongo que todavía se ve. Está bien. Pero, ¿por qué no vas a menos de 992? Supongo que quizá podríamos cambiar un poco el ancho. Entonces en lugar de, creo que fueron 75, hagamos como 80% o tal vez hasta 90, 90% por ciento debería verse mejor. Y luego vayamos a menos de 768. Sigue siendo 90%. Y para el 80, el 90% debería estar bien. Entonces cuando acabamos de salvar a este tipo, y voy a ir a mi modo incógnito otra vez es que voy a presionar el control C, control turno más P en Firefox, control más Shift plus n en Chrome. Y yo sólo voy a ingresar esa dirección. Y cuando empecemos, solo aumenta a este tipo. Entonces lo que voy a ir más pequeño, más pequeño, más pequeño, más pequeño. Se puede ver cómo este impuesto se está reajustando muy bien a nuestros puntos de ruptura hasta que vayamos hasta aquí abajo. Ahora por supuesto, si quieres cambiar el tamaño de tus encabezados dependiendo de tus puntos de descanso, pero te lo voy a dejar a ti. Ya sabes cómo puedes cómo puedes ajustarte a eso. Entonces hay un par de temas más que tenemos con estas piezas de contenido. Y esa es la voluntad, el relleno o margen entre todos nuestros elementos. Y por supuesto, necesitamos cuidar nuestro fondo. Entonces empecemos a hacer eso a continuación.
25. 4.4Añade el margen al contenido al contenido: Entonces ahora que tenemos nuestro centro div, tenemos nuestro centro de contadores, sería una buena idea agregar un poco de espaciado entre todos estos elementos. Entonces lo que voy a hacer es que voy a agarrar este texto y voy a ir a Tamaño avanzado y espaciado. Y podríamos simplemente agregar algún margen y algún margen superior y algún margen inferior. Pero también podríamos simplemente agarrar nuestro borde superior de nuestro texto y simplemente agregar algo de espaciado aquí abajo. Y como pueden ver, conseguimos estos valores. Will entra, lo pondremos aquí mismo. Y tal vez hagamos estos iguales como 20 píxeles, 20 píxeles. Pero claro que no podemos olvidar comprobar cómo va
a quedar en nuestros contenedores de páginas más pequeñas. Entonces este va a ser nuestro 1120. Y veamos, 768. Supongo que todavía se ve bien, pero tal vez hagamos 480. Supongo que tal vez podríamos agregar un poco más de relleno aquí para nuestro botón por lo que es fácilmente l, será fácilmente accesible en los dispositivos más pequeños. Entonces en tan solo unos clics aquí dentro del oxígeno, puedes realmente, realmente controlar la capacidad de respuesta de tu, de tu, de tu diseño. Entonces así es como se ve cuando es diferente al escritorio más grande. Pero cuando empezamos a bajar, se
puede ver que nuestro botón se va a mover todo el camino hacia abajo, aquí abajo. Y también hay otra forma de controlar el diseño del contenido dentro, dentro de un div. Y eso, podría funcionar bien en tus diseños. Entonces creo que vale la pena mirar. Entonces por ahora, sólo voy a agarrar este texto y voy a deshacerme de los valores de Margen. Y me voy a deshacer de este margen de 50 píxeles aquí abajo. Entonces lo que voy a hacer es que voy a agarrar el div. Y aquí mismo se puede ver esta opción que dice espacio entre lo que hace es que esto todas estas piezas de contenido estén igualmente espaciadas verticalmente. Por supuesto, no podemos ver que pase mucho en este momento porque nuestro div no ha cambiado de tamaño. Pero cuando vas a lo avanzado que un tamaño y espaciado, y déjame simplemente cambiar la altura de píxeles a porcentajes. Voy a teclear como 75%. Ahora puedes ver que nuestro grupo, pero todos estos elementos están siendo como, poco le gusta pegado a la parte superior de nuestro div y la parte inferior de un div y este texto se queda, se queda en el centro. Si fuéramos a hacerlo como 50% o incluso 40%, se
puede ver que nos dieron muy bien hasta duda. Piezas de contenido y los espacios entre estos elementos son, son iguales. Y por supuesto tendríamos que asegurarnos de que esto, este diseño sea consistente a través de todos nuestros, todos nuestros puntos de ruptura. Al igual que en este caso, quizá queramos hacer que el div sea un poco más grande, tal vez como un 40%. Y sólo tendríamos que saber, continuar, continuar esto,
este enfoque a lo largo de todos estos puntos de ruptura, 992, podría ir tal vez como 45%. Ahí vamos. Y luego 768, tal vez como 50%. O incluso un 55 o incluso 65. Entonces esta es solo otra forma de cambiar los espacios entre los elementos de tu contenido que se ponen dentro del, dentro de un elemento div. Pero creo que sólo voy a ir con los márgenes que agregué a mi texto. Y en lugar de ahora solo hacer todos los cambios, asegurándonos de que conseguimos que eliminamos todas estas opciones de todos estos puntos de ruptura. Yo sólo voy a usar el panel de historia aquí dentro del oxígeno, pero empecemos a hacer eso a continuación.
26. 4.5utilizando el panel de historia: Entonces aquí por el lado oxígeno, por fin
tenemos el panel de historia que está justo aquí. Y aquí dentro vas a ver todos tus, todos los pasos que diste para llegar a este lugar en concreto. Y si lo deseas, solo podrías hacer clic en este
botón de deshacer y rehacer para igual que volver a la historia o seguir adelante. O simplemente podrías hacer clic en cualquiera de estos estados para simplemente, ya
sabes, volver al lugar donde realmente le gustaría estar. Entonces sólo voy a volver. Veamos en algún lugar aquí, o tal vez hasta el verano aquí. Esto debería estar bien. Se puede ver que obtuvimos 40 píxeles de margen entre este elemento y este elemento. Y por supuesto, si lo cambiara, decir como 2525. Por lo que ahora mismo este cambio se está reflejando aquí en la parte inferior. Entonces este es nuestro último paso. Y por supuesto podríamos volver atrás, volver atrás, volver atrás si quisieras. Pero creo que voy a ir voy a mantenerlo como 25 por 25. Por lo que el panel de historia es un relativamente nuevo en el oxígeno y por suerte lo tenemos. Pero una vez que está aquí, creo que es una buena idea familiarizarse con ello. Y entonces puedes, siempre que cometas algunos errores de diseño o de desarrollo, solo
puedes volver a la historia. Podrás volver a la historia todo el camino a tu estado inicial. Eso sería algo así, pero no quiero volver a eso. Yo quiero ir adelante a esta parte aquí mismo. Por lo que ahora realmente podemos empezar a cambiar nuestro botón. Entonces hagámoslo a continuación.
27. 4.6. . Personalización de botones de personalización: Ahora cuidemos nuestro fondo. Entonces lo voy a seleccionar. Y lo primero que voy a hacer es simplemente hacer doble clic en él para editar el texto. Entonces déjame solo teclear a la vista nuestro portafolio. Este será nuestro llamado a la acción. Y una vez que nuestro botón está seleccionado a la izquierda, puedes ver que hay bastantes cosas que podemos cambiar. Entonces, por ejemplo, vamos a establecer nuestra URL. Simplemente voy a dar clic en Set. Y esto abrirá nuestra opción de inserción de enlace de edición. Y lo que quiero hacer es querer al usuario que haga clic en ese enlace. Quiero que el usuario vaya a nuestra página de portafolio. Entonces voy a elegir portafolio y solo voy a dar clic en agregar enlace. Por lo que ahora mismo se puede ver que ese enlace se está agregando a nuestros botones. Entonces siempre que alguien haga clic en él, ya sabes, esa persona va a ser redirigida a esa página específica. Por lo que podríamos cambiar el estilo de botón de sólido a contorno. Si quisiéramos. Por supuesto que podríamos cambiar el tamaño. Entonces déjame solo tal vez hacer a este tipo pero más grande a algo así como 18. Voy a cambiar el texto. El color del botón puede ser a este más oscuro o tal vez este marrón
más claro y color de botón flotar. Podríamos tal vez grep el mismo marrón medio, pero quizá hagamos que sea un poco más oscuro a algo como esto. Entonces cada vez que alguien se cierne más de un botón de hora, esa persona va a ver algún tipo de retroalimentación. Entonces vamos a salvar a este tipo. Y voy a agarrar mi, agarrar esta versión de incógnito de mi sitio. Y como pueden ver, cuando pasamos el cursor sobre nuestro botón y ese color de fondo está cambiando. Por supuesto, también podríamos cambiar el color del texto de simple ancho a nuestro muy, muy claro gris. Y podríamos cambiar el tamaño de la fuente que podría ser un poco demasiado grande, pero si quieres, puedes enloquecer eso. Voy a ir a algo como tal vez 1818 no debería estar bien. También podríamos quizá jugar con el peso de la fuente. Entonces, como puedes ver, es bonito, bastante sencillo. Lo que me gustaría hacer, sin embargo, es que me gustaría comprobar la capacidad de respuesta, cómo va a ir mi botón, cómo va a verse mi botón, cómo se va a comportar en unos y la ventanilla es más pequeña. Entonces ahora mismo se ve bien. 99 para encontrar aún 768. Supongo que tal vez podríamos hacerlo solo un poco más pequeño. 14 y el tamaño del texto a tal vez como 16. Y luego vamos al 418. Y supongo que esto debería estar bien. Entonces con todo, como se puede ver, proceso bastante sencillo. No olvides ingresar el enlace a tu botón. Y sabes que puedes cambiar el estilo a sólido o contorneado, y luego puedes cambiar los colores y pasar el cursor sobre el color. Todas estas opciones están dentro, dentro de un solo clic que puedes cambiar fácilmente el tamaño de tu botón. A lo mejor le haré un poco más pequeño a algo así como 16 y tamaño de texto a algo así como 17. Y esto debería estar bien. Entonces ahí vamos. Conseguimos crear nuestra sección de héroes. Pero este tipo de seccionalismo héroe, Bueno, lo es. Está bien, pero sí, es un poco, es un poco aburrido. Supongo. Podríamos siempre solo el anuncio, tal vez como un deslizador ligeramente grande, enorme que se estaría extendiendo por toda nuestra sección de héroes. Y dentro de ese slider, podríamos agregar diferentes piezas de contenido. Podríamos, por ejemplo, cambiar la imagen de fondo. Porque como recuerdo, tenemos como el Diseño Web, el branding, y las sub páginas de diseño de impresión. Por lo que podríamos incluirlos en nuestro slider. Y podríamos agregar algunas piezas de información y diferente llamada a las acciones, diferentes botones a, a esas carteras específicas o son esas páginas específicas. Pero vamos a empezar a hacer eso a continuación.
28. 4.7Añade el deslizador: Entonces antes de empezar a añadir nuestras diapositivas, tengo que añadir algunas, algunas nuevas imágenes aquí a mi mediateca. Tengo, he preparado algunas imágenes de diseño web, impresión, e Brandon. Yo sólo los voy a abrir y esperar hasta que suban. Entonces ahora tenemos estas imágenes. Por supuesto que podríamos usar nuestra, nuestra vieja imagen de héroe también. Entonces voy a ir a mis páginas y le voy a agregar la página de inicio con oxígeno. Otra vez. Ya no vamos a estar usando esta sección con estas piezas de contenido. Supongo que podríamos salvarlos. A lo mejor sólo voy a agarrar este div y lo voy a poner a un lado aquí. Yo sólo lo voy a poner dentro de esta sección, así que está justo aquí. Nos va a estar esperando una vez que empecemos a añadir nuestras diapositivas. Entonces eso es sólo una, supongo unas buenas técnicas de producción, una zanja, todo. Guardemos algunas cosas. No obstante, lo que quiero hacer es dentro Ahora mi sección de héroes, quiero deshacerme de esta imagen de fondo. Entonces lo que voy a hacer es ir al fondo de la sección. Voy a deshacerme de esta superposición de imagen, y voy a deshacerme de esta, de esta imagen de fondo. Entonces ahora lo que tenemos que hacer es realmente tenemos que añadir el slider. Entonces solo voy a presionar Agregar y voy a empezar a escribir en el slider. Ahí vamos. Y sólo voy a darle click. Como puedes ver en este momento, realidad no
tenemos mucho que hacer aquí mismo. En esta estructura el dolor. Cuando abrimos la capa de deslizador, conseguimos solo tres diapositivas que en realidad podemos, realidad se
puede hacer clic en éstas y como se puede ver, hay algo de animación en marcha. Tenemos unos bonitos puntos aquí mismo, Puntos de navegación. Y lo que voy a hacer ahora mismo es que creo que me voy a deshacer de dos diapositivas y sólo voy a trabajar con una porque después de eso, sólo
podemos duplicar nuestro primer vuelo porque básicamente
íbamos a tener el mismo, mismo tipo de contenido en nuestra, en nuestra diapositiva. Entonces solo para ver lo que está pasando aquí mismo, solo
voy a agregar una imagen de fondo a mi diapositiva. Entonces voy a ir a fondo avanzado, imagen de fondo. Y voy a agarrar, tal vez empecemos con nuestra imagen de diseño web. Entonces este es este tipo de aquí, y solo lo voy a seleccionar. Por lo que ahora tenemos nuestra imagen, añadir a nuestro deslizador. Pero hay algunas cosas que tenemos que hacer. Entonces tal vez antes de empezar realmente a jugar con nuestro slider, con la configuración de nuestro slider. Cuidemos el tobogán muy rápido. Entonces al igual que con nuestra imagen de fondo de sección, podemos establecer los puntos izquierdo y superior en un 50%, solo asegúrate de que nuestro punto focal esté exactamente en el centro. Entonces podemos agarrar nuestro div. Esto es, recuerda que este fue ese div y lo voy a
poner justo aquí en mi primera diapositiva. Por lo que se sienta muy bien en mi, en mi deslizador. Entonces esta es nuestra primera diapositiva, este tipo de aquí con nuestro div. Entonces si fuéramos ahora sólo agarrar nuestra primera diapositiva, puede ser, déjame simplemente cambiarle el nombre. Vamos a llamarlo, piensa que es, vamos a llamarlo diseñador web. Ahí vamos. Y luego si solo hacemos clic en este menú, botón Menú
contextual y solo hacemos clic en duplicar, nos dieron otra diapositiva llamada diseño web por supuesto, pero vamos a cambiarlo a, tal vez vamos a cambiarlo a branding. Ahí vamos. Y luego duplicemos esta diapositiva. Pero este tipo, vamos a renombrarlo, y llamémoslo diseño de impresión. Ahí vamos. Por supuesto, todas estas diapositivas tienen las mismas imágenes de fondo. Entonces voy a ir a branding. Y voy a cambiar la imagen de fondo a mi think was yay was branding. Entonces branding, creo que fue este tipo. Voy a seleccionar la imagen. Entonces voy a ir a mi diseño de impresión avanzado background browse. Y creo que va a ser este tipo. Y ahí vamos. Conseguimos diferentes diapositivas para diferentes fondos para nuestras diapositivas. Por supuesto, si queremos, todavía
podemos simplemente seguir adelante y elegir un color de superposición de imagen si quisiéramos. Para nuestras diapositivas, hagamos tal vez algo así como el 40% de transparencia. Podríamos hacer lo mismo por este tipo. Por supuesto, si lo hiciéramos desde el, desde el principio, desde el principio, eso sería mucho más fácil. Tendríamos a todos estos tipos ya configurados de la manera que deberían. Entonces 40, hagámoslo así. Y lo mismo para el diseño de impresión, fondo, imagen superpuesta este color. Y a los 40, voy a pegarle save. Entonces en este momento tenemos nuestras diapositivas configuradas para que estén funcionando correctamente. Si vamos a nuestra página principal y voy a refrescar esto. Nuestro slider es, bueno, técnicamente funciona. No se ve correctamente. No se ve bonito, pero va a quedar así. Se va a ver correctamente en tan solo unos segundos. Este es solo el peso que agregas, un deslizador aquí dentro del oxígeno, y así es como puedes agregar diapositivas. Y no olvides que dentro de las diapositivas puedes tener básicamente lo que quieras. Es sólo cuestión de agregar una pieza específica de contenido, un módulo específico dentro de la, una de las diapositivas, aquí mismo, dentro del módulo deslizante en el lateral, la capa deslizante. Entonces empecemos realmente cuidados del propio slider en el siguiente video.
29. 4.8Crea el deslizador completo y la altura del control: Entonces cuando hacemos clic en nuestra capa de deslizador en nuestro módulo deslizante, se
puede ver que principalmente tenemos algunas opciones de estilo y configuración aquí mismo en estas dos pestañas. Por lo que para el estilo, podemos elegir entre la animación horizontal o de desvanecer. Entonces este va a ser nuestro cambio si optamos por ir con la animación de fade. Pero creo que voy a ir con la animación horizontal. Podemos optar por aumentar o disminuir la velocidad de nuestra animación de diapositivas que se presenta en milisegundos. Normalmente pienso que eso es más rápido. Esta transición, el bateador. Y entonces podemos elegir el color de nuestros puntos. Estos tipos de aquí mismo, voy a cambiar ese color a nuestro color gris claro. Y a lo mejor voy a disminuir un poco la transparencia, algo así como el 3%. Y podríamos quitar el relleno alrededor de nuestros toboganes. Podríamos hacer que los puntos superpongan nuestro deslizador. Y si quieres, si tuvieras algunos tamaños diferentes de todas tus diapositivas, podrías estirar a la misma altura. Entonces estas son las cosas básicas que controlarán nuestro deslizador. Si vamos a la configuración, podemos elegir la opción show flechas o no. Podemos elegir mostrar puntos o no. Y podemos elegir la función de reproducción automática, que hará que el control deslizante se reproduzca automáticamente. Y puedes elegir el retraso aquí mismo, lo que básicamente significa cuánto tiempo se va a mostrar una diapositiva. Y podemos elegir establecer la opción infinita que sólo va a bucle nuestro deslizador. Solo voy a apagar click en la reproducción automática por ahora solo para que nuestros sombreros no duelan. Entonces hicimos algo de limpieza básica. Si acabamos de refrescar a este tipo, tenemos nuestros puntos aquí mismo. Bueno, nuestras flechas aquí mismo y nuestros puntos aquí abajo en el fondo. Pero aún así el deslizador no lo
está, no se está presentando como de ancho completo como nuestra sección anterior o imagen de fondo. Entonces para arreglar eso, necesitamos jugar con algunas opciones de deslizador que están disponibles en red aquí mismo. Pero están disponibles aquí mismo dentro del tamaño y el espaciado. Entonces primero que nada, lo que voy a hacer es que voy a hacer el slider, sliders altura 100 VH para que sea como span a través de todo mi sitio. Entonces sí se ocupa de algunas cosas, pero no de todas las cosas. Nuestro deslizador está chasqueado, will todavía está bien, todavía no
es altura completa y un ancho completo porque nuestra sección tiene algunas opciones de margen y espaciado por defecto asignadas a ella. Si vamos a la pestaña Avanzado, tamaño y espaciado, podemos ver que tenemos que tenemos 75 píxeles de relleno, abajo y 20 píxeles a la derecha y a la izquierda. Si solo escribo 0 aquí y luego hago clic en Aplicar todo, puedes ver que todo ese relleno se ha ido. Podemos salvar a este tipo y luego ir a nuestro Modo incógnito y refrescar la página. Y puedes ver que tenemos nuestro slider siendo presentado en ancho completo, en plena gloria y altura completa. Por supuesto, funciona bien. Podemos simplemente mover así a estos tipos. Quien sea, cuando echemos un vistazo más de cerca a nuestras imágenes de fondo, podemos ver que son como que se repitan en segundo plano. Y eso es definitivamente lo que queremos. Y podemos arreglarlo fácilmente. Si vamos a nuestra primera diapositiva, entonces avanzado que fondo. Aquí, puedes ver esta opción de tamaño de fondo. Y si optamos por cubrir opción, esto va a cubrir todo nuestro o todo un terreno. Hagamos lo mismo por nuestro branding. Tan avanzado por tierra, cubierta, diseño de
impresión, fondo avanzado, y luego cubrir. Si ahora solo guardamos nuestro slider y actualizamos nuestra página, puedes ver que no tenemos fondos repetidos. Y por supuesto, todo lo que queda es comprobar esa capacidad de respuesta. Entonces déjame tal vez hacer a este tipo un poco más grande. Se ve bien. Como puedes ver, nuestro fondo se reajusta por sí mismo hasta nuestro dispositivo más pequeño y más pequeño. Entonces ahí tienes. Es así como puedes configurar nuestro control deslizante. Y por supuesto, lo que tendríamos que hacer es que tendrías que ir al branding. Podríamos quizás cambiar este texto para ver nuestros proyectos de branding. Ahí vamos. Podríamos quizá dejarme simplemente quitar parte del texto para que se vea así. Igual para el diseño impreso de la marca, podríamos teclear y ver nuestros diseños de impresión. Y otra vez, tal vez solo deshazte de algún texto como ese. Por supuesto, podríamos cambiar el texto de nuestro portafolio. A lo mejor podríamos escribir algo así como tal vez ver proyectos. Ahí vamos. Lo mismo para este proyecto de vista inferior. Proyectos, ahí vamos. Y para nuestro último botón aquí abajo, podrías hacer lo mismo. Ver proyectos que son ego. Por supuesto, todo depende de ti. Yo solo quiero mostrarte que
básicamente puedes poner lo que quieras y cambiarlo ajustado. De todos modos te gusta. Y aquí dentro diseñador cuando estás creando un, creando tu, tu deslizador. Entonces si ahora de nuevo y volvemos a nuestro Modo incógnito, refresca a este tipo. Se puede ver que nuestro botón ha cambiado y tenemos nuestros proyectos de branding de VR, nuestros diseños de impresión. Ya sabes, todo está siendo renderizado instantáneamente dentro de nuestro, nuestro navegador. Entonces supongo que tenemos lista nuestra sección de héroes. Ahora podemos pasar a poblar en todas estas secciones o con algunos, con algún contenido interesante, interesante, vamos a aprender en tan solo un segundo cómo usar clases aquí dentro de un oxígeno. Pero primero vamos a agregar algunos, algunos iconos y algún texto solo para mostrar como nuestros servicios a los usuarios.
30. 5.1primero añade las columnas: Ahora podemos empezar a crear nuestra sección de servicios y ya tenemos a nuestro héroe. Por lo que ahora podemos iniciar una sección que se va a poner debajo de nuestra sección de héroes. Y ya tenemos una sección aquí mismo. Y creo que lo voy a dejar, pero voy a deshacerme de una de estas piezas de texto. Voy a dejar este y tal vez,
tal vez vamos a crear todo desde cero. Por lo que voy a añadir una nueva sección. Ahí vamos. Lo voy a poner aquí abajo de la sección de héroes. Y tal vez vamos a renombrar y llamémoslo servicios. Ahí vamos. Voy a guardarlo todo. Entonces lo que queremos hacer aquí mismo es que quisiéramos agregar algún tipo de encabezamiento y tal vez algún texto aquí abajo. Y entonces nos gustaría tener, ya sabes, como esas pequeñas piezas de pozo, como pequeños iconos y algunos encabezados debajo de esos íconos, algunas piezas de texto. Al igual que ves en muchos, muchos diseños porque nos gustaría un poco como, ya
sabes, enumerar los servicios que brindamos. Entonces lo que voy a hacer primero es quizá sólo
voy a pedir prestado a algunos de estos tipos aquí mismo. Entonces voy a agarrar este diff que tiene este encabezado, etiquetas y botón. Entonces sólo voy a agarrar este. Yo lo voy a duplicar. Y entonces sólo lo voy a mover en mi sección de servicios aquí abajo. Este es este tipo de aquí. Y por supuesto, tenemos que cambiar algunas cosas al respecto. Entonces antes que nada, voy a agarrar el encabezado y voy a cambiar el color, mismo para el texto. Entonces solo voy a quitar esos colores por defecto y no necesitamos un botón. Entonces me voy a deshacer de eso, deshacerme de él. Y voy a quitar este valor de ancho aquí mismo. Y tal vez podríamos cambiar el texto aquí. Escribamos en Descubre. Nuestra encuesta dice, Ahí vamos. Entonces este es nuestro rubro, este son nuestros textos. Voy a dejar esta pieza de texto sólo por ahora. Entonces lo que tenemos que hacer en este momento es que tenemos que añadir esos iconos que mencionamos. Y esta va a ser una gran ocasión para que aprendamos sobre las clases. Pero antes de pasar a eso, vamos justo debajo de este div, vamos a agregar columnas. Necesitamos tres columnas. Entonces voy a seguir adelante y hacer clic en Agregar tipo n columnas. Ahí vamos. Y una vez que haces click en las columnas, puedes ver que tienes como predefinidas unas piezas de columna justo aquí. Y lo que necesitamos es que necesitamos tres columnas y el lado B. Entonces vamos a elegir 33 por 33 por 33. Por lo que sólo voy a dar clic en él. Y ahí vamos. Se puede ver que aquí tenemos tres piezas. Y básicamente son solo tres divs son uno para realmente, podríamos querer cambiar los nombres para que podamos cambiarlo como en algo así como la columna uno. Ahí vamos. Entonces vamos a llamar a este tipo columna a su ego. Y este tipo será nuestra columna tres, solo para que puedas ver todo, puedas entender, todo. No tienes que hacerlo si sabes lo que estás haciendo aquí mismo, pero definitivamente puedes hacerlo. Entonces tenemos nuestro rumbo, tenemos algunos textos aquí abajo, tenemos nuestras columnas. Y ahora vamos a estar poniendo nuestros iconos y texto dentro de estos conteos. Pero antes de pasar a eso, tal vez sólo agreguemos algunos, tal vez como algún margen aquí mismo. Entonces voy a agarrar mis columnas. Y yo sólo voy a poner a estos tipos un poco abajo, tal vez en algún lugar de aquí. Esto debería estar bien. Ahora vamos a empezar realmente a agregar nuestro contenido dentro de nuestras columnas y aprender sobre las clases. Entonces empecemos a hacer eso en el siguiente video.
31. 5.2Crea el primer ícono: Entonces lo que quisiéramos agregar aquí sería un,
un ícono, luego algún encabezado pequeño afortunado y algunos, y algún texto. Por lo que podemos hacer esto aquí dentro del oxígeno de dos maneras diferentes. Entonces primero vamos a aprender la primera vía, y luego vamos a aprender la segunda vía sólo para que entiendas
lo que realmente está sucediendo aquí. Entonces primero solo vamos a agregar un icono que un encabezado y luego un texto. Y luego vamos a utilizar uno de
los módulos predefinidos aquí dentro de oxígeno llamado la caja de iconos. Entonces lo que quiero hacer es añadir un icono. Entonces voy a seguir adelante y elegir y, y empezar a escribir icono. Ahí vamos. Entonces voy a añadir un encabezamiento. Ahí vamos. Y luego voy a añadir algo de texto. Ahí vamos. Entonces por supuesto, vamos,
vamos a cambiar este texto para tal vez vamos primero a cambiar el efecto para que sepamos a qué va el cambio el texto. Entonces sólo voy a agarrar este ícono. Y como puedes ver a la izquierda, aquí mismo tenemos algunas configuraciones diferentes para nuestro ícono. Para que puedas elegir el contorno, Estilo
sólido o estilo bien conocido. Entonces podemos cambiar el color. A lo mejor cambiémoslo Tower amoeba, cambiémoslo a este color, aunque son un color por defecto, uno de los colores por defecto. Y por supuesto podemos cambiar el espacio o el tamaño del icono. Entonces tal vez hagamos como 442 debería estar bien. Y luego tenemos dos sets para elegir. Así Font Impresionante y lineales, iconos lineales. Entonces voy a ir con Font Awesome para este ejemplo. Y como puedes ver por defecto, viene con este icono pulgar arriba pre, pre-tipado aquí mismo. Pero si solo eliminamos el texto, se
puede ver que tenemos todos nuestros iconos aquí mismo. Entonces digamos que proporcionamos algo así como servicios de diseño web. Entonces vamos a ver si tenemos algo aquí que sería como diseño web o tal vez diseño. Vayamos quizá con este tipo, este escritorio de aquí. En realidad quizá hagamos esto como en un poco más grande. Ahí vamos. Entonces tomemos nuestro rumbo y tecleemos un Diseño Web, el Río. A lo mejor podrías cambiar la etiqueta a como Encabezado tres y tal vez aumentar un poco el tamaño de la fuente a algo como, veamos, 26 o tal vez 32. Esto debería estar bien. Y solo tomemos prestado algo de texto de abajo, de aquí abajo. El requisito va a copiarlo y luego pegarlo de nuevo. Ahí vamos. Entonces como pueden ver, conseguimos nuestro ícono, conseguimos nuestro texto rumbo de voluntad, y obtuvimos nuestra, bien simple pieza de texto. Pero claro, lo que queremos hacer es asegurarnos que todos estos tipos estén alineados al centro. Entonces con mi columna una vez donde seleccionó mi primer DEF, voy a elegir de esta alineación horizontal de artículos. Voy a elegir Centro. Y así, centramos nuestro,
nuestro icono mientras que nuestra caja de iconos, por así decirlo. Por supuesto podríamos empezar tal vez a cambiar los colores, algunos textos, todas esas cosas. Podríamos quizás agregar algún relleno o margen entre todos estos elementos. Pero aún así, aún necesitamos agregar algo de texto mientras este cuadro de iconos a nuestro centro y a la columna derecha. Entonces una vez que hacemos eso, realmente no queremos saber el cambio como cada aspecto por separado. Nos gustaría sólo, ya sabes, poder cambiar todas esas, todas esas cosas al mismo tiempo. Porque básicamente y todos estos elementos estarán bien incluso en exactamente lo mismo, pero definitivamente muy, muy, muy similares. Por lo que antes nos gusta clonar todos estos elementos y añadirlos a nuestras columnas restantes, podríamos agregar clases a nuestros elementos. Pero empecemos a hacer eso y a explicar las clases en el siguiente video.
32. 5.3 clases y id's del id's: Cuando selecciones cualquier elemento en oxígeno, verás aquí en la esquina superior izquierda que tiene un ID predeterminado agregado a él. Y ID es igual que, como una, como una identificación, como un nombre, muy, muy específico, muy original y único de un artículo. Pero también puedes agregar clases a tus artículos. Entonces hagámoslo. Por lo que sólo voy a dar click aquí mismo. Y voy a añadir una clase. Voy a llamarlo tal vez como Servicios, ícono. Y voy a dar click en agregar clase. Por lo que ahora tenemos una clase agregada a nuestro artículo y un ID agregado a nuestro artículo. Entonces, ¿cuál es la diferencia? Bueno, básicamente tanto la clase como un ID le permiten darle estilo al elemento h1. No obstante, An ID es único para cada elemento. Solo puedes tener los mismos identificadores en tu, en tu página. Y se puede agregar la misma clase varias veces a diferentes elementos. Por lo que es una buena idea tener que usar clases cuando se quiere dar estilo a múltiples elementos de la misma manera. Y en nuestro caso, ya que vamos a estar agregando sobre los mismos elementos a diferentes columnas, es buena idea tener clases añadidas a tu, a estas piezas, a este ícono, al encabezado, y al texto. Entonces si quieres cambiar algunos aspectos de nuestros elementos, podemos hacerlo con sólo cambiar la clase. Y todos esos cambios serán visibles, se
reflejarán en todas las instancias de ese elemento que tenga aplicada esa misma clase. Entonces lo que voy a hacer es agarrar el, este encabezado de diseño web. Y voy a añadir otra clase y va a ser el rubro de servicios. Y luego voy a agarrar este. Y voy a entrar a Servicios y luego texto, y voy a añadir la clase. Entonces ahora ya que, bueno, una vez que se agregan estas clases, ahora
podemos simplemente clonar todos estos elementos. Entonces voy a agarrar el ícono, lo voy a duplicar. Y ahora puedo moverlo a mi segunda columna. Ahí vamos. Se puede ver que se ha agregado a esta columna y aún tiene la misma,
la misma clase que se le aplicó, misma para el rubro. Tan duplicado. Agarra el rumbo, lo voy a mover aquí. Haz lo mismo para ese texto. Y lo voy a mover aquí abajo. Y luego voy a hacer lo mismo por la columna correcta. Entonces otra vez, duplicado. Entonces voy a ir a la columna tres. Entonces tienes el ícono, tenemos el encabezado, y yo lo voy a mover y el texto duplicado y moverlo aquí abajo. Por supuesto, todavía necesitamos agarrar nuestro div y alinear todo para centrar. Ahí vamos. Pero ahora cuando hacemos click en cualquiera de estos elementos, se
puede ver que obtuvimos la misma clase aplicada a dos nuestros elementos. Por lo que ahora puedes cambiar el icono. Por lo que tenemos diseño web puede ser ahora vamos a hacer algo como diseño de logotipos. Entonces vamos a ver si tenemos algo lindo o tal vez vamos a llamarlo marca en. Entonces solo voy a agarrar a este tipo de aquí. Y vamos a teclear y branding. Y entonces vamos a agarrar este. Y tal vez digamos que estamos ofreciendo servicios de SEO. A ver si tenemos algo de SEO abajo. Ya sabes, yo puedo, quiero decir, tal vez hagamos como edición de imágenes o algo así. Agarramos este no se trata realmente de encontrar el ícono correcto, sino de aprender y cómo agregar clases a nuestro texto. De acuerdo, entonces tenemos todos nuestros elementos agregados justo aquí. Entonces ahora realmente podemos empezar a jugar con nuestras clases y luego realmente ver la diferencia entre una etiqueta de identificación y una clase. Entonces empecemos a hacer eso en el siguiente video.
33. 5.4edición de clases y las clases y id's: De acuerdo, conseguimos las clases sumadas a todos nuestros elementos. Entonces ahora entendamos la diferencia entre la clase y una etiqueta. Como puedes ver, ahora estamos agregados en nuestra clase y
obtuvimos básicamente las mismas opciones que teníamos antes. Entonces una vez que empecemos a cambiar esto, se
puede ver que en realidad no está pasando nada. Estamos cambiando el tamaño del icono, pero el tamaño se mantiene igual. Entonces, ¿por qué está pasando eso? Si vamos a nuestro ID, puedes ver que obtenemos algunos valores aplicados a nuestro, a nuestro ícono. Y es básicamente, ya que hemos clonado todos estos elementos, ese valor es el mismo aquí y aquí. Y no podemos ver ningún cambio porque los identificadores siempre tienen prioridad sobre nuestras clases porque los identificadores son más específicos, como mencionamos antes. Por lo que siempre tendrán prioridad sobre los selectores que son menos específicos, por lo que más generales. Y en este caso, las clases son como más generales que los identificadores, quien sea, si solo cambiamos ese tamaño de icono, si tan solo te quitas eso mismo para este tipo y lo mismo para este tipo, vale. Aquí no hay nada. Y déjame, déjame solo quitar ese color. Y eliminemos todos estos elementos. Lo mismo aquí. Voy a ir al DNI, quité el color y el tamaño. Entonces ahora si solo nos aseguramos de que siempre necesitamos seleccionar esa clase primero. Y ahora si empezamos a agregar los colores, así fue este color, creo que se puede ver que todos estos, nuestros iconos están cambiando y podemos cambiar el tamaño si queremos, creo que antes eran 48. Pero claro que podríamos cambiar el color si quisiéramos. No lo sé. A lo mejor podría ir con este color si quieres. Eso depende básicamente de ti. Y podemos hacer lo mismo por nuestro diseño web, bueno, por nuestros encabezamientos. Por lo que consiguió los servicios rumbo seleccionado. Por supuesto, todos lo
sabemos, necesitamos recordar que aquí tenemos algunos valores aplicados. Entonces voy a eliminar todos estos atributos de tamaño de fuente. Vamos a ir a las identificaciones, luego seleccionar la clase. Y creo que fueron 32. Ahí vamos. Y podemos hacer tal vez algo de espaciado. Por lo tanto, vamos a añadir un margen superior e inferior. Y como diez píxeles y diez píxeles en la parte inferior. Ahí vamos. Y si quieres, puedes cambiar algo sobre el texto. Entonces primero voy a asegurarme de que no tenga nada aplicado a MyText. Parece limpio aquí. Por lo que podemos entonces simplemente agarrar nuestra clase, ir a tal vez topografía, alinear todo al centro. A lo mejor cambió el color a uno de nuestros colores predeterminados. Y si quieres, podemos cambiar nuestro,
el, el tamaño de fuente. Podríamos, incluso aquí si quisiéramos, podríamos elegir una de las configuraciones de fuentes de Google, una de las Google en los fondos de Google, y podemos elegirla aquí mismo. Pero espero que tengas la idea de lo que las clases están haciendo en realidad en este momento. Nos están ayudando a cambiar los elementos que son similares o se supone que son similares. Básicamente de una sola vez no necesitamos, como con los identificadores, cambiar todas y cada una de las instancias de nuestro contenido. Pero simplemente podemos cambiar algunos aspectos de una clase en particular. Y sí, y, y ese cambio se está aplicando a todas, todas las instancias, todas las instancias que tienen esa clase específica, una clase aplicada a la misma. Entonces así es como puedes construir estas cajas de iconos con clases. Pero en oxígeno también puedes crear esas cajas de iconos usando módulos de caja de iconos. Entonces empecemos a hacer eso a continuación.
34. 5.5el módulo de la caja de ícono: Entonces ahora agreguemos algunos servicios más aquí en la parte inferior. Entonces lo que voy a hacer es que voy a agarrar estas columnas básicamente div, y voy a duplicarlo. Y quizá vayamos aquí abajo. A lo mejor cambiemos el nombre de estos tipos. A lo mejor cambiemos a este tipo. Hagámosla una columna para entonces este tipo, y llamemos a este tipo columna cinco. Y llamemos a esta columna yendo, columna seis. Sólo para que sepamos que es más fácil para nosotros entender lo que está pasando. Entonces lo que voy a hacer es que voy a quitar todos estos elementos. No los necesitamos. Muévete, quita y quita. Entonces lo mismo para la columna,
columna cinco, quítelos. Y luego en la columna seis, quítelos. Por lo que sólo consiguió columnas
vacías, vacías justo aquí. Entonces lo que voy a hacer es añadir el módulo de caja de iconos a nuestra columna cuatro. Entonces voy a hacer clic en Agregar y empezar a escribir. Yo vengo y tenemos esta caja de iconos aquí mismo. Y como puedes ver, sabemos de un solo clic. Conseguimos que todos estos elementos se sumen a nuestra, a nuestra columna. Si lo giramos abierto, puede ver que tenemos el ícono aquí mismo. También tenemos este rubro y tenemos algo de texto. Y si solo seleccionamos nuestra caja de iconos, se
puede ver que conseguimos
algunos, algunos elementos
que podemos, que podemos cambiar con respecto a todos estos, todos estos elementos. Entonces lo que voy a hacer es primero voy a agregar una clase a todos mis, todos mis, bueno, todo
este elemento de caja de iconos. Entonces lo que voy a hacer es que lo voy a llamar como icono. A lo mejor vengo columna así. Es una buena idea usar una convención de nomenclatura que tenga sentido para ti. No necesariamente tiene sentido para mí, pero esto tiene sentido para mí. Entonces ahí vamos. Puedo calmarme. Por lo que ahora sólo podemos jugar con todos estos elementos. Entonces lo que voy a hacer es que voy a ir al diseño y al espaciado. Voy a
alinear, alinear todo para centrar. Podemos elegir dónde debe colocarse este ícono. Entonces arriba, izquierda, derecha, e inferior. Pero me gustaría recrear esto. Mira. Algunos van a ir a la cima, que es el valor predeterminado. Y dejemos este eigenspace antes como está. Y tal vez pueda espaciar arriba, creo que fueron diez píxeles. Entonces hagamos diez píxeles teniendo un espacio por debajo y,
y no tenía espacio por debajo y encabezando el espacio por encima, texto espacio. Creo que lo dejamos. No creo que hayamos hecho nada al espaciado de nuestro textil. Dejémoslo tal como está. Entonces vayamos quizá a la tipografía y a la tipografía, a la, a nuestro rubro. Creo que fueron 32. Déjame sólo ver rápidamente. Agarramos la clase sí, 32. Entonces voy a agarrar a este tipo y vamos a cambiarlo para conseguir imagen de marca. Alice do SEO. ¿ Por qué no? ¿ Cohete? A lo mejor cambiemos ese conjunto de fuentes a Font. Impresionante, Solo para que tengamos todo consistente a lo largo de nuestro recite. Y veamos si tenemos algo. A lo mejor sigamos adelante y agarramos a este tipo. Ahí vamos. Yo creo que este texto era, creo que eran 14 píxeles. Sí, eran 14 pixeles. Entonces vamos a agarrar nuestra caja de iconos. Topografía, texto, tamaño de fuente 14, y color. Este tipo de aquí. Ahí vamos. Y por supuesto necesitamos cambiar el color de nuestro icono. Entonces, déjame sólo pedir prestado este color. Supongo que tal vez podríamos agregar este color a nuestro color predeterminado. Entonces lo que podemos hacer, solo podemos hacer click en este guardar como icono de color global. Voy a hacer clic en él. Vamos a llamarlo. Llamémoslo el azul pálido, por falta de un mejor término. Y entonces podemos simplemente agarrar o icono y elegir a este tipo aquí mismo. Y ahí vamos. Tenemos nuestra, nuestra básicamente puedo caja creada. Entonces ahora lo que podemos hacer es que sólo podemos agarrar este icono de dólares. Déjame cerrar a este tipo. Podemos duplicarlo y moverlo a nuestra columna cinco. Después duplicarlo una vez más. Y podemos mover a este tipo a nuestra columna seis. Entonces ahora lo que tenemos que hacer es sólo que tenemos que cambiar los iconos y el texto. Pero nosotros también, creo que tenemos que cambiar el tamaño de este ícono. Está configurado en default, este predeterminado 55. Pero si solo agarramos, si solo agarramos nuestra caja de iconos, puedes ver que desafortunadamente, no
hay valor por defecto para nuestro ícono. No podemos controlarlo desde, desde el, desde este nivel. Tendrías que agarrar el ícono en sí y luego cambiar el tamaño. Pero supongo que quizá podríamos intentar sumar nuestra clase a, a este tipo. Entonces creo que fue Servicios. Yo actual, este es este tipo de aquí y el tamaño va a cambiar. Entonces de nuevo, ícono de Servicio, este tipo de aquí, icono de
Servicios y el ícono se agrega. Por lo que ahora cambiemos rápidamente nuestros iconos. Déjame simplemente agarrar rápidamente cualquier icono, tal vez así. Y así conseguimos diseño web Brandon imager en SEO. ¿ Qué podría ser esto? Alice acaba de llamar a esta búsqueda web. Ahí vamos. Y luego agarremos a este tipo y cambiemos algún ícono aquí mismo. Por supuesto, si lo quisieras, tú al construir, sobre todo en este caso, no
necesitas elegir un ícono de, de oxígeno. Simplemente puedes subir tu propia imagen, tu propio icono y usarlo también. Pero en este caso, en este escenario de cuadro de iconos, hay
que utilizar el, este, este icono. Por supuesto que podrías agregar una imagen también aquí mismo, pero este módulo de caja de iconos viene con un ícono como preinstalado. Vamos, pongámoslo así. Entonces de nuevo, voy a agarrar este ícono y voy a cambiarlo,
cambiarlo a tal vez como este libro y vamos a teclear en impresión. Impresión, diseño. Ahí vamos. Y básicamente tenemos listos nuestros servicios. Y por supuesto, digamos que a ella le gustaría tal vez cambiar sólo los colores de estos, de estos elementos. Pero no quieres cambiar la clase. Simplemente tendrás que agarrar un icono, asegurarte de que estás en el ID, no en la clase porque, porque si cambiaras el color de este, de
este ícono, afectarías a todos estos iconos. Entonces déjame volver a mi color anterior. Ahí vamos. Entonces si ahora solo hacemos clic en este tipo, y luego elijamos este ícono de fantasía, este ID. Y yo sólo voy a agarrar tal vez este color. Se puede ver que sólo estamos cambiando el color. Estamos cambiando el color de esta instancia en particular, no todos estos elementos que tienen clases aplicadas a ellos. Por lo que el ID siempre es más específico. Entonces si solo quieres saber preservada la clase, pero para cambiar su poquito de ella, solo
necesitas apuntar a ese ID, no a la clase en sí. Entonces no quiero hacer eso. Yo sólo voy a deshacerme de eso. Y ahí vamos. Tenemos nuestra sección de servicios se crean. Pero claro que todavía necesitamos cuidar la capacidad de respuesta. Entonces veamos cómo se verá en dispositivos más pequeños en el próximo video.
35. 5.6que los servicios respondiera: Por lo que tenemos nuestra sección creada. Ahora es el momento de hacerlo sensible. Entonces lo voy a hacer, voy a ir con este tipo aquí mismo, y voy a elegir Page container 1120 y abajo. Se ve un poco bien, pero tal vez podríamos cambiar como el ancho de este texto aquí mismo. Entonces lo que voy a hacer es que sólo voy a ir al tamaño avanzado y el espaciado. Y vamos a hacer tal vez como el 75%. Supongo que esto se verá mejor. A lo mejor vamos a seguir adelante y sumar algo de espacio y aquí mismo. Entonces veamos cómo se verá en todos los dispositivos. Se ve así. Entonces el 1120 y sopla se ve así. Ahora vamos a menos de 992. Se ve bien, pero tal vez queramos hacer tal vez este div un poco más amplio. Entonces voy a ir a Tamaño avanzado y espaciado e ir al 100%. Entonces cuando vamos a todos los dispositivos, se
parece a este contenedor de página. Si bien 1120, se ve así, menos de 992, se ve así. Y ahora estos chicos, creo que necesitamos cambiar estos elementos. Entonces si vamos al 1120, eso todavía se ve bien. 99 T2. Ahora en este punto de ruptura, podemos ver que estas, estas piezas de textos quizá no sean solo un poco demasiado anchas. Entonces lo que podríamos hacer es que podríamos, por ejemplo, hacerlos más pequeños si quieres mantener a estos tipos orientados verticalmente así. Pero también podríamos forzar esta disposición horizontal anterior. Entonces cuando seleccionamos nuestras columnas, se
puede ver que conseguimos esta opción de columnas de pila verticalmente seleccionada justo aquí. Y por defecto, se puede ver que dice menos de 992. Por lo que en este punto, nuestras columnas comienzan a apilarse verticalmente. Pero si seleccionamos, si quieres en este punto de ruptura, si quisiéramos que nuestros iconos se pusieran uno al lado del otro en este punto de ruptura, podemos ir menos de 768. Y como puedes ver, nuestras columnas comienzan a verse así. Se están poniendo uno al lado del otro. Por supuesto, también podemos ver que tenemos algunos problemas aquí mismo, como esta pieza de texto no se ha presentado correctamente. Para que pudiéramos agarrar a este tipo e ir al rumbo de nuestros servicios y luego cambiar el ajuste de topografía demasiado centrado. Pero como estamos en este punto de ruptura ahora mismo, ese cambio se va a aplicar sólo a este punto de ruptura y abajo. Y me gustaría que se aplicara a todos mis, todos mis puntos de ruptura. Entonces sólo voy a deshacerme de eso y deshacerme de eso. Y voy a ir a todos los dispositivos. Y ahora mismo me voy, voy a ir a la topografía y al centro. Entonces ahora cuando vamos a menos de 992 y ese tipo está muy bien puesto donde se supone que debe estar. Y también supongo que quizá podríamos cambiar la altura de la línea. Pero de nuevo, voy a ir a todos los dispositivos. Y para la altura de la línea, solo
tecleemos en 1.1. Y luego cuando vamos a menos de 992, se ve, se ve mucho mejor. Ahora lo que también podríamos hacer es quizá querer cambiar el tamaño de nuestros elementos de estos encabezamientos. Entonces intentemos y tamaño de fuente como 26 o 28. Supongo que esto debería estar bien. Y también podríamos quizá hacer lo mismo para esta columna aquí en la parte inferior. Entonces voy a ir a columnas aquí abajo. Y los voy a apilar verticalmente por debajo de 768. Entonces consiguió así a todos estos tipos. Ya que agregamos a estos tipos como módulos de cajas de iconos
simples, simples no los
creamos desde cero, como estos chicos de aquí, se ven un poco diferentes. Entonces si quieres, solo
puedes agarrar estas columnas aquí mismo. Y yo sólo voy a, tal vez voy a cerrar todos estos elementos y lo voy a duplicar. Y ahora simplemente podemos cambiar y estos iconos. Entonces esto es esto, creo que fue un icono de señal. Ahí vamos y podemos llamarlo como CEO. Después nos dieron la búsqueda en la web. Bueno, tecleemos en una búsqueda. Después vamos y voy a escribir en una búsqueda web. Y luego nos dieron diseño impreso. Creo que va a ser un libro o algo así. Y va a ser diseño de impresión. Y entonces podemos deshacernos de estas columnas aquí abajo. Por supuesto, todo es opcional, todo depende de ti. Yo sólo quería mantenerlo simple y no lo haría, sabes, porque esto es más rápido así. Pero por supuesto, es una buena idea probar en todas estas soluciones tú mismo. Te gustaría usar la caja de iconos. Adelante. Si quieres ir, quieres saber, solo crea estas cajas de iconos desde cero tú mismo. Ya sabes, eso es sólo siempre una buena, una buena cosa para aprender. Entonces conseguimos que nuestros elementos se vean así o ahora
veamos cómo se verán cuando estén en un dispositivo más pequeño. Supongo que se ve bien. Y en un dispositivo
mucho, mucho más pequeño, sigue siendo, todavía se ve bien. Entonces voy a ir a todos los dispositivos. Y entonces tal vez podamos ver nuestro,
nuestro diseño en modo incógnito como de costumbre. Por lo que Firefox control más Shift más P, control de
Chrome más Shift plus n otros navegadores, no estoy seguro. Entonces conseguimos nuestro diseño así. Yo sólo lo voy a hacer más pequeño, tal vez pero más pequeño que esto. Entonces ahora sólo voy a bajar. Tenemos nuestros servicios aquí mismo. Y cuando vamos empezamos a ir más pequeños y más pequeños y más pequeños hasta cierto punto, vas a ver que somos, que nuestro diseño es plenamente, totalmente receptivo. Por lo que conseguimos que crearan nuestros servicios. Ahora podemos pasar a añadir en una galería, una galería de tus imágenes, imágenes de tu elección y, o las imágenes que tu cliente S2. Entonces pasemos a eso.
36. 6.1Crea la sección de la galería: Por lo que estoy aquí en el sitio pixels.com. Ese es mi sitio de referencia para obtener imágenes gratuitas, libres de regalías. Y lo que quiero hacer es solo agarrar tal vez como, no
sé, de ocho a diez fotos. Entonces lo que podemos hacer aquí mismo es buscar tal vez el diseño. Y tenemos algunas imágenes aquí mismo. Así que déjame tal vez agarrar a este tipo de aquí. Y aquí en la esquina superior, no
quiero elegir como el original enorme, enorme archivo de tamaño. Supongo que podríamos ir con el tamaño grande. Y entonces podemos, qué podemos hacer, solo
podemos dar click en descarga gratuita y simplemente guardar la imagen, y luego estamos bien para ir. Entonces lo que voy a hacer ahora es que voy a agarrar como ocho a diez fotos y las voy a guardar en mi computadora. Por lo que tengo mis imágenes listas. Les di algunos nombres genéricos sólo para así así que sepamos lo que se supone que deben presentar estas imágenes. Y es una buena idea dar tus imágenes como nombres significativos o al menos nombres que tengan sentido para ti. Y también estos nombres lo harán, serán por defecto uso como nuestros textos de superposición y cuando añadamos a la galería. Entonces pasemos a nuestra galería. De hecho pasemos a nuestra página y empecemos a añadir nuestra galería. Entonces supongo que me voy a deshacer de este texto. No lo necesito. Y tal vez esta vez voy a cambiar el color de fondo de mi sección. Hagamos que destaque un poco. Por lo que tengo mi sección seleccionada. Déjame simplemente tal vez cerrar estas capas e ir al fondo avanzado por color de tierra. Y vamos a elegir este color oscuro aquí mismo. Eso otra vez, podríamos quizás agregar algo de texto aquí en la parte superior. Entonces voy a agarrar esto, tal vez todo este div, y voy a duplicarlo y moverlo al fondo a esta página. Lo que por supuesto necesitamos cambiar el color, por lo que este color más claro y este color más claro. Y cambiemos esto. Nuestro portafolio, llamémoslo, llamémoslo así. Y tal vez sólo voy a quitar este trozo de texto sólo para, sólo para que se vea un poco diferente. Entonces conseguimos nuestro, tal vez cambiemos el nombre de nuestra sección a portafolio. Mantengamos todo bien organizado. Portafolio. Entonces conseguimos nuestro, nuestro rumbo, algún texto aquí abajo. Ahora es el momento de añadir realmente la galería. Entonces lo que voy a hacer es seleccionar mi sección, dar clic, agregar, y luego escribir GAO GA. Y ya nos dieron nuestra, nuestra galería. Entonces lo que tenemos que hacer en este momento es que tenemos que agregarle algunas imágenes. Entonces lo que voy a hacer es dar click en este tipo de aquí mismo,
Media Library, y luego dar clic en Examinar. Y como pueden ver, aquí no tenemos demasiadas imágenes. Entonces sólo voy a agarrar mis imágenes. Voy a seleccionarlos todos y simplemente moverlos aquí mismo y esperar a que suban. Y una vez que todos estos chicos se suban y todos se seleccionan, esta es una galería estándar o de prensa. Por cierto, se puede ver que cada uno de ellos tiene este atributo de título aquí mismo, que ha sido recogido del nombre del archivo. Entonces lo que voy a hacer es solo dar clic en crear galería y luego insertar galería. Y podemos ver todas nuestras imágenes siendo presentadas aquí mismo. Entonces si ahora solo lo guardamos y vamos a nuestra página, déjame refrescar la página y bajar aquí. Se puede ver que tenemos nuestra galería. Y si hacemos clic en alguna de las algunas miniaturas, se
puede ver que tenemos un efecto realmente bonito, limpio, de aspecto
limpio y de caja de luz aquí mismo. Ahí vamos. Pero por supuesto podríamos cambiar algunos aspectos de nuestra galería. Entonces primero tal vez, vamos a añadir algo de espacio aquí en la parte inferior. O tal vez vamos a agarrar a este tipo, así. Y si hacemos click en nuestra galería, por supuesto, tenemos algunas, algunas opciones para elegir. Estos identificadores de imagen simplemente están siendo sacados de nuestra biblioteca de WordPress. Por lo que si quieres cambiar el posicionamiento de estas imágenes, podrías jugar con las ID aquí mismo. Para que pudiéramos, simplemente no se podía cambiar. Digamos que este tipo va a tener 61 y este tipo va a tener 60. Y entonces la posición cambiará de estas imágenes. Y si no ves alguna opción sido tapa aquí
mismo que dice que están siendo no encendidos por defecto. Por lo que por defecto obtuvimos la opción de enlace Imágenes configurada y agregar caja de luz. Por lo que en realidad podemos ver que el zoom en versión de las imágenes. También podríamos cambiar la resolución de miniaturas. Eso va a cambiar a todos estos tipos, todas estas miniaturas aquí mismo, claro, dependiendo del tamaño de tus imágenes. Pero también podríamos ir a la opción de diseño. Y se puede ver que tenemos algunas opciones aquí mismo. Tenemos el flex, que es ese default que va a tratar de hacer que todo sea igual. Pero podríamos elegir también la opción de albañilería. Y como puedes ver, empieza a lucir de manera diferente. Y podemos elegir cuántos artículos por fila nos gustaría. Entonces no pudimos ir con como diez. Entonces vamos a tener una galería con este aspecto. Pero voy a ir con dos tal vez. Y se puede ver que empieza a verse más bonito. He añadido 1010 imágenes. Entonces si llegamos a dos filas, conseguimos cinco imágenes en una columna en este, en este caso. Y si vas al flex con dos imágenes por fila, puedes ver que un poco como, ya sabes, trata de hacer que todo sea agradable y agradable. Y hasta yo creo que voy a ir con la mampostería por esto por ahora. Y quizá dejemos, déjame simplemente cambiar las imágenes por fila para que se vea así. Supongo que quizá podríamos agregar otra imagen aquí mismo para que se vea, que se vea genial. Pero no es, es sólo para entender lo que está pasando. Podríamos cambiar el espacio alrededor del valor de la imagen. Entonces, por ejemplo, podríamos agregar como 50 píxeles que se va
a extender todas estas imágenes más lejos una de la otra. Pero supongo que 1010 píxeles es definitivo. Ahora, la siguiente opción aquí mismo son los subtítulos, que básicamente serán como un título de nuestra imagen que puedes superponer, que puedes poner sobre tus imágenes. Pero creo que esto es algo que podríamos empezar a hacer en el siguiente video. Por ahora, vamos a mantenerlo simple. Entonces en este video, solo quería mostrarte cómo puedes agregar una galería y ¿cuáles son las mejores prácticas de usar de agregar una galería simple? Ahora en el siguiente video, comenzaremos a juguetear un poco más con nuestra galería.
37. 6.2Añadir los subtítulos: La siguiente opción en nuestro módulo de galería es la opción de subtítulos. Pero claro que podríamos mostrar los subtítulos si quisieras. Y va a estar encendido por defecto. No obstante, aquí no hay subtítulos visibles. Y eso es porque no agregamos ninguno, no agregamos los subtítulos a nuestras imágenes. Entonces veamos cómo podemos hacer eso. En primer lugar, voy a ir a, voy a volver a mi panel de administración. Voy a ir a medios y dar click en cualquier MA e imagen. Y como pueden ver aquí a la derecha, tenemos este título y campo justo aquí. Entonces lo que voy a hacer es que sólo voy a agarrar este título. Voy a copiar, pegar y luego ir a otra imagen. Y voy a hacerlo, lo voy a hacer por todas estas,
todas estas imágenes que se ponen dentro de nuestra galería. Ok, entonces todas mis imágenes consiguieron los subtítulos. Entonces ahora realmente podemos volver a nuestra, bueno, podemos volver a editar en la galería dentro del oxígeno. Entonces estoy de vuelta en oxígeno. Y ahora mismo, si solo hacemos clic en mostrar subtítulos, puede ver que cuando estamos rondando sobre nuestras imágenes, realidad
podemos ver nuestros subtítulos aquí mismo en la parte inferior. Y este es el comportamiento estándar porque así nosotros por defecto, llegamos al show subtítulos solo al hover se establece en sí. Si lo configuramos para saber, los subtítulos serán siempre visibles. Además, si quieres, quizá
puedas esconder los subtítulos,
en cierto punto de ruptura. Entonces, por ejemplo, si quieres ir a, ¿qué? Si quieres cambiar esta opción, Ocultar subtítulos a continuación, digamos menos de 992. Y luego si vas a ese punto de ruptura real, puedes ver que los subtítulos, que los subtítulos se han ido. Voy a volver y creo que voy
a Digamos que nunca quise nunca esconder los subtítulos, pero sí sólo quiero mostrarlos en hover. Entonces voy a dar click en sí. Entonces cada vez que pase el cursor sobre una imagen, esa leyenda va a ser visible. Además, si lo deseas, puedes cambiar el color del título para saber como puedes cambiar el color del texto y puedes cambiar el color del fondo. Entonces cuando pasas por alto, puedes ver que esos,
esos cambios se toman, se toman efecto, tal vez cambiemos la transparencia de este tipo solo un poquito para que se vea, tal vez eso es un poco, eso es un poco bajo a algo así como 56. Esto debería estar bien. Entonces lo último que podemos cambiar aquí es cuando vamos de cabeza a la opción de hover, podemos elegir el,
la opacidad de la imagen, puedes cambiarla. Entonces digamos que la opacidad de la imagen, como la opacidad de la imagen estándar va a ser un poco menor, digamos tal vez no 05, sino como 09. Y entonces la opacidad de la imagen hover va a ser una. Entonces ahora cada vez que hacemos clic en uno, se
puede ver que es un tal vez déjame simplemente cambiar esa imagen de pasaje, algo aún más bajo. Y se puede ver que conseguimos este bonito efecto hover. Puedo cambiar esta duración de transición a algo así como realmente largo. Y se puede ver que se tarda 1 segundo en pasar de ese 06, 0.06 opacidad de imagen a uno a 100, opacidad así. Pero lo voy a cambiar a 0, tal vez 0 a, y voy a cambiar a este tipo de 06285. Y luego conseguimos este bonito efecto, muy bien parecido. Por supuesto, siempre podemos encadenar y siempre podemos comprobarlo, comprobarlo en nuestro modo incógnito. Entonces cuando pasamos el rato sobre este tipo, se
puede ver que tenemos nuestra leyenda cambiando. Llegamos, llegamos a esta transición de opacidad también pasando. Entonces lo que podríamos hacer también es que podríamos cambiar el número o incluso todo el look de nuestra galería cuando golpeamos un punto de ruptura diferente. Por lo que en realidad podemos cambiar también la capacidad de respuesta de nuestra galería. Porque cuando vamos a nuestro modo de incógnito, se
puede ver que nuestra galería va a cambiar por defecto, así. Por lo que las imágenes sí se vuelven receptivas. Pero todo esto, supongo que todo este diseño, si bien no, no se ve demasiado bien, ¿verdad? Entonces cuidemos la capacidad de respuesta en el siguiente video.
38. 6.3 galería responsiva. responsiva.: Por lo que como mencioné en el video anterior, podemos hacer que nuestra galería sea muy receptiva. Entonces, ¿qué quiero decir con eso? Entonces digamos que en este punto de ruptura, no
hago estas imágenes para ponerlas en tres columnas. Yo quiero que se pongan, digamos en dos columnas voy a cambiar imágenes enterradas también. Dos así. Entonces vamos a la página contenedor 1120. Supongo que todavía se ve. Está bien. Vayamos a menos de 992. Entonces digamos que tal vez este punto de ruptura, el punto de ruptura 992, solo
quiero ver una imagen por cuerda. Pero como pueden ver, tenemos un pequeño problema aquí. Estas miniaturas o no han estado ahí, no siendo repartidas por toda la ventanal justo aquí. Y eso es porque ponemos nuestras miniaturas demasiado grandes. Pero cuando vayamos a, vamos a todos los dispositivos. Voy a agarrar la galería y vamos a la resolución térmica. Voy a ir a lleno. Ok, entonces nos encargamos de nuestras miniaturas. Ahora, ¿qué pasa con la capacidad de respuesta en sí? Conseguimos las imágenes por fila fijadas en dos. Pero ¿y si te gustaría tener tal vez como una sola fila? Cuando vamos a decir menos de 992. Al igual que estas imágenes empiezan a parecer demasiado pequeñas para mis días, me gustaría que se extendieran por todo el mirador. Entonces lo que voy a hacer es que sólo voy a establecer el ancho mínimo de la imagen para decir como 450. Por lo que ahora el navegador asumirá que desea que su imagen se establezca en al menos 450 píxeles de ancho. Pero una vez que empezamos a cambiar en nuestros puntos de descanso, se
puede ver que todavía se ve bien. Y luego vamos a menos de 992. Se puede ver que ya que queremos que nuestra imagen lo dijera, dijo al navegador que queremos que nuestra imagen sea por lo menos para un ancho de 150 píxeles. Ahora está haciendo caso omiso de esta imagen por número de fila. Ahora es, ya sabes, la imagen se extiende por toda la ventanal y eso es lo mismo que se va a aplicar en nuestros dispositivos más pequeños así. Entonces si ahora vamos a nuestro navegador, déjame solo dar un toque de refresco. Y luego cuando empezamos a ir más pequeños y más pequeños y más pequeños, se
puede ver que una vez que llegamos al punto de ruptura correcto, que
ese diseño y ese diseño está cambiando, el diseño de nuestra, de nuestra galería está cambiando, pero de supuesto, todo funciona como se supone que funcione. Tenemos nuestro efecto de caja de luz, y ahí vamos. La galería está funcionando correctamente. Por supuesto, hay otras formas de agregar galerías a tu diseño y echaremos un
vistazo a agregar una una una vez que empecemos a usar un plug-in
diferente simplemente para nuestras carteras. Pero eso va a ser en uno de los próximos videos. Por ahora, dejemos nuestra, nuestra sección tal como está. Ahora podemos pasar a añadir otra sección, que sería algo más como una sección sobre mí o sobre nosotros. Y esa sección va a ser al mismo tiempo, ancho
completo, pero dividida en dos partes iguales. Entonces empecemos a hacer eso a continuación.
39. 7.1Crea una sección de ancho completo: De acuerdo, tenemos nuestra sección de portafolio. Entonces tal vez ahora hagamos algo así como una, no como una sección sobre nosotros, pero no sólo lo simple, como una imagen y algún texto, algo así. Hagamos una sección de ancho completo que se dividirá en dos partes iguales. Y por un lado, vamos a tener un video de ancho completo. No, solo para involucrar un poco más a nuestros usuarios. Y del lado derecho vamos a añadir algo de texto. Entonces, empecemos con agregar una nueva sección. Entonces voy a golpear Agregar y luego solo teclear una sección. Y tenemos una resección creada aquí abajo. Pero como puedes ver, es algo, lo ha sido, no
se está extendiendo por toda nuestra página, toda nuestra página. Queremos hacer esta sección de ancho completo. Entonces con mi sección seleccionada, voy a ir a Tamaño avanzado y espaciado. Y aquí abajo puedes ver esta sección contenedor con opción. Entonces si lo
abrimos, podemos elegir h con ancho completo o una costumbre si queremos entrar
algunos, algún valor aquí mismo, pero quiero hacer ancho completo y se extenderá esta sección así. Entonces ahora si agrego columnas y voy a sumar 50 por 50 columnas, puede ver que estas columnas también se están extendiendo por nuestra, toda nuestra página, pero al mismo tiempo que no están tocando los bordes de nuestra sección. Y eso es porque nuestra sección que nosotros, por cierto, supongo que podríamos renombrarla. Entonces llamémoslo sobre nosotros. Entonces Sobre Nosotros. Ahí vamos, porque nuestra sección tiene algún relleno aplicado a ella. Se puede ver que cuando pasamos por encima de esta sección, este como un halo morado, aparece
este como un halo morado,de color
morado, morado. Entonces si nos deshacemos de él, se puede ver que ahora mismo nuestra sanción es en realidad ser aceite de frijol. Está tocando todos los bordes. Y si vamos al tamaño y el espaciado, se
puede ver que tenemos 0 en la parte superior y en la inferior. Y sumemos 0 a la izquierda y 0 a la derecha. Y si ahora solo agarras nuestras columnas, entonces esta es nuestra columna izquierda y esta es nuestra columna derecha. Se puede hacer lo mismo para tal vez primero vamos a hacer, hagamos lo mismo para el izquierdo. Y ese va a ser nuestro, nuestro video. Entonces solo voy a renombrar a este tipo, y voy a llamar a este video y a este div a la derecha. Voy a llamarlo sólo texto plano. Ahí vamos. Entonces ahora vamos a sumar realmente el video de la izquierda. Y también estamos, bueno, también
nos gustaría hacerlo completo, de ancho completo. Entonces empecemos a hacer eso en el siguiente video.
40. 7.2Añadir el video: Para agregar un video, todo lo que tienes que hacer es, por
supuesto, primero seleccionaré mi div, video div. Voy a seguir adelante y dar clic en agregar. Y luego solo empieza, empieza a escribir en video y solo tienes que hacer clic en él. Y el oxígeno viene con un video como un maniquí, maniquí, hacer mi logo más grande crema. Pero lo que es más importante es que todavía podemos ver algún relleno alrededor de nuestro, alrededor de nuestro video. Entonces si agarro mi div, mi video div, voy a ir a tamaño avanzado y espaciado. Y a pesar de que aquí podemos ver 0, puede ver que cuando empezamos a agregar ceros reales, eso, bueno, ese valor se está volviendo a aplicar a nuestro div. Y ahora nuestro video se está poniendo como debería. Por supuesto, no necesitamos saberlo. Bueno, no sería buena idea, ya sabes, entrar, insertar tu propio video. Entonces si vamos a nuestra pestaña primaria, déjame solo agarrar este video aquí mismo, esta capa de video. Se puede ver que tenemos esta URL de YouTube o Vimeo aquí mismo. Entonces si solo agarras tu video de YouTube, solo
puedes insertar tu enlace aquí mismo y ese video aparecerá aquí en nuestro div. Entonces justo como ejemplo, copié uno de mis videos, uno de mis URL de video de mi canal de YouTube. Y yo sólo voy a pegar eso. Y como pueden ver, se está poniendo muy bien aquí en nuestro, en nuestro def. Y por supuesto, si quieres, podrías cambiar como esta relación de aspecto de video si quieres hacer eso. Pero voy a ir con el estándar estándar 16 por 16 por nueve de pantalla ancha. Y por supuesto, si quieres incrustar como un iframe para de alguna fuente diferente, podrías hacerlo aquí mismo. Podrías simplemente pegar tu código aquí abajo. Entonces así es como se puede, cómo se puede agregar el video. Por supuesto, es, normalmente es jugable. Ahí vamos. Y ahora supongo que lo que podríamos hacer es quizá podríamos agregar algún texto aquí a la derecha solo para tal vez como decirle a nuestros, nuestros usuarios unas palabras sobre nosotros. Entonces empecemos a hacer eso en el siguiente video.
41. 7.3la adición del texto y arregla la capacidad de respuesta: De acuerdo, entonces vamos a añadir algo de texto a nuestro div de texto. Entonces lo que voy a hacer es que sólo voy a añadir un encabezamiento. Ahí vamos. Y entonces sólo voy a añadir un texto como ese. Por supuesto tal vez sólo voy a pedir prestado algo de este lorem ipsum. Ahí vamos. Voy a bajar aquí y sólo pegar eso. A lo mejor como un par de veces, tal vez incluso más omega. Solo copiemos todo este párrafo, todo este párrafo y lo peguemos en negro dos veces. Esto debería estar bien. Entonces lo que me gustaría hacer en este momento es que me gustaría poner este encabezamiento y este texto como en el punto central de mi, de mi div. Pero antes que nada, primero quizá tipeemos como sobre nosotros. Esto debería estar bien. Y voy a cambiar el color de este texto. Entonces nuestro color predeterminado, mismo para este tipo. Por supuesto, podríamos cambiar algunos aspectos de los textos aquí mismo. A lo mejor podríamos agregar algún relleno o margen entre el Hadean y el texto. Pero lo más importante que me gustaría hacer aquí es poner todos estos elementos en el centro, verticalmente en el centro. Y supongo que me gustaría hacer este texto un poco más corto pero más estrecho. Entonces lo que seleccionó este texto div, solo
voy a ir al centro de alineación vertical de elementos para poner mi texto en el centro. Y en lo que respecta a este texto, este tipo de aquí, lo que voy a hacer es que sólo voy a ir al tamaño avanzado y el espaciado. Y quiero cambiar el ancho a tal vez como 75%. Esto debe estar a la derecha. Sólo había unas cuantas cosas más que podríamos cambiar sobre la forma en que se comporta todo este apartado. No sólo en cuanto a la capacidad de respuesta, sino también en cuanto a su, su se ve así. Entonces, ¿qué quiero decir con eso? Nuestras columnas están configuradas para tener un 50% de ancho. Por lo que se dice que este video de la izquierda es del 50% y esta columna de texto se establece en 50%. Pero claro que todavía podemos cambiar eso. Por ejemplo, si quisiéramos tener este video más grande, quizá
podríamos hacer algo así como el 67. Y nuestro texto div va a ser recalculado. Su ancho se va a volver a calcular para que se vea algo así. Y por supuesto, si queremos que el texto sea más grande, podemos hacer como tal vez 60. Y este tipo va a ser reducido a 40%. Y eso es algo que ella podría hacer. Te lo voy a dejar a ti si quieres hacerlo así, podrías hacerlo. Podrías, por supuesto, tal vez conseguir este div de texto, y tal vez podríamos simplemente ir al tamaño y el espaciado. Y tal vez nos gustaría aumentar el relleno cada vez tan ligeramente, tal vez incluso más que eso. Para hacer algo así, ya sabes, tienes total, total flexibilidad,
total libertad en cuanto a ajustar la forma en que se ven todos estos elementos. Entonces si quieres agregar un poco más de relleno, puedes hacerlo con algún margen más. Se puede hacer eso, cambiar el texto, cambiar los espacios entre estos elementos. A lo mejor así. Puedes hacerlo muy, muy fácilmente. Cuando empecemos a mirar, empieza a mirar esta sección en particular, nuestra sección de ancho completo. Cuando empezamos a comprobar la capacidad de respuesta, se
puede ver que no se ve tan genial. O sea, podríamos tal vez si quisieras quitar algún texto aquí mismo para que se vea más o menos así, pero todavía no se ve. Está bien. Lo que creo que lo que me gustaría hacer aquí mismo es que me gustaría apilar a estos tipos verticalmente. Entonces voy a agarrar mis columnas aquí mismo. Y como puedes ver, tenemos la opción de columnas de pila verticalmente, y en este momento está configurada en menos de 992. Entonces cuando vamos a menos de 992, se
puede ver que estas columnas se están apilando verticalmente y todo se ve bien. Pero creo que este efecto en particular es como lleno con enorme, un enorme efecto de sección es bueno en como realmente, realmente grandes escritorios, escritorios. Entonces supongo que me gustaría hacer verticales a estos chicos, empezando por el punto de ruptura 1120. Por lo que mi columna seleccionada, voy a cambiar esta opción de stat coms verticalmente menos de 992 al contenedor de página 1120 y abajo. Y si ahora vas a ese punto de ruptura, puedes ver que nuestro texto está cambiando. Y dentro de este punto de ruptura, supongo que podríamos tal vez cambiar el ancho de nuestras columnas de texto para que podamos ir a Tamaño avanzado y espaciado y simplemente configurarlo al 100% para hacerlo solo un poco, solo un poco más grande si quieres. Como pueden ver, tenemos estas imágenes justo aquí y tenemos éstas, este video aquí mismo. Pero, ¿y si quisiéramos cambiar el orden de estas columnas? Entonces de nuevo, voy a agarrar las columnas. Y se puede ver que tenemos esta opción de orden de columna inversa justo aquí, y por defecto, está configurada para nunca. Pero si elegimos Page container 1120 y abajo, eso va a cambiar. Por lo que vamos a tener a estos tipos les han puesto el lado B como los escritorios más grandes. Pero cuando vamos a la página contenedor 1120 y abajo, obtuvimos nuestro texto. Eso está separando muy bien nuestro portafolio y nuestro video aquí mismo. Entonces así es como puedes crear secciones de ancho completo y cómo puedes dividir esas secciones aquí dentro del oxígeno. Creo que a este momento quizá quisiéramos pasar a algo así como conocer nuestros servicios en cuanto a la fijación de precios. Por lo que podríamos hacer algo como cuadro de precios debajo de nuestra, debajo de nuestra sección de ancho completo.
42. 8.1Añadir la primera caja de precios: Entonces, si estás creando tu sitio para ti mismo para anunciar tu negocio, o si estás creando un sitio para un cliente, es posible que quieras incluir como una sección de precios. Entonces hagámoslo ahora mismo. Voy a empezar como de costumbre añadiendo una sección. Curso. No es absolutamente necesario, pero es una buena técnica de producción. Simplemente No, mantiene las cosas bien organizadas. Y voy a renombrar mi sección y voy a llamarla ascendente. Ahí vamos. Y voy a añadir seleccionar un encabezado y algo de texto. Y tal vez sólo voy a pedir prestado algo de este texto y luego simplemente pegarlo aquí abajo. Y creo que quiero cambiar la topografía text-align center, mismo para mis encabezados o centro de topografía avanzada. Y voy a agarrar esta sección de precios y quiero alinear todo al centro. Entonces ahora que llegamos a nuestro encabezado creado, tal vez déjame simplemente escribir algo como checkout. Nuestros precios son precios. Ahí vamos. Por lo que ahora quizá podamos agregar como algunas columnas. Voy a agregar columnas, y voy a agregar tres divs dentro de esas columnas. Entonces te dieron 123. Y estas columnas van a estar hospedando nuestras cajas de precios. Entonces tal vez agreguemos algún margen entre estos elementos. Voy a agarrar mis columnas, tamaño
avanzado y espaciado, y luego ser como 5050 píxeles. Eso debería estar bien. Entonces lo que quiero hacer es simplemente que me gustaría añadir. Entonces mi primer cuadro de precios aquí dentro de mi primero, el primer div. Entonces lo que voy a hacer es ir a Agregar y luego escribir en bandeja de entrada de precios. Y yo sólo voy a dar click en él. Y como puedes ver, viene con algunos preinstalados, supongo que se podría decir que preinstaló el texto. Y cuando miras a la izquierda, tienes todos los elementos que controlan todos y cada uno de los aspectos de nuestra caja de precios. Pero si total abrimos nuestro, este pozo, este primer div, esta primera columna, y luego la capa de bandeja de entrada de precio. Se puede ver que tenemos la imagen y la parte inferior que son un poco independientes de la caja de precios porque vienen en capas separadas y puedes controlarlas por separado. Pero llegaremos a eso en tan solo un segundo. Entonces digamos que nos gustaría ofrecer nuestros servicios de diseño web. Entonces lo que voy a hacer es cambiar este texto por diseño web web. Ahí vamos. Y supongo que podemos irnos para pequeñas empresas. Y si quieres cambiar los precios aquí mismo, puedes hacerlo. Solo puedes teclear tu precio aquí mismo. Pero cuando vamos a nuestro panel de caja de precios, este panel de herramientas, se
puede ver que podemos controlar así,
este precio aquí mismo. Podemos agregar, en realidad haga clic dentro. Podemos, tenemos que cambiarlo aquí. Entonces digamos que queremos empezar desde, no lo sé, como 859. ¿Por qué no? Y podemos dejar el decimal como es IQ si quieres, puedes, puedes cambiar el símbolo de moneda y podemos cambiar el término. Entonces voy a, bueno, te puede gustar deshacerte de él por completo. Pero tecleemos como algo PR un sitio web. Y tal vez cambiemos esto normalmente tres por algo así como uno, como mil. A lo mejor. Eso va a mirar, eso va a quedar un poco mejor. Y por supuesto, aquí abajo tenemos nuestras características que podemos escribir en algo aquí como diseño profesional. Entonces tal vez algo así como logotipo incluido si quieres hacer eso. Y tecleemos en hosting gratuito por un año. Ahí vamos. Por lo que conseguimos nuestra caja de precios creada así. Pero claro que definitivamente querríamos cambiar algunos aspectos al respecto. Por ejemplo, tal vez podríamos cambiar esto como el tamaño de nuestro, de nuestro rumbo, tal vez de este tipo de aquí. Entonces supongo que sería una buena idea agregar tal vez como una caja de precios de torre de clase. Simplemente, ya sabes, solo para asegurarnos de que cuando cambiemos algunos, algunos aspectos de la bandeja de entrada de un solo precio, ese cambio se va a reflejar en todas las instancias de nuestros precios. Por supuesto, si eso es lo que quieres hacer, y supongamos que quieres hacer eso. Entonces empecemos a hacer eso en el siguiente video.
43. 8.2Añadir la clase: Entonces con mi caja de precios seleccionada, voy a subir aquí y voy a escribir el nombre de nuestra clase. Y va a haber subiendo. Vamos a mantenerlo así. Vamos a mantenerlo, mantenerlo simple. Entonces voy a sumar la clase. Por lo que ahora tenemos nuestra caja de precios seleccionada. Nos agregaron nuestra clase de precios justo aquí. Entonces tal vez vamos a duplicar ahora nuestra caja de precios. Y llevemos a este tipo aquí abajo a mi segundo div. Y vamos a duplicar de nuevo a este tipo. Y voy a mover a este tipo a esta tercera columna. Entonces digamos que queremos hacer como branding para pequeñas empresas. Y hagamos como tal vez SEO para pequeñas empresas. Y por supuesto que podemos cambiar los precios aquí mismo para que podamos hacer, en lugar de 859, hagamos algo diferente. Hagamos como, no sé, al 99. Y vamos a escribir por proyecto. Ahí vamos. Digamos que, sí, sí queremos tener un diseño profesional, pero tal vez cambiemos el profesor deje que se incluya el logotipo también. Tarjeta de visita gratuita, tal vez algo así. Tarjeta de presentación para la tarjeta de visita. Y tal vez en lugar de hospedaje gratuito por un año, hagamos unas diez como dos revisiones incluidas. Ahí vamos. Y para el SEO, tal vez cambiemos esto normalmente. A lo mejor hagamos como 599. ¿ Por qué no? Y para la SCO, hagámoslo normalmente prepensemos no cambiemos este precio a, no lo sé, como 459. Y hagámoslo por sitio web. Y tal vez cambiemos a estos tipos para que me gusten primera página. Garantizado. A lo mejor como Google y Bing. Y para la tercera, qué podríamos agregar aquí para el SEO, ayúdame aquí. Hagamos consultas gratuitas. Eso va a ser un poco genérico, pero oye, vamos a mantenerlo así. lo es, no es el propósito principal de este video, así que está bien. Tenemos todo nuestro de nuestros, todos nuestros precios incluidos aquí mismo. Entonces vamos a nuestra caja de precios. Asegurémonos de que nuestra clase de precios esté realmente seleccionada. Voy a ir al título y dos tipografías tituladas topografía. Y si quieres, puedes cambiar la familia de fuentes aquí mismo. Podríamos ir, podríamos ir con nuestro principal y fuente aquí mismo. Y por supuesto podríamos tal vez hacerlo solo un grande, Sólo un poco más pequeño a algo así como 38. Entonces podríamos hacer lo mismo con el subtítulo. Mantengamos la fuente tal como está. Pero hagámoslo más pequeño. Algo así como 18. Ahí vamos. Esto debería estar bien, quizá ahora volvamos a revisar el precio, la topografía de nuestro precio. Y como pueden ver, tenemos un montón de, muchos aspectos aquí mismo. Entonces vamos con cuatro horas, vamos con la cantidad principal, podemos cambiar este texto aquí mismo. Vamos con tal vez como tal vez sólo un poco más grande, como 58, supongo. A lo mejor cambiemos la moneda de la cantidad a algo pero más pequeño a algo como 22. Yo lo estoy haciendo. Yo solo estoy para que puedas ver qué, saber qué posibilidades, qué opciones obtienes aquí cuando estás haciendo estas, estas cajas de precios. Y como pueden ver, realmente podemos
tomar, sacar provecho de nuestra, de nuestras clases aquí mismo porque estamos cambiando todo de una sola vez. También podrías cambiar las características, topografía, podemos hacerla más pequeña o más grande si quieres. Eso depende totalmente, totalmente de ti. Y nos dieron tal vez sólo cambiamos como el texto en nuestra parte inferior a algo como contactarnos. Contáctanos. Ahí vamos. Lo mismo aquí. Y lo mismo aquí. También podrías quizás agregar una clase a nuestro botón. Alguien se fue y acaba de escribir en Premio bt, n. ahí vamos. Y ahora si empezamos a cambiar el color de nuestro, de nuestro botón, digamos a nuestro color marrón. Y por supuesto necesitamos agregar la misma clase a todos nuestros botones. Premio btn, y el último, premio btn. Entonces si quieres cambiar, como el botón pasa el color a tal vez este color más oscuro. Sólo, ya sabes, sólo para ver cómo se ve. puede ver que en realidad
es, en realidad está afectando a todos nuestros botones. Otro aspecto importante del que debes tomar nota. No sólo tienes como un botón aquí dentro de la caja de precios, sino también una imagen. Por lo que si lo deseas, puedes agregar una imagen encima de tu,
de tu rubro en este cuadro de precios. Pero echemos un vistazo a eso en el siguiente video.
44. 8.3Añadir las imágenes a las cajas de precios: Por lo que dentro de ella, la capa de la caja de precios, la imagen en la parte inferior. Por lo que dentro de la capa de caja de precios, tenemos esta capa de imagen añadida también. Entonces por defecto, si solo seleccionamos nuestra capa, puedes ver que conseguimos esto como una URL ficticia aquí mismo. Que es, bueno, esto es sólo tirar de una imagen ficticia de este soporte de lugar. Se trata de una página web. Y si vamos a nuestro cuadro de precios y luego grafico aquí, se
puede ver que llegamos a esto incluir opciones de imagen. Entonces si hacemos click en Sí, cómo algo está cambiando aquí mismo. Pero como se trata de una imagen ficticia, no
podemos verla ahora mismo. Pero si lo guardamos y luego vamos a nuestro sitio, ahí vamos. Tenemos nuestra imagen incluida. Y por supuesto si cambiamos esa imagen por algo, algo más, sólo voy a agarrar rápidamente tal vez esto, este logotipo. Entra en seleccionado, Guárdalo. Vuelve a nuestro sitio, refresca la página, y puedes ver que tenemos nuestra imagen incluida. Entonces esto es algo que podrías hacer si quieres hacerlo así. Si quieres agregar otra,
otra imagen aquí mismo, no
puedes hacer eso aquí dentro de tus cajas de precios y precios. Pero esto es sólo una opción. No lo es, no es necesario si no lo quieres, si no quieres hacerlo. Solo para recordar, para excluir ahora esa imagen de tus errores de precios porque aquí en realidad no puedes, como puedes ver, realmente no puedes eliminar esa imagen. Se puede quitar el botón. Pero si quieres quitar la imagen, tienes que ir al cuadro de precios gráfico y solo tienes que hacer clic en No. Después guardar y luego ir a nuestro sitio. Y ahí vamos, que esa imagen, esa imagen se haya ido. Entonces una vez que arregláramos a todos estos tipos, lo que podríamos hacer es que podríamos ocuparnos de la capacidad de respuesta, pero tal vez, solo tal vez agregar algo así como una pequeña frontera rápida a nuestra caja de precios. Entonces desde la pestaña Avanzado, voy a ir a Borders. Voy a agarrar nuestro color, tal vez este marrón oscuro, pero voy a cambiar esa transparencia. Y quiero hacer el ancho. Yo soy uno. Y quiero que esta frontera sea sólida. Y esto me va a dar sólo una, ya
sabes, un poco más de definición. Sé que no estamos siguiendo ningún diseño específico, ningún diseño específico aquí mismo. Se trata más de aprender a utilizar todas estas herramientas con el fin de hacer tu propio sitio web. Pero, ya sabes, yo solo pienso que solo da a nuestros precios y cajas un poco más, un poco más de definición. Y tal vez también podríamos simplemente agarrar nuestra sección. Déjame sólo ver dónde estamos aquí,
los precios, y tal vez podríamos agregar como un fondo muy, muy suave, como si muy, color gris
muy claro, algo así como F9, F9, F9. Y si lo guardamos, adelante a nuestro sitio principal, refresca eso. Tenemos algo así como una bonita, bonita definición aquí abajo. Por supuesto que es sólo una opción. No tienes que hacerlo, pero ya sabes, tienes que saber cómo hacerlo, cómo hacerlo. Entonces ahora que tenemos nuestros precios creados, tal vez pasemos a crear algunos testimonios. Digamos que queremos presumir,
presumir de los resultados que obtuvimos
y lo que nuestras líneas de hábito tienen que decir sobre nuestros servicios.
45. 8.4Añade los testimonios: Voy a empezar a crear mis testimonios igual que cualquier otro mini-proyecto dentro de este diseño. Entonces voy a ir a Agregar y añadir una sección a la que voy a llamar testimonios. Ahí vamos. Y ahora simplemente podemos empezar a sumar nuestros testimonios. Entonces descubramos qué podría hacer aquí un módulo testimonial. Entonces solo voy a agregar un módulo testimonial. Y como puedes ver, tenemos algo de contenido ficticio aquí mismo. Ahora, un buen testimonio supongo que siempre viene con una imagen porque queremos que nuestro testimonio sea lo más plausible posible. Por lo que puedo ir a un lado muy interesante que se llama esta persona no exist.com. Y este es un proyecto, un proyecto de IA que justo, cada vez que refrescas la página, genera una foto aleatoria de cualquiera, bueno, de una persona que no existe. Y entonces, pero en nuestro caso, será, lo será,
será una gran fuente de fotos de retratos de personas que en realidad no existen. Y todas estas fotos fueron generadas por la inteligencia artificial, lo cual es un poco aterrador, pero va a servir, va a funcionar muy bien en nuestro, en nuestro escenario. Sólo voy a copiar tres de estas imágenes y luego usarlas para nuestros testimonios. Correcto. Por lo que conseguí mis imágenes creadas, se descargarán. Voy a ir a mi testimonio. Voy a asegurarme de que esté seleccionada y voy a ir a Imagen y luego navegar. Y voy a seleccionar, bueno tal vez voy a seleccionar todos mis archivos y subirlos. Entonces estas son todas estas imágenes. Sólo voy a seleccionarlos y abrirlos. Y voy a ir con esta primera imagen. Sólo voy a seleccionarlo, guardarlo. Y veamos cómo se ve en la parte delantera. Entonces este es nuestro este es nuestro primer testimonio. Déjame volver. Por lo que una vez que refresque mi página, se
puede ver que este tipo está justo aquí. Entonces supongo que lo que podríamos hacer de nuevo es que quizá podríamos agregar como clonador Este tipo termina, y luego tal vez cambiar algunas cosas al respecto. Pero primero, como de costumbre, sólo
voy a añadir una clase testimonial a esto. Voy a escribir en prueba este testimonio. Ahí vamos. Entonces esta es nuestra clase. Y sólo voy a duplicarlo una vez y luego dos veces. Por supuesto que todo depende cómo quieras a cómo
quieres presentar tus testimonios por ahora, solo
mantengámoslo así porque solo voy a querer cambiar
rápidamente algunos aspectos al respecto. Entonces esto va a, tal vez voy a ir con esta imagen y luego el partido 30. Entonces cejas. Y ahí vamos. Tenemos todo, todo nuestro testimonio. Los testimonios básicamente estarán listos. Por lo que ahora, ya que tenemos seleccionada la clase. Podríamos ir a la maquetación tal vez, y veamos qué tenemos aquí. Obtuvimos la disposición horizontal y la disposición vertical. Entonces, como puedes ver,
rápidamente, cambia de horizontal a vertical. Podrías por supuesto, alinear el contenido e incluso podríamos controlar cómo toda esta sección, cómo van a quedar estos testimonios en nuestros dispositivos móviles, móviles. Y por supuesto nos dieron la tipografía. Entonces si quieres cambiar el tamaño de fuente del propio testimonial, podrías hacer eso. Podríamos cambiar el tamaño de fuente del autor. A lo mejor hagámoslo un poco más grande a algo así como 20. Y el autor info también. Podríamos hacer tal vez algo, algo así. Y por supuesto supongo que es una buena idea tal vez en algún margen entre en estos elementos. Entonces voy a seguir adelante y elegir como margen, arriba y abajo, como 25. Y hay un aspecto muy interesante y muy importante de crear elementos como éste. Es decir, esto es solo un ejemplo, pero puedes usar esa técnica en cualquier parte de tu lado. Ahora, estos testimonios se ven así. Se les está poniendo a verticalmente como así. Pero di que te gustaría mantenerlos o hacerlos alineados horizontalmente. Entonces en lugar de solo tal vez agarrar, agregar algunas columnas y luego poner todos los testimonios dentro de ellas, lo cual por supuesto podrías hacer. Podrías simplemente agarrar tu sección de testimonios. Y en esa sección, podrías, podrías elegir este diseño de elemento hijo. Y por defecto, todos estos elementos hijos, lo que todos estos desarrolladores testimoniales en realidad se están apilando verticalmente. Pero si elegimos horizontalmente, se
puede ver que estos tipos están amablemente siendo puestos uno al lado del otro. Y por supuesto, si solo agarramos un testimonial, aseguramos de que nuestro vidrio esté seleccionado, vamos al tamaño y el espaciado, que tal vez podríamos simplemente golpear aplicar todo solo para hacer, solo para que estos chicos se vean un poco, un poco de manera diferente. Pero claro, si eso es demasiado para ti, podríamos bajar a tal vez como ocho, aplicar a todos. Se puede jugar con él. Por supuesto que olvidé agregar tal vez así, como
algunos, algún rumbo, pero eso va a ser súper, súper simple, súper rápido. Podemos simplemente llevar a este tipo a lo mismo, tal vez no el encabezado, sino el texto. Entonces solo voy a duplicar que va aquí abajo. Pero como se puede ver, ya que nuestra opción de elementos secundarios de la pila de acciones se establece horizontalmente a nivel global, me refiero globalmente en nuestra, en nuestra sección, puede ver que todos estos elementos están siendo apilados como horizontalmente y que no es realmente lo que queremos. Entonces en este caso, lo que podríamos hacer es simplemente y revisar a este tipo para hacer, para que estos elementos se vean así. A lo mejor sólo voy a agarrar mi este testimonio. Y lo que voy a hacer es simplemente voy a dar clic en estas tres pequeñas barras y elegir div rápido. Ahí vamos y luego ponemos todos estos testimonios dentro. Y de nuevo, lo que podríamos hacer es simplemente apilar elementos
secundarios horizontalmente para mantenerlos así. Y por supuesto, me gustaría alinear todo al centro. Algún leñador testimonial seleccionado. Voy a elegir mi primera opción, pegado elementos hijos verticalmente y simplemente elegir alineación horizontal, centro. Y supongo que quizá podríamos agregar algo de espacio aquí abajo. Y tal vez qué tipo de este rubro, lo que dicen nuestros clientes. Después vamos y obtenemos nuestros testimonios creados. Entonces, por supuesto, esta es solo una forma de crearla. Pero y si quisiéramos hacer tal vez como un slider de nuestros testimonios, sólo porque queremos hacerlo así. Podríamos, por supuesto, hacerlo. Y eso es en realidad lo que vamos a hacer en el siguiente video.
46. 8.5Poner los testimonios en un talla deslizador: Entonces digamos que queremos que nuestros,
nuestros testimonios sean un poco más interesantes, un poco más interactivos, por así decirlo. Entonces pongamos nuestros testimonios en un slider. Entonces lo que voy a hacer es que voy a añadir un slider. Ahí vamos. Y lo voy a poner debajo de MyText en algún lugar de aquí. Y a lo mejor voy a añadir un poco de espaciado. Y vamos como 50 píxeles de margen. Esto debería estar bien. Y cuando sumamos esta capa abierta, se
puede ver que nos dieron la diapositiva 123 y en realidad tenemos tres testimonios, así que eso está bien. Entonces lo que podemos hacer es simplemente agarrar un testimonial, ponerlo dentro de esta capa de diapositivas, hacer lo mismo con la segunda, y hacer lo mismo con la tercera. Y AF solo hacemos click en cualquiera de estas flechas. Se puede ver que nos dieron nuestros testimonios muy bien deslizándose. Ya no vamos a necesitar este div. Pero quizá podríamos cambiar algunos aspectos de nuestras diapositivas, de nuestros testimonios para que se vean bien dentro de nuestra diapositiva. Entonces con mi diapositiva, sería mi testimonial seleccionado y mi clase testimonial activa. Voy a ir a maquetación. Y voy a cambiar el diseño a vertical. Y voy a cambiar la alineación de contenido a centro. Y ahora si pudiéramos empezar a hacer clic en nuestro deslizador, se
puede ver que está muy bien cambiando. Por supuesto, nos pusimos todos todavía estilo nuestro, nuestro testimonio. A lo mejor voy a disminuir esta velocidad de animación. Yo voy a, tal vez te quitaste el relleno. A lo mejor no superpongamos puntos, pero tal vez cambiemos algunos aspectos de configuración. A lo mejor ocultemos los puntos por completo. Hagámoslo auto-play e infinito. Y 3 mil milisegundos, supongo que eso debería estar bien. Veamos cómo se ve en el fondant. Sólo voy a refrescar a este tipo. Y ahí vamos, conseguimos nuestro slider. Y es ser, es, juega automáticamente porque eso es lo que dijimos que hizo porque eso es lo que lo pusimos a hacer. Y ahí vamos con nuestro slider, con nuestros testimonios. Entonces básicamente, puedes poner cualquier contenido que quieras dentro de horas, dentro de tu deslizador aquí,
dentro, dentro de oxígeno, ¿verdad? Por lo que ya conseguimos nuestra sección de testimonios. A lo mejor empecemos ahora a crear nuestro pie de página porque creo que ya es hora. Pasamos a crear algunos contenidos más dinámicos como nuestro portafolio, tal vez nuestro blog, ya sabes, cosas como esa, una sola plantilla de blog. Todavía nos queda mucho trabajo por hacer, pero solo quiero que aprendas a fondo cómo usar esta pieza de software realmente, realmente impresionante para crear páginas, así sitios web para ti y para tus clientes.
47. 9.1: el pie en la plantilla: Ahora un pie de página definitivamente es parte de nuestra plantilla principal. Por lo que tenemos nuestra cabecera. Es decir, hay una parte de nuestras plantillas, por lo que el encabezado se mantiene igual en todas y cada una de las páginas. Pero lo mismo vale para el pie de página. Entonces voy a ir a mi admin y voy a ir a plantillas de oxígeno. Y voy a agregarle la plantilla de mantenimiento con oxígeno. Entonces estoy dentro de mi plantilla y ahora estoy listo para empezar a construir nuestro pie de página. Pero he decidido que tal vez esta vez hagámoslo un poco diferente. Es decir, en lugar de solo construir todo desde cero, aprendamos otra característica aquí dentro del oxígeno. Solo agreguemos S1 de las secciones predefinidas que vienen con oxígeno. Entonces lo que voy a hacer es ir a, y entonces lo que voy a hacer es ir a, desde mi, desde mi panel de herramientas, voy a elegir Biblioteca. Y aquí abajo tenemos sets diseñados. Y aquí dentro se puede ver que tenemos bastante diseño y sets predefinidos. Y si elegimos a alguien de ellos, quizá
vayamos con este periodo alto y veamos qué es eso. Aquí dentro. Tenemos sanciones y elementos. Y aquí dentro tenemos pies de página. Y digamos que me gustaría tener como tal vez este gran complejo para como ligero pie grande o tal vez solo un simple Fourier. Vamos con este gran complejo para, veamos cómo se ve. Yo sólo voy a dar click en él. Y como puedes ver eso como estar muy bien poblado con nuestros menús, con nuestras fuentes, con algún texto. Hasta tenemos como un fondo aquí abajo. Obtuvimos esta imagen que quizá podríamos cambiar a nuestra imagen. Pero claro, bueno, sería una buena idea sembrar. Entonces voy a ir a Afectos Avanzados y luego voy a ir a Filter. Y voy a elegir Invert como lo hicimos antes. Pero por supuesto, si quisieras, solo
podrías agregar tu propia imagen aquí abajo. Entonces éste sería uno de, uno de nuestros Fuller. Por supuesto, podríamos jugar con todos estos conjuntos de diseños. Podríamos elegir algunos canales. Veamos una página dos, sea lo que eso signifique, encontremos unos pies de página y no demasiados. Vayamos con otra cosa. A lo mejor vamos con el primero. Veamos qué ofrece. De nuevo, pies de página, hay bastantes de estos aquí mismo. Um, así que tal vez vayamos con este logo de pie de página tipo centrado. El hecho de que este pie de página esté pre diseñado no significa que no podamos cambiar nada al respecto. Entonces con esta sección de centros de logotipo de pie de página seleccionada, voy a ir a fondo avanzado y voy a deshacerme de este color. Y voy a añadir uno de nuestros colores. Ahí vamos. Y llegamos a estos, estos iconos, iconos sociales aquí abajo. Y también tienen este color azul hippie atómico que se le ha agregado. Si quieres dejarlo así, puedes dejarlo así. Yo los voy a cambiar. Haz un color azul diferente como este. ¿Por qué no? Y en el hover, tal vez voy a agarrar este color, pero encendido, pero en el hover, sólo
quiero hacerlo un poco más oscuro. Igual que eso. Entonces siempre que pasemos el rato sobre nuestro ícono que puedo cambiar. Y por supuesto, todos y cada uno de estos iconos pueden conducir a nuestras redes sociales. Entonces conseguimos estos íconos aquí mismo. Entonces por defecto, simplemente a Gamow les gusta facebook.com, Instagram, Twitter. Si lo deseas, quería agregar tu perfil de LinkedIn, podrías agregarlo tu perfil de LinkedIn aquí mismo. Yo sólo voy a filmar el símbolo de la libra. Y como se puede ver que ese icono de LinkedIn se está agregando mismo totalmente RSS y YouTube. Todo este módulo, por cierto, es el módulo de iconos sociales que puedes agregar fácilmente desde nuestro panel Herramientas de pozo. Este tipo de aquí, los iconos sociales. Y por supuesto, tienes diferentes,
diferentes elementos y diferentes opciones de estilo listos y esperándonos. Pero esto es justo, solo, ya sabes, creo que esto es solo una forma de agregar rápidamente algunos elementos. Por supuesto, lo mismo va para el encabezado. A lo mejor sólo voy a deshacerme de algunos de estos iconos. A lo mejor este tipo y este tipo nos podemos ir y estos iconos como son. Entonces lo mismo vale para, para los encabezados. Entonces digamos que voy a ir a Agregar y encabezados. Y permítanme elegir uno de eso, uno de los encabezados. Vamos a ir con esto. El 1 de mayo
sea, por supuesto, se debe poner no aquí, definitivamente no aquí. Así que vamos a deshacernos, vamos a moverlo aquí mismo. Y como puedes ver, conseguimos nuestro pie de página, nos añadieron nuestro encabezado de nuestro set de diseño en cuestión de segundos. Entonces si no quieres empezar desde cero, si solo quieres tener algo prediseñado, preinstalado, definitivamente puedes hacerlo aquí dentro del oxígeno. Pero claro, no quiero a este tipo aquí abajo. Yo quiero que se ponga aquí mismo. Voy a volver a cambiar esta imagen a nuestro diseño, genoma bien diseñado. De qué tal vez vamos a deshacernos de esta imagen. Yo sólo voy a volver a mis conceptos básicos y sólo voy a encontrar texto. Y ahí vamos. Este tipo de aquí. Y me voy a deshacer de esta imagen. Y solo voy a escribir mientras diseño diseño lao, voy a cambiar la familia de fuentes a Bree Serif. Cambia el color del texto. Ahí vamos, y aumentamos el tamaño de la fuente a algo así. Pero como puedes ver en nuestro panel justo aquí en nuestro panel Capas,
este enlace, este texto se sienta dentro de un envoltorio de enlaces. Por lo que este envoltorio de enlaces es en realidad una forma de agregar enlaces a su, a sus elementos. Y así digamos que me gustaría, me gustaría este logo,
este enlace de texto a mi mapa de sitio principal, bueno, mime primera página. Por lo que podría simplemente escribir la URL aquí mismo de mi portada. Y siempre que alguien haga clic en esta pieza de texto, serán
ellos serán dirigidos a nuestra, nuestra portada. Entonces veamos cómo se comporta nuestro pie de página. En dispositivos más pequeños. Debe comportarse adecuadamente. Bajemos menos de 768. Por cierto, si quieres cambiar también este menú,
podríamos decirle que se vuelva como responsive una vez que lleguemos,
llegue a cierto punto de ruptura. Digamos que cuando llegamos a menos de 480, queríamos ser como un menú móvil. Entonces voy a ir al móvil responsive. Y voy a elegir Menú Móvil, cambiar por debajo menos de 480. Y ese menú va a pasar a un menú móvil en los dispositivos más pequeños, en los smartphones. Entonces se va a ver así. En los dispositivos más grandes y en los dispositivos más pequeños va a verse así. Si lo deseas, puedes crear tu propio pie de página. Y si solo le das un vistazo a la estructura aquí, la puedes ver. Es solo básicamente columnas, igual que agregamos columnas antes. Y nos dieron tres div. Por lo que nuestro pie de página se está dividiendo en tres columnas. Y dentro básicamente tenemos como un menú, algunas piezas de texto, algunos enlaces, iconos sociales. Podrías agregar más piezas de texto. Eso es, no, eso estaría totalmente, totalmente a ti. Pero lo que le falta a este pie de página no le gusta un pequeño
copyright, información de copyright que podríamos poner aquí, tal vez por debajo de los iconos sociales. Entonces hagámoslo en el siguiente video.
48. 9.2Añadir la información de derechos de autor: Por lo que ahora agreguemos el símbolo de copyright aquí abajo abajo de nuestros iconos sociales. Pero no lo hagamos como texto plano con algunas palabras en él. Pero vamos a ver, hagámoslo, hagámoslo dinámico y hagámoslo una prueba futura. Es decir, es una buena idea agregar un fragmento de código
extremadamente, extremadamente diminuto solo para, ya sabes, solo para asegurarte de que los datos que fecha de copyright es siempre, siempre estén actualizados. Por lo que no tienes que volver a este diseño después de un año, dos o tres años para solo actualizar el código de copyright. Entonces, ¿cómo podemos hacer eso aquí dentro del oxígeno? En primer lugar, sólo voy al código de copyright PHP de Google. Y voy a ir a este primer resultado de trucos CSS. Ahora, ¿por qué busqué el código de copyright PHP? Si quieres hacerlo dinámico, si quieres,
si querías que este código recoja los datos de nuestra base de datos, de, de nuestro sistema. Pongámoslo así. Tienes que hacerlo dinámico. Y para el contenido dinámico voluntad, hay
que ir con PHP. Entonces lo que voy a hacer es que sólo voy a copiar este pequeño fragmento aquí mismo. Voy a volver al oxígeno. Y aquí, en mi última columna, sólo
voy a agregar, y voy a escribir un bloque de código. Ahora bien, no necesitas ser codificador, no
necesitas ser programador. No necesitas saber básicamente nada de codificación para que esto funcione. Pero no puedes simplemente agarrarlos. Php y pestaña HTML. Elimina todo, no lo necesitamos, y simplemente vuelve a pegar ese código. Ahora aquí, si quieres dejarlo como 2008, puedes, pero tal vez solo lo voy a cambiar a 2018. Esta es nuestra fecha de inicio. Y sólo voy a golpear Aplicar código. Voy a colapsar al editor y no se puede ver nada justo aquí porque tenemos que cambiar algunas cosas y ¿cómo llegamos a darle estilo? Entonces voy a ir a la tipografía y voy a cambiar el color a mis colores predeterminados. Y ahí vamos. Tenemos nuestros derechos de autor, símbolo
de copyright abajo, aquí abajo. Por supuesto, si quieres, podrías cambiar. A lo mejor digamos que conseguimos este símbolo de copia y tecleemos en diseño. Apliquemos el código. Y se puede ver que los cambios instantáneamente siendo reflejados aquí abajo. Y de nuevo, tal vez podríamos simplemente agarrar nuestra configuración de topografía se puede cambiar el tamaño de la fuente a algo así como 12. Y tal vez añadir algo de espacio en algún margen a la parte superior. Y quizá cambiemos el color de este tipo aquí mismo. Vamos en realidad, este es este atómico, como se puede ver, esto es de, de nuestro, de este conjunto de diseño. Entonces, tal vez solo lo hagamos un poco, un poco más oscuro. Entonces topografía, nuestros colores. Podría ser uno de estos colores, supongo. Supongo que se ve bastante bien, así que ahora cuando salvamos a este tipo y vamos a nuestra plantilla principal, se
puede ver que tenemos nuestro,
nuestro código de copyright aquí abajo. Y como puedes ver, dice,
bueno, es 2020,
así que está mostrando la fecha correcta y cuando llegue el cumplir 21, esta fecha cambiará automáticamente porque agregamos m No sabíamos como acaba de escribir los números. Agregamos el código, un fragmento muy sencillo. Y, ya sabes, básicamente puedes olvidarte de estos tipos. Simplemente puedes estar seguro de que este dado es, esta fecha siempre va a estar ahí no hay actualizado. Entonces ahí vamos. Conseguimos nuestro sencillo pie de página. Por supuesto, si quieres cambiarlo, siempre puedes cambiarlo. Puedes elegir un conjunto de diseñador, puedes, puedes volverte loco con este pie de página. Pero lo que quiero enfocarme ahora mismo es otra parte de nuestra página web. Por lo que ahora quizá podríamos empezar a crear nuestro blog. Porque digamos que queremos compartir algunos pensamientos interesantes con nuestros, con nuestros usuarios, con nuestros visitantes, o tal vez su cliente será blogger. Por lo que es una buena idea crear un, para aprender a crear una blob usando oxígeno.
49. 10.1Añadir las publicaciones de blog: En los próximos videos, vamos a crear nuestra página de blog y una sola plantilla de post de blog. Y este será un gran ejercicio para nosotros antes de empezar a crear nuestro portafolio porque
eventualmente vamos a aprender a usar contenido dinámico aquí dentro del oxígeno y WordPress. Pero antes de pasar a eso, necesitamos tener algún contenido,
algún contenido de bloque en nuestra página. Entonces estoy escuchando ese directorio de plugins. Y lo que voy a hacer es que sólo voy a añadir un nuevo plugin que se llama prensa Faker. Y este plugin simplemente nos permitirá añadir algún contenido ficticio a nuestro, a nuestro lado. Por lo que sólo voy a instalarlo y activarlo. Y una vez que esté instalado, voy a ir a la prensa de falsificación. Entonces voy a ir a Ajustes. Y una vez que esté instalado, voy a ir a prensa falsificada, y luego voy a ir a posts. Y básicamente lo único que voy a hacer aquí es que solo voy a teclear, sólo voy a teclear en estos, de ahí tan tres, lo que el número mínimo será de tres, máximo 12 de puestos. Y solo voy a dar clic en Generar. Y una vez hecho, voy a ir a los posts. Y se puede ver que nos dieron 12345. Y por supuesto nuestra sexta. Al igual que la primera entrada de blog que viene por defecto con WordPress. Pero el problema con ello es que, bueno, estos posts, si acabamos de añadirlos y añadirlos, se
puede ver que no vienen con una imagen destacada. No hay imagen destacada, y sería buena idea tener una solo para que nuestra entrada de blog, sólo para que nuestra página de blog en realidad se vea un poco más interesante, supongo. Una vez que empecemos a añadir, una vez que empieces a jugar con nuestros
diferentes, diferentes diseños de nuestra página de blog, es una buena idea tener algunas imágenes para ver, para ver realmente cómo se ven esos diseños. También, como pueden ver aquí mismo, sólo
tenemos una categoría que se llama uncategorized. Pero lo que queremos hacer es que quisiéramos agregar algunas categorías como k, Digamos diseño. Y sólo voy a editar tal vez diseño web, diseño web y tal vez branding. Déjame hacer clic y escribir en branding. Y tal vez, no sé, vamos con, vamos con el diseño de impresión. Y voy a añadir una nueva categoría. Y yo voy a actualizar. Y por supuesto, lo que tenemos que hacer en este momento es simplemente seguir adelante y agarrar todos nuestros posts y simplemente agregar el cambio todas estas categorías e imágenes destacadas del anuncio. Entonces para agregar una imagen destacada, o tenemos que hacer es simplemente ir a nuestro post, editar el post. Creo que voy a afligir a los sin categoría. Simplemente voy a elegir básicamente cualquier imagen que tengamos aquí. Esto debería ser, esto debería estar bien. Entonces una vez hecho eso, solo voy a dar clic en Actualizar. Y luego voy a hacer lo mismo por todos los puestos restantes. Simplemente voy a añadir diferentes categorías a mi post, y voy a añadir esas imágenes destacadas, ¿no? Entonces conseguimos nuestras jadas, conseguimos nuestras categorías. He agregado al Marfil, las imágenes destacadas, y supongo que estamos listos para empezar a crear nuestra página de blog.
50. 10.2Crea la plantilla del blog: De acuerdo, tenemos nuestras entradas de blog, así que ahora es el momento de agregar realmente nuestras publicaciones a nuestra página de blog. Entonces lo que tenemos que hacer es en realidad tenemos que crear una plantilla para nuestra página de índice de publicaciones de blog. Entonces lo que voy a hacer es ir al oxígeno y luego a las plantillas. Y luego voy a añadir una nueva plantilla. Voy a añadir esto. Voy a nombrar esto como entradas de blog. Ahí vamos. Y podríamos heredar el diseño de nuestra, de nuestra plantilla de nuestra plantilla principal de hombres si quisieras. Pero también podríamos saber simplemente siempre crear todo desde cero. Entonces digamos que solo queremos tener lo mismo como nuestro encabezado de superposición en nuestra portada, para que podamos dejarlo así. Y en nuestra página de entrada de blog podríamos tener un encabezado totalmente diferente y un pie de página totalmente diferente. Entonces, no heredemos esa plantilla principal. Dejemos ese efecto de superposición en nuestro hogar solo para que cuando tú, cuando acabas de previsualizar ese diseño en tus computadoras, puedas ver diferentes aspectos de este diseño. Entonces sólo voy a dejarlo como ninguno. Y luego voy a ir a otro y luego elegir el índice de blogposts. Porque si tú, si quieres aplicar esta plantilla a una página específica, específica, y tenemos que elegir esta. ¿ Dónde aplica esta plantilla? Y de esta otra pestaña, tenemos que elegir post de blog, ese índice. Y entonces sólo voy a golpear publicar. Y cuando vamos a nuestra página de entrada de blog, se
puede ver que sí tenemos nuestra publicación, pero no se han peinado en absoluto. Esto no se ve muy bonito, ¿verdad? Y por supuesto no podemos ver ningún encabezado aquí mismo porque no
heredamos nuestro diseño de encabezado de nuestra plantilla principal. Y podemos ver nuestro pie de página. Vamos a crear un diseño completamente,
completamente diferentes para este póster de bloque, página de
índice y para el singular post de blog. Porque digamos que te metiste en que tienes que crear una entrada de blog a un blog, un blog para tu cliente. Y vamos a hacer eso a completamente desde cero. Por lo que por ahora agregamos algún contenido ficticio. Agregamos una plantilla, plantilla índice de publicación de
blog. Y ahora tenemos que darle estilo a esa plantilla. Entonces empecemos a hacer eso en el siguiente video.
51. 10.3Añade el encabezado y un pie de pie a nuestra página de las publicaciones de blog: De acuerdo, tenemos nuestros puestos, tenemos nuestra plantilla. Pero como puedes ver, nuestra plantilla está vacía. Aquí no tenemos nada. Y eso es porque decidimos no heredar y adelgazar de nuestra plantilla principal. Y cuando vamos a nuestra página de blog, se
puede ver que se están mostrando
los blogs, las entradas del blog. Pero en realidad no nos queda demasiado bien que eso no es lo que queremos. Ni siquiera tenemos un encabezado o no tenemos un pie de página y bueno, básicamente no
tenemos estilos aquí, así que arreglemos eso ahora. Entonces voy a empezar con agregar un encabezado, un pie de página, y tal vez alguna, alguna sección con el encabezado y algunos textos. Pero en lugar de simplemente construir cualquier cosa de todo desde cero, sumemos horas. Bueno, uno del conjunto de diseñadores, así que voy a ir a Agregar conjuntos de diseño de biblioteca. Y creo que voy a ir con algo realmente sencillo. Entonces voy a ir con esta sección de Atomic y luego finalmente voy a encabezar. A lo mejor voy a ir con encabezados simples centrados. Entonces este será nuestro encabezado. Y luego voy a añadir un turd de pie, que tal vez es este Pie centrado así. Por supuesto que podemos cambiar nuestro logo. Entonces sólo voy a agarrar esta imagen, como pueden ver aquí. Voy a ir a Browse, agarrar nuestro logo, y seleccionar eso mismo para este tipo, navegar. Y ahí vamos. Tenemos nuestros, tenemos nuestros logos creados. Y este menú, creo, está completo el, bueno, es lo mismo. Pero éste tiene éste tiene algunos, algunos dropdowns. Pero creo que podemos darles un estilo bonito, bastante similar. Entonces voy a agarrar este menú y sólo voy a cambiar el color de mi texto a nuestros colores predeterminados. Y voy a agarrar el menú de abajo. Y yo voy a hacer lo mismo. Pero tal vez sólo voy a
cambiar también el tamaño de la fuente siempre tan ligeramente a algo como 12. Esto debería estar bien. Y quizá cambiemos la altura de este logo a como 20. Y durante una hora iconos sociales, cambiemos el tamaño a tal vez como 18 o tal vez a Wendy. Y de nuevo, cambiemos el color de fondo a tal vez este color más oscuro. Ahí vamos. Y en un hover, cambiemos el color a nuestro color marrón. Entonces cuando pasamos el cursor sobre nuestros iconos, se ven algo así. Ahora quizá podrías arreglar algunos problemas de espaciado aquí mismo. Si agarramos esta imagen, veamos si realmente tienes algo de espaciado aquí. Tienes 12 píxeles en la parte inferior. Entonces hagamos tal vez como seis. Y vamos a revisar nuestro menú. Si tenemos algo de espaciado aquí. Encendido, vamos a agarrarlo así. Y vamos a 0. ¿ Y sabes qué? Dejémoslo así. Vamos a mantenerlo simple. De verdad lo es, realmente no se trata de crear el mejor encabezado y pie de página del mundo para este diseño, queremos agregar una página de blog. Entonces ahora supongo que quizá podríamos agregar una sección. Y dentro de esa sección, permítanme ponerlo entre nuestro encabezado y nuestro pie de página. Entonces en esa sección, voy a añadir un encabezamiento. Voy a añadir algo de texto. Escribamos algo como Bienvenido a nuestro blog. Y aquí dentro solo voy a copiar esta pieza de texto y luego pegarla una vez más porque esto debería estar bien. Y quiero centrar todo dentro de mi sección. Pero también voy a agarrar este rumbo y alinearlo al centro. Lo mismo aquí, y la línea ese tipo al centro. Por lo que el siguiente paso sería agregar otra sección. Por lo que iría y añadiría una sección. Solo mantengamos todo bien organizado. Y aquí dentro, en realidad vamos a añadir nuestras, nuestras entradas de blog. Vamos a añadir un módulo que nos va a permitir añadir una entrada de blog. Por lo que nuestro me gusta la parte principal de nuestra plantilla está terminada. Lo hicimos muy rápido. Por lo que ahora realmente podemos pasar a agregar nuestra entrada de blog para poblar nuestra, nuestra página con blogs, con botes de bloque. Porque cuando vayamos a nuestra, nuestra página de blog y voy a refrescar eso. Se puede ver que en realidad estás empezando a construir nuestro, nuestra página de blog. Por lo tanto, sumemos nuestros posts en el siguiente video.
52. 10.4Añadir las publicaciones de blog: Aquí en oxígeno, hay un módulo que se encarga de mostrar tus entradas de blog. Entonces lo que podríamos hacer es añadir un módulo que se llama posts fáciles. Y vamos y como pueden ver, cuanto hacemos eso, estamos agregando nuestros blogposts a nuestra página. Y por defecto, WordPress está mostrando una cosa, 1010 posts. Por eso nos ven a todos ellos aquí mismo. Por supuesto que podemos cambiar eso. Entonces cuando vayamos a, cuando volvamos a nuestro panel de administración y vamos a ir a Ajustes Reading. Por lo que aquí tenemos este blog páginas muestran como máximo diez posts en este caso. Entonces cambiemos eso a, digamos antes. Y voy a guardar los cambios. Y luego cuando vamos a nuestra página y actualizamos la página, se
puede ver que sólo tenemos cuatro blogposts siendo mostrados en este momento. Y tenemos esta diminuta paginación aquí en el fondo. Entonces, ¿cómo podemos realmente darle estilo a nuestro módulo de publicaciones de blog dentro del oxígeno? Bueno, antes que nada, claro que voy a ir, voy a ir a las plantillas y blogposts. Voy a editarlo con oxígeno. Y tal vez sólo me voy a deshacer de este espaciado porque tenemos algo de espaciado aquí arriba y dentro de esta sección. Por lo que nuestro módulo de publicaciones fáciles, como puedes ver, tiene algunos, algunos cambios diferentes. Entonces tiene algunos aspectos que podemos cambiar. Entonces, en primer lugar, tenemos esta opción de consulta aquí mismo que le permite cambiar esas consultas. Entonces básicamente qué publicaciones se están sacando de nuestra base de datos. Por lo que puede ser por defecto, consulta de WordPress, puede ser personalizada, por lo que podría elegir el tipo de publicación. Y si tuviéramos algunos postdocs personalizados, no
creemos que tengamos ninguno, justo en este momento. Podríamos hacer un poco de filtrado. Por lo que podríamos, por ejemplo, simplemente agregar como solo categorías específicas, específicas. Al igual que tal vez, digamos diseñar. Si sumamos a eso y
guardamos eso, en última instancia vamos a ver nuestro diseño opuesto. Pero creo que todos tienen, todos nuestros puestos tienen esta categoría. Entonces veamos sin categoría. Y vayamos a nuestra página de entrada de blog. Y como puedes ver,
aquí no tenemos nada porque acabamos de establecer categorías como nuestra categoría. Y creo que no tenemos ningún post sin categoría. Entonces vamos a revisar el diseño de impresión. Y voy a refrescar la página. Y tenemos cuatro de ellos tienen la categoría de diseñador de impresión. Pero de todos modos, si solo quieres filtrar categorías específicas, puedes, puedes hacerlo aquí mismo. Ahora. También podríamos cambiar el orden, pero descendiendo o ascendente y descendente, o podríamos ordenar el orden por fecha, marea, y etcétera. Entonces si solo actualizamos la página en este momento, nuestras publicaciones se están filtrando u ordenando por, por el, por el título. Vamos a seguir adelante y elegir la consulta predeterminada. Pero en cuanto a, en cuanto al diseño, este uso Opciones predefinidas es el más importante. Por lo que el estándar de imagen de Grit es lo que estás viendo en este momento. Pero podríamos ir con cualquier otro cuando esté presintonizado aquí mismo. Entonces hagamos imagen de arenilla con gradientes oscuros animados. Entonces esta es nuestra, esta es la mirada ahora mismo. Podríamos ir con imagen con superposición de gradiente para que se vea así. O imagen con superposición de rectángulo rasgado. Entonces básicamente obtienes mucho, mucho estilo, opciones de estilo aquí mismo. Y por cierto, si te estás preguntando, ¿cómo puedes cambiar este extracto aquí mismo donde bien, eso no es dependiente del oxígeno. Podemos, podemos arreglar eso. Entonces tal vez hagámoslo realmente. Tengamos como tal vez algunos fragmentos más pequeños. Voy a volver a admin. Vamos a ir con mi jefe. Y cuando edites un post aquí a la derecha, verás tu panel de extractos. Entonces si me deshago de la mayor parte de este texto, sólo
voy a dejar tal vez como tres líneas de texto. Voy a actualizar el post y voy a hacer lo mismo con mis otros posts. Vamos, dejémoslo a dos líneas de texto. Y voy a ir a mi página y oxígeno y luego plantillas. Voy a editar la plantilla de publicaciones de blog con, con oxígeno. Y como pueden ver, mis extractos,
extractos son mucho, mucho más pequeños ahora mismo. Por supuesto, cada vez que seleccionas un curso diferente, un curso diferente, sigo en los postes fáciles. Las publicaciones usan un dif, diferente preset. Entonces quizá vayamos con, vayamos con una lista con rectángulos, superposición, superposición centrada. Este es un blog bastante popular, diseño de blogs. Entonces, vamos a quedarnos con éste. Por lo que ahora cuando tengamos activado este tipo este preajuste, podríamos ir a estilos. Y quizá no podríamos cambiar algunas cosas sobre nuestro diseño de nuestro, de nuestro bloque, ambos reales, pero tal vez hagamos eso. Empecemos a hacer eso en el siguiente video.
53. 10.5Estilo las publicaciones de blog: Entonces ahora que tenemos nuestros posts, empecemos a peinarlos. Entonces voy a ir a estilos y vamos al título. Entonces digamos que me gustaría cambiar el color de mi, de mi título. Y voy a ir con tal vez con mi color predeterminado, este tipo de aquí. Y digamos que me gustaría cambiar el tamaño de la fuente. Pero como pueden ver, cuando empezamos a hacer eso, bueno, nada realmente está pasando. Bueno, eso se debe a que algunas de estas, algunas de estas opciones de estilo, pesar de que están aquí, realmente no se
puede ver y gustar el efecto porque las estrellas que están, que están siendo como codificadas manualmente o tomando precedencia sobre lo que podemos hacer aquí mismo. Entonces por defecto, como ejemplo, si vamos a plantillas, entonces Plantilla CSS. Ahora hay mucho código aquí mismo, pero no debería tener miedo de ello. Si apenas comienzas a leer los nombres de todas estas clases, puedes ver que básicamente son, quiero decir, tienen un nombre bastante lógico. Entonces por ejemplo, este tipo de aquí, título de la publicación OCC, se
puede ver que tiene este tamaño de fuente, 1.5 m de espacios. Por lo que podríamos o cambiar el tamaño aquí mismo. Por ejemplo, si vamos a como 2.5 y luego presionamos Aplicar código, se
puede ver que en realidad está cambiando. No obstante, también podrías simplemente agarrar este tamaño de fuente. Simplemente elimínelo. Si lo deseas, entonces aplica el código. Y ahora si vamos a, si volvemos a nuestros estilos y luego título y luego tamaño de fuente, si ahora solo escribimos como, no
sé, 66, se puede ver que en realidad ahora no es ningún cambio en el nuestro nuestro título. Entonces no quiero que sea tan grande. Vamos con como 46. Esto debería, los escribirá como 42. Esto debería estar bien. Yo lo voy a guardar. Entonces déjame esconder a este tipo por un segundo. Por lo que este sería nuestro título. Y por supuesto que podemos, puedes hacerlo más grande, puedes hacerlo más pequeño y más pequeño. Eso va a ser totalmente, totalmente a ti ahora. Pero lo que es más importante aquí es que a veces si
no ves el cambio cuando estás como ajustar algunos aspectos de tu blog post real, eso es lo más probable porque tú,
tú, te vas a tener que gustar comprobar el código a fin de hacer ese cambio específico, específico. Por lo que a continuación nos dieron metadatos. Y vamos a ver si podemos cambiar el tamaño de la fuente aquí. Hagamos 36. En realidad no. Pero ¿podemos cambiar el color? Cambiémoslo a autonomía. Este tipo de aquí. Bueno, podemos cambiar ese asunto aquí mismo. Este su diseño, el autor, nombre del autor. A lo mejor hagámoslo como este gris claro. A lo mejor. A lo mejor vamos con esto, este gris. Y de nuevo, podemos ver con el fin de cambiar el tamaño si queremos, voy a ir a otra vez, plantillas, plantillas, CSS. Y este es este tipo de aquí. Yo sólo voy a borrar eso, aplicó el código. Y luego cuando acabamos de refrescar eso, cuando vamos a nuestros estilos de publicaciones fáciles Mehta, Ahora
podemos cambiar el tamaño de fuente de nuestro, de nuestros metadatos Meta. Pero claro, no quiero que sea tan grande. El 16 sigue siendo demasiado grande. A ver, diez. O 12. Entonces como se puede ver, esto no hay nada que asustarse si no se ve alguno, cualquier cambio hecho, hecho efectivo. Y no deberías estar realmente asustado de ese código que acabas de ver. Todas esas clases tienen un nombre realmente lógico. Y, ya sabes, es solo cuestión de encontrar algo que suene lógicamente que lo
más probable es que sea responsable del cambio en algunos aspectos que ven aquí mismo. Entonces ahora veamos qué podemos hacer con el contenido. Veamos si podemos cambiar el tamaño de la fuente. Podemos cambiar el tamaño de la fuente aquí. Entonces, solo hagámosme como 14. Esto debería estar bien. Voy a ir con mi color predeterminado. Y luego revisemos el Read More. Entonces como puedes ver, puede ser un botón o puede ser solo un llano un enlace. Entonces cambiemos el color del texto a tal vez nuestro color marrón. ¿ Por qué no? No vamos a estar usando una caja en el tamaño de la fuente. Hagámoslo un poco más grande. Y ahí vamos. Básicamente cambiamos el diseño de nuestro blog, blog post real. Pero por supuesto, ya sabes, podría haber algunos cambios que te gustaría implementar, pero no están disponibles aquí dentro de los estilos. Por ejemplo, esto, este dato hace botón Fecha aquí mismo, o tal vez como el fondo. Y si no puedes ver esas opciones aquí mismo, solo
tienes que ir a esta plantilla, CSS. Y por ejemplo, digamos que te gustaría cambiar como este botón aquí mismo. Y se puede ver que este es este tipo de aquí. Ok, supongamos que la superposición de fecha de imagen y esta es esta fecha que se superpone. Y se puede ver que tenemos,
tenemos la posición,
tenemos la parte superior y derecha y el valor de tamaño de fuente. Entonces digamos que quieres cambiar el tamaño de la fuente. Hagamos como solo para que puedas ver el cambio menos como 26 píxeles. Y luego solo voy a golpear Aplicar código. Y luego se puede ver que nuestra fecha siendo cambia y ahora es camino, camino, camino, mucho, demasiado grande, pero, ya sabes, funciona. Por lo que voy a volver a mi anterior, valor anterior. Hagamos algo así como espacios de 0.9 m. Y voy a aplicar el código para que estos datos se vean, con este aspecto. También podrías cambiar el color de fondo si quisieras. Entonces sólo voy a tal vez tomar prestado a este tipo. Y sólo voy a escribir algo simple como leer, tal vez y aplicar el código. Y se puede ver que ha sido vetado, cambiando. O podríamos hacerme como colisionar amarillo. A ver. Y vamos a aplicar el código. Y como puedes ver, estos colores están cambiando instantáneamente. Y los nombres de estos colores son básicamente simples nombres sss, sss, sss. Si solo buscas nombres de color CSS, vamos, busquemos esto. Podemos ir a escuelas tal vez como W3. Y puedes ver que tenemos todos nuestros colores que, ya sabes, si no quieres aprender Xcode, por lo que no quieres usar los códigos hex. Se pueden utilizar estos nombres. Digamos, no lo sé, vamos con como eres así en lugar de amarillo claro, Hagamos como estábamos. Aplica código y ese color está cambiando. Voy a volver a mi diseño original que yo, que copié antes. Y ahí vamos. Ahora, claro, si te gustaría quedarte con todos estos cambios, es una buena idea guardar tu preset. Entonces veamos eso. Digamos que quiero cambiarlo ya que no conozco mi preajuste de blog y lo voy a guardar porque, porque ahora cuando intentamos no solo usar algunos otros presets, vamos con éste. Y luego vamos a entonces sabemos que decidimos eso, sí, creo que prefiero uno. Así que vamos a ir al preset MyBlock. Y como puedes ver, conseguimos nuestro,
nuestro blog, preajuste de blog funcionando correctamente. Y por supuesto, si vamos a nuestra página principal, refresca a este tipo. Se puede ver que tenemos nuestras entradas de blog, página de blog listas. Pero ¿y si hacemos click en uno de estos, en uno de estos posts? Se puede ver que, sí, tenemos el contenido, pero ese contenido, no se ha peinado correctamente. Entonces, ¿cómo podríamos arreglar esto? Bueno, tendríamos que simplemente construir nuestra plantilla de un solo post para esto. Y eso es lo que vamos a empezar a hacer en el siguiente video.
54. 10.6Añade la plantilla de publicación única: De acuerdo, conseguimos nuestra página de blog, creado, nuestro blog real buscapersonas creado. Pero ¿y si queremos ver? ¿ Y si quieres leer una de las entradas del blog? Entonces si solo agarramos nuestra dirección, voy a ir a nuestro modo de incógnito como siempre. Y yo voy a, y blog. Y voy a dar click en cualquiera de estos. Se puede ver eso, bueno, no es lo que quieres. Eso no es lo que queremos ver. Es decir, ese contenido de esa publicación específica se está emitiendo, pero no se ha peinado. Y por eso necesitamos crear un blog, un solo blog, publicar una plantilla. Entonces lo que voy a hacer es ir a plantillas de oxígeno. Voy a añadir una plantilla nueva y voy a llamarla sola publicación. Y voy a elegir singular. En el mundo hace esta plantilla aplicando. Y voy a elegir todos los tipos de publicaciones y voy a publicar esto. Y cuando lleguemos a editar con oxígeno,
vamos a poder darle estilo a nuestra plantilla, pero como puedes ver, es solo una página en blanco. No tenemos nada. Y me gustaría tener el mismo pie de página y el mismo encabezado que en el caso de nuestra plantilla de post blog. Entonces si no quieres heredar ese diseño de tu previamente creada la plantilla, pero te gustaría usar algunas de las partes de la misma. Esto es lo que podrías hacer. Podrías ir a las plantillas de oxígeno y luego conseguimos esta plantilla aquí mismo, entradas de blog. Y lo voy a editar con oxígeno. Y aquí dentro voy a ir a mi estructura. Y voy a dar click en este encabezado porque quiero reutilizarlo. Y cuando lleguemos a este menú, voy a hacer clic en esta opción make reutilizable. Y voy a llamarlo cabezal soplado. Entonces vamos. Y luego voy a ir a mi pie de página. Este tipo de aquí. Yo voy a hacer esto. Voy a dar click hacer reutilizable. Y voy a llamarlo pie de página de blog y dar clic en Aceptar. Voy a guardarlo porque me gusta decirlo con frecuencia. Y voy a volver a mi panel de administración. Voy a seguir adelante y elegir Plantillas. Y como pueden ver, tenemos estas dos partes reutilizables justo aquí que podríamos añadirla también con oxígeno, pero eso no es lo que queremos hacer. Queremos editar nuestras plantillas de solo post. Voy a golpear editar con oxígeno. Y esta vez voy a elegir Agregar. Y aquí abajo se puede ver esta parte. Y eso dice reutilizable. Si hacemos click en él, conseguimos nuestro pie de página de blog y nuestro encabezado de blog. Voy a dar click en él. Y voy a elegir sencillo ya que, bueno, podríamos usar editable lo cual haría que nuestras partes reutilizables se editaran si quisieras cambiarlo, pero no quiero cambiarlo. Yo solo quiero ponerlo en mi sitio. Y luego voy a entonces voy a añadir otro, pie de página de
bloque y soltero. Y ahí vamos. Nos dieron nuestro post reutilizable. Este pie de página reutilizable, tal vez podríamos cambiar su nombre, vamos a renombrarlo a simplemente Pie de página. No necesito esa parte. Y para el encabezado, voy a renombrar a este tipo también. Y lo voy a llamar cabecera. Y básicamente conseguimos nuestras piezas reutilizables. Entonces conseguimos, tomamos prestado nuestro encabezado y nuestro pie de página de nuestra plantilla anterior. Y esta es solo otra forma de tomar prestadas partes de otras plantillas. Si no quieres basar tu plantilla enteramente en una, en una plantilla que hayas creado anteriormente. Entonces tenemos nuestro encabezado, tenemos nuestro pie de página. Ahora es el momento de añadir realmente bits de
las publicaciones del blog dentro ahora entre nuestro encabezado y nuestro pie de página. Entonces pasemos a eso.
55. 10.7Añade los elementos principales de la publicación principal: Entonces voy a empezar como de costumbre añadiendo una sección. Entonces solo voy a escribir en sección y voy a poner uno justo aquí. Ahora creo que el diseño por el que vamos a ir va
a estar basado como dos columnas de la izquierda, vamos a estar viendo nuestra imagen destacada, nuestro rubro, el impuesto a los metadatos y todas esas cosas que son por lo general para una sola, simple, sola blogposts. Y a la derecha vamos a agregar tal vez como alguna bio de autor, tal vez como las últimas publicaciones o cosas como esas podrían ser algunas etiquetas o categorías. El blog habitual, blog postea cosas. Por lo que en esta sección, voy a añadir columnas. Y vamos tal vez con, déjame pensar omega. Empecemos con sólo dos columnas, como 60-40. Pero tal vez cambiemos el tamaño a tal vez como Arno, 65, 35-40 pensar. O tal vez hasta 67. Mantengámoslo 67. Este tipo será 333. Entonces voy a llamar a este div. Déjame llamar a este tipo como post de blog. Y a la derecha, voy a llamar a este tipo barra lateral. Esta va a ser nuestra barra lateral. Ahí vamos. Entonces antes de empezar a agregar algo aquí, necesitamos entender una cosa. El contenido que vamos a estar agregando aquí
no va a ser como ningún contenido tomado de todas y cada una de las publicaciones del blog. Para que funcione, lo que necesitamos hacer es utilizar los datos dinámicos. Entonces básicamente le estaremos diciendo al oxígeno que solo importe
unos bits específicos de información de la base de datos y que lo haga dinámicamente. Y dependiendo de cuál publiquemos tipo o publicación, queremos previsualizar que el contenido específico será sacado de la base de datos. Entonces lo que podemos hacer es primero, claro, voy a hacer clic en esta capa con la entrada del blog. Y queremos hacer como,
Hey, vamos a hacer como una imagen. Y luego hagamos un título de entrada de blog. Y luego hagamos algunos metadatos y luego bloguear el contenido. Entonces voy a hacer lo que voy a hacer es que voy a buscar una imagen. Y podríamos, por supuesto, no, si quisieras hacerlo estático, solo
podríamos agregar un agregar una imagen. Déjame simplemente guardarlo y refrescarlo porque a veces oxígeno realmente no quiere mostrarme las imágenes. Para que pudiéramos tener una imagen como ésta, pero queremos que sea dinámica. Entonces en lugar de solo hacer clic en el navegador y luego agregar una imagen, solo
voy a deshacerme de ella. Yo me voy a deshacer de él. Y voy a hacer clic en este botón Datos. Y aquí puedes ver que conseguimos esta post opción de imagen destacada aquí mismo. Y si hacemos clic en él, podríamos elegir algunos valores específicos, específicos para nuestro tamaño. Yo sólo voy a pegarle inserto. Voy a salvar esto. Y elijamos previsualizar una de nuestras publicaciones, quizá ésta. Y ahí tienes. Nos dieron una imagen destacada. Si previsualizamos Otra, esa imagen va a cambiar. Por lo que tenemos nuestra imagen destacada. Ahora agreguemos un título. Entonces voy a añadir un encabezamiento. Entonces vamos y entramos aquí, y entraremos a hacer doble clic en este rubro. Y aquí arriba, se puede ver que tenemos este campo de datos de inserción. Por lo que voy a dar click en él. Y este será nuestro título de post. Entonces voy a dar click en eso. Y no queremos vincularlo porque esto ya está en nuestro título de post, así que no queremos enlazar a otro post, algunos se han ido, doy clic en Insertar. Y como pueden ver, ese título se está sacando de nuestra base de datos. Y por supuesto que podemos inculcarlo de la manera que tú, de la forma que queramos. Vamos a agregarle una clase. Entonces llamémoslo post titulo. Ahí vamos. Y tal vez aumentemos un poco el tamaño de la fuente. Algo así como 42. Debería estar bien. 42 va a revisar el cambio de la etiqueta de H1 a H2. Y tal vez vayamos a la tipografía y juguemos con la altura de línea suelen empezar con una. Y entonces probemos 1.1 o tal vez incluso dos a la derecha. Esto debería ser, esto debería estar bien. Y por supuesto, una vez que iniciemos Preview y
nuestros, nuestros posts, se puede ver que este título está cambiando. Está cambiando la imagen destacada. Todo parece como debería. Por supuesto, Tal vez podríamos agregar algo de espacio. Ambulancia humana va con, digamos con diez píxeles de margen o 20 píxeles de margen. Y tal vez hagamos lo mismo para arriba y abajo, porque ahora mismo, Adnan, en la parte inferior, vamos a estar agregando algunos como metadatos Meta, pero empecemos a hacerlo en el siguiente video.
56. 10.8Añade el contenido de la publicación: Entonces voy a agarrar, voy a agarrar algunos, vamos a seguir adelante y sólo usar texto simple. Voy a dar click en eso. Y de nuevo, voy a dar click dentro. Y voy a seguir adelante y elegir Insertar datos. Y elijamos tal vez, tal vez nombre de autor. Hagámoslo así. Voy a insertar eso. Y voy a ahorrar eso. Entonces este es nuestro autor aquí. Pero por supuesto lo que podríamos hacer es que quizá podríamos escribir escrito o publicado por. Vamos a hacer publicado por. Y ahí vamos. Si solo guardamos eso, se
puede ver que sólo se ha sacado de
la base de datos estos datos dinámicos con este es el nombre de mi autor y simplemente podemos agregar cualquier cosa a un lado. Y por supuesto podríamos darle estilo a eso también. Entonces tal vez le voy a añadir una clase. Vamos a llamarlo post meta. Meta. Ahí vamos. Y tal vez cambiemos el tamaño de la fuente es algo así como 12. Y el color del texto, quizá vayamos con algo de color gris claro. Ahí vamos. Y tal vez también podríamos agregar como una fecha a un costado. Entonces yo solo voy a ir solo voy a duplicar a ese tipo. Y de nuevo, haga clic dentro. Y tal vez esta vez tecleemos, esta vez tecleemos algo así como va a ser publicado por tu diseño. Y luego vamos y esta vez, en lugar de esto, en lugar de este autor de datos de oxígeno, elijamos un valor de datos dinámico diferente. Entonces voy a ir a Insertar datos, y vamos a elegir fecha e insertar. Y como pueden ver, esos datos se están reflejando. Reflejado aquí mismo. Creo que tengo un corchete a muchos. Y ahí vamos. Nos jactamos de un el 20 de septiembre de 2020. Pero claro, estos tipos, creo que deberían estar uno al lado del otro. Entonces lo que podríamos hacer es agarrar nuestra primera pieza de texto. Este es nuestro, nuestro nombre de autor. Y voy a dar click en este menú y lo voy a envolver con div. Entonces voy a agarrar mi cita y ponerla dentro de ese div. Y esto, esto nos permitirá grep este div y controlar el posicionamiento de las piezas de información que se están poniendo dentro de ese div. Entonces lo que voy a hacer es elegir elementos secundarios
apilados horizontalmente de mis elementos secundarios de diseño. Cuando hacemos clic en él, se puede ver que esto Y estos chicos van de lado a lado. Y de nuevo, voy a ir a mi clase e ir con espaciado
side1 y tal vez añadir un poco de margen de espacio a la derecha. Y ahí vamos. Tenemos nuestros metadatos aquí mismo. Y ahora lo que es genial de esto es que podríamos agregar diferentes elementos aquí al lado de nuestras, nuestras piezas de datos dinámicos. Por ejemplo, si agarramos nuestro div y elegimos agregar, elijamos un icono. Ahí vamos. Y encontremos un ícono. A lo mejor eso va a ser simplemente como una persona como este tipo. Y hagámoslo más pequeño, como 12 píxeles, puede ser 14, tal vez 16. Y cambiemos el color. Pero realmente no puedo recordar el color de esto que era gris atómico. Entonces vamos a agarrar nuestro icono. Y por el color, vamos con el tiempo. Cree que fue este tipo o tal vez este tipo. Eso es lo que dos, genial. Está bien. No quiero pasar demasiado tiempo eligiendo, eligiendo este color. Sí, creo que es esta uva atómica, atómica. Y voy a mover esto. Vengo todo el camino al frente. Ahí vamos. Y luego me voy a casar, sólo
voy a duplicarlo. Y lo voy a mover aquí abajo, así que está justo aquí. Y luego al lado de este texto de septiembre. Y tal vez sólo voy a deshacerme de este UNO. Texto. Ahí vamos. Y voy a cambiar este ícono. Tratemos de encontrar algo así como un calendario tal vez. A ver si tenemos esto aquí. Tenemos un poco, tenemos algo de tiempo. A lo mejor vamos con este icono del reloj. Ahí vamos. Y tal vez sólo voy a agarrar mi esta pieza de texto. Yo quiero, quiero apuntar a esta clase. Y voy a añadir un poco de espaciado a la izquierda también. Y cuando agarro mi div ahora mismo puedes ver que los, estos, estos iconos y el texto, que no están alineados correctamente, quiero alinearlos con los remitentes. Por lo que cuando elegimos el medio de alineación vertical, se
puede ver que estos iconos aparecen justo en su lugar. Para que podamos, tenemos una flexibilidad completa, completa a la hora de crear nuestra plantilla y en este caso nuestra caja de Metadatos. Por lo que el siguiente paso sería sólo agregar como un contenido real, real. Entonces lo que voy a hacer es añadir texto. Ahí vamos. Y de nuevo, solo voy a hacer doble clic, insertar datos y publicar contenido. Y vamos a salvar esto. Y como pueden ver, mi contenido se está emitiendo directamente, directamente aquí dentro, dentro de oxígeno. Pero claro, es una buena idea ponerlo a donde necesita ir. Entonces no lo voy a poner justo aquí. Y quizá podríamos darle estilo un poco. Por lo que de nuevo, voy a crear un contenido de encuesta de clase. Y quizá agreguemos algo de relleno a este tipo. No demasiado, tal vez como 12 píxeles alrededor. Esto debería estar bien. Y por supuesto, si quieres, puedes cambiar el texto dentro aquí. Puedes peinarlo de la manera que quieras. Pero, ya sabes, eso es, eso va a depender totalmente de ti. Lo que quiero hacer es querer salvar a este tipo, esta plantilla. Y voy a ir a mi página. Y como pueden ver, mi jactancia está siendo amablemente, muy bien exhibida aquí mismo. Y por supuesto, si voy a mi página de blog y hago clic en alguno de estos chicos, esa plantilla está siendo, se está asignando a todos mis, a todos mis posts. Y ya no tengo que preocuparme por peinar más, al
menos en cuanto a agregar mis datos dinámicos, dinámicos. Entonces ahora practiquemos nuestros datos dinámicos. Cuidemos el ciber-cibernético. Añadamos algo de información sobre el propietario del blog. Y agreguemos algunas categorías. Pueden ser algunos últimos posts poco parecidos. Todas esas cosas que podemos hacer con datos dinámicos aquí dentro del oxígeno.
57. 10.9Crea la información del autor: Ahora mismo empecemos a crear nuestra barra lateral y empecemos con agregar algún nodo como una bio, bio inflamación. Entonces voy a añadir una imagen y algún texto al lado. Entonces voy a agarrar unos módulos de imagen. Voy a editar imagen. Ahí vamos. Y voy a navegar por mi mediateca. Déjame, mami, solo voy a elegir esta imagen. Voy a seleccionarlo. Y de nuevo, lo voy a guardar y refrescar mi página. Y vamos a previsualizar algún texto. Y esta imagen es demasiado grande. A ver, tal vez como 75 o tal vez 100. Esto estaría bien. Y lo que quiero hacer es añadir algo de texto a un costado. Entonces voy a añadir el texto. Pero como pueden ver, se ha puesto debajo de nuestra, nuestra imagen. Entonces déjame solo agarrar un poco de Lorem Ipsum. Ahí vamos. Vamos a agarrar algo de ello. Y voy a pegar esa m. Esto debería ser suficiente. A lo mejor vamos justo y un espacio. Entonces, ¿cómo hacer que en realidad este pedazo de texto flote a la derecha? Lo que haría es agarrar esta imagen y la envolvería con un div, poner ese texto dentro de ese div. Y con el silicato div, será esta capa seleccionada, yo sólo elegiría pila elementos secundarios horizontalmente. Y por supuesto Tal vez podríamos agregar algún contenido como el, no
sé, hola, soy Jenny. Vámonos. Hagámoslo así. Y quizá nos gustaría mover un poco este contenido a un lado. Así sería este módulo de texto seleccionado, voy a ir a Tamaño avanzado y espaciado y
voy a agregar algún margen a la izquierda como diez píxeles. Esto debería estar bien. Ahora otra creo, cosa
importante a entender a la hora
de crear piezas de contenido así es que cuando eres entonces
algunos, algún impuesto como dentro de un módulo de texto, todavía
puedes simplemente manipular estilo, sólo una pieza de ese texto sin agregar ningún otro, ningún otro módulo. Entonces por ejemplo, si tengo esto Hola, soy Jenny, pedazo de texto. Este tipo de aquí. Déjame solo tal vez teclear el primer hola, lo soy. Jenny. Lo que podríamos hacer es simplemente seleccionar esa pieza de texto y elegir este componente span. Por lo que ahora mismo cuando vamos a nuestro texto, se
puede ver que tenemos otra capa llamada span. Y lo que podríamos hacer, podríamos simplemente cambiar esa sola pieza de texto mientras estábamos en un módulo de texto más grande. Entonces podríamos hacer, podríamos cambiar el color del texto, podrías cambiar ese texto, tamaño del texto. Déjame ir quizá a la tipografía. Podríamos quizá cambiar de nuevo una altura de línea hacia 1.1. Y quizá podamos transformarlo en mayúsculas Así como eso, lo que haría, lo que nos haría, haría que tamaño de la fuente fuera un poco más pequeño a algo así como 20.
Esto debería estar bien. Y podríamos incluso tal vez agarrar esto, quitar este espacio de párrafo justo aquí. Pero cuando vamos a nuestro lapso, podemos agarrar el tamaño y el espaciado y podemos manipular fácilmente ese tamaño, ese margen entre estas piezas de texto. Entonces, siempre que quieras y simplemente peinar una pieza de texto dentro de un texto, solo
puedes seleccionar esa pieza de texto y usar este componente span aquí mismo. Entonces ahora que tenemos nuestra configuración de bio info, tal vez empecemos a agregar algunos componentes más aquí abajo. Tal vez como algunas últimas publicaciones o categorías, todas esas cosas de barra lateral estándar.
58. 10.10.10Añadir los íconos de redes sociales: Entonces comencemos a completar nuestra barra lateral puede ser el primero con algunos iconos de redes sociales. Al igual que queremos que los usuarios sigan a nuestro autor de blog en plataformas de redes sociales. Pero supongo que sería una buena idea tener algún tipo de rumbo ante nuestros iconos que pudiera decir como sígueme o algo así. Entonces, hagámoslo. Entonces primero voy a añadir un encabezado y voy a cambiar a la etiqueta a tal vez como H3. Y voy a teclear algo como ven sígueme. Ahí vamos. Pero supongo que podría ser una buena idea mantener las cosas bien organizadas. Es decir, para mantener las cosas consistentes, tal vez como este lapso aquí mismo, este rubro podría ser el mismo que éste. Entonces, veamos cómo podríamos hacer eso. Supongo que la mejor idea sería agregar una clase. Pero como ya agregamos algunas opciones, algunos selectores aquí para este lapso y para este ID, tendríamos que normalmente tendríamos que
simplemente cambiar todos estos valores como el tamaño de fuente, altura de
línea, el color de esta mayúsculas, ajustando, todas esas cosas, y luego simplemente agréguelas a una clase. Pero lo que también podríamos hacer es simplemente copiar todos los valores que se asignan a nuestra, a nuestra identificación en este caso, y moverlos. Entonces vamos a ver cómo funcionaría eso. Entonces digamos que queremos cambiar esa fuente a esta pantalla fuente Bree Serif. Y quizá establezcamos la altura de la línea en 1.1. Así. A lo mejor aumentemos el espaciado a como 1010 píxeles. Por lo que ahora mismo, todos nuestros valores están asignados a una identificación. Entonces vamos a crear una clase que se va a llamar como Sidebar Headset, así. Y por supuesto, ahora mismo cuando estamos en esta clase, básicamente no
tenemos valores aplicados asignados a ella. Entonces lo que voy a hacer es que voy a agarrar esto. Voy a abrir este panel aquí mismo y voy a elegir estilos de copia a otro selector. Entonces voy a dar click en eso. Y luego voy a dar clic en este ícono aquí mismo en el encabezado de la barra lateral que dice copiar estilos aquí. Y ahora mismo, todos esos valores se copian a mi, a mi clase. Entonces, entonces ahora lo que podríamos hacer es que podríamos deshacernos de todos estos elementos aquí mismo. Entonces la tipografía, los valores de Tipografía por ejemplo, o el margen. Entonces lo que podríamos hacer es simplemente volver a abrir este panel y elegir Eliminar aceite todos los estilos de este selector. Sí, sí quiero eliminar todos esos estilos porque tengo, los
tengo aplicados a mi clase. Y si solo guardo eso y refresco mi página, se
puede ver que me dieron mi, me dieron mi esta estrella, todos estos estilos, gracias a mi clase, aplicados. A lo mejor sólo voy a cambiar el font-weight dos porque estoy bastante seguro de que este font-weight será más grande que éste. Así que ahora si solo agregamos esa clase de Encabezado Sidebar a nuestra barra lateral, puedes ver que se ha reflejado muy bien aquí mismo. Supongo que quizá podríamos agregar algún espaciado entre estos dos elementos. Entonces solo voy a tirar de este tipo aquí abajo. Y ahora lo que podríamos hacer es añadir los iconos reales de las redes sociales debajo de nuestro rubro. Lo que podríamos hacer es que podríamos agregar sólo un sencillo módulo llamado iconos sociales. Ahí vamos. Pero para ser honesto, no soy el mayor fan de estos iconos aquí mismo. Entonces solo voy a eliminar este módulo y déjame mostrarte una forma diferente de agregar iconos, como, como los iconos sociales aquí mismo. Entonces lo que voy a hacer es que sólo voy a añadir un ícono así. Y déjame solo sacar a este tipo, vamos, tecleemos en Facebook. Este de aquí. Y supongo que en este punto sería una buena idea agregar una clase a nuestro eigen. Entonces me voy a deshacer del tamaño y el color. Y ahora podemos agregar una clase, llamémosla como icono lateral. Y podemos cambiar el tamaño a, vamos a ver, 3-6 espacio distribuido llegado alrededor de icono. Veamos diez. Vamos a cambiar quizá el color a tal vez este color gris. ¿Por qué no? Entonces ahora que tenemos todos estos atributos aplicados a nuestra clase,
cuando acabamos de duplicar este ícono, por supuesto, todos estos elementos serán asignados a ese ícono y todo lo que
tenemos que hacer es cambiar el ícono a, digamos Twitter. A lo mejor éste. Y como puedes ver ese icono es ahora, bueno, tiene todos los mismos valores que nuestro icono anterior. Pero nos gustaría básicamente poder dar click en nuestro eigen. Entonces antes de hacerlo, antes de clonar el mío primer icono, lo
voy a envolver con un enlace. Entonces lo que podríamos hacer cuando todo este ícono esté activo, voy a ir a mi panel Herramientas de ToolPak, y voy a dar clic en esta configuración de enlace. Al hacer clic en él, vas a ver esta opción de inserción de enlace de edición. Y por ahora solo voy a escribir los hashtags y el símbolo,
un símbolo de libra, solo para convertirlo en marcador de posición de enlace. Y voy a dar clic en agregar enlace. Y ahora mismo en mi panel de Capas, puedes ver que tengo este envoltorio de enlace con un ícono para sentarme dentro de él. Déjame previsualizar de nuevo un post normal, normal. Y ahora en realidad podemos duplicar uno, todo
este envoltorio de enlaces y volver a cambiar el icono. Entonces llamémoslo. Vamos a escribir en Twitter, tal vez este ícono. Y por supuesto lo que tenemos que hacer es poner a estos tipos uno al lado del otro, pero ya sabemos cómo hacerlo. Entonces solo voy a envolver este primer envoltorio de enlaces con un div. Y pon esta segunda envoltura de enlace dentro y haz que todos estos elementos hijo se apilicen horizontalmente. Entonces supongo que lo último sería cambiar tal vez el color del icono al pasar el cursor. Y digamos que nos gustaría que el color flotante correspondiera con el color de la marca. Entonces lo que haría es agarrar un ícono y asegurarme de que no estoy en el, en el, en la clase. Y yo seleccionaría el DNI. Y ahora lo que haría es dar clic en esta opción estatal justo aquí que me permitirá imitar como el,
el estilo cuando, por ejemplo, mi icono es hubbard. Entonces si hago clic en esta opción de flotar, si ahora cambiamos este color a más como un camino cuello de Facebook, que sería supongo, una
especie de color azulado. A lo mejor hagamos algo así. Esto debería estar bien? Y ahora si vuelvo a mi estado original, si paso el cursor sobre este ícono, se
puede ver que en realidad es cambio en su, su color. Y podemos hacer lo mismo por nuestro ícono de Twitter. Por lo que de nuevo, un estado de identificación y luego pasar el rato. Y por el color Nicholas, sólo este color azul, supongo que es Twitter como como Twitter y me
pongo, voy a ir al original. Y se puede ver que ese color está cambiando. A lo mejor voy a añadir, voy a seleccionar un icono y seleccionar la clase. Puede ser escogeré algo así como un margen la derecha y parpadearé diez píxeles, o tal vez cinco. Esto debería ser suficiente. Y básicamente, todo lo que tendríamos que hacer en este momento es simplemente duplicar nuestro envoltorio de enlaces. Y quizá una vez más. Duplicado. Y cambiemos este ícono a tal vez como Instagram. Ahí vamos. Y el último ícono, quizá
cambiémoslo a YouTube. A lo mejor este ícono. Y por supuesto, menos que olvidar que tenemos copiado este estado flotante. Entonces para el color de YouTube, cambiemos el color del flotante. A lo mejor este color rojo, y nada, o tal vez este color rojo. Y para el ícono de Instagram, cambiemos el color flotante de este azul a tal vez en realidad este, tal vez este color rosa como ese. Por lo que ahora siempre que un usuario se cierne sobre nuestros iconos, que las personas que llaman que van a más o menos representan reales corresponden los colores de la marca de las todas estas redes sociales, las plataformas de redes sociales. Y por supuesto, si quieres, puedes jugar con el tamaño de todos estos iconos. Pueden ser más pequeños. No obstante, al igual, el margen puede ser más grande, como quizá 15. Eso sólo va a ser totalmente, totalmente a ti quién? Debido a que agregamos una clase a nuestros iconos, se
puede controlar de manera fácil, muy fácil. Y básicamente todos los, todos los aspectos de nuestro, de nuestros artículos. Entonces ahora quizá podríamos pasar a añadir como algunos saben últimos posts aquí debajo del Sígueme y tal vez un icono de búsqueda encima de él. Entonces pasemos a eso.
59. 10.1111 publicaciones más recientes: Ahora tal vez agreguemos un formulario de búsqueda antes de añadir nuestras últimas publicaciones. Entonces eso es tan fácil como hacer clic en Agregar y luego buscar formulario que vamos. Y como puedes ver, tenemos algunas opciones básicas, básicas, realmente básicas que puedes establecer para tu cuadro de búsqueda. Voy a cambiar el botón de enviar a partir de esto. Este muy oscuro, oscuro, gris
oscuro, Tal vez algo más claro como mi Gris. A lo mejor éste o tal vez éste. Y tal vez vamos a añadir un poco de espaciado por vida autonómica como 25. O tal vez eso es un poco demasiado como 15 a la parte superior y la inferior. Ahora podríamos simplemente duplicar nuestro rubro. Duplicemos a este tipo y lo pongamos debajo de nuestra firma de búsqueda. Y llamémoslo más reciente. Y voy a salvar a este tipo. Por supuesto, si quisieras, quizás
podrías agarrar el formulario de búsqueda y traerlo aquí abajo, o tal vez simplemente duplicar este encabezado y luego tal vez mover este formulario de búsqueda y llamar a este sitio de búsqueda de tipos. Eso va a ser totalmente, totalmente a ti. Entonces ahora en realidad es el momento de agregar esas últimas publicaciones. Entonces lo que voy a hacer es añadir mi módulo de publicaciones fáciles. Y sería buena idea moverlo bajo mi rumbo. Y como puedes ver por defecto, se ve más o menos así. Si salvamos a este tipo, esto es lo que básicamente se ve. Entonces lo que podemos hacer es agarrar nuestro módulo de post fácil. Y quizá vayamos primero a nuestra consulta. Y en lugar de la opción predeterminada, usemos una consulta personalizada. Y lo que quiero hacer es querer cambiar el orden. Yo quiero pedirlo por fecha, y quiero hacerlo descendiente. Por lo que mis últimas publicaciones se están mostrando como las primeras. Y voy a cambiar el conteo a, digamos tal vez sólo los repos. No quiero tener más de tres posts se están mostrando en mi módulo de publicaciones más recientes. Entonces si guardamos eso, se puede ver que en realidad tenemos tres puestos se están ordenando muy bien, pero están mirando horriblemente, horriblemente mal. Entonces cambiemos eso. Voy a ir de nuevo a mis posts fáciles y voy a ir a mis presets. Y elijamos una lista con tal vez como una imagen de la izquierda. Y salvemos a este tipo. Y tal vez cambiemos también el título, psi font-size a tal vez como 18, y cambiemos el color a mi color más oscuro como este. Y yo sólo lo voy a guardar. Ahora, cuando acabamos de refrescar nuestra página, tenemos aquí nuestras cuentas de que
debes recordar que cada vez que cambies tu preset aquí abajo, esa consulta del cliente podría perderse. Por lo que solo necesitarás rehacer todo el proceso. De nuevo, no funciona así cuando simplemente cambias los estilos, pero cuando cambias todo el preset, eso podría cambiar. Ahora lo que podríamos hacer es que nos gusten el cambio o los extractos, como pueden ver, como este extracto es demasiado grande. Entonces sólo voy a cambiar eso. Y vamos a ir a mis puestos. Y a mi, a mi puesto. Sólo voy a agregarlo este tipo y escuchar de mi parte de un extracto. Yo sólo voy a elegir, cortar a esos tipos, eliminar estos, enfrentarlos de nuevo. Y cuando volvemos a nuestra página, se
puede ver que dispuesto se ve mucho, mucho más bonito. No obstante, creo que podríamos querer deshacernos de algunos de estos elementos. Por ejemplo, no creo que necesitemos este nombre de autor. No creo que necesitemos este botón Read More. Entonces, ¿cómo podríamos hacer eso? A lo mejor podríamos incluso deshacernos del extracto experto completo y luego simplemente dejar el botón leer más. Tenemos total flexibilidad a la hora de cambiar estos aspectos. Pero tenemos que gustarnos, no como codificados o células, sino que solo quitamos algunas piezas que son muy, muy lógicas y no hay nada que temer. Entonces empecemos a hacer eso en el siguiente video.
60. 10.12Cambia la estructura para ajustar las últimas publicaciones: Entonces lo que tenemos que hacer es simplemente agarrar nuestros postes fáciles. Y que cuando vamos a plantillas, conseguimos esta opción de PHP de plantilla. Ya echamos un vistazo rápido a la plantilla CSS, y ahora echemos un vistazo a la plantilla PHP. Ahora aquí tenemos algunos básicamente algunos fragmentos de código que básicamente cuentan esto,
bueno, esta publicación este módulo de póster fácil para agarrar algo de información de la base de datos. Pero como dije, realmente no necesitamos algunos de estos elementos. Al igual, digamos que déjame solo echar un vistazo a nuestro, Digamos que no necesitamos a este autor. A medida que deshazte de eso. Dejemos tal vez el título y el enlace Read More. Entonces vamos a deshacernos del autor y deshacernos de este texto aquí mismo. Entonces nosotros, en nuestro caso, queremos deshacernos del meta y de este extracto aquí mismo. Entonces cuando echamos un vistazo a este código, podemos ver que aquí obtenemos algunas etiquetas bastante autoexplicativas. Entonces conseguimos este título, no queremos tocar el título. Después nos dieron el meta y sí queremos tocar el Metta. Entonces conseguimos algún autor con respecto a la hora en que nos dieron el extracto y contenido aquí mismo. Entonces no necesitamos todos estos elementos, pero sí necesitamos la clase inicial de OK, supongamos rap, este es un div que está envolviendo todos estos elementos. Entonces solo voy a seguir adelante y quitar este div que empieza con oxy post meta. Y voy a ir todo el camino hacia abajo hasta que me deshaga de este extracto y este div de cierre justo aquí. Si acabo de cortar a estos tipos y voy a aplicar el código, puedes ver que todo lo que tenemos es solo nuestro título y nuestro botón Read More. Entonces si solo salvo a este tipo y luego vuelvo a nuestro sitio, se
puede ver que tenemos y este tipo de un, este tipo de efecto como este. Y creo que se ve, se ve mucho mejor. Por supuesto, todavía nos podría gustar arreglar el espaciado entre estos elementos y tal vez podríamos agregar algún margen debajo de nuestro, nuestro título. Pero eso es lo que tenemos que hacer eso en la plantilla CSS. Entonces conseguimos este post de oxy aquí mismo. Entonces cambiemos este valor de fondo del margen a algo así como intentemos 35 píxeles. Y yo sólo voy a aplicar el código, guárdalo. Y veamos los cambios. puede ver que es ahora, bueno, estos posts están mucho,
mucho más cerca el uno del otro. Así que ahora solo quizás agreguemos algo de espaciado entre el título y el enlace Read More. Entonces tratemos de encontrar nuestro título. Es este tipo de aquí. Entonces si no quieres codificar nada tú mismo, solo
puedes seleccionar este icono inferior del margen. Voy a presionar Control C. Y luego vamos a bajar aquí, presionar enter, quiere agregar esa línea de código antes de este corchete de cierre. Y voy a aplicar el código y vamos a ver qué hace. Entonces tal vez eso sea un poco demasiado. Entonces tal vez cambiemos eso por algo un poco. Al igual que, no lo sé, tal vez como diez píxeles. Entonces hagámoslo. Hagamos sólo diez píxeles. Miente el código. Voy a guardarlo y refrescar la página. Esto se ve mucho, mucho mejor. Y por supuesto, si hacemos click en él, nos van a poner a nuestro, vamos a poder ver nuestro post porque todo funciona como debería, porque este es nuestro, este es nuestro presume fácil, fácil tanto a modulo que, eso es trabajar con nuestra plantilla de Single Post. Ahora, tal vez cuando lo estoy viendo, soy, soy cosa que quizá hagamos algunas,
algunas cosas sobre estos encabezamientos. Creo que podrían tener algo más de espacio en la parte inferior. Pero siempre que hagas cambios como estos, como estos pesados cambios a tus plantillas, como plantillas de post fáciles, sería una buena idea guardar tu plantilla. Llamémoslo hormona de barra lateral. Llamémoslo últimas publicaciones. Y salvemos a este tipo. Y oh, sólo para asegurarnos de que si
estropeamos algo, aún podemos volver a donde estábamos antes. Entonces tal vez solo aumentemos el tamaño entre estos elementos. Como pueden ver, tenemos esta clase justo aquí. Entonces veamos qué podemos hacer en cuanto al margen inferior. Veamos como 25 pixels. Eso podría ser un poco mejor, pero sigo pensando que no es suficiente. Entonces tal vez hagamos sólo algunos cambios sencillos y sencillos. Como vamos a agarrar este div y tal vez Perrin, este tipo abajo, y tal vez este tipo abajo un poco a algún lugar de aquí. Lo mismo para este elemento. Puede ser sólo un poco más. Déjame sólo agarrar este div. Y de nuevo en un poco más de espaciado. Y ahora veamos cómo se ve en nuestra página cuando refrescamos esto. Yo libro, creo que se ve un poco mejor. Por supuesto otra vez, podríamos jugar todo el día con el estilo, pero
es, es más importante aprender cómo funcionan todos estos elementos porque es mucho, es mucho para tomar en una sola vez. Necesitas realmente simplemente hacer clic y comprobar
y cometer un montón de errores solo para aprender realmente cómo funciona todo realmente, cómo funciona todo realmente, y para encontrar lo mejor para el flujo de trabajo. Pero aquí dentro del oxígeno y realmente puedes, ya sabes, si quieres ser total flexibilidad y libertad en ellos,
en cuanto a diseñar y hacer que las cosas funcionen como te gustaría que funcionaran. Bueno, tienes eso aquí mismo. Por lo que nos dieron las últimas jactancias. lo mejor podríamos ahora agregar algunas categorías a continuación o etiquetas, ya
sabes, cosas como, como cosas de barra lateral estándar.
61. 10.13Añadir el módulo de las categorías: Muy bien, así que tenemos nuestras últimas publicaciones aquí mismo. Por lo que ahora como se mencionó antes, agreguemos esa categoría. Entonces cuando vamos a nuestro panel de WordPress y luego widgets, ahora aquí puedes encontrar este módulo de categorías. Pero cuando vamos a decir avanzada y luego topografía, y por ejemplo, se quiere cambiar el color. Se puede ver que sólo los puntos de bala cambian de color. Y entonces estos tipos no lo hacen porque son enlaces y necesitan ser cambiados. Y en otros lugares. Es decir, si vamos a nuestra configuración administrada y luego cuando vamos a estilos globales, estilos globales. Y luego cuando vayas a enlaces. Y luego todo aquí,
cuando en realidad empezamos a cambiar esto, bueno, el color de estos enlaces, van a cambiar aquí mismo. Pero ¿sabes qué? Hay algunas cosas que puedes hacer al respecto. Por ejemplo, puedes hacer como cambiar la declaración si quisieras, si quisieras subrayar tu texto, podríamos cambiar el color del enlace al pasar el cursor, pero será difícil, por ejemplo, cambiar estas categorías. Will styling, porque es un, es un widget de Wordpress. Para mí, es demasiada molestia. A mí me gustaría facilitarlo y me gustaría usar lo que ofrece el oxígeno. Entonces por ahora, voy a dejar este módulo aquí mismo, pero sólo porque necesito los enlaces que se adjuntan a estos serán las URL que se adjuntan a estos enlaces. Entonces si solo hago clic en todos y cada uno de ellos y luego paso a los sellos abiertos. Se puede ver que tenemos el contenido, pero no tenemos el estilo aquí mismo y vamos a arreglar eso en tan solo un segundo sobre lo que necesitamos de estas páginas es la URL. Lo vamos a estar usando en tan solo un segundo cuando empecemos a diseñar nuestro propio módulo de categorías. Pero por ahora, nos gustaría agregar una plantilla a nuestra categoría para que no se vean como nuestra página de entrada de blog. Entonces en orden, para poder hacer eso, solo
voy a seguir adelante y dar clic en esta bolsa a trabajadores y botón y luego elegir Admin. Y aquí dentro voy a elegir una plantilla diferente a, una plantilla diferente para editar. Y va a ser nuestra plantilla de blogposts. Y en esta parte, ¿dónde se aplica esta plantilla? Voy a elegir archivo, y voy a elegir taxonomías, todas las categorías. Si no tenemos eso, puedes elegir una categoría específica. Por lo que si quieres elegir una plantilla diferente para una categoría específica, puedes hacerlo. Pero en nuestro caso, quiero tener sólo mantener mi diseño consistente. Yo quiero tener el mismo, mismo, mismo look en categoría, mismo look layout para todas mis categorías. Por lo que cuando elegimos todas las categorías y
actualizamos nuestra plantilla, podemos cerrarla. Y luego cuando actualicemos la página, se
puede ver que nuestra plantilla está siendo asignada a nuestras categorías. Y ahora se ve como debería. Entonces como dije antes, vamos a estar usando estas URL aquí mismo cuando empecemos a crear nuestro propio módulo de categorías, categorías propias. Entonces, en realidad pasemos a eso.
62. 10.14Estilo las categorías: No creo que vamos a estar necesitando más este módulo. Tenemos, nos van a sacar nuestros enlaces de estas URLs. Por lo que de las páginas de LOS. Entonces solo voy a quitar este módulo. Entonces en lugar de nuestro módulo de categorías, lo que voy a hacer es añadir un módulo de enlace de texto. Por lo que solo voy a escribir texto y luego elegir Enlace de texto. Y este va a ser nuestro diseño de sprint. Creo que este es nuestro primer enlace aquí mismo. Entonces si ahora solo copio esta URL, voy a pegar esa URL aquí mismo. Y a medida que
voy, sólo voy a agregarle una clase. Por lo que va a ser categoría de barra lateral. Ahí vamos. Por lo que ahora realmente podemos darle estilo a nuestro diseñador impreso lo hará esta primera categoría. Pero si solo lo guardamos y déjame solo mostrarte que en realidad funciona. Si hacemos clic en nuestro enlace de diseño de impresión, se
puede ver que estamos siendo redirigidos a nuestra página con todo nuestro diseño de impresión, de blog de categoría. Entonces esto es lo que tenemos que hacer por todos esos enlaces. Pero primero necesitamos darle estilo. Entonces digamos que
primero voy a ir a mi tipografía y voy a tratar de cambiar el color a este tipo. Puede ser, vamos a capitalizar nuestro enlace. A lo mejor vamos a sumar en, vamos a añadir algo de relleno. Entonces voy a ir a, ir al tamaño y el espaciado. Y para el Relleno, voy a ir tal vez como ocho píxeles arriba y abajo. Ahí vamos. Y quizá volvamos al tamaño y al espaciado otra vez. Y cambiemos el ancho al 100%. Porque lo que quiero hacer es añadir un borde muy bonito aquí en la parte inferior allá que se extenderá por toda la barra lateral. Entonces para eso, voy a ir a Borders y voy a elegir la frontera inferior. Voy a ir con el color gris oscuro. A lo mejor este tipo de aquí, y quiero que sea un píxel y sólido. Entonces si ahora refrescas esa página, guardará esa página. Y vayamos a nuestro solo post. Entonces esta es nuestra primera, esta es nuestra primera categoría. Y tal vez hagamos también algunos,
algunos como efectos que se cierren. Entonces voy a ir a rondar y voy a cambiar el color a blanco, negro más oscuro. Ahí vamos. Un píxel y luego sólido. Y ahora si vas a nuestro solo post, ahí vamos. Se puede ver que cuando pasamos por encima de esta frontera, es un efecto extremadamente sutil, pero está ahí. Entonces cuando pasamos sobre el, esta categoría, esa frontera cambia un poco. Entonces ahora todo lo que realmente tienes que hacer es simplemente duplicar nuestro enlace de texto Eso va a entrar en nuestro diseñador web. Entonces voy a copiar esta dirección, agarrar esta pieza de esta categoría. Voy a pegar ese enlace. Y voy a teclear en diseño web. Entonces voy a duplicar a este tipo una vez más. Y con branding, voy a copiar a este tipo. Y voy a teclear en branding. Y por supuesto, necesito cambiar la URL aquí mismo. Y el último tipo es nuestro pozo, diseño, llano y sencillo. Entonces otra vez, pegue ese enlace y cambie el impuesto para diseñar y salvar a ese chico. Y si ahora de nuevo vas a nuestro solo presume, refresca la página. Tenemos todas nuestras todas nuestras categorías listadas justo aquí. Y por supuesto, si hacemos click en una, se
puede ver que todas estas categorías son muy bien, muy bien funcionan. Y por supuesto puedes darle estilo a estos enlaces de la manera que quieras. Depende totalmente de ti. Por ejemplo, podríamos tal vez también por el efecto hover, podríamos cambiar como el color de nuestra, de nuestras categorías. Y también podríamos animarlos tal vez solo un poquito solo para mostrar algún movimiento en nuestra página. Y también sobre todo, para que puedas aprender lo fácil que es agregar algunas transiciones agradables en puerto aquí dentro del oxígeno. Entonces pasemos a eso.
63. 10.15Añade las transiciones de triunfo: Agregar transiciones aquí dentro del oxígeno es, es extremadamente, extremadamente simple. Lo que tengo que hacer primero es que me voy a asegurar que tenga mi clase activa y que tenga seleccionado mi estado de hover. Y luego cuando vayamos a avanzado, digamos que queremos cambiar el color del enlace. Entonces digamos que en un hover, quiero ver un color diferente. Digamos que me voy a ir con este marrón medio en hover. Y lo que quiero hacer es que quiero, no
quiero que sea como un cambio llano y sencillo en el color de la tipografía, quiero hacerlo más suave. Entonces lo que voy a hacer es ir a efectos. Entonces voy a ir a la transición. Y todo lo que realmente necesitamos hacer aquí es fijar la duración de la transición. Si voy a ponerlo como 1 segundo, eso va a ser extremadamente largo, pero definitivamente vas a poder ver ese cambio. Entonces solo voy a salvar mi, mi diseño. Voy a ir a mi solo puesto. Y si pasas por encima de nuestros enlaces, puedes ver que están cambiando muy, muy lentamente eso, ese color. Y creo que es un poco demasiado largo. Entonces voy a ir a algo así como 0.3 segundos. Y tal vez solo para que todo este efecto sea un poco más distinto, si quieres, quizá vaya a tipografía y digamos que en el hover, queremos, digamos que queremos cambiar el peso de la fuente. Entonces vayamos con como, no
sé, 600 tal vez. Y vamos a guardar eso y refrescar mi página. Y se puede ver que ahora mismo que los cambios también se
tomaron, tomados f, Por supuesto que es sólo una opción. Eso se puede hacer. Se trata más de aprender la técnica, se trata más de aprender las herramientas, cómo hacerlo. Y como puedes ver aquí dentro de oxígeno en transiciones es un hematoma es
realmente, realmente, realmente fácil terminar como en general, como una regla de pulgar al agregar transición es que es mantenerlos rápidos porque nadie quiere esperar para cargas de transiciones largas y C y una especie de retroalimentación para que las transiciones sean mejores cuando sean rápidas y no les guste pesadas. Al igual que en este caso, creo que si
solo cambiamos el color sin cambiar el font-weight, Eso sería aún mejor. Entonces lo que voy a hacer es en realidad voy a quitar ese cambio de peso de la fuente. Voy a cambiar, voy a dejar ese color cambia por el bien de divertirme con nuestras categorías. Y básicamente terminamos con nuestra barra lateral. O sea, lo que podríamos hacer es que podríamos agregar lo mismo para nuestras etiquetas. Pero el proceso sería, sería similar, bueno, sería básicamente el mismo. Todo lo que necesitábamos hacer es simplemente agregar los enlaces, enlaces
adecuados, y luego darles estilo. Y eso es básicamente todo. Entonces el último paso aquí serían dos, supongo, añadir un cuadro de comentarios aquí en la parte inferior si quieres permitir comentarios en tus entradas de blog. Pero se puede hacer eso aquí dentro del oxígeno. Entonces hagámoslo a continuación.
64. 10.16Añadir los comentarios: Si quieres permitir comentarios para tu,
para tus publicaciones, puedes hacer eso aquí dentro de agosto no es del todo fácil. Entonces lo que voy a hacer es asegurarme de que estoy en las columnas correctas. Entonces este tipo de aquí, y voy a empezar a escribir, tal vez vayamos a nuestro árbol principal. Voy a empezar a escribir comentarios para que podamos añadir un comentario, listas comunes. Entonces si quieres mostrar primero los comentarios, y luego podemos agregar un formulario de commons. Entonces si solo hago clic en lista de comentarios y luego en formulario de comentarios, se
puede ver que estos módulos se están agregando a nuestro, a nuestro blog publicar una plantilla. No obstante, no podemos ver ninguna lista aquí, ninguna, ninguna común porque esta esta en concreto se inclina, no
creo que tenga ningún comentario. Entonces arreglemos eso rápidamente. Voy a ir a mi, a mi puesto. Voy a encontrar esos posts. Creo que este es este tipo, así que lo voy a ver. Entonces esta es nuestra, esta es nuestra página. Vamos a escribir algo así como, no
sé si esto es un comentario y voy a dar click post comment. Y ahí vamos. Ahora nos dieron nuestro comentario agregado a mi, a mi página y a mi post. Entonces eso es, eso es realmente, realmente fácil aquí dentro del oxígeno. Y por supuesto tenemos algunas opciones de estilo aquí también. Déjame refrescar la página y vamos a previsualizar ese alarde. Entonces ahí vamos. Aquí está nuestro reccomendo, aquí está nuestra respuesta. Y por supuesto, si nosotros, si solo vamos a nuestro post y dejame solo tal vez agarrar este post y abrirlo en nuestro modo de incógnito para que veas cómo se ve. Cuando el usuario no está conectado. Aquí vas a conseguir como tu nombre, correo electrónico y campos de sitio web que tienes que rellenar para poder, para realmente publicar un comentario. Entonces volvamos a nuestro diseño. Ahí vamos. Por lo que respecta a nuestra lista de comentarios, tenemos algunos presets, no demasiados obtienen nuestro preset predeterminado es este tipo de aquí. Y podemos cambiarlo y cambiarlo a este resaltado gris o bloques blancos. Y en lo que va este formulario de comentarios de dejar respuesta, podemos cambiar el color de fondo del botón. Podemos cambiar el color del borde. Entonces tal vez solo para mantener nuestro diseño consistente, hagámoslo. No voy a tocar el radio del borde, pero voy a cambiar el color de fondo de nuestro botón a tal vez sean de color marrón, color del texto tal vez a nuestro color gris. Ahí vamos. Entonces veamos cómo se va a ver en nuestro front end. Vamos a refrescar esa página. Y este es nuestro cuadro de comentarios y este es nuestro dejar una respuesta, el módulo aquí dentro, dentro de oxígeno. Entonces, en definitiva, bonita, bastante fácil. Si quisieras cambiar como más aspectos de esto, de estos módulos, me temo que tendrías que cavar en la codificación. Pero las posibilidades también son que le gustaría usar un uso un plug-in para comentarios como sociales, tal vez que alguien tendría que iniciar sesión en Facebook o cualquier otra plataforma de redes sociales para publicar comentarios en su, en sus entradas de blog. Y eso por supuesto suponiendo que quieres agregar, que quieres permitir comentarios en tu, en tu entrada de blog. Entonces voy a dejarlo tal como está. Creo que eso se ve bien. Entonces básicamente conseguimos crear nuestra página de entrada de blog. Por lo que ahora podríamos pasar tal vez a nuestras páginas de portafolio. Entonces digamos que queremos presumir de nuestras habilidades o que nuestro cliente quiere presumir de sus proyectos. Entonces veamos cómo podemos hacer eso aquí dentro del oxígeno.
65. 11.1primero necesitamos algunos preparativos primero: Por lo que ahora pasemos a crear en nuestro portafolio. Pero han decidido que tal vez podríamos llevarlo a un nivel arriba. Es decir, podríamos agregar un portafolio sencillo como una galería a nuestro diseñador anterior. Pero pensé que, ya sabes, en tu carrera de diseño,
tu carrera de desarrollo, podrías querer crear como un sitio web de portafolio más elaborado. O tal vez quieras crear un sitio web de portafolio para tus clientes. Entonces es, no, es esencial aprender
algunas técnicas de diseño más a la hora de crear carteras y páginas de portafolios. Entonces pensé que podríamos crear un diseño completamente nuevo, un completamente nuevo y el nuevo sitio web que básicamente será, lo
hará, nos permitirá aprender nuevas técnicas de maquetación. Por lo que he decidido crear una página completamente nueva a la que llamé sólo cartera. Bueno, Nuevo Sitio Nuevo. Y he añadido algunas páginas, 1-2-3, apenas cuatro páginas. Y también tengo una instalación de oxígeno fresco con, sin ningún tipo de plantillas aquí mismo. Entonces lo que quiero hacer es crear un descenso. A lo mejor te voy a mostrar lo que quería. Digamos que esta es nuestra portada. Y lo que quiero tener es que quiero tener un encabezado, pero un encabezado ahí se va a poner a un lado. Y aquí dentro, lo que quiero tener es que solo quería tener un logo sencillo. Entonces déjame solo crear un logotipo como este. Entonces me gustaría tener como un menú aquí abajo y tal vez alguna,
alguna información de copyright aquí abajo, aquí abajo. Y todo se podría poner al centro en algún lugar aquí o arriba. Aprenderemos ambas técnicas. Y luego lo que quiero hacer, déjame simplemente ir a como starker, tecleemos como paisaje. Entonces lo que quiero hacer es que quiero crear un slider. Y déjenme ponerlo en la parte posterior. Yo quiero crear un slider, pero quiero esto, quiero que este slider sea como poner debajo, tal vez no 200 botón, 2 mil. Quiero que este deslizador se PUTE debajo de mi, debajo de mi, este pozo hace cabecera como encabezados barra lateral. Pero quiero que esta barra lateral sea, quería ser transparente. Entonces sólo voy a agarrar este rectángulo. Al igual que él semitransparente, algo así. Y quiero tener múltiples imágenes como en el fondo, pero quiero esas imágenes y para cambiar, quería hacerlo como un deslizador simple, simple. Entonces este va a ser nuestro primer delgado, nuestro primer orden del día. Y luego cuando creemos eso, Lo que quiero hacer es que quiero crear una página de portafolio. Quiero crear una plantilla de portafolio que albergara algunas imágenes y algún texto, un título solo para que podamos mostrar,
mostrar en realidad nuestro, nuestro portafolio a nuestros clientes. Entonces empecemos con la creación de nuestra primera plantilla que va a ser, será esta real, en realidad la plantilla de portada. Entonces empecemos a hacer eso a continuación.
66. 11.2Crea la plantilla de la página principal: Entonces estoy aquí mismo dentro de oxígeno y voy a añadir una nueva plantilla, esta ciudad plantilla. Será nuestra plantilla principal. Entonces voy a llamarlo así. Y lo voy a aplicar a todas mis páginas. Pongámoslo así. Y voy a golpear publicar. Entonces voy a editar, editado con oxígeno. Y escribiremos aquí dentro de nuestra plantilla con mi lienzo en blanco favorito personal. No lo sé. Me gusta mucho soplar en Poseidon y Así que lo que quiero hacer es crear como un encabezado a la izquierda, como un encabezado y una barra lateral y algunos,
algunos textos de soldadura de tachuelas un deslizador debajo de ese encabezado. Entonces lo que voy a hacer es, como de costumbre, sólo
voy a crear una sección sencilla. Y esa sección se supone que es una sección de ancho completo. Entonces voy a ir a tamaño avanzado y espaciado. Y aquí abajo tengo el contenedor de sección con opción, que voy a establecer a ancho completo. Y como pueden ver, nuestra sección ahora mismo se está extendiendo por toda nuestra página. Y no quiero que esta sección tenga ningún relleno en absoluto. Quiero que todos estos valores se establezcan en 0. Voy a salvar esto. Entonces lo que necesito en este momento es que realmente necesito div. Entonces un div que va a estar a la izquierda que albergaría nuestros elementos de cabecera. Y luego un, otro div que albergará nuestras imágenes de fondo. Entonces solo voy a agregar mi primer div. Y tal vez llamémoslo algo así como, vamos a renombrarlo. Vamos a llamarlo un encabezado. Ahí vamos. Y luego voy a añadir otro div, y voy a llamarlo, vamos a llamarlo slider. Ahí vamos. Entonces este es nuestro encabezado y este es nuestro deslizador. Pero como se puede ver, se están poniendo uno encima del otro. Y eso se debe a que nuestra sección por defecto está apilando elementos hijos verticalmente. Entonces vamos a apilar horizontalmente. Y voy a agarrar mi cabezazo. Y digamos que yo quería ser algo así como, vamos a ver, 20% de ancho. Y luego voy a agarrar el deslizador. Y por ahora sólo voy a ponerlo al 80%, sólo para que veas lo que estamos haciendo aquí. Entonces nos dieron nuestro primer DEF, nuestro encabezado, y luego nos dieron nuestro slider, slider div. Entonces como mencioné antes, quiero esto,
este encabezado, esta barra lateral de encabezado. Yo quería ser como semitransparente. Entonces voy a ir a Avanzado. Voy a ir al fondo, agarrar el color de fondo. Yo lo voy a hacer negro, pero voy a bajar la opacidad siempre tan ligeramente a tal vez algo así como, vamos a ver, 66 sólo por ahora. Y ahora, si voy a otra vez tamaño avanzado y espaciado y agarré la opción de altura, ponlo en 100 v h Como ya sabemos, nuestro encabezado se está extendiendo de arriba a abajo. Y si hacemos lo mismo por nuestro slider, así que voy a ir a fondo avanzado. Voy a ir con color de fondo por ahora, solo para que lo veas. Y luego voy a agarrar este tamaño y espaciado a los mismos 100 vh. Se puede ver que ambas de mis secciones se están extendiendo y extendiendo de arriba a abajo. Y esta sección principal se está extendiendo de izquierda a derecha. Pero claro que queremos que este deslizador vaya por debajo de nuestro encabezado, pero eso es algo que vamos a hacer más adelante. Por ahora, solo empecemos a poblar nuestro, nuestro encabezado con alguna información. Entonces vamos a añadir un logotipo, vamos a añadir algunos como un menú. Y luego agreguemos algo de información de pie de página aquí abajo. Entonces empecemos a hacer eso a continuación.
67. 11.3Añadir los elementos de encabezado: Entonces a nuestro encabezado, tenemos que añadir un logotipo, un menú, y luego alguna información de pie de página aquí abajo. Entonces voy a empezar con el logo. Entonces voy a dar clic en agregar, y voy a escribir en encabezamiento. Llamemos a esto. Estoy tratando de hacer como un blog de fotografía, portafolio de fotografía top. Entonces solo lo voy a llamar por cuota de crecimiento superior. Ahí vamos. Y tal vez sólo voy a añadir un icono como tal vez,
tal vez no como al lado pero encima de este rubro. Entonces solo voy a dar clic en agregar, y voy a simplemente escribir icono. Ahí vamos. Y por supuesto I1, este ícono para estar encima. Ahí vamos. Por lo que no tengo ningún juego de colores como específicos para esto, para este blog, para este portafolio o un sitio web. Entonces sólo voy a agarrar algunos mi, algunos de mis colores favoritos como voy a ir con F9 o un destino fatal de ocho para este. Y supongo que podemos agregarla. Voy a llamarlo como es. Por lo que F9, F9, F9. Y luego nos vamos y luego voy a agarrar tal vez primero sólo vamos a disminuir el tamaño a algo así como 32. Y entonces cambiemos esto a, probemos con cámara. A lo mejor esta cámara retro. Ahí vamos. Y para la fotografía, voy a cambiar el color. Y voy a tratar de encontrar una fuente bonita y bonita. Entonces supongo que quizá podríamos ir a fundar Google Fonts para encontrar una bonita fuente. O podríamos simplemente ir con lo que ya sabemos, como Bree Serif, esto se verá bien. Y tal vez sólo voy a tratar de llegar a un peso de fuente más agradable. A lo mejor esto es un poco demasiado grande. Esto debería ser, esto debería estar bien. Entonces por supuesto lo que me gustaría hacer es poner a estos tipos al centro de mi cabecera. Y eso es súper fácil. Simplemente voy a agarrar mi encabezado y voy
a alinear horizontalmente todos estos elementos. Y voy a ir a Tamaño avanzado y espaciado. Y le voy a agregar algo de relleno, como tal vez 50 píxeles de arriba, puede estar en la parte inferior y tal vez como 25 a la izquierda y 25 a la derecha. Por supuesto que podríamos, si
quisiéramos, podríamos jugar con el tamaño de nuestro rumbo también. A lo mejor hacer un más grande, puede hacerlo nodos más pequeños van a estar totalmente a tu altura. Lo que quiero hacer es mostrarte,
quiero que aprendas a jugar con las opciones de diseño a la hora de crear esos sitios web estándar. Porque nos gustaría en un, como un encabezado en la parte superior, poner un logo en el lado izquierdo, menú a la derecha. Pero eso es un poco aburrido. Y quiero decir, queremos, queremos hacer algo extra por nuestro fotógrafo. Entonces una vez que
conseguimos el logotipo, quizás podríamos incluso envolverlo con un div y llamarlo logo. Es decir, esa sería una buena práctica organizacional. Pero sólo voy a añadir ahora un menú. Voy a seguir adelante y elegir el menú pro. Y como pueden ver, este es mi único menú, por lo que se ha agregado instantáneamente. Y lo que quiero hacer es que quiero cambiar muchas cosas realmente sobre esto. Ahora este menú. Entonces voy a ir al menú de escritorio. Y para la orientación, quiero cambiar a vertical. Ahí vamos. Para la tipografía, supongo que podríamos ir con algo sencillo como quizá loto. Vamos con eso. Yo sí quiero cambiar el color, pero tal vez esta vez cambiémoslo a algo como un poco más de aspecto grisáceo. A lo mejor que lo voy a agregar a mi, a mis colores globales. Y lo voy a llamar gris oscuro. Ahí vamos. Y déjame sólo puede ser capitalizar la fuente. A lo mejor vamos a difundir las letras un poco. Y vamos a aumentar el tamaño de la fuente a algo así como 22 tal vez. Y luego voy a ir al espacio en una línea y frontera. Y quiero alinear el centro de texto. Ahí vamos. A lo mejor sólo voy a disminuir ese peso de la fuente sólo un poquito a algo como 20 o tal vez hasta 18. Ahí vamos. Y luego vayamos a otra vez a flotar y activos. Y me gustaría en hover, muchachos pueden ser, hacerla aún más oscura. A lo mejor así. Y voy a añadir el color y lo voy a llamar gris hover. Ahí vamos. Entonces cada vez que alguien se cierne sobre nuestro menú, se va a dar la vuelta y realmente, muy oscuro. Y por supuesto todavía tendremos que jugar con la capacidad de respuesta, pero lo vamos a hacer más tarde. Vamos a cuidar la capacidad de respuesta para el menú para este encabezado y todos nuestros elementos de cabecera. Por ahora, solo agreguemos el, los elementos que realmente necesitamos en nuestro encabezado. Entonces una vez que conseguimos el logo, conseguimos que el menú. Vamos a añadir tal vez la información del pie de página. Entonces voy a empezar con iconos sociales. Entonces solo voy a teclear, escribir eso. Y voy a añadir muchos de ellos son en realidad, vamos a sumar todos ellos, todos estos iconos. Y definitivamente vamos a hacerlos más pequeños a algo así como 18 píxeles. ¿ Por qué no? Y 1010 píxeles de espacio alrededor de la, estos iconos está bien. Comprobemos los colores. Vamos con nuestro color gris oscuro. Ahí vamos. Y si quieres, puedes usar colores de marca. Eso es algo que podrías hacer, pero voy a ir con nuestros colores grises. Y también puedes jugar con estas opciones como Square, Circle y blank. Creo que voy a ir con cuadrado. Creo que se veían los mejores en este escenario. A lo mejor voy a aumentar el tamaño y disminuir el espaciado entre mis iconos en algo así como dos. Supongo que esto debería estar bien. Y por último, vamos a añadir rápidamente algo de información de texto. Digamos que esta va a ser nuestra, esta va a ser nuestra probable información de copyright, algo así. Ya sabemos cómo hacerlo. Entonces sólo voy a escribir rápidamente algo como el portafolio de fotolitografía de
Arnold 20-20, algo así. Y por supuesto vamos a cambiar el color del texto. Hagámoslo significativamente más pequeño, algo así como diez píxeles. Y luego voy a ir a la tipografía avanzada. Voy a alinear textos al centro. Por lo que ahora sería un buen momento para empezar a alinearse en todo muy bien. O sea, podríamos dejarlo así, pero parece demasiado acosado a mi gusto. Creo que necesitamos algo más de espacio entre todos estos elementos, pero también necesitamos algún alineamiento agradable en relación a nuestro encabezado. Entonces, empecemos a jugar con las opciones de alineación y el espaciado. En el siguiente video.
68. 11.4Cambia la alineación y el diseño y: Entonces creo que deberíamos empezar con agregar algún espaciado entre estos elementos, sobre todo el menú y el logotipo y los iconos sociales, de las redes sociales. Entonces lo que voy a hacer primero es agarrar el menú pro, ir a Tamaño avanzado y espaciado. Y voy a añadir algún margen, como tal vez 50 píxeles a la parte superior y la inferior. Y si quisieras dejarlo así, si,
si nos gusta este tipo de maquetación, ahora podríamos dejarlo así. Esto se ve bien. Pero ¿y si quisiéramos tal vez gustarnos difundir todos estos elementos son ¿y si quisiéramos utilizar todo el espacio que tenemos aquí? Y si quisiéramos gustarnos, dejar el logo en la parte superior, agarrar el menú y ponerlo exactamente en el medio. Y luego agarrar los iconos de las redes sociales y nuestro texto de copyright y ponerlo exactamente en la parte inferior. Entonces para eso, voy a agarrar mi cabecera. Voy a asegurarme de que en realidad haya sido seleccionada. Y voy a agarrar esta opción como esta opción vertical de alineación de elementos, última opción como espacio entre ellos. Ahora lo que pasa aquí es que todos estos elementos están tratando de, ya
sabes, espaciar uniformemente, verticalmente para gustar llenar todo este espacio disponible que tenemos justo aquí. Pero como estos elementos están separados, puede ver que están tomando toda
la barra espaciadora y luego editar los espacios entre ellos son iguales. Pero nos gustaría que esta fotografía topográfica y la carga estuviera juntos. Y estos iconos de redes sociales y la información de copyright, nos gustaría que estuviera juntos. Si esta fuera una imagen simple, funcionaría bien. Pero en nuestro caso no lo es. Pero en realidad, es un, es algo bueno porque podremos aprender a desafiar estos temas. Entonces lo que voy a hacer es agarrar esta capa come y la voy a envolver con div. Y luego voy a poner el encabezado dentro de ese div. Y como puedes ver que esa fotografía y el encabezado y el icono ahora están siendo envueltos en un div. Y ese div en realidad se ha puesto encima de nuestro, de nuestro rubro. Pero por supuesto, todo lo que necesitamos hacer es simplemente alinear todo al centro. Y luego hacemos lo mismo por nuestros iconos de redes sociales, redes sociales. Entonces los voy a envolver con vivo. En el texto, se puede ver un centro de líneas vertical. Se puede ver que ahora mismo todos estos elementos se están
poniendo muy bien juntos y exactamente en la parte inferior. Y digamos que te gustaría poner ese menú en la parte superior junto con Logo, pero querrías mantener los iconos de las redes sociales aquí en la parte inferior. Entonces, ¿cómo podríamos hacer eso? ¿Hacer eso? Bueno, la forma más fácil sería simplemente agarrar el menú y ponerlo dentro de ese div. Y iría de la mano con esta fotografía de logotipo, el ícono, el encabezado, y un div abarcador. Entonces esto es algo que podrías hacer. Y por supuesto, si quisieras tener el menú en la parte inferior, bueno, solo tendrías que ponerlo dentro de ese div. Entonces esta opción, solo muéstrala una vez más. Esta opción espacio entre Permite espaciar todos los elementos verticalmente para que encajen, para que llenen todo el espacio disponible. Pero no quiero que este menú sea así. Yo quería estar separado. Por supuesto, si tuviéramos algunas páginas más aquí, podríamos agregarlas y ellos llenarían todo este espacio muy bien. Pero en nuestro caso sólo tenemos estos elementos. Entonces ahora se ve, se ve así. Entonces ahora que lo sabemos, ocupamos de nuestras opciones de maquetación, supongo que ya es hora de que empecemos a jugar con nuestra capacidad de respuesta. Entonces empecemos a hacer eso en el siguiente video.
69. 11.5 arreglar las respuestas del título del título: Entonces para arreglar la capacidad de respuesta, lo que voy a hacer es ir al contenedor de FirstPage, este tipo de aquí. Y como pueden ver, en este punto, supongo que el menú se ve bien, pero este texto fotográfico es demasiado grande, así que sólo lo voy a hacer más pequeño, algo así como 22. Y voy a cambiar el tamaño del icono a algo así como tal vez 24 o tal vez 22 también. Y en lo que respecta a nuestros iconos de redes sociales, podríamos tal vez para empezar, tomemos el div y asegurémonos de que tengamos centrados nuestros artículos. Y entonces sólo voy a ir dos veces iconos de redes sociales. Y yo sólo voy a hacer probablemente a estos tipos sólo un poco más pequeños a tal vez algo así como 14 píxeles. Eso debería estar bien. Ahora vamos a nuestro contenedor de página. Pero antes de eso, tal vez vamos a añadir un poco más de espacio como aquí en el, la izquierda y a la derecha. Entonces sólo voy a agarrar mi cabecera. Y en este punto de ruptura, quiero que el ancho sea un poco más grande. A ver, como 25. O puede ser aún más grande a algo como 2727 debería estar bien. Entonces voy a ir a menos de 992. Supongo que 27 estará bien. En cuanto al en cuanto al tamaño. Y todos los demás elementos se ven bonitos, bastante buenos. Creo que creo que se ven bien. A lo mejor déjame agarrar ir a todos los dispositivos. Ahora bien, realmente no me gusta el espacio entre los iconos de las redes sociales y este texto. Entonces solo voy a agarrar este texto inferior justo aquí y este punto de ruptura, voy a agregar como tal vez cinco píxeles de margen, supongo distribuir. ¿ Está bien? Entonces cuando nosotros, cuando vamos a menos de 992, todavía
se ve bien. Pero tal vez cambiemos eso con tal vez como 33. Por lo que ahora vamos a menos de 768. Y creo que,
que este punto de ruptura las cosas van a nuestro diseño ya no va a funcionar bien. Es decir, aunque tengamos como una imagen de fondo, sigue siendo todavía no va a parecer profesional a mi gusto. Lo que me gustaría hacer es que me guste comenzar con este punto de ruptura I1, el diseño para cambiar por completo. Yo quiero, quiero tener como un encabezado estándar en la parte superior. Y quiero tener como un, bueno nuestro deslizador para ser puesto horizontalmente, pero más al fondo. Entonces, ¿cómo podríamos hacer eso? Recuerda que nuestra sección todavía hereda elementos hijos de pila de
acciones horror horizontalmente, esta característica. Entonces, cuando agregamos este punto de ruptura, dile que apile los elementos secundarios verticalmente. Se puede ver que ahora mismo nuestro encabezado está siendo puesto encima de nuestro slider que pronto será. Pero como este tipo está configurado para ser 100 vh por su altura, su herencia, ese valor. Se puede ver que no se retoma todo este espacio a un lado. Entonces lo que voy a hacer es agarrar mi primer encabezado y voy a cambiar esa altura. Entonces voy a ir al tamaño y el espaciado. Y por la altura, intentemos Oran. Ahí vamos. Y por el ancho, vamos con el 100% para ponerlo, para ponerlo así. Y supongo que en este punto de ruptura, tal vez podríamos simplemente agarrar nuestro menú y tal vez cambiar el espacio del margen. Creo que fueron 25 o 50 píxeles. Entonces vamos con como diez, arriba y abajo. Supongo que se ve bien, sobre todo cuando los agarramos pro menu, vamos a entrar a decirle que se convierta en un menú móvil a menos de 768. Y entonces podríamos quizás como cambiar algunos aspectos al respecto. Entonces me voy a deshacer de este ícono. No quiero tener el texto del menú. Yo quiero tener los bares. Entonces, empecemos a escribir en los bares. Ahí vamos. Y quiero cambiar ese color a mi color gris de deslizador. Ahí vamos. Y por ahora, lo voy a dejar como está. Podríamos jugar con la capacidad de respuesta, con cómo se ve el menú o el menú en dispositivos mucho más pequeños, pero ya sabemos cómo hacerlo. Y solo quiero enfocarme más en cambiar las opciones de diseño aquí mismo. Entonces cuando vamos a menos de 480, los menús todavía se ven bien. Entonces si ahora vas a todos los dispositivos, este es nuestro, este es nuestro encabezado. Esta es nuestra cabecera a doscientos veintinueve noventa y dos. Pero entonces cuando vamos a menos de 768, se
puede ver que nuestro diseño cambia por completo. Entonces en dispositivos más pequeños como smartphones, Esto es lo que veríamos, ¿verdad? Entonces eso está todo bien y bien. Pero qué tal cómo, cómo hacer que esta sección de deslizador vaya, en realidad ir por debajo de mi heterosexual porque ahora está fijado en 80%. Pero ¿y si queremos que sea 100% de ancho? puede ver que en realidad no va por debajo de mi cabecera. Y si solo voy al fondo solo para mostrarte lo que quiero decir, me voy a deshacer de eso y sólo voy a elegir cualquier imagen. Se puede ver que se ha puesto aquí mismo, pero no va a entrar bajo nuestro encabezado y nuestro encabezado tiene un color de fondo. Eso es cierto, pero ese color es transparente. Aunque me deshaga de eso, se
puede ver que no tenemos a este tipo, el deslizador pronto por debajo de nuestro encabezado. Entonces, ¿cómo podemos, cómo podemos cambiar eso? Vamos a cambiar eso en,
en tan sólo un segundo. Por ahora, déjame volver a mi color original. Creo que fue alguien en algún lugar por aquí. Lo que quiero hacer ahora es que realmente quiero agregar un slider a esto, a esta sección. Y quiero ponerlo debajo de mi cabecera. Entonces empecemos a hacer eso en el siguiente video.
70. 11.6poner el deslizador bajo el patrón del encabezado: Por lo que ya tenemos nuestra plantilla casi lista. Lo que queremos hacer en este momento es que nos gustaría poner el malloc, el deslizador debajo de nuestro encabezado, pero no sólo el deslizador. Ya que esta va a ser nuestra plantilla. Y nos gustaría permitir que nuestros usuarios agreguen proyectos como a nuestro portafolio. Tenemos que pensar en eso también. Entonces lo que voy a hacer es que voy a añadir a este apartado, voy a dejarlo tal como está, pero sólo voy a añadir el contenido interno a esta sección en sólo dos que sancionen o no quiero ponerlo como en todas partes. Yo sólo voy a poner esa sección dentro de ese slider, elemento
slider, como la sección deslizante. Y yo sólo voy a salvar a este tipo. Y voy a volver a admin. Voy a agarrar mis páginas y voy a ir a mi portada de casa que la voy a agregar con oxígeno y estoy aquí dentro de mi página. Entonces lo que realmente quiero hacer es que quiero terminar en este slider ahora mismo. Ahí vamos. Y deja que algunos, hagan alguna configuración sencilla. Entonces cambiemos, disminuyamos la velocidad de animación como 350. Supongo que quiero quitar el Perrin alrededor de los toboganes. Yo no voy a estar usando esos puntos,
así que no necesito esta opción de slider de superposición de puntos. Yo los quiero. Quiero que los toboganes se estiren a la misma altura. Y para la configuración, no
quiero mostrar flechas. No quiero mostrar los puntos. Yo quiero que sea autoplay 3 mil. Dejémoslo así, y quiero hacerlo infinito. Entonces lo siguiente, lo que tengo que hacer es que sólo voy a deshacerme de esos dos deslizadores. Lo que tengo que hacer es que tengo que añadir, pero no voy a añadir una imagen a mi slider. Voy a añadir una imagen de fondo porque
quiero jugar con el posicionamiento de las imágenes. Entonces lo que esa diapositiva seleccionó, voy a ir a imagen de fondo y voy a agarrar esta opción. Y mientras esta imagen, y yo voy a seleccionar la imagen, y ahora mismo para el tamaño de fondo, voy a ponerla a cubrir. No quiero que se repita. Y quiero poner el punto de enfoque exactamente en el medio. Y ya sabemos hacer eso es que voy a ir con izquierda 50% y Top 50%. Ahí vamos. Y por supuesto, voy a querer que mi deslizador se estire por todo el conjunto, toda
la altura de mi página o mi ventanilla. Por lo que voy a ir a avanzado con el deslizador seleccionado. Entonces voy a ir al tamaño y el espaciado y entrar 100 para este 100 vh para mi, para mi slider. Entonces lo que voy a hacer es simplemente voy a duplicar mis diapositivas dos veces. Y cambiemos la imagen de fondo tal vez a este tipo. Y para el último tipo, cambiemos el fondo a este tipo. Ahí vamos. Déjame sólo ver si pongo las diapositivas en infinitas pero infinitas. Entonces sólo lo voy a guardar. Y veamos nuestra, veamos nuestra página. Yo voy a refrescar eso. Y ahí vamos. Tenemos nuestro control deslizante funcionando como debería. Y por supuesto cuando lo hacemos más pequeño. Entonces cuando bajamos y bajamos y bajamos, el deslizador funciona y los puntos de ruptura Brewer también funcionan. Entonces nos dieron nuestra portada. Básicamente crearé. Entonces ahora que conseguimos este layout principal para crearlo, tal vez dimos bastantes pasos, pero con todo, una vez que lo agarres, verás cuánta flexibilidad
obtienes con el oxígeno a la hora de crear estos bonitos diseños. Y entonces ahora que tenemos nuestra portada creada, tal vez déjame simplemente apagar la reproducción automática. Nos dieron la página, página principal creada. Ahora es una buena idea agregar algunas páginas de portafolio. Necesitamos eso como una sola página de cartera porque queremos agregar como proyectos individuales para nuestro portafolio. Y por supuesto también queremos crear como una página principal del portafolio. Entonces vamos a hacer eso usando como un plugin visual llamado portafolio visual. Es un bonito plug-in que te permite crear algunos portafolios
realmente bonitos, con buen aspecto. Entonces empecemos a hacer eso a continuación.
71. 11.7Añade el complemento de la portafolio del portafolio del: Entonces en mi directorio de plugins, voy a añadir un nuevo plugin y voy a buscar portafolio visual, este tipo de aquí. Y lo voy a instalar y luego lo voy a activar. Por lo que la forma en que funciona este plug-in es que permite agregar artículos de cartera, que son básicamente proyectos de cartera única. Y también te permite agregar maquetación para que controlen la forma en que tu portafolio. Portafolios, Básicamente galerías de portafolios, Luke. Así que vamos a crear un portafolio rápido solo para ver cómo funciona este plug-in. Entonces lo que voy a hacer es que voy a añadir un nuevo Layout. Voy a llamarlo mi portafolio. Y aquí dentro, como puedes ver, podrías elegir qué elementos se van a incluir en tu portafolio. Por ahora, no tenemos ningún post, los vamos a añadir más tarde, pero podemos añadir imágenes. Por lo que voy a hacer clic en imágenes e imágenes. Y sólo voy a sumar todas estas imágenes. Veamos cómo se verá. Ahora este plug-in, ya que hace bastante poco, funciona usando bloques de trabajadores para bien o para mal. Por lo que aquí en este elemento de blog, se
puede ver que tenemos algunas opciones que podemos, que podemos agregar que podemos cambiar a nuestro portafolio. Entonces, antes que nada, en primer lugar, conseguimos nuestra configuración de imagen aquí mismo. Entonces si quieres, podrías dejar esos títulos a tu, a tus imágenes. Entonces cuando pasamos el cursor sobre esas imágenes, se
puede ver que conseguimos y los títulos de imagen, podemos ponerlos a título de imagen o podemos configurarlo a personalizado. lo voy a dejar a título de imagen. Podríamos eliminar esas descripciones si quisiéramos. Podríamos decir que, por ejemplo, nuestra descripción sería nuestro título de imagen, antiguo o descripción. Pero sobre todo, podemos cambiar el diseño de nuestra cartera. Por lo que voy a dar clic en esta opción Items. Y por defecto conseguimos estos azulejos aquí mismo, pero podríamos elegir la mampostería si quisieras. El grilla justificado o carrusel. Y por supuesto, cada uno de estos, cada uno de estos diseños tiene ahí, tiene sus propios, tiene sus propias opciones como secundarias. Entonces vamos a los azulejos. Y cuando hacemos clic en esta opción Editar mosaicos, puedes ver que tenemos diferentes teselas, diferentes teselas como diseños que podemos usar. Entonces usemos tal vez, tal vez este, éste se ve bien. Voy a dejarlo así. Podemos cambiar la brecha entre nuestras imágenes. Voy a ir a tal vez como curtidor. Ahí lo tienes. Y luego cuando vamos al estilo de artículos, podemos cambiar la forma en que este todo como este efecto de esta superposición con el color y el título, como se ve. Entonces lo hago y exhibo el título, pero no quiero tener la fecha. Y sí quiero mostrar la superposición solo al pasar el cursor. Por lo que se verá algo así. Ahora podemos por supuesto cambiarlo a tal vez como clásico. Y esto se verá más o menos así. Podemos cambiarlo para volar, que haría que la superposición, superponga como volar desde una dirección del cursor del ratón y emerja. Haría que se viera así. Voy a ir con mosca. Se ve bonito. También podríamos cambiar el color de fondo de la superposición. Entonces vamos con este color negro, pero voy a reducir la opacidad. Entonces cuando pasamos por encima de nuestra imagen, se ve así. Y podríamos cambiar el color del texto de superposición si quisiéramos. Entonces en lugar de blanco, quizá
podríamos hacer algo así como, como gris claro, tal vez así. Puede ser un gris un poco más claro, así, o incluso más ligero que eso. Ahí vamos. Y hay ítems click action. Nos puede gustar desactivarlo por completo. Podríamos establecer la URL, la URL. Y eso significaría que cada vez que hacemos clic en una imagen, nos llevará a un portafolio de proyectos y como una sola página de portafolio de proyectos. Y entonces podemos elegir el pop-up, que en realidad sólo para hacer que nuestras imágenes se muestren en una ventana emergente. Entonces voy a dejar este pop-up por ahora. Voy a dejar el título de la imagen y la descripción de la imagen. Eso está todo bien. Yo sólo voy a dar click en actualizar. Lo que vamos a usar es este código corto de diseño justo aquí. Entonces voy a copiar esto y luego voy a ir a página de
mi portafolio y lo voy a pegar dentro de mi sección para su portafolio. Pero hagámoslo en su próximo video.
72. 11.8Añadir el portafolio del portafolio: Entonces voy a ir a las páginas y voy a agarrar la página del portafolio. Y lo voy a editar con oxígeno. Y aquí dentro voy a ir a estructurar. Y yo sólo voy a añadir una sección. Ahí vamos. Y dentro de esta sección, lo que realmente podríamos hacer es gustar agregar un encabezado. Y tecleemos justo lo que es portafolio. A lo mejor si lo escribimos correctamente, eso sería aún mejor. Ahí vamos. Y luego sólo voy a añadir un texto. Igual que eso. Y dejémoslo, dejémoslo así por ahora. Lo más importante aquí es agregar el portafolio en sí. Entonces tenemos el encabezado, tenemos el texto. Ahora sumemos el portafolio. Entonces voy a dar clic en agregar y voy a escribir el código corto. Y voy a pegar ese atajo completo que acabamos de copiar. Apenas un segundo para ir y voy a guardar esto. Y en este caso podrías, podrías encontrarte con un pequeño, un pequeño problema porque cuando acabamos de refrescar nuestra página, déjame simplemente refrescarla. Voy a ir a Portfolio. Se puede ver nuestra gravada, pero esa cartera no se está mostrando en absoluto. Y eso está sucediendo porque nuestro código corto necesita tener, déjame ir al tamaño y el espaciado. Necesita tener valores como un ancho. Yo sólo voy a teclear al 100 por ciento. Ahí vamos. Ahora se puede ver que el, esto,
este módulo de acceso directo no
lo es, en realidad es más visible. Cuando refresquemos a este tipo. Se puede ver nuestro portafolio funcionando, funcionando correctamente. Y por supuesto lo que me gustaría hacer es que me gustaría tal vez me gustaría agregar algo de espaciado aquí mismo. Entonces hagamos tal vez como 50 píxeles. Y voy a añadir, no
tengo 50, 50% píxeles. Yo lo voy a guardar. Y luego refresquemos a este tipo. Y ahora nuestro portafolio está, está funcionando correctamente. Por lo que esta es la forma de sumar nuestro portafolio. Y si quieres dejar este diseño tal como está, puedes hacerlo. Pero quizá podríamos agregarle como una bonita suma en negro, una bonita imagen de fondo y una superposición. Entonces veamos cómo podríamos hacer eso. Podríamos agarrar nuestra resección. Y ahora mismo como puedes ver, no
se está extendiendo por toda nuestra página. Entonces lo que podríamos hacer es agarrar nuestro tamaño de opciones avanzadas y el espaciado y configurarlo a ancho completo. Pero hará que nuestro, nuestro portafolio y nuestro código corto vayan hasta la izquierda. Entonces lo que haría es agregar columnas módulo. Y dentro de ese módulo de columnas, tal vez hagamos algo así como 50-50. Y pongamos este encabezamiento en nuestra columna derecha, ese texto en nuestra columna derecha también. Simplemente lo ponemos dentro de este div, Lo mismo para el código corto. Y ahora vamos a cambiar eso con de doblado, ese div. Entonces voy a ir a como 25 tal vez o 22. Y luego voy a agarrar mi tamaño de sección y espaciado. No quiero ningún relleno. Bueno, definitivamente supongo que podría verse así. Dejémoslo así. Y para la sección, también
voy a ir a fondo y voy a encontrar una imagen. Vamos a engarzar este, vamos a seleccionarlo, para que se vea así. Pero cuando ahora vamos a nuestra,
nuestra página de portafolio, se puede ver que no se ve tan genial. Es bonito que este portafolio sea como poner como, ya
sabes, como en toda la página. Pero tenemos que cambiar algunas cosas sobre tenemos que cambiar este color. Y tal vez podríamos cambiarlos como la imagen de atrás. Y lo que quiero decir con eso es cuando obtuvimos esta imagen de fondo, podríamos usar esta opción de color de superposición de imagen. Entonces voy a ir con el negro, pero voy a cambiar la opacidad a algo, mentir esto para oscurecerlo. Y sólo voy a cambiar rápidamente el color aquí mismo. Y este tipo de aquí. Y quizá en realidad agreguemos algún número. Volvamos a traer ese valor. Entonces estos 75 píxeles, si estamos arriba y abajo. Y no olvidemos agarrar el fondo y un conjunto nuestro fondo para cubrir. No se repita. Y pongámoslo en 50, 50% por ciento, igual que lo hicimos antes. Ahora cuando guardamos eso y refrescamos la página o portafolio se ve mucho, mucho más bonito. Y obtuvimos nuestra imagen de fondo, y conseguimos nuestro portafolio con el encabezado estático así. Y nuestro, por supuesto, nuestro trasfondo también se mueve junto con nuestro portafolio. Entonces así es como puedes agregar un portafolio usando este plug-in aquí dentro,
dentro de nuestro, bueno, dentro de nuestra página, dentro de oxígeno. Por supuesto, el diseño en este caso es mucho menos importante. Y lo que aún necesitamos para cuidar de lo suyo, claro, esto será la capacidad de respuesta porque ahora mismo no se ve tan genial. Entonces básicamente lo que tendríamos que hacer es agarrar las columnas. Y podríamos simplemente apilar las columnas verticalmente, tal vez a menos de 992. En este punto de ruptura. Vamos a añadir tal vez algún margen a nuestro primer div, este div de la izquierda. Vamos a ponerlo a gusto tal vez 20%. Ahí vamos. Entonces ahora podemos ver cómo se ve en realidad. Entonces como puedes ver, todavía tenemos algunos, ya
sabes, algunos problemas de respuesta. Es decir, cuando llegamos a ese punto de ruptura, esa cartera es, se ve muy bien reajustarse a sí misma. Pero nuestra, nuestras dibs No. Entonces vamos a arreglar eso en el siguiente video.
73. 11.9 arreglar la capacidad de respuesta: Entonces realmente, ¿lo único en términos de capacidad de respuesta que necesitamos arreglar aquí es que esta sección se superpone a nuestro encabezado? El encabezado se ve bien. El portafolio se repone a sí mismo, pero este rubro, y eso no se ve tan genial. Entonces lo que realmente tenemos que hacer es cuando vamos a menos de 768, aquí es donde cambia nuestro diseño. Tendrá que agregar algún margen o tal vez incluso mejor sería agregar relleno a nuestra sección porque déjame solo ir torres estructurar esta sección porque cuando este tipo golpea este punto de ruptura, donde nuestro diseño golpea este punto de ruptura, necesitamos agregar algo de relleno porque queremos
mantener nuestra imagen de fondo solos no, bueno, intAct básicamente. Entonces déjame ir a Tamaño avanzado y espaciado. Y voy a cambiar a este tipo de píxeles a porcentajes. Y vamos a intentarlo y 40%. Esto debería estar bien. Déjame refrescar la página y tal vez déjame simplemente agarrar a este tipo y refrescar la página. Se puede ver que ahora mismo tienes algo de espacio de relleno y tenemos algo de espacio aquí mismo. Pero cuando vamos a bajar, cuando vas a por 80, puedes ver que todavía tenemos que añadir justo eso. Entonces sólo voy a intentar como el 55%. Y vamos a guardar eso y refrescar la página. Y ahí vamos. Nos arreglaron esa capacidad de respuesta. Entonces cuando nos presentaron así nuestro diseño, todo
se ve bien. Cuando llegamos a ese punto de ruptura 7068, ese diseño completo cambia. Y para 80, el diseño también cambia aquí. Entonces así es como se puede crear un portafolio es página de portafolio muy simple. Con ese plug-in llamado portafolio visual, todo lo que necesitas hacer es agregar un código corto y nunca olvidar configurarlo al 100% en términos de ancho. Si querías ser 100%, pero siempre dale algunos valores de ancho. Y si quieres crear un like a gallery, will. Ahí vas. Pero si quieres, como,
hacer todas estas imágenes enlazadas a páginas
reales de portafolio con algunas galerías más o impuestos o encabezados, todas esas cosas. Bueno, necesitas crear una plantilla diferente aquí dentro del oxígeno. Y eso en realidad es una habilidad muy útil y algo muy útil. Y definitivamente empezaremos a aprenderlo en el próximo video.
74. 11.100Añadir la plantilla de la portafolio única portafolio de portafolio: Por lo que antes de añadir nuestra plantilla de cartera única, es una buena idea tener algunos proyectos de cartera ya creados. Entonces para hacer eso, voy a ir a nuestro,
nuestro plugin y voy a ir a Artículos de Portafolio. Y estos artículos del portafolio son simplemente post personalizado acostumbrado tanto tipos de postes personalizados. Y los añadirías igual tus publicaciones regulares si quisieras escribir algo como blogger. Por lo que sólo voy a añadir nuevo. Y voy a llamar a este solo artículo de cartera uno o en proyecto de cartera uno y lo voy a guardar. Y tal vez sólo voy a agarrar un poco de Lorem Ipsum como de costumbre. ¿ Dónde tenemos ese generador lorem ipsum? Y yo sólo voy a agarrar algo de esto. Y voy a escribir MLK ritmo que n tal vez con un espacio como ese. Y yo también quizá vaya al documento y tal vez pegue algo como nuestro extracto. Pero no tanto, sino algo así. Esto debería estar bien. Y también voy a poner una imagen destacada tal vez a este tipo. Y voy a publicar esto. Y ahora sólo voy a crear un, puede ser un par más, tal vez tres proyectos más. No, básicamente de la misma manera. Entonces voy a hacer eso ahora mismo. De acuerdo, conseguimos tres artículos de proyecto de portafolio con imágenes destacadas y algún contenido dentro. Entonces ahora vamos a empezar realmente a crear nuestra plantilla. Voy a ir al oxígeno y luego a las plantillas. Voy a añadir uno nuevo. Voy a llamarlo los artículos de portafolio. Deseo heredar el diseño de nuestra plantilla de mantenimiento. Yo quiero, quiero tener ese mismo efecto de cabecera. Y luego voy a ir a singular. Y voy a encontrar artículos de cartera los cuales corresponden con nuestros artículos visuales de cartera aquí mismo. Yo sólo voy a publicar esto y editado con oxígeno. Y ahora mismo, todo lo que necesitamos hacer es agregar las mismas piezas de diseño que antes con nuestra página de portafolio. Entonces dentro de mi contenido interno con esta estructura, voy a agregar una sección que se va a estirar por toda la página. Porque quiero decir, no
tienes que hacerlo. Si solo quieres mantenerlo así, no
quieres que no lo necesites. Al igual que una imagen de
superposición, superponer tipo de efecto. Se puede, sólo podemos dejarlo, dejar esta página tal como está. Eso también estará bien. Entonces como me gustaría que mi imagen de fondo cambiara, me gustaría que se correspondiera con nuestro artículo de cartera. Voy a ir al tamaño y el espaciado. Voy a elegir el ancho completo como mi talla. Y no quiero tener ningún relleno en absoluto. Y ahora lo que me gustaría hacer es ir al fondo, buscar opción y elegir imagen de fondo. Pero en lugar de la función de navegación, quiero dar clic en la opción Datos y quiero elegir publicar imagen destacada. Y esto será,
será jalando nuestra,
nuestra imagen destacada de nuestra base de datos. Y por supuesto, como tú como de costumbre, quiero ir con la tapa tamaño de fondo. No se repita. Y quiero ponerlo al centro, así que 50% para arriba e abajo. Y luego cuando quiera superponer un color, así de nuevo, voy a ir con negro simple y voy a dejar caer la opacidad a algo así como 77. Supongo que esto debería estar bien. Y voy a guardar esto porque agregamos esta imagen destacada como,
como nuestra imagen de fondo. Cada vez que cambiamos nuestro proyecto, se
puede ver que esa imagen cambia. Se ha sacado de nuestra base de datos de datos. Por supuesto, tal vez no veas que he escrito. Déjame ir rápidamente al tamaño y el espaciado. Voy a aumentar la altura a 100 vh. Entonces este es nuestro proyecto, un proyecto para etcétera. Por lo que esta imagen de fondo va a cambiar. Entonces voy a guardar esto. Entonces ahora lo que podríamos hacer, lo que tenemos que hacer es añadir las columnas para albergar nuestro contenido. Algunos van a seguir adelante con columnas. Nuevamente, 50-50. El de la izquierda, me voy, voy a ponerlo en 25. Por lo que el rojo se fijará en 75. Este tipo de aquí. Por lo que en este punto estamos listos para empezar a poblar nuestra plantilla vale algo, algunos datos sacados de nuestra base de datos. Entonces empecemos a hacer eso en el siguiente video.
75. 11.1111 los datos de la portafolio dinámicos: Entonces dentro de mi columna derecha, este div que en realidad podríamos renombrar, lo llamemos cartera parecida a aguja. Contenido de portafolio. Ahí vamos. Entonces, ¿qué podríamos agregar aquí? Bueno, todo dependerá del portafolio, diseño de portafolio
único que vayas por. Por lo que antes que nada, podríamos agregar como un título de post. Entonces voy a seguir adelante y voy a elegir WordPress. Y luego quiero elegir datos dinámicos. Y voy a seguir adelante y elegir título. Entonces vamos, Tenemos el proyecto de cartera por ir a cambiar el color a este color blanco o la diapositiva Gris, Tal vez este color blanco, casi blanco. Ahí vamos. Y por supuesto que siempre podríamos simplemente cambiar todos estos aspectos. Podrías cambiarlos como te parezca. Y por supuesto, cuando seguimos adelante y cambiamos nuestro, nuestro proyecto, se puede ver que el título cambia dinámicamente. Entonces por debajo de eso, podríamos quizá agregar como un contenido de nuestro, de nuestro proyecto. Entonces lo que voy a hacer es otra vez, voy a ir a Add. Y esta vez voy a ir con contenido. Y como pueden ver, mi contenido está siendo sacado de la base de datos. Y de nuevo, voy a cambiar el color del texto a este color más claro. Pero lo que podríamos hacer, tal vez
podríamos gustarnos en algunos como una descripción de nuestro proyecto, pero tal vez quisiéramos agregar algunas otras piezas de información a la derecha. Entonces voy a agarrar este div y voy a añadir texto, otra pieza de texto. Pero solo voy a dar clic dentro, agarrar los datos de inserción. Y yo sólo voy a batear en extracto. Y vamos a salvar esto. Ahora como pueden ver, tenemos nuestro extracto mostrado aquí abajo. Entonces ahora digamos que me gustaría poner estas dos piezas de texto uno al lado del otro. Entonces agarraría mi div y le diría a
estos elementos que se apilaran horizontalmente así. Y quizá podríamos agregar algo de espaciado entre ellos. Entonces este primer div, este tipo de aquí, vamos a añadir como, vamos a ver, tal vez como 50 píxeles de margen. Y luego voy a agarrar esta pieza de texto y tamaño y espaciado. Y voy a agregar como 5050 píxeles de, de espacio marginal. Ahora por supuesto, estos elementos son como los contenidos relacionados. Este proyecto de cartera dos sólo tiene esta pieza de contenido, este texto, y este extracto. Entonces voy a salvar a este tipo. Voy a volver a mi administrador. Y voy a ir a mis artículos de cartera de cartera. Y creo que fue el Proyecto dos. Y ahora cada cambio que hagamos aquí mismo se va a reflejar en nuestra página de proyectos de cartera de proyectos en nuestra página de proyectos. Entonces como dije, nuestro este layout, este descontento, está relacionado con este contenido. Entonces. Dondequiera que pongamos aquí, se va a exhibir en nuestro proyecto de cartera. Por lo que no sólo tiene que ser gravado. Por ejemplo, si quisiéramos agregar algunas imágenes dentro de aquí, podríamos, o incluso podríamos añadir un portafolio completamente nuevo. Pero desafortunadamente aquí dentro del sensor de oxígeno, recuerda que necesitábamos agregar como un valor de ancho para, para nuestros códigos abreviados. Y básicamente, estos tipos en realidad no funcionarán, puede ser cuando llegue una actualización. Pero por ahora, si haces clic en este diseño visual de portafolio y eliges tu diseño como puedes recordar, ya lo
creamos para nuestra página principal de portafolio. Esto va a funcionar. Entonces si solo agregamos este layout, así que si vamos a nuestra página de proyecto de cartera, puedes ver que tenemos nuestro título, tenemos nuestro contenido, tenemos nuestra barra lateral. Y bueno, este extracto, y tenemos nuestro portafolio aquí mismo. Pero claro que también tenemos un poco de problema aquí mismo. Esta sección no se está estirando a través toda
la altura cuando nos desplazamos hacia abajo nuestra imagen y mientras nuestra, nuestra, nuestra página de cartera. Entonces, ¿cómo podemos arreglar eso? Cuando vamos a, cuando vamos a nuestra,
nuestra plantilla y agarramos nuestra sección, podemos ver que conseguimos este conjunto de 100 vh justo aquí. Si nos deshacemos de él, Esta sección se va a adaptar al contenido que aloja. Pero lo que queremos hacer es establecer la altura mínima a 100 vh. Por lo que siempre será, No importa el contenido que tengas dentro, siempre
se estirará a través de toda la altura. Déjame salvar a este tipo ahora mismo, pero también se adaptará cuando nos desplazemos hacia abajo. Entonces ahora mismo, se ve así. Cuando guardamos eso, refresca la página, que la altura mínima se establezca en 100 vh. Por lo que se ve así en este momento, pero el ancho máximo es no establecer el conjunto no coincidente en 100 vh. Entonces ahora mismo podemos desplazarnos hacia abajo y podemos ver nuestro portafolio aquí mismo. Y por supuesto, como dije, esto,
este diseño de portafolio va a estar totalmente a tu altura. Puedes poner dentro aquí lo que quieras. Sólo recuerda agregar, como los datos dinámicos, el título y el contenido y el ejercicio. Si quieres crear algo así como una barra lateral aquí mismo, si quieres que te guste numerar el trabajo que se creó o la tecnología que se creó. Usaremos para crear eso, ese proyecto específico. Pero lo más importante es, es que siempre verás, siempre
verás todo tu contenido sería entonces tu proyecto de portafolio específico, no importa qué proyecto elijas, es todo datos dinámicos y todo depende de lo que tengas aquí. Lo verás siempre aquí. Pero nuestra página de portafolio, si solo voy a nuestra página de portafolio, vamos a portafolio. Por lo que nuestra página de portafolio muestra imágenes. No muestra nuestros proyectos. Y entonces, ¿cómo podemos realmente arreglar eso? Entonces vamos a arreglar eso en el siguiente video.
76. 12.1Añadir los plugins de formularios de contacto: En los próximos videos, vamos a echar un vistazo a agregar una página de contacto a nuestra página web. Y si echamos un vistazo a nuestra página de contacto en este momento puedes ver que solo tenemos un encabezado y un pie de página simple. Entonces lo que tenemos que hacer es añadir alguna información de contacto entre el encabezado y el pie de página y también un formulario de contacto. Por supuesto que no tienes que añadir un formulario de contacto. Es posible que solo introduzcas alguna información de contacto. Pero si sí quieres tener un formulario de contacto, vamos a aprender a hacerlo en los próximos videos. Entonces lo primero que vamos a hacer es añadir un plugin, en realidad un par de plug-ins. El primero va a ser formas fluidas. Este es este tipo de aquí. Voy a instalarlo y luego voy a hacerlo, y luego voy a activarlo. Y el siguiente va a ser, creo que el formulario de contacto más popular que hay es lo que se llama formulario de contacto siete, podría haber oído hablar de ello. Entonces lo voy a buscar. Vamos a instalarlo y luego lo voy a activar. ¿ Por qué elegí ambos plug-ins? Bueno, sí solo para mostrarte eso al oxígeno y funciona con cualquier tipo de cualquier forma de plug-in y que puedes elegir lo que quieras. Y uno de estos plug-ins, decir, en las formas fluidas, es que no necesitas hacer mucho para que funcione y luzca agradablemente. Y supongo que construir un formulario es más fácil que con el formulario de contacto. Pero el formulario de contacto es realmente simple y es flexible una vez que sabes cómo hacerlo. Por lo que solo quiero ampliar tu conjunto de habilidades. Eres portafolio calificado. Si quieres simplemente seguir adelante con un simple como un constructor de formularios de contacto arrastrar y soltar. Puedes hacerlo con oxígeno. Y si quieres ir por algo más como hazlo tú mismo, una
especie de plug-in, puedes hacerlo también. Entonces empecemos con las formas fluidas. Entonces este es este tipo de aquí. Ya tenemos como un formulario de contacto demo. No lo necesito. Voy a eliminarlo y supongo que estamos listos para agregar nuestro primer formulario. Pero antes de hacer eso, necesitamos tener algunos como algunos contenedores, como algún espacio para realmente poner nuestros formularios en ellos. Por lo que vamos a añadir una sección y algún contenido a nuestra página de contacto primero. Entonces empecemos a hacer eso en el siguiente video.
77. 12.2Crea la página de contacto: Lo primero que voy a hacer es que voy a editar mi página de contacto con oxígeno. Y solo voy a agregar rápidamente mi pie de página y encabezado reutilizables. Y entre ellos, sólo voy a añadir una sección. Y lo voy a poner a donde tenga que ir. Y ahora podríamos tal vez en algunas columnas pueden ser algunos divs, pero vamos a mantenerlo simple. Solo usemos algunos activos prediseñados. Por lo que voy a dar click en agregar. Voy a seguir adelante y elegir conjuntos de diseño de bibliotecas. A lo mejor esta sanciones atómicas y elementos. Y tal vez vamos a agarrar este primer formulario de contacto. Como se puede ver. Podemos incluso deshacernos de esto, tal vez esta sección, como puedes ver, ya
tenemos como una sección de contacto y contacto muy sencilla lista y esperándonos. Y aquí abajo, se puede ver que tenemos este div y eso dice Formulario de Contacto aquí. El oxígeno funciona con cualquier plugin de formas. Y este es en realidad un spot donde puedes poner tu formulario de contacto. Por supuesto que puedes ponerlo en cualquier lugar que quieras. Pero ya que queremos agarrar este diseño y queremos usarlo como nuestra referencia. Vamos a poner aquí nuestro formulario de contacto. Pero para hacer eso, permítanme que primero elimine el icono y el texto. Y este va a ser nuestro formulario de contacto. Fin de semana incluso puede ser renombrado a este tipo sólo para que podamos ver lo que estamos haciendo aquí. Entonces contacto, ahí vamos. Y dentro de este div, este div de contacto, vamos a poner nuestro formulario de contacto. Así que ahora primero creemos primer formulario de contacto, y pongámoslo dentro de este div.
78. 12.3Añadir el primer formulario de contacto: Entonces déjame simplemente ir adelante a nuestro, a nuestro plugin. Entonces voy a agarrar nuestras formas fluidas. Y voy a añadir un nuevo formulario. Y podríamos crear una nueva forma en blanco. Pero sólo voy a usar rápidamente este formulario básico de contacto. Y voy a dar click en crear formulario. Y aquí dentro, como pueden ver, tenemos nuestro campo FirstName, Apellido, dirección de correo electrónico, asunto y su mensaje. Y cuando pasamos el cursor sobre todos y cada uno de estos elementos, se
puede ver que podemos cambiar algunos aspectos sobre la mente, que algunas de las características podrían estar disponibles sólo, solo en las versiones pro de algunos plug-ins. Pero por lo general para como la forma
básica, básica de contacto de las funcionalidades, deberían bastar. Entonces de todos modos, una vez que hayas hecho todos tus ajustes y no, no quiero aburrirte con el, ya sabes, haciendo click y cambiarte en cada pequeño aspecto del mismo. Yo sí te animo a cambiar o a revisar todas las opciones disponibles una vez que selecciones tu plugin de formulario de contacto para ir. Pero por ahora, solo estamos aprendiendo a agregar un formulario de contacto a nuestra página. Por lo que una vez que esté listo, voy a elegir On Click en Guardar formulario. Y puedes ver que aquí en la parte superior, tienes este ID de forma fluida es igual a dos en este caso. Y esto en realidad es algo que se llama el atajo, que básicamente es un código que permite a los trabajadores realizar una operación específica. En este formulario, nos permitirá mostrar nuestro formulario de contacto. Entonces una vez que lo copiamos en nuestro portapapeles, podemos ir al editor visual de oxígeno a nuestra página en realidad, aquí
mismo dentro de este div, no
podemos simplemente pegar eso,
ese atajo de forma compacta en. Eso no funcionaría. Necesitamos primero agregar un contenedor especial para ese atajo para que el oxígeno sepa que en realidad se supone que renderiza ese atajo. Y que ese módulo, ese elemento afortunadamente se llama un simple código corto. Y cuando pegamos ese atajo en esta caja de atajo completa, se
puede ver que nuestro código corto está siendo muy bien renderizado aquí mismo. Por lo que cuando ahora vamos a nuestra página de contacto de formulario de contacto oro, voy a dar click en contacto. Se puede ver que tenemos listo nuestro formulario de contacto y esperándonos. Y no olvides que
siempre podemos hacer un cambio como este alineamiento de centro a izquierda. También podríamos jugar con este relleno aquí mismo de este div. Pero si quieres cambiar algunos aspectos sobre ese formulario de contacto, necesitas hacerlo desde esa interfaz de plug-ins específica porque esto solo está renderizando nuestro atajo y la forma en que se configuró aquí dentro de ese plugin. Entonces así es como puedes ingresar un simple código corto, sencillo formulario de contacto. Y ahora pasemos a nuestro siguiente plugin de formulario de contacto, que se llama formulario de contacto siete. Y ese plug-in es quizá un poco más difícil, supongo que para empezar. Pero definitivamente vale la pena aprender porque te da un montón de, un montón de posibilidades. Entonces pasemos a ese plug-in a continuación.
79. 12.4Añadir el formulario de contacto 7: Por lo que nuestro segundo plugin de formulario de contacto se llama formulario de contacto 7. En primer lugar, permítanme simplemente crear un nuevo formulario de contacto. Por lo que desde el menú plug-in, solo
voy a dar clic en agregar nuevo. Y lo voy a llamar mi formulario de contacto. Y como puedes ver, viene con algunos códigos preinstalados y ya sabes, como campos preinstalados que puedes usar. Pero si quieres agregar un poco más, puedes elegir desde esta barra de menús, supongo que aquí en la parte superior. Y básicamente, la forma en que funciona es igual que cualquier otro formulario de contacto, cualquier otro plugin de generación de código corto. Por lo que cuando vamos a nuestros formularios de contacto, podemos agarrar este atajo de formulario de contacto. Yo lo voy a copiar. Nuevamente, vaya a nuestra página de oxígeno. Y ahora en lugar de esta forma fluida atajos, podemos pegar y ese contacto desde siete códigos cortos. Y como puedes ver, conseguimos nuestro código corto y nuestro formulario de contacto creado y pegarlo en. Pero como puedes ver, se ve horrible y no se ve tan horrible solo en el backend cuando vas al front end, viene completamente sin estilo. Y este es, supongo, uno de los mayores retos, supongo que todo diseñador o incluso desarrollador se enfrenta al trabajar con este formulario de contacto, viene completamente sin estilo porque pretende ser realmente ligero y rápido. Por lo que no hay estilo se le asigna en absoluto. Y esto es algo que tenemos que hacer manualmente y se podría hacer por un plug-in. Podrías agarrar otro plug-in y simplemente usar plantillas. Podrás descubrirlos por ti mismo. Pero lo que me gustaría que comprendieran y aprendieran es cómo
agregar código personalizado aquí dentro del oxígeno. Esto puede ser un poco más avanzado, pero definitivamente vale la pena. Y, uh, una vez que te pongas mejor en desarrollar sitios web, definitivamente estarás deseando,
querer estar usando, si no, editando el código, al menos solo agarrando algún código que lo encuentres en línea y luego simplemente pegarlo dentro del oxígeno. Entonces hagámoslo realmente en el siguiente video. Veamos cómo podemos aplicar un código líquido pre-rendertido que prerendericé el pre escribió aquí dentro de un formulario de contacto que puedes agregar a tu formulario de contacto, siete formularios.
80. 12.5Estilo del formulario de contacto: Entonces si queremos saber cómo darle estilo a tu formulario de contacto siete, podemos ir al Formulario de Contacto siete y marcar. Pongámoslo así. Y luego vamos al formulario oficial de contacto siete página. Se puede ver que tenemos algunas bonitas piezas de información que básicamente puedes simplemente copiar y pegar para que puedas darle estilo a tu formulario de contacto n Bueno, esto es muy útil. Te recomiendo que mantengas este lado a mano. Pero lo que definitivamente recomendaría aún más es mantener este código a mano. Este es el código que escribí que puedes usar. Definitivamente, déjame solo tal vez limpiarlo un poco. Y lo vamos a aplicar a nuestro formulario de contacto. Y verás lo rápido que vamos a cambiar el aspecto
y la sensación de nuestro formulario de contacto y verás lo que hace este código. Entonces lo que voy a hacer es simplemente copiar todas estas reglas CSS. Vamos a volver al oxígeno. Por lo que desde el panel gestionar y luego hojas de estilo, voy a dar clic en agregar hoja de estilo. Y lo voy a llamar contacto, formulario de contacto. Y voy a dar click en OK. Y como puedes ver, lo que obtenemos es este lienzo en blanco, en blanco, supongo ventana en blanco, donde realmente podemos agregar nuestro CSS personalizado, personalizado. Entonces lo que realmente tenemos que hacer es simplemente pegar ese colon. Y como puedes ver,
todo este formulario de contacto cambia en un instante. Y si tan sólo echan un vistazo a estos selectores aquí mismo, se
puede ver que sólo pertenecen a nuestro, a nuestro insumo. No hay campos de texto, correo electrónico, área de
texto, que es este tipo de aquí. Este tipo es nuestro botón de enviar, este tipo de aquí. Y todas estas, todas estas reglas CSS son bastante fáciles, fáciles de entender. Todo lo que estamos haciendo aquí es que estamos haciendo el ancho al 100%. Estamos diciendo que se supone que la font-family es rubato, la fuente que elegí. Tan básico, básicamente podrías usar tus Fuentes de Google aquí mismo. Y podemos tal vez, porque cuando pasamos por encima de este tipo de aquí, se
puede ver que está cambiando de color, recoger muy, muy gris claro. Pero quiero agarrar mi color predeterminado. Creo que fueron estilos globales. Voy a ir a colores y colores por defecto. Y esto es, esto es, este fue este marrón copiado. Voy a volver a mi formulario de contacto Stylesheet y sólo voy a reemplazar ese contacto. Ese color de fondo sobre se cierne a esta comunidad energética de color marrón cuando se cierne sobre, este tipo, cambia así. Entonces voy a salvar a este tipo. Y luego voy a refrescar la página. Y puedes ver que tenemos Tenemos nuestro formulario de contacto creado, y por supuesto está funcionando correctamente. Pero todos estos elementos necesitan ser atendidos como este requisito campos todos estos mensajes. Ellos, tienen que ser atendidos desde este plug-in, una interfaz plug-in aquí mismo. Entonces tenemos nuestra etiqueta justo aquí. Llegamos a este correo electrónico, tenemos tu tema. Y por supuesto tenemos que decir a qué correo electrónico este va a tener que ir todos los envíos de formulario. Tienes el cuerpo del mensaje. De verdad. Al principio, este plugin puede parecer un poco difícil de aprender, pero una vez que lo das como unos minutos, unos minutos, verás que en realidad es bastante fácil entender qué es, qué está pasando aquí mismo. Entonces ahí vamos. Esto es lo fácil que es agregar un formulario de contacto aquí dentro de un oxígeno. Y como dije antes, no
puedes simplemente dejar tus páginas de formulario de contacto con alguna información de contacto sencilla como aquí. Pero si quieres agregar un formulario de contacto, necesitas agregar un plugin de formulario de contacto. No hay como un módulo incorporado dentro de oxígeno como si hubiera un indivi, entumecido, pero supongo que te da más flexibilidad, cualquiera que sea el plugin que quieras usar para tus formularios de contacto, puedes usarlo aquí dentro de oxígeno y es solo una cuestión de agregar un atajo. Por cierto, ¿podemos editar donde quieras? Cuando vayamos a nuestra página, sólo
voy a ir a mi estructura. Sólo voy a duplicar este código corto. Y digamos que quiero apagarlo. No lo sé. Digamos que tal vez en algún lugar de aquí. Se puede ver que el atajo se ha renderizado aquí arriba. Entonces no importa dónde lo pongas, vas a ver tu formulario de contacto. Exactamente donde tú, donde pones tu, tu lado corto coherente de esta estructura y estas capas. Entonces ahí vamos. Es así como puedes crear un formulario de contacto aquí dentro del oxígeno. Como puedes ver, es tan simple como simplemente agregar un simple código corto, un simple plug-in, y estás listo para ir.
81. 13.1explora el diseño para la oficina de un abogado: En los próximos videos, realidad
vamos a aprender a crear un sitio, por
supuesto dentro de oxígeno. Y esta vez estaremos siguiendo cierto diseño. Es, éste sería sobre aprender todo lo que hay que saber sobre el oxígeno. Nos centraremos más bien en crear realmente la base del sitio sobre una base sobre un diseño. Y decidí simplemente crear un sitio web de abogados que se basará más o menos en este diseño. Y acabo de decidir que
es, tiene, no es tal vez como el mejor diseño del mundo,
pero, solo tiene como el más,
el más típico y componentes en un sitio web como este. Entonces tenemos un y un encabezado pegajoso aquí mismo. Y ese encabezado es, bueno, no demasiado complicado, pero no demasiado simple. Tenemos algo de información aquí, logo y un menú. Entonces tenemos un slider. ¿ Van a mendigar murmurar como un deslizador de tierra bolsa con algún texto aquí mismo. Y luego nos dieron algo de texto, algunas imágenes como estas
son, no se ven tan geniales. Por lo que intercambiaremos esta sección aquí mismo. A lo mejor lo haremos, haremos algunos efectos de paralaje. Entonces conseguimos algunos iconos aquí mismo con algunos efectos de transición. Eso también lo haremos. Pero tal vez vamos a hacer un efecto de transición diferente. Después conseguimos alguna sección con, con algunos textos, conseguimos una sección de equipo, y conseguimos otro slider con algunos testimonios, un blog, un blog sencillo, real, aquí mismo. Otra sección con alguna imagen de fondo y texto superpuesto. Tenemos un, tenemos un formulario de contacto aquí mismo, como una sección de contacto y un simple pie de página. Entonces, con todo, conseguimos bastantes elementos que
quizá quieras usar y crear en un sitio web típico. Por lo que pensé que este sería un buen punto de referencia para nosotros. Además, tengo mi diseño aquí mismo, así que solo, solo llamo a Pete. Tomé una captura de pantalla de ese sitio web y eso me permitió crear un sistema de diseño como un diseño
muy, muy sencillo, un sistema para nuestro sitio. Por lo que conseguimos los colores que usaremos en nuestro diseño. Tenemos las fuentes. Entonces para el encabezamiento, así vamos a estar usando el texto carmesí y las etiquetas corporales se abrirán sentido. Y ambas de estas tipografías son Google Fonts, tipografías, rápidamente creé un logo sencillo, que es básicamente una letra L para tomarlas de la tipográfica de texto carmesí y ponerlas contra un fondo redondo. Y acabo de descargar algunos iconos del icono plano y agregué eso, ese mismo color rojo pálido y a esos artículos. Y también he añadido algunas,
algunas imágenes, así que estos son mis iconos. También tengo algunas imágenes para nuestro slider, para nuestro equipo y para algunos efectos de imágenes de paralaje o de fondo. Y voy a subir todas estas imágenes a nuestra página web. Entonces supongo que estamos listos para, listos para empezar a crear nuestro diseño. Y estaremos creando ese diseño en una instalación de WordPress completamente nueva. Y este es un servidor real, por lo que podrás ver ese diseño más adelante. Y lo primero que vamos a hacer es que vamos a agregar como una página de inicio o tal vez simplemente añadir un menú simple, sencillo y luego empezar a crear nuestra, nuestra página, nuestro sitio en oxígeno.
82. 13.2Añadir los elementos de menú: Por lo que he decidido crear un menú sencillo para mi sitio. Entonces vamos a Apariencia y menús. Y aquí dentro, como pueden ver, sólo
tengo una página. Esa va a ser nuestra página principal, y esta es esta página de aquí. Y también he decidido agregar algunos elementos de menú simples como áreas de práctica,
abogados, casos prácticos, blogueados, y contacto. Y como puedes ver, todos son enlaces simples, simples. No enlazan a páginas reales. Y si quieres hacerlo, solo
puedes ir a enlaces personalizados para la URL, solo tienes que escribir el símbolo hash. Y para este enlace textos, supongo que podríamos tal vez escribir algo así como tres cotización gratis, agregar eso a nuestro menú. Y como puedes ver ese enlace personalizado se está agregando a nuestro menú. Pero no quiero tener como un enlace de cotización gratis aquí porque vamos
a estar agregando un botón a nuestro, a nuestro menú. Y así sólo lo voy a quitar. Pero así es como crearías como un manual ficticio aquí dentro, aquí dentro de WordPress. Entonces solo agrega enlaces personalizados si no quieres agregar las páginas y sería básicamente bueno para ir. Entonces una vez que, una vez que nos dieron el menú, vamos torres Configuración, Lectura, y vamos a asegurarnos de que realmente nos vean. Nuestra página principal estática es nuestra página principal. Y cuando vamos a nuestro sitio, se
puede ver que básicamente no tenemos nada aquí mismo. Y eso es porque primero necesitamos crear una plantilla que nuestra plantilla principal, principal para el encabezado y para el pie de página. Entonces eso es lo que voy a hacer a continuación empezando en el siguiente video.
83. 13.3Añadir la plantilla principal 13: Entonces vamos a añadir nuestra plantilla principal y voy a ir al oxígeno y luego a las plantillas. Y aquí dentro voy a añadir una nueva plantilla a la que voy a llamar principal. Ahí vamos. Y cuando vayamos a otro, y luego elijamos atrapar a todos. Eso sólo va a significar que esta plantilla va
a renderizar todas las páginas en nuestro, en nuestro sitio. Y yo sólo voy a golpear publicar. Ahí vamos. Por lo que ahora voy a dar click editar con oxígeno. Y antes de empezar a poner realmente algunas,
algunas cosas a nuestra plantilla antes empezar a agregar el encabezado y el pie de página y el contenido interno, realidad
agreguemos nuestros elementos de diseño. Entonces vamos a añadir los colores. Vamos a establecer la fuente. Entonces solo voy a agarrar rápidamente o a primer color, este tipo de aquí. Y luego voy a volver al oxígeno. Y ahora mismo voy a ir a administrar ajustes. Entonces voy a ir a estilos globales, colores. Y aquí dentro voy a añadir un conjunto de colores. Yo lo voy a llamar abogados TM. Voy a añadir ese conjunto y voy a empezar,
empezar a añadir otros colores. Por lo que nuestro primer color será como el azul oscuro. Y voy a añadirle ese hashtag, ese código hexadecimal en realidad. Entonces voy a agarrar nuestro color rojo. Entonces voy a copiar ese color al color, voy a llamarlo rojo pálido a ese color. Entonces de nuevo, voy a agarrar esto como casi de color negro, creo, añadir color. Yo lo voy a llamar. Sólo llamémoslo. Vamos a llamarlo texto. Este será nuestro color de texto. Entonces sólo voy a, voy a añadir este color blanco liso. Déjame volver atrás y colorear. Yo sólo lo voy a llamar Blanco. Y supongo que hasta podríamos simplemente agarrarlo de nuestro selector, no de placa. Yo quiero que sea blanco. Vamos y luego agarremos este color rosa. Ahí vamos. Es volver al oxígeno y el color. Y lo vamos a llamar parpadeo. Y ese código al color. Y yo sólo voy a guardar todo. Entonces consiguió 12345 colores y supongo que es un buen comienzo. Podemos dejarlo así. Pero ahora quiero agregar las fuentes. Entonces nuestra fuente display es ese el texto carmesí? Entonces si no lo puedes ver aquí mismo, solo escribe texto carmesí. Y ahí vamos. Y nuestra tipografía para la fuente de texto estará abierta. Sans. Ahí vamos. Y yo sólo voy a ahorrar eso. Entonces ahora tenemos nuestros colores, tenemos nuestras fuentes. Por lo que ahora realmente estamos listos para empezar a agregar algún contenido a, a nuestra plantilla. Entonces empecemos a hacer eso a continuación.
84. 13.4Añade el encabezado: Por lo que nuestra plantilla de mantenimiento básicamente va a estar hospedando nuestro encabezado, el contenido interno, y el pie de página. Entonces solo voy a empezar con nuestro encabezado. Por lo que voy a seguir adelante y hacer clic en Agregar y escribir en encabezado. Y quiero elegir el constructor de cabeceras. Y dentro de ese constructor de cabeceras, por supuesto
conseguimos nuestra fila de encabezado. Entonces nuestra fila de encabezado, si echamos un vistazo a nuestros lenguajes de diseño ,
suba, arriba, arriba, hasta aquí arriba. Simplemente tiene como un fondo oscuro. Tenemos un logo a la izquierda. Tenemos que, tenemos menú y alguna información adicional con algunos iconos aquí mismo. Y así vamos a sumar todos estos componentes, pero tal vez vamos a cambiar un poco el diseño. No soy un gran fan de cómo se ha dispuesto este diseño aquí mismo. Yo quiero ponerlos y el menú a la derecha y el logo al centro. Pero creo que estos tipos pueden quedarse aquí arriba. Entonces lo que voy a hacer es que primero quizá vaya a agregar un color de fondo a mi, a mi menú. Ahí vamos. Yo lo voy a guardar. Y ahora sólo voy a añadir un logotipo. Entonces para eso, voy a dar clic
y, y voy a escribir una imagen. Y voy a tratar de encontrarlo de mi, voy a tratar de encontrarlo en mi mediateca. Este es este tipo de aquí y sólo voy a pegar eso. Va a guardarlo y refrescar la página. Entonces tengo mi logo aquí mismo, pero es, creo que es un poco demasiado grande. Probemos algo así como 50 píxeles. Supongo que esto debería estar a la derecha. Y me gustaría saber, simplemente teclear aquí los abogados de texto además de ese logotipo de L. Entonces lo que voy a hacer es que sólo voy a dar clic en agregar. Y voy a teclear en rumbo. Voy a dar click en agregar. Y voy a cambiar el color del texto a este color blanco. O quizá vayamos con el color rojo y tecleemos abogados pin. Ahí vamos. Y cambiemos el tamaño de este texto. Y déjame ver tal vez algo así como 32. Supongo que esto debería estar bien. Y cuando vayamos a la tipografía, quiero que la capitalice. Y tal vez voy a entrar como el píxel para el espaciado entre letras. Esto debería estar bien. Y cuando vamos a nuestra estructura, puede ver que esto realmente cumplió con esta imagen y este encabezado se están poniendo en esta fila, columna de parte
izquierda, supongo. Pero en realidad no podemos seleccionar, no
podemos hacer nada al respecto. Y me gustaría quizás agregar algo de espaciado entre estos elementos. Pero lo que definitivamente me gustaría hacer es asegurarme de que estos tipos estén bien centrados verticalmente en relación entre sí. Entonces lo que voy a hacer es simplemente agarrar esta capa de imagen y voy a dar click rápido div. Poner que tenía una perspicacia que div. Y cuando el diff seleccionado, voy a asegurarme de que mis elementos hijos estén siendo apilados horizontalmente. Ahí vamos, y que la alineación vertical esté fijada en medio. Entonces solo puedo agarrar la imagen y tal vez añadir algo de espacio al pato firmado. Seleccionemos diez píxeles de margen. A lo mejor menos que eso. Cinco deberían serlo. Está bien. Y tal vez vamos a añadir un poco, un poco de espaciado para nuestro, para nuestra fila. Entonces voy a ir a Tamaño avanzado y espaciado. Y intentemos como tal vez 25 píxeles de relleno superior e inferior. O tal vez incluso más
que, que, veamos 35. Supongo que podemos cambiar eso más tarde. Por lo que como puedes ver en tan solo unos clics, agregamos nuestro logo. A lo mejor sólo voy a hacer que este tipo sea un poco más pequeño a algo como 42, tal vez hasta 36, o tal vez hasta cuatro. Vayamos con 40. Pero hay afortunado pequeño problema con él. O sea, quiero que la gente pueda hacer click en este logo si quieren volver a nuestra portada. Y como puedes ver en este momento, puedo dar click en cualquiera de estos elementos. Entonces voy a agarrar mi div. Y aquí en la esquina superior izquierda, voy a dar clic en esta opción de configuración de enlaces. Y esto realmente envolverá todo este div en un enlace. Y por ahora, solo voy a, solo
voy a seleccionar esta página principal y luego agregar el enlace. Entonces ahora cada vez que alguien haga clic en ese div de este enlace, rapero, él fuimos, ella será dirigida a nuestra página principal, principal. Entonces voy a salvar a este tipo. Y supongo que tenemos nuestro logo completo. Entonces ahora tal vez agreguemos como esas piezas adicionales de información, estos chicos aquí mismo a la derecha. Y luego agreguemos nuestro menú. Entonces empecemos a hacer eso a continuación.
85. 13.5Añadir el menú: Entonces empecemos con estos chicos, entonces, los iconos y el texto. Entonces lo que voy a hacer es que voy a añadir un icono. Ahí vamos. Pero quiero asegurarme de que este icono se haya puesto aquí en la fila, ¿no? Y claro que voy a cambiar de color de este tipo a nuestro color rojo. Y voy a cambiarlo de los pulgares a algo así como un teléfono. Creo que fue OR teléfono. Vayamos con éste. Y aquí arriba tenemos estas opciones de estilo de icono para que podamos ir con contorno, sólido o non. Voy a ir con sólido. Y voy a cambiar el color del icono puede ser a nuestro, este nuestro principal color oscuro. Y voy a cambiar el color de fondo a nuestro color rojo así. Y por supuesto, cambiemos el tamaño a algo mucho, mucho más pequeño. Algo como quizá hasta 12. Y cambiemos el espacio alrededor del ícono a algo como puede ser diez. Supongo que esto debería estar bien. Por supuesto que podríamos jugar con estos valores puede ser como hacer que el espacio alrededor icono a algo así como cinco. Hacer el ícono como algunos como 16. Eso va a ser totalmente, totalmente hasta que tienes total libertad a la hora de crear estos iconos o ajustar estos iconos aquí dentro de un oxígeno. Por lo que junto a ese pequeño icono, necesitamos agregar el texto. Por lo que solo voy a dar clic en agregar y luego texto. Déjame hacer click en este tipo de aquí. Y creo que este era el número telefónico. Entonces hagámoslo como 180080555. ¿Por qué no? Y cambiemos el color del texto a nuestro Blanco. Y quizá cambiemos su tamaño de fuente a algo así como diez tal vez. O 12. Supongo que 12 debería ser, debería estar bien. Y además, vamos quizá a añadir algún margen a nuestro icono. Entonces vayamos a Tamaño avanzado y espaciado. Y agreguemos algo así como veamos, cinco píxeles de margen. Supongo que esto debería estar bien. Entonces ahora cuando queremos agregar otro conjunto que consiste en un ícono y un texto, si tan solo fuéramos a duplicar a este tipo y a este tipo, todavía
tendríamos que cambiar como el posicionamiento de estos elementos. Entonces voy a agarrar este texto y ponerlo aquí arriba. Y tal vez agreguemos un poco de espaciado. Por lo que de nuevo, tamaño avanzado y espaciado. Hagamos algo como Stan, diez píxeles de margen. Supongo que esto debería estar bien. Cambiemos este ícono por que me guste icono de correo, algo así. A lo mejor sobre. Éste sería mejor. Y cambiemos este texto. Vamos como contacto en abogados. Lawyers.com fue hacerlo así. A lo mejor sin el apóstrofe. Hagamos solo lawyers.com. Esto debería estar bien. Por lo que el siguiente paso sería simplemente agregar un menú debajo de estos elementos, por lo que debajo de estas piezas de texto. Pero antes de eso, sólo me gustaría comprobar la capacidad de respuesta porque es una buena idea sólo comprobar la capacidad de respuesta a medida que avanza, solo para evitar algunas sorpresas desagradables. Posteriormente una vez que te añadieron otros elementos de tu diseño a tu sitio. Por lo que antes de empezar a añadir nuestro menú, vamos a comprobar la capacidad de respuesta. En el siguiente video.
86. 13.6Verifica la capacidad de respuesta: Entonces ahora vamos a comprobar cómo se comportaría nuestro hetero en dispositivos más pequeños. Entonces vamos a la página contenedor 1120 y abajo. Todavía se ve bien, 992. Eso está bien a 768. Ahora, todos estos elementos empiezan a verse un poco demasiado hacinados a mi gusto. Entonces lo que voy a hacer es que sólo voy a volver a todos los dispositivos, vamos a agarrar al constructor de encabezados, o podríamos agarrar la fila de encabezados si quisiéramos. Y luego aquí mismo se puede ver la pila verticalmente abajo opción. Entonces cuando elegimos la pila verticalmente por debajo de menos de 768, cuando llegamos a ese punto de ruptura, se
puede ver que nuestros elementos están empezando a verse mucho, mucho mejor. Pero también tal vez agarrar nuestro logo. Entonces este es este enlace aquí mismo. Y tal vez podríamos agregar un poco más de espaciado así. Esto debería ser, esto debería estar bien. Entonces supongo que cuando vamos al 488 todavía se ve bien. Entonces ahora podríamos simplemente agarrar nuestro menú como elemento pro manual por instancia, y simplemente ponerlo debajo de estos elementos aquí mismo. Por lo que este número telefónico y dirección de correo electrónico aquí mismo. Entonces empecemos a hacer eso en el siguiente video.
87. 13.7Añade los elementos de menú: Entonces desde nuestro panel de herramientas, agreguemos un menú. Y yo voy a ir con la pro manía. Y por supuesto, no quiero ponerlo aquí mismo. Yo quiero ponerlo aquí mismo. Pero como puedes ver, no se ve tan bien. Es decir, queremos que este menú se PUTE debajo de nuestros elementos o debajo de estos iconos y estas piezas de texto. Entonces supongo que lo que podríamos hacer es simplemente agarrar estos elementos y envolverlos con un div, porque en este momento son beans tech insight y el mismo div y se están poniendo horizontalmente uno al lado del otro. Entonces lo que voy a hacer es que primero voy a agarrar este ícono y rápido con un div, poner ese texto dentro. Después entra, agarra ese ícono y rápido con un div y pon el texto dentro. Pero por supuesto, estos tipos no deberían estar parecidos a esto. Entonces voy a agarrar el div y voy a apilar los elementos secundarios horizontalmente y alinearlos al medio. Lo mismo para este tipo. Apila horizontalmente y alinéelos al medio. Pero claro, esto no resuelve nuestro problema. Entonces lo que aún tenemos que hacer es simplemente que podríamos envolver todos estos elementos dentro de 1. incluyendo el menú pro. Entonces lo que voy a hacer es añadir otro div. Entonces solo voy a envolver, este tipo no agregaría un div, pondría ese div dentro, y luego pongamos ese div dentro de aquí. Entonces, en este punto, lo que queremos hacer es que estos elementos se pongan horizontalmente uno al lado del otro. Pero al mismo tiempo, queremos que se pongan a la derecha y por supuesto, por encima de nuestro menú. Entonces con este div mayor seleccionado, este contenedor principal seleccionado, en realidad tal vez incluso podrías llamarlo principal. Así sólo para que podamos ver qué está pasando aquí. Este tipo seleccionado, voy a solo para asegurarme de que todos, todos estos elementos estén siendo puestos al lado derecho. Ahí vamos. Y luego voy a agarrar este div, y lo voy a envolver con otro div y poner este div dentro de este div. Entonces hay bastantes divs aquí mismo. Pero tal vez cuando empiezo a cambiar sus nombres, cambiemos el nombre de este tipo. Entonces esto va a ser esto, esta será nuestra información de contacto. Ahí vamos. Por lo que ahora mismo, este div está hospedando este número telefónico y esta información de contacto. Y por supuesto, dentro de estos chicos, obtuvimos nuestro ícono y nuestro texto. Ahí vamos. Y cada uno de estos divs, así que éste y éste están mostrando nuestros elementos hijos horizontalmente. Pero queremos que esta información de contacto principal, div esté mostrando también estos elementos horizontalmente. Y ahora mismo, el, ese div los está mostrando verticalmente. Entonces cuando acabamos de dar click en elementos infantiles de violonchelo en stock horizontalmente, se
puede ver que en este momento obtuvimos el efecto que estábamos buscando. Y en este punto tal vez podríamos simplemente agregar algunos, como algún espaciado. A ver, como 25 tal vez. Eso podría ser demasiado parecido. Entonces esto debería estar bien. Por lo que ahora realmente podemos pasar a nuestro menú pro. Entonces sólo voy a agarrarlo. No voy a estar pasando demasiado tiempo aquí mismo. Yo sólo quiero que se vea bien aquí en el escritorio y encendido, y en los teléfonos inteligentes, supongo. Entonces voy a agarrar el menú de escritorio, opción, topografía, y voy a cambiar el color a blanco. Voy a hacer que todos estos elementos sean mayúsculas. Voy a cambiar el tamaño a, digamos 14. A lo mejor hasta 13. Esto debería estar bien. Déjame volver al borde de alineación espacial. Y a lo mejor le sumaré algún margen a la izquierda. A ver como diez. Supongo que diez deberían estar bien, quizá vayamos como 15 incluso. ¿ Por qué no? Y por último, voy a volver a la tipografía y voy a añadir como un píxel de espaciado entre letras solo para que estos elementos se vean así, vamos a ver quizá realmente 14. Sí, vamos con 1414 píxeles. Voy a guardar esto y en realidad podemos ir a nuestra portada y refrescar este sí dirección. Y ahí vamos. Esto es lo que nuestro, cómo se ve nuestro encabezado en este momento, pero por supuesto, todavía
necesitamos cuidar la capacidad de respuesta de nuestros elementos de menú. Entonces solo voy a volver atrás y estoy con mi menú pro, menú seleccionado. Voy a volver un par de veces. Y quiero que este menú sea en realidad, ya sabes, móvil cuando hagas el menú, una vez que lleguemos al punto de ruptura del 768. Entonces cuando vamos al 768, nuestro menú comienza a colapsar a una versión de smartphone. Pero claro que necesitamos cambiar algunas cosas al respecto. Entonces cambiemos el diseño del icono Abrir. No quiero tener el texto. Y creo que quiero tener las justas las barras simples así. Y voy a cambiar el color a color blanco. Ahí vamos. No creo que quiera tener ningún relleno aquí mismo, o tal vez como cinco píxeles, pero no, no demasiado. Y por supuesto, lo que queremos es que este menú se ponga aquí en el centro. Entonces voy a agarrar este contenedor principal, este div principal, y voy a hacer clic en este pila elementos secundarios verticalmente, pesar de que está configurado por defecto. Cuando hacemos clic en él, podemos ver de nuevo todos estos elementos. Y voy a dar clic en Centro de alineación horizontal de elementos. Y nuestro menú está siendo bien centrado así. Pero por supuesto, cuando hacemos clic en él, este menú no se ve demasiado bien con. Todavía tenemos que arreglarlo. Entonces voy a ir al menú móvil. Primero voy a ir a fondo. Y creo que voy a elegir así nuestro oscuro fondo así. Déjame volver ahora mismo. Voy a ir a cerrar el diseño de iconos. Y voy a entrar y cambiar estos barrotes. Voy a usar sólo este icono de la cruz. No quiero, no quiero, no
necesito ningún texto. Voy a cambiar el color a blanco. Ahí vamos. Entonces ahora cuidemos nuestra topografía, de disposición de nuestra topografía. Entonces volvamos atrás. Vayamos a Estilos de menú. Y quiero que los artículos estén alineados al centro. Entonces vamos a salvar a este tipo y vamos a refrescar nuestra página. Y vamos a comprobar realmente cómo se verá en los dispositivos más pequeños. Y ahí vamos con esto es nuestro, este es nuestro menú móvil. De nuevo, no quiero que sea demasiado elegante. Te lo dejaría a ti si quieres agregar algo de transparencia y tal vez jugar con este ícono o algunos efectos que se cierren. Va a estar totalmente en ti. Yo sólo quería que fuera sencillo y sencillo sólo para que este menú funcionara como es, como debería. Por supuesto, tal vez podríamos agregar algunos, tal vez algún margen. En realidad, vamos al tamaño y al espaciado. Por supuesto que tengo mi menú pro activo, y quizá agreguemos algo así como 12 píxeles de margen. Y ahí vamos. Cuando vamos a todos los dispositivos, así es como se ve nuestro encabezado de menú. Y una vez que lleguemos a ese 768, así será nuestro menú en los dispositivos más pequeños, como tabletas y también en smartphones. Y por cierto, si quieres, por ejemplo, en este punto de ruptura antes del 68 o incluso 7068, si quieres, si quieres que estos elementos se apilen verticalmente, o tienes que hacer es agarrar nuestra info de contacto div. Y otra vez haga clic en apilar elementos secundarios verticalmente y luego haga que se centren así. Y por supuesto todavía podríamos quizás agregar algo de espaciado. Entonces sólo voy a agarrar este número telefónico. Este número telefónico div, y estoy tal vez vamos a intentarlo como diez píxeles. Y esto debería estar bien. Por supuesto, esta es una opción. No tienes que hacerlo. Pero ya sabes, con el oxígeno obtienes mucha flexibilidad en cuanto al diseño de estos elementos. Creo que voy a volver a donde estaba antes. Creo que esto se ve un poco más limpio. Y sí, ahí vamos. Tenemos nuestra cabecera. Bien creado. Pero una cosa que me gustaría hacer es que me gustaría agregar como un encabezado pegajoso. Como puedes ver, tenemos un encabezado pegajoso como este en nuestro diseño de referencia like. Entonces, en realidad empecemos a cuidar nuestro y pegajoso encabezado en el siguiente video.
88. 13.8Añade el encabezado pegajoso: Entonces ahora hagamos realmente esta cosa de cabecera pegajosa. Entonces conseguimos este encabezado, ese es nuestro encabezado regular. Pero queremos agregarlo como una versión más pequeña de un encabezado
una vez que el usuario se desplaza hacia abajo en nuestra página. Entonces conseguimos esta fila de encabezado, voy a duplicar. Y digamos que para mi, mi palo Keller, no
quiero ver estas informaciones, estas piezas de información aquí arriba. Entonces sólo los voy a quitar. Entonces voy a ir a principal una info de contacto y sólo voy a quitarla. Ahí vamos. Acabo de recibir el menú. Y supongo que tal vez podríamos incluso tirarlo aquí mismo. Y no necesitamos este div. Y lo voy a hacer más pequeño. Entonces para la tipografía manual de escritorio, lo
voy a hacer como tal vez diez píxeles. Esto debería estar bien. Y por nuestro logo, déjame solo agarrar el logo. Hagamos la imagen más pequeña, como 25 tal vez. Y la fuente, hagámoslo 25. O tal vez incluso menos que eso, veamos 18. Por lo tanto, para que ese efecto de cabecera pegajoso funcione correctamente, necesitamos agarrar nuestro constructor de encabezados. Y aquí para la opción Sticky, elijamos encabezado pegajoso habilitado. Y creo que voy a dejar la distancia de desplazamiento tal como está, pero quiero desvanecerme en el encabezado pegajoso para desvanecerse. Y voy a hacer que esta animación de desvanecimiento sea un poco más rápida. 0.2 segundos. Ahí vamos. Y ahora solo voy a seleccionar esto tenía una fila que se supone que es pegajosa. Y tal vez sólo voy a disminuir este valor de relleno a, digamos diez píxeles así. Y voy a volver a la pestaña primaria, y sólo quiero mostrarla en pegajosa. Ahí vamos. Y esta primera fila de cabecera, quiero ocultarla en pegajosa. Por lo que voy a guardar mi menú, voy a guardar mi página. Y luego déjame refrescar la página. Y en este momento no podremos ver nuestro encabezado pegajoso porque aquí no tenemos ningún contenido. Pero si solo agregamos algunos, algunos les gustan cosas realmente arbitrarias, vamos a hacer una sección. Añadamos algo de texto, como algún texto ficticio. Ahora solo voy a copiar rápidamente un montón de textos así. Y voy a salvarlo. Y luego voy a refrescar la página. Obtenemos nuestros textos, y luego empezaremos a desplazarnos hacia abajo. Se puede ver nuestro cabezal pegajoso muy bien desvaneciéndose en. A lo mejor si hiciéramos la animación un poco más larga, Oh, esa animación sería más agradable. Pero creo que esto funciona totalmente, totalmente bien. Entonces claro que me voy a deshacer de esta sección. No necesito este texto. Pero lo que quiero hacer es que solo quiero agregar el módulo de contenido interno para que realmente podamos hacer que nuestra plantilla funcione. Y nos encargaremos de la cabecera una vez que tengamos todos los demás elementos en su lugar. Entonces conseguimos nuestro encabezado, obtuvimos nuestro contenido interno, y ahora en realidad estamos listos para empezar a construir nuestra página, empezando por el encabezado. Bueno lo haría el héroe y el deslizador. Entonces empecemos a hacer eso a continuación.
89. 13.9Añadir el deslizador: Entonces ahora echemos un vistazo a cómo crear el control deslizante. Vamos a crear un, sólo unas diapositivas con algunas imágenes de fondo y algo de texto. Entonces lo que voy a hacer es ir a mi página de inicio y quiero editarla. Y sí quiero editarlo con oxígeno. Entonces está bien, podemos empezar agregando una sección simple a nuestra página. Entonces voy a escribir en sección. Y quiero que esta sección se estire por todo el conjunto, toda la página. Entonces voy a ir a Tamaño avanzado y espaciado. Y quiero configurar el contenedor seccional con a ancho completo. Y quiero deshacerme del relleno. Entonces solo voy a escribir 0 y luego solo tienes que hacer clic en aplicar. Todos. Por lo que ahora no tenemos ningún relleno aplicado a arriba e abajo, izquierda y derecha. Entonces dentro de esa sección, vamos a insertar nuestro, nuestro slider. Entonces eso es lo que voy a hacer. Sólo voy a dar clic en Agregar y escribir en Slider. Y está que hay algunas cosas que tenemos que hacer cuando estamos creando nuestro slider con esas imágenes de fondo de ancho y altura completa. Para empezar, sólo voy a deshacerme de dos diapositivas. Yo sólo quiero tener éste porque vamos a estar duplicando hasta más tarde. ¿ Y cuándo seleccionaría el control deslizante? Voy a ir al estilo y voy a ir con la animación descolorida. La velocidad está bien. Podemos dejarlo en eso. Y me gustaría quitar el relleno alrededor de las diapositivas. Y cuando vayamos a la configuración, no
quiero mostrar las flechas. No quiero mostrar los puntos. Yo sí quiero que las diapositivas sean infinitas, pero eventualmente, vamos a querer configurar esto para la reproducción automática. Pero por ahora, sólo voy a dejarlo así. No quiero que esto esté en un avión aquí en esta ventana de vista previa. Entonces lo último que hacer aquí será ir al tamaño y el
espaciado y establecer la altura de mi deslizador en algo así como 90 vh, que más o menos estiraría a través bien estirada de arriba a abajo de la parte restante de mi ventana gráfica. Por supuesto que podríamos más adelante simplemente tal vez aumentar o disminuir este valor. Eso va a depender de lo grande que vayas a establecer tu encabezado, qué tan dicho va a ser en tu caso. Por lo que conseguimos nuestra configuración de deslizador. Ahora solo configuremos rápidamente nuestra primera diapositiva. Entonces lo voy a seleccionar y voy a ir a Avanzado. Y voy a ir a segundo plano. Y voy a buscar una imagen de fondo. Voy a ir con este, héroes slider uno. Yo sólo lo voy a seleccionar. Por lo que lo agregamos al primer fondo. Pero como pueden ver, no
estamos viendo como toda la imagen de fondo. Y podríamos, por ejemplo, simplemente aumentar el tamaño de la diapositiva. Pero también podríamos simplemente ir a nuestro deslizador,
ir al estilo, y luego simplemente elegir todas las diapositivas se estiran a la misma altura. Y ahí vamos, podemos ver nuestra imagen. Entonces básicamente, estas son nuestras opciones de configuración preliminares que tenemos que establecer para que nuestro control deslizante funcione. Además, vamos a ir rápidamente a nuestra diapositiva avanzada y luego fondo. Nosotros sí configuramos esa imagen de fondo, pero también vamos a establecer el tamaño de fondo para cubrir. Y entonces vamos a asegurarnos de que el punto de enfoque esté establecido exactamente en el punto central de nuestra imagen. Entonces voy a por el tipo de valor de la izquierda en 50%, y voy a hacer lo mismo para la parte superior. Y tenemos nuestro enfoque, áreas de
enfoque establecidas en el centro de nuestra ventana gráfica. Entonces ahora realmente podemos jugar con nuestra imagen de fondo si quieres dejarla así. Bueno, eso depende de ti. Pero lo que quiero hacer es que quiero tener mucho contraste
entre nuestra imagen de fondo y el texto que, eso va a venir a continuación. Y también me gustaría agregar algunos como diseño específico. Dana es como la cosa que yo específico a nuestro, a nuestro diseño, que a saber será alguna, algo como overlain y tal vez como un color o simplemente jugando con las Opciones de mezcla de nuestra imagen de fondo. Entonces empecemos a hacer todo eso a continuación.
90. 13.100 la primera diapositiva: Entonces empecemos tal vez con agregar algo de color sobre esta imagen. Entonces aún así, en mis opciones Avanzadas y luego de fondo, voy a elegir el color de superposición de imagen. Y voy a ir con nuestro rojo pálido guardado. Y voy a disminuir la transparencia mientras que la opacidad realmente hace algo que tal vez como 2.750 a 75%. Y si quieres ir con este tipo de a,
un efecto será mi invitado. Podrías hacer eso, pero también podría jugar con nuestro modo de mezcla de fondo de fondo, pero también con nuestro adjunto de fondo, que, tal vez hablaremos un poco más tarde. Entonces lo primero que me gustaría hacer es que me gustaría agregar tal vez, algunos, eventualmente
añadirán más contraste entre la imagen de fondo y el texto que va a venir en tan solo un segundo. Entonces de esta lista, lo que voy a hacer es que voy a elegir multiplicar, lo que en realidad oscurecerá las zonas más oscuras aquí a mi imagen. Y en este caso, tal vez podríamos hacer esta imagen tal vez incluso un poco más oscura y aumentar esto, la transparencia a tal vez algo como esto. A lo mejor hagamos un poco más oscuro a este tipo. Algo así debería ser esto, esto debería estar bien. Está bien. Dejémoslo así. Entonces ahora mismo, si solo sigo en mi capa deslizante, capa deslizamiento, si voy a agregar,
agreguemos un encabezado. Ahí vamos. Y voy a cambiar el color del texto a blanco. Se puede ver que ahora mismo tenemos mucho,
mucho, ya sabes, sólo jugando un contraste entre nuestra imagen de fondo y nuestro texto. Y también lo agregamos a nuestro diseño principal, quien podría comprar en color acento a nuestra imagen de fondo. Entonces lo que este tipo seleccionó, voy a ir demasiado bien. Voy a ir a mis opciones. Y voy a aumentar el tamaño de la fuente a algo así como quizás 66. Vamos, hagamos tal vez 66. Esto debe estar alineado. Y voy a teclear creo en el original fue brindamos ayuda
legal para y voy a ir a topografía avanzada. Y aquí dentro, tal vez sólo aumentemos el espaciado entre letras a uno. Eso va a sumar un poco. Poseer nuestro diseño. Y vamos a la altura de línea. Voy a ponerlo en 1.1. Y supongo que eso es todo. Sólo voy a asegurarme de que mi etiqueta esté establecida en H2. Y ahora mismo lo que voy a hacer es simplemente voy a duplicar este rubro. Y tal vez disminuya el tamaño de la fuente, algo así como tal vez 48 o tal vez incluso menos. Porque cuando vamos a la tipografía, quiero ponerla en mayúsculas y el espaciado entre líneas uno está bien. Entonces digamos que esto será como, no lo sé, trabajar en Andrew Reese. Y tal vez sólo voy a disminuir el tamaño siempre tan ligeramente deleite 3-6 tal vez, o 38. Esto debe estar a la derecha. Y supongo que el último paso aquí sería simplemente agregar un botón. Entonces eso es lo que voy a hacer. Voy a añadir un botón y voy a teclear algo como ven a aprender más, llano y sencillo. Conoce más. Y voy a cambiar el color del botón a blanco. ¿Por qué no? Botón que se cierne a nuestro liso rosa. Yo solo quiero una retroalimentación sencilla y sencilla. Y voy a cambiar el color del texto a negro, o tal vez este muy parecido al color azul oscuro. Ahí vamos. Y en lo que respecta a la tipografía, voy a ir a la tipografía avanzada. Yo quiero ponerlo en mayúsculas. Y tal vez otra vez, sólo voy a aumentar el espaciado entre letras a un píxel. Ahí vamos, ahí vamos. Y tal vez sólo voy a introducir un poco de espaciamiento alrededor de este rumbo de lesiones de trabajo. Vamos a ir a Tamaño avanzado y espaciado y añadir los islotes como 25 arriba y abajo. Eso es un poco demasiado modula a los entrenadores 1010 en la parte inferior. Y ahí vamos. Yo sólo voy a salvar a este tipo. Y ahora solo voy a ver mi página en modo incógnito. Y ahí vamos. Esto es, este es nuestro sitio. Esta es nuestra página aquí mismo. Y por supuesto lo último que habría que hacer sería simplemente duplicar esta diapositiva y luego sólo el cambio de ese texto.
91. 13.11el deslizador del deslizador: Entonces realmente todo lo que necesitamos hacer es simplemente agarrar nuestra diapositiva y sólo voy a duplicarla. Y lo voy a duplicar dos veces. Entonces para nuestra segunda diapositiva, sólo
voy a ir a fondo avanzado. Y voy a agarrar este slider héroe a imagen JPEG. Y para la tercera, y vamos a hacer casi lo mismo. Voy a buscar esta imagen aquí mismo, slider
héroe o tres imagen de búsqueda. Y déjame simplemente cambiar esto. A lo mejor empecemos con la segunda diapositiva. Vamos a teclear como los accidentes de tránsito pueden ser. Ahí vamos. Y para este, tecleemos algo así como temas personales. Y creo que aquí tenemos la edición de fondo. Eso no es lo que queremos. Definitivamente. Eso es que se ha vendido este tema personal. Entonces vamos a salvar a este tipo. Voy a ir a deslizador otra vez. Y ahora realmente puedo entrar activará la función de reproducción automática. Y ahora cuando vayamos a nuestro sitio, permítanme simplemente refrescar esa página. Y luego vamos, nuestro, nuestro deslizador está funcionando, funcionando bien. Por supuesto, si lo hacemos más pequeño, se
puede ver que es completamente, completamente receptivo. Todo se ve, se ve bien. Entonces ahí vamos. Tenemos el deslizador. Creo que voy a apagar la reproducción automática sólo para que nuestras cabezas no duelan. Y supongo que podemos pasar a nuestro pozo, otra sección, supongo, que será esta sección aquí mismo. Nos dieron algo de texto puesto en columnas. Tenemos algo como una enorme pieza de información aquí y tenemos algunas imágenes aquí abajo. Pero a mis días estas imágenes son como justo, ya sabes, poner su Justo para que haya algunas imágenes, no
sirven como un, como un propósito más grande. Hace diseño a mis días por lo menos. Entonces vamos a cambiar eso. En realidad vamos a agregar una imagen y tal vez le
vamos a agregar un efecto de paralaje. Y tal vez vamos a superponer algo así como un, no
sé, conseguir un texto de cotización gratis o algo así. Pero primero vamos a crear este tipo de texto aquí mismo. Y luego el impuesto en estas tres columnas. Entonces empecemos a hacer eso a continuación.
92. 13.12Añadir la sección de información: Por lo que ahora empecemos a crear la siguiente sección con algunas pequeñas piezas de información. Entonces, como de costumbre, voy a empezar con una sección, ésta de aquí. Y no voy a cambiar el ancho de la misma. Y creo que ni siquiera voy a estar cambiando el relleno. Dejémoslo tal como está. Y por supuesto, quiero que esta sección no esté en esta sección, así que déjame simplemente sacarla. Ahí vamos. Entonces en esta sección, sólo
voy a añadir un encabezamiento. Y quiero, creo que quiero que todos los elementos de esta sección se pongan al centro. Entonces eso es lo que voy a hacer. Y creo que voy a agarrar este rubro. Y vamos a teclear. Creo que fue nuestra firma. Déjame sólo revisar el texto recuperado. Está bien. Nuestra firma. Recuerda vert. De acuerdo, así que sólo voy a aumentar el tamaño de la fuente. Y de nuevo, voy a ir a la tipografía y aumentar el espaciado entre letras. Ahí vamos. Y podríamos adivinar, sólo sigue este diseño y un poco más cerca y hazlo como una fuente de asonancia abierta en lugar de nuestro encabezado. Pero yo pensaría que soy, creo que quiero mantenerlo un poco más consistente, así que sólo voy a dejarlo así,
pero supongo que tal vez podamos como agregar un subrubro aquí mismo. Y lo podemos escribir con apertura, tristeza. Entonces, antes de hacer eso, déjame solo comprobar la altura de la línea. Voy a hacerlo 1.1 porque básicamente funcionará bien en todos nuestros dispositivos, especialmente en dispositivos más pequeños. Y entonces sólo voy a añadir un texto. Ahí vamos. Y aquí dentro sólo voy a teclear. Creo que se va omega. Vamos a hacer más todo como dos más sólo para que puedas ver, sólo para que podamos ver lo que estamos a punto de ver. Así que aguanta conmigo un segundo. Entonces, solo tecleemos más. Y luego voy a teclear plus. Y tecleemos el símbolo del dólar, 100, k Dejémoslo así. Entonces lo que quiero hacer en este momento es, bueno primero solo vamos a aumentar el tamaño de la fuente a algo así como tal vez 32. Y lo que quiero hacer es que quiero quedarme con este tipo como es este. El mundo está sobre el texto. Pero este texto, este más 100 k O podemos hacer 100 mil si quieres. Yo quiero hacerlo diferente. Yo quiero querer darle un estilo diferente. Entonces la forma en que podríamos hacer eso es que solo voy a seleccionar esa pieza de texto que quiero, que quiero darle un estilo diferente. Este tipo de aquí y aquí en la parte superior, solo
voy a dar click en este rap con componente español de botones. Yo sólo voy a dar click en él. Y ahora mismo, si vamos a nuestro texto, el módulo, se
puede ver que dentro tenemos este pequeño módulo span, que básicamente nos permitirá ahora sólo cambiar esa pequeña pieza de texto. Ahora podemos hacerlo más grande. Podemos hacerla más pequeña y definitivamente podemos cambiar el color de la misma a algo así. Y tal vez podríamos simplemente agarrar el lapso y tal vez cambiemos el peso de la fuente a algo un poco más grande, como 600. A lo mejor. Esto debería estar bien. Y tal vez sólo voy a agarrar esto sobre el texto y voy a hacerlo
un poco más pequeño a algo como 20 píxeles o 22. Pero como pueden ver, cuando estamos haciendo cambios a este tipo, bueno, la alineación es, bueno, simplemente no está ahí. Entonces lo que podrías hacer es simplemente agarrar este texto y podríamos ir a avanzado que a maquetación. Haga clic en esta opción de display flex, y luego simplemente elija una línea de ítems centrados para asegurarse de que estos estén realmente alineados muy bien con el sensor. Al igual que adivinar esto sería un poco redundante demasiado bien, como esta pieza de texto otra vez y luego más justo aquí. A lo mejor saquemos a este tipo. Y en lugar de terminar, sólo
voy a escribir más. Entonces ahí vamos. Y tal vez en lugar de este espacio, déjame simplemente agarrar este lapso. Y luego voy a ir al tamaño y el espaciado. Y sólo voy a insertar tal vez como un pequeño margen a la izquierda. Entonces eso sería que estaría bien, eso sería eso. Y creo que en nuestro original tenemos desde 1970. De acuerdo, entonces vamos a escribir eso. Entonces otra vez, sólo voy a agregar texto. Ahí vamos. Y voy a teclear desde 1970. Y hagámoslo hagamos 600 tal vez. Y tal vez hagámoslo como 18 píxeles. A lo mejor incluso, veamos 700. Hagamos la diferencia. Lo hará. Y ahí vamos. Básicamente conseguimos este intestino la sección y creamos. Entonces lo siguiente que tendríamos que hacer es que tendrías que añadir estas tres pequeñas piezas de texto debajo de esta sección. Entonces empecemos a hacer eso a continuación.
93. 13.13Añadir texto en columnas: Entonces como de costumbre, sólo voy a añadir una sección. Y dentro de esta sección, sólo
voy a añadir columnas. Y voy a seguir adelante y elegir este tres por 33 por 33. Por lo que consiguió tres columnas para nuestro texto. Y para poblar nuestros textos con el, con algún contenido ficticio. Voy a ir otra vez a aprender. Yo sólo voy a buscar algo de Lorem Ipsum. Y yo sólo voy a agarrar algunos de, algunos de este texto. Vamos a ir tal vez algunos amuletos sólo corromper todo este párrafo. ¿Por qué no? Entonces de nuevo, en mi sección, voy a ir a mi primer div y voy a añadir un texto así. Y yo sólo voy a escribir eso. Entonces vamos tal vez déjame sólo, dejémoslo así. Y tal vez sigamos como click, pulsa Entrar aquí. Sólo, ya sabes, sólo para tener algo, algo como esto. Y hagámoslo así. Y supongo que podríamos simplemente duplicar este impuesto. No menos que lo hagamos demasiado complicado. Pero a lo mejor podríamos Vamos a quitarnos algo de este texto así. Sólo para que nos pusimos justo para que te den algo de variedad, déjame simplemente borrar esto. Y déjame simplemente borrar este error tipográfico. Y de nuevo, sólo voy a agarrar este texto. A lo mejor sólo voy a duplicarlo. Entonces vamos y luego sólo lo ponemos en ese último div justo aquí. Y tal vez esta vez sólo voy a dejar sólo este párrafo como ese. Pero cuando echemos un vistazo, déjame simplemente guardarlo. Cuando echamos un vistazo a nuestro original, podemos ver que tenemos esto primero, a diferencia de un sangría, como un guión, que esta letra es más grande que todas las demás. Entonces parece que cuando todos estamos empezando un párrafo de una manera muy, muy elegante. Entonces otra vez, lo que podemos hacer es que sólo voy a agarrar esto primero, déjame sólo agarrar esta primera letra. Como puedes ver, a veces no es tan fácil. Y de nuevo, sólo voy a dar clic en un lapso. Y voy a cambiar tal vez el font-weight como 700 y aumentar el tamaño de este tipo a algo así como quizás 60 píxeles. Entonces voy a quizá aumentar el margen a su alrededor para que me gusten tal vez diez a un lado. Y entonces pueden ser diez en la parte inferior. Y cuando me vaya,
voy a ir a la tipografía y cambiar la altura de la línea a una. Y tal vez vamos a deshacernos de este margen aquí abajo, así que nuestro párrafo se ve un poco mejor. Pero como pueden ver, tenemos un pequeño problema aquí mismo. Tenemos demasiado espacio aquí en la parte superior. Entonces para arreglar eso, solo voy a agarrar este lapso aquí mismo. Y de nuevo, voy a ir a maquetación avanzada. Y aquí solo voy a seleccionar flotador a la izquierda. Y ahí vamos. El resto de textos aquí mismo se está poniendo a la derecha, y este tipo flota a la izquierda. Entonces si solo salvé a este tipo y me dejara refrescar mi no eso me dejara simplemente seguir adelante y refrescar la página. Voy a bajar. Se puede ver que tenemos nuestro texto aquí mismo. Y nuestra riqueza, esta pieza de texto aquí mismo. Y si simplemente lo hacemos más pequeño, podemos ver que todavía necesitamos arreglar algunas cosas, pero nuestros párrafos están funcionando bien. Si sólo agarro nuestra incredulidad, Este era este tipo. Y voy a ir a la tipografía avanzada. Voy a alineación de texto a centro. Entonces, veamos si eso ayuda. Permítanme que lo refresque. Ahí vamos. Tenemos nuestro libro de texto al centro. A lo mejor podríamos disminuir esta suma, esta brecha entre estos elementos. Entonces sólo voy a agarrar esta sección. Ve a Avanzado, voy a ir al tamaño y el espaciado y tal vez deshacerme de esto, deshazte de este relleno aquí mismo insertando solo 0 píxeles. Y si solo guardamos eso, nuevo, refresca mi página. Ahí vamos. Ya lo tenemos. Nos lo arreglamos. Entonces ahora el siguiente paso sería, como mencioné antes, solo agregar como una bonita división una imagen aquí en la parte inferior. Pero no vamos a ser sólo, ya sabes, entrando. Solo estamos pegando en solo dos imágenes aleatorias así. Vamos a hacer una sección de página completa, sección ancho de
alberca con ellos imagen de fondo paralax. Y tal vez vamos a añadir algo de texto sobre esa imagen. Entonces empecemos a hacer eso a continuación.
94. 13.14Añadir la sección de paralax: Entonces otra vez, con lo que voy a empezar es que voy a añadir una sección. Ahí vamos. Y esta sección se estará estirando por el borde izquierdo de nuestra ventanal hasta el borde derecho de nuestra ventanal. Entonces para el contenedor de sección con, voy a seguir adelante y elegir ancho completo. Y déjame simplemente agregarle una imagen de fondo. Y de mis imágenes que tengo aquí mismo, voy a elegir la que llamé paralaje. Entonces voy a seleccionar la imagen. Y supongo que tal vez podríamos agregar un color de superposición de imagen. Entonces voy a seguir adelante y agarrar mi imagen azul oscuro y sólo disminuir este SY, Bueno la, la, la opacidad a algo así. Y voy a añadir algo de texto. De nuevo, voy a añadir un encabezamiento. Entonces un rumbo como éste. Y déjame simplemente cambiar rápidamente su color a blanco para que puedas verlo. Entonces, solo tecleemos, obtengamos una consulta gratuita, algo así. Y voy a quizá aumentar el tamaño de la fuente, algo así como 55 y sólo ver esos 56. Entonces 56, ahí vamos. Voy a ir a topografía avanzada y vamos a hacer la alineación del texto para centrar el espaciado de letras a una altura de línea a una, 0.1. Ahí vamos. Y voy a agarrar mi sexual y asegurarme que todo esté bien alineado al centro. Ahí vamos. Eso sólo vamos a añadir algunos textos simples debajo de esto. Consigue una consulta gratuita sobre el texto, y desde aquí vamos a pedir prestado el texto. Entonces tal vez solo voy a duplicar a este tipo y ponerlo debajo de mi rubro así. Y también lo voy a hacer blanco. Y supongo que lo podemos alinear al centro. Y vamos y tal vez déjame solo llamar a conejo y hacer que se vea así. Ahí vamos. Y si quieres, puedes agregar más texto aquí abajo. Pero creo que también voy a añadir un poco de espaciado entre mi encabezado y el, bueno, esta pieza de texto y el fondo que va a ser que voy a poner debajo de esta pieza de texto. Entonces otra vez, voy a ir con 1010. Y lo último que hay que hacer aquí, sólo añadir un botón. Ahí vamos. Y yo sólo voy a escribir algo así como, bueno aprender más así como lo hicimos antes. Y tal vez sólo voy a cambiar el color del botón a este color rosa. Y en lo que respecta al tamaño del botón, sólo
intentemos 12. Y tal vez cambiemos el tamaño del texto a 12 también. Y voy a ir a topografía avanzada, espaciado entre letras
mayúsculas, altura de línea 1.1. Esto debería estar bien. ¿ Y sabes qué? A lo mejor vamos a añadir un poco más de margen de relleno entre
eso, ese pedazo de texto y, y este, este botón. Y tal vez hagamos que el botón sea un poco más grande. Hagámoslo un poco más audaz. Algo así como 18. Y voy a aumentar el tamaño del texto a algo así como 16. Esto debería construir ¿verdad? Y tal vez sólo voy a añadir más espaciado, más relleno para a mi sección porque no lo sé, supongo que podríamos. Será simplemente más fácil para nosotros ver el efecto Parallax. Ahora una vez queríamos sumar más, más espacio entre estos elementos,
entonces, ¿qué seleccionaría mi sección? Voy a ir a antecedentes avanzados. Y para este paralaje de apego de fondo, voy a elegir fijo. Y por supuesto todavía necesitamos establecer el tamaño de fondo para cubrir. No queremos que se repita, y queremos asegurarnos de que nuestro,
nuestro punto de enfoque esté establecido en el centro. Y vamos, voy a salvarlo. Y ahora sólo vamos a nuestra página principal. Yo lo voy a refrescar. Y cuando ahora nos desplazamos, se
puede ver que nuestra imagen de fondo es en realidad scroll. Bueno, es, sigue fijo, pero todo el resto del contenido sigue siendo el mismo. Y si yo sólo, sólo, sólo para ver un poco mejor lo que este efecto está haciendo en realidad por nosotros. Yo sólo voy a duplicar esta sección. Lo voy a poner aquí abajo si puedo. A veces con oxígeno necesita un poco complicado para hacerlo bien. Entonces tenemos esta parte justo aquí. Y déjame refrescar de nuevo a este tipo. Entonces ahora si nosotros, si lo movemos, puede ver que en realidad estamos, ya sabes, tenemos algunos más, bueno, todo el contenido se mueve y ese suelo de cama permanece fijo. Y tal vez podríamos simplemente agarrar un poco más de texto. Y vamos a, sólo para hacer la sección de un más grande, ir a entrar algo más de texto, guardar eso de nuevo, y refrescar mi página. Y ahora podemos ver que estamos viendo un poco más de
nuestra de nuestra imagen de fondo en la imagen de fondo en la parte posterior,
sí, imagen de fondo en la parte posterior. Pero lo más importante es que es una manera muy sencilla de conseguir este efecto de paralaje que funcionará, ya
sabes, a través de todos los dispositivos sin importar lo grande o pequeño que sea. Y sin embargo ahí vamos. Así de sencillo es obtener una sección de fondo de paralaje aquí dentro del oxígeno. Y creo que se ve mucho,
mucho más atractivo e interesante que sólo estas dos imágenes de plano que están aquí en nuestro diseño original. Entonces no voy a estar usando la sección. Y cuanto más, sí quiero agregar otra sección que será esta sección de áreas de práctica. Entonces este tipo de aquí, primero tenemos que agregar como este texto de ayuda legal, luego este rubro áreas de práctica, y luego algunos, algunos iconos y un botón aquí abajo. Entonces hagámoslo a continuación.
95. 13.15Añadir la sección de áreas de práctica: De acuerdo, retoca en el u consigue unas secciones de consulta gratuitas. Por lo que ahora sumemos estas secciones de áreas de práctica. Entonces vamos a empezar con algunos, con algún texto aquí en la parte superior, y luego vamos a añadir estos iconos aquí mismo en la parte inferior, por
supuesto, en la parte inferior. Entonces vamos a añadir una nueva sección. Solo voy a dar clic en Agregar sección. Ahí vamos. Y por dentro voy a añadir mi módulo de texto. Y luego voy a añadir un módulo de encabezamiento así. Por lo que primero voy a seleccionar mi sección y quiero asegurarme de que alineación
horizontal del elemento esté establecida en el centro. Porque, ya sabes, queremos mantener todo bien orientado, bien centrado. Y vamos a teclear aquí. Creo que fue una ayuda legal así. Y cambiemos el color del texto a un color rojo. Y Mindless Cambia el font-weight a algo así como 700 o tal vez 600. Y luego vayamos a la tipografía. Hagamos a este tipo mayúscula. Y tal vez agreguemos realmente una ley, un píxel de espaciado así. Y también voy a subrayar esta pieza de texto. Yo sólo voy a poner la decoración del texto para subrayar así. Entonces conseguimos nuestra primera parte de texto. Hagamos 700 en realidad. Y tal vez hagamos como 1212 píxeles o 13 píxeles. Entonces ahora todo lo que tenemos que hacer aquí es simplemente escribir en áreas de práctica de PR a las que vamos. Y creo que nuestra talla era 56. Entonces voy a seguir adelante y teclear en 56. Y vayamos a la tipografía. Voy a alinearlo al centro y hacer un píxel de espaciado entre letras así. A lo mejor sumemos también la altura de línea a 1.1. Ahí vamos. Ahora si quieres, tal vez podrías agregar algo de espaciado aquí abajo para hacer una oda, para agregar algunos espacios en blanco, para dejar que algunos,
dejar que un poco de aire entre estos dos elementos. Pero eso es todo, eso es todo una cuestión de gusto en este caso, porque lo más importante aquí es agregar estos iconos aquí mismo. Y tenemos que hacerlo, tenemos que hacer un poco de pensamiento antes de que realmente agreguemos todos estos iconos eso, y tenemos que hacer esa cosa. Tenemos que pensarlo. Y solo para llegar a la mejor, mejor práctica, mejor saber, mejores pasos para hacer eso, hacer las columnas, hacer esas columnas o
hacer que esa sección sea lo más fácil posible y lo más rápido posible. Entonces por supuesto, lo que necesitaremos es que vamos a ser pulcritud todas las columnas. Entonces conseguimos cuatro iconos así. Entonces voy a agregar una columna o columnas en realidad, y voy a elegir 25 por 25-25. Entonces nos dieron cuatro divs. Si solo echamos un
vistazo, echa un vistazo aquí, tenemos cuatro divs en total en estas columnas. A lo mejor vamos a mover a este tipo sólo un poco hacia abajo. Por lo que para hacer el proceso lo más rápido posible, recomendaría usar las clases en este caso, pero no solo por como un ícono o como un encabezado tal vez alguna pieza de texto debajo que no lo hubiera hecho, sino también al contenedor entero. Porque lo que quiero hacer es que sí quiero conseguir este tipo de efecto aquí mismo. Al igual que lo que el, lo que las fronteras, pero quiero hacerlo un poco diferente. Entonces déjame mostrarte a lo que me refiero. Voy a cambiar quizá primero el nombre de este tipo aquí mismo. Entonces esta es nuestras primeras columnas. Sólo voy a nombrarlo como uno. Y dentro voy a añadir un div. Entonces solo un simple div. Entonces ahora tenemos un div dentro de ese div. Entonces lo que quiero hacer ahora es que voy a agregar una clase a ese div. Entonces llamémoslo Icon, tal vez como ícono, una columna como esa. Entonces lo que quiero hacer con este tipo es que quiero asegurarme de que esté configurado en 100 pixeles, 100% de ancho. Entonces solo voy a escribir eso en 100%. Y quiero asegurarme de que todos los elementos infantiles se hayan estado escalonando la vista verticalmente, y los voy a alinear horizontalmente al centro y verticalmente al medio. Entonces estoy seguro de que todos mis elementos siempre estarán exactamente bien en el centro, tanto horizontal como verticalmente. Lo que también me gustaría hacer es agregar un borde alrededor de este div. Entonces voy a ir a fronteras avanzadas y voy a agarrar, tal vez vamos a agarrar nuestro color rosa, rosa pálido. Y quiero asegurarme de que el ancho esté establecido en uno y que esté establecido en sólido. Entonces sé que es efecto muy, muy ligero, pero espero que lo puedan ver. A lo mejor sólo agarraré mi página y pegaré esa URL en Modo incógnito. Y por supuesto sería buena idea guardar primero mi página como de costumbre. Y ahora voy a refrescar esto. Y aquí está nuestro div. Sé que es un efecto muy, muy ligero, pero está ahí. Entonces lo que voy a hacer ahora es que voy a añadir un estado a nuestra clase. Entonces conseguimos nuestra clase, esta columna de iconos. Lo que quiero hacer ahora es que quiero dar click en la opción estatal, y quiero seguir adelante y elegir hover. Y en el hover, quiero que esto, esta frontera cambie. Entonces voy a ir a Avanzado. Entonces voy a ir a Borders. Y vamos a elegir mi color, este tipo de aquí. Y el ancho va a ser de un píxel. Y eso va a ser, bueno, la frontera va a ser sólida. Entonces cuando guardamos esto y déjame solo tal vez rápidamente agregar algo como un poco de texto dentro para que realmente puedas ver ese borde. Yo lo voy a guardar. Yo sólo quiero que entiendas el efecto. Entonces tenemos nuestro, nuestro div justo aquí. Y cuando pasas por alto, puedes ver que nuestra frontera está apareciendo cuando pasamos por encima de este div. Pero no quiero eso, no
quiero que esta frontera aparezca así. Lo que quiero hacer es seleccionar mi div. Voy a asegurarme de que estoy en el estado flotando. Y voy a ir a avanzado. Entonces voy a ir a la transición de efectos. Y sólo voy a añadir una ligera transición, duración de
transición a 0.3 segundos. Cuando guardamos eso y refrescamos eso. Se puede ver que esa frontera es muy bien transición es que no es como si no fuera como un salto instantáneo. Se tiene un ligero desvanecimiento en. Y estoy haciendo todo eso porque quiero que todos estos cambios y se apliquen globalmente a mi disco. Entonces cuando entonces solo para copiar la copia que quiero que todos esos todos esos elementos CSS o todos esos ajustes se agreguen a todos propios todos mis divs. Por lo que se crea div. Lo que podemos hacer en este momento es que realmente vamos a empezar a agregar el like los iconos dentro y el texto y el encabezado. Entonces empecemos a hacer eso a continuación.
96. 13.16Añadir los íconos: Entonces si echamos un vistazo al original, podemos ver que tenemos un, tenemos un auto aquí mismo. Tenemos algunos textos, se hará un rubro. Y eso es básicamente, por supuesto que tenemos algunas, ya sabes, algunas animaciones aquí mismo y podemos, bueno, podríamos hacer eso si quisieras. Entonces lo que voy a hacer es primero voy a agregar tal vez todos los elementos que necesito. Entonces dentro de ese div, solo
voy a agregar una imagen. Ahí vamos. Y yo voy a, tal vez tú comienzas con este auto y yo voy a seleccionar esa imagen, va a guardarla. Y voy a refrescar eso. Y ahí vamos. Tenemos nuestra imagen aquí mismo. Y creo que voy a bien, quiero decir, podríamos hacerlo más pequeño o no, hacer algunas cosas al respecto. Pero antes de que hagamos eso, solo
voy a agregar una clase yendo llamarla tau como ícono. No sé que pueda imaginarme. Hagámoslo así. Voy a añadir una clase y voy a cambiar su altura a tal vez como 35. Eso es demasiado pequeño. Pero 42 o 55 o 58, supongo que 58 debería estar bien. Siempre podemos cambiarlo más tarde. Entonces lo que podríamos hacer es, bueno, nuestro div on hover tiene un borde muy, muy ligero. Pero ya sabes qué primero tal vez vamos a cambiar la frontera alrededor de esto, este div aquí mismo. Hagámoslo, hagámoslo, este es muy, de color gris muy claro. Yo quiero que el ancho sea sólido de un píxel. Salvemos a ese tipo. Y vamos a refrescar la página. A ver cómo se ve. Ahí vamos. Tenemos una frontera muy, muy leve,
ligera alrededor de nuestro, alrededor de nuestro auto ahora mismo. Entonces lo que quiero hacer ahora, así que tal vez podríamos tratar de gustarnos un imitador este efecto hover también en nuestro auto. Por lo que cambia de un color gris. Dos, así, nuestro principal y dominante color rojo. Entonces lo que voy a hacer es que voy a agarrar mi auto. Voy a asegurarme de que esta clase de imagen de icono esté seleccionada. Y voy a ir a afectos avanzados. Y voy a ir a Filter. Y de esta lista, voy a elegir escala de grises. Y quiero aplicar el 100% de ese efecto. Entonces, ya sabes, entonces es básicamente genial. No obstante, cuando ahora optamos por el estado hover, quiero este filtro para que la escala de grises se establezca en 0%. Entonces cuando salvamos a ese tipo y refrescamos nuestra página, ahora mismo, nuestro auto está gris. Pero cuando pasas por encima de estos tipos, puedes ver que nuestro ícono es, también está cambiando. Para que me pudiera hacer también añadir una transición a este estado flotando. Entonces voy a ir a transición de efectos de transición. Creo que fueron 0.3 segundos. Ahí vamos. Y vamos a refrescar la página. Cuando pasas por encima de esto, puedes ver las tarifas muy bien, muy bien transicionando. Entonces todo lo que tenemos que hacer en este momento es que necesitamos agregar algún texto. Entonces voy a añadir un encabezamiento. Ahí vamos. Y de nuevo, le voy a añadir una clase, así que lo voy a llamar ICOM rumbo o ICANN tenía espesor que voluntad, eso va a estar bien. Entonces voy a cambiar el tamaño de la fuente a algo como tal vez, vamos a probar 18. Ahí vamos. Vamos a ir a la tipografía y vamos a ponerla en el centro. Y la altura de línea a 1.1. letras espacio uno. Y quizá tecleemos como, no
sé, accidentes automovilísticos. Y tal vez vamos a aumentar el tamaño de fuente como 20 para tal vez vamos a deshacernos de ese espacio en un elemento. No creo que le guste. Y luego vamos a añadir tal vez un poco de margen como diez píxeles en la parte superior y luego en la parte inferior. Porque ahora mismo lo que quiero hacer es solo añadir un texto. Entonces sólo voy a agregar texto. Y de nuevo, voy a llamarlo, voy a añadir una clase, así que Icon, text, add class. Y de nuevo, voy a ir a la tipografía alineada al centro. Y a lo mejor voy a cambiar el tamaño de la fuente a algo así como 13. Supongo que esto debería estar bien. Entonces lo último que hacer aquí sería agregar tal vez como un espaciado impresionante dentro, dentro de nuestro div. Entonces lo voy a seleccionar, ir a Avanzado y luego el tamaño y el espaciado. Y me va a gustar Demi como ocho píxeles de relleno alrededor, o tal vez hasta diez píxeles. Y entonces vamos a salvar a este tipo. Voy a ir a mi página, refrescar eso. Y este es nuestro, este es nuestro icono que se ve así. Por supuesto, si quisiéramos, quizá
podríamos añadir aún más espacio en. A lo mejor hagamos como 20 pixeles. A lo mejor. Esto se verá un poco mejor o incluso como 25. No, es que depende totalmente de ti. Puedes hacer lo que
quieras con el relleno si no quieres si no lo necesitas, no
tienes que ponerlo dentro. Pero yo sólo creo que así Se ve sólo un poco mejor. Y tenemos un poco de efecto funky justo aquí. Además, si quisieras, podrías tal vez en un hubbard crecer este div un poco como en el original. Entonces todo lo que realmente necesitamos hacer es asegurarnos de que tenemos nuestra clase seleccionada, que estamos en nuestra capa div. Y luego desde la opción estatal, voy a elegir hover. Y luego en nuestros afectos avanzados, y vamos a ir a transformarnos, vamos a añadir una transformación. Y desde este menú desplegable, y vamos a elegir escala. Y a otro sí le gusta, ya
sabes, el aumento de escala para ser demasiado drástico. Entonces solo me voy a ir a vivir con 1.2, tal vez para la escala x 1.2 para
y Y vamos a guardar eso, refrescar mi página. Y luego se puede ver que es muy bien ecologistas como, más como un grow in effect cuando pasamos sobre nuestro div. Entonces una vez que tenemos este div creado, nos llevó algún tiempo, pero hicimos todo eso sólo porque ahora podemos ahorrar mucho tiempo a la hora de agregar y evento. Bueno, tal vez cambiando si te gustaría, algunos aspectos sobre nuestros, nuestros iconos. Entonces veamos cómo realmente podemos beneficiarnos de esas clases que acabamos de añadirlas. Cómo podemos beneficiarnos de todo esto, de los pasos que dimos. Y en el siguiente video.
97. 13.17Añadir los íconos restantes: Entonces realmente todo entero en este momento con el fin de poblar las columnas restantes con el, con nuestros iconos, es simplemente duplicar este div. Y lo voy a mover dentro de mi segunda columna. Si sólo puedo ponerlo aquí dentro, tal vez simplemente renombraré a este tipo. Voy a llamarlo número dos. Entonces voy a duplicar a este tipo una vez más. Y lo voy a poner dentro de nuestro tercer div. Ahí vamos. Y déjame simplemente renombrar a este tipo. Voy a llamarlo tres. Y este tipo, lo voy a duplicar y moverlo dentro de mi div al que voy a llamar. Y voy a llamar. Ahí vamos. Entonces realmente todo lo que necesitamos hacer ahora es simplemente cambiar el, los iconos. Entonces voy a agarrar este ícono y voy a elegir tal vez como esta casa. ¿ Por qué no? Hombre, sólo voy a llamarlo. No lo sé. La propiedad puede ser derecho patrimonial. Comentemos así. Entonces voy a agarrar este ícono, y voy a simplemente elegir éste. Y llamémoslo auto. Ninguna herencia puede ser y nada. Y ahora el último ícono
, elijamos a este tipo de aquí, a este ícono y lo voy a llamar, no sé, atención médica. Sólo porque Así ahora tenemos todos nuestros iconos. Sólo déjame guardar eso. Y yo sólo voy a refrescar la página. Y como pueden ver, tenemos todos nuestros iconos y tienen todas estas bonitas animaciones sucediendo. Pero digamos que no sabemos que nos
gustaría quizá crecer aún más estos elementos. O tal vez nos gustaría cambiar la transición o no nos gusta la frontera y, ya
sabes, cosas así. Pero, ya sabes, sería que nos llevará mucho tiempo si
quisieras simplemente cambiarlos todos y cada uno de los pedacitos, todos y
cada uno de los íconos. El paso a paso, todo lo que realmente podemos hacer es que solo podemos agarrar uno de nuestros divs que tiene esa clase adjunta a ella. Y voy a ir al hover estatal. Y digamos que no quiero que crezca tanto. Entonces voy a ir a Advanced Afects Transform. Esta es nuestra transición, nuestra transformación. Entonces digamos que quería crecer apenas por 1.11.1. Vamos a salvarlo. Y luego cuando refrescamos la página, se
puede ver que todos estos tipos están creciendo de la misma manera, de la misma manera. Además, digamos que me gustaría tal vez aumentarlos al margen entre nuestra voluntad, este rumbo dentro de aquí. Entonces de nuevo, voy a asegurarme de que tenga seleccionada esta clase. Voy a ir a Tamaño avanzado y espaciado y voy a aumentar el margen, margen superior recoger 16. Pero voy a disminuir el margen inferior a algo así como ocho. Como se puede ver, todos estos elementos están cambiando. Entonces aunque vayas a 0, puedes ver que estamos cambiando en todas las instancias de nuestro, de nuestro rumbo al mismo tiempo. Entonces esto es justo, esta es solo la forma de trabajar de manera más inteligente, no más difícil. Y ya sabes, si solo eres tonto. Trabaja un poco más duro, pero definitivamente mucho más,
mucho más inteligente al principio. Más adelante, todo será mucho más fácil para ti. E incluso ahora, sólo voy a duplicar estas columnas. Y como pueden ver, tenemos nuestros iconos y listos y esperando por nosotros. Tienen las mismas clases, así que se están comportando exactamente de la misma manera. Y todo lo que realmente necesitamos hacer es simplemente cambiar eso, cambiar el icono. Entonces voy a agarrar este corazón, corazón
roto, y voy a ir con ellos, divorcio. El peor. Ahí vamos. Este tipo será nuestra semana ya tenemos el auto. Entonces hagámoslo. Voy a entrar como, no
sé, Derecho Tributario, Mamie, algo así. Este tipo, tal vez voy a agarrar el martillo y el rancho y llamémoslo llamar instrucción. Ahí vamos. Y para el último tipo va a ser, creo que va a ser éste. Llamémoslo, llamémoslo derecho de empresas. Derecho de Sociedades. Ahí vamos. Y vamos a guardarlo. Por supuesto, si quieres cambiar el texto aquí abajo, si no quieres ver esto como un bloque de texto, claro que podríamos hacerlo muy, muy fácilmente. Y también tenemos esta clase agregada para que podamos, así que si solo decidimos que queremos hacerlo más grande, nosotros, podemos hacerlo un gran M. No vamos a hacer que todas las, todas las instancias de la clase sean más grandes. Entonces voy a volver al 13. Ahí vamos. Entonces voy a salvar a este tipo. Y voy a refrescar mi página. Y como pueden ver, tenemos a todos nuestros chicos listos comportándose bien. Y creo que esto se ve bonito, bastante limpio y que es apropiado para un sitio web de abogados abogados. Entonces lo último que hacer aquí, sería sólo agregar un botón. Entonces lo que voy a hacer sigue dentro de esa sección, sólo
voy a sumar rápidamente, sólo voy a añadir un pequeño botón aquí abajo. Yo quiero que se lea el botón. Ahí vamos. Simplemente lo voy a llamar como Aprende más. Conoce más. Ahí vamos. Y vamos a ir a la tipografía avanzada. Yo voy a hacer mayúsculas. Y voy a salvar a este tipo. También. A lo mejor vamos, vamos a cambiar el comportamiento de nuestro botón. Vamos a tal vez la cosa, vamos, digamos que queremos tal vez como cambiar el color,
revertir el esquema de color justo aquí cuando pasemos el cursor sobre nuestro botón. Entonces con el botón seleccionado, voy a ir al estado de hover. Y nuestro color de botón será sobre el color blanco, o podemos hacerlo incluso transparente. Después vamos y voy a cambiar el color del texto a rojo. Ahí vamos. Y tal vez sólo voy a introducir una frontera simple, simple. Entonces voy a ir a Effect fronteras bien avanzadas. Y luego voy a elegir este color rojo. Quieres hacerlo muy,
muy bien, muy, muy sólido y muy gentil. Entonces solo un píxel. Vamos a refrescar esa página. Entonces ahora cuando pasamos el cursor sobre nuestro botón, se
puede ver que es que allí cambia. A lo mejor podríamos intentar introducir algo de transición también. Entonces voy a ir a la transición de efectos y sólo hacer como 0.3. como siempre. Entonces, veamos si está cambiando algo. Yo sólo voy a refrescar la página. Y como puedes ver, tenemos un poco agradable, agradable transición pasando justo aquí cuando pasas sobre nuestro, nuestro botón. Entonces ahí vamos. Contamos con nuestras áreas de práctica completas. Bueno, casi todavía necesitamos cuidar la capacidad de respuesta, o al menos necesitamos comprobar si la capacidad de respuesta está funcionando correctamente. Entonces hagámoslo en el siguiente video.
98. 13.18 revisa la capacidad de respuesta: El apartado listo, por lo que ahora vamos a comprobar la capacidad de respuesta. Entonces vamos a la página contenedor 1120. Todavía se ve así, ¿verdad? Vámonos a menos de 992. Supongo que se ve bien. Supongo que podríamos dejarlo así. Vámonos al 768. Todavía se ve bien. Y vayamos a nuestros cuatro AT este luce definitivamente, definitivamente el mejor. Entonces, por ejemplo, tal vez haya un poco de problema con esto, con esta topografía. Aquí. Vámonos a menos de 768. Y menos de 768, creo que se ve bien. Vamos sólo al 480. Y vamos a agarrar a este tipo. Y voy a ir a avanzar en la topografía y vamos a revisar la altura de la línea si solo tecleamos una. Y eso va a quedar un poco mejor. Y tal vez cuando vayamos a como 7068, Tal vez podríamos hacer esto, bueno, toda esta parte justo aquí. Entonces tal vez hasta las columnas enteras un poco como un poco más pequeñas, o tal vez todos los divs dentro, solo un poco más pequeños. Desde que agregamos las clases aquí, sólo
podemos agarrar a este tipo. Y vamos a elegir, vamos a seleccionar 85 en cuanto al ancho, ochenta y cinco por ciento, tal vez incluso menos que eso. Vamos al 75. Esto debería estar bien. Y ahora supongo que estos son dibs se ven bien, pero no, no están bien centrados. Entonces lo que voy a hacer es que voy a agarrar la ayuda como un div, así, como el primer div. Y este tipo no tiene moralmente, no tiene clase. Así que vamos ahora sólo rápido, vamos a tal vez sólo rápidamente agregarle una clase. Entonces llamémoslo como, no
sé, como div 768, solo para saber que es solo por esto que es solo por estos puntos de ruptura específicos que voy a hacer como 768. Y lo que voy a hacer es que voy a decirle al oxígeno que, sí, sí
quiero apilar los elementos infantiles verticalmente y
sí quiero que estén alineados horizontalmente al centro. Y todo lo que tenemos que hacer ahora es agregar la misma clase al div restante. Entonces div 768, este tipo, div 768, y este tipo, ese va a ser este número cuatro, ese va a ser DIV 768. Y de nuevo, el pecado va por estos elementos, ahí están estos divs. Entonces el primero, así que ese es el div, 768, segundo 1. Demos 768. Como puedes ver, si lo hiciéramos, si agregamos una clase, ya
sabes, al principio. Definitivamente ahorra mucho tiempo, pero es, bueno, ya
sabes, qué, ya
sabes, aprendes de tus errores. Entonces ahora cuando vamos a menos de cuatro AT esto, bueno, como pueden ver, estamos heredando ese tamaño de nuestro div del siete o 68 que nos
pusimos a creo que lo pusimos en un setenta y cinco por ciento. Creo que fueron 75. Entonces creo que todos estos elementos se fijaron en 75. Por lo que este punto de ruptura en 480,
podríamos, podemos ponerlos en 100, 100 por ciento. Ahí vamos. Y se ve mucho mejor. Entonces si ahora solo guardamos eso y refrescamos la página. Ahora solo comprobemos cómo se va a ver en dispositivos más pequeños. Entonces vayamos abajo, abajo, abajo hasta que lleguemos a un 992. Esto se verá así en línea, 92, y luego vamos a ir 768 y a 418. Entonces ahí vamos. Nos pusimos bien, nos encargamos de la capacidad de respuesta. Por supuesto, podríamos jugar con todas estas opciones todo el día puede estar haciendo estas dibs aún más pequeñas si quisiéramos. Entonces digamos que no. Dejémoslos en realidad a los 775. Entonces vamos a refrescar la página. Y tendríamos que lo tuviéramos luciendo así, básicamente lo mismo como antes. Entonces ahí vamos. Nos dieron, conseguimos la sección creada, así que nos encargamos de la capacidad de respuesta. Entonces la siguiente sección sería agregar esto, ¿por qué elegirnos sección? Y creo que voy a añadir una imagen en la parte de atrás. Pero tal vez podríamos agregar como un fondo, como una superposición de fondo de gradiente. Podemos hacer eso, definitivamente. ¿ Por qué no? Y sí, así que empecemos a hacer eso en el siguiente video.
99. 13.19El por qué elegirnos en la sección de por qué: Entonces ahora vamos a crear otra sección. Llamémoslo el por qué elegir sección. Entonces como de costumbre, sólo voy a crear otra sección. Y supongo que quizá podríamos pedir prestadas estas dos como cabeceras, este pedazo de impuesto y esta cabecera. Entonces solo lo voy a encontrar aquí mismo en mi panel Capas de pozo. Lo voy a poner aquí abajo. Y lo mismo vale para este rubro. Voy a solo, voy a simplemente duplicarlo. Y yo sólo voy a mover este rumbo aquí abajo. Entonces conseguimos nuestra sección, tenemos nuestro texto aquí mismo. Y supongo que quizá podamos cambiar ese impuesto para dejarlo como ayuda legal, pero hagamos esto. Cambiemos este flujo a por qué. Escogernos? Ahí vamos. Entonces lo que quiero hacer aquí mismo es, bueno, en realidad quiero hacer tres cosas. Entonces quiero agregar una imagen de fondo, pero también me gustaría superponer al gradiente. Y luego quiero agregar algo de texto abajo justo aquí. Y quiero ponerlo en columnas. Y luego solo quiero agregar algunos como algunos números indicando, ya
sabes, nuestra experiencia o la experiencia de nuestra empresa. Entonces antes de hacer eso, permítanme añadir un texto sólo para que podamos ver algo justo aquí. Y yo sólo voy a ambular, sólo agarra algo de Lorem Ipsum esta vez. Yo sólo voy a agarrar este párrafo, voy a copiarlo y acaba de pegarlo dentro. Entonces como dije antes, solo
voy a agarrar mi sección, ir a fondo avanzado y agarrarme esta vez esto, voy a conseguir esta, esta imagen fija de punto punto-punto JPEG. Y solo lo voy a seleccionar y voy a guardar mi página. Y supongo que quizá podríamos cambiar los colores. Entonces esta ayuda legal, cambiemos el color a blanco. Lo mismo para nuestro rumbo. Cambiemos el color y lo mismo para este texto. Y ahí vamos. Ahora en este punto, podemos ver eso. Realmente no podemos ver mucho. Es decir, hay, no hay suficiente contraste. Supongo que podríamos tal vez largo como superponer algún color sobre este fondo. Y los folletos en realidad su superposición de un color, pero hagámoslo un gradiente. Entonces otra vez, voy a ir a antecedentes avanzados. Y aquí abajo tenemos esta opción de gradiente. Y aquí dentro de oxígeno puedes tener tantas paradas de color ha sido gradando paradas como desees. Entonces lo que voy a hacer es que tal vez voy a añadir a las paradas de color. Y sólo voy a agarrar mi color. Y por supuesto esto no lo es, esta no es la sección que
quiero, quiero elegir esta es esta sección aquí mismo. Por lo que de nuevo, avanzado gradiente de fondo, agrega dos colores. Y voy a ir con este color oscuro y este color oscuro otra vez. Y por supuesto que no podemos ver mucho ahora mismo. Pero una vez que empezamos a bajar la opacidad, se
puede ver que en realidad ahora estamos haciendo nuestra superposición de color como un poco transparente. Entonces hagamos tal vez algo así como 0, como 95%. Y en lo que va este tipo, hagamos tal vez como el 75%. Ahí vamos. Y lo grandioso de los gradientes aquí dentro de la auxina es que como mencioné antes, podemos agregar paradas de color. Entonces, por ejemplo, si solo tuviéramos que agarrar a este tipo y agregar un color, parar y agregar un color. Y entonces tal vez podamos estar de acuerdo con este y ponerlo todo el camino hacia abajo. Se puede ver que básicamente estamos justo, ya sabes, haciendo algo así como un gradiente C directamente transparente. Por lo que pasa de este color más oscuro, este color azul oscuro, a color básicamente transparente, y luego de nuevo a nuestro color más oscuro y más oscuro. Entonces esto es lo que podríamos hacer si quisieras, pero solo voy a agarrar tal vez a este tipo, agarrar nuestro color y dejar caer la opacidad a algo así. Y lo mismo para éste pero siempre tan ligeramente. Entonces conseguimos, ya sabes, como un gradiente de fondo semitransparente. Y por supuesto, si quieres, puedes cambiar el tipo de lineal a radial. Se quiere tener un retroceso radial volver a tierra. O podemos elegir un lineal arriba y podemos cambiar el ángulo a como 90 si quisieras. Si quieres cambiar como el flujo de nuestro gradiente, eso es, eso también es posible. Pero voy a dejarlo así. Entonces en este punto tal vez podríamos simplemente agregar algo de espaciado aquí abajo. Y lo siguiente que habría que hacer sería poner este texto en columnas. Y en realidad hay dos formas de hacerlo. Podríamos simplemente agarrar columnas y agregar dos divs y poner ese impuesto dentro de esas vidas. Pero también podríamos usar una propiedad CSS llamada along like columnas o column-count y calm gap para poner este texto dentro de unas columnas si quisieras simular el flujo de texto entre nuestras columnas. Entonces veamos realmente cómo podemos hacer esas dos cosas. ¿ Y cuáles son los retos y diferencias entre esos dos enfoques? Entonces empecemos a hacer eso a continuación.
100. 13.20texto en columnas: Entonces si agarramos nuestra pieza de texto y luego cuando vamos a avanzar topografía, se
puede ver que no tenemos opción de poner nuestro texto dentro de columnas. Las columnas texanas es un poco, bueno, no
es tan comúnmente utilizado, comúnmente utilizado selector CSS. Entonces tal vez esa es la razón por la que es difícil
encontrarlo en muchos constructores de sitios web diferentes en realidad. Entonces veamos cómo podemos desafiar ese tema nuestros resultados. Bueno, antes que nada, lo que podríamos hacer es simplemente añadir columnas aquí mismo. Entonces esa sería la forma más fácil, supongo, de columnas y columnas con dos divs dentro. Y luego cuando acabamos de saber, agarra nuestras etiquetas, megalitos duplicados, si lo pusieras dentro de nuestros divs. Entonces uno. Y entonces sólo lo movamos. Vamos a ponerlo dentro del div. Se puede ver que conseguimos nuestro texto en fluir en columna. Entonces supongo que esta sería la forma más fácil de hacerlo o la más obvia, supongo. Pero también hay otra forma de hacerlo. Entonces déjame volver un par de veces hasta que tengamos como tal vez justo como este texto y voy a deshacerme de estos conteos. Entonces lo que podríamos hacer es simplemente decirle al navegador que muestre este bit de texto como, ya
sabes, como columnas. Pero para hacer eso, necesitamos codificarlo un poco. No va a haber mucho, va a ser sencillo y sencillo. Y creo que es, ya sabes, es solo una buena idea aprender a usar esa técnica porque todo mientras casi todas las demás cosas puedes ajustar desde nuestras herramientas dolor, pero esa delgada específica y todo no está disponible aquí. Entonces lo que tenemos que hacer es ir a avanzado, por
supuesto que esta capa seleccionada. Y como puedes ver que este tipo de aquí que dice CSS personalizado, cuando hacemos clic en él, puedes ver que tenemos algo de espacio para entrar a nuestro CSS específico para eso. Y por suerte, que las reglas CSS para este efecto son bastante lógicas, supongo autoexplicativas, todo lo que necesito para escribir es solo conteo de columnas. Y vamos a teclear porque esto es lo que queremos. Y entonces vamos a cerrar eso, esa regla. Y como puedes ver, todo lo que tenemos que hacer es solo escribir en el recuento de columnas y luego cuántas columnas sí quieren tener. Si quieres tener cinco, lo voy a poner en cinco columnas. Y la mejor parte al respecto es que este texto fluye entre estas columnas. Si tan solo pusieras ese texto dentro de dibs separados, tendríamos que manualmente simplemente no cortar y pegar a los hombres esa pieza, bueno, esas piezas de textos. Pero usando este método, podemos simplemente dejar que el texto fluya entre estas columnas. Por lo que quiero tener dos columnas. Y por cierto, si quieres controlar la brecha entre estas dos, estas dos columnas, simplemente puedes escribir en una columna y luego abrir brecha. Y puedes configurarlo para que
me guste, no sé, unos 150 píxeles. Vámonos así. Y se puede ver que esa brecha es, Bueno, definitivamente es demasiado grande, pero así es como se puede controlar y eso, esa brecha. Entonces voy a aplicar ese código. Voy a colapsar al editor, pero voy a copiar esta regla. Y ahora un reto, otro reto con esto, este efecto es que sin embargo lo harás, es fácil. Es decir, en algunos, supongo que el flujo de impuestos es un bonito efecto. No obstante, cuando vamos a decir menos de 768, ahora mismo que estas dos columnas, no lo sé. Yo sólo pienso que sólo pienso que se ve raro. Creo que sería mejor si sólo tuviéramos a Minow, probablemente soltera, sola columna aquí mismo. Entonces, ¿cómo podríamos desafiar cómo podemos resolver este tema? Bueno, aún dentro de mi avanzado CSS Custom, voy a pegar de nuevo esa regla. Y vamos a cambiar la columna vienen de dos a uno. Y eso es todo. Estamos, podemos básicamente de una manera muy, muy simple, simplemente cambiar no hay reglas CSS específicas para puntos de ruptura
específicos simplemente agregándolos aquí dentro este CSS personalizado y el panel dentro de la herramienta España. Por cierto, podríamos tal vez y como el, no
sé, como una cama y un fondo. Vamos a tal vez sólo, puedo ver que esto es sólo un gran párrafo. Entonces déjame solo quizá no lo sepa. Voy a ir voy a fingir que este es un párrafo. Entonces ahora cuando vamos a nuestros todos los dispositivos, se
puede ver que este párrafo en realidad está aquí, pero el texto sigue muy bien, muy bien fluyendo. Entonces tenemos, así es como podemos crear el texto en columnas aquí dentro del oxígeno y básicamente en cualquiera, en cualquier constructor o porque es solo un simple estilo CSS que escribió. Y lo que todavía tenemos que hacer ahora es agregar como simplemente agarrar el original estos clientes globales años de experiencia, expertos en equipo, premios y honores estos números aquí, solo para agregar algunos, y me gustaría solo una prueba que somos que somos un buen abogado, un despacho de abogados. Entonces en realidad es que empiezas a agregar esos a continuación.
101. 13.21111 la sección: Por lo que para agregar esas piezas de información, voy a agregar columnas. Y voy a hacer bien a 25-25 por 25 por 25. Por lo que quiero tener cuatro columnas en total. Y yo sólo los voy a mover un poco al fondo así. Entonces tenemos cuatro divs y supongo que sería una buena idea agregarles clases. Entonces voy a añadir una clase a la que voy a llamar elegir div, así como así. Y lo voy a agregar rápidamente a todos mis diffs. Entonces elige div, este, para cerrar div, este, elige div. Y lo que quiero hacer con esa clase es que quiero asegurarme de que todos mis elementos se hayan centrado horizontal y verticalmente. ¿ Por qué no? Y ahora lo que tenemos que hacer es simplemente agregar esas piezas de información dentro. Entonces voy a agregar texto y luego otro texto. Por lo que básicamente tienen sólo 22 simples piezas de información, texto simple, simple. Y supongo que podríamos agregar clases a esos dos. Entonces lo voy a llamar como perder tenía por rumbo. Y éste se va a elegir texto. Elige, elige texto. Voy a añadir la clase. Entonces para este tipo, voy a asegurarme de que esto tenga este color blanco, que definitivamente sea más grande. A lo mejor no tan grande. Vayamos al 32. Y el primero fue clientes globales. Entonces hagamos diez. De acuerdo, ahí vamos. Y hagamos más grande la fuente. Hagámoslo más grueso. Ahí vamos. Entonces puede ser aún más grande que eso, como 82, esto debería estar bien. Y luego voy a agarrar este pedazo de texto inferior. Voy a agregarle este color. Creo que fue de cliente. Ahí vamos. Yo sí quiero hacer el font-weight un poco más grueso y creo que el tamaño estará bien, pero vamos a la tipografía. Vamos a asegurarnos de que está configurado en text-align esté configurado en centro. Voy a hacerlo en mayúsculas. Ahí vamos. Y creo que sería mejor agarrar a este tipo y
convertirlo en un mega texto alineado al centro también. Y quizá cambiemos la altura de la línea a algo así como 1.1. así que ahí vamos. A lo mejor vamos a añadir algo de espacio aquí así. A lo mejor no tanto. Esto debería estar bien. Entonces todo lo que realmente necesitamos hacer es simplemente duplicar estos dos elementos. Entonces sólo voy a hacer eso muy rápido. Entonces voy a duplicar este primer texto, lo
voy a poner dentro de este div, y luego voy a duplicar este div inferior, ponerlo aquí abajo. Entonces voy a hacer lo mismo. Así que duplicar, poner aquí dentro. Entonces este tipo duplicó y lo puso aquí abajo. Y otra vez, duplicar y ponerlo aquí abajo. Y duplicar y ponerlo aquí abajo. Supongo que tal vez podríamos envolver ambos elementos en un div y luego simplemente clonar un div. Pero simplemente no quería hacer como div y el dividendo, dividendo si no quería hacer demasiado anidamiento div. Entonces conseguimos, vale, así que años de experiencia. Entonces digamos que somos una empresa. Digamos que tenemos, tenemos como no tantos, pero a un 124 años de experiencia, eso es una cosa que es suficiente. Años de x Hagamos como tal vez, no lo sé dentro de ese tiempo, Hagamos como, no sé, 15 mil casos resueltos así. No lo sé. Casos. O tal vez hagamos como 34 miembros así. Y hagámoslo mi no sé, 19 socios mundiales, pongámoslo hagámoslo. Hagamos eso. nivel mundial. Socios. Ahí vamos. Entonces salvemos a este tipo. Entonces ahora vamos a nuestra página. Voy a refrescar esto y vamos a hacerlo más pequeño. Entonces veamos cómo se verá en dispositivos más pequeños. Entonces cambiemos eso, cambiemos eso. Una vez que llega a estos puntos de ruptura, se
puede ver que todo se ve bonito, bastante bien. De acuerdo, así que conseguimos esta sección creada, creo que en Old empieza a lucir bastante agradable, tranquilo profesional. Por lo que la siguiente parte sería agregar un como la sección de miembros del equipo. Y sabemos en el original hueco a este equipo profesional aquí mismo. Pero como estamos diciendo que tenemos como 34 integrantes, digamos que estos son miembros de nuestro equipo. Hagamos otra cosa. En realidad creemos estas, como estas cartas, supongo, bonk, pongámoslas en un slider para que realmente podamos hacer click a izquierda y derecha, solo veamos como, como un carrusel de nuestro, de los miembros
de nuestro equipo. Entonces empecemos a hacer eso a continuación.
102. 13.222 la sección de equipo: Entonces, empecemos con agregar una nueva sección. Por lo que de nuevo, me voy a dar un golpe y sólo seleccionar el contenido interno. Y luego sólo voy a añadir una sección. Esto nos permitirá añadir este apartado exactamente aquí mismo donde queremos que esté. Y creo que sólo voy a pedir prestadas estas dos piezas de textos, este mini encabezamiento y este encabezamiento principal. Entonces si no quieres usar el menú contextual aquí mismo, no
quieres hacer click en él y luego elegir duplicado. Podrías simplemente agarrar un trozo de un elemento que quieres duplicar. Y puedes ir aquí al panel de herramientas y solo puedes hacer clic en duplicar componente. Lo mismo para este tipo. Y todo lo que voy a hacer es que voy a traer a estos tipos aquí abajo. Entonces este es este rubro y esta pieza de texto. Entonces supongo que aquí dentro, voy a escribir en nuestro equipo, tal vez algo así. Y aquí, conoce a nuestros abogados. A lo mejor vamos, vamos a capitalizar esta palabra. Y claro que voy a agarrar mi sección y quiero alinear todo al centro. Y si pudiéramos si pudiera deletrear
eso correctamente, eso sería bueno. De acuerdo, entonces ahora todo lo que realmente necesitas hacer es agregar un, bueno, quiero hacerlo como tarjetas simples con algunas imágenes y texto. Yo quiero que sea un deslizador. Entonces porque tenemos como 34 miembros, así que supongo que podemos decir que tenemos como 34 abogados. Entonces vamos a mostrar más de tres, pero hagamos que esta sección sea compacta. Entonces lo que voy a hacer es que voy a añadir un slider. Y en ese slider, no
vamos a tener imágenes ni algo así. Vamos a sumar columnas. Pero primero, sólo voy a conseguir tal vez de estas dos diapositivas. Y a lo mejor voy a ir a peinar. Y quiero que la animación sea horizontal, pero quiero que la animación sea más rápida. Yo quiero quitar el relleno alrededor de los toboganes y no creo que quiera ver los puntos. Entonces voy a quitar el show dots, y no tengo activada la opción infinita. Entonces, básicamente, estas son solo estas pocas cosas que necesitamos hacer aquí mismo. Entonces ahora que tenemos nuestra configuración de deslizador, nos dieron nuestra diapositiva. Lo que voy a hacer es que voy a empezar a agregar divs a esta diapositiva. Por lo que sólo voy a dar clic en agregar. Y voy a teclear div. Y voy a dar click en este. Y quiero que este div sea como 33 píxeles de ancho sobre 33% de ancho. Y quiero que este div se establezca en 33% porque vamos a tener tres divs seguidos. Entonces sólo voy a ir treinta y tres, treinta y tres y treinta y tres. Y cuando este tipo se le agregue aquí, si solo vamos a torre slide y, o si solo duplicamos nuestro div. Ahí vamos. Se puede ver que los estamos agregando verticalmente y eso es, eso no es lo que queremos. Lo que queremos es que los queremos apilar horizontalmente. Entonces déjame ir a nuestra primera diapositiva. Voy a apilar elementos hijos horizontalmente. Y ahí vamos. Todos nuestros divs están colocados uno al lado del otro. Pero por ahora, voy a quitar estos dos divs porque quiero,
quiero duplicar este div, pero quiero duplicarlo con,
con todo su contenido en tan solo un segundo. Entonces todo lo que tendrás que hacer es que simplemente no haremos ningún cambio. Y cambio algunos aspectos de nuestras vidas sin sumar todos los elementos una y otra vez. Pero antes de hacer eso, déjame simplemente agregar rápidamente una clase a nuestro div. Voy a llamarlo tal vez como Equipo. Y voy a añadir una clase porque quiero poder simplemente manipular ese contenedor. Y en última instancia quiero poder manipular todos los contenedores
para los miembros de mi equipo y, ya sabes, de una sola vez. Pero empecemos a hacer una ventaja en el siguiente video.
103. 13.23Añadir las diapositivas: Entonces supongo que lo que me gustaría hacer primero es tal vez
agregaría algún relleno dentro de mis diffs. Voy a ir con tal vez algo así como 12 píxeles por todas partes. Esto debería ser suficiente. Y por supuesto lo que quiero hacer es añadir una imagen. Entonces solo voy a agregar una imagen por dentro, yendo a navegar. Y creo que este fue mi primer equipo uno. Simplemente voy a seleccionar esa imagen, va a guardarla. Y de nuevo, voy a tener que refrescar mi página para ver esa imagen. Entonces ahí está. Y debajo de esa imagen, lo que quiero hacer es añadir algo como El nombre de esta persona. A lo mejor agregar su posición, tal vez algún texto, y tal vez algún consumo de redes sociales como ese. Entonces dentro de ese primer div que quizá quisiéramos incluso cambiar su nombre si quisieras. Entonces voy a renombrarlo a, no sé, solo tal vez el equipo uno, así. Sólo voy a añadir un simple trozo de texto. Ahí vamos. Y voy a llamarlo tal vez este tipo. Llamémosle el CEO. Y quizá agreguemos una clase a los selectores. Entonces llamémoslo posición, tal vez posición de equipo. Entonces posición de equipo. Ahí vamos. Y hagámoslo nuestra lectura. A lo mejor. Hagamos la tipografía del texto. Pongámoslo al centro. Y tal vez cambiemos la fuente a algo así como 500 o 600, o tal vez incluso a 700. Y tal vez cambiemos el tamaño de la fuente a algo así como 13 o 14. Y quizá agreguemos algunos espacios. Entonces voy a agregar como tal vez veamos como diez píxeles de margen a la parte superior y tal vez algo así como diez en la parte inferior. Y por supuesto, voy a ir a mi equipo un contenedor. Y dentro de esa clase, quiero apilar, quiero poner todo, apilar todo al centro. Entonces voy a elegir elementos hijitos de paso verticalmente. Y voy a establecer esta alineación horizontal de ítems de línea al centro. Por lo que la siguiente pieza de texto va a ser como el nombre de nuestro miembro del equipo. Entonces voy a agregarme, voy a añadir un encabezamiento. Ahí vamos. Y voy a hacer que se descuide rumbo a h4. Y de nuevo, voy a añadir una clase como equipo, nombre de equipo. Ahí vamos. Y voy a cambiar el color del texto a éste de aquí. Y a lo mejor vamos a darle un nombre a este tipo. Vamos a llamarlo como Michael Arnold Johnson o algo así. Mi contrato algún rezago, el famoso atleta, Michael Johnson. Vayamos a la topografía. A lo mejor cambiemos el tamaño de la fuente a algo como 16 o 20, o 26, o tal vez incluso como 28. Siempre podemos cambiar eso más adelante porque quizá
voy a introducir algo de espaciado entre letras. Y esto debería ser, esto debería estar bien. Entonces ahora agreguemos algo de texto, sólo un texto simple. Ahí vamos. Y tal vez sólo voy a pedir prestado algo de este texto de aquí y pegarlo aquí mismo. Y de nuevo, voy a añadir una clase, algunos como Equipo en descripción. Pero creo que este texto se ve bien. Estamos tal vez, vamos a tal vez sólo cambiar el tamaño de la fuente. Apenas alguna vez tan ligeramente. Algo así como 14. Esto debería estar bien. Y lo último que habría que hacer aquí, supongo, sería editar los iconos de las redes sociales. Entonces intentemos y los iconos sociales. Facebook, Instagram, Twitter. Sí, vale, dejémoslo así, pero cambiemos los iconos. Vamos a cambiar quizá el estilo de los iconos. Veamos qué se verá bien. A lo mejor cuadrada. A lo mejor cambiemos el color de fondo a nuestro rojo. Y cambiemos el color del icono dos, así, color
pálido o tal vez incluso este abogado color de deslizamiento. Vamos, esto debería estar bien. Entonces tal vez cuando pases por encima de este ícono, tomemos nuestro rojo, pero hagamos eso un poco más oscuro. Entonces cuando pasamos el cursor sobre este icono cambia un poco. Y tal vez cambiemos el tamaño de los artículos. Hagámoslos significativamente más pequeños. A lo mejor como 26. Y el espacio entre iconos, tal vez como seis. Esto debería estar bien. Y voy a añadir algún margen en la parte superior como diez, o tal vez hasta como 26. Esto debería estar bien. Y por supuesto, como pueden ver, olvidé agregar una clase a mi ícono. Entonces voy a ir con like, voy a añadir una clase llamada Iconos de equipo. Ahí vamos. Voy a agregar a mi ID aquí mismo, y voy a hacer clic en copiar estilos a otro selector, y voy a simplemente pegarlos en el icono de mi equipo. Por lo que ahora nuestra clase de iconos de equipo tiene todo, todos estos valores. Entonces supongo que ahora tal vez podríamos simplemente agregar algo de espaciado aquí mismo. Añadamos, pongámoslo en algún lugar aquí. Entonces ahora cuando agarramos, nuestro equipo ganó y duplicamos, lo, puede ver que ahora mismo nuestro slider está mirando, luciendo mucho más bonito. Simplemente voy a renombrar a este equipo de uno a dos. Yo sólo voy a cambiar esa imagen a esta, a esta imagen. Vamos a llamarla. Digamos que este tipo es el CEO, por lo que será como la Jefa Financiera, tal vez CFO. ¿Por qué no? Y llamémosla. No lo sé, Jane y Jane Grey nudo. Y ahora vamos a agarrar equipo también y tierras duplican a este tipo. Y vamos, voy a renombrar esto, este equipo a, lo voy a llamar T3. Y esta imagen va a ser ID. Agarremos esta imagen. Y será como jefe de operaciones. ¿ Por qué no? Y vamos a colorear. No lo sé. Llamémosla Margaret. Margaret leyó. ¿ Por qué no? A lo mejor vamos a añadir un poco más de texto aquí abajo. Yo sólo voy a agarrar algo de este texto y añadir otro y añadir algo, algún texto como ese. Y lo mismo aquí con el párrafo. O tal vez menos que eso, el párrafo, dejémoslo. Déjalo así. Ahí vamos. Y lo mismo aquí. O tal vez sólo voy a copiar un poco de frente esta pieza de texto angularjs en alguna, en alguna variedad aquí. Ahí vamos. Entonces conseguimos a nuestros, miembros de nuestro equipo. Déjame simplemente salvarlo y guardarlo. Entonces ahora todo lo que realmente necesitamos hacer, déjame simplemente cerrar esto. Como podemos ver, tenemos tres divs dentro de esta diapositiva y menú. Podemos renombrar esa diapositiva a, llamémosla diapositiva uno. Y entonces solo, voy a cerrarlo para que puedas verlo todo mejor. Voy a duplicar esta diapositiva y voy a renombrarla. Voy a llamarlo diapositiva dos. Y dentro de esta diapositiva, voy a simplemente entrar, de nuevo, cambiar todas las imágenes. Entonces voy a agarrar este. Agarremos esta imagen. Y luego voy a ir al equipo a, voy a cambiar esta imagen a esta imagen. Y voy a hacerlo, no me voy a molestar en cambiar el cambio de nombre en el puesto. Estoy bastante seguro de que a estas alturas ya sabes cómo hacerlo. Es sólo cuestión de cambiar el texto. Y ahí vamos. Yo solo quiero mostrarte cómo funciona esta cosa del deslizador. Entonces déjame hacer un poco de vista previa de esa página y
puedes ver que conseguimos nuestro slider trabajando con nuestras diferentes, diferentes imágenes. Entonces en este momento ya que tenemos nuestras clases y sumado a nuestra, a los miembros de nuestro equipo, podemos por ejemplar, cambiar todo una de una sola vez. Podemos cambiar este tamaño de texto. Digamos que quiero que sea 18. Y a lo mejor quiero cambiar el espaciado inactivo, este margen para ser así de grande, por ejemplar. O tal vez me gustaría hacer este tamaño de fuente más grande. Yo quiero hacerlo como 32 o algo así. Y a lo mejor quiero agregar algo de espaciado en la parte inferior. Ya sabes, tenemos las clases. Por lo que ahora podemos hacer, hacer que todo funcione mucho, mucho más suave. Podemos hacer nuestro proceso y mucho, mucho más suave. Entonces lo voy a guardar. ¿ Voy a pasar demasiado tiempo y no hay cambio en la forma en que trabajan estos tipos. Entonces conseguimos nuestro slider y que olvidé ponerme a la reproducción automática, creo. Entonces voy a ir a la configuración autoplay, voy a salvar a este tipo. Y voy a refrescar mi página. Y ahora nuestro, nuestro slider está funcionando como se pretendía. Sí, así que ahí vamos. Tenemos nuestro, creo que se ve bonito, bastante bonito y nuestro, nuestro slider. Entonces supongo que ahora podemos pasar a nuestra siguiente sección.
104. 13.24inicio la sección de testimonios: En los próximos videos, vamos a crear nuestra sección de testimonios. Y para eso, de nuevo vamos a estar usando el slider, pero esta vez lo vamos a poblar con el módulo testimonial. Entonces como de costumbre, sólo voy a crear una nueva sección. Déjame sólo ver mi estructura. Y vamos a añadir una sección. Este es este tipo de aquí. Y esa sección va a tener un color de fondo de este rosa pálido aquí mismo. Entonces voy a añadir un slider. Ahí vamos. Y como de costumbre, creo que me voy a deshacer de estas dos diapositivas. Voy a usar este. Y por supuesto podríamos hacer algunas opciones de configuración y con nuestro slider. Entonces dependiendo de lo que quieras hacer al respecto. Y podemos, puedes tener la animación configurada a velocidad de fundido horizontal, todas esas cosas. Ahora lo que voy a hacer es que voy a añadir cambiar ese color a este. Creo que voy a quitar la panning alrededor de las diapositivas de la mente. Creo que voy a estirar todos los toboganes a la misma altura. Y por supuesto más adelante, creo que voy a usar la opción de reproducción automática y el infinito, pero por ahora no voy a estar usando el hub porque, ya sabes, yo solo, no quiero que nuestras diapositivas solo salten de ida y vuelta. Biólogos, lo sé. Yo quiero, quiero mantenerlo sencillo por ahora. Entonces nosotros entonces nuestra diapositiva. Voy a añadir un testimonio. Testimonial. Ahí vamos. Y conseguimos algunos conseguir algunos elementos testimoniales prediseñados aquí dentro. Entonces nos dieron el texto, nos dieron el nombre, y nos dieron la, oh, supongo la empresa para la que trabaja esta persona. Entonces lo que voy a hacer es que primero voy a agregar una imagen a mi testimonio. Y creo que sólo voy a ir con las mismas imágenes que antes. Entonces solo voy a seleccionar uno. Y de nuevo, voy a tener que guardarlo y refrescar la página para que
veas esa imagen realmente siendo agregada a mi, a mi testimonio. Y voy a bajar, abajo, aquí
abajo para que tengamos nuestra imagen en ello. Pero claro que podemos cambiar algunas cosas al respecto. Primer lente, podemos agarrar el diseño. Yo quiero hacerlo vertical justo AHORA, igual que está en nuestra,
en nuestra referencia de diseño. Y luego quiero alinear el contenido al centro, mismo para la versión móvil, móvil. Entonces con todo, supongo que podríamos llamarlo un día. Pero, ya sabes, solo hay un par de cosas más que me gustaría hacer. Entonces, en primer lugar, cuando vamos a nuestro panel de imágenes, podemos establecer, por supuesto, el tamaño de la imagen, pero sobre todo podemos establecer la posición de la imagen. Podemos hacerlo antes que el contenido, o podemos hacerlo después. Entonces voy a lograrlo después. Y creo que voy a disminuir el tamaño de la imagen a algo así como quizás 66. Esto debería ser, esto debería estar bien. Y cuando vamos a nuestra topografía y luego texto, podemos cambiar esto primero que esta grande gravó demasiado bien algo más en nuestro caso, se
puede ver que tenemos así, creo que es simplemente una diferente, como una fuente serif. Entonces lo que voy a hacer es cambiar esa fuente algo, algo, algo serif. Voy a ir con Laura. Esta es solo una bonita fuente serif de Google. Este tipo de aquí. Y creo que voy a, voy a entrar en inclinado así
y tal vez hacerlo sólo un poco más pequeño a algo como tal vez 18. Y voy a aumentar el peso de la fuente a algo así como 600 distribuidos ¿verdad? Ahora si echamos un vistazo a nuestra referencia de diseño, también
podemos cambiar esos bits aquí mismo. Entonces lo que voy a hacer es volver a mi,
a mi tipografía, voy a ir a la sección Autor. Y creo que voy a hacer que este tipo sea un poco más pequeño, pero voy a aumentar el peso de la fuente. Quizás incluso más que eso a algo así como 700. Y a lo mejor voy a agarrar esto, esta etiquetas principales. Voy a cambiar la fuente a algo así como 500. Y de nuevo, voy a ir a autor. Y a lo mejor voy a hacerlo en mayúsculas y hacerlo sólo un poco más pequeño. Ahí vamos. Y por supuesto también podríamos cambiar la información del autor. Y así este pedacito aquí mismo, pero creo que se ven, se ven bien. Entonces supongo que podríamos tal vez como pedir prestado algún texto de aquí y pegarlo. Aquí. Ahí vamos. Y por supuesto, podríamos tal vez sólo algunos cambiar un poco ese texto. Creo que tal vez esas topografías todavía demasiado grandes, como 18 puntos es un poco demasiado. Vamos como 16 puntos. Y básicamente terminamos con este slider, será esta diapositiva aquí mismo. Pero claro que todavía necesitamos duplicar y cambiar algunas cosas al respecto. Es decir, nos gustaría tener algunos testimonios más en nuestro sitio. Pero cuando echamos un vistazo al original, se
puede ver que todavía tenemos así,
alguna comilla, supongo, aquí
mismo antes de todos y cada uno, cada uno de los trozos de texto aquí. Entonces, ¿cómo podríamos lograr eso? Bueno, en realidad es bastante simple aquí dentro del oxígeno y solo necesitaremos agregar un estado similar
a un CSS a nuestra diapositiva. Y podría sonar un poco difícil, pero en realidad no lo es. En realidad empecemos a hacer eso en el siguiente video.
105. 13.25 añadir el estado antes: Por lo que ya sabemos trabajar con el estado hover, pero también aquí dentro,
dentro de oxígeno y en CSS también se puede utilizar el estado antes y después. Entonces si elegimos el estado antes, se
puede ver que lo primero que podemos ingresar aquí es el área Contenido. Bueno, podemos insertar algún contenido porque después y los estados de
flotación suelen permitir agregar algo, algunos, como
algunos elementos de diseño o algún contenido antes o después de un elemento específico. Entonces en nuestro caso, lo que nos gustaría hacer es agregar lo simple como una opción de comillas. Bueno, al igual que su símbolo, comillas símbolo. Entonces lo que voy a hacer es cuando esté en este testimonio, voy a ir al estado antes. Y en este contenido, si solo escribo algo como no lo sé antes, se
puede ver que esto en realidad ahora se está exhibiendo ante mi testimonio. Pero no quiero solo teclear antes. Sólo voy a agregar tal vez como esta comilla así. Y ahora voy a ir a topografía avanzada y podemos cambiar el tamaño de la fuente. Sentémonos como 46. Se puede ver que en realidad está cambiando justo aquí. Y podemos, podemos, si queremos, podemos cambiar ese texto. Nada que diga la font-family como nuestra pantalla de texto carmesí. Podríamos cambiar el peso de la fuente, algo así como el 600 de mayo. Y también podríamos simplemente volver atrás. Podemos cambiar la altura de la línea para decir u uno. Podemos cambiar el espaciado entre letras si quieres, pero no lo haría, realmente no funcionaría aquí. Pero sobre todo lo que quiero hacer es ir al tamaño en el espacio. Y aquí mismo en la opción de margen, si por supuesto escribimos como 25, se
puede ver que todo se está extendiendo. Pero si nos gusta el negativo 25, se
puede ver que nuestro margen se reduce y nuestro texto está pero más cerca de nuestro, a nuestra comilla. Pero creo que voy a ir con como tal vez menos cinco o tal vez incluso un 0 para ese asunto en el GIP se ve bien. Y tal vez sólo voy a aumentar la topografía a algo así como puede ser 56. Esto debería ser, esto debería estar bien. Entonces como pueden ver, agregar elementos a sus estados Antes, antes y después realmente es realmente,
realmente fácil y podemos agregarlo a nuestros testimonios, sea cual sea el módulo testimonial. Entonces ahora como mencioné antes, déjame simplemente guardarlo rápidamente. Como mencioné antes, todo lo que realmente necesitamos hacer es simplemente duplicar nuestras diapositivas. Déjame sólo hacer como tal vez dos. Y entonces todo lo que tenemos que hacer es simplemente cambiar los nombres, el texto, y las imágenes. Pero empecemos a hacer eso a continuación.
106. 13.2666 terminar los testimonios: Entonces primero voy a pasar a mi segundo testimonio. Y aquí dentro, claro, voy a cambiar esta imagen por tal vez esta de aquí. Y estos chicos, me van a llamar Jane Doe se va a llamar Jim, HACEN eso. Y sólo voy a agarrar tal vez este texto de aquí y pegarlo dentro y salvar a este tipo. Y luego voy a ir a este testimonio. Y otra vez, cambiar esa imagen, tal vez a esta imagen. Voy a subir eso. Y esto va a ser como, deberia conocer a Mary, Mary Johnson. Ahí vamos. A lo mejor no trabaja para soluciones web Jarvis, pero para exterior no hay soluciones de súper limpieza o algo así. Soluciones de súper colina. Ahí vamos. Sólo arregla eso. Y voy a salvar esto. Y acabemos de echar un vistazo a nuestro, a nuestra página. Entonces voy a copiar esto y pegar aquello en mi modo de incógnito. Voy a bajar todo el camino hasta aquí. Y como pueden ver, nuestro slider está funcionando, está funcionando correctamente. Por supuesto, si quisiéramos, podríamos agarrar mi deslizador ahora mismo. Y quiero que estas animaciones sean más rápidos. Entonces voy a hacer como Arnold 350. Y para la configuración, voy a añadir la reproducción automática, voy a guardar eso. Y ahora déjame refrescar la página. Y como puedes ver, todo está funcionando bien. Todo está funcionando correctamente. Entonces supongo que lo último que habría que hacer aquí sería sólo comprobar la capacidad de respuesta. Voy a ir a la página contenedor 1120, pero antes de eso, voy a afligir la reproducción automática. Entonces voy a ir a la página contenedor 1120. Se ve bien. 992. Se ve bien. 768. Todavía miraré a la derecha. Y 80. Eso es todavía, eso todavía se ve bien. Pero como puedes ver, estos divs no están tomando todo el espacio disponible. Entonces vamos a agarrar a mi equipo un div aquí mismo. Y voy a asegurarme de que estoy en el en este BID va. Agregamos el tamaño a nuestro ID y solo voy a hacer que el ancho sea 100%. Ahí vamos. Voy a hacer lo mismo para que este equipo div. Y 100%. Ahí vamos. Y para este, este es, creo que este es el equipo tres. Nuevamente, lo mismo, un 100 por ciento. El sentido ahora se ve mucho mejor y tenemos que hacer lo mismo por nuestro, para el Will estas diapositivas. Entonces primero voy a grep el slider lodo tipo, este tipo de aquí y no lo hará, todos estos elementos se pueden apilar verticalmente. Voy a asegurarme de que estén centrados. Y nuevamente, T1 para bloquear 100 por ciento. Este tipo, el segundo con 100 por ciento. Y el último, y el último. Vamos a ir con 100 por ciento. Ahí vamos. Y supongo que tal vez cuando vamos a 480, ahora, supongo que sigue siendo todavía se ve bien. Entonces ahí vamos. Creamos nuestros testimonios. Arreglamos algunos problemas de respuesta. Y como pueden ver aquí, en cuanto a nuestros testimonios, tal vez estas flechas no se ven demasiado grandes. Entonces supongo que tal vez podríamos deshacernos de ellos. Para que pudiéramos deshacernos de estas flechas. Tenemos, tenemos el punto. Entonces si alguien realmente quiere saber, Navega a través de nuestros testimonios, siempre
podrían simplemente hacer click en estos, todas estas balas. Entonces creo que fue este slider. Entonces voy a ir a peinar. Déjame sólo ir a la configuración. No quiero mostrar las flechas. Entonces ahora cuando vamos a menos de 768, no
hay flechas y solo,
simplemente se ve más limpio. Y si lo configuramos para auto play, se va a reproducir automáticamente. Entonces supongo que estamos bien. Estamos bien para ir. Entonces sólo lo voy a guardar. Y nuestro próximo orden del día sería agregar algo así como un, algo así como un blog rápido, real como podemos agregar, solo
echamos un vistazo al original. Podríamos agregar justo como esta última parte de noticias justo aquí. Pero vamos a empezar a hacer eso en el siguiente video.
107. 13.27La sección de publicaciones del blog: En los próximos videos, vamos a crear esta sección de post de blog. Y primero vamos a pedir prestadas estas piezas de impuesto y luego sólo vamos a entrar en agregar. Sólo afortunados tres. Publicación de blog básicamente, básicamente blogposts a extractos. Entonces como pueden ver, sólo tengo que añadir rápidamente algunas jadas, sólo para, no aburrirte con el mismo proceso otra vez. Entonces voy a ir a mis páginas y voy a editar mi portada con oxígeno. Y como de costumbre, sólo voy a empezar con crear otra sección que va a bajar aquí. Entonces primero voy a pedir prestado este texto, este texto de nuestro equipo. Voy a duplicarlo y ponerlo aquí en mi sección. Y luego voy a duplicar este rubro. Y lo voy a poner aquí abajo. Entonces por supuesto que tiene que ir por debajo de esto, este texto porque ahora mismo se puede ver que conseguimos este nuestro equipo y conocer a nuestros abogados piezas de texto. Y así lo voy a ser, vamos a escribir noticias. Y voy a escribir como desde nuestro blog. Y un hijo mientras estoy aquí, sólo
voy a asegurarme de que esta pieza de taxi se ponga al centro. Eso está todo bien. Voy a ir a la sección y me voy a centrar y escrito así. Entonces lo que voy a hacer ahora es que voy a añadir mis publicaciones. Por lo que sólo voy a añadir nuestro módulo de publicaciones fáciles. Y ahí vamos, lo tenemos justo aquí. Entonces si echamos un vistazo a nuestra referencia de diseño, lo que tenemos que hacer es agregar primero la imagen destacada, luego algunos metadatos como la fecha, las categorías, después el título, y luego un extracto. Entonces primero, dentro de mi módulo de pose fácil, puedo elegir como este primer estándar de imagen crit presente. Y voy a ir a Query, y luego voy a ir a la costumbre. Y aquí dentro quiero cambiar la cuenta. Voy a ir con como tres porque creo que teníamos tres puestos. Y yo sólo lo voy a guardar. Y luego voy a aplicar los parámetros de consulta. Y como pueden ver, conseguimos que se exhiba nuestro post. Pero claro que solo hay algunos problemas. Entonces, en primer lugar, sólo voy a aumentar tal vez este espaciado aquí mismo. Lo que queremos hacer es que definitivamente no queremos tener que contar estos extractos más grandes y más grandes. Entonces lo que tenemos que hacer es cambiar estos, y luego tenemos que cambiar la fecha. Se supone que está justo aquí sobre nuestro título. Y luego tenemos que agregarlas categorías y tal vez deshacernos del botón leer más. Entonces empecemos a hacer todo eso a continuación. Primero lo que voy a hacer es ir a Admin y sólo voy a limpiar mis puestos. Entonces lo que voy a hacer es solo, ya
sabes, arreglar esos extractos. No quiero que esos actos sean extractos sean tan largos. Entonces solo voy a arreglar eso rápidamente y entonces
realmente podemos pasar al estilo y a nuestras publicaciones de blog.
108. 13.28Estilizar las publicaciones del blog: Correcto, así que ahora empecemos a peinar nuestras publicaciones de blog. Entonces, en primer lugar, voy a agarrar mi módulo de presumir fácil. Y voy a ir a consultar el conteo personalizado. Y quiero mostrar tres posts. Entonces voy a aplicar Parámetros de Consulta. Y conseguimos nuestros puestos aquí mismo. Por lo que en este punto podríamos empezar a cambiar algunas cosas sobre nuestra, sobre nuestras entradas de blog. Pero, ya sabes, hay algunas cosas que vamos a, vamos a poder hacer justo desde nuestra y yo soy esta herramienta pagos rumbo España. Pero desafortunadamente, para recrear este tipo de diseño, definitivamente
tendremos que cavar en algún código, pero no será
difícil, no va a ser nada aterrador. Por lo que debes estar asustado URL. Entonces antes de eso, déjame solo quizás agregar algo de espaciado aquí mismo. Y lo primero que quiero hacer es quizá voy a cambiar el color de nuestros títulos. Entonces voy a ir a mi, por supuesto, a los posts fáciles a Styles título. Y cambiemos el color. Probemos esto puede ser este más oscuro, bueno, de color casi negro. Y tal vez sólo voy a salvar mi, mi plantilla. Entonces voy a guardar esto como mis posts preestablecidos, y lo voy a guardar. Entonces si echamos un vistazo al original, hay algunas cosas que tenemos que hacer. En primer lugar, no tenemos la fecha justo aquí en la parte superior, como lo hacemos en nuestro caso. Tenemos la fecha y las categorías aquí mismo. No tenemos el botón leer más. Y tenemos un extracto aquí mismo. Y por supuesto las categorías tienen un estilo un poco. Entonces, empecemos con deshacernos de este estado aquí mismo. Y pongámoslo después del título analizar. Vamos al mismo tiempo, una vez deshacernos de este admin y no hubo comentarios eran enlaces. Entonces lo que voy a hacer es ir a plantillas, y necesito ir a plantillas, PHP. Entonces, cuando echamos un vistazo a
nuestra, nuestra estructura aquí mismo, podemos ver que conseguimos esto primero. Bueno, la primera es la imagen, pero luego conseguimos este div, OK, supuesta superposición de fecha de imagen, y luego conseguimos esta función de fecha aquí mismo. Entonces todo lo que realmente tenemos que hacer es sólo agarrar a este tipo. Voy a cortarlo. Y luego voy a bajar aquí donde podamos ver a nuestro post materia autor, post meta artículo. Y luego llegamos a publicar metacomentarios, o estos son todos, bueno, estos dos, estos dos enlaces. Entonces básicamente lo que voy a hacer es deshacerme de todos estos elementos y solo voy a pegar esa función de fecha aquí mismo. Y cuando aplicamos el código, podemos ver que nuestra fecha simplemente salta aquí mismo, salta bien, justo en su lugar. Y en este punto no necesitamos este div aquí mismo. Mantengamos el código un poco más limpio. Yo me voy a deshacer de eso. Y al mismo tiempo, aquí
abajo, podemos ver a este oxo leer más. Y no tenemos un botón Read More aquí mismo, así que podemos simplemente deshacernos de él. Por lo que sólo voy a seleccionarlo. Y luego déjame simplemente seleccionarlo. Y yo sólo voy a quitar a este tipo, aplicar el código. Entonces conseguimos el título y nos dieron el, bueno la fecha. Entonces ahora tenemos que sumar las categorías aquí mismo, aquí mismo. Pero antes de que hagamos eso, sólo
voy a guardar todo. Entonces bien, 90, todo lo que realmente necesitamos es que necesitamos las categorías además aquí mismo. Entonces para hacer eso, solo voy a pedir prestada esta pieza de contenido, este PHP d x duele. Voy a copiarlo y lo voy a pegar al lado de mi cita. Y por supuesto, si aplicamos el código, vamos a tener un extracto justo al lado de nuestra fecha aquí mismo. Entonces todo lo que necesitamos hacer es cambiar esta pieza de texto, el extracto para no poder ir, ir. Por supuesto que esto no es un oxígeno entonces es algo de WordPress. Y si solo aplicamos el código, conseguimos que se mostraran nuestras categorías junto con los enlaces. Pero por supuesto que no están peinados de la manera en que quisiéramos que se peinaran. Y eso es, ya sabes, eso es lo que somos, estamos a punto de cambiar. Pero hay que recordar que hay como clases generales de WordPress de guerra que se encargan de hacer que estas clases se vean como se ven, miren como se ven. Por lo que no es dependiente del oxígeno. Entonces me temo que solo estamos codificando un poquito con el fin de que esto se vea. Cómo hará que nuestras categorías luzcan en el original. Pero creo que será un gran ejercicio para nosotros y transmitir. Las reglas que vamos a escribir van a ser realmente, realmente simples. Entonces sí, eso tal vez deja de hablar. Y en realidad pongámonos al estilo por error. Y nuestras categorías.
109. 13.29Estilizar las categorías: Entonces como dije en el video anterior, hay ciertas clases o una clase que encargan de peinar las categorías en esas
son las clases de WordPress y las clases de oxígeno. Y si inspeccionamos esta tapa aquí mismo, se
puede ver que conseguimos esta lista desordenada categorías de puestos de clase. Y dentro de esa clase tenemos artículos de lista. Y dentro de los que obtenemos, tenemos enlaces. Y vamos a estar utilizando todos estos tres elementos con
el fin de que nuestras categorías se vean como deberían. Pero vamos a empezar con categorías de post. Entonces lo que voy a hacer es volver a mis plantillas, a mi plantilla CSS. Y aquí abajo, sólo voy a escribir en categorías de postes de periodo. Ahí vamos. Y luego sólo abrir y cerrar corchete. Entonces lo que queremos es que estas categorías estén uno al lado del otro. Queremos que estén en línea. Por lo que voy a empezar con el tipo it en display flex. Entonces esta es una de las reglas que solemos establecer cuando queremos manipular nuestras secciones o devs. Y luego voy a decir dirección flex, rho, va a aplicar el código. Y como puede ver, nuestros elementos están siendo muy apilados debajo del petróleo uno al lado del otro. Por lo que también me gustaría deshacerme de estos puntos de bala. Entonces voy a ir a mi, Vamos a publicar categorías. Bueno, gobierne y voy a escribir en estilo de lista. Yo quiero ponerlo en Ninguno. Y luego cuando aplicamos el código, se
puede ver que estos puntos de bala se han ido. Entonces ahora lo que quiero hacer es querer darle estilo a las piezas individuales de la ONG como estas categorías individuales. Entonces voy a pegar eso, y esta vez voy a golpear, bueno, voy a escribir en LI, que es un elemento de lista. Y voy a abrir y cerrar el soporte. Y lo que queremos hacer, supongo que queremos agregar algo de relleno. Entonces voy a teclear en relleno. Veamos como tal vez no lo sé, diez píxeles. Y vamos a aplicar el código. Ahí vamos. Entonces presta a tal vez como un color de fondo, color de fondo. Y supongo que sería una buena idea tomar prestados nuestros colores de nuestros colores globales. Hagamos éste. Y yo sólo voy a pegar eso. Y ahí vamos. Y también voy a establecer margen, margen, ¿verdad? A tal vez, no lo sé, como cinco píxeles. Y luego voy a aplicar el código. Por lo que también podríamos hacer tal vez como el texto transformado y hacer nuestro texto en mayúscula. Y vamos a aplicar el código. Entonces vamos. Y por supuesto, como pueden ver, que el texto aquí dentro de nuestras categorías, no se ve demasiado bien. O sea, el color no está bien. Y aunque solo tecleemos pluma como color Arnold, blanco. Y luego aplicando el código, se
puede ver que nada está cambiando. Y eso es porque todavía tenemos eso. Cuando vamos a nuestro modo de incógnito, puedes ver que también tenemos un enlace aquí mismo. Por lo que tenemos un enlace dentro del elemento de lista dentro de una lista desordenada. Entonces voy a llamar a p las categorías dispersas, así post y un elemento de lista. Y entonces sólo voy a añadir un enlace de anclaje aquí mismo. Y entonces supongo que sólo podemos copiar o pegar a estos tipos. Déjenme cerrar este corchete. Y luego solo puedes abrir y cerrar el corchete, pegar ese valor N, y luego simplemente aplicar el código. Y como pueden ver, nuestra, bueno, cambia, nuestras, nuestras categorías cambian. Pero supongo que deberían ponerse como uno al lado del otro que el Octubre, la fecha, y luego estos chicos aquí también. Entonces para poder hacer eso, vamos a tener que ir a nuestro meta-post oxy y gobernar. Porque cuando vayamos, déjame solo tal vez guardarlo. Cuando vamos a nuestra plantilla PHP, se
puede ver que tenemos esta clase div OK, se supone que mentor. Y dentro de eso tenemos esta fecha y nuestra categoría. Entonces esto en realidad es una, una clase de oxígeno. Entonces cuando vamos a nuestro buey se supone que mete, Este es este tipo de aquí. nos dieron ellos ya esta pantalla flex y dirección flex configurados en fila. Pero solo tecleemos un centro de líneas de ítems, y luego aplicemos el código. Como puedes ver, ahora, se
ven mucho, mucho mejor. Supongo que también podríamos ser solo teclear texto a texto transformar mayúsculas porque creo que en nuestro sí, estos tipos, como puedes ver, están configurados para, bueno, todos
son mayúsculas. Entonces eso es lo que voy a hacer. Supongo que tal vez podamos incluso pedir prestado este texto transformar el valor de este tipo. Entonces voy a pegar eso y aplicar el código. Y básicamente se crean nuestras categorías y simplemente va a aplicar y guardar. Y luego voy a ir a mi página principal y voy a refrescar la página. Y como puedes ver, conseguimos nuestras categorías justo aquí muy bien exhibidas. A lo mejor vamos a deshacernos de ellos. Supongo que aquí hay demasiado Perrin. Para nuestras categorías. Supongo que podemos hacerlos un poco más pequeños. Si echamos un vistazo a nuestro original, puede ver que es mucho, mucho más pequeño. No hay demasiado relleno en la parte superior y mucho más a los lados. Y el tamaño de la fuente también es más pequeño. Entonces tal vez primero vamos a agarrar este tamaño de fuente aquí mismo. Y vamos a intentarlo. Intentemos tal vez algo así como, no
sé, 12 píxeles. Veamos qué hace. Podría verse mejor. Entonces nos arreglaron el tamaño de la fuente, pero quizá nos ocuparemos de la purina. I. Es demasiado de, demasiado Perrin aquí mismo. Entonces lo que podríamos hacer es que quizá gustaría agregar más relleno en los costados y menos apuestas en la parte superior. Entonces con estas reglas, puedes, bueno, nosotros las reglas CSS, puedes seguir una regla, al
menos en términos de relleno y margen. Podemos, dentro de una regla, una línea de código, podemos agregar varios valores. Entonces si ahora solo lo tenemos como diez y píxeles, y si dejamos diez píxeles, significa que tenemos 1010 píxeles de relleno y por todas partes. Pero si nos gusta, agrega, digamos 20 píxeles y luego solo aplica el código. Como puedes ver, primero es agregar relleno superior e inferior, y luego está agregando relleno izquierdo y derecho. Y si vamos como cinco píxeles y 50 píxeles, ahora mismo, va a agregar unos valores diferentes para arriba, derecha, abajo, e izquierda. Entonces va en el sentido de las agujas del reloj, arriba, derecha, abajo, izquierda. Pero claro, no quiero hacer eso. Yo solo quiero agregar un top e bottom. Entonces déjame solo mover eso. Entonces arriba y abajo va a ser como cinco píxeles e izquierda y derecha va a ser como diez píxeles. Entonces vamos a ver cómo se ve eso. Supongo que se ve, se ve mucho mejor. Entonces supongo que lo último que hacer aquí sería simplemente deshacerse de este espacio entre nuestras categorías y la fecha. Entonces vamos a nuestro, Vamos a nuestro código. Y sólo voy a encontrar mis categorías de puestos. Este es este tipo de aquí, esta línea. Y solo voy a teclear en relleno, relleno a la izquierda. Y veamos como diez píxeles. Y voy a aplicar el código. Supongo que diez píxeles deberían estar bien. Veamos el, el original. Supongo que esto es algo así como diez píxeles. Entonces conseguimos el nos
arreglamos las categorías, las conseguimos, tenemos la fecha. No creo que vaya a estar creando como un solo puerto para una sola página de post. Ya lo hicimos antes. Entonces simplemente no quiero aburrirte con criminal simplemente agregando datos dinámicos a tu plantilla. Lo que vamos a hacer, sin embargo, es que vamos a sumar este trabajo. Creo que vamos a saltarnos esta sección porque ya tenemos algo como esto. Entonces vamos a pasar a esto,
bueno, esta sección básicamente formulario de contacto. Entonces pasemos a eso ahora.
110. 13.30Empieza a añadir el pie de pie: Entonces empecemos a sumar en nuestro pie de página. Y como de costumbre, voy a empezar con añadir una sección. Y va a tener nuestro color de fondo azul oscuro. Y dentro de esa sección, voy a añadir columnas. Y voy a sumar la división 50-50 aquí mismo. Por lo que en la columna de la izquierda vamos a tener nuestro texto y alguna información de contacto. Y a la derecha vamos a construir como un formulario de contacto ficticio. Entonces en el primer div, este div de la izquierda, voy a empezar con agregar solo algunos elementos de texto. Y supongo que podríamos agregar sólo tres elementos de textos porque vamos a tener, déjame simplemente ir a nuestro diseño. Vamos a tener este Contáctenos. Y luego vamos a tener esta evaluación gratuita de casos. Y entonces vamos a tener esta pieza de texto aquí mismo. Y por supuesto, probablemente notaste que vamos a usar, vamos a hacer algo un poco diferente. Es decir, decidimos saltarnos esta sección porque ya hicimos algo así antes. Entonces hagámoslo como un gran pie de página audaz con nuestra información de contacto y estas columnas. Entonces bien, aquí mismo, porque queremos que nos gusten separar nuestras publicaciones de blog y las de nuestro pie de página. Entonces voy a volver y dentro de oxígeno, voy a teclear testamento en este módulo de texto, voy a teclear contacto y lo voy a hacer, hagámoslo tan lejos. Vamos, hagámoslo. Nuestro color blanco. Y tal vez cambiemos el tamaño de la fuente a algo así como diez. Encendido. Entonces vayamos a la tipografía. Subrayémoslo. Hagamos tal vez una mayúscula. A mí me gustaría ahora, sólo para imitar este diseño, el tamaño justo aquí. Y vamos a ver si hacemos como 600. Supongo que podemos hacerlo solo un más grande supongo que 12 estaría bien. Veamos tal vez como setecientos, setecientos serán mejores. Entonces conseguimos este contacto aquí mismo. Ahora sólo voy a duplicarlo. Y voy a cambiar la familia de fuentes. Voy a ir con nuestro texto carmesí display. Voy a aumentar el tamaño de la fuente a algo así como 56. Por supuesto. Déjenme bajar aquí. Y cambiemos. No tengamos como este subrayado pasando aquí mismo. Y escuchemos para capitalizarlo. Y supongo que este font-weight es un poco demasiado grande. Vamos con como 600. Y vamos a teclear. A ver, evaluación gratuita de casos. Entonces como el caso libre valoración E, allá vamos. Y por supuesto, la última parte aquí sería agregar esto, este bit de texto aquí mismo. Entonces de nuevo, sólo voy a añadir un texto. Este tipo de aquí, y tal vez sólo voy a pedir prestado a Saddam algo de Lorem Ipsum. Voy a agarrar un poco de Lorem Ipsum. Entonces déjame solo mirar hacia adelante algún generador Lorem Ipsum. Agarremos tal vez esta parte. Ahí vamos. Y voy a pegar ese m Por
supuesto que necesita tener un color adecuado. Y tal vez cambiemos el tamaño de la fuente a algo así como 14, porque esto debería estar bien. Entonces eso es todo bonito, bastante sencillo. La parte más, supongo, desafiante sería agregar este bit aquí mismo. Pero no creo que vaya a ser realmente difícil para nosotros, ¿verdad? Todo lo que realmente necesitamos hacer es agregar un div dentro de ese div, esta columna izquierda div. Entonces solo voy a escribir div y añadí aquí. Y dentro, voy a tener un ícono. Ahí vamos. Y cambiemos los iconos coloreados a tal vez este color rojo. Cambiemos el ícono en sí. Escribamos en Maurer. Ocurren. Ahí vamos. Y hagámoslo más pequeño. Algo así como 36 debería ser. Está bien. Y dentro, dentro de este div con este ícono, tenemos que añadir, vamos a añadir algo de texto. Y vamos a teclear, creo que fue dirección. Ahora era oficina. Está bien. Por lo tanto oficina. Ahí vamos. Y cambiemos el color por el color blanco. Y vamos a cambiar el tamaño de la fuente a como 12 tal vez. Y vayamos a Luke. Cambiemos el peso. 2s como 600. Vayamos a la topografía avanzada. Mayúscula. ¿Y está subrayado? No, no está subrayado. Entonces obviamente eso nos gustaría, pero tal vez agreguemos el espaciado entre letras. Esto debería quedar bien. Y además vamos a agregar y mientras la dirección real. Entonces de nuevo, voy a añadir algo de texto. Ahí vamos. Nuevamente, cambiar el color, cambiar el font-weight a algo como quizás 700. Y creo que fue 40 park Avenue. Vámonos Brooklyn. ¿ Y por qué? Y vamos a aumentar el tamaño de la fuente a algo así como quizás 32. Esto debería ser, esto debería estar bien. Entonces por supuesto, ahora lo que tenemos que hacer es hacer que estos elementos se apilen como uno al lado del otro, no así. Por lo que dentro de este div I1, estos elementos se colocarán horizontalmente a excepción de estas dos piezas de texto. Entonces voy a envolver a este tipo con un div y poner este texto dentro, así def. Entonces conseguimos dos piezas de texto. Y ahí vamos. Básicamente conseguimos arreglar a estos tipos. Pero por supuesto tal vez podríamos hacer más pequeño a este tipo, dice algo así como 28 tal vez. Y supongo que la última parte aquí sería quizás agregar algo de espaciado. Por lo que puedes agarrar nuestro ícono, ir a avanzado, y puede ser como cinco píxeles de margen. Y si quieres, puedes un otorgamiento este div abarcador. Y se puede decir que se quiere alinear verticalmente los elementos a la línea media que. Y por último, vamos a añadir tal vez sólo algún margen como ese. Y ahí vamos. En tan solo unos sencillos pasos, agregamos. Ahora esta, esta pieza de aquí, voy a simplemente clonar este div. Y solo voy a dar clic en este componente duplicado una vez y luego dos veces. Y si le echamos un vistazo al original, podemos ver que nos dieron este teléfono y luego correo electrónico. Entonces voy a cambiar este ícono. Voy a empezar a buscar teléfono. Este será este tipo de aquí. Y por supuesto, todo lo que necesitamos hacer es simplemente cambiar el texto y luego simplemente agregar algún número telefónico aleatorio así. Y el último icono sería nuestro icono de correo electrónico. Veamos el correo electrónico. No, veamos sobre. Funciona con un sobre. Entonces tecleemos un correo electrónico y escribamos la dirección de correo electrónico. Por lo que el contacto y lawyers.com. Ahí vamos. Entonces ahora todo lo que necesitamos es agregar este mapa de Google. Y en realidad probemos esto. Esta dirección, 40 Park Avenue, Brooklyn. A ver si es una dirección real. Y por supuesto, el anuncio que Google mapa, necesitamos encontrar un módulo de mapa aquí mismo. Entonces tenemos este módulo de Google Maps. Entonces tecleemos en 40 Park Avenue. Fue Brooklyn, creo. Ah, sí. Es supongo que es una es una dirección real. Entonces ahí vamos. Y por supuesto que aún podemos aguantar un poco las cosas. Podemos cambiar la apariencia de nuestro mapa. Entonces sumemos un margen aquí arriba. Ahora vamos a asegurarnos de que lo configuramos a ancho completo. Ahí vamos. Y cambiemos la altura a algo así como, no sé, para un 150 píxeles podría ser o tal vez 350 píxeles. Creo que esto debería estar bien. Y dentro de nuestro, dentro de nuestro módulo, puedes ver que conseguimos estas opciones de zoom para que puedas alejarte. Podemos acercar sólo para cambiar la apariencia de nuestro, de nuestro mapa. Supongo que esto debería ser, esto debería estar bien. Por lo que lo último que habría que hacer aquí sería agregar un formulario de contacto. Así que déjame alejar un poco. Entonces este formulario de contacto aquí mismo, pero no voy a estar agregando un formulario de contacto real aquí. Simplemente no quiero tener ningún spam viniendo de este lado. Acabo de ver ya añadimos un formulario de contacto antes cuando lo estábamos aprendiendo. Estamos aprendiendo a usar un formulario de contacto aquí dentro de un oxígeno. Así que permítanme agregar rápidamente algunos, algunos divs simples dentro de este div. Entonces sólo voy a hacer como un div y voy a hacer el 100%. Voy a hacer el color de fondo y ser Torre rosa. Y también voy a hacer como un 50 pixeles de altura. Y sé que se puede ver mucho aquí, mucho, mucho de un cambio en cuanto a la altura. Pero confía en mí, está pasando. Es sólo una conjetura. Es sólo el renderizado delgado aquí dentro del oxígeno. Si solo refrescamos esa página, se
puede ver que tenemos nuestro
Nuestro , bueno, digamos que este es nuestro campo de nombre. A lo mejor en realidad puedes hacerlo un poco más grande. Entonces voy a ir con como 75. Y también voy a añadir como un trozo de texto. Y eso no va a ser dentro de ese div. O podríamos hacer, tal vez hacerlo sentarse dentro del div y nada. Solo tecleemos algo como tu nombre. Ahí vamos. Y voy a hacer este div, alineación
horizontal al centro. O tal vez vayamos con la izquierda, pero en realidad agreguemos algo de espaciado dentro. Voy a agregar como diez píxeles de relleno por todas partes. Y luego voy a bajar esa altura a algo así como 50. Eso lo voy a guardar. Y veamos cómo se ve en la parte delantera. Déjame simplemente bajar. Por lo que este será nuestro campo de nombre. A lo mejor hagamos realmente lo alto. Hagámoslo un poco más grande, algo así como 16. Y entonces todo lo que realmente tendríamos que hacer es simplemente clonar tal vez a este tipo. Entonces digamos que este sería nuestro correo electrónico. Hagamos tu correo electrónico. Ahí vamos. Y quizá agreguemos algo de espaciado. Y 25 luego presta duplicado a este tipo. Otra vez. Hagámoslo sujeto, supongo. Y luego vamos a duplicar de nuevo a este tipo. Y llamemos a este solo mensaje. Y por supuesto este tipo tiene que ser mucho más grande. Entonces vamos a Avanzado. Voy a ir al tamaño y el espaciado. Y tal vez voy a hacer como por ciento. Y voy a ir con como 50% tal vez. Y cuando vayamos a nuestra pestaña primaria, quiero alinear esta guía al medio. Yo quería ponerlo así. Y lo último que podría hacer aquí sería simplemente agregar un simple botón de envío. Botón. Ahí vamos. Este sería nuestro botón, y yo lo llamaría enviar. Entonces vamos, cambiemos el color a nuestro rojo. A lo mejor cambiemos la tipografía. Entonces voy a ir a la tipografía. Yo quiero que sea mayúscula. A lo mejor voy a espaciar un poco la letra. Haz que el tamaño de la fuente solo sea más grande pero no tan grande. Vayamos con 18. Y también voy a añadir un margen similar al espacio a la parte superior. Y supongo que tal vez podríamos hacer que el botón se
estire, estirando de izquierda a derecha. Con ese botón seleccionado, voy a ir al tamaño y al espaciado. Y vamos a ver, 100%. Ahí vamos. Voy a salvarlo. Y tal vez por nuestro relleno voy a ir con como, veamos como 15 arriba y 15 píxeles en abajo. Salvemos a ese tipo. Cuando vayas a nuestra portada y actualices esto, voy a ir hasta aquí. Y nosotros y nosotros conseguimos nuestro NO un real sé que no es un verdadero formulario de contacto, pero realmente no quiero tener como no, cualquier spam que venga de los lados no va a ser, ya sabes, agregando un contacto real para mi, yo solo quieres mantener este lado a la vida para ti para que puedas experimentar. Para que puedas verlo en realidad. Y se puede ver cómo, cómo fue, cómo se construyó. Cuando vamos a nuestro original, podemos ver que básicamente conseguimos nuestro, bueno, este socio creado. A lo mejor podríamos hacerlos ir a nuestros diffs. Y digamos que este tipo será un poco más grande. Entonces hagamos como 60 o tal vez 55. Pero claro, sabría que nos haría hacer algo más de limpieza aquí mismo. Entonces supongo que tal vez es algo bueno que sólo podamos cagar esta topografía topográfica. Y para esto no lo había hecho, y sólo voy a hacer como 1.1. Y vamos. Y entonces sólo comprobemos la capacidad de respuesta. A ver si tenemos eso escrito, correcto. Esto se ve bien. Vamos en 1992, todavía
se ve bien. 768. Eso se ve bien. Y cuatro AT que se ve bien también. Entonces sí, conseguimos nuestro contacto. Bueno, digamos que es un Formulario de Contacto ficticio creado. Tenemos a estos tipos aquí mismo creados también. Entonces ahora todo lo que tenemos que hacer es añadir estas tres, básicamente columnas, ¿no? Aquí mismo. Entonces empecemos a hacerlos a continuación.
111. 13.31Añade los elementos del pie: Entonces voy a agarrar otra sección. Yo sólo voy a añadir una sección. Este tipo de aquí. Y por supuesto que necesita tener un, tener un color de fondo adecuado. Entonces, ¿por qué no le echamos un vistazo al original. Obtenemos básicamente esta sección se divide primero en dos, bien en tres columnas, pero también dos filas. Entonces supongo que tal vez lo haremos en última instancia, en
última instancia en otra sección. Pero por ahora centrémonos en estas tres columnas aquí mismo. Entonces lo que voy a hacer es que voy a añadir columnas. Ahí vamos. Y yo voy a ir con este tipo. Y si echamos un vistazo al original, conseguimos estos títulos Acerca de Nosotros Contacto y enlaces rápidos. Y luego conseguimos algo, algo de información dentro. Entonces empecemos con sobre nosotros. Entonces en nuestro primer div, solo
voy a agregar un trozo de texto. Y voy a teclear y encuadernar. Como Ahí vamos. Vamos a cambiar el color del texto. Y creo que voy a cambiar eso, bueno, esta familia de fuentes a nuestra fuente display. Y voy a cambiar el font-weight a algo así como 600 y aumentar el tamaño de la fuente a, digamos 22. Esto debería estar bien. Y no estoy seguro si los textos estaban centrados aquí. Sí, ese texto está centrado. Entonces voy a agarrar mi div y voy a asegurarme de que todo esté en muy bien alineado al centro. Y entonces sólo voy a añadir otra pieza de texto. Entonces este tipo de aquí, y voy a pedir prestado este texto y pegarlo aquí dentro. Y por supuesto, cuando vamos a la tipografía, tenemos que hacerlo, tenemos una alineación al centro y cambiar el color. Ahí vamos. A lo mejor disminuyamos el tamaño de la fuente a algo así como 12. A lo mejor. Eso tal vez hagámoslo 13. Y ahí vamos. Entonces ahora supongo que podríamos simplemente duplicar estos, estos elementos. Y si echamos un vistazo al original, llegamos a este contacto y a estas piezas de información. Entonces voy a agarrar mi rumbo y lo voy a duplicar. Y lo voy a mover dentro de este div. Y voy a llamarlo creo que fue contacto. Entonces hagamos contacto. Y vamos a asegurarnos de que todo esté alineado al centro. Entonces voy a pedir prestado este párrafo y moverlo aquí abajo. Y este va a ser nuestro grueso. Va a ser nuestra dirección. Este tipo de aquí. Entonces supongo que lo voy a dejar como nuestra dirección así. O tal vez está bien, hagamos una dirección adecuada. Va a ser esta 4040 Park Avenue, Brooklyn, Nueva York. Ahí vamos. Y luego sólo voy a presionar Enter y voy
a hacer algo como el teléfono 180459845. Y creo que nos dieron dos líneas de domicilio. Ah, también tenemos un correo aquí mismo. Entonces hagámoslo. Entonces eso y por qué así solo voy a escribir en Nueva York algún código postal afortunado, supongo. Y luego vamos a hacer USA. Ahí vamos. Y también aquí abajo, voy a añadir un contacto en lawyers.com. Y déjame solo arreglar los espacios aquí mismo. Y lo último aquí sería sólo duplicar mi texto,
bueno, este rubro e ir a un lado. Y creo que fue, son enlaces rápidos. De acuerdo, entonces llamémoslo así. Entonces hagámoslo enlaces rápidos. Y entonces vamos a agarrar el div centro todo. Y para los enlaces rápidos, podríamos agregar simplemente enlaces de texto simples si quisieras, si querías hacerlo por 100 para hacerlos diferentes a nuestro menú. Entonces supongo que tal vez podríamos hacer eso. Pero los voy a envolver con un div. Entonces primero voy a crear un div. Y dentro del div voy a añadir un enlace de texto. Este tipo de aquí. Y cambiemos eso. Veamos qué tenemos en el,
en el original llegar a casa sobre, supongo que esto es solo nuestro menú. Entonces voy a ir con primero con casa. Entonces con mi primer enlace seleccionado, Tal vez voy a agregar una clase. Voy a llamarlo Enlaces de pie de página TM. Ahí vamos. Y veamos qué podemos cambiar al respecto. A lo mejor podemos cambiar el color del texto. Cambiemos eso. Cambiemos la fuente, el tamaño
de fuente a algo así como tal vez 13. Y vamos a la tipografía y lente hacer mayúsculas. Ahí vamos. Y cuando vamos a nuestra pestaña primaria, también
puedes configurar el color del cursor. A lo mejor hagamos nuestro color erecto. ¿ Por qué no? Entonces cuando pases por alto, vamos a tener este efecto. Entonces una vez que este tipo está editando, tal vez vamos en realidad
antes, antes de clonar eso, voy a agregar como un poco de espaciado y como cinco píxeles. Y entonces en realidad podemos colonia a este tipo una, dos veces, tal vez tres veces. Y voy a cambiar el texto a áreas de práctica. Por lo que practica áreas de lo que conseguimos torr agradable regula el blog. Y luego hagamos contacto, con, tacto. Y por supuesto dentro de mi div, me voy a asegurar que todo también esté centrado igual que tenemos en el original. Pero estos, estos enlaces no son, bueno, no son para molestar en mayúsculas. Entonces tal vez cambiemos eso. Voy a ir a mi clase, Topografía
avanzada y deshacerme de las mayúsculas. Pero a lo mejor vamos a capitalizarlos. Ahí vamos. Y voila, tenemos nuestras tres pestañas justo aquí. Entonces lo último que habría que hacer sería agregar nuestros iconos y algunos normales como esta información de copyright aquí abajo. Pero como tenemos columnas creadas aquí mismo, no
quiero usar estas columnas para agregar esos elementos bajos. Entonces dentro de esa sección, solo
voy a seguir adelante y elegir iconos sociales. Y voy a agarrar esta sección y yo, claro, quiero alinear todo al centro y a estos iconos. Entonces a todos, en primer lugar, necesitan ser más pequeños, faltaba algo así como 18. Cambiemos el estilo del icono. Veamos cuadrado. A lo mejor vamos con blanco. Y voy a cambiar el color a tal vez mi como super claro, rosa pálido. Ahí vamos. Y veamos el original. Tenemos, tenemos un poco de brecha aquí. Entonces voy a bajar a estos tipos Si sólo puedo agarrarlos, tal vez sea más fácil simplemente agregar algún margen a las tabletas, como el 25%. Eso va a ser demasiado. Entonces como diez o 66 debería ser suficiente. Y tal vez pensemos que esos lípidos son un poco más grandes, el original. Entonces hagamos que estos iconos sean un poco más grandes. Entonces vamos a seleccionar 20 o incluso tal vez 22. Y ya sabes, realmente no me gusta este ícono de Facebook de aquí. Entonces podríamos o deshacernos del ícono de Facebook, Bueno, el enlace de Facebook desde aquí y simplemente reemplazarlo por el ícono de LinkedIn. Ahí vamos. Se ve un poco mejor. Entonces tenemos los iconos sociales. Ahora agreguemos la información con derechos de autor en la parte inferior. Entonces lo que voy a hacer es que primero voy a añadir un ícono. Y dentro del set Font Awesome, conseguimos un eigen de información de copyright, así que solo voy a empezar a escribir en copia. Y este es este tipo de aquí. Y cambiemos el tamaño a algo así como quizá 12. Y por supuesto vamos a cambiar el color a nuestro rosa pálido. Ahí vamos. Ahora podemos agregar algo de texto y podríamos escribir como, no lo
sé, 2018 a 2020 lawyers.com. Realmente no puedo ver lo que estoy escribiendo y realmente necesito cambiar el color del texto. Ahí vamos. Creo que es yo creo que se ve bien. Y vamos a cambiar ese tamaño a 12 también. Entonces por supuesto, ese icono de copia para terminar los pasos tienen que ser, necesitan ir lado a lado. Y eso es realmente fácil. Tenemos que envolver a estos tipos con el div. Ahí vamos. Y entonces sólo asegúrate de que nuestros elementos infantiles se muestren horizontalmente. Alinémoslos al medio. Y si quieres, vas a añadir algo de espaciado a la derecha del icono. Y ahí vamos. Y tal vez supongo que podríamos agregar algún margen aquí para nuestro podríamos agregar algo de espacio aquí mismo para que se vea más o menos así. Y si lo sabes, guárdalo. Y veamos cómo se ve. Se ve más bonito, correcto, a mi gusto. Pero supongo que tal vez lo que podríamos hacer es quizás agregar como un toque de separación entre los elementos de información de contacto y esta parte inferior de nuestro pie de página. Entonces voy a agarrar mi sección y solo podemos quizá agarrar nuestro color y hacerlo solo un toque más oscuro, así como así. Y luego salva a este tipo. Entonces vamos a nuestro sitio principal. Y ahí vamos, se puede ver que en realidad se ve bastante, bastante bien. Entonces ahí vamos. Tenemos nuestra página creada.
112. 13.32Resumen: De acuerdo, entonces ahí vamos. Creamos nuestra página. Entonces primero agregamos el encabezado junto con nuestro encabezado de superposición menos pegajoso. Agregamos este deslizador de fondo. Después conseguimos esta sección con los, algunos divertidos elementos de texto. Entonces conseguimos esta bonita sección con algún efecto de suelo de cama fija paralaje. Después creamos estos iconos con un botón. Ahí vamos. Después agregamos este texto en columnas. Recuerda cómo agregamos el recuento de columnas, una regla CSS. Entonces agregamos a nuestros abogados, que en realidad dijimos que eran un slider. Y por supuesto, si quieres mirarlos, si quieres hacerlos jugar automáticamente, solo
necesitas configurar el deslizador para que se reproduzca automáticamente. Y entonces por supuesto conseguimos el slider con nuestros testimonios. Creamos el blog, y luego agregamos nuestro pie de página con alguna información de contacto, mapa de
Google y estos enlaces y estas columnas aquí mismo. Entonces como dije antes, este diseño va a ser, ya sabes, en vivo. Puedes verlo en cualquier lugar y en cualquier momento que quieras. Entonces ahí vamos. Espero que te haya gustado y creando este diseño. Espero que lo hayas creado junto a mí. Y espero que
entiendas rápidamente la libertad y el poder que te da Builder de oxígeno. Y que construirás, expandirás tu portafolio de habilidades y que podrás crear tus propios sitios web y por supuesto sitios web para tus clientes fácilmente. Entonces como siempre, ten un bonito diseño.
Dawid Tuminski
