Squarespace: cómo crear tu propio sitio web creativo sin código

1. INTRODUCCIÓN: Entonces quieres construir un sitio web, pero ¿por dónde empiezas? ¿ Qué programa vas a usar? Bueno, si eres principiante o tienes mucha experiencia y quieres ser súper creativo. Te voy a mostrar el mejor programa para todo esto, y ese es Squarespace. Cuando miras a Squarespace, posible que sientas que está un poco demasiado templada. Bueno, te voy a mostrar cómo tomar esta plantilla de avión y convertirla en este sitio web super cool, emocionante. Hola, soy John Wolfgang Miller. He sido diseñadora profesional desde hace 20 años. He trabajado para algunos clientes muy grandes como Fox TV aquí en Australia. En esta clase, voy a empezar mostrándote cómo hacer un poco de investigación en la industria. Y luego vamos a echar un vistazo a todos los elementos globales. Esas son las partes que aparecen en todo el sitio web y las que te permiten mostrar tu propia marca personal. Te mostraré cómo construir una página de inicio muy impresionante, también una página sobre, una página de contacto, y por supuesto, la página del blog. También te mostraré cómo traer en algún fondo esa animación. Esto es algo que realmente puede hacer que todo su sitio web destaque. Si quieres construir tu portafolio de sitios web y tu experiencia de diseño, estoy aquí para ayudarte con todo eso. Entonces, si estás listo, comencemos. 2. Proyecto de clase: Tu proyecto aquí es seguir mi dirección y construir tu propio sitio web increíble. En las primeras lecciones, te hablaremos a través de la configuración del espacio cuadrado. Entonces echaremos un vistazo a la página de inicio y crearemos una página que muestre quién eres. Luego echaremos un vistazo a las animaciones de fondo y mostraremos cómo darle a tu sitio ese lado extra creativo. Bien. Después de esto, habrá lecciones en tu página, tu página de contacto, y luego echaremos un vistazo fuerte a la sección del blog. Te recomiendo ver todas las lecciones y luego volver a revisarlas una por una y empezar a hacer exactamente lo que te he mostrado después de cada una. Puedes usar todas tus propias imágenes aquí o puedes usar exactamente las mismas imágenes que yo he usado. Si quieres hacer eso, todas mis imágenes se guardan aquí en la sección de recursos. En esta clase y en todas mis clases, estaré cubriendo muchas cosas diferentes y mostrando muchas habilidades diferentes. Entonces te recomiendo a medida que avanzas para reproducir y pausar los videos. Y si necesitas que repita algo, solo presiona este botón de rebobinado de 15 segundos suficientes veces, que puedas volver a ver toda esa parte Si estás teniendo algún problema con la calidad del video aquí en Skillshare, solo ven aquí y haz clic en este ícono de niveles de calidad Si esto está configurado en Auto, bueno, dependiendo de tu velocidad de Internet en casa, puede que no esté apareciendo con la mayor calidad posible. Entonces simplemente cámbielo a siete 20 o diez 80 píxeles, e instantáneamente verá un gran cambio de calidad. Al final de esta clase, tendrás un sitio web increíble. Así que asegúrate de agregarlo a la sección del proyecto, y te daré mi opinión completa. 3. Configuración de Squarespace: Bien, entonces aquí estamos en el espacio cuadrado que squarespace.com, y hay un enlace abajo en Lo mejor del espacio cuadrado es que siempre te ofrecen una prueba gratuita del sitio web. Para que puedas jugar con el programa y ver si es lo que quieres comprar. No se requiere tarjeta de crédito. No tienes que poner ningún dato de tarjeta de crédito. Entonces, cuando hayas echado un vistazo a tu alrededor, simplemente haz clic aquí en Getarted Y eso te llevará a través de la página de plantillas. El espacio cuadrado tiene muchas plantillas diferentes. Siéntete libre de mirarlos a través de todos si quieres. Simplemente selecciona todas las plantillas y desplázate hacia abajo y verás cada una que tengan. También tienen una vista previa de todo aquí, así que da clic en la vista previa. Y te mostrará cómo todos los sitios, e incluso podrás ver el sitio de demostración. Ahora, el sitio web que voy a hacer. Bueno, va a ser un sitio de blog. Va a ser un sitio de blog sobre mi cosa favorita en el mundo. Y eso son los videojuegos. Lo que me encantan son los videojuegos retro. Me encantan todos los viejos juegos de Nintendo y Sega y todas las viejas máquinas arcade de los 80 y 90 Entonces quiero tener un blog que hable todo eso y hable de todos estos juegos increíbles. Entonces, podría mirar a través de todos ellos ahora, o aquí arriba, puedo elegir que va a ser un sitio de blog. Y eso estrechará las búsquedas. O bien, se trata de entretenimiento. Entonces veamos qué tenemos aquí. Las opciones que elegimos aquí no dieron muchas coincidencias de plantilla. Así que vamos a elegir otra cosa. Voy a elegir tienda en línea. No estoy haciendo una tienda en línea, pero puedes tomar cualquier plantilla de esta y simplemente jugar con ella para hacer lo que quieras que haga, de verdad. Entonces veamos qué más podemos encontrar aquí, ver si hay algo que me guste. así como el tipo de colores más brillantes ahí, pero es un poco liso, el blanco. Y como que me gusta este de aquí, para ser honesto. Sé que no es brillante ni nada, pero me gusta la forma en que tenemos la imagen grande a la derecha y luego el texto grande a la izquierda. Vamos a previsualizar este. Bien. Sí. Quiero decir, sigue siendo bastante aburrido en términos de colores. Pero en cuanto al diseño, me gusta el uso de fuentes grandes e imágenes grandes y esas cosas. Entonces creo que vamos a empezar con esto, y creo que lo vamos a desarrollar para que se vea como queremos que se vea. Así que vamos hasta aquí, comencemos con este diseño. Y ahora, necesitas crear una cuenta y puedes hacerlo gratis. No tienes que poner ningún dato de tarjeta de crédito ni nada por el estilo. Entonces solo voy a continuar con una de mis cuentas de Google. Y así ahora que he entrado en eso, como pueden ver, está configurando las cosas. Bien. Y aquí tienes. Bienvenido a su sitio. Esto acaba de crear el sitio para nosotros usando todo, desde la plantilla. Ahora vamos a entrar y jugar con esto. Entonces, antes que nada, el título del sitio. Voy a llamarlo Game Over. Después edita páginas. Esto solo te habla un poco de cómo funciona. Cómo crear páginas. Voy a hablar de todo esto ahora mismo. Así que empieza. De nuevo, obtendrás algunos pedacitos extra de ayuda por aquí. Sólo cierra esa por ahora. Y luego, por aquí a la derecha. Este es tu sitio web, básicamente. Esto es todo lo que ya se ha creado para ti. Si simplemente haces clic en la pequeña flecha aquí, va a pantalla completa. Y puedes desplazarte y simplemente ver cómo está funcionando todo el asunto. Esto obviamente se trata de jabones, que no se parece en nada a lo que queremos hablar Pero vamos a cambiarlo para que se trate de videojuegos, y va a ser mucho más brillante y mucho más fuerte Pero como pueden ver, ya está puesto en el nombre de mi sitio web en la parte superior ahí. Entonces, vamos a cerrar esta. Entonces por aquí a la izquierda, tienes el menú, y aquí es donde puedes administrar todo en tu sitio web. No voy a repasar todo aquí por ti ahora mismo porque aquí hay mucho. Te voy a mostrar rápidamente aquí las páginas. Estas son todas las páginas que tenemos en nuestro sitio web, y estas son solo demos que se han creado para nosotros. Entonces tenemos uno para el diario de la tienda sobre y contacto. Y entonces esta es la página de inicio. Y luego tenemos algunos extras aquí abajo, envíos y devoluciones y almacenistas Eso es porque es una tienda online, pero no vamos a necesitar esas cosas. Entonces sólo voy a borrarlos. Y no necesito tienda, va, así que voy a borrar eso. Como puedes ver por aquí, esta es la navegación principal que se encuentra en el encabezado del sitio web. Y aquí abajo, estos son los que no enlazan. Entonces no en la navegación principal. Pero si quieres meterlos , solo arrástralos hacia arriba. Y como pueden ver, ahora el hogar está ahí, pero de todos modos no quiero que eso esté ahí, así que voy a volver a poner eso a vinculado. Y así esto es en realidad lo que quiero de mi sitio web. Quiero un diario. Quiero una página a, y quiero una página de contacto. Pero no quiero usar la palabra diario, así que voy a cambiar eso ahora a blog. Así que me cierro por aquí y hago clic en el icono de configuración. Cambiar el título de la página a blog. Título de navegación al blog. Eso es lo que aparece en la barra de navegación. Y la URL slug al blog más o menos. Y asegúrate de que la página esté habilitada. Este ya lo es, así que haz clic en Guardar. Como puedes ver, la demo ha desaparecido de ahí porque esta ya está habilitada. Solo habilitemos los otros dos. Y cuando entre en esta página, se hace automáticamente, así que solo ciérrala y verás que la demo ha desaparecido. Lo mismo aquí y lo mismo aquí en la página de inicio. Entonces todas las páginas están ahora en vivo y todas llamadas, como quiero que se llamen. Así que volvamos. 4. Elementos globales: Bien. Entonces ahora comencemos a editar el sitio web, y para ello, sube aquí al botón de edición. Bien. Lo primero con lo que quiero comenzar aquí es el back end del sitio web. Eso va a ser algo que aparece en cada lugar. Entonces estamos hablando de los colores que voy a usar y las fuentes que voy a usar. Una cosa que es muy importante con los sitios web es la consistencia. Así que quieres seguir usando los mismos colores y las mismas fuentes en todo el sitio web. Y el espacio cuadrado es genial porque te ayuda a configurar todo eso de una sola vez muy rápido. Entonces, para editar los colores de fuente y otras partes del sitio web, ven aquí a estos estilos de sitio de iconos. Como verás aquí, estas son todas las cosas que puedes editar, fuentes, colores, animación, espaciado, etcétera. Empecemos con los colores. Entonces esta es la paleta de colores que ya se ha asignado para este sitio web. Y los colores elegidos aquí, son apropiados a lo que se vende aquí, barras de jabón. Sin embargo, este sitio web que vamos a construir tiene que ver con los videojuegos retro. Necesitamos una paleta de colores diferente. Necesitamos algo que represente colores brillantes de los 80 y 90. Así que ven aquí a editar paleta. Y verás que hay muchos presets ya por espacio cuadrado Si te desplazas hacia abajo por el sitio web, verás cómo entran los diferentes colores. Entonces tenemos un amarillo primario y luego un rojo secundario. Y ya sabes, eso sí se ve bastante bien, en realidad, pero quiero algo ligeramente diferente. Entonces lo que voy a hacer es entrar y editar esto. Estos dos extremos de la paleta son perfectos, un blanco recto y otro negro recto. Estos son los tres que quiero cambiar. Yo sí quiero amarillear, pero quiero un amarillo más brillante. Entonces voy a hacer clic en el amarillo. Entonces puedes jugar por aquí con diferentes colores. Entonces, si quiero elegir un verde, lo voy a mover para allá. Pero lo que quiero es uno amarillo quiero uno realmente brillante. Entonces, algo así como a medio camino entre el naranja y el verde. Eso ya es bastante brillante, pero puedes jugar con los niveles del color aquí arriba, así puedes ir más oscuro o más claro. Quiero ir súper brillante, así que vamos a ir directo a esta esquina. Ahí vamos. Ese al final. Eso es perfecto. Me encanta ese amarillo. Eso es bonito y brillante. El segundo color que están usando es una especie de rojo anaranjado, pero quiero un rosa real Quiero un color magenta fuerte. Vamos a arrastrar este de aquí a ese tipo de sección rosa brillante, un poco más brillante, creo. Vamos a desplazarnos hacia abajo para ver dónde se está usando eso. Ah, ahí vamos. Me encanta eso. Me encanta el equilibrio ahí entre el amarillo y el rosa. Eso es muy agradable. Muy brillante. Y luego sólo un color más que quiero cambiar. Esto es como un rojo oscuro, una especie de granate Quiero que esto sea una especie de azul, pero un azul realmente brillante. Eso no se está usando todavía en la página, pero creo que eso se ve bastante brillante. A lo mejor. Sí, ahí vamos. Incluso es un poco más brillante. Veremos dónde se usa eso más adelante. Si queremos entrar y cambiarlo, podemos cambiar esto en cualquier momento. Esa es la belleza de la misma. Entonces ahora estamos engarzados con colores. Volvamos a entrar y mirar las fuentes. Cuando vengas aquí, verás los estilos de texto globales. Como puedes ver aquí, estos aparecen en todo el sitio. Entonces, cuando cambiemos de encabezamientos, eso cambiará cada encabezado en el sitio web Entonces estos realmente grandes aquí y los un poco más pequeños aquí. Si hago clic en él. Verás cuántas opciones diferentes tienes aquí. Entonces tienes cuatro tamaños de rumbo diferentes. Siendo éste el más grande sería uno encabezado. Y esto sería un encabezamiento dos. Y la fuente elegida aquí, una buena fuente Serif es apropiada para el sitio web de jabón Bueno, quiero algo un poco más fuerte, un poco más brillante. Soy un diseñador gráfico profesional, y la idea de escoger fuentes y saber cuáles usar. Bueno, tengo toda la experiencia de hacer eso en mi carrera. Si tu conocimiento en torno a las opciones de fuentes no es tan fuerte como este, bueno, te recomiendo encarecidamente venir a esta página. Esta es una página dirigida por Google Fonts que te hablará de la mejor manera de elegir el tipo. El enlace se encuentra a continuación en la sección A. Y en esta página, desplácese hacia abajo hasta que vea esta, una lista de verificación para elegir tipo. Este es un gran sitio web que te habla sobre las mejores formas elegir diferentes fuentes en función de tu marca, tu producto que estás tratando de promocionar. Así que entra aquí y dale una buena lectura a todo. Si tiene alguna pregunta sobre la tipografía y las opciones de fuente, solo envíeme un mensaje aquí y me pondré en contacto con usted lo antes posible Ahora, para este proyecto, solo quiero usar fuentes Sansa, y tengo dos opciones que me gustaría usar en toda la página web El primero es este llamado estilo Euros. Y el segundo es éste llamado interfaz. Dentro del espacio cuadrado, puedes simplemente pasar por todas las fuentes allí y probarlas todas una por una. Vea lo que funciona para usted. Lo que te voy a mostrar aquí es si ya tienes opción. Se puede ver si eso está disponible dentro del espacio cuadrado. Y el primero queremos cambiar donde ya estamos en la sección de encabezamiento. Entonces cambiemos la familia de fuentes que se elige aquí, y realmente quiero Eurostyle. Entonces voy a hacer click sobre esto. Y me mostrará qué fuentes se están utilizando actualmente. Pero no quiero ninguno de estos, así que voy a navegar por todas las fuentes. Puedo buscar fuentes. Ahora bien, no todas las fuentes están siempre ahí para que las uses. Es posible que encuentre el sitio web de otra persona que no esté disponible en un espacio cuadrado, y eso puede deberse a razones de licencia. Pero si encuentras otra fuente que se usa en una plantilla de espacio cuadrado diferente, definitivamente estará aquí. Escribamos en euro. Vamos a desplazarnos hacia abajo, tenemos estilo Euro extendido. Ese es el que quiero. Sólo voy a marcar que esto ya es mucho mejor. Se puede ver que un par de cosas acaban de cambiar aquí arriba. El nombre del sitio web y también este titular gigante de aquí, jabón para todos. Solo volvamos. Una cosa más. Quiero que sea un poco más fuerte que eso. Entonces, si haces clic en este peso, obviamente, cuanto mayor sea el número, mayor será el peso. Puedo ir 500, o puedo ir 900. 900. Echemos un vistazo. Eso es un poco dos cuatro. Vamos 500. En algún lugar en medio de los dos. Sí, eso es lindo. Después estilo, normal. Eso sería si hubiera, como, diferentes opciones cursivo o negrita, pero solo necesitamos la normal Y luego volveremos a estos un segundo, pero transformamos el texto. Lo que en realidad quiero es que todos sean mayúsculas. Ahí vamos. Eso se ve muy bien. Es un poco más fuerte, un poco más de pocilga. Jabón para todos. Sin embargo, como puedes ver, la fuente tal vez sea un poco demasiado grande. Solo dejemos caer el tamaño de la misma. Este es el encabezamiento uno. Vamos a elegir este de aquí y bajarlo un poco. A lo mejor digamos 6.5. Sí, creo que se ve bien. Entonces otra cosa. Creo que aquí hay demasiado espacio entre cada palabra. Esta es la altura de la línea. Juguemos con eso. Esto cambiará la altura de línea para todas las versiones de ésta, no sólo encabezando una, sino rumbo dos, rumbo tres, rumbo cuatro. Tal vez bajar a uno o tal vez incluso Sí, no 0.9. Creo que eso me gusta. Espaciado entre letras que en realidad se ve bien. Estoy bastante contento con eso, como que quieres una cantidad decente de espacio en él. Entonces, cuando la gente está mirando el sitio web en su escritorio, en la mesa, en su móvil, siempre va a ser legible. Pero vamos a jugar con eso. Bien. Lo dejaré a ese 0.04 Y si queremos cambiar esto en algún momento, si pensamos que está funcionando aquí pero no funciona en otra parte del sitio, solo regresa y cámbialo. Y nuevamente, lo cambias una vez, lo cambiará en todo el sitio web. Bien, entonces volvamos. Ahora bien, lo que quiero editar son los párrafos. Entonces esa es la copia del cuerpo principal que puedes ver. Entonces veamos dónde se usa eso. Este tipo de fuente por aquí. Vamos a hacer clic en los párrafos. En realidad es una fuente bastante bonita como ya ellos. Pero aquí es donde quiero usar mi otra interfaz de fuente elegida. Fuentes del navegador. Y esta se llamaba interfaz, ¿ no? Ahí vamos. Así que he escogido eso. Me gusta mucho el San Serra creo que eso es un poco más apropiado para un sitio web sobre videojuegos. Pero ustedes pueden elegir lo que quieran para esto, y me gustaría ver qué eligen. Así que vamos a retroceder un paso. De nuevo, tenemos diferentes tamaños para las fuentes de párrafo aquí. Párrafo uno, dos y tres. Son los tres tamaños diferentes, así que obtienes los más grandes y los más pequeños. De hecho creo que ese es un buen equilibrio en estos momentos en cuanto al peso. Creo que es un poco ligero porque lo estamos usando sobre un fondo muy brillante. Así que hagamos eso un poco más pesado, quizá 400 de nuevo. Sí, eso es mucho mejor. Estoy contento con todo lo que está aquí. No necesito hacerlo en mayúsculas. Eso funciona para los titulares pero no para el texto más pequeño. Entonces, mantengámoslo como está sin ninguno. Volvamos. Después botones. Echemos un vistazo donde tenemos botones. Aquí hay un botón aquí. Tenemos uno grande en la parte superior aquí. Entonces vamos a entrar en botones. ¿Y la familia para esto? Bueno, creo que tiene que haber Eurostyle otra vez. Esto es genial porque ahora me dice qué fuentes se están usando en todo el sitio web. Así que voy a tener que volver a encontrarlo. Cambiemos eso a Eurostyle extendido. Sí, eso me encanta. Eso se ve muy bien. Volvamos. Tenemos tres tipos diferentes de botones aquí, y todos son de diferentes tamaños, como puedes ver. Todos tienen el mismo peso, y creo que 500, creo que en realidad eso es bastante bueno para lo que tenemos aquí. Pero de nuevo, podemos volver y cambiar esto más tarde si quieres. Y solo asegúrate de configurar los tres en la misma fuente. Entonces el último es diverso. Veamos qué tenemos aquí. Entonces esto es como una fuente de acento extra que no se usaría en todo el sitio web, pero tal vez quieras usarla como una especie de elemento resaltado para que algo realmente destaque y algo se vea realmente genial. Entonces esta es una en la que puedes ser un poco más creativo. Así que vamos a subir aquí con la familia. Y vuelve a navegar por todas las fuentes. Ahora, quiero algo que realmente se vea un poco de ocho bits, como si viniera de los 80 o algo así. Si estamos haciendo máquinas arcade, veamos qué tenemos que sigue las reglas de arcade. Todos estos se ven realmente geniales y realmente un poco extravagantes. Algo así como esta donde es una especie de mitad blanca y mitad negra. Así que vamos a elegir esa. Ahora bien, eso en realidad no se está usando en ningún lado todavía. Pero te voy a mostrar en la cabecera de aquí arriba lo genial que puede parecer eso. Así que volvamos. peso y el tamaño están absolutamente bien por el momento de volver a sentarse estilos. Animaciones. Verás una buena lista de animaciones aquí. Y lo que esto es la forma en que diferentes partes de tu sitio web se cargarán cuando un usuario llegue por primera vez al sitio. Entonces por el momento lo tenemos configurado para desvanecerse, veamos cómo se ve la escala. Bien, eso es genial. Se puede ver el encabezado en la parte superior, el logo ahí. Ese tipo de escalas en. Diapositiva. Si es como que cae, clip. Eso es genial y flexible. Pero, ya sabes, creo que me gusta el clip. Sigamos con esa por ahora, y luego velocidad. Lento medio rápido. Creo que me quedaré con lento. Sí, eso me gusta. De nuevo, solo juega con lo que sientes que funciona aquí. Si te gusta el flex, es un poco loco, pero sí, eso es bastante genial. Elige el flex. Yo sólo voy con clip. Luego espaciado. Entonces esto tiene que ver con todo el ancho de toda la página. Y este es el ancho completo que puede ser un sitio web. Y luego margen del sitio. Esa es la brecha al costado del sitio web aquí. Y por el momento está en dos, si lo dejo caer a cero, verás que todo va directo al borde. Y sí se ve genial. Pero pequeñas cosas como esta, están demasiado cerca del borde. Todos necesitan tener un poco de espacio para respirar. Entonces, ¿sabes qué? Creo que sólo me quedaré con esos dos. Veamos cómo son los tres . Bien, tal vez tres Creo que eso solo da un poco más de espacio para respirar aquí. Y luego botones. Ya le echamos un vistazo a esto. Y como puedes ver aquí, esta es solo una forma diferente de atravesar las tres diferentes, pero ya está eligiendo nuestra fuente, y la forma que queremos es píldora. Puedes elegir algo diferente. Puedes tener uno cuadrado. Verás que cambia a cuadrado o este tipo de elección muy redonda. Este con los bordes curvos. A mí me gusta el p. uno. Pero solo juega un poco por aquí tú mismo y mira qué funciona mejor para ti. Esquema. Bueno, eso solo sería una frontera más grande alrededor del exterior. En realidad, sí. Creo que se ve genial tener eso un poco más fuerte, tal vez cuatro. Bien. Volver a estilos del sitio. Bloques de imagen. Mira, esto es algo de lo que realmente no tienes que preocuparte aquí. Siéntase libre de jugar con él, pero esto es solo formas diferentes de dejar caer imágenes en su sitio web. Puedes tenerlo póster, la forma que tienes texto encima de una imagen. Pero no vamos a verlas ahora mismo. Sin embargo, siéntase libre de echar un vistazo a su alrededor. Bien. 5. Encabezado de tu sitio web: A continuación, voy a jugar por ahí con esta sección de cabecera. Y lo primero que quiero cambiar ahí es la fuente. Así que volvamos a hacer clic en las fuentes. Esta es otra forma de acceder a diferentes elementos. No tienes que pasar por el menú aquí. Haga clic en la parte que desea editar. Se puede editar eso. Así que empecemos con éste. El logotipo, el encabezado principal de la página web. Como se puede ver por aquí, eso se llama el título del sitio. Eso está tomando la fuente de encabezado. Si vienes por aquí, puedes cambiarlo a una fuente personalizada. Cuando cambias esto, literalmente solo está cambiando esa de aquí arriba, no a la fuente general del encabezado. Así que vamos a ir a la familia. Y ya sabes qué, Aquí es donde quiero usar el arcade Puffin. Veamos cómo se ve eso. Oh sí, me encanta eso. Eso se ve realmente genial. Como logotipo era un encabezado principal para todo el sitio web. Es un poco más pequeño. Regresemos y juguemos con el tamaño. Lo quiero bastante grande. Entonces, sólo una cosita. Las letras están un poco demasiado cerca unas de otras, así que vamos a arrastrar eso un poco. Sí, eso se ve bien. Vale, eso es realmente genial. Eso realmente viene a lo largo. Ahora vamos a hacer click sobre éste aquí. Esta es nuestra barra de navegación. Como se puede ver, en realidad sigue usando la antigua fuente que estaba ahí. Vamos aquí, edita eso. Creo que el estilo euro extendido va a lucir genial aquí. Sí, eso se ve realmente genial. Pero ya sabes qué, quiero eso realmente audaz. ¿ Cuál fue el más grande que teníamos aquí? 900. Sí, me encanta eso. Agradable y brillante y gritar T. Entonces título del sitio móvil. Bueno, recuerda si quieres ver cómo se ve algo en escritorio y móvil, van a ser ligeramente diferentes porque uno es retratado, uno es paisaje. Normalmente editando tu sitio web en la versión de escritorio. Pero si alguna vez quieres ver cómo es en la versión móvil, haz click en ésta, y cambiará a eso. Por lo que ahora podemos ver cómo funcionan todos los colores, todas las fuentes están funcionando, los botones y esas cosas. Este de aquí arriba, mientras que eso sigue siendo algo así en la versión antigua, ¿no? Entonces si hago clic en el título de ese sitio móvil, sigue siendo como un encabezado. Así que vamos a entrar aquí. Y volvamos a disfrazarnos y simplemente hacer lo que acabamos de hacer por la versión de escritorio. Así que vamos a cambiarlo a la arcade de Puffin. Vuelve atrás. Y entonces, ¿qué dije? Yo puse este a 0, ¿no escribí en 0 ahí? Eso es perfecto. Altura de línea. Bueno, digamos simplemente porque ahora hay sentados uno encima del otro, porque obviamente el móvil es mucho más pequeño. Hagamos eso en forma. Ahí vamos. Entonces el tamaño de la misma. Digamos que lo quiero bastante viejo. Tal vez 3.5. Y eso es genial. Vale, volvamos. Ahora que lo hemos hecho aquí, vamos a hacer clic en Cerrar y luego echemos otra mirada al encabezado. Entonces saldré de la versión móvil. Echemos un vistazo a la vista de escritorio. Entonces vamos a hacer click en esta sección. Como puedes ver aquí, nos permitirá editar el encabezado del sitio. Puedo ver en la parte superior aquí tienes tres opciones diferentes. El primero es global, por lo que sucede a través de todos los dispositivos. Considerando que si haces clic en éste, esto es lo que sucederá en la versión de escritorio, y esto es lo que sucederá en la versión móvil. Vamos con global fijo. Por lo que en primer lugar, título del sitio y logotipo. Bueno, ya tenemos un logo que nos hemos creado usando fuentes. Esa es una forma muy fácil de hacerlo. Pero si ya tienes tu propio logotipo visual has creado como imagen en eso de aquí. Elementos. Entonces esto es todo lo que podemos ver en la parte superior aquí. En primer lugar, botón, sí quiero un botón aquí porque quería pasar a la página de contactoen pasar a la página de contacto lugar de decir empezar, voy a decir ponerse en contacto en cuanto a dónde quiero eso para ir. Bueno, eso podría ir a cualquier otro sitio web, pero quiero que vaya a una de las páginas con dentro de nuestra página web. Así que vamos a hacer clic en el dentón. Entonces puedes hacer que vaya a una dirección de correo electrónico, una dirección web a otro archivo. Queremos que vaya a otra página nuestra página web. Así que haga clic en página. Quiero que esto vaya a la página de contacto. Literalmente cuando hago clic en este pequeño desplegable de todas las páginas que tengo dos, solo escojamos contacto. Abriendo una nueva ventana. Haz eso si se trata de un sitio web diferente, pero si está dentro de tu propio sitio web, deja eso fuera. Haga clic en Guardar. A continuación, los vínculos sociales. Sí, quiero que sus usuarios hagan click en este botón. Los llevará a través de nuestra página de Instagram. Si entramos aquí, edita enlaces sociales. Puedes añadir otros extra aquí. Puedes añadir en Facebook o Twitter o lo que quieras. Solo quiero Instagram en el momento en que pasa al Squarespace uno. Vamos a enviarlo a la página GameOver. Ahorra eso. Entonces vamos un poco pequeño competidor si entonces otra cosa dice hacer esto un poco más grande, ¿de acuerdo? Sí, pelean. Eso se ve bien. Interruptor de idioma. No te preocupes por esa parte. Eso es lo que puedes ver por aquí, y eso es lo que tienes si tienes un sitio web de ventas, pero no teníamos uno de esos, así que lo apagaremos. Ahí vamos. Eso se ve perfecto. Ahora. Volvamos. Ahora estilo, esta es Morgan, diviértete un poco. Entonces lo que tenemos aquí son diferentes opciones de estilo. Tenemos tema degradado sólido, dinámico, tema de gradiente sólido, dinámico. Bueno, yo tengo todos esos, todos funcionan. Pero lo que vi cuando hice clic en tema fue todo esto aquí. Estos son todos los colores que ya hemos elegido para todo el sitio web. Un juego alrededor con diferentes niveles de ellos para elegir el que creo que va a quedar genial. Tengo todos estos. Bueno, me gustó la forma en que un poco obtuvimos colores brillantes comenzando en la primera parte de la sección de héroes. Por lo que en realidad quiero uno de los ligeros. Y éste, es negro, es un poco avión. Así que vamos con el rosa. Sí, eso me gusta mucho. Me gusta el logotipo de nuestro sitio web principal estar en el rosa brillante y luego ponerse en el botón táctil. Así que eso es realmente genial. Así que voy a seguir con eso. Entonces el siguiente aquí, posición fija. Eso simplemente significa que el encabezado se mantiene en una posición determinada a medida que las personas se desplazan por su página de inicio y otras páginas del sitio web? Bueno, no quedarse encendido porque ayuda a la gente a navegar por todo el sitio web. Aquí tienes dos opciones diferentes. Uno es el básico donde permanecerá allí constantemente. Quieres desplazarte hacia atrás. Entonces cuando te desplazas hacia abajo, desaparece. Cuando te desplazas de nuevo hacia arriba, vuelve a entrar. Es Anita, forma genial de permitir una navegación extra a los usuarios. Entonces escojamos scroll allá atrás, ¿de acuerdo? De acuerdo, así que eso es todo configurar la configuración global. Veamos qué tenemos para el diseño del encabezado de la versión de escritorio. Por lo que tengo esta opción aquí y va a mover cada uno de estos elementos alrededor. Tendrías un poco de juego con él y verás cuál funciona mejor para ti. toda justicia, creo que me gustó la forma en que era originalmente con el ícono aquí, ese botón ahí. Y luego estas dos partes centralizadas. Creo que eso es sólo un buen equilibrio de todo y tiene mucho espacio en blanco para respirar a cada lado. Voy a seguir con eso. Entonces no te preocupes por el ancho. Vamos a mantener eso como lleno. Acollado vertical. Bueno, esta es la cantidad de habitación que está tomando en la parte superior y abajo, es un poco grande. Hagamos eso un poco más pequeño. Tal vez dos elementos espaciamiento, bueno, eso es un poco el espaciamiento entre estas dos cosas aquí. Dejemos caer eso lo más bajo que podamos. Sí, eso es bastante bueno. De hecho, creo que sólo necesito un poco más de espacio en la parte superior. Vayamos a 2.2. Espaciado vinculado. Bueno ese es el espacio entre blog sobre contacto, todas las partes en nuestra barra de navegación. O. Consigue eso hasta tres, creo. Sí, eso es genial. Y luego versión móvil móvil. Entonces, ¿cómo se ve esto? ¿ Cómo te funciona eso? Aquí tenemos bastantes opciones diferentes. En primer lugar, el diseño de cabecera. Así que de nuevo, podemos tener logo a la izquierda, menú de hamburguesas a la derecha, o elegir diferentes opciones para esto. Me gusta este porque el logo está centralizado y luego el menú de hamburguesas está a la izquierda. No obstante, creo que el texto es un poco demasiado grande ahí. Quería ejecutar en una sola línea igual que lo hace en el escritorio. Entonces lo guardaré tal y como está. Y luego regresaremos y volveremos a editar la fuente. Diferentes opciones para tu menú de hamburguesas. Algo así como el más uno, para ser honesto. Creo que eso representa a las máquinas arcade de la vieja escuela. Podemos cambiar el grosor de esta línea. Pequeño, mediano, grande, creo que huele bien, agradable y sutil. Entonces la siguiente opción aquí es el menú de superposición, y así es como se ve eso. Esto es cuando alguien hace clic en el Plus, esto aparecerá. Si vuelvo, nos lleva de vuelta al otro. La superposición va así. Eso es realmente genial la forma en que cambia al amarillo con el negro encima de él. Eso me gusta. Aquí tienes la barra principal de navegación, botón de icono de Instagram, pero me gustaría que fuera centralizado, para ser honesto. Sí, ahí estamos. Eso es mucho más ordenado. Colores. Nuevamente, juega con todo lo que hemos conseguido aquí. Mira cuál funciona mejor para ti si te gustaría que el rosa brillante vaya con eso. Pero me gustó el amarillo. Mantengámoslo con eso. Así que ahora hemos terminado con eso. Vamos a hacer clic en Guardar. Y luego editar de nuevo. Volvamos a cambiarlo a móvil. Y luego haga clic de nuevo en los estilos del sitio. Hay dos fuentes. Haga clic en el título del sitio móvil, y hagamos esto un poco más pequeño. Por lo que se sienta en una sola línea. Creo que 2.5, y eso es lindo. Está ahí, es brillante, pero sigue siendo pequeño y sutil. Entonces eso está todo hecho. Vamos a salvar eso. Veamos cómo funciona todo esto. Sí, me encanta eso. Eso me encanta. Pasa el cursor sobre ese botón y se va de color rosa. Y en escritorio. También muy cool. Por lo que ahora podemos pasar a diseñar toda la página de inicio. 6. Diseño web: página de inicio: Por lo que ahora vamos a empezar a editar todas nuestras páginas. El apartado de páginas por aquí, tenemos cuatro páginas. El mejor para empezar es la página de inicio que ya estaba encendida. Entonces lo que quiero en esta página de inicio es algo que es bastante recto y bastante simple y le dice a la gente quiénes somos, de qué estamos, qué podemos ofrecerles. Lo que quiero es una sección para el blog, una sección para la sección sobre para el contacto. A lo mejor un par de pequeñas imágenes extra ahí solo para mostrar lo cool y peculiar que son. Entonces vamos a empezar aquí con esta sección. Y esto se llama el héroe es siempre la primera parte que cada usuario ve cuando llega por primera vez a tu sitio web, sea eso en escritorio o móvil. Entonces vamos a editar esta página. Y se puede ver en qué elementos ya se han agregado por Squarespace. En la plantilla, tenemos toda una sección, todo hasta esta línea azul. Esto es en conjunto en una sección. Eso significa que podemos cambiar el fondo de esa sección y cambiará todo hasta la línea azul. Así que empecemos con eso. Al pasar el cursor por aquí. Me permite editar la sección. Podemos jugar con diferentes tamaños aquí, la altura de sección es mínima, es diez, pero podemos hacerlo más grande cuando eres pequeño, mediano, grande. Esa es la cantidad de espacio entre lo que puedes ver aquí en la parte superior. Este es el héroe. Quiero que eso se quede bastante bajo. Así que uno, vamos a quedarnos a las diez. Hecho, como se puede ver, hay un espaciador extra por aquí arriba. Quiero sacar eso. Entonces, si quieres sacarlo, cursor sobre la imagen y verás que el rojo ha sido eliminado. De acuerdo, prefiero que ahora, ahora tenemos el mismo tipo de espacio a la derecha y por encima de la imagen. No obstante, creo que quiero cambiar el color de fondo. Por lo que hacemos clic aquí y vamos a fondo. Ahora, aquí puedes hacer bastantes cosas diferentes. Puedes poner una imagen de fondo, podrías poner un video de fondo o arte de fondo. Te mostraré esos muy pronto. Pero lo que realmente queremos hacer es cambiarlo a un color. Así que vamos a hacer clic en Colores. Y es aquí donde podemos jugar con los diferentes colores ya en nuestra paleta de colores. ¿ Y sabes lo que quiero para éste? Quiero el rosa brillante. Creo que eso es un bonito equilibrado desde el logo y el botón en esta primera sección, vamos con el rosa. Cuando haya terminado con eso, simplemente haga clic en algún otro lugar lejos de esta pequeña ventana. Lo que quiero hacer aquí es cambiar esta pequeña sección o esta es una sección de imágenes que ya está configurada textos en el subtítulo izquierdo y botón a continuación. Si quieres cambiar el estilo de eso. Haga clic en esta sección donde dice imagen y haga clic en el lápiz. Lo que puedes hacer aquí es jugar con el diseño. Entonces por el momento tenemos una opción de tarjeta. Se puede ir cartel, como dije, es entonces cuando el texto está encima de la imagen. Superposición. Y una columna que se llama poco desordenada. Cosas como stack, donde está encima de los textos que es un poco demasiado alto. Me gusta un poco lo que teníamos antes para ser honesto, que tiene tarjeta. Puedo jugar por ahí. Podría poner la imagen a la izquierda o la imagen a la derecha. Creo que estoy como a la derecha. Así que vamos a seguir con lo que tenemos ahí. Quiero que juegues con eso y hagas algo un poco diferente a lo que he hecho aquí. Dale tu propio estilo por favor. Entonces volvemos al contenido. Lo que tenemos aquí son los otros elementos que están apareciendo aquí. Lo principal que tenemos es un botón. Y vamos a decir que eso va a enlazar a otra página. Quiero que vaya a la página sobre. Así que llamémoslo About Us. Por el momento dice que se va a ir de compras. Esa página ya no existe. Así que vamos a hacer clic en el piñón. Volvamos a la página, eliminemos esa, y luego escojamos sobre Guardar. Entonces el título aquí arriba. Bueno, jabón para todo el mundo que funciona para el sitio web del jabón. Así que voy a cambiar esto a juegos retro. Y entonces el periodo que estoy cubriendo es de 85 a 95. Sí, eso fue genial. Eso funciona muy bien con el texto blanco encima del fondo rosa. Lo único es, creo que para éste, es un poco ligero. Sólo hagámoslo audaz. Y va a resaltar todos los textos ahí y presionar el balón estado sí, vamos. Sí, eso fue perfecto. Eso me encanta. Subtítulo. Bueno, quiero decir algo aquí también que sigue desde el titular. Quiero decir lo que hacemos en este sitio web. Así blogs semanales sobre todos los mejores videojuegos de 1985 a 1995. Ahí vamos. Entonces una cosa más que necesita cambiar, obviamente la imagen porque eso se trata del jabón. Entonces qué En la sección de contenido, haga clic en Reemplazar y elija Subir archivo. Puedes navegar por imágenes de stock si lo deseas. Pero ya tengo mi imagen está configurada para ésta, así que voy a hacer clic en el archivo Subir. Así que aquí está todo mi juego sobre selecciones. Ya los he editado en Photoshop. Quieres saber un poco más sobre edición de imágenes para su uso en Internet. O baje a la sección sobre. Echa un vistazo a mi cara. Haga clic en eso. Eso traerá toda mi página de Skillshare. Si te desplazas hacia abajo hasta el fondo, verás todas las otras lecciones que tengo ahí dentro. Y tienen uno para la carga de imágenes. Cómo optimizar tus fotos para que tu sitio web funcione agradable y rápido. Asegúrate de ver ese para tener una mejor idea de cómo los tamaños de imagen necesitan funcionar en Internet. Ya he cambiado el tamaño de todos estos. Voy a escoger éste, Space Invaders en arcade retro. Y sí, ahí vamos. Eso me encanta. Como se puede ver, la sección héroe ocupa una página completa. Para que el usuario pueda ver de una sola vez quiénes somos, de qué estamos, y quieren saber más de nosotros. Darán clic en este botón. Se puede ver cómo se ve eso en el móvil. Móbiles realmente bueno se mueve la parte superior con el texto a continuación. Si tuvieras que abrir y tu teléfono móvil, esa es una buena introducción a quiénes somos y qué hacemos. Trabaja en tu propia sección de héroes y o bien sigue exactamente lo que he hecho aquí. daremos su propio estilo personal y lo haremos aún más claro aquí que este. Vale, ahora quiero desplazarme hacia abajo y trabajar en la siguiente sección. Aquí es donde voy a destacar todas nuestras últimas publicaciones de blog. Ahora el fondo aquí es amarillo. Creo que me gusta que sea amarillo. Me gusta la forma en que tipo de pergaminos desde el blanco en la parte superior hasta el rosa al amarillo. Este título habla de jabones favoritos. Lo que no queremos que queramos hablar de videojuegos. Así que sólo voy a pegar este encabezado en. Puedes elegir si quieres que quede alineado, centralizado, alineado a la derecha, creo que aquí centralizado porque se va a sentar encima de los últimos posts. No creas que necesitamos ese espacio de ellos. Puedo borrar eso. Si en realidad quieres simplemente jugar con la altura del espaciador, solo puedes jugar con eso aquí. Hazlo más pequeño, hazlo más grande. Pero no creo que lo necesitemos. Por lo que elimine eso. Creo que esto sí se ve genial en la fuente negra. Pero voy a ver si sólo puedo jugar con el color de todo el asunto aquí. Entonces lo que está encendido en este momento es ligero uno. Creo que quiero luz para sí. Donde me va a dar la cabecera rosa en la parte superior del amarillo. Creo que eso se ve muy bien. En términos de formato. Bueno, creo que solo necesitábamos un poco más de espacio para respirar por encima de esto aquí. Creo que sólo va a entrar en ese titular demasiado rápido. Así que vamos a hacerlo, personalizarlo y hacerlo un poco más alto. Tal vez digamos 40. Sí, y eso es un poco más de espacio para respirar ahí. Ahora, lo que tenemos aquí, bueno, estas son sólo imágenes con texto. Vamos a dejar caer nuestros blogs ahí dentro. Y luego este botón en eso para llegar a través de todos los blogs. Así que vamos a editar el texto aquí o los blogs. Entonces hacer, voy a través de la página del blog. Guardar. De acuerdo, entonces lo que tenemos aquí arriba, quiero eliminar estos y quiero añadir en una sección completamente nueva. Así que eliminemos, eliminemos. Eliminar. puede ver con cada uno que tipo de va ancho completo, que será demasiado grande de todos modos. Pero lo que quiero hacer es sumar en un resumen de todos nuestros últimos bloques en Squarespace, muy fácil de usar. Si quieres agregar algo nuevo, solo tienes que hacer clic en el Plus donde quieras que esté. Para que podamos ir por encima de algo por debajo de algo. Por lo que quiero que esté aquí debajo del título. Por lo que voy a hacer clic en el plus. Y estos te mostrarán todas las diferentes opciones que puedes caer aquí tienen esta cosa de bloque de desplazamiento muy cool. Simplemente puedes poner texto, imagen, botón, video, mirar a través de todos estos, tener un juego alrededor con ellos. Mira lo que puedes hacer por tu propia página web que realmente va a funcionar para ti. Pero lo que quiero caer aquí es un resumen, eso es un resumen de todos los últimos blogs. Esto caerá, y eso aún no se ve genial. Pero si vamos a seleccionar una página, voy a elegir la página del blog. Ahí vamos. Eso ha cambiado ahora a los tres blogs que ya están ingresados por Squarespace. Obviamente de nuevo, se trata jabón y desinfectante de manos DIY, no de lo que queremos escribir, pero puedes jugar con la exhibición de todo aquí. Así que volvamos. Por lo que ahora estamos diciendo acerca de la fecha de metadatos primarios publicada. No quiero que eso parezca que solo puedas apagar eso para que no tengas nada ahí. Bueno, puedes elegir otra cosa. Voy a elegir categoría, que por el momento no te muestra nada, pero te mostraré cómo va a funcionar eso más adelante. Metadatos secundarios. Bueno, se puede decir quién es el autor, quién escribió el post. Si quieres ubicar cuántos comentarios se tiene, lo que sea relevante para ti. Pero creo que sólo quiero una cosa aquí. Quiero la categoría. Juega con él tú mismo y ve qué funciona. Ahora diseño. Nuevamente, tenemos algunas opciones diferentes. Carrusel. Eso es un poco lindo. Lista. Eso es un poco desordenado. Y grid. Eso es bastante genial. Pero creo que me gusta el carrusel. Me gusta aquí es la forma en que puedes tener más de tres artículos y gente puede desplazarse por. Así que vamos a cambiar esto a más artículos y se puede ver en la pantalla. Así que vamos a cambiarlo a bien, todos nuestros posts. Entonces lo cambiaremos a 30. Como se puede ver aquí, ahora tenemos esta pequeña flecha. Para que puedas ir y venir entre lo último, post, relación de aspecto post más antigua. Vamos por una imagen cuadrada. Eso se ve genial. Se ve un poco más de textos, pequeños, medianos, grandes, quizá grandes. Entonces alineación. Creo que me gusta centralizar ahí. No me molesta es esta cosita en la parte superior que dice texto de encabezado destacado. Vamos a ver sólo si elimino eso. Sí, eso se ha ido. Lo único que necesita estar ahí. Entonces los elementos, eso es lo que vamos a ver. Por lo que vemos un título, imagen destacada, ejercer, leer más enlace. Eso es bastante guay. La gente sabe hacer click en eso. Pasará hasta el puesto. Aquí es donde hemos elegido categoría. Puedes tener eso debajo del contenido. Voy a elegir el título anterior. Lo que sucederá aquí las diferentes categorías que estamos usando para nuestros blogs. Entonces van a ser categorías como 1980, 1990, tal vez Nintendo, Sega, arcade, ese tipo de cosas. Entonces la gente sabe a primera vista exactamente qué tipo de post es este, de qué tipo de juego está hablando de qué tipo de errores. Pero tenemos que sumar esos en. Entonces lo haremos un poco más tarde cuando trabajemos en la página del blog. De acuerdo, Así que esto en realidad se ve realmente genial. Ahora, lo único que me molesta otra vez, este pequeño espacio aquí, no creo que necesitemos eso sacado. Sí, creo que simplemente me gusta la forma en que va directamente a todos los blogs desde abajo, cualquier manera esto está todo centralizado también. Lo único es que no puedo ver todo todo de una sola vez. Entonces es un poco demasiado grande. Puedo hacer que las imágenes sean más pequeñas aquí, pero creo que lo que quiero hacer es cambiar el ancho de la página. Así que de nuevo, vamos a editar sección. Por lo que no estoy editando ni un solo elemento aquí. Estoy editando toda la página. Si quieres hacer eso, simplemente haz clic lejos de cualquier elemento. Por lo que este espacio vacío en el clic derecho sobre esa Sección. Ancho del contenido en este momento eso es en grande, por lo que está llenando toda la página. Cambiémoslo a medios. Sí, eso se ve muy bien. Eso me gusta. Puedo jugar con alineamiento de contenido a la izquierda, ponerlo a la derecha, pero obviamente centralizado va a ser mucho mejor. Entonces es casi todo apropiado. Creo que sólo algunas de las fuentes son un poco demasiado grandes aquí. Así que subamos a la cabecera otra vez. Está en rumbo a por el momento, si cambiamos eso a un rubro tres, sí, eso es mucho mejor. Es sólo un poco más sutil ahora. Entonces tal vez los tamaños de fuente en el resumen. Vamos a editar eso. ¿Qué elegimos para esa? A lo mejor elegí demasiado grande. Teníamos medios grandes que de manera. Ahí vamos. Ahora lo que puedes ver es la pantalla perfecta en una página web. Lo que quieres para cada sección es poder ver todo a la vez. Así es como la gente lee de qué se trata todo. Entonces veamos el título. Pueden ver los últimos posts aquí. Puedes desplazarte por esto y cambiar qué blogs están apareciendo aquí. O pueden hacer clic en este botón y pasar a toda la página de registros. Tal vez una cosa más. Esto es como un poco demasiado grande en comparación con todo lo demás. Ahora, lo que quiero hacer es cambiar a un tamaño más pequeño. Entonces por el momento está en la primaria. Vea qué secundaria es aún más grande. Sí, ahí vamos. Mucho más sutil ahora, creo que funciona bien tener el grande aquí arriba. Titular más pequeño, texto más pequeño aquí, y luego todos los blogs, me encanta, Eso es perfecto. Ahora, una cosa que siempre es seguro tener en cuenta debería haber hecho esto después de la primera sección también. Siempre haga clic aquí y haga clic en Guardar. Eso solo significa que todo en lo que estamos trabajando ahora está salvado. Para que si nuestra computadora se bloquea o algo así, no perdamos todo lo que hemos estado trabajando. Así que asegúrate de hacer clic siempre en eso a medida que estás pasando. La otra opción que tienes aquí, digamos que he escrito algo aquí. Mejor sitio web del mundo. Bueno, no quiero decir eso. Ha sido un poco arrogante. Entonces lo que puedo hacer aquí es que puedo hacer un deshacer y rehacer la prensa de pies deshacer. Saca los textos que acabo poner y luego se ha ido. Pero si he sacado algo y en realidad podría querer traer eso de vuelta, solo presiona ésta unas cuantas veces y volverá a hacer todo lo que acabamos de hacer. A pesar de que probablemente sea el mejor sitio web del mundo, voy a sacarlo. Ahí vamos. 7. Diseño web: página de inicio B: Ahora puedes echar un vistazo a lo que ya está aquí y puedes jugar por ahí con las secciones que se han configurado para ti. Y puedes entrar y puedes editarlo todo. Entonces tenemos algo de texto aquí, algunos más texto que en éste, solo algunas imágenes y todo es grid. Pero si realmente no va a funcionar para usted, mientras que entonces simplemente se asegura de que está haciendo clic en la sección y eliminar toda la sección. Eso significa que ya no estará ahí. Puede cometer un error. Siéntete libre deshacer o rehacer si no lo quieres. Para que puedas jugar con las partes preestablecidas de la plantilla, o puedes agregar otra pequeña sección tú mismo, y te mostraré algo muy cool aquí. Entonces aquí estamos flotando entre esta sección amarilla y esta sección rosa. Voy a hacer clic en Agregar sección. Esto te mostrará todas las opciones prefabricadas que tienes a lo largo de Squarespace. Y aquí hay algunas cosas muy chulas. Esto nos está mostrando titulares. Tan diferentes formas de tener una imagen con texto encima de ella. Éste con un pequeño borde negro en él, con un borde blanco. Puedes jugar con esto y esto es solo tomar todas nuestras fuentes preestablecidas que hemos decidido por todos nuestros colores. Para que puedas ver cómo te buscaría. Tenemos algunas otras cosas aquí, cómo hacer listas, imágenes, cotizaciones, etcétera. Eso se ve muy bien. Pero sí, solo tienes que jugar un poco con esto tú mismo y mira si puedes agregar un par extra de elementos que no estoy usando aquí y hacer que se vea super cool. Lo que realmente quiero añadir aquí es una sección titular. Acabo de ver que me gusta este con la frontera negra. Entonces lo que quiero es tener una imagen de fondo con algún pequeño texto fresco encima de ella. No hace falta tener un llamado a la acción. No necesita tener un botón en él. Sólo otra cosa que acaba de quiénes somos y de qué estamos. Así que dejemos caer ese en. Y luego me gusta lo que tenemos aquí en términos del titular y el pequeño trozo de texto debajo de él. No quiero que este botón esté ahí. Entonces se va a eliminar esa. Sí, eso se ve genial. Obviamente la imagen que no son apropiadas para lo que estamos haciendo aquí. Entonces subamos aquí y editemos esta sección. Nuevamente, fondo. Esto está preestablecido de la plantilla de Squarespace. Entonces vamos a reemplazar eso. Sube otro archivo. Lo que quería aquí es una imagen que luce otro lado diferente de las máquinas arcade, máquinas de pinball. Así que tengo una imagen de máquina de pinball retro realmente cool aquí. Vamos a dejar caer eso adentro. Sí, eso se ve genial. Me gusta la forma en que los textos se sientan encima de eso. El problema con esto es la imagen que tengo. Tiene bastante tipo de contraste claro y oscuro en ella. Así que el texto blanco y luego encima de él realmente no funciona. Pero eso es genial porque cuando estamos en esta sección de fondo, podemos agregar una opacidad de superposición. Por lo que aquí se puede ver que está establecido en 15%. Si juego con él, está tomando el negro que está en el fondo aquí ya, y está tendido sobre la imagen. Entonces lo que haces es que sigues viendo la imagen, pero puedes leer el texto que está encima de ella. Entonces lo que quiero es algo en algún lugar entre tal vez el 50 por ciento. Eso creo que 40. Han tenido 35 años. Sí, creo que puedes ir 40. Creo que todavía se puede leer el texto encima de eso y aún ver cuáles son las imágenes a continuación. Así que vamos a hacer clic fuera de aquí. Ahora quiero ingresar algunos textos que se trata de tocar máquinas de pinball. Bueno, acabo de pensar en algo muy cool y Quirky, que viene de una canción, creo que por la OMS. Te mostraré lo que es este. Lo pegaré aquí en el encabezamiento uno. Seguro. Juega un pinball medio. Eso sí se ve realmente genial. Aunque es un poco demasiado grande. Así que tal vez lo cambiemos a la partida dos. Sí, eso se ve mucho mejor. Estoy mirando este texto ahora sin embargo, sí creo que el espaciado de líneas es un poco demasiado bajo. Entonces, lo que voy a hacer, sólo guarda esta página. Vuelve a Editar. Entonces voy a subir aquí a estilos de sitio de nuevo. Fuentes, encabezamientos. Creo que es sólo esta altura de línea. Pongámoslo a uno tal vez. Sí. Ok. Eso es un poco más ordenado. Da al texto un poco más de espacio para respirar para que no estén sentados uno encima del otro. Ok. Así que volvamos. Cierra esa. Entonces, debajo del título aquí, pongamos otra línea de esta canción. No he visto nada como él en ninguna diversión que lo vaya menos atrevido. Pasemos a sacar la pelota. Sí, me encanta eso. Eso se ve realmente genial. Entonces aquí tenemos otra sección entera que es realmente fácil y rápida de hacer porque estamos usando la plantilla donde tenemos una imagen de fondo, el borde negro con algún pequeño texto peculiar fresco encima de él. Vale, así que guarde eso. Vuelve a editar. De acuerdo, entonces tenemos la sección de héroes pasando a la página Acerca de nosotros. Mejores juegos. Blogs. Entonces hay una pequeña imagen fresca, peculiar. Y luego una sección más que necesito llenar en la parte inferior. Solo quiero que sea sobre la página de contacto para que la gente sepa que queremos estar en contacto con ellos. Esto aquí, mira, se ve bastante genial. Podría ser utilizado para eso. Pero de nuevo, creo que voy a ir a añadir una sección. Creo que vi algo aquí dentro que creo que funcionaría en cuanto a los colores, todo lo que estamos usando. Y ese es éste. De la forma en que nos pusimos como una imagen de la izquierda con un cuadro de texto al lado. Así que voy a dejar caer ese en. Está bien, esto se ve genial, pero vamos a jugar con los colores aquí de nuevo. Colores. El rosa vuelve a entrar. Oh, eso es genial. Y eso ha cambiado el color del texto aquí también. Me gusta eso con un fondo blanco con el texto rosa encima de él. Eso es genial. De acuerdo, y luego imagen. Vamos a editar eso. Así que de nuevo, voy a sustituir eso por una de mis propias imágenes. Veamos qué tenemos. Mario Luigi saltando. Sí, eso se ve genial. Me gusta la forma en que tenemos algo como una imagen más grande aquí ahora. Y ahora está centralizado con el cuadro de texto a la derecha. Así que vamos a cambiar el texto aquí dentro. Esta ventana. En lugar de hacerlo destacar. Quiero decir Mario, Luigi, al rumbo tres, creo que es un buen tamaño que nos da un poco más de espacio para respirar en la parte superior. Entonces va a copiar en algunos textos que sean más relevantes a lo que estamos hablando aquí. Queremos saber de ti, queremos saber cuáles son tus juegos de arcade favoritos de los años ochenta y noventa. ¿ Tienes la mejor puntuación en Donkey Kong? Veamos si podemos ser tú. Entonces este botón de aquí abajo. Ponte en contacto de nuevo. Y quiero que eso pase a la página de contacto. Entonces por aquí, ponte en contacto. Es a través del contacto. Guardar configuración sésil. Ok. Ahora eso es genial. Me encanta esa sección. Ahora. Voy a deshacerse de esta sección a continuación. Creo que necesitamos eso. ¿ Dónde estuvo esta sección a continuación? Eso nos lleva al pie y vamos a trabajar en ese siguiente. Vamos a guardarlo de nuevo. Piensa que el espaciado está un poco fuera de aquí. Creo que tenemos un poco demasiado espacio en la parte inferior, no hay suficiente espacio a la izquierda ni a la derecha. Así que vamos a editar eso rápidamente. Así ve Editar sección. Entonces el ancho del contenido debe ser un poco demasiado pequeño. Eso son un poco dos bolsas. Hagamos otra costumbre. En algún lugar entre los dos. Veamos, tal vez 90%. Creo que eso funciona, sólo le da un poco más de espacio para respirar. Entonces cuando estás mirando toda la página, vemos a Mario saltando y luego vemos todo el texto juntos de una sola vez. Vale, salva eso. Una última sección para echar un vistazo a la página de inicio es el pie de página. Ahora obviamente el pie de página, similar al encabezado, aparecerá en la parte inferior de cada página. Vamos a editar ese. Ya sabes qué, ya me gustó el amarillo pasando ahí dentro. Pero aquí solo hay algunos elementos que no quiero, necesito editar newsletter. No tenemos uno de esos. Deshazte de eso. Esta imagen es más jabón, deshazte de eso. Entonces este texto por aquí, bueno, estos son enlaces saltados. Estos son enlaces a todas las páginas del sitio web. En primer lugar, bueno, el posicionamiento de eso no es del todo correcto. Se puede ver aquí tenemos dos columnas diferentes. Tenemos una columna a la izquierda, un espaciador, y una columna a la derecha. Lo que quiero hacer es jugar con el ancho de dos puntos. Y puedes hacer esto en cualquier parte la página con cualquier elemento. Literalmente acaba de meter tu pequeña flecha ahí y simplemente arrástrala. Arrástrelo hacia la derecha. Ahí vamos. Eso se ve genial. Entonces con el texto, prefiero que fuera centralizado. No sólo me permite tener la oportunidad simplemente dejar caer algo diferente en este lado, sino también el texto aquí. Bueno, la mayor parte de eso no es relevante. Eso es eliminar algunas partes tienda. No, gracias. Diario bueno, debería decir blog. Logan, borra el resto de cualquiera de los lados. Entonces estos son sólo todos, esto es sólo texto con enlaces en él. Entonces por eso es un poco rosa brillante y tiene un subrayado debajo de él. Si quieres editar cualquier pieza de texto y Andy dentro o sacar o cambiar un enlace, resalta el texto, haz click en este pequeño icono de aquí, ese enlace, uno. Eso te dirá qué enlace se está utilizando aquí. Haz click en tu piñón. De nuevo, haz lo que hicimos antes. Puedes irte. A una dirección de correo electrónico. Se puede ir a un archivo de dirección web o a una página, obviamente a una página sin una llamada blog de revista, donde queremos que vaya. Ok, Así blog sobre y contacta, igual que nos metimos en el bar de nav en la parte superior. Simplemente diferentes formas de usuarios navegando a través de su sitio. Vamos a aplicar. Y entonces una cosa más que quiero caer aquí. Vamos a ver algo fresco y peculiar. En este pequeño pop-up. Me gustó el aspecto de esta cosita antes al introducir el bloque de desplazamiento. Veamos cómo se ve eso. Vale, esto es genial. Entonces, lo que bajaríamos al fondo aquí, algunos textos que se desplaza de derecha a izquierda. Seguro. Puedo cambiar el rumbo de eso. Sí, podemos ir por ese camino. Permítanme cambiar el tamaño de eso. Creo que tipo de medios bastante grandes, bastante buena velocidad. Sí. Creo que el más lento es mejor para que puedas leerlo. Pero en términos de contenido, ¿ qué queremos aquí? No quiero soñarlo y esta pequeña línea ondulado. Así que cambiemos eso a GameOver. Entonces me gusta la línea ondulada, pero quiero que otra palabra esté aquí. ¿ Qué pasa cuando se acabó el juego en una máquina arcade, hay que insertar otra moneda. Entonces un poco como esta pequeña línea ondulado. Entonces en realidad quiero otro de esos. Por lo que da click en éste, duplique. Entonces estos pequeños puntos a cada lado que te permite arrastrarlo hacia arriba y hacia abajo. Entonces ahí vamos. Así que ahora se acabó el juego. Línea Squiggly, Insertar Moneda. línea Squiggly es un poco lenta. Tal vez hasta el teléfono rápido. Sí, creo que eso es mejor. De acuerdo, así que eso se ve realmente genial. Eso me encanta. No quiero este espaciador ni otro espacio, ¿verdad? Necesito allá vamos. Mira eso. Esa es una forma genial de terminar el sitio web con nuestro pie de página. Dice GameOver, Insertar Coin. Y luego partes de la página web por aquí a la derecha. Lo único es que creo que quiero que vaya por el otro lado. Sí, inserta el juego de monedas más. Eso funciona mucho mejor. Intensidad de onda, puedes jugar con eso y hacerlo un poco más tambaleante. Todo el camino arriba en eso. Un poco loco. A mí me gusta directamente ser honesto. Estado sin lo que quieras hacer con eso. Pero poniendo algo así, Es un pequeño elemento genial que Squarespace le ha comprado. Así que guarde eso. Ahora que esto ha salvado, echemos un vistazo a toda nuestra página de inicio. Haga clic en la flecha pequeña. Aquí tenemos una pequeña sección de cabecera muy cool. Enfriar poco intro con routers. Mejores juegos, 85 a 95. Me gusta esa pequeña animación ya que entra esa sección también. Otra pequeña animación fresca que se desvanece y la llaman una imagen con texto encima de ella. Sobre esa. Sí, me encanta esa pequeña animación también. Mario, Luigi consiguiendo contacto. Y luego voy a pie de página al final. Juego sobre insertar moneda. Entonces ahí vamos. La página de inicio ya está completa. Esto se ve genial. Se ve muy peculiar, muy brillante, muy cool. Y dice Lo que queríamos decir los juegos retro del 85 al 95. Y eso está todo hecho. No obstante, creo que hay un par cositas más geniales que podemos hacer con algunas de estas secciones. Entonces hablemos de eso en la próxima lección. 8. Diseño web: animación de fondo: Espero que hayas encontrado la primera parte de la página de inicio menos que muy fácil seguir y que ya tengas una página de inicio de aspecto impresionante tú mismo. Y también has tirado en tu propio pequeño estilo aquí. Estoy muy contento con lo que tenemos en la página de inicio hasta ahora, pero solo quiero mostrarte unas cositas más geniales que puedes hacer solo para que cada sección destaque ese poquito extra. Así que empecemos con la sección de héroes. Así edita sección. Lo que vamos a ver aquí es el fondo. miramos brevemente antes al decir que puedes agregar una imagen de fondo o video de fondo o éste, arte de fondo. Ahora esto es algo que viene con Squarespace. Lo que tienes son todas estas pequeñas y frescas secciones animadas que realmente dan algún carácter real a ese fondo. Algunos de ellos están un poco locos y puede ser difícil leer el texto blanco en la parte superior. Este se ve realmente genial. Apenas unos pequeños puntos blancos volando en el fondo. Pero el que realmente me gusta, éste en el fondo aquí. Lo que está haciendo es tratar de crear una cuadrícula 3D con diferentes colores para que saltando y entrando y fuera y le consiguiera un estilo de animación muy sutil. La belleza de éste es que normalmente tienes tres opciones principales entre las que puedes elegir. Eso es uno grande, pequeño, super pequeño, un poco así. Entonces lo que quiero hacer aquí es acertar los colores, eso realmente no funciona tener el amarillo y el rosa juntos porque no puedo leer los textos en la parte superior. Así que empecemos con el negro. Ahí vamos. Esa primera estrella, que se ve increíble. Me gusta la forma en que te metes en este resplandor de rosa volando alrededor. Eso es muy guay. Pero estoy tratando de ir por algo un poco más retro ocho bits ochenta estilo de videojuegos. Entonces veamos qué tenemos aquí, forma y tamaño. De esta manera puedes jugar un poco con él para que puedas cambiar el tamaño de las cajas que hay ahí. Así que eso es un muy pequeño, minúsculo 11 veces el tamaño, dos veces el tamaño. Eso me gusta. Ese tipo de representa más de ese tipo de estilo de 8 bits donde no tenían demasiados píxeles para jugar. Entonces vamos a pegarnos con el tubo. Entonces movimiento, bueno, esta es la velocidad del movimiento aquí. ¿ Lo tienes rápido o lento? Creo que se ralentiza para ser honesto, porque no quiero que sea sutil. Entonces esta es una divertida. Esta colocación, pixelada o turbulenta. Veamos qué hacen los dos. Pixelado aunque. Bueno, ahí vamos. Eso es mucho más estilo AT. Eso me recuerda a Super Mario de la Nintendo original. Y sí, eso me gustó mucho. Creo que eso se ve realmente genial y solo agrega ese poco extra de carácter. Lo único es que creo que el contraste entre el rosa y el negro no es del todo correcto. Así que vamos a ir con este color oscuro. Puedes hacer click sobre esto. Puedes elegir algo de tu paleta Agosto yendo a la costumbre. Entonces realmente podemos jugar con el color aquí. Entonces lo que quiero es mirarnos una alberca oscura quizá veamos qué tenemos aquí. Sí. Sí, eso es mejor. Tal vez incluso un poco más oscuro allí. Sabe, un poco más cerca del rosa, creo. Sí, eso funciona. Eso me encanta. Entonces eso es cerrar esta pequeña ventana donde se echa una mirada completa a eso. Sí, me encanta eso. Eso tiene un verdadero estilo de juegos retro. Y ese es otro pequeño paso hacia arriba de ese fondo rosa liso. Teníamos eso. De acuerdo, desplábamos hacia abajo. Realmente me gusta lo que tenemos aquí. Me gusta un poco el fondo amarillo liso para ser honesto. No obstante, vi algo alrededor. No quiero tirar eso aquí también. Fue este bloque de desplazamiento. Realmente me gusta lo que hicimos en el pie de página con ese. Y sólo un poco quiero lo muy pequeño, sutil en el camino. Simplemente puede sentarse debajo de todos los blogs ahí y soñarlo, eso no funciona. Pero voy a pensar una pequeña frase genial de uno de mis juegos favoritos. Termine con él. Combate mortal. Si recuerdas esa. Sí, ahí vamos. Todo todavía encaja en la página y creo que solo agrega un bonito poco de elementos sutiles cool a la página. Vale, ahora la siguiente sección, pero realmente me gusta esto. Realmente no quiero hacer demasiado con éste, pero creo que al igual que algún tipo de movimiento sutil en la imagen de fondo sería algo genial en realidad. Entonces si entro aquí para editar la sección, fondo, como ustedes saben, es la imagen hasta ahora. Lo que tenemos aquí es Efecto Imagen. Esto es algo que sólo puede hacer que la imagen se mueva en el fondo. Entonces, ¿qué tenemos? Tenemos líquido. Eso me gusta. Grano de película. Eso es un poco guay. Eso le da un poco más de una especie de estilo ochenta. Parece un televisor realmente viejo de los años ochenta. Líneas refractadas bien que es una especie de, está un poco roto, el tipo de imagen. Estas una de estas animaciones, tipo de cambios. Te mueves arriba y abajo a través de las imágenes. Realmente me gustó el primero en ser honesto. Líquido. Sí, me gusta un poco que así como vengo a esta sección es un poco ir de esa manera en lugar de que la cosa del movimiento se puso en el fondo. Muy cool. Ok. Ahora éste, quiero hacer algo un poco diferente aquí. Creo que el fondo es demasiado claro. Entonces agreguemos una imagen a esa. Subir archivo. Tengo esto realmente genial, tipo de salida del sol ochenta. Sí, creo que eso se ve blanco, se ve super 80s y eso se ve realmente genial detrás de Super Mario saltando por ahí. Es sólo un poco para seguir adelante. Así que tal vez juguemos con la opacidad de nuevo. Lo está trayendo todo, en el rosa que estaba allí anteriormente. Entonces la imagen sigue ahí, pero es como sentarse detrás de esta superposición rosa. Perfecto. Ok. Y una última cosa, vamos a jugar con el pie de página. Creo que quiero que pase esa misma cosa de la cuadrícula animada, pero quiero hacerlo de una manera ligeramente diferente. Vamos a elegir ese. Entonces escojamos la rejilla más pequeña que realmente me gustó eso. Pero de nuevo, a full on dice jugar con los colores. Empecemos con el blanco. Eso es genial. Pero entonces me gustó el amarillo. Así que volvamos a la amarilla. Sí, eso es muy guay. Creo que el texto negro encaja realmente bien encima de eso. Sí, eso es genial. Entonces forma y tamaño. Sólo mantengamos eso del mismo tamaño que es la emoción. Bueno, como que quiero que no se mueva. Así que dejemos caer el movimiento hacia abajo a 0. Sí, eso funciona de la manera. Es algo así como todavía, me gusta eso ahora la forma en que es una especie de animación, pero no está animada. Es sólo un muy cool. Entonces el fondo de la rejilla, creo que ahí va a hacer que el amarillo sea un poco más oscuro. Sí, ahí vamos. Eso se ve genial. Eso me encanta. De acuerdo, así que vamos a salvar este. Y luego echemos otra mirada a toda la página en vivo. Me encanta esta animación sutil, muy especie de estilo de 8 bits al fondo ahí. Entonces éste sigue luciendo genial. Lo acabó. Increíble. Sólo corre por el fondo. Hay amor que, Eso es muy peculiar. Eso se ve mucho más fresco con Luigi ahí, sólo le da un poco carácter en el fondo. Ese es el pie de página. Así que sí, eso es sólo para mostrarte un montón de cosas diferentes que puedes hacer con el fondo de tu página de inicio. Y ellos, cada sección sólo se levantan un poco más, un poco más fresco. Así que espero que hayas tenido una buena jugada por ahí con esta página de inicio. Si un siguiendo mi dirección completa o tomando tu propio estilo y tu propio contenido y jugando con esos fondos y haciéndolos realmente destacar. No puedo esperar a ver qué has hecho con éste. Ahora hemos terminado esta lección. Pasemos a las páginas restantes. 9. Diseño web: página sobre la cual: Vale, entonces la página de inicio ya está lista. Espero que hayas estado siguiendo junto con esto paso a paso. Y tienes tu propia página de inicio y estás realmente contento con ella y se ve realmente genial. Estoy deseando ver todos estos. Ahora la estructura y diseño del sitio web está todo ordenado. Entonces lo que tenemos que hacer ahora es usar eso en todas las demás páginas. Entra aquí, haz clic en las páginas. El primero que vamos a editar es la página sobre. Así que obviamente una página Acerca es la página que se trata de ti solo contándole a los usuarios que solo han visitado el sitio web por primera vez, qué se trata. Cuando entras en el editor, puedes ver cómo ya se ha construido usando la plantilla. Tenemos otra intro de página completa con algunos textos de introducción y una imagen de aspecto genial con nuestro azul siendo utilizado como fondo. Entonces tenemos más texto encima de la imagen. Entonces una sección extra al final explicando un poco más sobre quiénes somos. Lo mejor que verás venir a esta página, sin embargo, es mirar tu pie de página. Así es exactamente como nos planteamos antes y el encabezado exactamente cómo configuramos antes. Son iguales y consistentes en todas las páginas del sitio web. Entonces cuando venimos aquí a editar, estamos editando esta sección, esta sección, y esta sección. Y obviamente podemos sumar en una sección extra si lo necesitamos. Pero realmente me gusta lo que tenemos en la cima aquí, así que voy a trabajar con eso. Entonces, antes que nada, cambiemos este texto en la parte superior. Simplemente pegando en lo que quiero decir, manteniendo viva la clásica arcade desde el 85. Como se puede ver aquí, ya está utilizando el rumbo al encabezamiento uno. Eso es demasiado grande. Rumbo tres, más pequeño, probablemente un poco demasiado pequeño. Creo que en realidad ir a fue perfecto, así que nos quedaremos con eso. Entonces abajo aquí, un poco más texto de introducción que está usando el párrafo dos. Les pegaré lo que ya he escrito ahí. Entonces debajo de eso me gustaría otro botón el mismo que teníamos en la página de inicio. Y quiero que ese botón lleve a los usuarios través de la página del blog. Nuevamente, es solo navegación adicional que pueden usar la barra de navegación en la parte superior o botones en las páginas, diferentes formas de encontrar las páginas que quieren. Entonces para hacer eso, sube aquí y da click en Editar. Y luego ve a enlazar por aquí y seguir el botón. Y verás que eso ha aparecido a continuación con los principales textos ahí. Lo que quiero decir aquí es leer más y hacer que vaya a nuestra página de blog. Tan simple como eso. Entonces una cosa más que necesitamos cambiar es la imagen. Esta es la imagen que vino de la plantilla. Vamos a reemplazar el archivo de subida. Y voy a usar esta imagen aquí, jugando crisis del tiempo. Otra imagen que he configurado de antemano. Eso se ve realmente genial. Sólo un pequeño problema. Aquí hay un poco de espacio. Sólo vamos a sacar eso. Ahí vamos. Eso fue sólo un espacio en el texto. Ahora todo se alinea mejor. Mismo espacio entre aquí y allá. Sí, eso se ve genial. Eso me encanta. No obstante, el problema es que sí encaja en la página, pero no del todo. Como se puede ver, el botón que no se alinea del todo con la parte inferior de la imagen. Entonces creo que este texto es demasiado grande, así que vamos a cambiarlo por un rubro tres. Ahí vamos. Ahora todo está centralizado al lado de la imagen. Y eso sólo le da un poco de espacio para respirar aquí y aquí. Cuando un usuario visita la página, lo ve todo de una sola vez. Y me encanta este fondo azul, pero como lo hicimos en la página de inicio, vamos a ver si podemos traer un poco de un fondo más fresco. Así que subamos hasta aquí y damos clic en la sección Editar. Volvamos a tierra otra vez. Voy a probar un poco más de arte en el fondo. Nuevamente, cuando estés construyendo esta página tú mismo, ten una buena jugada con estos y veas si encuentras una que te guste. Eso se ve genial. Y me encantó el amarillo y el rosa, pero eso no va a funcionar aquí porque no se pueden leer los textos encima de él. Así que vamos a ir al Filtro de nuevo. En primer lugar, bueno, vamos a cambiar uno de los presets aquí. Puedes elegir una imagen personalizada si quieres. Me encantan estos iconos que tienen ahí. Y de todos ellos, este de aquí, la estrella. Pues eso se siente la década de 1980 más un poco, más apropiada para un sitio web de videojuegos arcade. De nuevo, realmente no puedo ver los textos y esas cosas. Así que vamos a elegir una imagen diez Tia. Bueno, hagamos eso blanco y luego hagamos el color de fondo azul. Pero de nuevo, no puedo leer del todo el texto en la parte superior del icono blanco. Hagamos algunas ediciones a esta red. Desplazemos hacia abajo. En primer lugar, escalar el número de imágenes, pero hay demasiadas allí. Entonces lo que voy a hacer es personalizar eso. Tan pequeño, mediano, grande, o personalizar. Voy a dejarlo caer justo hacia abajo a mucho más pequeño. Digamos simplemente, vamos a cambiar eso a dos. Y luego el número de imágenes. Dejemos caer eso a mucho menos. Sexo amarillo. Eso es muy sutil. Se puede ver una flotando aquí arriba y otra detrás de aquí, uno detrás de ahí. Pero aún no puedo leer el texto encima de eso. Entonces hagamos otra edición. Vamos a filtrar y jugar con estos. Y esto te dará otro tipo de superposición en la parte superior de los iconos en el fondo. Así que juega con ellos, círculo de punto de cruz. Eso es bastante guay En realidad. Se ve un poco más de los ochenta cubo un realmente así. Entonces éste, ahí vamos. Círculo de Gradiente. Realmente no sé lo que eso significa en términos de diseño y visualización. Pero aquí tengo lo que quiero. Para que pueda ver flotando a la pequeña estrella, pero aún puedo leer el texto encima de ella. Lo que tengo ahora es este tipo de estilo como cuadriculado un poco de fondo . Entonces eso es brillante. Lo único es que no creo que quiera que se mueva. Entonces si cambio la velocidad de onda se apaga eso a 0. Veamos qué pasa. Sí, ahí vamos. Eso ya no se mueve. Me encanta. Ahí estamos. Eso es genial. Suerte. Es un fondo muy sutil para añadir aquí, pero solo le da un poco más de carácter y representa lo que hemos hecho en otro lugar de la página web. De acuerdo, así que esa es esa sección ordenada. Veamos lo que tenemos en las otras dos secciones. Bueno, para ser honesto, no creo que necesite mucho más texto aquí. Creo que quiero explicar brevemente a la gente que somos, qué hacemos, y luego enviar a la gente a la página del blog. Entonces lo que voy a hacer es eliminar esta sección. Entonces pasa el cursor sobre la sección. Quitar. Ahora tenemos esto en la parte inferior, que se ve muy cool y me gusta este estilo. Totalmente no lo que estamos tratando de hacer aquí. No sé qué es esa imagen, algún tipo de Salt Lake o algo así. Así que vamos a cambiar esa imagen a una que hemos utilizado anteriormente. Como un fondo. Reemplazar. Voy a caer en ese mismo fondo que hice en la página de inicio detrás de Super Mario. Sí, eso es lo que quiero. Por lo que un poco sólo quiero tener este tipo de breve introducción, enviando gente a través del blog. Y luego sólo un pequeño cartel fresco aquí. Realmente no puedo leer el texto ahí. Entonces hagamos otra superposición de color encima de la imagen. Antecedentes. Opacidad de superposición. Vamos a poner eso justo arriba. Vale, eso es bonito y alto. Eso me encanta, pero no quiero que eso sea Blues. Los humanos son un poco como el azul aquí arriba. Y entonces quiero un poco de contraste, tal vez convertido en el rosa. Veamos dónde podemos editar eso. Vamos a los colores. Es porque está en la oscuridad aquí. Si yo fuera a elegir brillante también. Ahí vamos. Ahora me gustaría contrastar de un color brillante. Empezamos con los blancos, entramos en el azul, al rosa, y luego al amarillo de la foto. Eso es genial. Ahora sólo necesito editar el texto. Entonces lo que en realidad voy a hacer es eliminar esa línea de fondo. Entonces ellos tipo de poner en algunos pequeños guiones extra aquí, algunas lineas. No quiero esos. Y quiero que diga Buenos tiempos. Así que he escrito IN o simplemente centralizar eso. Lo están llevando de vuelta al párrafo dos. En realidad quiero usar aquí. Es la misma fuente que estamos usando aquí para terminar el juego. Creo que es sólo otro punto peculiar en el que podemos dejarlo caer. Destacemos que por aquí en los textos. Elige monoespacio. Como se puede ver que eso lo ha cambiado a la fuente que estamos usando en la parte superior aquí. Y dice, Buenos Tiempos. El problema es, bueno, no puedo leer eso del todo, así que sólo tenemos que cambiar el tamaño de eso. Eso se hace en nuestras Fuentes Configurando aquí. Entonces, antes que nada, solo guardemos esta página. Desplázate hacia abajo hasta lo que estamos mirando. Presiona editar otra vez. Y luego ven aquí a las fuentes. Voy a hacer clic en la miscelánea aquí, que está puffing arcade, la fuente que estamos utilizando. Ya hemos elegido la font-familia y tenemos el peso. Es éste de aquí, tamaño basado en tamaño, eso es muy, muy pequeño. Hagamos eso mucho más grande. Siete. Creo que siete está bien ahí. Sí, de verdad me gustó eso de vuelta cerca. Y ahora estamos de vuelta aquí. Por lo que esto se ve realmente genial el camino que vamos de este pequeño texto de introducción. En esta imagen de fondo con buenos tiempos en la parte superior, en el aleteo. Sin embargo, quieres un poco más extravagante. Voy a caer en una pequeña imagen o pequeño icono por encima de este texto. Por lo que haga clic en el plus y luego elija la imagen. Y una imagen, de nuevo, subir un archivo. Y aquí tengo este pequeño PNG. Una imagen PNG es aquella que no tiene un fondo detrás de ella. Y es sólo un ícono de un invasor espacial. Quiero dejar caer eso por encima de la palabra. Buenos tiempos. Sí, me encanta eso. Eso se ve realmente genial. Está un poco flotando frente a esta imagen del sol allí. Y luego dice Good Times debajo de él. Lo único es que creo que eso hace que esta sección sea un poco demasiado grande. Entonces lo que voy a hacer es añadir en un espaciador a cada lado de esta imagen. Nuevamente, haz clic en tu plus y elige espaciador. Y eso caerá automáticamente el espaciador en la parte superior de la imagen. Pero lo que queremos hacer es poner uno a la izquierda y otro a la derecha. Entonces, antes que nada, solo dupliquemos eso y luego otro espaciador. Por lo que ahora tenemos dos espacios aquí. Y luego sostenga el ratón y simplemente arrástrelo hacia abajo a la izquierda de la imagen. Como se puede ver aquí, hay una larga línea azul cayó el espacio y al lado de la izquierda de todo en esta página. Pero no queremos eso, solo lo queremos a la izquierda del ícono. Así que tráelo un poco hasta que veas la línea más corta. puede ver que es la misma altura que la imagen del invasor del espacio. Así que solo déjalo ahí. Ahí vamos. Ahora hemos caído en pequeño espaciador al lado del ícono. Ahora voy a hacer lo mismo del otro lado. Línea más pequeña, ahí está. Ahí vamos. Y hasta puedo hacer eso un poco más pequeño. Creo que en realidad me gustó ese tamaño, pero si quieres arrastrarlo para hacerla más pequeña, simplemente arrastra el borde de la caja y llévala a izquierda o derecha. En realidad, creo que me gusta ese tamaño. Quiero decir, ese es un poco de espacio agradable entre los buenos tiempos y el Hijo. Sí. Ok. Lo dejaremos en ese tamaño. Ahora tengo una About Page, pequeña introducción que dice mantener viva la clásica arcade desde el 85. Algunos textos breves sobre quién soy, de qué soy. Un botón que lleva a los usuarios a través de la página del blog. Y luego sólo un peculiar pequeño cartel apagado. Están diciendo, buenos tiempos con este ícono de maquina arcade muy ochenta. Así que por favor siga lo que he hecho aquí. Toma tu propia página Acerca de y armarla de una manera que sientas funciona mejor para el sitio web que estás construyendo. Es posible que quieras añadir en algunas secciones extra ahí para entrar un poco más de detalle. O cualquier otra sección que envíe usuarios a otras partes de su sitio web. Pero cuando haya terminado, haga clic aquí y guarde. Cuando volvamos aquí, verás cómo se ve la página en el escritorio. Solo echemos un vistazo rápido a cómo se ve en el móvil. Nuevamente, tenemos aquí el mismo encabezado de intro. me gusta mucho. Entonces el diseño aquí es perfecto. Empieza con una imagen entra en los titulares, desplaza a la gente hasta el Leer más, y luego mira ese Good Times. Eso fue genial. 10. Diseño web: página de contacto: En la siguiente página en la que quiero que trabajen es la página de contacto. Esta es una página muy importante en cualquier sitio web con la que la gente puede ponerse en contacto. Tú, Habla contigo, arrojas ideas para tus blogs por ejemplo. Así que vamos a hacer click en Contacto. Sólo llevémoslo de vuelta al escritorio. Esta es la página que viene con la plantilla. Bastante simple. Rara vez me contacten. Forma para que la gente se ponga en contacto contigo, una imagen. Y luego el pie de página, muy recto y sencillo y definitivamente quieres mantenerlo así para tu sitio web. Desplazemos hacia arriba y vayamos a editar. Me gusta lo que tienen aquí, pero un poco quiero simplificarlo aún más. Entonces lo que voy a hacer es encontrar otra sección de contacto aquí. En la sección, veamos qué tenemos. Contacto perfecto. Aquí tienes un par de otras pantallas muy simples para ti. Puedes tenerlo por toda la parte superior de una imagen de fondo si te gusta ese estilo, usa eso en tu sitio web o simplemente algún texto con un botón de contacto a continuación que llevaría a la gente a través de la dirección de correo electrónico. Pero quiero mantenerlo simple. Simplemente no quiero formarme. Sólo quiero algo sencillo como una dirección de correo electrónico y un número de teléfono. Vamos a dejar caer este en. Sí, me gusta que simpático, sencillo contacte con nosotros. Correo electrónico, teléfono, vestido, y luego algunos enlaces a través de redes sociales. Entonces voy a usar esa sección. En primer lugar, simplemente eliminemos esta sección. Entonces. Bueno, se ve bien y blanco, pero no quiero que vaya por más cabecera blanca en sección blanca aquí. Así que vamos a editar toda la sección. Dos colores que hemos utilizado un fondo amarillo, hemos utilizado fondos rosados, fondos azules. Si estás contento de continuar con eso en tu página web, haz lo mismo. No obstante, vamos arriba, fondo negro. Sólo quiero mantenerlo simple. Ahora significa que tengo un poco de variedad a través del sitio web todavía usando la misma estructura, un fondo diferente colores. Eso me gusta. Demos clic fuera de aquí. Entonces cambiemos esta imagen. Vamos a ir por aquí y reemplazar el archivo de subida de imagen. Esta es la imagen que he elegido usar aquí. Esto es genial. Me encanta esto. Me encanta lo limpio y ordenado que es. No creo que necesite un trasfondo loco porque es más una llamada a la acción para que gente se ponga en contacto contigo. Cualquier cosa con lo que no me sienta cómodo aquí. En raras ocasiones, solo estos bordes curvos en la imagen que realmente se ven realmente geniales, pero no es un estilo que he usado en ningún otro lugar en el sitio web. Entonces, desde un punto de vista consistente, vayamos al diseño. Como se puede ver, esto tiene un radio de esquina. Sólo pongámoslo a 0. Vamos allá, tenemos la Imagen, Contáctenos, el correo electrónico. Simplemente cambia eso al juego de correo electrónico correcto través de mi número de teléfono donde vivo. No Nueva York, pero eso está bien por ahora. Y luego aquí abajo, bueno, no tengo una página de Twitter, así que vamos a eliminar esa. Y luego esto va a Facebook e Instagram. Y de nuevo, estos son solo textos, enlaces, así que pasa el cursor sobre el que quieras, Instagram. Entonces puedes entrar aquí y podemos cambiarlo al juego a través de la página de Instagram. Haz lo mismo en Facebook dot com. La dirección de correo electrónico, en primer lugar, resalta la palabra, ven aquí para enlazar. Como se puede ver, ya está diciendo cuál es la dirección de correo electrónico, pero ¿a dónde va a ir eso? Haga clic aquí. Y vamos a escribir allí tu dirección de correo electrónico. Entonces esto es si quieres que aparezca el sujeto. Por lo que sólo diremos entonces cuerpo, CC, BCC, opcional, solo deja eso como opcional. Eso no es importante aquí. Ahorra eso. Aplicar. Ves que está subrayado ahora porque esa es una dirección de correo electrónico en vivo que se puede hacer clic para que la gente pueda contactar. De acuerdo, así que eso es perfecto con este paciente. Manténgalo limpio y sencillo y limpio. Digamos eso. Sí, eso es simple. Me gusta esa pequeña mezcla animada ahí también. Solo echemos un vistazo rápido a cómo se ve eso en el móvil. Perfecto. Sí, me gusta que todo aparezca en una sola página. Bonita imagen explicando quiénes somos, qué hacemos, y contacta con nosotros con los detalles, diferentes formas en las que puedes contactar con nosotros. Ok. Por lo que ahora tenemos una página de inicio sobre página, una página de contacto. Sólo hay una página más con la que terminar. Ahora, la página del blog. 11. Diseño web: blogs: Por lo que aquí estamos en la sección de blog de la página web. He dejado éste hasta el final, ya que hay dos cosas diferentes involucradas en la configuración de estas páginas. En primer lugar, la página general del blog, y luego cada bloque individual. Así que empecemos echando un vistazo a la página general. Primero simplemente cambiarlo a escritorio. A continuación, ver pantalla completa. Entonces esta es la configuración general que venía con la plantilla. Y me gustó mucho esto mostrado donde podemos tener una imagen a la izquierda, alguna meta descripción en la parte superior, el título y luego textos de introducción allí. Después el siguiente, imagen en los textos de la derecha a la izquierda, que dejó tipo impositivo. Me gustó esa pantalla. No obstante, como se puede ver en esto, los tamaños de fuente realmente no están funcionando aquí. Entonces lo que vamos a hacer es empezar arreglando todo eso. Hagamos clic aquí arriba y luego editemos la página. Por lo que quiero que esto sea mucho más pequeño. Tal vez esta más pequeña también. Lo que quiero es este pequeño espacio aquí para desaparecer al borde de las imágenes que tocan. Si hacemos este texto más pequeño, ojalá eso funcione. Demos clic en Estilos del sitio. Iremos a las fuentes. Entonces la mejor manera de gestionar todo esto es hacer clic en cada parte de la página individualmente. En el momento que está mostrando la fecha de cuando se publicó el blog. Vamos a cambiar eso en un minuto, pero vamos a hacer eso mucho más pequeño. Por lo que voy a hacer clic en éste. Como se puede ver aquí está recogiendo los textos misceláneos que configuramos para la página Acerca, que fue genial en ese tamaño allí, pero no queremos que eso sea de este tamaño aquí. Entonces lo que vamos a hacer es hacer clic en esto y cambiarlo a disfraz. Se ha recogido automáticamente la misma fuente, familia, peso y estilo. No obstante, es el tamaño de este asunto. Esa es la que queremos bajar para ser mucho más pequeña. Pero si lo cambiamos aquí, no lo cambiará en la página Acerca de. Porque esto está usando un estilo personalizado solo para este elemento en la página del blog. Así que vamos a dejarlo caer en un mucho más pequeño, tal vez 1.51.6, tal vez 1.7. Eso me gusta. Es un poco pequeño y sutil, pero sigue ahí en la misma fuente. Por lo que ahora el título, esto está recogiendo rumbo a, supongo que lo que hicimos en las otras páginas. Cambiamos eso a rumbo tres solo porque era un poco más pequeño. Ahí vamos. Eso es mucho más ordenado ahora. Y como se puede ver, esas dos imágenes son conmovedoras. Lo que tenemos ahora es la perfecta visualización de imagen, título del blog y una pequeña introducción sobre de qué se trata tu blog. No obstante, todavía solo quiero una cosa más aquí. Creo que desde el punto de vista del usuario, es mejor tener un pequeño botón Read More a continuación para que los usuarios sepan exactamente dónde hacer clic para leer este blog. Así que volvamos. Por lo que subiré aquí y haga clic en la sección Editar. Si quieres entrar aquí puedes jugar por ahí con el diseño diferente. Puedes tenerlos uno al lado del otro, para que se sientan uno al lado del otro. Nuevamente, se trae de vuelta en los tamaños de fuente originales que estaban allí. Y elige el que quieras y luego puedes editarlo. Blog de albañilería. Bueno, así es como tenemos la imagen cuadrada en la parte superior con el texto a continuación. Eso se ve bastante cool. Pero no me gusta la forma en que las cosas no se alinean realmente en esto. Voy a volver a lo que teníamos originalmente, el ancho alterno lado a lado, lleno, infeliz con eso. Imágenes. Bueno, si los quieres un poco más pequeños, juega con eso aquí. Pero para ser honesto, estoy contento con la plaza. Creo que ese es un diseño agradable, da un buen poco de espacio para respirar en la parte superior y abajo aquí. Entonces vuelve a jugar alrededor de la alineación del texto aquí, ya sea que quieras mostrar el extracto o si no quieres mostrarte al experto, pero definitivamente quiero eso ahí. Después lea más enlace. Ese es el que quiero. Muéstrale eso. Ahí vamos. Eso es, eso está subrayado. Los usuarios saben que hacen clic en eso para llevarlos a través del bloque. Esto es perfecto. Estoy muy, muy contento con el diseño de esta página. Como siempre, puedes cambiar el color del fondo aquí también, entrar en colores si lo quieres en el amarillo con texto negro. Eso también se ve genial. Lo que sientas funciona para tu sitio web basado en la paleta de colores que elegimos antes. Pero me voy a quedar con el rosa brillante. Esta es la parte principal de nuestro sitio web, y este es el color principal, mi color primario que estamos usando en el botón de navegación de encabezado ahí. Así que voy a seguir con eso. Bien, así que aquí arriba y ahorre. Lo que viene con la plantilla es para blogs que ya se han hecho. No queremos usar estos. Vamos a eliminarlos. Pero antes que nada, simplemente pinchemos sobre el primero y veamos cómo se ve. De acuerdo, así que de nuevo, esto está recogiendo el estilo inicial y los elementos de diseño inicial de las plantillas. Voy a tener que cambiar algunas cosas aquí. Como se puede ver, está utilizando la fuente original que venía con la plantilla. Así que vamos a entrar aquí y editar. Haga clic aquí para editar la sección. Las mismas opciones aquí como siempre. Si quieres jugar por ahí con el ancho de esta página, ven aquí, prepárate para estrechar. Puedes tener medio, aún más ancho la forma en que llena la página completa. Si quieres la alineación de texto, si quieres todo centralizado, elige eso aquí. Me gusta la forma en que lo teníamos estrecho, y me gustó un poco que ese texto quede alineado. Voy a volver a poner eso a cómo fue. Estoy contento con todo lo que meta-descripción. Bueno, esto de nuevo, está usando la fecha. Pero lo que quiero hacer aquí es lo mismo que hice en la página de inicio. Quiero que sea el catalizador. Cuando hago click en eso, nada se muestra todavía y te mostraré cómo y dónde y por qué. Deberías cambiar eso muy pronto. Pero quiero sacar la fecha. No creo que la fecha en que se planteó esto sea importante para mi página web. Tal vez sea para la tuya. Elige lo que sientes funciona mejor para tu sitio web. Y voy a apagar la fecha. Se ve en blanco en este momento. Pero cuando ponemos en categorías que se mostrarán, Nuevamente, colores, cambia el fondo aquí si quieres elegir lo que te funciona, pero sólo me quedaré con el rosa quiero tener en la página del blog aún debería mostrarse de esa manera cuando la gente venga a través de mi blog. De acuerdo, así que estoy contento con todo lo que hay. Pero lo que necesito cambiar es la fuente que se usa aquí arriba, la fuente del cuerpo. Estoy muy contenta con eso. Eso es sólo recoger el párrafo regular. No obstante, esto aquí está usando una fuente diferente de la antigua plantilla original. Quiero la misma fuente de encabezado que hemos usado en otro lugar del sitio. Así que de nuevo, voy a hacer clic aquí arriba en los estilos del sitio, ir a fuentes, resaltar este texto, y luego bajar a asignar estilos. Para que como se puede ver aquí, esto es lo que editamos antes. Era el título del sitio, el título del sitio móvil, y la navegación del sitio. Estos elementos que puedes ver aquí arriba, lo que queremos editar ahora es la entrada del blog. Entonces vamos a entrar en el título. Está en costumbre ahora mismo, pero quiero que sean nuestros encabezados originales. Así que volvamos a cambiarlo a ese tamaño mientras puedo elegir uno de los que ya hemos escogido, rumbo tres sigue funcionando para mí. Me gusta el tamaño de eso, así que voy a mantenerlo como está. Ahora, esto se ve muy bien. Está utilizando nuestra fuente regular titular, fuente párrafo regular. Así que volvamos. Una parte más sin embargo fue la metta, que apareció arriba aquí. Ahora acabo de sacar eso. Bueno, sólo vamos a entrar en la materia. Y vamos a cambiar la familia de fuentes a la arcade Puffin Chrome otra vez. Verás cómo se ve eso en un minuto, pero vamos a volver. Metta tamaño mientras configuramos eso como 1.7 en la página del blog, vamos a cambiar eso a 1.7 de nuevo. Te mostraré cómo se ve eso en un minuto una vez que configuramos el primer blog. Pero siempre puedes volver aquí y cambiarlo de todos modos. Así que volvamos. De acuerdo, en términos de exhibición aquí, estoy contento con esto. Lo que ves abajo abajo aquí es la navegación al siguiente blog. Esto mostrará el título de la misma y irá de ida y vuelta. Y eso es usar nuestra fuente regular titular. Entonces voy a mantener eso tal como está. De la forma en que he configurado este, cada blog aparecerá ahora. De esta manera. Tendrá el mismo espaciado en la página. Tendrá las mismas fuentes titular y el mismo Body Copy. Por lo que ahora te mostraré cómo agregar tus propios blogs a esta página. Dos formas diferentes de hacer esto. En primer lugar, podemos tomar uno de estos blogs ya está aquí y editarlo. O si queremos simplemente empezar con los nuestros propios, basta con hacer clic aquí arriba en el Plus. Voy a empezar mostrándote cómo editar uno que ya está ahí, solo para darte una buena idea sobre qué es configuración y cómo se mostrará para los usuarios que acuden a tu página web. Sólo tomemos este primero aquí. Así es como se ve en este momento. Y si hago clic en los puntos aquí, puedo cambiar la configuración. Así que aquí hay varios ajustes diferentes por aquí y solo vamos a correr a través de ellos uno por uno para que pueda mostrarles lo que hay que hacer. Si los blogs de la parte más importante de tu sitio web, asegúrate de que cada elemento que añades aquí esté hecho correctamente. En primer lugar, imagen, bueno esa es una imagen de jabón. Queremos que entre aquí otra imagen de videojuegos. Así que quita la imagen. Voy a empezar escribiendo un blog sobre crisis del tiempo, el juego arcade de disparos que me encantó en los años 90. Así que sólo voy a subir esta imagen que he guardado de este juego. Vamos y ahora salimos. Esta es la frase que aparece para todos en diferentes partes de tu sitio web. Entonces de la página de inicio a la página del blog es una frase simple y recta que explica con bastante claridad de qué se trata el blog. Por lo que ya he escrito un extracto para la crisis del tiempo. La crisis del tiempo es una primera persona en Rails espionaje gustado pistolas shooter serie de juegos de arcade por Nam Co. introducido en 1995. Entonces simplemente explica cuál es el juego cuando salió, quién lo produjo, usa saber exactamente lo que están a punto de leer. Entonces siguiente aquí abajo, esta es la URL del post. Esto es otra vez usando la babosa de URL que estaba previamente allí, pero no quiero que diga proceso de elaboración de jabón. Quiero que la entrada del blog diga crisis del tiempo. Así que sólo copiaré eso y lo pegaré aquí. Autor, bueno, ese soy yo mismo. Sólo hemos creado un autor aquí. Sourceurl, no te preocupes por nada de eso por este tipo de cosas. Entonces entra en opciones. Estatus. Aquí es donde puedes configurar si es un borrador, algo que vas Lo que pasa más tarde, o puedes establecer una fecha diferente en la que te gustaría que apareciera el post. Sólo voy a dejar éste tal y como se publica aquí. No necesito cambiar eso. Ahora volvamos. En aquí es donde podemos sumar en etiquetas y categorías. Es posible que desee agregar etiquetas a sus publicaciones. El categorías es la que estoy mirando aquí es por el momento, solo tendré un puñado de publicaciones de blog. En un año. Espero tener cientos de ellos. Quiero ayudar a los usuarios a navegar por el sitio web y leer diferentes publicaciones de blog que son sobre diferentes áreas, diferentes dispositivos. Así que vamos a hacer clic en categorías. Lo que voy a escribir aquí es 990s, porque este es un videojuego de los años noventa. Y entonces en lo que voy a escribir es Arcade. Esto me está ayudando a dividir todas mis publicaciones de blog. Si es de los años ochenta o usa la categoría 1880. Si es arcade, arcade, obviamente si es Nintendo o Sega, entraré en esa categoría. Entonces, cuando eso haya terminado, haga clic atrás y luego ven aquí a SEL. De nuevo, esto sólo le está llevando lo que estaba allí anteriormente. Así que vamos a cambiar el título de SEO a crisis del tiempo. Entonces estoy poniendo en los mismos extractos que puse antes en el SEO. Para aquellos de ustedes que no saben qué es el SEO, esto es la Optimización de Motores de Búsqueda. Y esto está haciendo que sea mucho más fácil todas tus publicaciones de blog y tu sitio web general aparezcan en las búsquedas en Google. Eso se hace cambiando el título y la descripción a algo que incluya palabras que buscarían. Si están buscando un post sobre crisis del tiempo eso está aquí dos veces. Por lo que es más probable que compres en búsquedas de Google. Imagen social. Esto sucederá si alguien está compartiendo tu publicación de blog en las redes sociales. No necesitas una imagen aquí, pero vas a obtener más clics si la gente puede ver Se trata también. Entonces vamos a añadir exactamente la misma imagen que acabamos de usar, ton crisis. Aquí vamos. No te preocupes por compartir y ubicación. Eso no es importante para lo que estamos haciendo aquí. Así que vamos a salvar este. De acuerdo, Así que cuando volvamos a esta página, verás que la categoría está ahora aparecer por encima del título del blog y que están utilizando son muy peculiar fuente Accent. Entonces el backend de la entrada del blog, eso es todo configuración, eso está todo listo para funcionar. Lo que tenemos que hacer ahora es editar todo el post. Así que haz click aquí en Editar. Ahora, obviamente lo principal que está mal aquí es el título del post. Cambiemos eso a crisis del tiempo. Entonces aquí tenemos un video. No quiero que ese video esté ahí. Si quiero hacer es empezar con una imagen. Subir imagen. Nuevamente, solo usando la misma imagen que hemos utilizado en otro lugar para la crisis temporal. Vale, eso se ve genial. Por lo que ahora hemos cumplido con el título de descripción, imagen de introducción, y aquí está todo el texto. Eso es algo de jabones de nuevo. Así que sólo voy a destacar esto y solo pegaré en todos los textos que he escrito para la crisis del tiempo. Se suma en algunos brechas extra aquí. Sólo voy a eliminar esa brecha. Esa brecha, manténgalo todo unido. Sólo quiero tirarle una cosa extra que voy a hacer en cada post. Quieres ver esto en acción. Entonces voy a tirar un pequeño video. Por lo que voy a hacer es pinchar aquí. En video. Lo que puedes hacer aquí es solo tomar el enlace para un video de YouTube y pegarlo aquí, tan sencillo como eso. Entonces si entramos en YouTube, Aquí hay un montón de videos de crisis del tiempo que aparecen. Entonces voy a elegir éste, que es una jugada larga del juego. El video empezará a reproducirse y luego solo entra aquí para compartir y copiar ese enlace que te dan aquí. Y luego vuelve a tu sitio web y pegarlo aquí. En busca de eso ubicado con éxito. Y ahí vamos. Es tan simple como eso. Ahora tenemos una entrada de blog que está configurada a la perfección. Imagen, intro texto, video, texto. Por lo que este ahora está configurado perfectamente suben aquí a ahorrar. Ahora tenemos uno que verás por aquí ahora tiene el título correcto y la miniatura correcta para la crisis del tiempo. Entonces por eso te mostré cómo editar un post que ya estaba ahí. Ahora que hemos editado esa, no quiero que estos otros tres estén aquí. Así que sólo voy a tomar esos y luego eliminarlos a los tres. De acuerdo, entonces ahora tenemos una entrada de blog y luego tenemos dos formas diferentes de agregar una nueva. Así que pincha aquí arriba en el anuncio y sigue las mismas indicaciones que te acabo de dar. Así que pongamos en la imagen del título, pila principal de texto, y luego agreguemos otro video. Vale, ahora mi Street Fighter 21 está perfectamente configurado aquí. Así que vamos a salvar eso. Y todavía son borradores. Entonces ven aquí a Ajustes. Siga todas las mismas reglas para estas partes. Tu blog ya está configurado a perfección porque tomó el nombre del título. Categorías de opciones, 1990 también. Y como se puede ver, ya ha elegido esa categoría. Así que sólo selecciona esa. No añadas una nueva categoría en porque ya existe. Esto fue popular en Nintendo. Entonces esa es una nueva categoría. De nuevo, seguir las mismas reglas. Asegúrate de que esto esté publicado en este momento. Sigue las mismas reglas de SEO, imagen social, etcétera y luego haz clic en Guardar. Y ahora muestra la descripción de Meta aquí arriba. Entonces este es otro post perfecto. Entonces esa es una forma de agregar una nueva. Otra forma es que puedes hacer click aquí y puedes duplicar. Puedes tomar un viejo post que se ha configurado exactamente de la misma manera. Pero solo asegúrate de estar al tanto de las redes sociales, comparte las salidas, la imagen en miniatura, todo así. Y solo asegúrate de que no estás repitiendo lo que has hecho por otro cartel. Creo que usar el signo más y agregar en un nuevo post es la mejor manera de hacerlo. Adelante y agrega algunas entradas de blog diferentes. No quieres iniciar un sitio web completamente nuevo con un solo post. Ten unos cuantos. Voy a sumar dos más aquí. Y luego pasaremos y echaremos un vistazo a cómo ve la página principal y el resto de la página web. Ahora tenemos cuatro blogs en vivo. 12. Reseña de tu sitio web: De acuerdo, Así que aquí estoy de vuelta en la página del blog, la página general del blog, y puedo detectar algunos errores que he hecho estándar para cualquier diseñador gráfico. Busca un problema, entra y arréglalo. Entonces en primer lugar, como se puede ver aquí, donde tengo la categoría subiendo en la cima aquí, Nintendo de los años 80. Sigue mostrando la fecha en la que no quería eso ahí. Así que tomemos esa. Voy a entrar aquí para editar, editar la página, ver lo que he hecho mal. Por lo que aquí abajo tenemos alineación de texto, etcétera El contenido de metal primario es categorías es porque tengo contenido metálico secundario como la fecha. Entonces me muestra a los dos lo que quiero que quede vacío. Si cambio eso a ninguno, ahí vamos. La belleza de esto es cuando un usuario entra aquí, como se puede ver, eso es en realidad un canal de enlace. Entonces si alguien hace clic en eso, llevado a través de otra página que les muestra todos los blogs de 1880. Mientras que si vienen aquí y hacen clic en Nintendo, les mostrará todos los blogs de Nintendo. Entonces por eso es realmente útil tener esto en la página de tu blog ayuda a las personas a navegar por sí mismas. Entonces esa es una solución rápida muy simple ahí. Siguiente uno. Es posible que hayas notado esto en la parte superior aquí en la barra de navegación, o cada palabra es algo así como golpeada. No quiero eso porque eso casi sugiere que no es la página en vivo, como si no estuviera lista o algo así. Quiero que la línea simplemente se sienta debajo de ella. Así que obviamente he configurado algo incorrectamente aquí. Así que subamos aquí y cambiemos los estilos del sitio. Algo mal que he hecho aquí. Así que voy a ir a las fuentes y hacer click en ésta. Entonces esto es la navegación del sitio. Entonces todo parecía correcto Aquí, la fuente correcta, el peso correcto, puede caer eso hacia abajo. En realidad, creo que me gustan los 500 que hay. La cosa del diseñador. Cambia de opinión más adelante. Creo que es éste de aquí, altura de línea. Creo que ese es el problema porque lo tengo configurado a 0 y debe ser, sí, eso es todo ahí. Eso es genial. Lo que quiero es sólo esa línea para sentarse debajo de la palabra. Entonces bajo el nombre de la página en la que estamos, creo que 1.5 ahí. Eso es bueno. Ahora que arreglé mis problemas, voy a echar un vistazo a toda la página web. Así que vamos a hacer click en el logo aquí e ir a la página de inicio. Este encabezado aún, es genial y perfecto. Este héroe de introducción se ve muy bien. Ahora aquí vamos. Aquí es donde esto ha cambiado. Ahora tenemos nuestros propios blogs personales aquí, y puedes tener tus propios blogs personales aquí a lo que se hace es que los haya enumerado en orden de fecha, pesar de que no estamos diciendo qué datos sale, ellos se muestran en orden de fecha. Es decir, si alguien sigue viniendo a tu sitio web cada semana y agregas una nueva entrada de blog cada semana. Esa será la primera que se muestre aquí. En cuanto a usar la barra de navegación aquí arriba, eso cambia entre los mensajes actuales y los más antiguos. Y obviamente tenemos cuatro en total. Ahora. Tenemos Pac-Man, Super Mario, Street Fighter dos y crisis de tiempo, y están en orden de fecha. Otra gran herramienta de navegación para ayudar a los usuarios a buscar a través. Aquí abajo, donde tenemos enlaces a través de esas entradas individuales de blog. Puedes hacer click sobre la imagen y eso te llevará a través también. Puedes hacer click en las categorías para ver solo blogs en esa categoría. Así que vamos a hacer clic en Nintendo. Esto sólo me está mostrando los posts de Nintendo. Sólo he hecho dos de esos, Super Mario tres Street Fighter dos, esos son los únicos que están mostrando, me interesa la década de 1980. Haga clic en eso. Apenas de los años 80 Pac-Man escala Super Mario. Así que volvamos. Entonces esto se ve absolutamente genial. Me encanta en blogs aquí que los mostramos todos de una sola vez. Entonces nuestra imagen de introducción y enlaces a través de la página de contacto y nuestro pie de página. Perfecto, me encanta la forma en que este sitio está buscando ahora. Vayamos al móvil. Pantalla completa. Sí, esto se ve genial. Aquí tenemos la navegación aquí muestra dos entradas de blog a la vez y puedo desplazarse hacia atrás por las más antiguas, terminarlo o blogs. Seguro juega un pinball medio. Cambia hacia abajo a una sola imagen de retratar. Perfecto, pero ese tipo en el medio, Mario, Luigi, Se ve genial ahí ahora. Ponte en contacto. Entonces el pie de página. Vale, eso se ve brillante. Echemos un vistazo a la página del blog. También perfecto. Esta línea ahora sentada debajo de la palabra blog. Aquí están todas nuestras entradas de blog y este texto se ocupa de la cantidad perfecta de espacio. Categoría, título, ejercer, leer más y una imagen cuadrada en su espacio respiratorio arriba y abajo. Esto se ve hermoso. Si hacemos clic en algún blog, puede hacer click sobre la imagen, leer más o el título. Eso te traerá a través esta entrada de blog mostrándote todo el contenido. Entonces si quieres desplazarte hacia atrás y hacia adelante a través de publicaciones antiguas y nuevas, tienes esa navegación al final de cada publicación de blog también. Entonces somos Street Fighter dos. Verás el anterior que fue Super Mario tres después de esa crisis de tiempo. Entonces homepage se ve muy bien. página del blog se ve muy bien. Veamos Acerca de la página. Me encanta esa pequeña animación ahí. Me encantó este fondo, muy sutil, pero un poco de profundidad extra agradable a esta página. Leer más entradas a través de la página del blog. Buenos tiempos. Acabas de ver el pequeño ícono que acaba mostrar en una animacita sutil fresca allí. Eso se ve muy bien. Por lo que última página, contacto, que podemos conseguir a través de hacer click en este botón o hacer click y ponerse en contacto. Ahora somos otra animación de introducción agradable ahí. Ya no hay curvas en esta imagen, sino una página de gran aspecto Contáctenos con una dirección de correo electrónico de llamada a la acción y llevando a la gente a través de nuestras páginas de redes sociales. Ahí vamos. Ahora tenemos un sitio web de aspecto hermoso con una página de inicio animada increíble y fresca con mucha acción, un montón de elementos emocionantes para que la gente haga clic en. Página de blog de aspecto fresco Acerca de la página y la página de contacto. Por eso espero que hayan estado siguiendo muy de cerca todas estas lecciones. Y he pasado por esto paso a paso conmigo. Y ahora tienes tu propio sitio web de aspecto impresionante que o bien se ve exactamente como éste o tu propio sitio web personal, de aspecto increíble. Si sí tienes eso, publica eso aquí en la sección de proyectos. Y me pondré en contacto contigo con mis comentarios al respecto lo antes posible. 13. Extras de Squarespace: Así que por ahora, deberías tener un sitio web de aspecto impresionante con el que estás realmente, muy contento. Seguimos usando la versión de prueba. Entonces nadie más en el mundo puede realmente ver este sitio web, solo tú. Pero si quieres hacerlo vivir para el mundo entero lo vea, muy sencillo. Simplemente haga clic en el botón suscribirse aquí abajo y elija paquete que funcione mejor para usted ya que es solo un sitio web personal, muy pequeño, probablemente este que es el por mes, funcionará para usted. Verás aquí también incluye un dominio personalizado gratuito. Te mostraré lo que eso significa. Entonces cuando entramos aquí y nos vamos a Ajustes, click en dominios que veas aquí que dice cricket jirafa, H4, dn, etcétera. Ese es el nombre de dominio de nuestra página web hasta el momento. Entonces si quieres compartirlo con alguien, estás compartiendo esta URL. Ahora eso no está bien y tiene nada que ver con lo que estamos escribiendo aquí. Pero si te inscribes en Squarespace, puedes elegir tu propio personal, y eso está todo incluido en los cultivos generales. Entonces si hago clic aquí, obtiene un dominio. Tomará primero el título de su sitio web y le mostrará si eso está disponible como nombre de dominio. Desafortunadamente, Gameover.com no está disponible. No soy la primera persona en pensar en eso. Existen diferentes variaciones de las disponibles. Podrías tener juego sobre video o incluso GameOver ninja, pero no quiero eso. Quiero just.com al final porque eso es con lo que somos comunes. Así que intentemos algo más. Tal vez juego sobre log n. Sí, GameOver blog.com que está disponible. Entonces voy a elegir esa. Entonces cuando tienes toda esa configuración, tienes un sitio web en vivo y está usando un nombre de dominio adecuado. Si vuelves a entrar aquí, puedes jugar con todo aquí dentro, como dije antes, solo echa un vistazo a todo, mira qué va a funcionar para ti. En cuanto a marketing, puedes configurar campañas de correo electrónico. Puedes trabajar en SEO, optimización de motores de búsqueda, y puedes promocionar esto en tus propias redes sociales. Entra aquí y puedes hacer algunas historias de Instagram, etcétera. Ahí vas. Ahora tienes un sitio web de aspecto increíble que construiste tú mismo usando tu estilo. Está en vivo, tiene un nombre de dominio. Puedes promocionarlo y puedes construirlo y solo acumular más y más seguidores y convertirte en el sitio web más popular del mundo, o al menos el sitio web más popular del mundo. Eso se trata de juegos retro de 1985 a 95. Saludos. 14. Gracias: Gracias por ver toda esta clase. Espero que eso te haya enseñado mucho sobre diseño de sitios web. Y ahora tienes un sitio web de aspecto impresionante que quieres mostrarme. Wow, si lo haces, publícalo aquí en la sección de proyectos, y te responderé con mis comentarios lo antes posible. Además, si tienes alguna pregunta sobre algo que he cubierto a lo largo de toda la clase publicada aquí en la sección de discusión. Y de nuevo, te responderé lo antes posible . Mientras estás ahí. Asegúrate de hacer click en mi nombre y ver todo mi perfil. Aquí adentro. Encontrarás algunas clases sobre cómo usar el constructor de páginas Elementor con WordPress que puede parecer un poco complejo, pero te hablaré a través de todo lo que necesites saber si estás buscando construir tus habilidades de diseño web. Mira estos. También. Asegúrate de seguirme y luego lo averiguarás cuanto suba una clase nueva. Impresionante, Que tengas un gran día.