Transcripciones
1. Bienvenido a la clase de diseño de sitios web personalizados: de Figma a WordPress con Elementor Pro: Hola a todos. Quiere
aprender a transformar diseño de
Itaninfigma en sitios web de WordPress FixlPerfect completamente funcionales Si alguna vez has
soñado con dominar todo
el proceso de diseño web desde el concepto de inicio
hasta el sitio en vivo, estás en el lugar correcto Esta clase se llama diseño de sitios web
personalizados, Figma WordPress
con Elementor pro Es la
guía definitiva para crear un sitio web personalizado
profesional
que realmente se desprenda. No vamos a hablar
sólo de cosas. Estamos profundizando en el aprendizaje
práctico de la mano. Comenzarás por dominar esencial
del diseño UI UX, entendiendo qué
hace que el sitio web sea
amigable para el usuario y visualmente
cautivador Entonces usaremos Figma para diseñar interfaces de Eine
desde cero Te guiaré
a través
de todo , desde formas básicas y vueltas de auto hasta técnicas avanzadas como bibliotecas de
componentes
y sistema de diseño Entonces tomaremos esos
diseños y los convertiremos sitios web
reales usando Worress
y el enfoque de elementos Aprenderás a crear diseños
receptivos, personalizar cada detalle e incluso optimizar tu sitio para el
rendimiento y el SEO. Si cuento un poco sobre mí, soy Gian Akalanga y soy
el fundador de UX
Alchemy el fundador de UX
Alchemy Entonces mi pasión es compartir mis conocimientos y
experiencia con los demás. Por eso creo esta clase. Entonces en esta clase, cubriremos todo, desde recopilar inspiración de diseño aplicar
diseño concepto de diseño centrado en el
usuario, diseño de sitios web
fácil de usar, usando Figma. Entonces cubriremos la
configuración de su alojamiento y dominio para instalar
WordPress y elemento de Pro, todo el camino para lanzar
en su sitio en vivo. Aprenderás a
crearlo en secciones de héroe, diseñar, participar en páginas. Incluso un conjunto de funciones avanzadas
como pop ups y análisis. Si eres un principiante
completo o un diseñador experimentado que busca
expandir tus habilidades, esta clase está diseñada
para llevarte 0-0 Ganarás la confianza
y la experiencia para crear sitios web
profesionales
que impresionen a los clientes y eleven
tu perfil. Al final de esto,
podrás crear un impresionante diseño
de
interfaz de usuario en Figma. Construye un poderoso sitio web personalizado de
WordPress con elemento pro, domine el diseño
y la optimización receptivos, implemente las mejores prácticas
y análisis de SEO y, lo
más importante, convierta su
visión de diseño en realidad. Si quieres aprender a hacer uso de sitios web
personalizados enfocados, esta clase es para ti. Te voy a ver dentro de la clase.
2. Por qué las plantillas de sitios web genéricas no funcionan: Primero hablemos de por qué usar la misma
plantilla de sitio web antigua es una mala idea. Probablemente te vean un montón de sitios web que se ven
realmente similares. Son como casas
cortadoras de galletas, todas de la misma forma,
solo colores diferentes. Esos sitios web genéricos son un
gran problema para las empresas. Imagínese un mercado abarrotado donde todos digan
lo mismo en un mismo paquete. ¿Cómo se destaca? Eso es lo que enfrentan las empresas
con esos sitios web genéricos. Esos sitios web no cuentan historia de
una empresa
ni los hacen especiales. Pueden verse bonitas, pero en realidad no funcionan bien para las personas que usan el sitio. Además, no ayudan a las empresas
a conseguir nuevos clientes. Un buen sitio web es una
herramienta poderosa para atraer personas. Haz que compren cosas. Es más que un simple folleto en línea
elegante. Es la cara de la empresa. Necesitamos enfocarnos en las
personas que usan el sitio web. Están buscando
respuestas y soluciones, debemos diseñar un sitio web que les
ayude a encontrar rápidamente lo
que necesitan. Los sitios web personalizados son
como trajes a medida. Encajan perfectamente. Podemos hacer que se vean bien, funcionen perfectamente y ayudar a
las empresas a ganar más dinero. Recuerda, cada
negocio es diferente. Sus sitios web deben ser para usar la misma plantilla de
sitio web antigua. Ya no lo cortaré. Necesitamos crear sitios web que sean especiales y que realmente
funcionen para las personas. Eso es lo que vamos a estar aprendiendo más sobre
la siguiente lección.
3. Qué es UI/UX y cómo podemos aplicarlo al diseño de sitios web: Aprendamos algo realmente importante en el diseño web
personalizado. UI y UX. Entonces, ¿qué es la interfaz de usuario? Soporte de interfaz de usuario para interfaz de usuario. Es como la cara del sitio web de U. Es todo lo que un usuario
ve e interactúa con él. Esto incluye botones, texto, imágenes, colores y
cómo se organizan. Una buena interfaz de usuario es
fácil de entender usada. Entonces, ¿qué es UX? UX significa experiencia de usuario. Se trata de cómo se siente un usuario
cuando usa tu sitio web. Se trata de
todo el viaje desde encontrar tu sitio web
hasta completar una tarea. Un buen UX hace que los usuarios sean
hfi y satisfechos. UI y UX son como dos
caras de una misma moneda. Puedes tener un sitio web
hermoso, pero si es difícil de usar, a gente no le gustará. Es buena UI y mala UX y puedes tener un sitio web
que sea fácil de usar, pero si se ve feo, gente no querrá usarlo. Es como una buena experiencia de usuario con mala interfaz de usuario. ¿Cómo usamos UI y UX
cuando diseñamos sitios web? La creación de un
sitio web exitoso comienza con un profundo conocimiento
de sus usuarios. Debemos identificar para
quiénes estamos diseñados para cuáles son sus
necesidades y objetivos específicos. Al simplificar el diseño y garantizar que sea
fácil de navegar, podemos crear una experiencia de
usuario positiva Las pruebas regulares con
usuarios reales nos ayudan a identificar áreas de mejora y
refinar nuestro diseño en consecuencia. En última instancia, nuestro enfoque
siempre debe estar en satisfacer las necesidades
y deseos del usuario y al
mismo tiempo crear un sitio web de
aplicación visual. interfaz de usuario y la experiencia de usuario son muy importantes para crear sitios web
exitosos. Al comprender y
aplicar esos conceptos, puedes diseñar un sitio web
que a la gente le encanta usar.
4. Qué es la herramienta de diseño de Figma: Antes de aprender sobre diseños centrados en el
usuario y los principios
avanzados de UX, debemos comenzar con lo básico. Vamos a sumergirnos en el
diseño de la interfaz de usuario del sitio web mientras aprendemos UX. Primero, necesitamos sentirnos cómodos
con la herramienta de diseño, por lo que usaremos Figma. FIGMA es una fantástica herramienta de
diseño de interfaz que nos
ayudará a diseñar UI de sitio web
que nos gusta diseñar Comenzaremos con
los conceptos básicos de Figma, donde
aprenderemos a navegar por la interfaz y
crear diseños simples A medida que avanzamos, exploraremos las funciones más avanzadas como crear prototipos
interactivos, colaborar con los miembros del equipo, usar componentes para mantener
nuestro diseño consistente Al final, tendrás una
sólida comprensión de cómo
usar Figma para crear se realiza en diseño de
sitios web de
principio a fin.
5. Pros y contras de Figma y alternativas: FIGMA es una herramienta de diseño de
interfaz ampliamente utilizada y viene con una gama de pros y contras que vale la
pena considerar Una de las mayores ventajas de FIGMA es su naturaleza
colaborativa Debido a que se basa en la nube, varios miembros del equipo pueden trabajar en el
mismo proyecto al mismo tiempo. Eso es hacerlo en tiempo real, la colaboración es
fluida y eficiente. FIGMA también tiene una interfaz
intuitiva
que es fácil de recoger
para los principiantes pero
lo suficientemente potente para los usuarios avanzados Sus componentes de diseño
y estilos reutilizables ayudan a mantener los proyectos organizados y consistentes ahorrando
tiempo a largo plazo. Adicionalmente, FICMA
es accesible desde cualquier dispositivo con conexión
a Internet Para que puedas trabajar en tu
diseño estés donde estés sin embargo, FIMA no está exento
de desventajas Dado que se basa en una conexión
a Internet consistente, puede ser problemático si estás trabajando en un área con
mala conectividad. Si bien FICMA ofrece un plan gratuito, algunas de sus funciones más
avanzadas están bloqueadas detrás de una suscripción
paga, lo que podría ser una limitación para equipos
similares o diseñador
individual adicionalmente, mientras que naturaleza basada en la nube de
Figma es una fortaleza, también puede ser un inconveniente
si prefiere trabajar o volar o necesita más control sobre
dónde se almacenan sus archivos Sin embargo, Adobe XD es
una alternativa a FIGMA ofreciendo su propio conjunto
de fortalezas y debilidades Para el propósito
de esas lecciones, utilizaremos FGMA para
guiar nuestro viaje de aprendizaje Al comprender
tanto los pros como los contras, puede tomar una decisión
informada sobre la herramienta que
mejor se adapte a sus necesidades. Ahora sigamos adelante y
comencemos a explorar lo que el
FICMA puede hacer por nosotros.
6. Crea una cuenta de Figma: Hola a todos. Es momento de
crear una cuenta Figma Si ya tienes
una cuenta Figma, puedes saltarte esta lección Si no solo vas a Google
o das clic en la tinta
en la sección Recursos. Si vas a Google,
busca en Figma, entonces verás
este tipo de resultados, simplemente haz clic en el primer resultado Ahora estoy en la landing page de
Figma. Si ya tienes cuenta, puedes hacer clic en Iniciar sesión. Si no, da clic en este
botón, empieza gratis y aquí,
haz clic en continuar con Google para registrarte con
tu cuenta de Gmail. Bien. Ahora voy a hacer clic en mi cuenta de
Gmail y dar clic en. Continuar. Bien. Ahora solo me inscribo y tenemos
algunos detalles que llenar. Primero aquí,
tenemos que agregar nuestro nombre, así que agregaré mi nombre, luego dar clic en Continuar. Entonces tengo que seleccionar ¿Qué
tipo de trabajo realiza? Aquí, seleccionaré
diseño y luego haré clic en Continuar. Entonces dice, haz alguno de
esos que describa tu trabajo. Aquí,
seleccionaré respuesta gratuita y tú seleccionas de acuerdo
a tu posición, luego hago clic en Continuar. Entonces tenemos otra
pregunta como, ¿con
quién
colaboras habitualmente? Aquí, seleccionaré como nadie solo yo y haré
clic en Continuar, entonces no quiero invitar
a nadie. Me saltaré esta
parte y aquí, seleccionaré otra, luego haga clic en
Continuar y aquí, ¿
ha usado el
producto IgM antes, agregaré muchas veces Si no estás
familiarizado con WIC MA, simplemente haz clic en No y
haz clic en Continuar Después seleccionaré
este paquete de inicio. En futuras lecciones,
explicaré los beneficios de
la
suscripción paga de Figma. Sin embargo, podemos seguir todas esas lecciones con
el paquete gratuito. Doy click en Continuar y aquí, voy a dar click en Eskepo ahora
aquí está el tablero de Figma. Todos nuestros proyectos
se cargarán aquí. Como primer paso, vamos a crear un nuevo archivo
Figma para hacer eso,
hago clic en este nuevo archivo de diseño Bien, aquí está la interfaz
Figma. En primer lugar, voy a
renombrar este archivo Figma. Vamos a renombrarlo como
mi primer proyecto. Entrar. Ahora en la siguiente lección, familiaricemos con
todos esos paneles e intentemos crear nuestro primer
marco o nuestro primer diseño. S en el siguiente
7. Qué es Figma UI3: Hola a todos. Figma
presentó su nuevo árbol UI Vamos a estar familiarizados con Figma
UI two y Figma UI tree. Entonces, como primer paso, vamos a crear un nuevo
diseño para hacer eso, hago clic en este botón azul
y hago clic en Archivo de diseño. Bien. Aquí está la vista previa
de UI two editor. Si ves a este editor, es posible
que no tengas acceso a
la UI tres porque UI tres solo se otorga para
personas que están en su lista de espera. Si haces clic en este botón de ayuda
y recursos, puedes ver este enlace, conocer UI tres
más AIX y aquí, puedes ver más detalles Sin embargo, si
otorgaste para UI tres, la UI se verá así. Primero voy a la Figma y
vamos a crear un nuevo archivo. Simplemente hago clic en este
nuevo diseño aquí. Me quedaré así
y en la siguiente lección, pasaremos por elementos en el editor Figma con la UI dos Si ya tienes
esta vista previa y
quieres cambiar a la
antigua vista previa de UI two, puedes hacer click en esta ayuda y recursos y dar click en esta, volver a la interfaz de usuario anterior. Y puede hacer clic aquí y clic en usar Nueva interfaz de usuario para
cambiar a la interfaz de usuario tres. A continuación algunas lecciones,
tendrás que
completar con la
interfaz de usuario Figma dos y después de eso, te
mostraré cómo obtener UI tres aunque no
estés seleccionado Entonces, si no estás familiarizado con FIGMA y si
tienes UI Preview, tendrás que dar click aquí y dar
click en volver a la interfaz de usuario
anterior dos, completar las siguientes lecciones
8. Tutorial de Figma UI2: Lección anterior, creamos
nuestra cuenta Figma y ahora estoy en el tablero de Figma para
venir al tablero de Figma,
puedes atar figma.com e Aquí está el primer proyecto que creamos en nuestra última lección. Conozcamos la herramienta de diseño
Figma
y descubramos qué tipo de artículos o qué tipo de características
podemos usar en Figma Para ello, voy a nuestro primer proyecto,
doble clic en él. Bien, ahora estoy en
nuestro proyecto Figma. Y en esta zona, le
llamamos lienzo. Aquí está el área que utilizamos para diseñar nuestro sitio web y
en esta barra superior negra, podemos encontrar artículos o
herramientas que podamos usar. Aquí, tenemos marcos. Los marcos son las capas que
se utilizaron para diseñar nuestro sitio web. Como primer paso, basta con crear un marco, clic en el marco y dar
clic en nuestro lienzo y veremos este tipo
de marco y aquí, podemos renombrar nuestro
marco para hacerlo, hacer clic en él o hacer doble clic en el nombre del marco y renombrar
como mi primer fotograma. Entonces en nuestra barra lateral izquierda, podemos ver muchas de nuestras capas. Actualmente solo tenemos un marco y en nuestra barra lateral derecha, tenemos las propiedades
de este marco. Como ejemplo, si
queremos cambiar el
tamaño de este marco,
tenemos ancho y alto, tenemos ancho y alto, así que cambiemos el ancho como
1,400 y presionemos Enter Entonces cambiemos la altura como 700. Bien. Ahora presiono comando y rueda del ratón para acercar y
alejar el marco. Entonces aquí está el primer fotograma. A, podemos crear tantos
como marco en este lienzo. Presionaré Cramand y rueda de
desplazamiento hacia arriba para
minimizar nuestro lienzo Después también hago clic en este marco. Después de hacer clic en el marco, puedo ver en nuestra opción de marco de barra
lateral derecha. Entonces esos son marcos predefinidos. Como ejemplo, en este caso, vamos a crear un diseño de
sitio web para Desktop. Hagamos clic en este
Escritorio y aquí
tenemos tamaños construidos gratis para lo siento, tamaños marco
preconstruidos para escritorio
. Doy click en este escritorio. Y aquí tenemos el marco de tamaño de
escritorio, el ancho será de 1,440 y la altura podemos ajustar de
acuerdo a la altura del sitio web Cambiemos el nombre de esto como nuestro mi
segundo fotograma y presionemos Enter. Ahora, también hago clic en el marco
y veamos vamos a crear versión de sitio web móvil para hacer eso hago clic en el
teléfono y aquí, tenemos tamaños de teléfono. Seleccionaré iPhone 40 y 50 pro y aquí está
el tamaño del marco del iPhone. Presionemos Comando
o Control en Windows y desplázate hacia arriba hasta Zumi un
poco así Aquí está la manera
de crear marcos. También cuando hacemos clic en el
marco en nuestra barra lateral derecha, tendremos las opciones que
podemos usar en nuestro marco. A modo de ejemplo, si queremos
cambiar el color del campo, podemos dar click sobre este color de campo y
cambiarlo como queramos,
Bien, presionaré Control set to command set to command set
para deshacer el cambio. Bien. Ahora ya conoces a Earl y luego
tenemos la herramienta de formas En esta herramienta de forma, tenemos diferente tipo de forma, clic en la
herramienta de forma o damos clic en este pequeño icono hacia abajo y damos
clic en Cuña roja. Entonces si llegamos a este
marco y damos click sobre él, crearemos este tipo
de forma rectangular. En nuestra opción Layout
o embudo de capas, podemos ver el marco
y dentro del marco, tenemos la forma rectangular. Por ahora, voy a quitar
este primer marco y marco
móvil y
será más fácil de entender, ahora hago clic en este
rectángulo y aquí, podemos cambiar el color del campo. Cambiémoslo así. Hagámoslo de color verde. Bien. Ahora puedo cambiar
el tamaño como quiera. Hagámoslo 150 por 150. Simplemente haga clic en la
W y presione 150. Después haga clic en la tapa
para ir a los valores de altura. Hagámoslo 160. Bien. Ahora si vamos a formas, también
podemos crear
líneas como esta. Si queremos crear vamos a
crear una línea como esta. Si queremos crear una línea
exactamente horizontal, simplemente descanse en shift y su rotación o
ángulo será cero. Y aquí dentro, podemos cambiar
el ángulo así también. Bien. Ahora en Etroke
podemos cambiar el color del trazo E e
incrementar el Esta es una herramienta de diseño y
podemos hacer cualquier tipo de diseño con esta herramienta y
crear un diseño de sitio web impresionante. Además, tenemos elipse de flechas, podemos crear esas
elipse así Cambiemos el color de relleno para
cambiemos este color verde. Bien y resalte l de ellos, y luego podemos
cambiar la alineación. En este caso, si hacemos clic
en Alinear centro vertical, l serán centros alineados. Además, si hacemos clic en
este pequeño icono de flecha y hacemos clic en distribuir
horizontal está mareando por ahora, no pasó nada, pero hagamos este círculo aquí Entonces vamos a presionar sobre la
distribución horizontal es el ritmo. Vamos, no funciona. Por ahora, solo eliminemos
esta línea y presionemos Alt y haga clic derecho y arrastre así para duplicar este rectángulo sonó,
luego haga clic en MTol, haga
clic en la herramienta M y
resalte
esto luego haga clic en MTol, clic en la herramienta M y
resalte Después haga clic en
distribuir
espaciado horizontal I y Earl
estará igualmente alineado Entonces podemos crear
o podemos imágenes. Para agregar imágenes, podemos dar click en este icono de herramientas de forma y dar
click en esta imagen de lugar, luego iré a
la carpeta set, luego haga clic en abrir y luego podremos dar click en
nuestro marco así, luego podremos cambiar el
tamaño de este marco. Para cambiarlo sin
dañar la imagen, si solo la cambiamos, dañará el tamaño o no
se mostrará correctamente. Para evitarlo, podemos presionar
shift y ajustarlo así. Bien ahora siguiente tenemos la herramienta Pluma, pluma y lápiz herramienta. Usando la herramienta pluma, podemos crear formas como esta
y hacer clic en listo. Entonces tenemos T o texto, da clic en el texto
y da click así. Hagamos el texto como
Hola, así hola mundo. Después hago clic en el marco
y doy clic en el texto. Entonces tenemos propiedades
de este texto. Aquí, tenemos fuentes de Google. Hagamos la
fuente a cuatro pines. La familia de fuentes será de
cuatro pines y el tamaño
será semibold y también
aumentaré el tamaño de la fuente Vamos a engrasar como 60 presentador. Aquí está la fuente
y en color de campo, podemos cambiar el color de la fuente también hay muchas
propiedades con las que jugar. Solo juega alrededor de él por ahora, agreguemos el efecto a
este texto para hacer eso hago clic en efecto y hagamos
clic en sombra paralela, y aquí dentro, hagamos como
20 X como cero e Y como cero. Entonces aumentemos la
opacidad al 80% y si queremos, podemos cambiar el color de
fondo así Hay muchas
propiedades con las que jugar. Esta es la forma de crear texto. También tenemos plug
in y
biblioteca de componentes Figma y
en futuras lecciones, las
aprenderemos todas. También cuando seleccionamos
en los elementos, seleccionamos en los elementos, tendremos este tipo
de propiedades para crear componentes y seleccionar
capas de máquina y cosas así. En futuras lecciones, vamos a
aprender todo sobre esto por ahora, voy a quitar este arte del lápiz
y vamos a quitar este, y vamos a aumentar este
tamaño de imagen a lleno así. También tenemos dos rectángulos. Selecciónelo y presione Mayús y seleccione el segundo rectángulo. De esa manera, podemos
seleccionar ambos de esos rectángulos la prensa eliminar
para eliminarlos. Bien. Ahora aquí, podemos compartir
este marco o compartir todo
este proyecto
con los miembros de nuestro equipo, dar clic en este
enlace de copia y cualquiera puede acceder a este
proyecto Figma con ese enlace Entonces podremos verificar el real haciendo clic en
este botón de presente. Hagamos click en él, y aquí está nuestro sitio web. O aquí está nuestro marco que
se verá en la vista real. Además, hay un
montón de características. A modo de ejemplo, si seleccionamos el fotograma o seleccionamos la
imagen en el lado derecho, tenemos sección prototipo. Esta sección de prototipo
o pestaña de prototipo es para hacer interacción
nuestro sitio web. Como ejemplo, si hacemos
clic en un botón, nuestro sitio web o nuestra página web redireccionará a otra página esa interacción que podemos hacer con la pestaña prototipo y
en el lado izquierdo, tendremos pestaña Assert en
pestaña Assert Podemos obtener los diseños preconstruidos. Podemos crear nuestro propio diseño o nuestros propios elementos de diseño y
usarlos a través del AssistAB También podemos crear más páginas. La página actual es la página uno, hagámosla como home y si hacemos clic en
este ícono más, podemos crear una nueva
página como esta. Esos son los conceptos básicos y
tenemos más herramientas para explorar, más características para explorar. Hagámoslos mientras
tratamos de
aprender a diseñar la interfaz de usuario
para nuestro sitio web.
9. Aprende el diseño de cuadrícula de Figma: Hola a todos.
La alineación es crucial en el diseño de UX porque crea un sentido de orden y equilibrio
en la página. Cuando los elementos están
correctamente alineados, guían a los usuarios sin problemas
a través del contenido, facilitando la
lectura que la comprensión. Una buena alineación ayuda a los usuarios a
enfocarse en la parte importante
del diseño y ayuda a reducir la
confusión que conduce a una mejor experiencia general
del usuario. También hace que el sitio web se vea más profesional
y pulido, lo que genera confianza
con la audiencia. Siéntase libre de
analizar cuidadosamente los siguientes diseños. Todos esos diseños
tienen alineación correcta y alineación
incorrectamente diseñada. Solo comprueba la diferencia
entre esas dos versiones. Cuando creamos diseños personalizados, alinear objetos son un poco
confusos y un poco complicado. Pero en Figma,
tenemos cuadrícula de diseño. Así que veamos cómo podemos usar la cuadrícula de diseño para
alinear nuestro diseño. Estoy en el tablero de Figma, luego hago clic en
mi primer proyecto Ya no necesitamos este mi
segundo marco ni ningún marco. Simplemente borro el lienzo, luego hago clic en marco. Vamos a crear un marco de
versión de escritorio. Haga clic en el marco de aquí, haga clic en el escritorio y luego vamos a crear la versión
de marco de tableta. Haga clic en el marco,
expanda la tableta, y seleccionaré el
tamaño de la tableta como iPad Pro de 11 pulgadas. Bien. Ahora tendremos que
crear la versión móvil. Da click en el teléfono y
seleccionemos iPhone 14 y 15 pro. Todo bien. Ahora aquí
tenemos tres pranes Primero agreguemos la cuadrícula de diseño
a esta versión de escritorio. Cuando hago clic en el marco de la versión de
escritorio, en mi lado derecho, puedo ver las propiedades
de este marco. Aquí, tenemos la cuadrícula de diseño. Así que simplemente hago clic en
este icono más. Cuando haga clic en este ícono más, aumentemos el tamaño del
diseño así. Bien. Bien. aplique o cuando agrego una
cuadrícula de diseño a este marco, se verá así. Ahora hago clic en la
cuadrícula de diseño que agregamos para obtener la
configuración de la cuadrícula de diseño. Actualmente, nuestro tipo de
cuadrícula es grid, pero necesitamos tipo de columna, cuadrícula de diseño porque alineamos
nuestros elementos de izquierda a derecha. Cuando lo alineamos
horizontalmente así, tenemos que conseguir la alineación correctamente en
el lado izquierdo y derecho, alineación entre los elementos. Aquí, tenemos que
añadir el recuento de columnas. Voy a agregar el conteo de columnas como peaje. Ahora tenemos columna de rejilla de peaje, y voy a mantener el
color como el mismo. Entonces el tipo será
stretch y aquí, tenemos que agregar margen
entre izquierda y derecha. Margen significa espacio entre el lado
izquierdo de nuestro elemento. A modo de ejemplo, si
dijéramos marginus 140, esta cuadrícula se ajustará
dándonos margen o dándonos un espacio de izquierda a primer elemento y de
derecha a último elemento Entonces espero que lo entiendas. Entonces ahora cuando
añadimos objetos, podemos agregarlos correctamente
marcando esta columna. Entonces tendremos que agregar canalón. En la versión de escritorio,
agreguemos canalón como 20. Si cambiamos esta canaleta a diez, el espacio será delgado En realidad, vamos a
agregarlo como 15, así. Ahora cuando agreguemos
elementos como este, agreguemos el
rectángulo y vamos duplicarlo presionando
comando en Mac y así, cuando ponemos esos elementos, solo
podemos aumentar el tamaño del fotograma y verificar
la alineación así. Podemos alinearlo
perfectamente así. También cuando destaco
o cuando
selecciono objeto o elemento luego presiono y
sobre otro elemento. Podemos comprobar el espacio I
entre esos dos elementos. Actualmente 815 y
agreguemos estos dos así. Perfecto. Este es el beneficio
de usar el diseño de cuadrícula. Y si queremos verificar el
diseño sin disposición de cuadrícula, podemos dar click en el
marco y dar click en este icono I y
la cuadrícula será de. Bien. Ahora agreguemos grid
a esta versión tablet. Para ello, haga clic en el marco del tamaño de la tableta y
haga clic en GritayOutPlus, luego
puedo cambiarlo de
versión Después en tableta, usaré
siete como recuento de columnas. Entonces el margen será de 60. Entonces Gutter serán diez. En realidad, agreguemos el
conteo de columnas seis es mejor. Entonces igual que el escritorio, podemos usar esta cuadrícula para
verificar la alineación de esta manera. Esta es la tarta bene. Bien. Ahora vamos
al teléfono por teléfono. Hagamos clic en la
cuadrícula de diseño y haga clic aquí, luego cambiemos el tipo de cuadrícula a columna, y aquí,
agregaré la sincronización de recuentos de cuadrícula, luego Gutter será diez
luego el margen será 20 En realidad, agreguemos
margen como 12 así. Ahora podemos agregar retrangle como
esto de acuerdo a esta grilla. Este es el beneficio de
tener un diseño de cuadrícula. En el siguiente video, hablaremos
sobre la comunidad Figma.
10. Qué es la comunidad de Figma: Hola a todos. Sabías que Figma tiene una comunidad en línea La comunidad en línea de Figma es un poderoso recurso
que puede ayudarte a aprender, crecer y conectarte
con otros diseñadores Es como un gran mercado
en línea. En la comunidad Figma, los diseñadores pueden compartir sus
ideas y recursos Es un lugar donde puedes encontrar archivos de diseño gratuitos y falsos, plugins e incluso tutoriales. En futuras lecciones,
hablaremos específicamente de los archivos Figma Y en esta lección, profundicemos en la
comunidad Figma y
descubramos qué tipo de
materiales de diseño podemos encontrar Para ello, voy a la Comunidad
Figma. Voy a Google y busco Figma Community y
en primer resultado, tenemos esta URL del sitio web de la
comunidad Figma slash, luego hago clic en él y ahora
estoy en Hay muchas cosas que explorar en esta comunidad
Figma Los diseñadores de Figma como tú agregan recursos a la
comunidad FIGMA diariamente Entonces, por ahora, busquemos
algunos diseños web. Así que solo buscaré presentador de ideas de diseño
web
Aquí tenemos ideas de diseño web Así que aquí, tienen
archivo y plantilla, plug-ins, widgets y creadores. Para este resultado, tenemos archivo
y plantillas y plugins. Así que vamos a ordenar
archivo y plantillas, y aquí tenemos idea, diseño
web, madera. Así que vamos a comprobarlo. Y aquí tenemos archivos de temas de
comercio electrónico. Voy a abrir eso también, y aquí tenemos una interfaz de usuario, así que es una interfaz de usuario agradable. Así que simplemente haz clic en él y
veamos qué podemos encontrar aquí. Tenemos la descripción. Como tenemos el diseño. Vamos a aumentarlo y
haciendo clic aquí, podemos cambiar de página. Vamos a cambiar por diseñarlo, y aquí tenemos el diseño. Aquí está el diseño del sitio web de Nike. Creo que es un diseño de
inspiración, así que es un diseño limpio. Entonces, al revisar esos artículos, podemos diseñar ideas y
vamos a Idea web design. Aquí tenemos un diseño
web sencillo y es solo una imagen con texto
y pasemos a la siguiente. Aquí tenemos
plantilla de comercio electrónico o tema de comercio electrónico. Comprobemos esta web lpa. Aquí tenemos diseño
para sitio web de comercio electrónico. Cree que está creando una marca de comercio electrónico o un sitio web de
comercio electrónico, solo
puede verificar
que esos diseños obtengan inspiración de
diseño u obtener parte de
diseño de
este archivo Figma Para ello, sólo tenemos que
dar click en Abrir en Figma y después este archivo se abrirá
en nuestro panel de Figma,
y en las páginas, vamos a ir a webvlpa aquí tenemos Entonces, por ahora, solo vamos a revisar esos artículos y al final de
esta sección de Figma, podrás diseñar
este tipo de diseño Figma, Figma Comprobemos el alfa móvil y aquí tenemos la versión móvil. No te preocupes si crees que no sabes cómo
crear esos diseños. En pocas lecciones,
podrás y
aprenderás a crear
ese tipo de diseños. Ahora cuando creamos diseños o
cuando creamos nuestro sitio web, debemos iconos,
debemos usar íconos. Si buscamos en los iconos de
Figma y damos clic
en prsiconopres Enter, podremos obtener bibliotecas de iconos como esta Como ejemplo, tenemos
conjunto de iconos meteorológicos y busquemos
como icono de negocios. Aquí tenemos iconos
de línea de negocios. Simplemente voy a hacer clic en y
este es un archivo de diseño, y aquí está el conjunto de iconos de
negocios. Así que sólo podemos
comprobar esos iconos, y si nos gusta, vamos a comprobar todos los iconos vectoriales. Bien, aquí está la biblioteca de iconos, y si quieres
agregar este tipo de iconos
a tus proyectos, puedes abrir esto en Figma
y obtener esos íconos Pero en el futuro, te voy a
mostrar cómo hacer esto. Y además, tengo un perfil de
comunidad Figma. Déjame compartirlo con Bien, aquí está mi perfil de
comunidad Figma Comprobemos esto
BNTsGameMP y este es un modelo de interfaz de usuario de aplicación que creo Intentemos abrirla y a ver lo poderosa que es la Figma Doy click en abrir Figma. En realidad, este UIKit es
realmente básico y cuando creo este UIk no
sabía mucho Entonces, en la siguiente lección, usaremos la comunidad Figma y otras cosas que
aprendimos hasta ahora y
crearemos secciones de héroes y nos meteremos en el diseño de la interfaz de usuario de
Figma
11. Diseña la primera sección de héroe con Figma UI2: Intentemos crear
nuestro primer diseño web. Así que revisa la URL o archivo de
comunidad en
la descripción o en la sección de recursos, verás la URL. Cuando hagas clic en conectar, irás a este perfil de la comunidad
Figma Entonces vamos a diseñar
estas dos secciones de héroes. Entonces esto nos ayudará a entender más
sobre la herramienta Figma y las cosas básicas mientras
creamos esas dos sidras
o esas dos secciones de héroes Ya nos enteramos de la comunidad
Figma. Ahora, basta con hacer clic en el botón Abrir en Figma para abrir
la vista editable Bien. Aquí tenemos secciones de
héroes ,
primero, intentemos
crear esta. Voy a alejar el zoom y
pongámoslo así y acercarme Bien, bonito, antes que nada, tenemos que crear este marco. Si hago clic en esta muestra de
héroe uno, aquí está el marco, intentemos crearlo. Voy a este icono de marco y luego podemos seleccionar
el tipo de dispositivo. Esta es una sección héroe
tipo escritorio. Hago clic en destop y selecciono el tamaño como escritorio
bien, bonito Ahora voy a cambiar el nombre de esto a 01. Bien. Ahora la altura es 1024. Vamos a la altura de este. Son 700. Cambiemos
esta altura a 700. Pizarra el marco y
establece el tamaño en 700, luego tenemos que agregar ancho de
diseño porque
sin ancho de diseño, no
podemos alinear nuestro
diseño correctamente. Entonces para hacer eso, hago clic en cuadrícula de diseño
y hago clic aquí, luego cambio la
cuadrícula de diseño a columnas, y el recuento de columnas será de dos
L y el margen será de 140. El canalón es de 20. Bien. Además, FICMA tiene una función para guardar nuestro Istis como ejemplo, queremos guardar este diseño de cuadrícula de
columnas Podemos dar click sobre este ícono de Estes y
aquí tenemos el ícono más Simplemente hago clic en él y aquí dentro, podemos agregar el nombre. Voy a agregar a la grilla de llamadas, luego hago clic en estilo creativo. Ahora bien, si queremos agregar el diseño de la cuadrícula de
columna de peaje a nuestro siguiente marco, solo
podemos seleccionar
el guardado esta vez. Vamos a hacer clic en este diseño de cuadrícula y vamos a crear un nuevo
escritorio de diseño de tamaño. Así, es un marco, escritorio de tamaño marco entonces si voy al layout git y hago
clic en este icono, tendré este estilo de
diseño de grano así, puedo agregarlo fácilmente Todo bien. Ahora lo voy a quitar. Como siguiente paso, tenemos que agregar esta
imagen de fondo para agregarla primero, voy a crear un
rectángulo y hagamos este rectángulo igual que
nuestro tamaño de marco así. Ahora da click en esta herramienta de
rectángulo o forma, y aquí tenemos la opción
Colocar Imagen. Simplemente hago clic en él, y ahora vamos a ir a nuestra imagen. Entonces está en el documento. Aquí está la imagen. Simplemente hago clic en él
y puedes obtener este archivo de recurso de imagen en la sección de recursos
y hago clic en Abrir. Ahora hago clic así. Bien, la primera
parte está terminada. Ahora tenemos que superponer
color para agregar color de superposición, seleccionar esta imagen y
aquí, tenemos relleno,
solo da clic en este icono más y
ahora tenemos una capa de color. Aquí, hago clic en nuestro color como oscuro y aquí tenemos
la transparencia. Voy a hacer
transparencia como 80. Bien, se ve bien,
pero podemos
hacerlo como 70 70 es mejor. Ahora se agrega la imagen, y ahora tenemos que agregar este logo y la
sección Mus para hacer eso, primero, vamos a crear un texto. Haga clic en este texto
y haga clic aquí. Entonces cambiaré
este texto como logo. Averiguemos la propiedad como tamaño de
fuente fontan cosas como de este logo para hacer eso en Mac, presiono comando y
hago clic en este texto de logotipo cuando
hago clic en Comando Nos ayuda directamente a seleccionar
el artículo que queremos. En ventanas,
debe ser control. Bien. Ahora, en nuestro lado izquierdo, tenemos los detalles. La fuente es ferroviaria
y el peso de la fuente es semivol y el tamaño de la fuente es 35 Entonces agreguemos esos detalles. Doy click en nuestra fuente y
cambio esta fuente a rail y el ancho de la fuente será
semibol y el tamaño de fuente es 35 Bonito. Voy a aumentar
este bit de diseño, por lo que nos ayudará a
verificar fácilmente el diseño así. Ahora me muevo aquí este texto. Entonces vayamos a nuestro diseño
original y seleccionemos el texto presionando
comando o en Windows, debe ser controlado. Entonces entonces presiono Alt y
verifico el tamaño entre la
barra superior y el lado izquierdo. Los tamaños no son correctos, pero en nuestro diseño original, hagamos talla como 14020 Bien, se ve bien. Ahora lo que tenemos que crear
es este menú para hacer eso, nuevamente, dar click sobre este texto o simplemente
podemos duplicar este
texto pulsando todo. Pulsa todo y haz clic en el ratón
y arrástralo así. Bien. Ahora tendremos que
encontrar los detalles del texto. Vamos a hacer clic en este texto
y el color del texto es blanco y la fuente del texto es semibol
abierto 18 y
la altura de la línea es 31 Agreguemos esa información. Simplemente haga clic en nuestro
texto y el texto está abierto 18 semibold y
la altura de línea 31 31 Todo bien. Ahora, cambiemos este texto home y el texto está en upper guess para
hacer este gas superior, hago clic aquí y cambio
mayúsculas a mayúsculas así. Todo bien. Veo que aprendes mucho sobre la herramienta Figma
creando este diseño Ahora lo presiono y duplico así y
vamos a duplicarlo por una, dos, tres, cuatro, cinco,
tres veces más. 12, tres. Todo bien. Ahora cambiemos esas tomas. Siguiente toma esto sobre nosotros. Bien. El siguiente es cómo
funciona así. Entonces el siguiente son nuestros entrenadores. Bien. Ahora el siguiente
es el contacto. Todo bien. Ahora, lo que tenemos que hacer es poner este contacto en la esquina lateral
derecha. Aquí está nuestro diseño de cuadrícula, y ahora tenemos que
encontrar el lugar donde debería quedarse este
ícono del menú de inicio. Según esto, está
aquí y vamos a agregarlo aquí. Para ello, sólo voy a
arrastrar y ponerlo así y pongamos todo
este menú así. Ahora, antes de arreglar
las alineaciones, voy a dar click en esta casa y cambiarlo de color
a este color rojo Entonces averiguaremos
el código de color rojo. Simplemente da clic en esta casa, y aquí tenemos código de color rojo. Yo solo intento copiar
presionando Comando C, y vamos a venir aquí,
resaltar esta toma, B presionando Comando A para
resaltarlo e ir
al color del campo
y presionar Comando V al color rojo así. Bien. Ahora es el momento
de fijar la alineación. Este texto se encuentra en
medio de esta barra. Pongamos esta casa como
la mitad de este bar así. Ahora presionaré shift y seleccionaré cinco
elementos del menú como este. Entonces aquí, tenemos herramientas de
alineación,
pulsamos en alinear
centro vertical, y aquí, podemos dar click en distribuir horizontal
I phasing. Todo bien. Ahora vamos a J espaciado o relleno entre la
parte superior y el elemento del menú, deberían
ser sus dos t. Nuevamente, resalte esos
resalten OselTel de esos textos pulsando en y ahora presiono Alt y hago clic en la
tecla superior del teclado así Bien. Ahora lo que puedo hacer es hacer esto como grupo para
hacer esto como grupo, presiono el comando G, y ahora se convierte en grupo. Si queremos, podemos
renombrar este grupo como man Items. Y si
expandimos el grupo, tendremos
elementos de menú como este, y luego
seleccionaré este grupo y presionaré Mayús y
pulsamos en el logo, y luego hago clic en este alinear centro
vertical así. Y ahora creamos
nuestro menú y logo. Ahora es el momento de crear
este texto medio. Es realmente sencillo,
comencemos paso a paso. Primero, tenemos que sumar este coaching en vivo
para los altos logros. Para agregarlo, presiono sobre
esta T y dar clic aquí. Entonces agregaré algún texto como
este y daré click en cualquier parte del lienzo porque si no
agregamos ningún texto y damos click en
cualquier parte del lienzo, el campo de texto
desaparecerá. Bien, ahora voy nuestro diseño original y doy
click en Comando C dos. Entonces hago clic en este texto
y ahora presiono Comando, A, y comando C dos, copia este texto y vengo aquí, presiono Comando, A,
y Comando C dos, copiando ese texto así. Entonces otra vez,
duplicaré esto porque antes
de crear el diseño, vamos a crear texto
que será fácil. Entonces para duplicar, presiono sobre todo y duplicarlo
así, así. Bien. Ahora tenemos tres secciones. A, vamos a duplicar esto nuevamente para el texto
para el botón. Entonces ahora tenemos este ítem head, así que solo lo destaco y paso ese texto lo siento vamos
a pasarlo sin fuentes sin fuente testyle
porque intentaremos agregar fuente textil
a
nuestra manera así Bien. Bonito. Ahora, agreguemos el fontistyle y
fijemos la alineación Primero, echemos
un vistazo al estilo fontic de nuestro primer párrafo
o subtítulo, clic en el
subbedding y tenemos el
texto como se abre y ensamblamos texto como se abre Ahora da click aquí, abre sembol. Yo ya ahí. Y ahora vamos a ver este diseño
de titular. Seleccione el titular Presiono
comando y haga clic así, luego es perno ferroviario, 60. Hagamos que este ferrocarril sea negrita, 69 y la fuente entre mayúsculas y minúsculas así. Bien. Ahora es el momento de
crear este diseño de fuente, presionar comando, y listón de texto, luego revisar el texto
abierto sans regular 20, clic aquí y abrir
sans regular 20, entonces el caso es, nuevo, tenemos títulos sens Todo bien. Antes de
crear el botón, fijemos la alineación y hagamos esto mejor para
fijar la alineación, comprobemos la alineación
entre esos dos elementos, es 15 y tenemos
alineación touch 15. Pongámoslo así, luego presione y sobre anterior ahora podemos
configurarlo así. Como tenemos problema porque
la línea es espacio, no línea es espacio, la altura de la línea
debe ser superior a 31. La altura de la línea es automática. Hagamos la
altura de la línea como auto. Simplemente haga clic en el
texto y haga clic en el campo de texto de altura de
línea
en Auto presente. Bien. Ahora son 15 y esto así también es 15 y
Yep parece bueno Y ahora presiono mayúsculas y
selecciono los tres
elementos y hago clic en este centro de alineación horizontal y esta alineación de texto
establecida como centro. Bien. Ahora está
perfectamente centrado, y ahora tenemos que establecer este texto como align en el lado
derecho e izquierdo. En realidad, ya está alineada, y entonces tenemos que poner esto
en el centro para hacer eso. Simplemente podemos ajustarlo así con
esta guía de alineación de
color rojo, podemos ponerla en el
medio así. Bien. Creo que esto no está en el Ah, esto será medio
después de que creamos esta solicitud botón de
consulta complementaria para crearlo, simplemente
hago clic en Nuevo rectángulo
y hago clic así. Entonces aumentemos el tamaño del
rectángulo así y pongamos este texto
dentro del rectángulo. Bien, ahora, nuestro texto está detrás
y el rectángulo está arriba. Entonces para arreglarlo antes de arreglarlo, cambiemos el color del rectángulo. Para cambiar el color del rectángulo, podemos dar click sobre el rectángulo y aquí
tenemos el color del campo. Entonces podemos dar click en este
pequeño icono y dar click en este color de diseño original y obtener el color
así. Todo bien. Ahora voy a revisar nuestro panel lateral izquierdo y aquí tenemos detalles de nuestro diseño. Aquí, tenemos este rectángulo. Vamos a renombrarlo como botón BG
y ahora aquí está el texto. Actualmente, el texto no se
muestra para que se muestre, solo
podemos darle click y
traerlo así. Bien. Ahora tenemos que
verificar los tamaños entre el rectángulo o el
botón de fondo y texto. Entonces antes de hacer eso, vamos a averiguar el tamaño del
rectángulo. Son 418 y 60. Hagamos esto como 420 y 60. Bien. Ahora voy a aumentar
este diseño porque se
mostrará fácilmente si
aumento el diseño así, entonces presionaré y ajustaré
el diseño así. Y si queremos, podemos dar click sobre este alinear medio de este texto
y se alineará medio. Sin embargo, ahora está perfectamente
alineado y ahora seleccionaré el fondo y
presionaré shift y seleccionaré este texto y presionaré
Comando G para agrupar esto. Entonces si quiero, puedo cambiarle el nombre a
esto como botón Bien. Ahora lo que puedo hacer es que puedo traer este botón así y
vamos a revisar el espacio
entre el botón
y este subddin es
t Ahora resalte este grupo de
botones y presione y sobre este subbedin
y haga clic en la
flecha hacia abajo para hacer el espacio
entre este botón
y subbedin 20. sobre este subbedin
y haga clic en la
flecha hacia abajo para hacer el espacio
entre este botón
y flecha hacia abajo para hacer el espacio entre este botón Bien. Ahora destaco
Earl de esas secciones, el botón y Earl de
estos elementos y doy click en este centro de alineación y
clic en este centro de alineación
horizontal Bien, ahora está perfectamente alineado, y ahora lo que puedo hacer es presionar
Comando G para agruparlo y ahora si cambio este diseño así cambia
este grupo así, puedo encontrar el punto
medio perfecto y aquí vamos. Tenemos el diseño. Ahora, aumentemos el diseño. Es bastante similar. A lo mejor si aumentamos un poco más el color
oscuro de esta imagen, se verá
igual que este diseño, pero me gusta así. Vamos a esta sección de héroes. Y ahora aquí dentro, da clic en este icono para eliminar este diseño de cuadrícula y
se verá así. Después voy a dar click en esta sección de
héroe y dar click en este botón de presente y podremos ver nuestro diseño en
este modo de vista previa. Ahora creamos nuestro propio diseño. Entonces es un deslizador hermoso, y espero que sigas
el primer paso conmigo y si tienes
alguna duda o algún problema, solo avísame, y ahora es el momento de
crear nuestro segundo diseño. Esto es un poco complicado,
pero podemos hacerlo.
12. Diseña la segunda sección del héroe con Figma UI2: Hola a todos. Ahora es el momento de crear nuestra segunda sección de
héroes. Vamos a iniciarlo. Ahora estoy en mi tablero de Figma, y aquí está nuestra
segunda sección de héroes Como primer paso, voy a dar clic en el marco, y en el lado derecho, puedo seleccionar el tamaño de DextFrame Voy a seleccionar este dest de
1,440 con marco y aquí, lo
voy a poner así y luego puedo renombrar esto a
héroe dos así, entonces lo que puedo hacer
es agregar maquetación automática Lo sentimos, agregue el diseño de cuadrícula. Para ello, hago clic en esto
Puñalada y aquí está nuestro diseño
para llamar a disposición de cuadrícula Simplemente hago clic en él. Bonito. Ahora, veamos,
veamos qué tenemos que hacer. Primero, tenemos que
crear sección de menú. En realidad, antes de
crear la sección de menú, agreguemos la imagen de fondo. Entonces primero, tengo que obtener el
tamaño de este fondo. Entonces es ancho 1,440
exel y altura es 700. Así que vamos a crear un rectángulo. Haga clic en rectángulo,
haga clic en el lienzo, haga clic en el marco, y vamos a llevarlo a
este lado así. Bien, ahora tengo que
agregar el ancho 1,440 y la altura será de 700 Bonito. Ahora lo que tenemos que hacer es agregar esta imagen
de fondo. Entonces ya creé
esta imagen de fondo. Lo puedes encontrar en la sección de
recursos, y después de descargarlo,
tenemos que dar click aquí y dar
click en Colocar Imagen. Y aquí tenemos la imagen
de fondo. Simplemente hago clic en él
y doy clic en Abrir. Después verás la imagen adjunta con
el puntero de mi mouse. Simplemente toco esto o hago clic
en rectángulo así, bien, se ve bien. Entonces ahora lo que tenemos que
hacer es averiguar el color de este
fondo y la opacidad Para ello, doy click sobre esta
imagen o la toco dos veces, y aquí, tenemos la imagen. Así que solo selecciona la
imagen y aquí, podemos ver relleno de color
blanco con 90% de opacidad o la visibilidad
es de transparencia es del 90%, da clic en la imagen y da
clic en este ícono más, y aquí tenemos el fondo Entonces vamos a cambiarlo a 90 y luego dar clic aquí y
ponerlo así. Bien. Bonito. Ahora solo
creamos nuestro Fondo fácilmente. Entonces lo que tenemos que hacer
es en este texto, primero, voy a tocar dos veces este texto y presionar Comando C para copiarlo. Y en tu caso, puede
ser Control C. Si
estás usando Windows, entonces hago clic en este
texto y doy click en aquí. Después presiono Comando V o
Control V en su caso. Así, entonces lo que puedo hacer es averiguar el
tipo de fuente y tamaño de fuente. Entonces la fuente es Georgia
regular y 45. No te preocupes si no
sabes de la fuente o sabes muchas más
cosas sobre la fuente. En futuras lecciones, te
mostraré todo lo que necesitas saber
sobre fontin, UX e UI Da click aquí y parece que
ya seleccionamos esta fuente. Volvamos a ver. Sí,
es Georgia regular 45. Y aquí Georgia regular 45. Bien. Entonces lo que tenemos que hacer es ponerlo en esta
esquina así. Entonces presiona y
verás las líneas. Hagámoslo como 20. Entonces tenemos que crear
esta sección de menú. Entonces es Helvética. Su fuente es Helvetica,
y regular 16. Así que vamos a crearlo. Es fácil, haga clic en el texto y cambiemos el nombre de este
texto a home. Luego haga clic en el
texto y seleccione la fuente vertical aquí
verá que el tamaño es regular y el tamaño de fuente será en realidad el ancho de fuente es regular
y el tamaño de fuente será 16. Bien. Entonces lo
que tenemos que hacer es ponerlo así
así por ahora
y vamos a duplicarlo. Presione viejo y haga clic en
Ratón, luego duplicarlo. Esto o, ¿cuántas veces
queremos duplicarlo? Uno, dos, tres, cuatro, cinco. Son cinco veces, así que uno, dos, tres, cuatro, cinco, bonito. Ahora voy a cambiar la fuente. Puedo tocar dos veces aquí y presionar Control C para copiar y
Control V para pegar. Y volvamos a hacerlo. Haga clic así. Bien. Ahora otra vez, tenemos
ubicación, pegarlo así. En realidad, cuando lo pegamos, ya consigue el diseño también, así que voy a escribir. Aquí tenemos blob, luego con tag ni. Bien. Ahora lo que podemos hacer es
verificar el tamaño entre medias. Para comprobarlo, basta con hacer clic aquí
y pulsar todo así. El tamaño Ibtwin es 25. Entonces vamos a ajustar esto. Primero,
los seleccionaré a todos así. Después haz clic aquí y haz clic en
atado y haz clic así. Bien. El también hago clic
aquí y aquí adentro, podemos configurar el
sitio atado como 25 así. El ritmo en el medio es de 25. Ahora tenemos que
ponerlos en mayúscula. Como lo hice antes, da clic aquí y en caso de que
podamos dar clic en la mayúscula. Ahora lo que tenemos que hacer es de nuevo, tenemos que seleccionarlos todos
y dar click aquí y dar clic en Atado luego
hacerlo 25 así. Bien. Ahora bien, si comprobamos esto, el hogar es audaz. Así que vamos a encontrarlo aquí. Es con este atrevido. Hagamos esto con esta negrita, haga clic así, luego
cambie el regulador en negrita. Bien. Ahora lo que puedo hacer
es seleccionar todo esto haciendo clic en el elemento del menú o dando
clic en el texto y el texto, dando clic en el texto mientras
presionas Mayús así. Después presiono Comando
G o Control G.
Agruparlo . Bien, entonces aísle ambos de la sección
y háganla así. Bien. Centrémonos en
crear estos contactos, pero es realmente
sencillo. Hagámoslo. Haga clic en forma de rectángulo y
cree un rectángulo como este. Bien. Entonces agreguemos esta esquina o reduzcamos
las esquinas como 30. Bonito. Ahora
solo puedo dar click aquí y duplicar el texto
presionando así, luego lo pongo así,
pero tenemos que hacer esto por
encima de este rectángulo para hacer ese patada alta en el contacto toma en nuestro panel de capas del
lado izquierdo, luego ponerlo así. Bien. Ahora, vamos a
comprobar qué podemos hacer. Aquí tenemos el tamaño como
176 y la altura como 50. Además, el color es negro. Hagamos esos cambios. Primero, la altura será de 50
y el color será negro. El color del texto es por qué. Después selecciona ambos objetos y haz que el
texto se centre así. Veamos que lo que
hicimos se ve bien. Entonces tenemos que cambiar el texto. En realidad, ya es
como el contacto cus, ya
tenemos
contacto cus texto aquí. En realidad, no
necesitamos contactarnos iconos para contactarnos elementos del menú. Entonces en la sección héroe original, voy a cambiar este
contacto cus a acerca de nosotros. Acerca de Ttk. No, hazlo. Ahora, hagamos lo mismo aquí. Cambiemos este
contacto sobre nosotros. Bien. Ahora se ve bien. Entonces ahora lo que tenemos que hacer es agrupar este botón
para agrupar la página, hacer clic en el texto y dar clic en el fondo
pulsando Mayús. Después presiona Commando Control G, comando G en Mac y Control
G en Windows. Mmm mm. Bonito. Ahora lo que podemos
hacer es seleccionar todas esas tomas por turno presente y seleccionar en los grupos
así, luego dar clic en. Una línea centrada verticalmente. Entonces aquí, haga clic en distribuir horizontal
está presionando Bien. Nuestro menú está terminado. Y como mencioné antes,
en futuras lecciones, usaremos funciones más
avanzadas como autoayouts y componentes Con esos diseños
y componentes auto, podremos
crear fácilmente este tipo de sitio web. Pero por ahora, este ejercicio te
ayudará a adquirir muchos conocimientos sobre
cómo funciona la FIGMA y podrás obtener Y sobre la experiencia en Figma Bien. Ahora tenemos que
crear estos textos. Es muy sencillo. Entonces comencémoslo. Primero, tenemos que crear esta bienvenida a mis
finanzas para hacer esto. Simplemente presiono T en el teclado y
agreguemos texto así. Bien, es así, entonces tenemos que averiguar las fuentes que usaban para
crear este titular. Entonces la fuente es
Georgia five regular. Agreguemos esos detalles
Georgia regular. Esto debería ser 55. Bien. Ahora solo voy a copiar estos sujetadores en el comando C
y pegarlo así, y está en mayúscula
para que sea minúscula, da
clic aquí y en caso de que
podamos selt este título en Bien. Se ve bien. Ahora lo alinearé
con nuestro layout. Entonces lo que tenemos
para crear esto. Estamos aquí para ayudar a
copiar el texto y está en la fuente tas infierno,
Vertica, regular 25 Vamos a crear un texto y
pegarlo así y es fuente tas hell,
Vertica, regular 25 Bien, así que solo damos clic aquí
y lo ponemos así por ahora, entonces tenemos que crear este ícono de
contacto y aprender. Entonces ya creamos
el ícono de reparto de contactos, así que solo puedo duplicarlo, hacer clic en todos y
duplicarlo así. Entonces voy a cambiar esta
altura a 60 para hacer eso, clic en el rectángulo y
cambiar la altura como 60. Entonces haz este centro. También creo que tenemos que
cambiar el tamaño de la fuente. El tamaño de fuente es 21 el tamaño es 20, que sea un centro de línea como este. Ahora puedo volver a duplicar esto
y ponerlo aquí así. Después hazlos
centro de línea y este texto
será aprender más. Cambia el texto para obtener más información. Ahora lo que tenemos que hacer es eliminar este color de campo para
eliminar este color de campo, simplemente
hago clic en este icono menos, y ahora agrego el Etro, clic en Etro y el color de
Trazo es negro, voy a cambiar este color de texto
al color de campo
a negro así Creamos muy bien el botón de
aprender más, pero primero tenemos que ajustar
más cosas. Averiguemos el
espacio entre el texto y el borde del botón
es 33 por 33. Vamos aquí, tenemos 20 por 20. Hagamos que se mordiera
más así 33. Y tenemos que aumentar
tres más 0.1, dos, tres. Bien. Bonito. Ahora
lo que tenemos que hacer es hacer clic en esto y
seleccionarlo como dentro. Bonito. Ahora tenemos dos botones
y la sección de encabezado. Entonces agruparé
estos dos botones
presionando por ellos y
presionando Comando G. Entonces tengo que averiguar el espacio entre
esas dos secciones. Son de 20 por 30, hagamos clic aquí y saquemos esto presionando la
tecla arriba en el teclado, luego llevemos esto hasta 30. Bien. Ahora puedo seleccionar todo este texto y presionar
Comando G para agruparlo. Bien. Ahora lo que puedo hacer es seleccionar éste y
seleccionar el fondo clic en este alinear centro
vertical y alinearlo verticalmente centro. Entonces tenemos que agregar esta imagen. Para agregarlo, solo crea
un rectángulo como este, luego póngalo así y
configúrelo así, así. Entonces vamos a dar
clic aquí y dar clic en Colocar Imagen y
seleccionar la imagen. Después da click aquí para colocarlo. Bien. Ahora lo que puedo hacer es tocar
dos veces esta imagen y
cambiar el campo para recortar. Y ahora yo esta imagen de aquí, pongo esta imagen así. Bien. En realidad, creo que podemos aumentar este
tamaño de imagen más así, pero lo hicieron, lo pusieron
así y sí, encaja perfectamente. Entonces ahora lo que tenemos que hacer
es crear esta barra negra. Es fácil crear simplemente haga clic en el rectángulo y
haga clic así, luego póngalo así y haga que el ancho sea
igual que el marco, luego aumente el tamaño. En realidad, vamos a
averiguar la talla. Yo 270, lo hago 270 así, luego cambia el color del campo a negro y da click en
la sección hero y presiona Ven en Mac y Control en Windows
y radio así. Ahora, se ve bien, y
ahora lo que tenemos que
hacer es en realidad tenemos que
cambiar este
color de relleno a este color, copiar ese color
cambiar color de relleno. Esta agradable. Ahora tenemos que
añadir este texto. El texto es Georgia 45 regular, así que simplemente haga clic en el texto o simplemente haga clic en la
T y presione aquí, luego presione algunas tomas, agregue algo de texto, y es Georgia. Regular 45, entonces esta fase
el texto así, para esto y tenemos vamos entrar y en la
segunda línea así. Después haga clic en el fondo, haga clic en el texto, haga clic en la línea centro vertical. Bien. Ahora tenemos que sumar
esas tres secciones. Para agregarlos, haga clic aquí
y verifique la fuente, es hel vertical regular, 65 solo duplique esto y tome estos dos planos YE y cambie la fuente a
regular seis así. Entonces tenemos que agregar esto
es albatica regular 25. Podemos simplemente duplicar
esto y agregar los tanques. Bien, ya cambiamos a 25. Luego haga clic en ambos elementos y haga clic en Alinear centro
horizontal. Veamos el
tamaño intermedio o el margen
entre esos dos. 14. Hagamos 50, luego presionemos ambos. Hazlo horizontal y da
clic en Comando G. Bien. Ahora duplica esta foto. Ahora tenemos que cambiar
el valor aquí, ps comando c1v, copiar esto, copiar esto y copiarlo así Ahora, haz que se alineen correctamente. Bien. Ahora voy a poner la
toma aquí estos textos aquí. Vamos a hacer clic en distribuir espaciado
horizontal después de seleccionar todas estas
tres tomas y luego lo siento, haga clic en alinear centro vertical. Así que haz clic aquí, haz clic
en Alinear Centro. Después presiona Comando
G para agruparlo aquí, da clic en alinear centro vertical. Bien. Ahora
creamos con éxito la segunda sección de héroes. Comprobemos el segundo, y aquí está el diseño
que acabamos de crear. Como dije antes, esta es una manera de aprender Figma manera efectiva y a continuación
tienes un ejercicio Déjame compartirlo contigo. Bien. Aquí está la
tercera sección de héroes. Y debes
crear esta sección usando los conocimientos
que acabas de aprender. Esta es una sección de héroe simple, y al crear esas
dos secciones de héroes, solo
tienes la
idea o simplemente
tienes el conocimiento para
crear este diseño. Entonces comencemos el trabajo. Además, en el futuro, utilizaremos el diseño
automático y los componentes. Por lo tanto, su viaje de diseño web
será muy fácil con el
diseño automático y los componentes. Por ahora, solo crea
esta sección de héroes. Y conoce más sobre Figma. Mientras creas este
tipo de sección de héroes, mientras creas este ejercicio, puedes jugar con la Figma y descubrir
más características geniales Te veo en
la siguiente lección.
13. Diseña la tercera sección de héroes con Figma UI2: ¿Lograste
crear este diseño? Así que vamos a diseñarlo de nuevo. Primero, tengo que crear un marco. Haga clic en el marco, haga clic aquí. Entonces voy a poner con un
14, 4,700 así. Bien, tenemos el marco, así que cambiemos el nombre del marco a. Entonces lo que tenemos que hacer es agregar en el layout grid
o layout grid. Haga clic aquí, y aquí está nuestro diseño de
cuadrícula, haga clic en él. Ahora como primer paso, tenemos que crear este menú. Entonces el tamaño del menú es 223. Su altura es de 223. Así que vamos a crear un rectángulo
y vamos a hacerlo tan 14423 como la altura Bien. Ahora vamos a hacerlo
transparente a cero así. Bien. Ahora tenemos que crear
este logo para hacer eso, solo
creo otro rectángulo y lo hago alinear así. Después tenemos que seleccionar
la imagen del logotipo. Da click aquí, haz clic en Colocar
Imagen y aquí, tenemos el logo. Después haz clic así. Entonces lo que tenemos que hacer es
cambiar este campo a cultivo. Bien. Entonces hazlo así
y aumentalo así. Bien. También tal vez podamos
alinearlo correctamente aquí. Bonito. Ahora tenemos que
crear este menú. Es muy sencillo. Da click en T y crea el menú. El primer vino será el hogar. Ahora lo que tenemos que
hacer es encontrar la fuente. Haga clic en él y la fuente
es el perno de cabina 18. Sila aquí cambiar fuente a cabina, luego negrita 18. Todo bien. En realidad, tenemos que cambiar nuevo
esta visibilidad rectangular
a cien. Entonces cambiemos el color del
campo a blanco. Sin eso, no podremos apuntar
a ese rectángulo. Ahora lo que tengo que hacer
es agregar el subrayado. Antes de agregar el subrayado, dupliquemos esto como
éste, dos, tres Seguramente lo necesitamos
por tres veces, y luego
agregaremos aquí sobre nosotros. Vamos a escribir sobre entonces los servicios
eléctricos. Oh no, debería ser eléctrico. Servicios eléctricos,
luego contáctenos. Bien. Ahora voy a destacar
sólo esos tres elementos del menú y tenemos que hacerlo en
mayúsculas y el ancho de fuente
será regular. Resalte los tres
presionando shift y cámbielo a regular, luego cambie la caja a superior. Bien. Ahora aquí dentro, tenemos que cambiar esta
mayúscula y ahora lo que
tenemos que agregar este subrayado
para agregar el subrayado, podemos seleccionar podemos dar click
aquí y podemos dar click en este plus Antes de agregar el subrayado,
alineemos esto primero, seleccionaré todas esas
cosas y haré que distribuya el espaciado
horizontal luego haga que se alinee en el centro vertical Bien. Ahora tenemos que
cambiarlo de color. El color será
negro y aquí, el color será azul oscuro. Vamos a cambiarlo.
Color a azul oscuro. Bien. Ahora tenemos que
añadir el subrayado Para agregar subrayado, solo
reviso que tenemos el estilo de texto, pero no lo encontré. Así que agreguemos subrayado
usando ShaftOL. Entonces aquí, hacemos clic en línea, y ahora voy a hacer clic en Shift
y agregaré subrayado así Después cambia el color del subrayado
a este color azul oscuro. Bien, bien, se ve bien. Ahora lo que tengo que hacer
es hacer este grupo. Seleccione ambos objetos y presione el comando G o Control
G para formar un grupo. Entonces tenemos que averiguar el
espacio entre los 50. Entonces cambiemos
este espacio en 50, 50 y 50 aquí. Bien, ahora selecciónalos todos y presiona Comando G
para convertirlo en un grupo, luego selecciona el logotipo y
configura el grupo de elementos de menú. Después da click en este centro
alineado vertical. Todo bien. Ahora tenemos que
ajustar el tamaño
entre el logo y los nuevos artículos. Entonces aquí, voy a hacerlo como 50, 40 a 50, 50, así. Todo bien. Y este subrayado
debería ser más grande. Pongámoslo como seis
y cambiémoslo a dos. Entonces ahora tenemos que agregar esto llámanos
las 24 horas al número gratuito. Así que vamos a crearlo. Primero, tenemos que crear un
círculo para crear un círculo, hacer clic aquí y dejar elipse, luego crear una elipse como Averiguemos el
tamaño de la elipse. Es 86 por 806-80-6806. Después da click aquí, cambia
de color a esta luz. Entonces duplicaré esto
presionando sobre enfurecerlo a la izquierda Entonces vamos a averiguar el
tamaño este es 62 por 62, hazlo 6262, luego cambiarlo color de relleno a
este oscuro, este color Ahora, seleccione ambos objetos y haga que sea vertical y
horizontal alinee el centro. Bien. Entonces tenemos que
agregar este ícono de teléfono. Para agregar este ícono de teléfono, podemos usar el ícono de fontosom Si vamos a fontsom
Pontosom es la biblioteca de
iconos de Internet y el Entonces, si hacemos clic en este sitio web, pontosom es biblioteca de iconos Así que aquí está el
icono de pontosom Biblioteca, y podemos buscar aquí para
encontrar icono icono de búsqueda Y aquí están los íconos telefónicos. Sin embargo, tenemos un plugin
Figma diseñado por pontosm. Entonces para agregarlo, tenemos que acceder al plugin. Entonces para acceder a él, da
click sobre estos recursos, y aquí podemos ir a plugins y aquí podemos
buscar el nombre del plug in. Busco suma de fuentes. Bien, aquí están los
iconos del pontosom, da clic en Ejecutar. Bien, ahora tenemos el widget de icono de pontosom
o puedo enchufar Entonces aquí tenemos que buscar
el nombre del icono es teléfono, y aquí está el
ícono del teléfono. Haga clic en él. Bien. Ahora tenemos que ponerlo aquí luego
cambiarlo de color a Y. Bien. Así. Bien, bien.
Ahora hazlo centro. En realidad, esto está
fuera de nuestro marco. Entonces para arreglarlo, tenemos que agregarlo al
interior del marco así. Entonces voy a quitar
este marco ALT telefónico. Ahora tenemos el icono seleccionarlos todos y
hacerlos todos como centro. Bien. Ahora lo que tenemos que
hacer es en este texto. Averiguemos los
textos cabina mediana 16.5 vamos a crear tanques
y agregar el texto Déjame agregarlo cocinando aquí
y pegarlo así. En realidad, cuando lo
peguemos directamente, todas las propiedades de este texto van a
llegar directamente al texto. Pero por ahora, vamos a agregarlo
así porque
sabemos cómo cambiar la fuente en figma Averiguemos que el espaciado es 16 y
tenemos esta parte, es perno de cabina 25 Primero copiemos este texto. Sólo voy a pegarlo aquí. Haga clic en contexto, haga clic aquí. Entonces voy a añadir que
lleva un 1-110, uno. Ya me asigné. Averiguemos el color. Creo que ya es bueno. Ahora ponlo así. Entonces lo que tenemos que hacer es alinear esta hoja y vamos a
hacer espacio entre dos el selet ambos de esos objetos y presionar comando
o control G para agruparlo Entonces tenemos que agrupar a estos dos. Seleccione todos esos tres
elementos y presione el comando G, luego resalte esos dos
objetos, esos dos grupos, y haga clic así, luego lo pondré esto. Bien, la parte del encabezado está
terminada y se ve similar. Ahora lo que tenemos que hacer es
crear esta línea azul. Para crearlo, hago clic
en este rectángulo que ya
creamos
y hago clic en trazo. El color de la roca
será este color oscuro. Entonces cambia el tamaño del trazo a like Y da click aquí y solo
necesitamos fondo así. Deberíamos cambiar su tamaño
también. Bien, bien. Ahora tenemos que agregar esta imagen. Agregar la imagen es fácil. Primero, hago clic en el marco y presiono Comando en Mac y
Alton Windows. Ve así. En realidad, si no
pizarra el comando, cambiaremos las posiciones
cuando ajustemos esta capa. Si revisas el ícono del teléfono, éste se ajustará cuando
nosotros ajustemos esto. Pero si pasamos comando
ajustaremos así. Bien, bien.
No necesitamos tanto espacio. Ahora, averigua que la altura es 577, vamos a crear otro rectángulo
y hacer que señale 144 50. Lo siento, 1,440 luego 577 a
y ponlo aquí mismo. Bien. Entonces otra vez, selecciona el marco y
ajústalo así. Entonces lo que podemos hacer es dar
clic en el marco. Haga clic en el rectángulo
y haga clic en esta herramienta de forma y
haga clic en conflasimage Ve a nuestra imagen, selecciona así. Bien. Ahora sólo tenemos que sumar
esas llamadas a la acción, agregar esta llamada a la acción como el encabezado subdin
y el botón Es bastante simple,
así que hagámoslo. Primero, voy a dar click en un texto
y será 100% Run. Bien, ahora vamos a averiguar
las propiedades de la fuente. Es cabina mediana 24. Entonces cambiémoslo
a cabina mediana 24. Entonces cuando cambiamos la fuente, en realidad
seleccionamos la
fuente o tenemos que seleccionar la fuente sin
ir al modo de edición. Entonces, si
seleccionamos el texto, podremos cambiarlo. 24 medianos, y el color será este color azul
oscuro. Bien. Ahora tenemos que agregar esta sección. Para agregarlo,
primero copiaré el texto y haré clic en esta T y
pegaré el texto así. En realidad, como te dije
antes cuando lo pegamos, la propiedad de diseño
vendrá junto con ella. Vamos y luego relacionemos esos dos objetos y
pulsemos en alinear a la izquierda. Ahora, averigua el
espacio intermedio, es, hazlo, y ahora
tenemos que agregar este botón. Vamos a obtener las propiedades de los botones. Son 320 por 80. Da click aquí así, será de 320 por ocho y cambiarlo de color de relleno a este color azul
oscuro así, luego póngalo así y
haz clic en contenidos y agrega texto como petición a partir de la palabra más oscuro para que Figma tenga
una característica genial Si hacemos clic derecho
sobre aquí y vamos a esta copia como copiar pegar como
y seleccionamos copiar propiedades, luego haga clic aquí y haga clic derecho en copiar y pegar como y haga clic
en propiedades de fase. Qué es el bloque. Bien. Ahora, la propiedad se agregará automáticamente a este diseño. Averiguemos los detalles. Bien, primero tenemos que
cambiar la altura. La altura es ocho,
no la altura con. Perdón, yo estos tres al 333. Bien. Ahora, selecciona el
rectángulo y el botón, lo siento, texto y haz que se alinee verticalmente y
horizontal al centro, y presiona Comando G para agruparlo y resaltar todas esas
secciones y presiona el comando G, luego haz clic en este rectángulo
y hazlo centrar. Simplemente creamos el diseño. Vamos a comprobar en el presentación de
vista previa
modo presente. Se ve así. Sí, así es como creamos
el diseño simple. Como dije antes, en lecciones futuras,
encontraremos
métodos más uh, manejables y más fáciles manejables y más fáciles para crear
este tipo de diseño, y esto es para aprender lo básico Espero que aprendas sobre
fuentes, tanques, herramienta de formas, imágenes de
rastreo y creación sección
básica o creación de héroes
guapos. Te veo en
la siguiente lección.
14. Aprende el diseño automático de Figma: Hola a todos. Aprendamos
sobre el diseño automático de Figma y cómo usarlo para crear diseños flexibles y
receptivos, ahorrando tiempo y esfuerzo al trabajar
en sus proyectos Autoyout es como
una magia en figma. Te ayuda a organizar tus elementos y flexibilizar
tus diseños. Piense en ello como un
sistema que mantiene todo en orden y
ajusta el espaciado por usted. Cuando cambias el tamaño de un botón, tarjeta o incluso una sección completa, diseño
automático se asegurará todo dentro
cambie el tamaño de la noche Imagina que estás construyendo una barra de
navegación con botones. Sin diseño automático, tienes que ajustar manualmente cada botón
si cambias el tamaño. Pero con el diseño automático, Figma hará eso por
ti automáticamente Hay pocas razones por las que el diseño
automático es tan importante. El primer diseño automático hace
que el flujo de trabajo sea más rápido. No es necesario ajustar
cada elemento a mano. Además, si desea que su diseño funcione en diferentes tamaños de
pantalla, diseño
automático ayuda a asegurarse de que
todo encaje perfectamente. No sólo eso,
te da un espaciado consistente, lo cual es clave en un buen diseño. Básicamente, el diseño automático
le permite pasar más tiempo diseñando y menos
tiempo arreglando pequeños detalles. Vayamos a nuestro diseño Figma y comencemos a agregar diseño automático Primero, voy a crear un
nuevo proyecto haciendo clic en este botón crear nuevo Azul
y dar clic en los archivos de diseño. Entonces aquí voy a cambiar esto a. Vamos a cambiarlo como auto AO. Entonces voy a hacer clic en este icono de marco y vamos a crear un
marco de tamaño de escritorio como este. Como primer paso, agreguemos el diseño automático
a este marco. Y autoayout. Si revisas tu barra lateral
derecha, verás la opción de diseño automático. Solo tienes que hacer
clic en este ícono más. O si te gusta usar atajo, el
atajo de autodiseño es Mayús A. Así, puedes agregar opciones de Autoayout
I Autoay tenemos
características para agregar
entre tamaños, patrones
horizontales, patrones
verticales y alinear
los elementos
como opciones de Autoayout
I Autoay tenemos características para agregar
entre tamaños, patrones
horizontales, patrones verticales y alinear
los Será fácil si
creamos algunos objetos
para entender esto. Primero, vamos a crear un botón. ¿Te acordaste la última vez
que creamos botón? Tenemos que agregar forma y texto, pero con el diseño automático, el texto será suficiente
para crear un botón. Haga clic en el texto
y haga clic aquí, luego agregue texto o agregue el
nombre del botón como haga clic ahora. Así, entonces
como hicimos antes, cambiemos la fuente. La fuente será
vamos a agregar fuente como se abre y el tamaño
será semi boold Entonces agreguemos el
tamaño de fuente a 418 así, y tal vez seremos
regulares. Es bueno. Ahora, hagámoslo semi bool. Bien, ahora tenemos texto de botón. Voy a hacer el
caso en mayúscula. Bien. Ahora bien, esto es solo un texto, y podemos agregar
diseño automático a este texto. Tienes que presionar Mayús A. Cuando presionas Mayús A, podrás
agregar un diseño automático. Bien, ahora aquí están las opciones de
diseño automático de este botón. Entonces como segundo paso, voy a cambiar el nombre de este
marco a botón, así será más fácil de
entender. Entonces lo que voy a
hacer es agregar un color de relleno. El color de fondo. Entonces, cuando agreguemos el color de
fondo, podremos identificar fácilmente lo que sucedió cuando cambiemos las opciones de autoayout
en esta sección Entonces en tu barra lateral derecha aquí, tenemos relleno y hago clic
en este ícono más. Entonces voy a cambiar este color verde porque verde es uno de mis colores
favoritos. Bien. Se ve bien. Puedes
cambiarlo a cualquier color que quieras, pero yo elijo el verde. Bien. Ahora tenemos el texto
con color de fondo. Y si hacemos clic en
este diseño automático, podemos ver el texto así. Ahora, selecciono el botón
y ¿recuerdas que te
hablé del
relleno horizontal y el acolchado vertical? Aquí están esas opciones. Podemos simplemente agregarlos como
15 y ver cuando agrego eso, me sale el relleno entre el texto como 15 y
vamos a hacerlo 20. Ahora está más claro, 25, ahora está más claro. Entonces tenemos relleno vertical. Relleno vertical significa
el espacio entre el arriba y
abajo de este texto. Agreguemos
relleno vertical agreguemos 25 25. Bien. Ahora se parece
más a botón. Hagamos esto como gemelo y 30. Bien. Ahora es realmente bueno. Como si quisiera, puedo agregar, puedo reducir las esquinas
haciendo clic aquí y agregar 39. Recuerdas que
en las últimas lecciones, hicimos esto y ahora tenemos este tipo de botón y
ajustando esas cosas, podemos hacer que este
diseño sea realmente genial. Ahora este botón está en
la esquina lateral izquierda. Y si queremos que esto se ponga
en el medio como aquí. Entonces para hacer eso,
haga clic en el marco, el marco ya es de diseño
automático. Entonces solo tenemos que hacer click en Aline top center y
va a ir a line top center, y si hacemos click en Alinear centro, irá a la parte central, y aquí está el poder
del auto layout. Si no usamos el diseño automático, tendremos que
ajustar manualmente este botón. Pero cuando el diseño automático, Figma manejará
la parte de ajuste, solo
necesitamos cambiarla desde
esta sección de diseño automático Bien. Ahora piensa que tenemos que
crear un botón diferente. Duplicemos este botón. Haré clic en el botón y
presionaré Comando C y presionaré
Comando V. El botón solo
se agrega como entonces piensa si necesitas cambiar
el tamaño de la pluma de apuesta. Es muy sencillo. Sólo tienes que hacer
clic en el marco y luego verás este tipo de línea de ajuste para cambiarlo. Para que podamos cambiarlo
de aquí así. Bien. Ahora hagamos este
botón como el color del campo cero, y agreguemos trazo. Para agregar un trazo, haz clic en el botón y
verás este trazo, simplemente haz clic así. Y ahora cambiemos el
color del trazo a este color verde. Entonces podemos cambiar el color del texto
para cambiar el color del texto, tenemos que limar el texto y
vamos a cambiarlo a verde Bien. Aquí se ve así, pero este
color verde es demasiado claro, así que tenemos que
cambiarlo a oscuro así, cambiar el color de relleno a
lo siento, no color de relleno. Cambia el color del texto a color
oscuro así. Bien. Ahora piensa si
quieres cambiar el texto, vamos a cambiar, haz clic en mí
para comprar uno y obtener uno gratis. Cuando cambiemos el color del texto, la alineación se ajustará
automáticamente. Ver si cambio aquí para enviar, va a cambiar de acuerdo
a enviar ahora así. El botón cambiará
según el texto. Pero, ¿recuerdas el último
diseño que creamos? Entonces vayamos a ese diseño. Doy click Volver a archivos, y aquí tenemos el diseño. Entonces consigamos este botón. Entonces en este botón, vamos a hacer clic en mí para que
me haga clic para obtener uno gratis. Ahora, al ajustar
el texto del botón, el fondo no se ajustará. Tenemos que
ajustarlo manualmente así. Es por ello que deberíamos
usar autoayout. Volvamos y hagamos clic
en la sección Autoayout. Esto es solo un básico y
tenemos muchos más artículos, muchas más características que
podemos hacer con Auto layout. Ahora imagina que necesitas crear un botón en el segundo
botón debajo de este botón. Actualmente, no puedes hacerlo porque si
duplico este botón, solo habrá línea
horizontal. Si queremos agregar el
botón de abajo, primero, eliminaré esto o eliminaré esto y si tenemos que
agregar nuevo botón, primero tenemos que dar click
en este DestopFrame y agregar el layout automático de este frame
como vertical, así Cuando lo agrego, la toma se alinea
verticalmente
así, pero quiero Hacer esos dos como horizontales
y agregar nueva línea. Para ello, hago clic en esos
dos elementos y presiono Mayús A, y se convierte en un
fotograma diferente. ¿Lo viste? Presionaré el Comando
C para deshacerlo. Primero hago clic en
esas dos capas o esos dos marcos
o esos dos botones, luego presiono Mayús
A y se convierte en un nuevo diseño o nuevo diseño automático Ahora puedo dar click en esta disposición horizontal y
será horizontal. Ahora si quiero
crear un nuevo botón. Vamos a crear un nuevo botón
a continuación así y Hola a mí. Entonces agreguemos el diseño automático
presionando Mayús A, y aquí tenemos los detalles, tenemos opciones de diseño automático. Ahora lo que voy a hacer
es agregar el color del campo. Esta vez, agreguemos el color del campo y el verde verde
claro así, y cambiemos el color del
texto a blanco. Ahora agregaré
paddin horizontal 20 y lo siento, paddin
vertical Hagamos esto como 30. Ahora, vea, creamos este
botón debajo de este conjunto. Vamos a renombrar esto como
botón así, entonces podemos ajustar
o podemos cambiar esta línea de texto ahora y se ajustará de
acuerdo al texto. Bien. Aquí está la manera de
crear el diseño automático. Veamos si quieres
hacer este botón como botón de tamaño
completo. Por lo que actualmente este tamaño
de escritorio es de 1,440. Entonces, si queremos que este
botón esté lleno con botón. Lo único que tenemos que hacer es hacer
clic en el botón, y aquí dentro, verás. En marco, verás, da clic en este botón, y aquí, verás abrazo, haz que llene contenedor. Después haces que llene contenedor. El botón se ajustará
como el contenedor de llenado. Además, verás
este tipo de espaciado. El motivo es que cuando haces
clic en el marco del escritorio, verás el
relleno horizontal como diez. Si lo cambiamos como cero, el botón será de ancho completo. Entonces hagámoslo 140, 140. Bien. Ahora bien, esto entre tamaño puedes cambiarlo
cambiando el hueco vertical. Vamos a cambiarlo como 60. Entonces aquí está el camino. Ahora si quieres hacer
este botón en la parte superior, puedes hacer click en
una línea superior centro o una línea izquierda de
talón así Esto es muy fácil. Tal vez todavía estás confundido, pero en las próximas lecciones, diseñaremos estos banners
con diseño automático y
comprenderás completamente el diseño
automático después de que hagamos eso, vemos en la siguiente lección.
15. Habilita UI3 Beta para Figma: Hola a todos en este momento
que creo esta lección, Figma UI tres nueva interfaz de
usuario no
está disponible
para todos los usuarios, así que tenemos que hacerlo en la lista de espera
porque todavía está en Beta Después de la Beta, como
anunciaron, podremos acceder a
la Figma UI tres Sin embargo, si no tienes disponible
la interfaz de usuario tres, podemos usar la extensión de Google
Chrome para obtener la revisión de UI three. Vamos a hacerlo. Primero, abro una nueva pestaña y busco
habilitar Figma, yo tres, enchufar Entonces voy a tener esta habilitación
UI tres beta o Figma. Simplemente hago clic en él. Ahora aquí está la
Extensión o enchufar, hago clic en esto en Chrome
y hago clic en en extensión. Actualmente, esta versión
es trabajo en navegadores web, no en la herramienta
Figma descargada, así que usa Google Chrome para
ejecutar esta extensión. Bien. Ahora lo que tenemos que hacer es ir a nuestra cuenta Figma
y la repres Ahora vamos a hacer clic en Creativo
y dar clic en Archivo de diseño. A partir de aquí, podemos usar Figma
UI three para hacer nuestros diseños. En la siguiente lección, revisaremos una
descripción general rápida y usemos estas tres funciones de UI y interfaz
UI tres para
completar nuestro trabajo futuro.
16. Tutorial de Figma UI3: Hola a todos.
Vamos a recorrer la interfaz
de usuario de Figma Ahora estoy en el tablero de Figma. Doy clic en este Nuevo
archivo de diseño para crear un nuevo diseño. Ahora tengo la UIT o la antigua interfaz
de usuario Figma Editor. Doy clic en este
icono de Ayuda y aquí, hago clic en usar nueva interfaz de usuario en tinta
beta aquí está nuestra UI. Esto es lo mismo que la interfaz de usuario dos
o la antigua interfaz de usuario de la Figma. Solo tenemos un aspecto más
profesional y tenemos algún uso un
cambio amigable para el editor general. Primero, voy a crear un marco. Entonces aquí tenemos el panel de
herramientas aquí. Tenemos el marco, así que hago clic
en frame y clic aquí, luego hago un frame como este, o vamos a crear un marco
con tamaño de escritorio. Hago clic aquí. Después
en nuestro lado derecho, podemos seleccionar el tamaño del escritorio. Seleccionaré esta versión
de escritorio. Ahora en el lado izquierdo, tenemos la sección de navegación. Aquí, podemos ver
las capas y en ***, podemos ver estas aseveraciones. Voy a renombrar este
escritorio 12 main. Ahora voy a crear un
rectángulo usando la herramienta de forma, haga clic aquí y crearé
un rectángulo como este. Entonces puedo ver la propiedad
de este rectángulo. Cambiemos este ancho y alto a 300 300 y
cambiemos el color del campo a rojo. Entonces es lo mismo que antes y
también podemos crear labios, dejar la elipse y
crearla así Entonces aquí tenemos texto. Doy click en él y ello después selecciono
el texto y aquí, puedo cambiar de fuente
para cambiarlo a tamaño
ferroviario será 30
sync y semi board. Cambia de color a rojo así. Es 60 en este lado podemos ver los jugadores y podemos
crear nuevas páginas como esta. Como antes tenemos este panel de
acción aquí, podemos encontrar plug ins y widget. También en esta sección, tenemos características que podemos usar con Figma AI y
en futuras lecciones, aprendamos sobre Figma Vamos a terminar esta lección con un cambio en este nombre de archivo
Figma Voy a cambiar este nombre de
archivo Figma a diseño web. Lecciones como esta. En el siguiente video, te
voy a ver crear Figma auto layout con la última versión de
UIT
17. Aprende a diseñar auto de Figma con UI3: Hola a todos. Aprendamos el diseño automático de
Figma con la interfaz de tres editores Figma
UI Ya conoces el diseño automático de
Figma, vamos a saltar a la acción Primero, voy a crear un marco. Entonces aquí estoy en
el editor Figma, así que hago clic aquí,
clic en el icono del marco
y selecciono como escritorio Aquí está nuestro marco. Entonces agreguemos el
diseño automático a este marco. Para ello, puedo hacer clic derecho
y hacer clic en este elemento del menú
Atayout, o puedo dar click aquí
o en el lado derecho, tenemos diseño en maquetación Aquí, podemos usar la función de
autoayout, así puedo hacer clic aquí o
simplemente puedo hacer clic en Shift A. Simplemente hago clic aquí y
es un autoayout Ahora, lo que voy a
hacer es agregar algo de Ellipse. Vamos a hacer clic en Ellips
y crear un Elise. Entonces estableceré el ancho de
elipse como 150 y la altura como una quinta parte Entonces
lo cambiaré de color de campo a rojo y luego duplicaré esto por tres veces hagamos de este
color elipse a verde Después da click aquí y cambia
este color a azul así. Juguemos con esos objetos y aprendamos
más sobre el diseño automático. Primero, voy a cambiar el nombre de esta prueba de diseño de nombre de
marco. Bien. Después selecciono el marco. En la sección auto, tendremos opción. Como primer paso, estableceré
los márgenes izquierdo y derecho como 140 para hacerlo. Tengo que encontrar la
izquierda y la derecha. Aquí están los márgenes izquierdo
y derecho. Actualmente, son diez. Si hago clic aquí, puedo ver los márgenes individuales. En este caso, es un relleno, pero también funciona como margen. Aquí, pondré
140 y luego otra vez, pondré 140 a este lado. Aquí está 140, aquí está 140. Ahora quiero agregar
margen en la parte superior e inferior actualmente el margen
superior es de diez. Aquí, se puede ver que son diez, diez, y aquí dentro, si flojo, se mostrará como diez, así que quiero agregar más
espace voy a agregar como 60 Para ello, voy a dar click
aquí y ahora puedo cambiarlo como 60 si minimizo
haciendo clic aquí, puedo apenas a los 60, entonces tendré 60 como márgenes tanto
superior como inferior, y aquí, veremos el hueco horizontal
entre los objetos. Entonces para cambiarlo, puedo superarlo y
cambiar como quiera. Vamos a establecerlo como 50
y también a partir de aquí, puedo cambiarlo como quiera. Entonces quiero colocar este
botón en el centro para hacer eso, hago clic en el
marco y aquí,
puedo dar clic en Alinear de centro. La elipse irá al centro
y si hago clic en el centro, irá al centro
y funcionará así Actualmente, esas tres elipse
están en la horizontal. Si quiero que sea vertical, simplemente puedo dar click en esta disposición vertical y
se alineará verticalmente. Ahora otra vez, voy a hacer que sea de disposición
horizontal así. Así es como podemos agregar y
trabajar en el diseño automático en marco. Hay más opciones con las que
jugar como ejemplo, si agregamos este
hueco horizontal entre objetos a auto, automáticamente
llenará el hueco. Además si cambio el
tamaño con una altura, vamos a cambiarlo como 1,000, se ajustará según
el diseño seis así.
18. Diseña buttons con el diseño automático: Vamos a crear botones
con diseño automático. Entonces para hacer eso, voy a quitar todo este frame
o vamos a crear nuevo frame. Presiono Comando y uso la rueda
del ratón para disminuir las enlatadoras y haga clic aquí
y haga clic en el escritorio Bien. Cambiemos este
escritorio a capa BTN Y ahora hago clic aquí y lo
convierto a
diseño automático así. Bien. Ahora mantengamos
la configuración así y ahora presionaré T y crearé un texto de botón como click me ahora puedo cambiar
la fuente si quiero. Cambiémoslo como Roboto
y Roboto se unen a 25. Hagámoslo como medio. Cambiemos la fuente para que me guste
pop pop in. Se ve bien. Bien. Ahora lo que tengo que hacer es dar clic derecho y dar clic en en AutoAyouPara presionar Mayús A. Simplemente
hago clic en él y se
agregó Entonces haré clic aquí y
renombraré esto como TN one. Bien. Ahora voy a ir a nuestro panel lateral derecho y
vamos a añadir el color de relleno. Voy a añadir color de relleno como
este color azul claro, vamos a hacerlo un poco más oscuro. Ahora, nuevamente cancela esto, da click en este texto y cambia el color de relleno
a blanco así. Nuevamente seleccione el botón. Disposición y desde
aquí, voy a añadir, izquierdo y derecho 30 y paddins superior e inferior
20 Entonces voy a cambiar la esquina o reducir la
esquina en apariencia, tenemos como cero, voy a hacer 60 así. Bien. Ahora lo que puedo hacer
es hacer esto al centro. Para ello, tenemos que seleccionar nuestro marco y como hicimos antes, tenemos que fijarlo alinear
centro así. Bien. Ahora voy a duplicar esto presionándolo
y arrastrándolo así Bien. Ahora voy a
crear un segundo botón. Cambiemos este
texto a segundo. Haga clic en mi segundo. Y ahora vamos a cambiarlo de
color de relleno a este color azul. Y ahora hago clic en el
botón y cambiemos nombres de
los botones dos y pongamos la
opacidad a cero así Después hago clic en Eestro
y doy clic aquí, luego configuro el color Etro
a ese color azul, y
lo cambiaré la línea con dos Bien. Ahora tenemos dos botones. Ahora quiero cambiar el tamaño de
inviten para hacer eso, solo
puedo hacer clic aquí
y cambiémoslo como 20 Pero tenemos un problema. Digamos que necesitamos crear otro botón y debería
estar debajo de estos dos botones. Ahora haré clic en este botón y presionaré Comando C o
Control C en Windows y Comando B y luego
está en la misma línea. Si queremos hacer este
botón en la línea para que podamos limar la capa
y dar click así Cuando hagamos la capa
como capa vertical, cada botón
se establecerá como vertical. Para solucionar esto, voy a
resaltar estos dos botones, clic en este botón y presionar
shift y dar clic en este. Entonces presiono Comando G para agrupar el y ahora
lo que puedo hacer es hacer clic en este
layout vertical porque este grupo funciona como
un layout diferente. En este grupo, si queremos cambiar el
entre tamaño a 15,
podemos hacerlo haciendo clic en el grupo y desde aquí, podemos cambiarlo como 15. O podemos presionar Mayús A y agregar diseño automático a
este grupo y desde aquí, podemos cambiarlo así. Bien. Ahora, voy a cambiar
este cuadro a BTN set Ahora quiero que este botón agregue a
continuación de esos dos botones. Simplemente hago clic en
éste y lo arrastro a la parte inferior de este conjunto de
botones y aquí, voy a cambiar el color del campo para cambiarlo
a rojo así. Entonces piensa que quiero
hacer este botón, botón puja
completa para hacer eso, voy a ir aquí y en la W lo
pondré como
contenedor de llenado así. Entonces voy a cambiar esto. Click me estoy lleno
con BTN, así. Como antes podemos
cambiar esos textos, haga clic ahora a
por dos como este, se ajustará de acuerdo con el diseño porque
agregamos el layout automático. Aquí, si queremos
agregar margen, solo
podemos seleccionar el marco
principal y desde aquí, podemos agregar margen
como 140 así. Esto es realmente fácil y
en la siguiente lección, comencemos a diseñar
la sección de héroes.
19. Diseña la primera sección del héroe con diseño automático: Hola a todos. Ahora diseñemos esas secciones de héroe
con diseño automático. Ya estamos creando esos sección cero
sin auto layout. Ahora es el momento de usar el diseño
automático para crear
esta sección de héroe. Como primer paso, tenemos que crear un marco. Doy clic aquí y luego selecciono
el tamaño del marco como escritorio. Entonces lo voy a poner así. Ahora cambio este escritorio uno a héroe uno con diseño automático. Bien. Ahora como primer paso, tenemos que agregar el diseño de cuadrícula. Para agregar un diseño de cuadrícula, Iilate el marco y aquí
tenemos el diseño de cuadrícula Doy click aquí y aquí
hemos guardado para llamar a grilla, así que solo la agrego. Bien. Ahora lo que voy a hacer es hacer que este marco
sea un layout automático. Entonces para hacer
eso, selecciono el prime
y presiono Mayús A, luego se convierte en un diseño automático y ahora agregaré los detalles
necesarios. Primero, lo pondré
como una línea superior centro, luego agregaré
gap vertical o padding como 140, luego agregaré real esto
es margen izquierdo y derecho, o podemos llamarlo padding. Entonces agregaré cero como el margen inferior del ventilador superior
o los rellenos superior e inferior Entonces como el tamaño intermedio, lo
seleccionaré como 90, o hagámoslo de uno a 20, aquí tenemos un layout
horizontal, pero necesitamos tener un layout vertical porque construimos el sitio web
de arriba a abajo. Bien. Ahora nuestro diseño está listo. Vamos a crear la sección de héroes. Tenemos la altura de la
sección de héroe como 700. Vamos a crear un marco y hacer clic
en el marco y dar clic aquí. Entonces estableceré el ancho como
1,440 y el alto como 700. Bien. Ahora lo que hago es
aquí tenemos el marco, presiono Mayús A para hacer de este un diseño automático o agregar
diseño automático a este marco. Entonces si quiero, puedo renombrar
esta sección como héroe Bien. Ahora a partir de aquí, necesitamos
agregar esta imagen de fondo. Para ello, selecciono
esta sección de héroe
y hago clic en un rectángulo
y doy clic aquí. Entonces otra vez, pondré el
rectángulo con 1,440 alturas 700 así luego
haré clic en el
triángulo rec y daré clic aquí, haga
clic en barra diagonal de imagen Video Después seleccionaré la imagen. Ahora doy clic aquí
para añadir la imagen. Ahora la imagen se agregó perfectamente. Cuando veas el diseño, verás este tipo de espaciado entre la
imagen para eliminarla, clic en la sección héroe y establecer esos detalles como cero por ahora. Y por ahora,
mantengámoslo así. Nuevamente, y ahora tenemos la
imagen y como segundo paso, tenemos que añadir este fondo
superpuesto. El color de superposición es negro
y su opacidad es 70. Agreguemos esos detalles. Da click en la imagen, haz clic en este icono más y haz este 70 y el color
es negro. Bien. Ahora tenemos que agregar este texto de
logotipo para agregarlo, voy a hacer clic en TO
texto y dar clic aquí, luego agregaré el texto ya
que agregaré el texto como logo. Cuando agrego el texto, verán que aparece aquí. El motivo de ello es que actualmente
estamos en el marco de héroe. Si hago clic en ese marco y
tiene una disposición horizontal. Hagámoslo disposición vertical y luego aparezca aquí el
texto del héroe. Déjame mostrarte
cambiando el color. Vamos a seleccionarlo y cambiar el color del
campo así. Pero esta imagen debería funcionar
como imagen de fondo. Actualmente, si
agregamos algún objeto a este diseño a esta sección de
héroes así,
esta imagen no funcionará
como imagen de fondo. Para pico, podemos
seleccionar la imagen y en posiciones del
lado derecho, podemos hacer clic en ignorar el diseño
automático así, luego esta imagen ignora
el diseño automático. Voy a dar click en la imagen
y ponerla así. Ahora la imagen no se
muestra para arreglarla, voy a poner la imagen en la
parte superior de la sección de héroes. Entonces ahora puedo
configurarlo así porque
esta imagen ignora la funcionalidad a
layout. Ahora podemos hacer cambios a esta sección de héroe
para hacer eso, primero, voy a quitar esto y en logo, voy a cambiar su color a blanco y vamos a obtener los detalles. Es semivol ferroviario 35, haga clic en los tanques y Semi
woltreinta
ferroviarios revisemos el acolchado entre la
parte superior del marco y el logotipo Son 20. Entonces hagamos
20 para que sea 20, aísle la sección de héroe y agreguemos el relleno superior
como 20, así. Entonces si isilt aquí, vamos a quitar el acolchado inferior En la sección héroe, estableceré el acolchado superior como 20 así. Para esta sección de héroes, entonces tenemos un problema porque
la sección de héroes la cambia. Lo pondré con un contenedor de llenado y la
altura será de 700 así. Ahora es ahora como el segundo paso, tenemos que en este elemento del
menú para agregarlos, presionaré T y como casa. Después voy a dar clic
aquí y dar clic en Copiar Pegar como y dar clic en
Copiar propiedades y venir aquí, seleccionar las propiedades de texto y
fase. Ahora tenemos esto sobre nosotros, así que duplicaré esta
casa presionando Alt. Después haré clic aquí y haré
clic en Copiar propiedad, luego venir aquí y dar
clic en primera propiedad. Entonces lo duplicaré
para uno, dos, uno, dos, tres, cuatro veces,
uno, dos, tres, cuatro. Ahora voy a cambiar esos textos. Éste será como, éste será como funciona. Este serán entrenadores, este será contacto. Ahora deberíamos tener
este texto alineado como horizontal actualmente
es como vertical. Entonces, para hacer eso, resaltaré todos
esos cinco textos presionando Mayús y
luego presiono Mayús A. Cuando presiono Mayús A aquí, se agregó al nuevo diseño automático. Podemos cambiar este
nombre de autodiseño como elementos del menú. No es necesario. Entonces lo que podemos hacer es
cambiar este diseño automático. Diseño en disposición horizontal. Ahora vamos a comprobar
el tamaño entre medias. El tamaño intermedio es 36. Hagámoslo en el medio como 36. Para ello, selecciona el
diseño automático y cámbialo a 36. Así. Ahora como siguiente paso, tenemos que poner esas
dos secciones o logotipo y sección elemento de
menú como en misma
disposición horizontal para hacer eso,
nuevamente, seleccionar el
diseño automático o conjunto de elementos de menú y logotipo presionando Mayús y presione Mayús A
para hacer un diseño automático. Entonces otra vez, cambiamos el
diseño automático a horizontal. Ahora en la alineación, hagamos que se alinee al
centro para que se alinee correctamente o tal vez se marcará un ritmo central
inferior de línea Ahora lo que tenemos que hacer
es en este espaciado, agregar este espaciado
es realmente fácil. Sólo tenemos que cambiar
el tamaño entre medias. Podemos cambiarlo manualmente, pero hay una mejor opción. Es decir, agregar esto entre
tamaño como para que me guste esto, entonces lo que tenemos que hacer es
cambiar esto para llenar contenedor. Ahora es perfectamente Line y desde aquí, podemos cambiar el diseño automático o el nombre del layout a
menu como este. Ver, es súper limpio
y súper fácil. Si queremos cambiar
alguno de esos detalles, solo
necesitamos
cambiarlo de una vez. Como ejemplo, si queremos
más espaciado como 50, solo
podemos presionar 50, pero en este caso, tenemos que ajustar
manualmente uno por uno. Entonces sí, es posible que te confundas
sobre el diseño automático, pero esto es realmente fácil
y vamos
paso a paso para que entiendas
completamente el diseño automático. Dentro de la sección de héroes, tenemos que crear esos
textos para hacer eso. Presiono T y doy click aquí, entonces lo haré en
este tipo de texto. Entonces copiaré directamente este texto y
lo pegaré así. Entonces voy a duplicar esto, clic en el texto y presionar el comando C o el control C para copiar y V para
pegar así. Entonces lo que tenemos que hacer es en realidad
lo necesitamos cuatro veces, entonces voy a cambiar esos textos así
porque en esta lección, nos enfocamos principalmente en el autoayou En futuras lecciones
aprenderemos más fondo sobre la tipografía
y Entonces ahora a partir de aquí
como primer paso, hagamos este botón. Vamos a crear este
botón y luego
podemos agregar espaciado y
hacerlo centro, pero como primer paso, hagamos un botón. Como hicimos antes, podemos presionar clic en el
texto del botón y presionar Mayús A. Entonces averiguaremos
la medición. Esos son 16, 60 ya que la parte superior e inferior y
la izquierda y la derecha son 20, haga clic en el diseño automático. Cambiemos su nombre
a BTN así. Entonces de aquí, izquierda
y derecha serán 220 y la parte superior e
inferior serán 16. Ahora, agreguemos este
color a este botón. Para ello, haz clic
en Icono rápido en relleno y haz clic aquí, clic en este icono luego haz clic en este, haz clic en este color. Diseñamos fácilmente
el botón perfecto. Bien. Ahora tenemos
en esto es espaciado, el espaciamiento en medio es
15 y aquí tenemos 20. Seleccionemos los elementos
que como espaciado como 15. Antes de hacer eso,
seleccionemos los elementos y presionemos Mayús A y
hagamos un diseño automático, luego cambiaré
este diseño automático como CTa y ahora tenemos que hacer
este diseño automático al centro Fácilmente,
lo haré como centro de línea y luego tenemos que poner esto
al centro para hacer eso. En el diseño de CTa, estableceré el ancho
como contenedor de campo Entonces tenemos que cambiar la altura para llenar el
contenedor de esta manera. Ahora se convierte en
centro y aún
tenemos que agregar el espaciado
para agregar el espaciado, seleccionaré el CTa. Hagamos el tamaño
intermedio como 20 pero aquí el tamaño
atractivo es 15, para arreglarlo, seleccione todos esos
elementos y presione Mayús A, luego haga que el tamaño de
invitación sea 15 Bien, perfecto. Simplemente diseñamos la
sección héroe con diseño automático. En la siguiente lección, diseñemos esta también. En realidad, si queremos,
podemos simplemente ponerlo
así y vamos a
verlo en la vista previa. Me veo así
20. Diseña la segunda sección del héroe con diseño automático: Hola a todos. Vamos a crear esta segunda sección de héroe
con diseño automático. Como nuestro primer paso, haga clic en el marco y seleccione
el tamaño del marco como escritorio, póngalo así y
cambie el nombre de este marco a Hero two con diseño automático. Ahora como lo hicimos antes, agreguemos la cuadrícula de diseño como esta. Bien entonces agreguemos el
diseño automático a este marco. Presiono Mayús A. Ahora haré hueco horizontal entre cero y el margen izquierdo y
derecho como uno para T, y la parte superior e
inferior serán cero. Ahora, veamos qué
tenemos que hacer primero. Primero, tenemos que
agregar estos antecedentes. Para ello, voy a dar
clic aquí y clic aquí y dar clic en
triángulo, dar clic en aquí. Entonces tenemos que ver como 1,440 de
ancho y 700 como alto. Creo que es 700 es 700 ok. Ahora, voy a dar click aquí y dar click en la imagen Video luego en la imagen. Esta es la imagen, da click aquí y
ahora tenemos que añadir color de
fondo como blanco
y la opacidad será de 90 Da clic aquí, haz clic en llenar, cámbialo a blanco
y esto será de 90. Ahora, ya ves por este margen
de 140, la imagen o el
fondo está aquí. Tenemos que seleccionar la imagen
de fondo. Haga clic en este icono de diseño
automático Igno. Ahora podemos agregarlo, ajustarlo como queramos, luego le renombraré como BG. Como dije antes, no
es necesario, pero voy a hacer eso. Después hago clic aquí
y creo un marco. El nombre del marco será héroe. Después agrego autoayout
seleccionando el marco hero
y presiono Mayús A. Luego configuro el ancho
como contenedor de relleno En realidad en lecciones anteriores, según recuerdo, no
expliqué los parámetros. Familiaricémonos
con esos parámetros. Primero, tenemos ancho fijo. Si seleccionamos
ancho fijo y podemos agregar con como cualquier cosa
que nos guste como 200, el objeto será 200. Hagamos que el objeto de relleno sea
de color y rojo. Bien. Tenemos que poner esta imagen de fondo como la
primera capa del marco. Sin eso, no
veremos el resto del marco. Aquí está el objeto o marco en el que estamos trabajando
actualmente. Si lo establecemos como 300, el ancho fijo será 300. Si lo configuramos como contenedor abrazo, será cuerda hasta que
otro artículo toque el marco. Como ejemplo,
vamos a crear un texto y hagamos este
texto como hola mundo, y hagámoslo como hola. Ahora el ancho es de 300
porque fijo. Pero si seleccionamos
el contenido del corazón, será cadena
al tamaño del contenido. Entonces, como ejemplo,
vamos a crear un rectángulo diferente aquí, así será justo de acuerdo con el ítem dentro de este objeto
o dentro de este marco. Ahora haz clic aquí y es posible que veas este espaciado
entre el marco. Eso es porque
dijimos los rellenos izquierdo, derecho, e inferior superior como diez, vamos a hacerlos cero para que
entiendas claramente Bien. Ahora tenemos contenedor de
llenado. Si hacemos clic en llenar contenedor, el objeto o el elemento se expandirá todo el
espacio libre que tenga. En este caso, agregamos un margen de partido como nuestra sección
héroe autoayout Este marco está dentro de
esta sección de héroe, tiene espacio
libre entre aquí, se expandirá hasta que ese
margen del lado izquierdo golpee en este marco. Eso es. A aquí como admin
ancho y añadir ancho máximo. Si hacemos clic en Admin width aquí, podemos agregar ancho mínimo. Si hacemos ancho mínimo
como 200 y hagamos ancho
mínimo 700 y ahora pensamos que
encogeremos esto así. Cuando lo encogimos, el
elemento o el marco
no se encogerán después de que el
ancho mínimo de 700 lo golpee. Si tenemos en ancho máximo como 700, el elemento estará
en ancho máximo como 700. El elemento tendrá
sólo ancho como 700. Entonces esos son un poco avanzados, pero puedes recordarlo. Yo diseño responsivo,
va a ser útil. Ahora esto aplica para
la altura dos. Lo dijimos como fix, podemos agregar fix con
un contenedor de llenado, contenedor abrazo, y
menta x altura. Empecemos el trabajo. Primero, eliminaré esos objetos
innecesarios, luego eliminemos el color de
relleno y seleccionemos la sección hero y
pondré con un contenedor de relleno, y tenemos que eliminar este
max y mean con así. Entonces la altura será de 700. Bien. Tenemos que establecer este tamaño
de marco como 1,440 Bien. Ahora aquí, tenemos que
añadir este logo y el texto. Simplemente presionaré Comando C para copiar esto y comando
V para pegarlo. Entonces solo seleccionaré todos esos elementos del menú y los
copiaré porque
no necesitamos hacer el estilo y además
tenemos este botón. En botón, solo copio el texto. El texto es blanco, así que comencemos con el botón. Aquí tenemos el botón, aislamos el botón
y pulsamos Mayús A. Entonces averigüemos el
botón con el hi, es 16 por 16 y 37
por 37 como su tamaño. Aquí está el marco del botón. Vamos a renombrarlo como VTN luego
rellenar con color negro. Entonces aquí, tenemos que agregar 37 como el
relleno izquierdo y derecho y 16 como rellenos inferiores
superiores
ahora tenemos que reducir el botón de esquina a
60 se crea Ahora lo que tenemos que hacer es seleccionar estos elementos del menú y desde aquí, tenemos los elementos del menú. El elemento de menú
entre el tamaño es 25, ven aquí así y
selecciona los elementos del menú y presiona Mayús A para crear un nuevo diseño automático o
agruparlo y agregar el diseño automático. Luego en el layout automático, tenemos que establecer el layout
horizontal. Entonces tenemos que agregar
entre talla como 25 Bien. Ahora tenemos que seleccionar
los tres elementos y presionar shift para hacer
un grupo y agregar un marco. Entonces tendremos que
hacerla disposición horizontal. Ahora se verá así. Ahora lo que podemos hacer es si
queremos, podemos cambiarle el nombre a esto. Cambiemos este nombre como menú y aquí elementos del menú como este. Luego haga clic en el diseño del menú y hagamos con
como contenedor de relleno. Y luego tenemos que establecer este ítem entre
tamaño como auto, presionar enter, en realidad
tenemos que
seleccionar este y establecer ítem entre
tamaño como auto, así. Entonces tenemos que hacerlo
centro para que sea centro. Tenemos que dar click aquí así. Se crea el menú
y ahora aquí
tenemos el margen superior como
sumando el pase superior 25. Hagámoslo 25. Selecciona esto y da click
aquí desde aquí, hazlo como 25. Perfecto. Ahora tenemos que agregar esta
bienvenida a mi sección de finanzas, estará dentro de
esta sección de héroes. Vamos a copiar todos
los de la foto aquí. Acabo de copiar de aquí así. Para esos botones,
tenemos que crear Disposición
diferente, solo
voy a copiar el texto y también
copiar solo este texto. Empecemos de nuevo con
los botones. Antes de hacer eso,
averiguaremos el botón
de entre lados. Son 18, 18, 24, 24. Haga clic aquí el desplazamiento de fase
A al diseño automático y esto será 24
y aquí habrá 18. Entonces el color de relleno
es de color negro. En realidad, tenemos que añadir el color del relleno será
negro y en apariencia, radice las esquinas como 60 Entonces tenemos que hacer lo mismo a
esto, aprender más botón. Res turno A. Luego agreguemos primero trazo, haga clic aquí y el
tamaño del trazo será de dos. Creo que es C, veamos. Sí, es uno. Entonces
hagámoslo como uno solo. Bien. Entonces, ¿tiene
el mismo ancho de realzar? Sí, no, tiene un ancho
incrementado como 33,
33, 33, 18, 80, 35, 30 Hagamos esto como no
éste como 35, 18. Y hagamos lo mismo aquí. Da click en este botón
Más información y aquí, hazlo como 35 18, luego reduce el as para sentarte. Después resalte resalte la pizarra esos botones y presione Mayús A, luego haga el diseño
como disposición horizontal. Espero que entiendas claramente esta opción con la
que estoy trabajando. Si no entiendes primero, solo juega con él. Hay que probarlo una
y otra vez para aprender. Al principio, yo hice lo mismo. Si tienes alguna duda, puedes simplemente preguntarme en
la sección de mensajes
o en la sección de comentarios. Aquí, tenemos espaciado como 30, aquí dentro, tenemos espaciado como 21. Verás, cuando creamos
diseño sin auto layout, podemos obtener cifras exactas. Como ejemplo aquí, tenemos la almohadilla inferior como 19, pero la almohadilla superior como 18. También aquí, tenemos
21 como en tamaño intermedio, pero debería ser 20. Con el diseño automático, podemos seleccionar
fácilmente aquí y cambiar
el diseño automático a dos. Por eso la capa de
aprendizaje de Oto será una gran ventaja. Después seleccionemos todos esos elementos y presionemos
Mayús A para hacer un grupo. Voy a renombrar este grupo como CTa y t N s BTN uno, BTN, dos así que ahora hagamos
esto entre tamaño ¿Es 30? Justo aquí
30, aquí hay 20. Para este 20, solo selecciona solo esos dos y cambiamos
luego esto a. Bien. Ahora lo que tenemos que
hacer es ponerlo en el centro. Para hacer este centro, voy aquí y pongo la altura
como contenedor de llenado así. Entonces estableceré esta alineación
como alinear centro izquierdo. Bien, está centrada, y ahora
tenemos que agregar esta imagen. Entonces esta imagen también desde
el exterior de nuestro diseño, por lo que no debe tener Outlet o debe
ignorar el Autoao Entonces primero, creo un
rectángulo como este y vamos a hacerlo con 710 y como 610 600. Bien, entonces puedo hacer que ignore Autoao y lo ponga
arriba así Entonces puedo dar propina a
cualquier parte como quiera. Entonces, por ahora, vamos a
agregarle imagen. Da clic aquí, haz clic en
Video de imagen y selecciona la imagen. Aquí está el indicado.
Da clic aquí, agrégalo. Entonces actualmente no se muestra, así que tenemos que ponerlo
así y luego darle click y cambiar campo para
recortarlo
y alinearlo así. Bien. Se completa
la primera parte. En realidad, tenemos que
poner esta imagen, esta. Bien. Ahora se ve bien. En realidad, tenemos que
poner esto esto o ahora lo que tenemos que
hacer es agregar esta sección. Es fácil agregarlo, creo un nuevo marco. Vamos a crear un nuevo
rectángulo como este, estará debajo de
la sección de héroe, no dentro del héroe. Ahora bien esto debería ser pongámoslo aquí y llevemos la sección de
héroes arriba de esto. Encontré el problema
desde nuestro marco principal, tenemos que establecer el diseño
como disposición horizontal
a disposición vertical. Bien. Ahora ya está aquí. Ahora
lo voy a cambiar con altura como 1,440 a 700 no 700
es el tamaño aquí 270. Vamos a probar 270. Bien. Y para éste, tenemos que hacer lo mismo. Vamos a dar click en Ignotayo
y ponerlo así. Bien, entonces
cambiarlo el color del campo a esto ahora lo que tenemos que
hacer es agregar el prime así y
cambiemos el nombre de este marco para resaltar creo que
para Sakura C resaltado Luego selecciónelo y
presione Mayús A para hacer el diseño automático y establecer
con el contenedor de llenado de guión. Y la altura será de
270 a 70 así. Bien. Ahora tenemos que
agregar esa información. Por ahora, voy a copiar
éste y poner el marco y ponerlo dentro del marco y tenemos que
hacer esto sobre el marco. Sin hacer eso,
no veremos los detalles del marco. Entonces a este diseño de marco, lo
haré como una
línea izquierda centro Bien, ahora tenemos que hacer
esos tres elementos, seleccionar este y vamos a
seleccionar este y copiarlo, pegarlo así. Copiarlo así. Entonces selet ambos objetos y presionaré Mayús A,
y luego el inbt queen
size check in es 15, Selt este y estableceré
inbuit Bien. Y también que sea centro. Hagamos centro. Bien. Ahora, hagamos lo
mismo con éste también. Al igual que esos dos objetos, presione Mayús A y
conviértalo en el centro 15. Ahora seleccionaré esos dos objetos y
presionaré Mayús A para hacer un nuevo diseño automático y estableceré el diseño
horizontal así. Ahora seleccionaré
este marco de resaltado y estableceré el diseño automático
como disposición horizontal. Bien. Entonces tenemos
que añadir éste. Vamos a agregarlo y seleccionar
esos dos objetos, presionar Mayús A, luego configurarlo
como centro de diseño vertical. Ahora veamos entre lados. El entre lados es 57,
resalte todos esos
marcos en realidad,
puedo poner esto dentro de este marco y seleccionar ese marco
y configurarlo como 57, luego voy a convertir este texto
a diseño automático presionando Mayús A y dar clic en el marco principal y establecer
con como contenedor de relleno, y aquí tenemos auto
como el tamaño intermedio. Se ajusta perfectamente.
Ahora si quieres, puedes renombrar, pero por ahora, no
voy a
renombrar así que aquí está, aquí está nuestra segunda
sección de héroe con diseño automático. El diseño, se
verá así. Ahora es tu turno, tienes que agregar
diseño automático a este héroe, sección de
tres héroes, jugar con Figma
e intentar hacerlo Te veo en
la siguiente lección.
21. Diseña la tercera sección del héroe con diseño automático: Hola a todos. ¿
Lograste hacer un buen trabajo? Si no,
hagámoslo aquí y primero, tenemos que crear un marco. Da click en el marco,
establece tamaños, escritorio, ponlo así, luego agregaremos cuadrícula de diseño. Después da click en esta grilla de llamadas. En realidad, no
necesitamos el diseño. Pero tener el diseño será fácil de identificar a dónde irá
el objeto. Entonces primero tenemos que agregar
este menú para hacer eso, presionaré el turno A para agregar el diseño
automático a este marco. Voy a cambiar el nombre de este marco
como 03 con diseño automático. Entonces voy a quitar todos estos detalles y aquí lo
voy a establecer como 140, nuestro margen izquierda y derecha
entonces voy a establecer esto como res de disposición vertical en
este alineado al centro. Ahora, tenemos que añadir este logo. Para agregarlo, tenemos que
crear un nuevo marco, hacer clic en este icono de marco
y crear un marco. Este tamaño de marco
será la altura es 223. Hagamos la altura 223
con este contenedor de llenado. Bien. Ahora tenemos un problema. No, podemos manejar ese problema. El problema es que
tenemos esta línea, pero nuestro marco sólo va a
venir aquí para acá. Entonces la línea no irá
hasta el final de este fotograma, pero no va a ser el
tema porque
podemos agregarla en la imagen de
fondo. Bien. Ahora tenemos que añadir este logo. Para agregar este logo, voy a crear un
rectángulo como este. En realidad, necesitamos agregar diseño
automático a este marco, pizarra el marco y presionar
Mayús A para agregar diseño automático. Entonces a partir de aquí,
hacer propiedades y su altura debe
ser 223 personas 223. Bien. Entonces aquí
tenemos que añadir este logo. El tamaño del logo es 192
como ancho y 92, y vamos a hacerlo alto como relleno ahora agrega ese logo a este
rectángulo así. La parte está terminada
y como la segunda parte, tenemos que agregar este conjunto de
artículos de hombre primero voy a copiar menú de
inicio luego sobre
servicio eléctrico y contactarnos. Voy a copiarlos todos hasta aquí. Entonces para esta casa, tenemos que agregar
esta pequeña flecha. Lo voy a copiar desde aquí. Después seleccionaré la
flecha y el texto de inicio, el texto de inicio, luego la flecha, luego presionaré Mayús A. Luego lo configuraré
como disposición vertical, y entre el
tamaño será cero. Veamos cuál es el
entremedio es 66 esto. Bien. Entonces para lo cual
estableceré con un abrazo C así. Entonces tengo que ponerla al
frente así. Luego seleccionaré todos esos elementos
del menú y presionaré Mayús A para hacer un
nuevo diseño automático del elemento del menú. Y veamos inten tamaño, es 50 entre el tamaño
tiene 50 así. Bien. Ahora tenemos que crear
esta sección us. Es muy sencillo. Primero necesitamos el circo. Vamos a copiar esos dos círculos
de aquí, ponlo aquí. Bien. Entonces lo que hago es
antes de agregar el icono de peón, tenemos que poner estos dos al centro Entonces para hacer eso, presionaré Mayús A y agregaré el diseño automático. Pero con el diseño automático, no
podemos hacerlo porque
los elementos no se colapsarán o los elementos no lo agregarán frente a otro
elemento en el diseño automático. Tenemos que hacer clic en este diseño de
Igno Auto. Seleccionaré estos dos círculos
y daré click en Igno Autoayout Entonces puedo hacer que se
centre así. Entonces lo que tenemos que hacer
es en este ícono de móvil, solo lo
voy a copiar de aquí. Y seleccione este marco, póngalo en el marco
dentro del marco, y yo haré lo
mismo por él también. Entonces seleccionaré los tres de esos artículos y
lo haré medio así. Bien. Ahora tenemos un problema. Este marco no es
trabajo como queramos, así que lo pondré fuera
del marco y lo retiraré. Después seleccionaré los tres
elementos y presionaré Comando G para agrupar E. Luego presionaré Mayús A para agregarle maquetación
automática. Entonces lo que tenemos que hacer es hacer
clic en este marco comió o vamos a cambiarle el nombre como menú como este y aquí elementos del menú aquí, icono del
teléfono, luego tenemos que
agregar esos dos elementos. Simplemente los agregaré
así y seleccionaré ambos,
presionaré Mayús A, luego agregaré diseño
vertical y agradable. Ahora puedo seleccionar
esos dos elementos y presionar Mayús A para hacer la para
agregar Otolaa a esta sección Entre el tamaño es toalla, así que solo la cambio a toalla. Bien. Todo bien. Ahora selecciono este marco
y lo pongo artículo entre tamaño a Otto y
distribuirá todo por igual. Bien. Ahora tenemos que agregar
esta imagen de fondo. Es muy sencillo. Simplemente haga clic en rectángulo
y luego establezca el ancho como 1,440 y veamos que la
altura altura es 577 Agreguemos la altura como 577. Bien. Ahora lo que tenemos que hacer es hacer clic en este ignootoaYou can, y ahora podemos agregar Da click aquí video, listan
la imagen así. Bien. Entonces tenemos que
agregar este trazo. Entonces copiemos el
color del trazo y hagamos clic aquí. Haga clic en PAs e interiores, set top y dos, entonces este será de este color Bien. Ahora tenemos que
crear esta sección. Vamos a crearlo como
primer paso, vamos a crear un marco. En realidad, no
necesitamos el marco aquí, pero voy a copiar esta parte
primero, ponerla así. Esta parte como este texto
del botón así. Voy a dar click en el marco y tenemos que poner este
texto a la izquierda. Da click así
y va a ir a la izquierda y aquí
tenemos un problema. Tenemos garantía del 100%
en la parte inferior, pero debe estar en la parte superior. Lo selecciono y doy click
aquí y lo pongo arriba. Entonces tenemos este botón
en el medio, él abajo. Bien, ahora voy a hacer clic en
Mayús A para hacer un botón. Por lo que los detalles del botón
serán 25, 25, 30, 30. Bien. Hagámoslo 30
como la izquierda y la derecha, 25 como la parte superior e
inferior, luego rellenemos color. Vamos a agregar este color de relleno. Bien, bien. Ahora tenemos que verificar
el intermedio. Tamaño para agregar entre tamaño, seleccionaré todos esos
elementos y presionaré Mayús A, luego el
tamaño intermedio será. Bien. En realidad, esto
debería ser cero. Este es el acolchado superior
e inferior
o acolchado vertical
debe ser de dos L. Bien. Ahora tenemos que hacer este centro. Para hacer este centro, tenemos que aplicar el
diseño automático a esto así. Entonces para hacer este centro, necesitamos tener un marco que tenga tamaño en esta imagen de
fondo
porque actualmente
esta imagen de fondo está ignorando el diseño automático Entonces debemos tener un marco que
no ignore el diseño automático, así que creo un marco y
presiono A entonces esta altura será 577, luego será relleno así. Entonces pondré este marco dentro del marco recién
creado así. Ahora está en el centro. Ahora puedo renombrar esto
como CTA ATN, así. Después seleccionaré este conjunto centro
alinear a la izquierda así. A aquí,
contenedor eléctrico Bien. Bien. Ahora es fab centrado. Creamos con éxito el
tercer héroe sección dos. Veamos el modo de vista previa. En futuras lecciones,
usaremos el diseño
automático para diseñar sitios web
más complejos. Solo creamos tres diseños. Si crees que el autodiseño
es tan complicado,
solo busca algún
diseño popular en Google e intenta
imitar y crear ese diseño
en Figma usando atoyout solo busca algún
diseño popular en Google e intenta
imitar y crear ese diseño
en Figma De esa manera
aprenderás más sobre autoayout y cómo usar
el autoayout de manera Te veo en
la siguiente lección.
22. Introducción al principio del diseño de UI/UX: Hola a todos. Hasta el momento, aprendemos sobre los fundamentos
de Figma y comenzamos a familiarizarnos con la herramienta y creamos algunos diseños
con características de Figma Ahora centrémonos en los principios de
diseño de YX. Cuando creamos un sitio web personalizado, debemos tener idea sobre los principios de
UIUX porque
si no aplicamos principios y el concepto de
UIUX a nuestro propósito de diseño del diseño o
el propósito
del sitio web En las próximas lecciones, aprenderemos sobre jerarquía
visual, maquetación,
tipografía, teoría del color, y debemos conocer los principios de UX para
diseñar sitios web personalizados Te veo en
la siguiente lección.
23. Jerarquía visual: Hola a todos. Imagínese
entrar en una habitación nueva. Necesitas saber dónde buscar primero y cómo
encontrar una forma de moverte. Eso es exactamente lo que hace la
jerarquía visual en el sitio web. Así que vamos a desglosarlo. jerarquía visual es la
forma en que organizamos las cosas en el sitio web para mostrar
lo que es más importante. Algunas cosas necesitan
llamar la atención de
inmediato mientras que otras
se pueden notar más tarde. Cuanto mejor sea la jerarquía, más fácil será usar el si. Agregar jerarquía visual
a nuestro diseño, tenemos que considerar
principalmente tres cosas. El primero es el tamaño, las cosas
grandes llaman la atención primero. Piensa en un
titular de periódico de gran bola. Destaca. Lo mismo ocurre con los sitios web. titulares o botones
que son importantes deben ser más grandes que
otras cosas de la página. Entonces tenemos que considerar el
color y el contraste. Los colores brillantes te llaman la atención, los colores
oscuros o apagados si quieres que algo
destaque como un botón, usa un color que destaque. Por ejemplo, un botón rojo sobre fondo blanco se
notará rápidamente. Entonces deberíamos considerar el
espaciado y la colocación. Tenemos que darle espacio a las cosas
importantes. Cuando agregamos más
espacio alrededor del elemento, se destaca más. Si las cosas están demasiado
juntas, puede ser difícil enfocarse. La jerarquía visual guía a tu
usuario a través de tu sitio web. Al ajustar el tamaño, el
color y el espaciado, puedes mostrarles lo que es importante sin que
se den cuenta.
24. Aprende sobre tipografía: Hola a todos. La tipografía
es simplemente cómo elegimos una fuente arreglada en un sitio web para que se vea bien
y sea fácil de leer Desempeña un papel importante en la creación de
una gran experiencia de usuario. Aquí hay algunas cosas rápidas que debes saber sobre la tipografía Tipo de letra. Esto se refiere al
diseño de la fuente como area times Nur Rome o Roboto Una fuente es una colección
de caracteres, letras, números y símbolos que comparten el mismo tipo de cara y estilo E. Entonces tenemos ancho de fuente. Esto se refiere al
grosor de la fuente, como regular viejo o. Entonces tenemos fonttyle. Esto incluye variaciones
como itálica, oblicua o condensada. Al elegir un
tipo de letra para tu sitio web, elige
siempre sobre esas
cosas primero legibilidad Elige una fuente que sea
fácil de leer en pantallas. Evite superponer fuentes decorativas
o complejas. La consistencia se adhiere a
un número limitado de
tipos de letra a lo largo de su
sitio web para mantener una cohesión mi recomendación es usar
solo dos tipos de fuentes, una para titular y
otra para Entonces deberías considerar
sobre la identidad de marca. Tu tipografía debe reproducir personalidad y los valores de
tu marca Entonces hay que
considerar sobre el contexto. Eso significa que el contenido
y propósito de tu sitio web influirá en
el tipo apropiado así que aquí tienes algunos consejos
para una buena tipografía Utilice el tamaño de fuente diferente con un estilo para crear una jerarquía visual
clara, asegurar el espaciado adecuado entre letras y palabras para
una legibilidad óptima Crear contraste entre el texto y el fondo para
mejorar la legibilidad Mantenga las líneas de texto a una longitud razonable
para evitar la fatiga visual. Después elige colores de texto que sean fáciles de leer y
complementen el fondo. La tipografía es una clave para que
tu sitio web sea fácil de leer
y que aparezca visualmente
25. Aprende sobre la fuente: Cuando se trata de fuentes, a menudo
escucharás hablar de
serif y Cancerif La fuente Serif tiene etroke pequeño
al final de sus letras. Piense en
las neuronas del tiempo o Georgia. Son geniales para crear un ambiente tradicional y
formal y a menudo se usan para largos pasajes de texto
como en libros o blogs. Por otro lado,
Sanserifont no tiene esos extra Etroke
aéreos Helvatica esos extra Etroke
aéreos Helvatica
y Robot son ejemplos. Esos teléfonos son atrevidos, modernos y geniales para
títulos o titulares. También funcionan bien en dispositivos
móviles porque
son claros y fáciles de leer. Veamos qué tipo de
marca y qué tipo de diseño usarán esos teléfonos
Sans y Sanserif Así que recuerda siempre
la legibilidad del sabor. Aquí. Aquí.
26. Cómo encontrar fuentes con Google Fonts: Hola a todos. Ahora
sabemos de tipografía Averiguemos dónde y cómo
encontrar tipografía de escritura
para tus proyectos El mejor lugar es Google Phones. Puedes acceder a
los teléfonos de Google yendo a phons.google.com y
llegarás a Aquí, tenemos muchas
fuentes para elegir. Así que podemos simplemente desplazarnos hacia
abajo así y encontrar mejores fuentes o podemos usar estos filtros para
filtrar las fuentes hacia abajo. Busquemos fuentes para titulares. Aquí, estableceré el tamaño del
titular como 60. Vamos a probar 60. Aquí, podemos escribir titular
real. Voy a agregar algo
como tu guía para un estilo de vida equilibrado y
saludable, y luego me
saltaré este idioma. Aquí, tenemos el tipo
Serif y sensori, por lo que seleccionaré solo Ahora obtenemos las fuentes filtradas, ahora podemos checar a través de
ellas y encontrar la mejor fuente. Aquí, tenemos
esta última fuente, así que haré click sobre ella y después podremos encontrar más
sobre esta fuente. Entonces, si agregamos esta
fuente a los párrafos, se verá así, y nuestro plan es
agregarla a encabezado. Entonces ahora voy a dar click en este botón de fuente G y se agregará a esta sección de fuentes
seleccionada, y nuevamente, iré a fuentes. Ahora necesito encontrar una
fuente a párrafos. Para ello, voy a añadir aquí este
tipo de párrafo. Después cambiemos
el tamaño a como 20 y seleccionaremos
el teléfono sensorial. Aquí, podemos comprobar las fuentes que son adecuadas
para nuestro proyecto. Encontrar esta fuente
siempre depende
del tipo de sitio web que estés
diseñando. En este caso. Este es un sitio web
para preparador físico, por lo que seleccionaré este sentido de
trabajo y aquí, podemos verificar los detalles. Entonces, si añadimos
esto, se verá así. Ahora podemos dar click en
este teléfono de Gate. Después de dar clic aquí, pueden encontrar las fuentes
que seleccioné. En Figma, tenemos
Google font library. Voy a abrir nuestro
archivo Figma y aquí, vamos a seleccionar
éste y voy a dar click en esta fuente y aquí
tenemos la fuente Aquí, podemos seleccionar fuentes de
Google y ahora
podemos obtener las fuentes de Google. Si seleccionamos estas fuentes RL, podemos encontrar fuentes E. Esta es la manera más fácil de encontrar
fuentes para nuestros proyectos. Voy a ir a fuentes y si
te gusta comprobar las fuentes SEI, podemos dar click aquí
y tendremos la fuente SE que podremos
usar en nuestra página web. Tengo pocas lecciones, usaremos este sitio web de fuentes de Google para
seleccionar fuentes para nuestro proyecto.
27. Cómo usar la psicología del color: Los colores juegan un
papel crucial en el diseño web, influyendo en cómo los usuarios perciben tu sitio web e
interactúan con él. ¿Qué es la psicología del color? psicología del color es
el estudio de cómo los colores afectan nuestras emociones,
modos y comportamientos. Diferentes colores evocan diferentes sentimientos
y asociaciones Por ejemplo, el rojo suele
asociarse con la energía, moda y la emoción,
mientras que el azul se vincula confianza y la confiabilidad. Es por eso que marcas como Coca
Cola usan el rojo y marcas como vinculadas y la mayoría de los bancos de confianza usan el azul como sus colores principales. Entender en psicología del color puede ayudarte a crear
sitios web que resuenen con tu público
objetivo y evocan las emociones deseadas Aquí hay algunos consejos. Elige colores que se alineen con la personalidad de
tus marcas y ¿
qué emociones
quieres evocar en tus usuarios Asegúrese de que su texto y gráficos sean fáciles de leer y
visualmente atractivos. Experimenta con
diferentes esquemas de color para ver qué funciona mejor. La teoría del
color y la psicología del color son aspectos esenciales
para el diseño web. Al comprender cómo el color afecta nuestras emociones
y comportamientos, puedes crear un sitio web que
no solo sea visualmente atractivo, sino también emocionalmente fascinado Consulta esta guía de emociones de color. En esta guía, verás mucha marca popular
y sus colores de marca. Además, verás
detalles sobre las emociones, ánimo y los comportamientos
de esos colores. Descarga esta imagen en la sección de recursos y
estudiala cuando crees un sitio web que no
tenga un color de marca o si intentas
rediseñar su marca, usa esta guía emocional colores
y crea colores que adecuados para su marca y te veo
en la siguiente lección
28. Qué son las reglas 60-30-10: En diseño de interiores, tenemos un
concepto llamado regla 603010. Podemos aplicar esta
regla 603010 para nuestro sitio web personalizado. Esta regla ayuda a que tu sitio web se vea
equilibrado y atractivo. ¿Cuál es la regla 603010? La regla 603010 divide el color
en tu diseño para lograr armonía. Así es como funciona. El 60% es tu color dominante. Debe cubrir la mayor parte de su sitio web y establecer
el estado de ánimo general. El 30% es tu color secundario. Soporta el
color dominante y la profundidad añadida, 10% es tu color de acento. Utilízalo para resaltar el botón una característica importante
para llamar la atención. Averiguemos cómo usar esto. Comienza escogiendo
tus paletas de colores, selecciona un
color dominante para tu marca, un color secundario
que vaya bien con él y un
color de acento que resalte, luego usa el color dominante para el fondo y el área principal El color secundario funciona bien
para barras laterales y titulares. Reserva el
color de acento para botones y. Siguiendo esta combinación
de colores, mantenga su sitio web con un aspecto limpio y organizado,
evitando la sensación caótica Después de aplicar la regla 603010, obtenga comentarios de usuarios reales, vea cómo se sienten sobre
el color y el diseño Después haga los cambios necesarios. Además, recuerda que esta es una regla, lo que significa que podemos romper reglas. Si crees que la regla 603010
no será la mejor para algunas de las secciones de
tu sitio web, puedes cambiarla Veamos algún ejemplo que efectivamente use
esta regla 603010 Usted ve 603010 regla es una gran guía para hacer
atractivo diseño web Al usarlo, su sitio web se
sentirá equilibrado y atractivo.
29. Qué es el diseño centrado en el usuario: Hola a todos.
Hablemos de un
concepto muy importante en diseño web, diseño centrado en
el usuario y por qué
es crucial para los sitios web. diseño centrado en el usuario significa crear un sitio web
que se centre en lo los usuarios necesitan y quieren en lugar de diseñar para
lo que crees que se ve bien. Diseñas para que las cosas sean fáciles y útiles para las
personas que visitan el sitio. Pensemos en ello como la
construcción de una tienda. Arreglarías todo
de una manera
que facilitara a los clientes encontrar
lo que buscan. Si las cosas son difíciles de
encontrar y confusas, gente saldrá de la tienda
sin comprar nada. La misma idea
se aplica a los sitios web. Un sitio web debe resolver un problema o satisfacer una necesidad para el usuario. Si no es así, los visitantes
se irán rápidamente. Estas son algunas razones por las enfocarse en el usuario
es tan importante. Cuando haces que el sitio
sea fácil de navegar, las personas pueden encontrar rápidamente
lo que buscan. Esto significa que más personas
permanecen en tu sitio. Cuando los usuarios sienten que el
sitio web está hecho para el, es más probable que se
queden más tiempo y exploren más. Si el usuario puede encontrar fácilmente lo que necesita como
producto o información, es más probable
que tome medidas, ya sea vincular algo
o registrarse o contactarlo. Veamos ejemplo. Digamos que diseñas un sitio web
para una tienda de comestibles local. Si la mayoría de los clientes vienen
a comprar arroz, verduras y epe, te asegurarías de que sean fáciles de
encontrar en la página de inicio También agregará la barra de búsqueda
clara y tal vez incluso sugerirá
productos relacionados para facilitar las compras. Veamos otro ejemplo. Si los padres usan un sitio para
consultar las noticias escolares
o los resultados de los exámenes, esos enlaces deberían
ser fáciles de encontrar directamente en la página de inicio
con etiquetas claras. Aquí hay algunos consejos
simples para
asegurarse de que su sitio web se centre en el usuario. Antes de diseñar, pregúntate
¿quién está visitando el sitio? ¿Qué quieren hacer? Conoce cuándo tu audiencia es clave. Como puedes investigar un poco
sobre tus competidores y averiguar qué tipo de diseño y tácticas utilizan
en su sitio web. Entonces los usuarios
nunca deberían sentirse perdidos. Use
etiquetas de menú claras y botones que les ayuden a
moverse por el sitio fácilmente. Además, muchos usuarios en
todo el mundo
también usan su teléfono Asegúrese de que su sitio web también
funcione bien en dispositivos móviles. No sólo eso, no
confíes solo en tu propia opinión. Muestre el sitio web a usuarios
reales y vea cómo
interactúan con ellos. Sus comentarios
te ayudarán a mejorar el diseño. En el corazón de un
sitio web exitoso está el usuario. Al enfocarse en lo que necesitan y asegurarse de que el
sitio sea fácil de
usar, creará un sitio web más
efectivo que haga que los visitantes regresen. Recuerda, el diseño no se
trata solo de cómo se ve un sitio web, sino de cómo funciona para
las personas que lo usan.
30. Qué es el principio de KISS: Hola a todos.
Hablemos del principio del beso. Beso de pie para
mantenerlo simple, estúpido. Cuando diseñamos sitios web, necesitamos asegurarnos de que
el usuario pueda encontrar lo que busca de
forma rápida y sin confusión. Si un sitio web es demasiado complicado, visitante podría
frustrarse y irse. Entonces siguiendo el principio del beso, asegúrate de que nuestro
sitio web se cargue rápidamente, fácil de navegar y
tenga un contenido claro. Entonces, cómo aplicar en diseño web. Vamos a desglosarlo
en unos pocos pasos. En primer lugar, simplifique el diseño. No abarrotes tus páginas
con demasiados elementos. Un
diseño limpio y simple facilita que los usuarios se centren en
lo que es importante. Utilice una navegación clara. Mantenga su menú y enlace
simples y directos. No tienen demasiadas categorías. Me apago a lo básico para que
los usuarios no se pierdan. Usa menos colores y fuentes. Un esquema de color simple y una a dos fuentes suelen ser
suficientes para profesionales. Demasiados colores
o fuentes pueden hacer que el sitio web se vea desordenado
y difícil de leer En las clases de tipografía y psicología
del color, aprenderemos sobre el
beneficio de tener dos fuentes
y la regla 603010 para mantener la armonía del color de
nuestro Entonces hay que enfocarte en
el contenido esencial. Mostrar primero lo más importante. Por ejemplo, en el sitio web de
atención médica, es posible que el
paciente quiera saber para reservar una cita
o encontrar un médico. Haz que esa información
sea fácil de detectar y luego prueba con usuarios reales. A veces lo que pensamos que es simple puede ser aún
confuso para los demás. Siempre prueba tu diseño con usuarios
reales para ver si
pueden navegar fácilmente por el sitio
y entender el contenido. Piensa en la página de inicio de Google. Google es uno de los sitios web más
simples que existen. Solo un logotipo, una
barra de búsqueda y botones. Sin embargo, es uno de los sitios más efectivos
jamás creados. ¿Por qué? Porque está atado al principio
del beso.
31. Aprende sobre el alcance del proyecto: Hola a todos.
Hablemos del proyecto ICO. Piense en Project iCoV como un
mapa del viaje de su sitio web. Te ayuda a que se esté perdiendo, cometiendo errores o tardando demasiado en terminar tu sitio web. Saber lo que se
necesita antes de empezar a diseñar
es esencial. Imagínese construir una casa. ¿No empezarías sin saber cuántas habitaciones necesita qué material usar? Lo mismo ocurre con el diseño web. Project iCope te ayuda a
entender las necesidades del cliente, ¿quieren un sitio simple
o uno grande, una línea de tiempo ¿Cuánto tiempo tienes para terminar? Entonces presupuesto, luego características
clave como, ¿
habrá un blog, tienda
online o sistema de reservas? En la siguiente lección, comenzaremos a definir nuestro
proyecto ICO nuestra primera web. No obstante, a veces incluso con el proyecto disco, ocurren
retos. Si un cliente quiere más
salarios o características más adelante, eso no
va como planeas. Para evitar ese tipo de temas, tenemos que establecer
expectativas claras desde el principio. Háganles saber el tiempo y costo para agregar nuevas
funciones más adelante. Crear un contrato es la
manera de manejar esos temas.
32. qué es un mood board: Hola a todos.
Hablemos de los mood boards y por qué son tan especiales
para encontrar diseño, inspiración y entender
lo que están haciendo los competidores. Entonces, ¿qué es un moodboard? Un moodboard es como un collage
digital que muestra el estilo y la sensación que
deseas para tu Es una excelente manera de hacer una lluvia de ideas visualmente antes de
comenzar a diseñar ¿Por qué necesitamos un mood board? Empezar de cero
puede ser duro. Un moodboard te ayuda a recopilar inspiración de
diseño
de otros sitios web
y sitios web de tus competidores. No sólo eso como
banners por lo que los anuncios relacionados con la marca de
tu empresa o incluso otro diseño que sea
chispa tu creatividad. Es fácil desviarse
por las nuevas tendencias. Un moodboard te mantiene
encaminado al recordarte
tu visión original Antes de diseñar,
mira lo que están haciendo tus
competidores. Un mood board te permite crear
y comparar su diseño, para que puedas crear
algo aún mejor. Entonces descubremos cómo
crear un moodboard. Primero, consulta el
sitio web en tu campo. ¿Qué te gusta o no te gusta? Después consigue capturas de pantalla y guarda imágenes que
te inspiran. Entonces, dónde encontrar inspiración de
diseño Crear Moodboard.
Puedes consultar directamente sitio web de
tu competidor
y buscar diseños de sitios web en sitios web como Dibble,
Pinterest, Figma
Community Por lo pronto crearemos un moodboard y una inspiración de
diseño genial para hacer nuestro primer
33. Cómo crear una paleta de colores: Hola a todos. Ahora conocemos la teoría del color y la psicología
del color. Vamos a crear nuestra
primera paleta de colores. Utilizo este
sitio web coolers.co para generar
la paleta Entra a este sitio web, luego haz clic en Ita el generador, y eliminaré
este de aquí. De acuerdo con la regla 603010, solo
necesitamos tres colores Voy a quitar dos de ellos. Ahora tenemos tres colores. Consigamos nuestro ejemplo
como sitio web de bienes raíces. Ahora estoy en la imagen de la guía de
emociones de color, así que agregaré esta URL de imagen
en la sección de recursos. Aquí para el sitio web real istate, la
imagen principal de marca será la confianza y podemos considerar
sobre la claridad De acuerdo con esta
imagen en color se puede seleccionar uno de los colores como azul y uno
de ellos como este color naranja. Sigo teniendo dudas, podemos ir a Google
y buscar algo así como diseño de banner realista Entonces iré a estas
imágenes en las imágenes, podemos ver muchas de ellas
tiene color como el azul y algunas de ellas tienen algunos colores con el azul oscuro
y el naranja. Consigamos otro ejemplo. Ahora creo que necesitamos colores de marca
o colores de sitios web para el negocio de los
helados. En ese caso,
podemos seleccionar el rojo. Tiene la emoción
y será perfecto. Como podemos seleccionar
este color amigable. Si vamos aquí y busquemos como pancarta de negocio de
helados y aquí tenemos algunas imágenes y muchas de
ellas tiene el color como rojo. Ahora vamos nuestro
primer ejemplo de diseño, ese será el inmobiliario. Voy a volver y aquí dentro, seleccionaré este diseño para que podamos conseguir este color
azul para hacer eso. Voy a ir a este coolers.co y voy a poner en él este lado, entonces voy a dar click aquí y
voy a poner en este lado, luego minimizar esto
y ahora tenemos nuestro primer color como
azul para seleccionarlo, doy click aquí y aquí, tenemos esta Simplemente hago clic en él y ahora puedo seleccionar el
color así. Este será el
color azul y aquí dentro, necesitaremos
tener colores blancos. Voy a establecer esto como color blanco. Entonces haré clic en este
Toggle log para registrar este ítem, así este color no cambiará, entonces también registraré este. Entonces tenemos que encontrar
nuestro tercer color. Para encontrar nuestro tercer color, presionamos Mayús en el teclado, podemos ver este tipo de
cambios en el color, pero en nuestro caso, podemos selt color amarillo Además, si vamos a esta guía de emociones de
color, podemos seleccionar este color verde, pero en este caso,
seleccionemos este color naranja. Aquí, seleccionaré
aquí y selet el picker, seleccionaré el color naranja Si quiero, puedo cambiar
el color por ahora, lo
voy a poner así. Ahora me aumento el tamaño de esta ventana aquí va a
ser nuestro árbol de colores. Ahora hay un problema. Cuando seleccionamos color, tenemos que comprobar siempre sobre el contraste
la legibilidad Hay una herramienta para
verificar este contraste. Para ello, iré a color.adob.com y luego
llegarás a Aquí, voy a dar click en Vs y después tenemos esta herramienta de
accesibilidad, checkbox, así que solo la
selecciono y cruzo esta Aquí, podemos comprobar el contraste y la
legibilidad de los colores. Ahora vengo aquí y copio este código de color y
pongámoslo como color de texto. Entonces voy a cambiar el color de fondo
a blanco B F aquí. Ahora la relación de contraste está bien, pero si tenemos este color, será padre prueba
para 17 fixel y Blofon Aquí comprobarás que falle. Si lo aumentamos, se
mejorará
el contraste de color y
acelerará la prueba. Ahora tenemos que cambiar
este color un poco más oscuro. Lo voy a poner así. Esto. El motivo es que si elegimos estos colores
a nuestro sitio web, tendremos que agregar párrafo
a este color azul. Copo este
código de color y vengo aquí. Entonces lo ven la relación de
contraste está bien y vamos a cambiar el
fondo se verá genial. También a continuación compruébalo con
este color naranja. Para hacer eso, estableceré este color de
texto como este y agreguemos esto Agreguemos
este color como color B. Bien. También pasé la prueba, pero si esto hace más brillante, lo será, también
pasa el sabor. Cambiemos el color del texto
y el color de fondo. Voy a trabajar perfectamente y veamos si funciona
con el color blanco. A ver. Cuando añadimos esto al color del
texto y al
color de fondo como blanco, esto será lo que significa que
solo podemos usar este
color naranja con colores azul oscuro. Al seleccionar paleta de colores a su sitio web siempre verifique el contraste de color
y esto ayudará a mejorar la legibilidad
de nuestro sitio web También recuerda, la mayoría de
las veces los colores blanco y negro
serán dos de los colores de nuestro sitio web, pero a veces el color negro será un
poco menos oscuro. No obstante, la mayoría de las veces, esos dos colores
serán los colores que usemos como nuestro fondo
y colores de prueba. Entonces tenemos que encontrar nuestro color
primario y
podemos seleccionar ese color primario acuerdo con el
color emotion guin. En este caso, lo
seleccionamos como azul.
34. Comprender los pasos de diseño web personalizado: Hola a todos. Acabo de crear un paso para completar
un proyecto de diseño web. Este es el Estep esencial
que vamos a utilizar
para crear un
sitio web exitoso para nuestros clientes Puedes usar esta lista y seguir la ITF cuando
diseñes un sitio web para clientes
reales y también podemos usar este Estep para completar
este curso Primero, tenemos la reunión con el
cliente. Es para entender
el objetivo,
las necesidades y expectativas del cliente . Entonces crea contrato. Definirá entregables, cronogramas y Entonces el cliente acuerda
con el contrato, vamos a
iniciar el diseño. Como primer paso, crearemos un
moodboard y reuniremos inspiraciones de diseño y diseño De esa manera, podemos comprobar
cómo nuestros competidores utilizan su sitio web para resolver su problema y
ayudar a sus clientes. Crear moodboard es realmente importante para inspirarnos, así que no solo estamos
copiando diseños web, vamos a comprobar el
aspecto de ese diseño web mejor versión
y crear un sitio web único Entonces tenemos que
crear un mapa del sitio. El mapa del sitio es para entender
qué tipo de páginas tiene
nuestro sitio web y comprender y planificar
la estructura del sitio web. Entonces tenemos que seleccionar
fuentes para nuestro sitio web. Cuando seleccionamos fuentes, hemos elegido tipografía
que coincidan con la marca y esas fuentes deben ser legibles y fáciles de entender Entonces tenemos que seleccionar colores. Así que tenemos que crear
una paleta de colores que se alinee con la identidad de
marca. Entonces, ¿te acordaste de la regla 603010? Utilizaremos la regla 603010 para
crear la paleta de colores. Entonces tenemos que crear UI. Se trata de diseñar la
interfaz de usuario con el
icono de botones y el diseño. Por lo que usamos Figma para
diseñar esas UI y al crear sí antes
de diseñar el sitio web, nos
ayudará a dar comprensión
clara
sobre el sitio web, buscar a nuestro cliente Entonces podremos obtener sus comentarios y
hacer los cambios necesarios Entonces hemos generado contenido. Se trata de escribir y recopilar imágenes de
texto y
medios para el sitio web. En la reunión con el cliente,
podemos pedirle contenido al cliente y decirle que
usamos la IA para generar contenido. Entonces mientras diseñamos la
sección de sitio web, podemos generar contenido. Entonces tenemos que
elegir una plataforma. Entonces en este caso, seleccionaremos WordPress
como nuestra plataforma, y se trata de instalar
el WordPress e instalar complementos
necesarios y luego
tenemos que diseñar el sitio web. Se trata de construir e instalar el sitio web de
acuerdo con el diseño de la interfaz de usuario. Después
configuraremos la herramienta de análisis. Se trata de instalar herramientas
como Google Analytics, Google recapture, Google Search Console para verificar
el rendimiento de seguimiento Entonces tenemos que configurar formularios, lo que significa que si
creamos un formulario de contacto, formulario registro, formulario, tenemos que asegurarnos de que
funcione a la perfección. Entonces tenemos que
mejorar la seguridad. Mejorar la seguridad significa
configurar certificado SSL, instalar complementos de seguridad
y complementos de respaldo. Entonces tenemos que mejorar la
velocidad del sitio web. Usaremos plugins para hacer esto. Después de eso, podemos cargar el sitio web y luego
si proporcionas soporte posterior, ese será el último paso
que tengamos que dar. Este es el ETF y la
mayoría de esos ETF, es mejor
informar las actualizaciones Siempre es mejor informar a nuestro cliente sobre las
cosas que hicimos. Como ejemplo, si creamos un mood board y podemos
compartirlo con nuestro cliente y podemos dejar que elija secciones o comparta su opinión
sobre los diseños. Entonces mientras
diseñamos el sitio web, podemos hablar con el
cliente y obtener feed también cuando seleccionamos imágenes, si el cliente no proporciona
esas imágenes, podemos recopilar pocos enlaces de imágenes y compartirlo con el cliente. Él elegirá la mejor
imagen para el sitio web. Tener una conversación saludable con cliente y recibir
comentarios de él nos
ayudará a completar nuestros sitios web sin
obtener muchas revisiones. Comencemos el proceso de diseño.
35. Crea una lista de verificación de propuesta de proyecto y requisitos: Cuando obtienes un
proyecto de diseño web de un cliente, debes tener una manera de obtener información
clara sobre los requisitos del
cliente
y una breve idea sobre el sitio web que
vas a crear. No solo eso, también, debes definir claramente lo
que proporcionas a tu cliente y cuánto costará y el marco
de tiempo del proyecto. Para lograr esas dos tareas, debemos tener
lista de cuestionarios y contrato. Si abres este archivo completo de comunidad
FEMA de recursos de diseño
web personalizado , verás la sección
llamada Proyecto ICO En este proyecto Icope tenemos esta tabla que llamó requisito de diseño
web Cuando contactas a tu cliente videollamada o simplemente
mandas un mensaje de texto a tu cliente, puedes pedir esta información y obtener la respuesta
de los clientes. De esa manera
tendrás todos los detalles que quieras para diseñar un
sitio web personalizado para tu cliente. Cuando llene esta lista de verificación de
requisitos de diseño web, tendrá toda
la información que necesita para
comenzar el proyecto. También este archivo es un editable. Puedes hacerle esas preguntas a tu cliente o puedes
compartir este archivo con tu cliente haciendo clic en
este botón de compartir y luego seleccionar esto
cualquiera puede editar, luego hacer clic en Guardar y
hacer clic en Copiar enlace. Entonces abramos
esto en Nueva Ventana. Ahora el cliente puede editar este archivo
cuando inicie sesión en el Figma. Además, al hacer esto, puedes crear un nuevo archivo Figma Vamos a Figma y hagamos
clic en Nuevo archivo de diseño. Entonces puedes simplemente dar click aquí y presionar
Control o Comando C, luego pegarlo aquí. De esta manera,
comprenderás claramente el proyecto. Aquí, puedes agregar
el nombre del proyecto como doctor John
limpiando así. Entonces puedes compartir este
archivo con tus clientes. Entonces puedes simplemente dar
click aquí y editar esta respuesta cuando
responda a esas preguntas. Después de obtener toda
esa información, puede crear una propuesta de proyecto. Esta es una propuesta de proyecto simple pero
efectiva que puedes usar con proyectos de
diseño web y darle comprensión
clara al
cliente sobre lo que haces y cuánto costará
y qué tipo de método de pago
aceptas, cosas así. Lee propuesta y
tendrás que cambiar los ítems en estos soportes de
acuerdo a tu proyecto. La manera más fácil es presionar Comando o Control F. Luego busque
este soporte así. Entonces se pueden ver los lugares en los
que se encuentran los soportes. No solo puedes cambiar los entregables del
proyecto y la estructura de
pago de la duración
del proyecto, o puedes editar toda esta información acuerdo con tu proyecto
en las próximas lecciones, te
mostraré cómo
editarla para nuestro primer proyecto Voy a cerrar esta. También en esta lista de comprobación de
requisitos de diseño web, si necesitas agregar más columnas
o agregar más información, simplemente
puedes seleccionar
el pro y presionar Control C o Comando C y control o comando
V para pegarlo. Ir a través de los requisitos
de diseño web y propuesta de proyecto. Además si crees que este requisito de diseño
web o plantillas de propuesta de
proyecto necesitan más información o más mejoras, solo
puedes enviarme un mensaje
directo o
elogiarlas y voy a actualizar si
es un cambio necesario
36. Lista de verificación de Project 01: Hola a todos. Este es nuestro proyecto de prensa
y aplicaremos todo lo que aprendamos aquí y diseñaremos
sitio web personalizado desde cero. Este proyecto es ficticio, lo que significa que todos los detalles de este proyecto
solo con fines
educativos y el contenido que
utilizamos para este sitio web
son contenidos ficticios Como primer paso, tenemos que recopilar
información y llenar esta lista de verificación de
requisitos de diseño web. Ya lo hice y
pasemos uno por uno. Cuando intentas recopilar
esa información con clientes reales
para tu proyecto real, siempre consigue su opinión y
entiende lo que necesitan. Entonces te damos una sugerencia. Esto es realmente importante. No intentes dar sugerencias ni
darte versiones a ellas. Basta con escuchar
sus requerimientos y luego dar sugerencias
una mejora. De esa manera, tendrás
una gran comunicación con tu cliente y
podrás recabar
la información. Aquí, primero, nuestra pregunta
será ¿cuál es el nombre del cliente? En este caso, el nombre del cliente es doctor John Bennett y
¿cuál es el nombre de su empresa El nombre de la empresa es
JB Family Clinic, y ¿cuál es su dirección de correo electrónico, clínica
JB en mail.com ¿Tienes un sitio web? En caso afirmativo, ¿cuál es la URL? Aquí, este cliente no
tiene sitio web existente, así que lo configuré como NANA
no disponible Entonces tenemos la sección de
visión general del proyecto aquí. ¿Cuál es el propósito
del sitio web? El propósito es proporcionar información de
atención médica,
permitir solicitar citas, compartir recursos de salud
para las familias, aumentar la visibilidad de la clínica y fomentar
las conexiones con la comunidad. Entonces tenemos ¿quién es
tu público objetivo? El público objetivo son las familias
locales y las
personas que buscan servicios de atención médica
confiables y luego los padres buscan atención
pediátrica , salud
mental y servicios de
bienestar familiar. Entonces tenemos, cuáles son el objetivo
principal del sitio web. Los objetivos principales son mejorar la presencia en línea del cliente
para atraer nuevos pacientes, comunicar
claramente los servicios
disponibles y las especialidades de las familias, luego brindar recursos
educativos sobre temas de salud familiar. Entonces nos cuestionamos. Hay sitios web que te gusten
el aspecto y aquí tenemos algún sitio web URR siempre pregúntale a tu cliente sobre un sitio web
similar a su idea Esta es la mejor manera de
entender sus requerimientos. Entonces puedes preguntar
qué estilo de diseño prefieres cliente puede ser
entender esta pregunta, así puedes saltarte estas preguntas o si
conoce sitios web, él dirá qué tipo
de sitio web quieren. En este caso, sitios web de diseño limpio y
moderno y luego ¿tienes
colores de marca o pautas? En este caso, no
estará disponible. Pero la mayoría de los casos,
crearás un sitio web para marcas
existentes, lo que significa que tienes que seguir las pautas de color y
tienes que usar sus propios logotipos. En algunos casos, van a
cambiar la marca de su compañía. En ese caso, no te darán colores de
marca ni
otras pautas. Entonces ¿tienes un logo? No está aquí, tenemos contenido y características. Tenemos preguntas llamadas ¿cuántas páginas necesitará
tu sitio web? En este caso, tienes que hacer tu investigación antes de
contactar al cliente. Simplemente consulta sitios web similares y hazte una idea
sobre el sitio web. Entonces averigua qué tipo
de páginas tienen y cuáles son las páginas
más importantes y cosas así. Pero si no tienes ninguna idea, solo pregúntales
sitios web similares que les gusten. De esa manera,
podrás hacerte una idea. Sin embargo, si no tienen sitios web
similares o
sitio web de muestra para mostrar en ese caso, puede hacer su propia investigación
y encontrar sitio web relacionado con este nicho y encontrar lo que hacen lo más
importante, no
vamos a
imitar esos sitios web Vamos a reunir esa inspiración de diseño y
crear un sitio web único. Ahora tenemos nombre de páginas. En este caso, tenemos casa sobre contacto blog
nuestros proveedores. Entonces puedes preguntar, ¿
proporcionarás contenido de Earl En este caso, te mostrará cómo crear contenido con IA. Ahora las herramientas de IA como AgPT
Google Bad jugarán un papel muy importante y nos
ayudarán a crear
contenido increíble para sitios web Entonces, si los clientes no
proporcionan contenido, podemos generar contenido
para el sitio web. Entonces en futuras lecciones, te
mostraré la manera
profesional y mejor de
chatear con IA y generar
los detalles que queramos. Bien. Entonces tenemos, necesitas características especiales
si necesitan
funcionalidad de ecommerce como Ito online o si quieren
agregar el bot de chat,
puedes obtener aclaraciones
al hacer estas preguntas. No obstante, si
quieren algunas características que no sabes que
no sabes cómo crear, les
dices, investigaré al
respecto y volveré contigo. Entonces puedes investigar sobre las características como ejemplo
si quieren un tablero de chat y puedes investigar al
respecto y entender que puedes
hacerlo o si cuesta más, puedes decirles que costará. Y esa es la manera de manejar
este tipo de preguntas. Y tenemos interrogatorios, ¿necesita algún interrogatorio En este caso, es necesario solicitar
cita y formularios de contacto. Vamos a crear
formas en este proyecto, y luego tenemos detalles
técnicos. Yo digo, ¿tienes una plataforma
preferida? En este caso, se presionará, pero si cliente familiarizado con diferentes plataformas como Webflow, PFI Weeks Studio o simplemente HTML Puedes platicar con ellos, y si no conoces
esas otras plataformas, puedes dar sugerencias
de por qué necesitan elegir Wordpress y
si no están de acuerdo, aún
puedes obtener el proyecto y aprender mientras
creas el sitio web. Entonces tenemos una pregunta como, ¿tienes un
nombre de dominio y hosting? En este caso, lo es, pero a veces los clientes simplemente no conocen el nombre de dominio y hosting o algunos clientes piensan que también
proporcionaremos nombres de dominio y hostings. Tienes que
definir claramente que no
proporcionas esas cosas y ellas
tienen que proporcionarlas. Sin embargo, si estás proporcionando tu propio servidor de alojamiento y
dominio como suscripción, puedes contarles sobre
eso y por contrato, puedes
mencionarlo claramente para que entiendan cuánto
costará y si
están de acuerdo con ello, puedes proporcionar
tu propio hosting. Personalmente, cuando cree un
sitio web para mis clientes, pediré nombre de dominio y
hosting para construir el sitio web. Entonces tenemos plazo de proyecto. Simplemente puedes preguntar cuándo
quieres que se lance el sitio web. La mayoría del cliente
dirá dentro de una semana, dentro de tres días,
dentro de dos semanas, pero no podremos crear un sitio web
personalizado dentro de
los tres días porque vamos a proporcionar el sitio web de
calidad que les
ayude a que su
marca brille en línea. Les explicas sobre
el marco de tiempo y das al
menos de tres a cuatro semanas como plazo
del proyecto e intentas
hacerlo dentro de dos semanas. De esa manera,
tendrás un cliente feliz y ellos confiarán en tu servicio para sus próximos diseños de sitios web. Entonces tenemos presupuesto, puedes justo cuál es tu
presupuesto para este proyecto. Entonces, la mayoría de las veces, si trabajas
con el cliente individual, no con una empresa, ellos harán como primera pregunta
cuánto costará. Simplemente obtienes información
sobre qué tipo de sitio web, cuántas páginas quieren
y qué tipo de características. Y entonces si creas sitio web de cinco
páginas por $1,000, diles que necesitas 1,200
y luego
intentarán negociar contigo y si
lo negocian por mil, podrás
hacerlo en tu presupuesto En este caso, yo apenas a las
7:50 como número ficticio. Pero si tienes una marca
y si el cliente acude a ti revisando tu video
o revisando tu contenido, puedes cobrarle más
a ese cliente. Bien. Ahora tenemos los detalles, y en la siguiente lección, crearemos un contrato
para esta lista de verificación.
37. Usa la IA para el diseño web: Hola a todos. La IA
juega un papel muy importante en los diseños
web y otros campos relacionados con
Internet. Entonces, saber cómo usar la
IA es un gran punto favor
y nos ayudará a obtener el mejor resultado
en pocos minutos. Antes KDG PD, y Google Bart, que llamó ahora Jaminir utilizamos sitios web como Lam ISM
text para agregar contenido como nuestro sitio web
que diseñamos para el cliente porque
muchas veces los clientes no nos
darán contenido, así que tenemos que agregar Pero después de 22 22, podemos usar herramientas de IA
como HAG PT y Jamin para generar contenido
para el proyecto de nuestros clientes No sólo eso, esta herramienta nos
ayudará a reducir nuestra carga de trabajo y obtener información que no
tenemos y no conocemos. Como ejemplo, recientemente obtuve proyecto de diseño de
sitio web compañía de
aviación. No sabía nada compañía de
aviación y las cosas que tengo que agregar
a la página web. Simplemente uso JAG PT para generar el contenido
al sitio web y Cran estaba muy contento por eso y solo
cambió algunas cosas
según su versión Aprendamos a JAG PT
para generar lo que queremos. Yo sólo voy a HGBT y aquí
podemos ingresar al formulario. Simplemente agregue en pronta vida
generar contenido de heroína
para el sitio web de atención médica
no nos dará mejor salida Entonces probemos esto. Bien, aquí están los DTs. Pero si agregamos los detalles adecuados y
agregamos el DDS que ya conocemos, el resultado será
mejor que este Entonces probemos un nuevo chat e intentemos
generarlo con prom. Entonces utilizo versiones previas
de esas herramientas, y las versiones previas
serán suficientes para nuestro trabajo. Entonces aquí está el simple
rompt que siempre uso. Entonces primero, tenemos que
asignar rol para hat GPT. Entonces deberíamos decir lo
que queremos generar, y luego
me pueden tres opciones. Entonces cuando añadimos esta información, tenemos que sumar todo lo
que sabemos y
tenemos que sumar todo lo que sabemos para obtener mejores resultados. Entonces probémoslo. Primero, diré,
eres diseñador web. Entonces vas a
diseñar sitio web para clínica
HealthCare llamada
Clinical JB Family Clinic, y luego tenemos que
asignarle la tarea Quiero que crees
tomas de
sección de héroe con Good CTA CTA
es un llamado a Y recordaste que
creamos secciones de héroe en autoayout
FICMA y Pigma así entonces tenemos que decir
qué debería incluir Al igual que este sitio web se enfoca mejorar la persona
en línea de la clínica para atraer nuevas versiones. Entonces, si hay
más información, podemos agregarlos en el futuro. Los voy a agregar por ahora. Estas serán las indicaciones, así que presionemos Enter
y veamos la diferencia Bien, creo que tenemos
tres opciones. Centrémonos solo en
el primero aquí, la
salud, nuestra prioridad
cuidando a las familias, una visita a la vez y
ese es el titular y tenemos un gran subtítulo
en JB Family Brindamos atención
integral para toda
su familia y luego tenemos una
cita de reserva al botón. Vayamos al baile de graduación simple
que ya creamos. Es la salud, nuestra prioridad. Eso es todo, luego proporciona
solo pequeño sub peddin y no personalizó esto y no dio
mejores opciones, pero aquí, obtuvimos detalles mejores
y personalizados Entonces siempre, tenemos que
asignar el rol, luego asignar las tareas y
pedir tres opciones. Entonces de esa manera, obtendremos este tipo
de resultados y
podremos elegir el mejor
de manera que el punto es, si piensas simplemente
agregar texto y obtener resultados del HGBTO Jami, eso no va a funcionar,
siempre tendrás que especificar, y de esa manera, obtendrás mejores y Entonces, en lecciones futuras, usaremos muchos
prompts en GBT, y también intentemos
usar Jamini
38. Crea una propuesta de proyecto: Ahora es el momento de crear
contrato para nuestro proyecto. Voy a nuestro perfil comunitario y aquí tenemos propuesta de
proyecto. Simplemente copio y hago clic aquí, luego pego así. Bien. Ahora lo voy a
poner aquí. Todo bien. Ahora primero tenemos que añadir
el nombre del proyecto. El nombre será el nombre de la empresa. Entonces tendremos que agregar
el nombre de los freelancers. Voy a añadir mi nombre aquí. Voy a tener que agregar un correo electrónico. Simplemente agregaré
correo electrónico falso como prueba en mail.com y aquí, tenemos que agregar el nombre de los clientes
y nuestra solicitud de diseño web, tenemos el nombre del cliente copiarlo
y pegarlo así Ahora vamos a crear la visión general
del proyecto. Para crear esta parte, podemos obtener la ayuda
del chat G PT. Vamos a GVT y hagamos
clic en Nuevo chat. Entonces aquí está nuestro aviso. Puede verificar este prompt en resource asecton
obtendrá dos indicaciones más Entonces aquí, el rol
es diseñador web, y luego vayamos al requisito del
sitio web. Aquí estás creando un sitio web para B
TeNing y quiero que crees visión general del proyecto para contrato del sitio web de la
clínica familiar JB Entonces agreguemos aquí
hay más información. En aquí, podemos agregar información como
propósito del sitio web. Copio la respuesta del cliente
así, luego la pego. En realidad, vamos a página
esta parte primero, así, luego aquí. ¿Cuáles son los objetivos principales? Copiemos esta parte y
peguemos esto aquí así. Entonces podemos obtener el número de
cinco y esto va a estar bien. Ahora también voy a tener que decir, que sea sólo 150 palabras
y vamos a presionar Enter. Bien, aquí está la opción uno. Entonces no parece bueno. Entonces lo que podemos hacer es hacer clic en Editar mensaje. Ahora voy a ir aquí y aquí, actuaré como quiero que creen una visión general del proyecto
para el contacto del sitio web de JB Family Clinic que planeo enviar para
clientes aquí, agreguemos solo una
quinta parte de 100 palabras y hablamos de detalle
necesario, detalles
necesarios, luego
haga clic en Consentimiento y veamos La primera opción es que el sitio web de
JB Family Clinic contará con cinco páginas que brindarán información de
atención médica, facilitarán las solicitudes y ofrecerán recursos de
salud familiar El sitio tiene como objetivo mejorar
la visibilidad de la clínica, atraer nuevos pacientes y destacar sus servicios
y especialidades. Los elementos clave incluyen una interfaz
fácil de navegar y contenido educativo para
fomentar las conexiones con la comunidad. Esto va a ser perfecto. Simplemente lo copiaré y vayamos aquí y reemplacemos este
proyecto de esta manera. Entonces en entregables,
entregamos las maquetas Figma y luego entregamos sitio web
completo funcional y
receptivo aquí,
agregaré como
wordpress porque
vamos a crear este
sitio web en agregaré como
wordpress porque
vamos a crear este
sitio web Hagámoslo
sitio web de WordPress en
interrogatorios técnicos, tendremos que agregar eTAF y este primer punto
no lo necesitamos Lo voy a quitar. Y aquí, configuraremos Google Analytics para y
Google Search Console, luego optimizaremos la velocidad de carga
y la capacidad de respuesta móvil, luego obtendremos formulario de etiqueta
y aquí formulario de
solicitud de
cita, formulario de solicitud de cita, y aquí mejoraremos
la seguridad web Para que puedas cambiar esta integración técnica de
acuerdo a tu proyecto. Entonces aquí está el grifo que
vamos a hacerlo. Puedes entender claramente
esos tu verificando los requisitos de diseño web y luego el requisito de
inicio del proyecto. Para este, ya llamamos al diseño del sitio web o muestras de sitios web
similares, por lo que solo necesitamos acceso de registro para la palabra
servidor web y sitio web. Sitio web significa
wordpressbd vamos a cambiar como Wordpressabard Si Wordpress aún no está
instalado, puedes eliminar esta parte. Entonces entonces no necesitamos documentación de
requerimiento
porque ya la tenemos. Voy a quitar el punto
puedes ajustar esto de acuerdo a tus requisitos y aquí
tenemos después de la sección de
soporte de servicio aquí, nuevas características y nuevas páginas
requerirán cargos adicionales y discusiones. No obstante, ofreceré mantenimiento
básico del sitio web y actualizaciones
menores después de su finalización. Entonces, si no das mantenimiento básico
gratuito del sitio web o después de actualizaciones, puedes agregar el BDS aquí Entonces tenemos la condición
tripulada. Entonces aquí tenemos estimaciones
del tiempo de finalización del proyecto. Hagámoslo como cuatro semanas y luego el marco
y la desestructuración Entonces, cuando creas un sitio web,
siempre pago por adelantado. Por lo general, obtengo el 50%
del pago por adelantado. Entonces vamos a cambiarlo aquí, tenemos 375 y al lanzamiento
exitoso del sitio web
será 375 y el
total del proyecto es 750 así. Entonces tenemos que agregar
los métodos de pago. En mi caso, acepto método de
pago como paneer
y Western Union Si tienes payal, también
puedes agregar payal, pero solo ofrezco métodos de
pago, entonces tenemos política de
cancelación Entonces aquí, dice que
si el proyecto es cancelado por el freelancer
después del inicio, se le
proporcionará
un reembolso completo de dinero al cliente a través del
mismo método en el que se recibió Si el cliente lo cancela, pago vencerá por todo el tiempo invertido en el proyecto
independientemente del uso previsto. Por lo que la propuesta de proyecto es una carta seria y siempre verifica dos veces
antes de enviarla. Entonces en este caso, si cancelo el proyecto, le
daré el
reembolso completo del dinero al cliente y si los clientes
cancelan su proyecto, no
daré el
pago por adelantado para los clientes Ajusta esas políticas de
acuerdo a tu patrón de trabajo
y a tus clientes, entonces tenemos sección de propiedad. Tras el pago completo, derecho de propiedad
intelectual
asociado al sitio web
será el cliente. Entonces tenemos este mensaje como la propuesta esboza los
servicios brindados y los
resultados anticipados del proyecto si tienes pacientes o
necesitas detalles adicionales, no dudes en contactarme. Estoy entusiasmado con la
oportunidad de trabajar juntos en el diseño y desarrollo y aquí tenemos que agregar
el nombre del sitio web. Aquí está el
nombre del sitio web, la empresa. Agreguemos el nombre del sitio web
así y si queremos, podemos agregar el sitio web. Puedes agregar o eliminar
cualquiera de estos puntos. Si quieres agregar nuevos
términos y condiciones, puedes simplemente presionar Enter y obtendrás este tipo de punto. Y aquí, si quieres
agregar un artículo más, tienes que dar click aquí
y hacer clic en esta propiedad. Entonces solo puedes
duplicarlo
presionando Control C o Comando C y mando de control, así. Esta propuesta de proyecto
diseñada con diseño automático, ya
tienes idea
sobre el diseño automático, y esto
te será fácil de editar como quieras. Y después de completar
esta propuesta de proyecto, puede hacer clic en la propuesta, y en su lado derecho, puede desplazarse hacia abajo. Cuando te desplazas hacia abajo, puedes ver la
sección de exportación aquí, seleccionar el tipo como PDF y hacer clic en el botón Exportar
propuesta de proyecto. Por lo que esta propuesta de proyecto
es de tamaño A cuatro. Da click en esto,
se verá así, y puedes simplemente enviar esto a tu cliente y hacerle saber
si necesita algún cambio. Y después de que tu cliente
esté de acuerdo con estos datos, puedes iniciar el trabajo.
39. Reúne inspiraciones de diseño: Hola a todos. Es hora de
crear nuestro moodboard Para crear nuestro moodboard, tenemos que encontrar inspiraciones de
diseño y obtener
capturas de pantalla de En este proyecto, ya tenemos inspiración de
diseño que nos da
el cliente. Abramos uno por uno
de esos UR Bien, ahora tenemos que conseguir una
captura de pantalla de este sitio web. Para ello podemos usar
Google Com extension call,
GoFullPage extension, ir a Google y buscar extensión GoFuulPage Entonces obtendrás Comm
webstollin haga clic en él, y aquí verá agregar
a Chrome, dar clic en Ya lo hice. Verás este tipo de icono de cámara en el navegador
Chrome, ir a la página web
y dar clic en ella y capturará el diseño
completo del sitio web. Aquí tenemos problema. En esta captura de pantalla, no
tenemos partes de encabezado para
obtener las partes de encabezado, intentemos hacerlo de nuevo. La parte de encabezado no se
muestra, pero está bien. Primero, lo descargo como PNG, simplemente
hago clic aquí y
luego lo que puedo hacer es presionar Shift Command cuatro encendido y solo resaltarlo
o seleccionarlo así, luego solo suelta el mouse y obtendrás la captura de pantalla. Sin embargo, si usas Windows, puedes usar una herramienta
llamada InPintol Solo ve a Ventana y busca PinTolo ahora vamos
a la siguiente Haga clic en esta extensión de página
completa, y automáticamente
obtendrá el diseño, luego lo descargará y
hagámoslo para esos sitios web de EAL. Ahora, esos son los sitios web de la
competencia, pero esto no es suficiente para que más recojas inspiración de
diseño, es mejor
entender bien el sitio web. Hay sitios web que
podemos recopilar inspiración de diseño. Uno de ellos es el regate. Vayamos a Dribble. Y si no
tienes cuenta de Dibble, puedes hacer clic en registrarte y ya
tengo una cuenta de
regate, así que voy a iniciar sesión Bien, inicié sesión en mi cuenta drivel Entonces puedo buscar aquí clínica
familiar porque vamos a diseñar
página web para clínica familiar. Busca clínica familiar
aquí, presentadora. Después selecciona aquí la categoría
de diseño web. Entonces el tipo de diseños, encuentra los mejores diseños y
ábrelos en Ventana Nueva. Da click y haz click en Abrir Enlace
en Nutab y solo hazlo. Si no ve ningún
sitio web relacionado con UNH, solo obtenga otros diseños
que se relacionen con Rf En este caso, puedo encontrar un sitio web de atención médica
general, sitio web
dental y
otro sitio web como ese. Vamos a abrir bien. Ahora aquí voy a obtener palabras clave
relacionadas. Entonces primero es hospital
dental, doctor, odontólogo, solo
hago clic en Hospital uno, y aquí tenemos diseño
hospitalario. Entonces podemos cambiar este filtro, también, pero lo
pondré como popular. Y aquí volveré a
abrir esos diseños. Aquí hay un sitio web dental, y luego vayamos al
doctor y bien. Y luego otra vez, voy a
dar click en esta clínica. Ahora conseguiremos el diseño del
sitio web de la clínica. Bien, solo investiga
y encuentra el diseño del sitio web. Hasta el momento, encontré pocos diseños, así que no hay nada que
conseguir de aquí, así que me saltaré este
, cerraré la pestaña. Entonces aquí, vamos a desplazarnos hacia abajo. Y aquí tenemos versión de página
completa. Haga clic en él, y
luego haga clic con el botón derecho, luego haga clic en Guardar
imagen como y guárdela. Todos esos diseños se
descargarán en tu carpeta de
descarga. Y cuando te desplazas hacia abajo, también verás otros
diseños de ese diseñador. Así que recuerda siempre que conseguimos esos diseños para inspirarnos en el
diseño, no solo copiar y pegar. Así que no solo busques diseño de
otras personas e
intentes copiarlos y enfrentarlos. Solo tienes que inspirarte en el diseño
y crear tu propia versión. Y te voy a mostrar cómo hacerlo. Bien, vamos a desplazarnos hacia abajo. Aquí tenemos vista previa de página completa, clic en ella y clic derecho. Podemos simplemente salvarla. Entonces aquí tenemos este,
también, y aquí hay otro
sitio web. Podemos ahorrar. Bien, copia este uno, dos, bien, eso es todo. Entonces podemos encontrar
diseños de sitios web de ellos para nosotros. Entonces buscaré
Tmforus en Google, y vamos a ir a este
themforus.net, hago Bien, aquí dentro, puedo buscar familia Krinic y dar
click en buscar Bien. Ahora puedes ver
sitios web que tienen buena calificación derecho abrirlos en nueva ventana y vamos
a abrir algunos de ellos así. Sí. Además, busquemos como clínica para obtener el sitio web de
la clínica. Aquí, tenemos una clínica dental, pero aquí tenemos otra
clínica hago clic en ella. Entonces esas plantillas
ya son utilizadas por la gente, lo que significa que esas
plantillas no serán únicas, pero podemos encontrar secciones y
cómo diseñan el sitio web. Obtenga información sobre los diseños que debemos usar
en nuestro sitio web. Desde aquí, basta con hacer
clic en Vista previa en vivo, y aquí obtendrá la vista previa
en vivo del sitio web. Aquí tenemos pocas demostraciones. Ahora, haz click derecho sobre esas demostraciones y obtén esos diseños así. Aquí tenemos el diseño. Ahora lo que podemos hacer es hacer
clic en esta página goful, enchufar y obtener una
captura de pantalla del diseño Lo descargo y aquí
tenemos el siguiente,
solo cruza este selector de estancia
y desplázate hacia abajo. Bien. Después da click en esta extensión
cromada para obtener el diseño, descárgala. Tenemos éste. Vamos
a diseñarlo también. Y tenemos éste también. Desplácese hacia abajo
y haga clic en Descargar. Entonces tenemos otro sitio web. Da clic en Revisión en vivo, y aquí está la reseña en vivo, solo haz clic en este botón
R para obtener ese diseño para
Sigamos bien,
ahora voy a eliminar todos
esos enlaces que ya
obtengo las capturas de pantalla. Bien. Ahora otro
sitio web que podemos encontrar inspiración de
diseño
es Ban dot O Bans, buscaré Family Clinic. A partir de aquí, veremos sitios web de diseño que se
relacionan con clínica familiar, los
abriré así. Veamos esos diseños. Este no es diseño de sitios web, y aquí está el diseño del sitio web. Obtener captura de pantalla desde
aquí, simplemente haga clic en él, y luego use ir página completa para obtener la captura de pantalla.
Veamos esto. Este sitio web no está en inglés, pero aún así podemos encontrar inspiración de
diseño. Descarguemos ese también. Haga doble clic y agréguelo, luego haga clic en GoFullPage y luego
haga clic en Descargar imagen Tenemos el sitio web de Clínica Dental, así que vamos a obtener esta
captura de pantalla de él, también. Bien. Ahora podemos encontrar
inspiración de diseño en PinterST Vamos a PinterRSTT. Para obtener diseños de Pinterest, tienes que iniciar sesión
en el PintersTo, estoy en mi cuenta de Pinterest Ahora doy clic en este botón de
búsqueda, y aquí, buscaré en el sitio web de
Family Clinic. Entonces deberías cambiar los pines a Pines y aquí
tenemos diseños de sitios web, clic en esos diseños
y yo simplemente haré clic en el diseño y
lo pondré en Nueva Ventana así, luego haz clic derecho, haz clic en
Guardar imágenes y guardarla. Voy a hacer clic aquí. No es bueno. Ábrelos en
Ventana nueva así. Es familia de pocos diseños abiertos. Entonces en Pin trust, puedes utilizar esta búsqueda de imágenes para obtener diseños de sitios web similares. Vamos a buscarlo así. Cuando lo hagas,
obtendrás un diseño de sitio web similar, así que abriré algunos
de ellos así, y luego
los abriré en Nueva Ventana. Bien. Ahora lo que
voy a hacer es descargaré de ellos haciendo clic derecho y dando
clic en guardar Imágenes. Todo bien. Ahora tenemos suficientes diseños para
crear la placa de modo. Entonces, en la siguiente lección, vamos a crear el tablero de modos.
40. Crea un ambiente agradable: Hola a todos, es hora de
crear nuestro mood board. Disminuiré
el tamaño del lienzo
presionando Control y
usando la rueda de desplazamiento del mouse. Entonces aquí dentro, voy a
crear un marco. Simplemente haga clic en el marco y
haga clic así y vamos aumentar su tamaño
así en realidad vamos a
agregarlo desde aquí, así tendremos más espacio. Entonces le renombraré a bola
lisa. Multiespacio. Bien. Ahora lo que podemos hacer
es cambiar el color de relleno, así silar el marco y cambiar color del
campo a un poco
más oscuro así Bien. Ahora tenemos toda esta captura
de pantalla, así que solo voy a
resaltarlas todas y agregarlas así. Se subirán, así que tenemos que esperar a que las imágenes se suban
con éxito
temprano También es mejor las muestras de diseño que acercar las muestras de diseño que
el
cliente nos proporciona. Así que aquí están los diseños, y vamos a conseguir este diseño de
moodboard así En realidad pongamos esas
dos secciones como aquí. Entonces aumentemos el
mood board para que me guste esto, y ahora aquí está uno de
los lets dos reales. Bien, aquí está uno de los diseños vamos a poner
moodboard así Moja los diseños. Vamos a disminuir el
tamaño del moodboard y agregarlo aquí. Bien, ahora tenemos
este primer diseño, solo lo
voy a poner así
y va a estar bien ahí, entonces tenemos este diseño
solo ponlo aquí, voy a establecer el tamaño de
inviten como 15 Podemos usar el diseño automático, pero es fácil que lo
pongamos así
sin diseño automático, y aquí,
tenemos un fondo. Vamos a quitarlo para quitarlo. Doy doble clic sobre la imagen, y aquí dentro, voy a decir que recorte. Ahora podemos recortarlo así. Aquí vamos. Bien. Entonces voy a poner esto aquí. Todo bien. Y hay 38
recursos como recuerdo, pongamos mucho Bien. Entonces este tiene el fondo, clic en él y cámbielo
para recortarlo y soltarlo así y pop esto y presionar enter vamos a
ponerlo aquí. Bien. En realidad, es así. Bien. Y aquí
tenemos otro diseño. Pongámoslo así
y aumentarlo un poco. Hagámoslo
entre tallas 15. Bien, tenemos más diseños. Vamos a sumarlos todos. Este es otro diseño. Pongámoslo aquí, ponga éste. Y sobre este diseño, dejaremos caer esta barra negra porque es un tema para nosotros. Bien, pongámoslo aquí. Bien, vamos a dejar caer
esta pluma. Ahora hagámoslo aquí. Bien. Ahora, pongamos esto. Bien, voy a añadir de esos
diseños a esta placa de modo. Entonces ahora no
tenemos mucho espaciado, así que hago clic en el marco del
moodboard y
presiono Comando e incrementando el mood Si estás usando Windows, debes presionar Control. ¿Bien? Lo que tenemos vamos a
quitar el fondo. Esta es la calidad
de esta no es buena, así que la voy a
quitar. Vamos a agregarlos. Ahora solo voy a seleccionar estas
capturas de pantalla y me gusta aquí. Sigamos agregándolos
a la caja de la luna. Entonces aquí está el diseño web que es seleccionado por el cliente. Así que vamos a
acercarlos más porque entonces podemos
hacernos una idea sobre la sección que debería tener
este sitio web. Entonces aquí dentro, tenemos señal de que solo
conseguimos el diseño completo
sin sección de héroe. Pongamos la sección de héroe
porque la sección
de héroe ya la obtuvimos con
la herramienta de recorte Averiguemos el diseño. Vamos a razonar razón. Aquí, tenemos la
cabeza aparte, la copia, trapamos y la cuerda así, luego ponemos dientes así, luego la colocamos así Ahora lo que puedo hacer es presionar
el comando G para agruparlo. Bien, ahora lo voy a
poner así. East aT Bien, aquí tenemos
la placa de modo, y aquí, tenemos todos los diseños
que recopilamos, para que podamos acercar y verificar
el diseño así. Entonces ahora podemos tener una idea
general sobre qué
tipo de sección
necesitamos tener y podemos seleccionar esas secciones comprobando
el estilo de este diseño. La manera más fácil es primero verificar los sitios web que proporciona
su cliente. Esos son el sitio web de los competidores de
su cliente. La
sección más común de esos sitios web. A modo de ejemplo, este sitio web tiene
sección de héroe, somos sección, por qué elegimos nuestra ubicación, por qué elegirnos nuestras ubicaciones con el formulario de contacto y
reseñas de Google y un pie de página. Entonces si revisamos esta, tiene herosección,
nuestros servicios, sección de
registro, y aquí,
tenemos sección de revisión, nuestra sección de proveedores
y sección de servicios Fuera de sección. Ahora podemos elegir esas secciones
de esos diseños. Solo pasa por el diseño y descubre cuál es
la sección húmeda. Para hacer eso en Figma, tenemos una función de comando En la barra de herramientas, puedes ver esta sección de
comandos, dar click en ella y
en esos diseños, me gusta esta sección
como nuestra página web, sección de
héroe, dar clic en esta sección y establecer
nombre como sección de héroe. Bien, sin embargo, solo me sale la
estructura de este diseño, lo que significa que el subtítulo, título
principal y el
texto del párrafo se verán así,
este botón se
pondrá en la parte inferior Lo único que
estará el texto en la parte inferior izquierda. Entonces tenemos que
encontrar sobre la sección. Para encontrar acerca de la sección, vamos a comprobar el diseño y seleccionaré esta
parte como sección. Presentador cuando añadimos comentarios, podemos ver todos
esos comentarios aquí Y ahora tenemos que
encontrar veamos cuál es la sección que tiene nuestro sitio web de
competidores Aquí, a continuación tenemos
elegirnos sección, y si vamos
al segundo diseño, no tiene muchas cosas, tiene servicios y
elige proveedores. Seleccionemos la sección
para servicios. Seleccionaré este tipo
de sección para servicios. En lugar de agregar esta flecha, agregaré iconos
relacionados con esos servicios. Eso es lo que digo tenemos que crear una versión mejor
y única, y ahora tenemos que elegir
tu sección de proveedor. Veamos qué va a ser bueno para el Voy a crear este tipo
de sección para nuestros proveedores. Vamos a nuestros proveedores. Finalizar ahora tenemos que encontrar sección para los comentarios
o reseñas. Averiguemos la sección de revisión. Vamos a crear este tipo
de sección para las revisiones. Ahora lo que tenemos que agregar tendremos que
agregar sección de bloque. Entonces busquemos una sección de bloque. Esto va a quedar bien, así que solo hago clic aquí y
hagamos esto como bloque. Creamos esto para la página principal. En realidad, no agreguemos el
último bloque en la página principal. Voy a dar clic aquí y
vamos a eliminar el comando, haga clic en Delet eliminarlo. Bien. Ahora tenemos cinco
secciones para la página principal. Seleccionemos un pie de página. Vamos a averiguar pie de página
creará este tipo de pie de página. Haga clic aquí hacer pie de página, pero voy a cambiar el diseño. Yo sólo me sale la estructura. Entonces, necesitamos tener
este tipo de sección, así que claramente
tendremos el número y tendremos un botón
para solicitar cita. Entonces averiguaremos
ese tipo de diseño. Esto es mejor. Vamos a crear este tipo de
formulario de contacto en la página principal. Hagámoslo tan rápido diez. Ahora tenemos ocho secciones. Entonces vayamos a la lista de
requisitos y veamos esas secciones
nos ayudarán a lograr nuestro objetivo. Nuestro objetivo principal es mejorar la persona de la clínica en línea
para atraer nuevos pacientes. Para ello,
necesitamos un fuerte llamado a la acción, la sección de héroes. En esta sección de héroes, tendremos que mencionar
el número de CLS Aquí, voy a sustituir esto para empezar con botón CLS
con número de clínicas Eso ayudará a los usuarios a encontrar el número rápidamente cuando
visiten el sitio web. Vamos a agregarlo como respuesta en el número de
contacto al Menú Pa. El siguiente será
comunicar claramente los servicios
y especialidades disponibles para las familias. Ya contamos con la sección para servicios en estos servicios. Añadiremos los servicios principales
para que el visitante
entienda fácilmente y se haga una idea
sobre los servicios disponibles. Debemos proporcionar recursos
educativos sobre el tema de salud
familiar para hacer eso tenemos que crear
una sección de blog. Así que vamos a crear una sección de blog después de diseñar la página de inicio. Entonces creo que tenemos la sección. Entonces ahora es el momento de enviar
estos datos al cliente. Entonces, cuando compartes este
moodboard con el cliente, hagamos clic en la presentación
para que revise todos esos diseños y dé su idea para seleccionar
el mejor Después de completar
el tablero de modo, compártelo con su cliente, simplemente haga clic en este recurso compartido y
configúrelo como cualquiera puede ver
y copiar el enlace. Después explíquele sobre esta placa de modo y cuál es
la sección que elija, para que revise esta placa de modo
y le hará saber sobre
sus sugerencias, y si le gustan las secciones
diferentes, las seleccionará también.
41. Crea una estructura de sitio web: Hola a todos. Ahora
seleccionamos la sección L que necesitamos en nuestro sitio web
desde este moodboard Vamos a recopilar todos
ellos y crear un único sitio web con
adjuntar de ellos. Para hacer eso primero, hago clic en el marco y creo un
escritorio de tamaño marco. Entonces aumentemos
el tamaño del frame así y luego
voy a los comandos. En comandos,
tenemos ocho secciones. Entonces hagamos clic en la primera sección, y aquí está la primera sección. Entonces voy a dar click en este
motol y aquí selecciono esta captura de pantalla y presiono
el comando C para copiarlo y dar clic aquí y presionar
el comando V para pegarlo Y a partir de aquí, sólo
necesitamos esta sección de héroes. Entonces hago doble clic en la
imagen y selecciono recortar. Entonces lo recortaré así, así y luego presionaré Enter. Entonces solo ponlo
así y aumenta el diseño. Bien, entonces tenemos que
encontrar la segunda sección. Se trata de, así que aquí
está la sección A. Ahora voy a dar click en
MTol y copiar aquí. Entonces ven aquí,
pegarlo así, luego D da click en la
imagen y configurarlo para recortar luego solo recortar
esta sección sobre. Me gusta esto y presiona Enter. Bien. Entonces pongámoslo a
este sitio web así. Bien. Entonces lo que vamos a hacer es encontrar en la tercera sección. Esa tercera sección es de servicios y aquí está la sección de
servicios. Paso motol y lo
selecciono, lo copio, lo pego aquí, entonces solo
necesitamos esta sección de servicios Vamos a recortarlo y presentarlo. Entonces aquí,
agreguemos esa sección. Esto y aumentar la sección presionando, desplazando
y aumentando. Cuando presionamos shift, podremos
aumentar el tamaño sin cambiar la
altura y el ancho. Entonces tenemos que encontrar
nuestra sección de proveedores. Entonces aquí está esa sección. Ahora voy a copiar esta sección. En realidad ya
copiamos esa captura de pantalla, así que hago clic en MTol y
aquí está la captura Simplemente lo duplico presionando
Comando C y comando V, luego lo pongo así. Ahora tengo que aumentar
el tamaño del escritorio, seleccionar el escritorio y
aumentarlo así. Entonces voy a hacer doble
clic en esto y necesitamos nuestra sección de proveedores así
y luego ponerla así. Ahora vamos a revisar la quinta sección. Yo reviso, aquí tenemos reseñas, solo presiona sobre Mtol
y copia esta, ven aquí. Colócala aquí. Entonces tenemos esta
sección de revisión, double de it, settsrop y solo obtenemos la sección de vista previa así
y aquí presiona enter Bien. Ahora ponlo aquí y presiona shift y
agrégalo así. Bien, entonces encontremos
la siguiente sección. Es pie de página. Aquí está el pie de página. Aquí está el pie de página que
vamos a agregar. Entonces copia este, ven aquí. Pasa esta así. Bien. Luego toca dos veces, haz clic en recortar y recortar este diseño así
y presiona Enter. Entonces pongámoslo como
fondo así. Entonces lo que tenemos que añadir es, vamos a aumentar el tamaño. Tenemos que agregar vamos a seleccionar el marco de texto y aumentar
su tamaño así. Entonces tenemos que agregar
la última sección. La última sección
es contacto débil, aquí hay sección de contacto débil. Entonces presionemos motle y salemos la sección
presione el comando C, y presione el paso aquí,
presione comando, luego consigamos esta
sección, toque doble sobre ella, déjelo
caer como este
centro gre por ahora mismo, aumentemos esta
sección también, así Bien, y ponlo así. Bien. Ahora vamos a
comprobar este diseño. Cambiemos este nombre de marco a estructura, estructura del sitio web. Ahora haga clic en él y
haga clic en este presente y aquí está la estructura
de nuestro sitio web. Ahora podemos diseñar nuestra versión única con esta estructura de diseño de
sitios web. Hago esto porque cuando
creamos este tipo de estructura, no
necesitamos
crear marcos de alambre. Podemos crear directamente la interfaz
de usuario de alta fidelidad. La interfaz de usuario de alta fidelidad significa que
la interfaz de usuario es
similar al producto real. Además, no solo
diseñaremos esto tal como es. Cambiaremos este
diseño de acuerdo a nuestra creatividad y
crearemos una mejor versión.
42. Crea un mapa del sitio: Hola a todos. Ahora
tenemos la estructura de nuestro sitio web en nuestros pasos para completar una guía de proyectos de
diseño web. Lo siguiente, tenemos que crear un mapa del sitio. Vamos a crear uno. Voy a ir aquí y
para crear un mapa del sitio, necesitamos tener frame, click en frame y dar click aquí, luego aumentar el tamaño del
marco así, luego cambiaré
este nombre a sitemap. Entonces mapa del sitio es la
estructura de nuestro sitio web. Si vemos algunos ejemplos de mapa del sitio, el mapa del sitio
se verá así. Primero, tenemos la página de inicio, luego tenemos el
resto de la página. Después de eso, tenemos
el elemento del submenú. Para sitios web pequeños,
no necesitamos el mapa del sitio, pero para sitios web grandes complejos, es mejor tener
un mapa del sitio para que
podamos entender la
estructura del sitio web. No solo que incluso usted crea
un mapa del sitio para su sitio web, se puede cambiar cuando
desarrollamos y obtenemos más información de nuestros clientes competidores
mientras estamos en el proceso de diseño. Vamos a crear el mapa del sitio. Ahora tenemos el marco. Simplemente hago clic en el texto y
creo un texto llamado home. Entonces aumentaré el tamaño, después cambiemos el tamaño de
fuente a como 42. Bien. Entonces lo que puedo hacer es presionar Mayús A para aplicar el diseño
automático a este texto. Recuerda, solo aplicamos maquetación
automática a este texto, no al marco, solo para el texto. Ahora aquí dentro, vamos a aumentarlo. Agreguemos el
relleno horizontal como 20 y el
relleno vertical será diez. Entonces lo haré en color de relleno. Da clic aquí y agreguemos el
color del campo como este color rojo, y luego hago clic en el texto y cambiaremos el color del
texto a blanco. Bien. Ahora tenemos homepage, parece que es más pequeño, así que cambiemos este texto a 60. Ahora de nuevo, vamos a disminuir
el tamaño de este marco a 2000 vamos con 2000
y alturas 151500 Bien, ahora
vamos a agregarlo aquí. En realidad,
cambiemos esta altura a mil porque no
necesitamos el mapa del sitio más grande. Ahora tenemos casa aquí dentro. Agreguemos
paddins horizontales 30. Mucho mejor. Ahora necesitamos
crear otras páginas. Esas páginas serán vamos a
comprobar nuestro requisito. Aquí tendremos el nombre de la página. Esos son sobre contacto
bloquear a nuestro proveedor, copiémoslos todos y
vengamos aquí, luego duplique esto presionándolo
y arrástralo así. Vamos a duplicarlo
unas cuantas veces. Entonces aquí está el
texto que lo copio, así lo voy a agregar y
primero tenemos sobre, después tenemos contacto, después aquí tendremos bloqueo entonces tendremos
perdón nuestro proveedor. Aquí están las páginas principales
de nuestro sitio web. Por lo que el inicio será primera página y sobre será
la segunda página, y el bloque será tercero, nuestro proveedor será el cuarto y contacto será la última
página de nuestro sitio web, seleccione todos ellos y
hagamos que sea centro. Después los seleccionaré todos, y vamos a ir a la posición y dar
clic en atados así. Entonces voy a cambiar el color del campo
para que me guste este color azul. Así podremos
identificar fácilmente la página principal de otras páginas. Bien. Ahora podemos agregar
flechas a esas páginas. Aquí, selecciono flecha,
aumentemos, luego haga clic
y arrástrala así. Bien. En flecha, podemos
agregar este estilo así, y ahora deberíamos tener una
línea para crear una línea,
hacer clic en línea y vamos a
hacer clic y presionar shift, luego agregamos lineTo, luego
pongamos la flecha así Bien. En realidad, vamos a
disminuir el tamaño de la flecha y vamos a seleccionar
esas dos flechas y vamos a aumentar el ancho. Selecciona las flechas y aquí, vamos a agregar 55 es ser, Qué tal dos
serán Lo así. Ahora,
los duplicaré así. Así, aumenta esto aquí Ahora vamos a agregar vamos a duplicar
esta flecha y añadir esto. En realidad, no
necesitamos estas puntas de flecha. Yo lo haré y aquí está. Entonces, en nuestro sitio web, necesitaremos tener una
subpágina sobre nuestros proveedores. Así que vamos a duplicarlo, y vamos a agregar esa otra
página URL ver perfil Bien. Entonces disminuiré
este tamaño de fuente a como 30, y pongámoslo así y cambiemos este color
para que me guste este color. Bien. Y ahora voy a duplicar esta flecha y
pongámosla así. Después duplicarlo nuevamente,
cambiar la posición. Bien. Ahora voy a
quitar la cabeza de flecha de esta línea y solo
necesitamos esta flecha aquí. Bien. Y si no tienes idea crear el
mapa del sitio para tu sitio web, puedes consultar el sitio
web de tu competidor y hacerte una idea Para nosotros, aquí está el mapa del sitio. Ahora tenemos todas las páginas
que queremos crear. Además, en esta sección de bloque, necesitaremos tener
un solo poste de bloque. Duplicaré esto
y lo pondré así. Entonces lo agregaré como
un solo bloque cuatro así. Veamos nuestro mapa del sitio, haga clic en el marco del mapa del sitio y haga clic en este icono actual, y aquí está nuestro mapa del sitio en realidad por qué no está
seguro debería poner esto. Tenemos que agregar esta
línea dentro del marco. Bien. Ahora se ve perfecto.
43. Seleccionar fuentes para sitio web: Hola a todos. Ahora es el momento de seleccionar tipografía
para nuestro Principalmente hay dos
formas de hacer esto. El primer método es verificar
a sus competidores y diseñar inspiraciones en moodboard y averiguar qué
funcionará mejor A ver. Aquí, tenemos seri font para titular y San seri font
como párrafo Solo necesitamos dos tipos de fuentes, una para titular y
otra para párrafo. Vamos otros diseños. Aquí, tenemos
encabezado y párrafo Sanseris
y aquí tenemos a
Sansorifont y aquí otra vez, tenemos Sanserifont
y aquí tenemos a
Ceri font como encabezado
revisando a nuestros competidores, puedes entender qué tipo de
tipografía tenemos Sanserifont
y aquí tenemos a
Ceri font como encabezado
revisando a nuestros competidores,
puedes entender qué tipo de
tipografía funcionará con nuestro sitio web. De esa manera, mi conclusión es usar Sanserifont
será mejor opción para
el párrafo titular usaré dos
fuentes San Serif diferentes para Entonces el segundo método es que podemos pedir IA y obtener
su opinión. Entonces hagámoslo. Aquí estoy en HatGpt
así que hago clic en Newhat. Entonces solo agrego nuestro
prompt para que puedas encontrar este prompt en la
sección de recursos, y aquí, voy a cambiar esto ya que eres
un diseñador web que diseña un sitio web para JB Family Clinic entonces aquí podemos agregar la
tarea así que la tarea será, quiero que estés aquí
tengo que cambiar de creadores, quiero que elijas Ty para
graphy para el sitio web de JB Family
Clinic Entonces tendré que
proporcionar más información, así que voy a proporcionar aquí, aquí hay más información y luego
agreguemos la información. Podemos obtener esos requisitos de
información. Entonces aquí, tenemos el propósito, para que podamos copiar el propósito del sitio web, público
objetivo y el
objetivo principal para encontrar la mejor fuente. Entonces seleccionaré primero, seleccionaré esta pregunta, y luego copiaré esta
y la pegaré así. Presiona Intro para hacer un espacio. Entonces también copia esto y
pégalo así. Entonces hagámoslo aquí. Esto. Ahora para
éste, voy a quitar, darme tres opciones y luego tratar de generar la salida. Aquí tenemos la información. Para el sitio web de JB family Kenic, la tipografía debe
reproducir el valor de la confianza, el
cuidado y la accesibilidad mientras se mantiene el profesionalismo la tipografía debe
reproducir el valor de la confianza, el
cuidado y la accesibilidad mientras se mantiene el profesionalismo. Entonces tenemos
tipos primarios como SunSerifFamily, y obtuvimos los nombres de fuentes como Poppins y a Entonces tenemos la
razón y aquí, ¿dónde debemos poner? Deberíamos ponerlo en los titulares, para que podamos ponerlos
en subtitular Entonces tenemos fase de
tipo secundario como si familia, entonces tenemos esas dos fuentes, pero el problema es que si agregamos fuentes de la familia
Serif al párrafo, puede
que tenga problema de legibilidad, por lo que siempre es mejor verificar esas fuentes antes de
agregarlas al También tenemos tipos de acento, pero solo necesitamos
dos tipos de fuentes, una para titular y
otra para párrafos. Vayamos a Google Fonts
y revisemos esas dos fuentes. A pesar de que esas fuentes
no serán geniales para el sitio web, entendemos que el
SanSeriFont será bueno para el titular y aquí
es una familia de fuentes Serif,
pero cuando comprobamos aquí, pero cuando comprobamos aquí, nuestro estado de ánimo todos y cada uno de los proyectos
tienen fuente tipo Sun serif Ahora vamos a las fuentes de Google. Ahora estoy en teléfonos.google.com. Aquí podemos consultar
las fuentes sugeridas. Vamos a copiar los cuatro pines y luego podemos
buscar directamente la fuente aquí. Aquí está la fuente de cuatro pines, aquí dentro, podemos establecer tamaños de
titular. Vamos a configurarlo como 55 y
aquí se verá y 55 fuente regular se
verá genial en nuestra página web. Averiguemos la fuente
del párrafo que sugiere GPT, entonces será esta, copiemos la fuente
y vengamos aquí y busquemos la fuente y
aquí estará esa fuente Vamos a desplazarnos hacia abajo, y
este es el aspecto de misma cuando lo agregamos como fijador
del párrafo 16 Como dije antes, tenemos que considerar
acerca de la legibilidad Si solemos usar la
fuente Serif para el párrafo, no
será fácil de
leer para algunos usuarios Sin embargo, algunas fuentes modernas
serán las mejores para el párrafo, incluso necesita el tipo de fuente Si. Bien. Ahora bien, de
acuerdo con este tablero de modos, el subtítulo titular y el Párrafo deben
ser fuentes sensoriales Averigüemos
Sanserifon solo tiene que ir a Google Fonts y usar el filtro
en haga clic en el filtro Entonces aquí desplácese hacia abajo, y aquí configuraremos
la prueba de fuente Sensorif haga clic en y ahora veamos las
fuentes para nuestro Me gustan estas fuentes, así que vamos a abrir
clic derecho y abrirla en la ventana de
plumín las últimas
fuentes sugeridas por HG PT, así que vamos a abrirlo
también y simplemente desplazarnos hacia abajo y averiguar la mejor
fuente para el sitio web Sin embargo, si ya tienes
un logo y pautas de marca, tienes que seguirlos, usar fuentes que sean
similares a tu
fuente logo y si no puedes
encontrar la fuente A, solo encuentra una fuente similar. Ahora aquí encontré tres fuentes
que son adecuadas para titular. Ahora encontremos solo uno
de ellos para hacer eso, aquí, puedo configurarlo como 60 y
usaremos regular y se
verá así en la página web. Si vamos a, pongamos el tamaño como 60 y tendremos que
usar esta fuente regular,
regular o la ligera, el tamaño de
la luz es demasiado delgado, regular va a ser bueno. Me quedaré así
y encontramos Manro, fuente
Mnro y vamos a
aumentar el tamaño a 60 y la fuente regular
se verá así A partir de esas tres fuentes, voy a usar esta última
fuente asaer font, así que hago click en get font y
se agregará al bucket Ahora tenemos que encontrar
fuente para párrafos. Voy a quitar esas dos
fuentes y en navegar fuentes, seleccionamos los sensores y ahora vamos a desplazarnos hacia abajo y
ver algunas fuentes para usar. Voy a abrir este teléfono y
también éste y éste. Vamos a desplazarnos hacia abajo y aquí se verá en el texto
del párrafo. Entonces, si hago clic en esto acerca y voy a más o menos
la mayor parte del tiempo, podemos
ver dónde usar esta fuente. Aquí, es un sentido público es una fase fuerte de tipo natural para interfaces,
texto y titular. Podemos usarlo como texto, que significa párrafo,
y luego si vamos aquí, no aquí, si vamos a esta fuente, veamos que se verá así
en el párrafo. Veamos sobre los detalles aquí
tenemos detalles y
vamos a leerlo digamos que diseñado para
fines de visualización pero se mantiene lo suficientemente
legible como para usarlo también en
el tamaño del ismll Éste lo podemos
usar en el párrafo. Aquí dentro, pongámoslo como medio. Cuando añadimos medio, se verá mucho mejor. Comprobemos este y
se verá así
en el párrafo. Veamos sobre el
teléfono, digamos que fi tree es una fuente sensorial
geométrica limpia pero amigable para su uso en el laboratorio móvil de
banda web. Está harded y crees que
usamos para texto. Está claro digo que
podemos usarlo para texto. Es perfecto para botones
y etiqueta corta. En mayúsculas, es perfecto
para botones y etiquetas cortas y usaré esta fuente fit
como nuestras fuentes de párrafo, así que hago clic en Obtener fuente, y ahora tenemos estas dos fuentes, y voy a eliminar este
trabajo entonces como recuerdo, usamos este cuatro, aprendemos sobre las fuentes de Google
en nuestras lecciones anteriores. Doy click en Premo y aquí estarán las fuentes que
vamos a usar Ahora lo que tenemos que
hacer es que tenemos que definir esas fuentes
en el archivo Figma. En la siguiente lección, hagamos
44. Qué es una hoja de pegatinas: Hola a todos.
Hablemos de algo realmente práctico e
importante para los diseñadores web. Es Itigai. ¿Qué es exactamente un Itigahi? Piénsalo así. Se trata de una colección de elementos de
diseño que usarás repetidamente
al crear un sitio web. Esos elementos pueden botones, iconos, logotipos,
paletas de colores e incluso fuentes Es como un kit de herramientas que
preparas antes de
diseñar tu sitio web. No solo antes de diseñar, agregarás más artículos a hoja de
Itiga mientras
diseñas el ¿Por qué necesitamos la hoja de Itiga? Bueno, cuando diseñamos sitios web, queremos que todo
se vea consistente para
que todo coincida
en todo el sitio web. Entonces comencemos a
crear un conjunto de estilos. Ahora, voy a nuestro archivo Figma y hago clic en conframe y
creo un frame como Vamos a aumentarlo así. Después voy a cambiar el
texto a hoja de pegatinas. Bien. I Figma, tenemos estilos y variables que podemos
guardarlas para su posterior uso Podemos crear una fuente de
paleta de colores, botones, icono o cualquier cosa por el estilo en la hoja de Itera y
guardarlos como variables o Azur Empecemos. Primero,
elegimos nuestras fuentes, eliminaré pestañas
innecesarias luego
pulsamos sobre este
icono de tarjeta en las fuentes de Google, y aquí tenemos nuestras fuentes. Así que vamos a hacer clic aquí, y presionaré T, y vamos a crear una sección
o prueba llamada Tipografía, luego resaltarlo, y
vamos a aumentar el tamaño a 60 Bien, 60 es demasiado, así que vamos a disminuirlo
un poco como 42 a la derecha. Ahora aquí, voy a duplicar este texto y
voy a cambiar esto como encabezado y aquí podemos seleccionar la
tipografía de encabezado que escojamos Elegimos a Lato como la tipografía
titular. Copiemos esto y vengamos aquí. Entonces aquí dentro, lo pondré como lato y vamos a
seleccionar el tamaño como 60, después hagámoslo regular Ahora voy a cambiar
el encabezado de texto 60, 60 es el tamaño y
regularizar la fuente tweet Bien. Ahora tenemos texto de
encabezado y voy a duplicar esto vamos a agregar
entre tamaño como 20. A aquí, agreguemos
entre tamaño como 30, y aquí voy a agregar párrafos. En realidad, haga doble
clic en él y elimine esto. Esta es la palabra correcta, y el texto del párrafo será vamos a revisar
el texto del párrafo. Es el árbol Fk.
Seleccionemos el árbol PF. Bien, aquí tenemos el y aquí, digamos el tamaño como 200, y regular será se ve bien. Vamos entre el tamaño
como una persona. Bien. Ahora tenemos fuente de
párrafo, fuente encabezado, y
vamos a duplicar esto. Vamos a
duplicarlo por dos veces, y aquí
tendremos subtítulo, y aquí tendremos botella En realidad, si queremos, podemos agregar el título de fuente dos, pero vamos a agregarlo así. Entonces para sub fdding
estableceré el tamaño de fuente como 30. Bien, y hagámoslo medio. Parece demasiado grande, así que hagámoslo 25 y
regular va a ser bueno. Entonces
cambiémoslo a 25 regulares. Ahora tendremos que
añadir el tamaño del botón. Párrafo, tenemos que
cambiarlo por 20. Entonces el tamaño del botón será 20 regular y pongamos
la caja como mayúscula. Hagámoslo de tamaño mediano. Vamos a conseguir 20. Ahora voy a cambiar la
posición así. Esas serán las
fuentes que usemos. Además, podemos crear
esto de una mejor manera. Es decir, voy a copiar
éste y le renombraré como encabezado y cambiemos su tamaño a 30 y agreguemos esto. Entonces lo voy a poner aquí. Ponlo así,
entonces aquí podemos cambiar el
nombre de la fuente como lato y podemos hacerlo aquí duplicar esto
aquí y hacerlo
subdin así, entonces aquí cambiaremos el nombre de
la fuente subwdingo El nombre de la fuente es árbol de la semana. Ahora tenemos que conseguir esto y
será botón, botón. Entonces aquí, cambiémoslo a Petree y hagamos
espacio como 30 30 Y luego vamos a
duplicar éste. Será párrafo, y aquí será
fig tres a regular. Bien. Ahora está muy claro. Simplemente agregamos tipografía
a nuestro istigast y luego podemos crear tipográficas Entonces para ello, selecciona el tipo
de salsa y da clic aquí. Después en estilo de texto, pop up, haz clic en este ícono más. Lo configuraré como encabezado
y haré clic en estilo creativo. Voy a hacer clic aquí. Hagamos este B más fácil. Da clic aquí y haz clic en estilo de texto, haz clic en este ícono más
y agrégalo así. Entonces hagámoslo para el texto del botón dos y hagamos
clic en el estilo Concreat, y hagamos esto para
el texto del párrafo dos, así Bien. Así que agreguemos
esos Estilo al texto, así voy a crear una prueba
como Hola a todos. ¿Cómo te va? Entonces este texto actualmente
es de sentido abierto, así que hago clic en el texto aquí
es typer graphiton Doy clic en esto aplicar Itis y
si selecciono el encabezado, cambiará a texto de encabezado Y si hago clic en C subbedin cambiará
a subbedin. Si hago clic en los botones Con
, cambiará a texto de botón. Beneficio es pensar que
tenemos mucho texto como este
en todo el sitio web, tenemos mucho párrafo
y pensamos que necesitamos cambiar el tamaño del texto
en todo el sitio web. Podemos hacer clic fácilmente en el texto que creamos
en la hoja de estilo En este caso, es texto de
párrafo, y aquí podemos dar clic y luego podemos dar clic en este icono
Editar estilo. Entonces aquí podemos
cambiar el tamaño. Vamos a ponerle un 16
y presionar Enter. Entonces, cuando cambie eso a 16, cada instante o
cada estilo de párrafo que agregamos al
sitio web cambiará. Si lo cambiamos a 50, cambiará a 50 así. Este es el beneficio de agregar sus tipos y crear
una hoja de pegatinas. Vamos a establecerlo como dos. Ahora encontramos la tipografía
para nuestro sitio web. Voy a disminuir esta hoja de
pegatinas así. En la siguiente lección, seleccionaremos colores
para nuestro sitio web.
45. Crea una paleta de colores: Hola a todos. Seleccionemos colores para nuestro sitio web de la clínica. Hay dos formas de seleccionar colores
principales o
color primario para nuestro sitio web. El primer método es que podemos usar guía
de emociones de color y
encontrar el color coincidente. Ahora estamos creando un
sitio web para una clínica. Cuando pensamos en la
limpieza de los médicos del hospital, qué tipo de emoción se
desencadenará. Aquí, tenemos naturaleza
equilibrada, crecimiento
pacífico, salud aquí,
salud media nutrición y el color verde
relacionado con la salud de los alimentos. Sin embargo, entonces tenemos una fortaleza confiable de
confianza. Cuando pensamos en doctor, deberíamos poder confiar en él, todo cuando
hablamos de familia, la confianza y confiabilidad es lo imprescindible para que podamos elegir
el color
primario como el azul Hay otra manera. Eso significa que podemos
verificar nuestra placa de modo. Cuando comprobamos nuestra placa de modo, vemos claramente que el color azul
es visible en todas partes. Entonces tenemos los colores blanco
y negro. El primero método es usar la guía de emociones de
color y el segundo método es verificar nuestro mood board y
seleccionar el color. Ahora seleccionamos nuestro color como azul y luego tenemos que
crear la paleta de colores. Para crear la paleta de colores, iré a coolers.co
y aquí,
voy a dar click en iniciar el
generador y usamos la regla 60, 3010 para nuestro uso del color, solo
necesitamos tres colores
como nuestro color principal, así voy a eliminar Ahora tenemos tres colores. Seleccionemos nuestro color primario ese color será el color azul. Voy a hacer este color azul un poco más claro así, y después tenemos que
seleccionar dos colores más. Un color será obviamente blanco y el segundo
color será oscuro. Cuando selecciono color oscuro, no
voy a ir por demasiado oscuro. Voy a ir por un
poco menos oscuro así. Ahora acabamos de seleccionar tres
colores para nuestro sitio web. Aún así, tenemos que hacer una cosa. Es decir comprobar la
legibilidad de esos colores. Voy a dar click aquí y
copiar el código de color, y después voy a
colors.adobe.com y aquí,
hago clic en este es Entonces de aquí, iré a la
herramienta de accesibilidad y aquí dentro, seleccionaré el
color copiado como color de prueba. En realidad, tenemos que establecer esto como fondo luego vamos a
seleccionar el blanco como color de texto. Vamos a copiarlo desde aquí y pongamos el
blanco como color del texto. En este caso, palidece. No podemos usar el blanco sobre
este fondo azul. Comprobemos este
color negro y el color blanco será adecuado para hacer eso, voy a agregar este color de
fondo como color
negro y probar el
color como blanco y
pasa los tres prueba y vamos cambiar el texto y el
color de fondo sigue siendo pasa, lo que significa que encontramos dos colores. Entonces vamos a bloquear esos dos colores, y ahora tenemos que
cambiar este color azul. Así que vamos a hacerlo un
poco más oscuro así, y vamos a copiar ese color. Entonces ven aquí y
pongámoslo como color de texto. Entonces en pequeña prueba, sigue fallando. Entonces vamos a cambiar el color, pero sigue fallando, así que necesitamos que
esto sea más oscuro. Veamos cómo funciona con
este tipo de color y
copiemos el color presente
ahora que pasó, lo que significa que
seleccionamos con éxito el color primario. Pero si este color no es el color
azul que te guste, podemos cambiar el
color desde aquí y ver qué tipo de color
va a ser adecuado. Entonces, cuando cambiemos el color, se cambiará
la relación. Entonces, cuando el número sea mayor, lo que significa que tendremos una
mejor accesibilidad, y los usuarios podrán
obtener una buena apariencia. Entonces seleccionaré este color como nuestro color primario y ahora
tenemos tres colores. Islote este color porque es un color brillante y ahora
tenemos esos tres colores Vayamos a nuestra hoja de Itagia. Aquí está nuestra hoja de Itiga
y vamos a crear nuevo texto. Duplicemos este
y cambiemos el a colores. Agreguemos nuestra paleta de colores. Para agregar nuestra paleta de colores, simplemente
haré clic en rectángulo y vamos a crear un
rectángulo como este. Vamos a establecer con 150 por 150 y sólo
tenemos tres colores. Voy a doblarlo
por tres veces. Y ahora vamos a copiar esos colores. Desde aquí, doy clic aquí para
copiar este azul y dar clic en el primer rectángulo y cambiar el
color del campo a este color azul. Entonces tenemos este color blanco, copiarlo y pegarlo así. Cuando lo pegamos,
el color
no será visible porque nuestro
fondo es blanco. Entonces si podemos cambiar este fondo a
diferente color como este, vamos a cambiarlo a
color verde o podemos agregar el trazo para este cubo
o para este rectángulo. Vamos a agregar Etroke seleccione el rectángulo y
haga clic en Acabo de agregar el astro
negro entonces aquí seleccionaremos nuestro
tercer color. Copia esto. Probemos este color con él. Cuando lo probamos, todavía falla, lo que significa que no podemos usar este color azul en fondo
negro. Tenemos que usarlo
solo en fondos blancos. Cópielo, ve aquí y da clic aquí, luego agrégalo como siguiente color. Ahora tenemos colores. Así que ahora podemos crear estilo. Así que da clic aquí y haga
clic en este icono más, y pongamos este
estilo como negro, y hagamos clic en el blanco
y haga clic aquí, haga clic en este icono más
y establezca este color como él y luego haga clic
en este color azul. Haga clic aquí, haga clic en el icono
más y
conéctelo como azul y haga clic
en Createtyle Bien. Ahora tenemos nuestros
colores y tipografía En la siguiente lección, vamos a crear un logotipo
para nuestro sitio web.
46. Diseña un logotipo de marca: Hola a todos. Vamos a
crear un logotipo para nuestro sitio web. Contamos con tipografía y colores. Ahora vamos a crear el logo. El nombre de nuestro sitio web es
BG Family Clinic, así que solo lo copiaré y vendré aquí y solo lo
pegaré aquí. Entonces lo que voy a hacer es
que voy a crear un texto, a presto y a crear texto aquí. Después pego este texto, después voy a quitar esta parte de
la clínica familiar. En realidad, puedo quitar esta. Entonces voy a cambiar esta
tipografía a encabezado. Después voy a dar click
en separar Istile. Cuando hago clic en Detachtyle, puedo cambiar
libremente Aquí dentro, voy a
hacerlo extra audaz y vamos a aumentar los
lados a 78 así. Entonces voy a cambiar
el color de relleno a este color azul ahora
tenemos que diseñar el
resto del logo. Voy a dar click en T, dar click aquí, ritmo este texto que
lo copiamos y aquí tenemos parte clínica
familiar. Ahora voy a dar clic
aquí y dar clic en Chad. Entonces lo que voy a hacer
es desacoplar el estilo E, luego ponerlo así Agreguemos espaciado como 20. Entonces aumentaré
más de esta parte de JB. Ahora voy a dar click en este texto y vamos a dar
click en el fondo de línea. En realidad está bien. Ahora volvamos a
aumentar este 20 y resaltemos ambos y clic en Alinear centro vertical. Ahora voy a cambiar este color de prueba
clínica familiar por el negro. Bien. Ahora lo que hago
es resaltar esos dos elementos y presionar
Comando G para agruparlo. Y ahora acabamos de
crear un logo sencillo. Podemos hacerle muchas más
cosas a este logotipo, pero esta es la manera
fácil de crear un logotipo y vamos a crear
otra versión de este logotipo. Entonces para hacer eso, volveré a presionar T y
agregaré a JB así Después haga clic aquí, establezca como texto de
encabezado y haga clic en
el enlace para desvincularlo, y luego aumentemos
este tamaño a negrita Y ahora vamos a aumentar
los tamaños como 88, Bien. Entonces podemos dar click en T y
agregar el resto del texto y solo obtenemos la parte de la clínica
familiar y dar click aquí en el titular, entonces podemos ponerlo así. Entonces podemos incrementar
este texto como queramos. Hagámoslo 102 y
agreguemos este espaciado a las seis, luego podremos seleccionar los ítems y hacer clic en el contenido horizontal de la
línea. Entonces podemos hacer
algo así. Hagamos esta
familia de color azul. Entonces seleccionemos esta parte B y hagamos que sea de color azul. No se ve bien. Si queremos, podemos simplemente hacer que este Golpe forme parte como
el color azul. Hay muchas maneras en las que podemos agregar algunas líneas alrededor de este logotipo. Por ahora, esto va a ser
bueno para nuestro trabajo. Podemos hacer algo
así también. Entonces aumentar a 50, 50 es demasiado, 15, y cambiemos este color para
que realmente lo hagamos azul. Podemos hacer algo
así también, pero es 7.5 y luego vamos a hacer clic en flecha y
vamos a crear una flecha así. No es flecha, es una línea, da clic en la línea, y otra vez, haga clic así, luego pongamos esta línea aquí y tenemos que
hacer el tamaño como uno. Podemos hacer algo
así también. Hay muchas cosas para hacer esto. Hay muchas cosas que hacer, pero la manera simple y fácil es crear este tipo de logotipo. Voy a toda esa información. Ahora puedo dar click en este
logo y dar click en puerto. Después establece el tipo de archivo como PNG, luego aumenta el tamaño a dos x, luego haz clic en Descargar y
se descargará así. Voy a cambiar su
nombre por el logo de JB. Duplicemos este
y hagamos esto como logo. Ahora, solo creamos un
logotipo simple para nuestro sitio web.
47. Qué es el componente de Figma: Hola a todos. I FIGMA tenemos una característica
llamada componentes Los componentes son
objetos reutilizables que pueden ayudarnos a crear y mantener un
diseño consistente en todo el sitio web, para que podamos convertir cualquier
elemento o elemento del
lienzo Figma en un componente Así que vamos a componente de este logotipo. Para ello, solo
selecciono el logo. Cuando selecciono el logo, puedo ver en nuestro lado derecho, tenemos el ítem que
seleccionamos y aquí tenemos un pequeño icono que
llama crear componente. Yo sólo lo toco. Cuando hice eso, este logo
se convirtió en un componente. Cuando te conviertes en un componente, resaltado del artículo se
convertirá en índigo. Si hago clic aquí, se mostrará como. Déjame aumentar el diseño. Si hago clic en elemento normal, se resaltará como azul. Pero si hago clic en componente, resaltará como indigos También en sección de capas del lado izquierdo , dirá, es un componente. Ahora como usar este componente
para demostrarlo, solo
crearé un frame y vamos a
crear otro frame. Ahora creo que necesito agregar este logo a este
marco para hacer eso, tenemos un método fácil para usarlo, podemos ir a esta
pestaña AZA en nuestro lado izquierdo. Simplemente hago clic en él y
cuando haga clic en él, puede
que vea bibliotecas aquí. Si quiero, sólo puedo
buscar logo de biblioteca. Y saldrá el logo o
si hago clic en local afirma, el logo estará aquí Ahora solo tengo que dar click sobre esto y dar click en
Insertar instante. Ahora podemos editar aquí. Instancia significa una copia
de este componente principal, lo que significa que si hago
cambios en este componente, afectará instancia
de este componente. Vamos a dit este marco
para simplemente hacer clic aquí, haga clic en Insertar instante, luego solo lo
agregaré como Bien, para demostrar el beneficio
de este componente, duplicaré esto así y luego haré clic en este ícono instantáneo
separado. Cuando hago clic en
él, simplemente se convierte en
un elemento normal. Si voy a archivo, es solo un ítem normal, y ahora vamos a duplicar este
así y así. Ahora piensa que tengo que cambiar
este color JB a rojo. Entonces tenemos dos versiones. Una es una instancia de
este componente principal, y aquí está el
ítem duplicado de este logotipo. Entonces cambiemos el color. Aquí, selecciono el texto y cambiemos este
color a como rojo. Doy clic en separar el estilo de aquí y cambiar
este color a rojo Cuando cambie ese color, afectará la instancia
de este componente principal. Entonces si cambio este oh uno, va a cambiar así. Pero si duplicas
este logo normal, y vamos a hacer cambios
a este oh uno, este toque mejor
ver así. Bien. Ahora bien, si hacemos
cambios a este logotipo, no afectará a
nuestros logotipos duplicados. Ya ves, ese es el beneficio
de tener un componente. Ahora sólo voy a eliminar todos
ellos y dar clic aquí, vamos a eliminar los
cambios y aquí, vamos a poner el color en azul. En nuestro sitio web,
vamos a crear 45 páginas. Entonces en ese caso, podemos crear instancia de
este componente. Como podemos cambiar los
detalles de este instante. Como ejemplo, si cambio
aquí como uno oh uno, no
afectará al componente principal, pero aún así si cambio el color, cambiará el color de esta instancia y
si cambio aquí, dos no afectará a
esta instancia editada porque la editamos e
intentemos cambiar el color. Cambiemos de color a azul. Aún el color va a cambiar, no
voy a cambiar
el texto porque cambiamos el texto
de esta instancia. Este es el beneficio
del componente de uso. En el futuro, usaremos más componentes y
aprenderá más sobre los componentes, vea en la siguiente lección.
48. Aprende más sobre los componentes con botones: Bien. Ahora intentemos crear
componentes con botón. Para ello, voy a crear un nuevo marco y vamos a
configurarlo como marco de escritorio. Bien. Ahora aquí,
voy a crear un botón. Para crear un botón, presiono la T y pongamos
el nombre del botón como botón. Nombre o simplemente podemos decir etiqueta. Entonces aumentaré
su tamaño a me gusta 20, y cambiemos la fuente a
ferrocarril y haga clic aquí, luego lo haré en mayúscula, luego cambiemos regular
a semi bool Bien, ahora presiono Mayús A para crear layout o
agregar layout automático a este botón y estableceré 30 como relleno
horizontal y
20 como relleno vertical. Ahora voy a cambiar el color de relleno a, vamos a cambiarlo a color verde así con verde más oscuro. Como este color, entonces voy a agregar esquinas como 30,
hagámoslo seis. Bien. Ahora voy a cambiar
este color de texto, vamos a cambiarlo a Y. Ahora tenemos que hacer que el color de
fondo sea un poco
más oscuro así. Ahora tenemos este marco, así que le renombraré
como botón luego haré clic en este componente de creación y cambiaré este botón
a un componente. Bien. Ahora, como aprendimos antes, podemos agregar este botón
repetidamente en otros lugares. Vamos a hacerlo. Voy a Afirma
y hago clic en componente Earl Aquí tenemos el botón, luego hago clic en Insertar Instancia. Bien, aquí tenemos el botón, y aquí voy a
cambiar este texto a Aprendo más de mí. Bien. Entonces si cambio
este color de texto a gris , cambiará a gris. Al igual que cuando hago
cambios como este, va a cambiar a
nuestra instancia así porque
este es
nuestro componente principal, y aquí está la instancia
de este componente, lo que significa que si vamos a evaluar y crear
más instancia, podemos agregarlos en cualquier lugar
cambiando el texto, haga clic y podemos agregar este tipo de botón a
lo largo del diseño. Y también, podemos duplicar
esta instancia así todavía y aplicar los cambios que
hagamos al componente principal. Yo componente principal,
podemos crear variante. Variante significa
versión diferente de este botón. A modo de ejemplo, llamemos a
este botón botón principal. Este es un botón primario y creo que necesitamos un botón
secundario. Y esa forma de botón es la misma. Lo único que no va a
tener color de campo en verde. En cambio, tendrá
un borde de verde, y este texto también será verde. Para ello, podemos seleccionar
nuestro componente principal, y cuando haga clic en seleccionarlo, veremos este
pequeño icono más, y se llama advariano
Cuando haga clic con, creará una
versión duplicada de este botón Entonces cambiará el
diseño de este botón. Vamos a agregar trazo. Yo solo presiono aquí y agreguemos trazo con este color
y hagámoslo también. Ahora cambiaré este color de relleno o
eliminaré este color de relleno. Esto, entonces voy a cambiar
este color del texto del botón. Cambiémosle el
color del texto al mismo color de este fondo y
es poca luz. Hagámoslo más
oscuro así y agreguemos ese color de
borde a Bien, ahora tenemos el botón principal
y el botón secundario. Así que vamos a cambiarles el nombre. Entonces hago clic en este botón, y aquí voy a llamar a esto como botón
secundario secundario. Bien. Cuando
lo cambio y presiono centro, llama botón secundario, y aquí tenemos
el botón principal. Llamé default, podemos
cambiar este default a botón
primario. Bien. Todo bien. Ahora tenemos dos versiones
de este botón y podemos crear muchas
versiones como queramos. Bien, por ahora, usemos
esta variante en nuestro marco. Para ello, voy a ASsets
y aquí nuestro botón. Cuando botón, podemos ver dos, quiero decir que incluye dos variantes. Entonces solo lo presiono, y desde aquí, puedo seleccionar el tipo de
botón que quiera. Entonces haré clic en el botón
secundario y haré
clic en Insertar Instantáneo. Entonces aquí está, y ahora podemos cambiar este
nombre bien ubicación así. Y ahora piensa si queremos que este
sea un botón primario. Entonces pensemos que vamos a tener
aquí tenemos aprender más. Aquí tenemos botón de aprenderme
y botón de buscar ubicación. Este es el botón principal, y este es el botón
secundario, y quiero hacer esto
como botón principal. Para ello, hago clic
en el botón, y aquí
tenemos propiedad uno, solo
hago clic así y hago
clic en botón principal. Simplemente cambia y obtén todos los
detalles de este componente. Los datos del botón principal. Entonces si quiero
hacer esto secundario, sólo
puedo hacer clic
aquí y dar clic en el botón
secundario y podemos hacer esto a cualquiera de estos botón. Este es el beneficio de conocer componente y
saber agregar variante. Además, vamos a crear
otra variante. Simplemente presiono clase
y para esta, cambiemos los detalles, primero
eliminemos el campo y no creemos
ningún tipo de borde, y cambiemos este color de
texto a este color. Entonces agreguemos el icono al lado de aquí. Vamos a agregar el icono a aquí. Para ello, voy a aletas y
de aquí, vamos a conseguir icono. Entonces voy a obtener icono de plug in. Así que solo busco
aquí fuente Osome,
tenemos iconos de fontosom Simplemente hago clic en él, y desde aquí, vamos a obtener
icono vamos a obtener icono. Una flecha. Seleccionemos
este tipo de flecha. Ahora solo selecciono la flecha y presiono Comando X y la corté. Si eres usuario de Windows, puedes presionar Control X y luego presiono Comando
V. En tu caso, será Control V. Entonces
tendremos un diseño como este. Doy click en esto y voy a
aumentar esto así. Ya no necesitas esta flecha, círculo
ALT, solo
elimínala. Bien. Ahora aquí, voy a hacer clic en este logotipo y vamos a cambiar
ese logotipo a este color. Bien. Ahora hago clic en esta
variante y aquí, puedo cambiar entre talla. Hagámoslo como Bien. Ahora lo que puedo hacer es
agregar esto a nuestro diseño. Entonces, antes de agregarlo, cambiemos el nombre de este botón para
simplemente hacer clic en el botón, hacer clic en el botón,
y cambiémoslo a botón
primario secundario simple, botón simple. El nombre no es importante. Bien. Ahora lo que puedo hacer
es agregar este botón también. Entonces si voy a AZAS
haga clic aquí y aquí, cambie la propiedad a botón
simple y haga
clic en insertar instancia, agregaremos que podremos agregar ese
botón así. Voy a Fs. Y ahora
agreguemos todos esos botones dentro del marco
del escritorio así. Bien. Ahora aquí,
puedo cambiar el texto. Vamos a cambiarlo para ir
al siguiente paso así. Entonces ahora si queremos, simplemente
podemos hacer clic en el botón y
cambiarlo de diseño así. Ver, esto es
lo importante de saber sobre componente y tener
idea sobre variante. Nos ayudará a mantener la consistencia en todo
el sitio web.
49. Cómo encontrar contenido para el diseño de sitios web: Hola a todos. Yo cliente no está proporcionando contenido de texto
o imagen, tenemos que encontrarlos. Primero, veamos cómo
encontrar el contenido de la imagen. Para ello, podemos utilizar sitios web
gratuitos de imágenes históricas como pixadt com o pixabay.com Esas imágenes están libres de derechos, lo que significa que podemos
usarlas en nuestros productos. En nuestro caso, tenemos que
encontrar imágenes
relacionadas con clínica familiar. Yo solo buscaré algo
así como clínica familiar, y aquí están las
imágenes que obtuvimos. Doy click sobre estos filtros y aquí
lo pondré como horizontal. Entonces solo podemos filtrar
las imágenes horizontales. Simplemente seleccionaré
algunas de esas imágenes, así que solo las abro
en Nueva Ventana. Vamos a abrir esta. Ahora iré al pixabay.com y busquemos algo así
como doctor Yo aquí voy a filtrar solo así que solo busca y
encuentra imágenes como esta. Ya seleccioné
las imágenes que
necesitamos para completar este proyecto cuando diseñas proyectos reales, solo encuentra imágenes
relacionadas con tu nicho de sitio web. Ahora veamos cómo
generar contenido. Para generar contenido,
podemos usar GPT o J Mini. Usemos GPT. Acabo de copiar nuestro y
vamos a llenar este aviso. Entonces aquí eres diseñador web, y vas a diseñar
sitio web para JB Family Clinic Entonces vayamos a nuestro conjunto de requisitos de
diseño web, copiemos este nombre, y luego quiero que aquí, tenemos que agregar la tarea. Quiero que generes contenido para cada sección del sitio web. Te voy a dar el nombre de la sección, y tienes que
generar contenido. Entonces aquí está la sección de
más información, podemos agregar todos los
detalles que
recogimos en la tabla de
requisitos de diseño web. Entonces comencemos desde aquí, copiemos este y enfrentemos a éste, entonces vayamos aquí, pasado así. A aquí así, entonces ve aquí así. Esa es la información
que podemos proporcionar. Bien, entonces
me damos tres opciones. Tenemos que cambiar esto
porque no lo enviamos a la sección que
queremos obtener contenido, así podemos que me puedas dar
tres opciones para cada sección
cuando te doy la
sección y presento,
digamos que estoy listo para ayudar a
generar contenido para cada sección de la página web de la
familia BG Kenic Bien, ahora solo tengo que
agregar la sección, voy a agregar sección
como página de inicio rosa aquí tenemos
la sección de héroe. Bien, tenemos titular, sub titular y llamado a la acción. Entonces si esta sección no
es adecuada, podemos hablar de ello. Puedo decir, también me gusta la opción, pero subtitular y CTA
significan llamado a El texto en el
botón es demasiado largo. ¿Se les puede mostrar? Ahora digo que es demasiado corto. Entonces puedo decir que
aún es demasiado corto. Y me puedes dar sólo
150 caracteres subtitular. Aquí tenemos el subtitular
que tiene 150 caracteres. Mantenga la conversación
así con CGBD y genere el texto. No obstante, siempre
lee el texto que genera la IA antes de
agregarlos a tu sitio web. Bien. Ahora te veo
en diseño web real y podrás obtener todas estas fuentes
e imágenes de la sección de
recursos.
50. Sección de héroes de diseño: Hola a todos. Es hora de
diseñar nuestro sitio web. Entonces comencemos por
crear el marco. Voy a crear marco aquí, así que haga clic en el marco y luego aquí, vamos a seleccionar el tamaño del cuadro de escritorio. Bien. Ahora,
según nuestro mapa del sitio, primero tenemos que
crear la página de inicio. Entonces voy a renombrarlo como hogar. Entonces traeré esta estructura de
sitio web hasta
aquí para que podamos
ver claramente esos dos marcos. Bien. Ahora aquí, agregaré
cuadrícula de diseño a este marco. Para ello, hago clic en este icono
más y hago clic aquí, luego cambio la cuadrícula a columna y el
recuento de columnas será de 12. Y luego mantengamos este color. Y aquí tenemos que añadir margen. Agreguemos margen como 140. Los datos serán 20. Bien. Ahora vamos a disminuir la opacidad de esas cuadrículas de
diseño así Ahora si quiero, puedo salvarla. Simplemente hago clic aquí, aplico estilo y hago clic en
este estilo creativo y hagamos de esto una
grilla de llamadas y presente. Ahora podemos reutilizar esos
datos de cuadrícula una y otra vez. Como primer paso, tenemos que convertir este marco a un AutoAyouto tenemos que agregar diseño
automático a Para ello, puedo hacer
clic derecho y aquí puedo hacer clic en agregar otoaYouto Puedo dar click en
el marco y presionar Mayús A. Cuando presiono Mayús A, agregó diseño
automático Entonces aquí dentro,
tenemos que configurarlo como disposición
vertical
porque vamos
a diseñar el sitio web de
arriba a abajo. Entonces a este
hueco vertical entre objetos, voy a hacer uno a 20, lo que significa que tendremos un espacio entre dos
secciones como 120. Entonces el patrón horizontal
será de 140 lo que
significa que el contenido solo estará
disponible dentro de esta sección. Agreguemos el margen de
relleno del extremo superior como 20. Bien. Ahora ya está listo. Primero, solo
aumentaré este diseño y agreguemos
imagen de fondo a la sección de héroe. Vamos a crear un triángulo rojo, presiono sobre triángulo rojo,
clic así, luego voy a hacer clic en
este IgnooToayout, porque vamos a
agregar Entonces ahora voy a hacer WTs 1,440
y hagamos alturas 800. Bien. Pongamos esto así. Ahora voy a agregar la
imagen para agregar la imagen, hago clic aquí da clic
en esta pequeña flecha
hacia abajo en tos con forma
y da clic en Video de imagen. Desde aquí,
elegiré Imagen 04, así que doy click en Abrir. Y ahora voy a dar click en el rectángulo y esa imagen se
agregará así. Entonces ahora si quiero, puedo establecer crop y puedo
ajustar la posición. Entonces vamos a ajustarlo
así. Bien. Ahora vamos a comprobarlo
en modo de vista previa, así se verá así. Como siguiente paso, tenemos que agregar color de superposición. Sin agregar color de superposición, no
podremos agregar texto porque afectará la
legibilidad de la página de inicio Para agregar overlay, podemos simplemente dar
click en este relleno y dar click en addFll y aquí podemos
aumentar la Lo que voy a hacer
es agregar el gradiente. Media radiante en un lado, podemos agregar más oscuro
y otro lado, podemos agregar color más claro. Entonces hagámoslo. Entonces el tipo radiante
será lineal. Podemos cambiar la
posición así. Entonces para este,
pondré color claro en la parte superior y
color oscuro en la parte inferior. Así que vamos a hacer clic aquí. Entonces aquí está el color claro. Vamos a ponerlo como 70, y aquí tenemos el color oscuro. Entonces tenemos que
aumentar el color oscuro. Ah, y a partir de aquí, voy a hacer 100. Entonces podemos ajustar esos colores. Entonces en la parte superior, hagámoslo brillante, agreguemos como 25 y aquí, hagámoslo como 80. Sí. Y si quiero, puedo hacerlo así. Entonces aumentemos un poco más. Bien. Ahora, se
verá así. Entonces solo agregamos
gradiente lineal y si queremos, podemos cambiar esta opacidad a abajo y hacerla más
ligera así Hagámoslo como en. Vamos a hacer clic en este I para alturar nuestra cuadrícula de diseño y
se verá así. Ahora nuestros antecedentes están bien, como siguiente paso, tenemos que agregar el contenido. Entonces hagámoslo en la siguiente lección.
51. Menú de diseño: Hola a todos. Es
hora de crear el menú. Antes de crear el menú, vamos a crear un marco para toda
nuestra sección de héroes. Para ello, solo hago clic en el
marco y doy click en aquí. Bien. Entonces lo que hago es establecer el
ancho como contenedor de llenado, y fijemos la altura como 800 porque 800 es la
altura de este fondo. Ahora este marco
más grande que el fondo. Entonces, para arreglarlo,
¿recuerdas, agregamos 20 como vertical alineamos el marco
en nuestro marco de casa? Entonces pongámoslo como cero. Cuando lo puse como cero, este marco simplemente encaja
con el fondo. Ahora voy a cambiar
este nombre como héroe. Bien. Entonces lo que hago es agregar diseño automático
a este marco héroe, seleccionar el marco
y presionar Mayús A, y para el diseño, estableceré el
layout vertical y seleccionemos el align top center como posición y podremos
cambiar esas cosas más tarde. Entonces eliminaré el
relleno horizontal y lo pondré como cero. Entonces hagamos clic en el desvanecimiento
individual. Icono. Entonces aquí,
pongámoslo como para el fondo, hagamos que sea cero. Todo bien. Ahora es el momento
de crear el menú. No voy a crear
este tipo de menú. Voy a crear
un menú diferente. Entonces empecemos. Primero, para crear el menú, voy a dar click en frame
y dar click aquí. Luego configuraré con
un contenedor de relleno, y hagamos clic en Rellenar
y agreguemos color de relleno. Agreguemos color como blanco, pero no se mostró
porque tenemos que
poner esta imagen encima de la sección de
héroes así. Bien, ahora se está mostrando. Ahora hago clic en el
marco y pongamos la altura como 130 Bien, mucho mejor. Podemos cambiar esos tamaños
mientras están diseñando. Después agregaré
esquina como 20. Bien. Ahora en este marco, crearemos nuestro
menú y se verá mucho mejor que
este Menú normal, así que vamos a crearlo. Primero, haré clic en el
marco y presionaré Mayús A para convertirlo a un diseño automático o agregaré
diseño automático a ese menú. Después toco dos veces el marco y cambio su
nombre al menú principal. Bien. Ahora,
cambiemos las propiedades. Necesitamos disposición horizontal porque vamos
a crear menú de izquierda a derecha como este menú así entonces no necesitamos relleno
horizontal, hazlo cero y no
necesitamos relleno vertical
para hacerlos cero. Entonces por ahora, mantengamos la brecha
horizontal entre
los objetos como diez. Entonces pondré una
línea a la izquierda al centro. Entonces agreguemos nuestro logo. ¿Te acordaste de la lección de
componentes Convertimos este logotipo
en un componente. Podemos
acceder directamente y crear instancia de ese logotipo
usando esta pestaña Assert Doy click en ASE y aquí, hago clic en Local afirma
y aquí nuestro logo Simplemente hago clic en él y doy clic en Insertar Instantáneo y después lo
pondré así. Vamos a los archivos. Ahora bien, esta instancia o este
logo está fuera de nuestro marco, vamos a agregarlo dentro este menú principal
dañándolo como Bien. Ahora es más grande, así que tenemos que cambiar el tamaño
para cambiar el tamaño. Podemos revisar la hoja
de pegatinas. En realidad,
presionemos Comando X o Control X para cortarlo y
pongámoslo aquí así. Entonces lo voy a
arrastrar hasta aquí. Entonces podemos disminuir
el tamaño de este texto. Son 84, así que vamos a disminuir
aumentarlo así. Vamos 40 55 y tenemos que cambiar este tamaño de
texto así. Hagámoslo como 42. Ahora lo que tenemos que hacer es
cambiar esto entre tamaños. Cambiémoslo
como seis y siguiente, cambiemos esto con esto. Entonces cambiemos. Presionemos comando o control, luego cambiemos el tamaño
así y ponlo al centro, seleccionemos esos dos textos y hagamos que sea centro
y aquí están centro. El logo es aún más grande. Yo? Comprobemos el
logo en modo presente. Todavía es un poco más grande, vamos a disminuir el tamaño, primero, vamos a disminuir este
texto subir a como 50. Bien. Entonces
cambiemos esto a 35. Pongámoslo como 36. Bien. Ahora aquí,
da clic en el medio. Cambiémoslo a
cero, así. Y luego hago clic en el
componente principal y presiono comando. Si usas Windows, presiona Control y disminuye
su tamaño así. Bien. Ahora el nu se está haciendo pequeño. La razón es que se configuró
automáticamente para abrazar, así que simplemente cambie este sitio a 120. Creo que lo agregamos como uno a 20. A ver, 120 será perfecto. Y ahora
volveré a poner este logo en el asiento estrella. Simplemente lo selecciono y presiono Comando X en Windows Control X, luego solo ven aquí y lo pego así y lo pongo así. Bien. Ahora de nuevo, vamos al menú y damos clic
en el marco del menú, y ahora agreguemos paddins
horizontales Ahora encaja perfectamente. Vamos a verlo en el diseño y
se verá así. Si queremos, podemos aumentar
el tamaño de este logotipo, pero este se ve mejor. Ahora tenemos que agregar
elementos del menú para agregar elementos del menú, podemos dar click en T
y dar click así. Entonces solo agregaré texto como este y luego
vayamos al mapa de nuestro sitio. Se trata primero de copiar el
texto y dar click aquí. Obtuve las propiedades de
ese texto mientras lo copiamos. Entonces Ipress Control está configurado para deshacer el cambio y solo
voy a teclear madera B. Y luego voy a dar clic en
ese texto y dar clic aquí, dar clic en Tipografía, y
vamos a hacer clic en Bien. Ahora, lo que
voy a hacer es duplicaré esto por
cuántas veces una, dos, tres, tres veces. Así que vamos a duplicarlo. Control C, Control V. Oh, vamos, esto nos gusta. Entonces agreguemos
esos otros textos. Tenemos bloques, así que solo
haz clic aquí y agrega Block. Entonces tenemos a nuestros proveedores. Así que vayamos aquí y
agreguemos a nuestros proveedores. Veamos que el texto es
correcto o no agregando a la barra de URL de Google
Chrome es bueno, entonces tenemos que agregar contacto. Vamos a agregar contacto.
Bien. Contenido. Muy bien, bonito. Ahora lo que tenemos que hacer es
seleccionar todo este elemento del menú y presionar Mayús A para
crear un AutoAyoutFrame Ahora aquí está ese marco, así que le renombraré como
elementos del menú y presionaré Enter. Bien. Ahora vamos a la configuración de
autodiseño del nuevo ítem, así que pongamos
entre lados como 20, y pondremos todos esos gap horizontal y
vertical como cero Parece que está perfectamente
alineado en el centro. Bien. Entonces nos olvidamos del hogar. ¿Por qué nos olvidamos del hogar? Duplicemos sobre y
cambiémoslo a Home. Bien. Ahora voy a cambiar este color de relleno casero a
color azul. Bien, ahora lo que tenemos que añadir son los datos
de contacto de la clínica. Entonces quiero agregar el número de
contacto aquí. Entonces agreguemos esos detalles. Entonces, por ahora, hagamos clic en el marco del menú principal
y en el diseño automático, agreguemos entre
tamaños como 60. Bien. Ahora se
verá así. Entonces reviso el
diseño desde aquí, pero podemos hacerlo mejor. Entonces probablemente en la siguiente lección, haremos más cosas. Antes de irme, vamos a hacer clic
en este marco de inicio y ¿ recuerdas la última vez que
ocultamos la cuadrícula de diseño?, haga clic en este ícono del programa para que vuelva
a visitarlo. Bien. Ahora se
verá así.
52. Elemento de diseño: llámanos: Hola a todos.
Ahora es el momento de crear llámanos al número de
contacto aquí. Para ello, tenemos que
generar un número de contacto falso. Voy a GPT, y voy a agregar comando como
crear falso número de contacto de Estados Unidos y Dar es para agregar al lado derecho del menú Así que dale texto claro
para agregar su presente. Bien, esto se ve bien, pero no necesito tiempo disponible. Solo necesito agregar llámanos texto. Voy a agregar comando
como no necesito abrir solo número de contacto con tipo
CTA toma CDM
en llamada a ver, es así, pero todavía no me gusta esto. Diré que no me gustará llamarnos 247 y agregar el
número de contacto a continuación, pero llámenos dos, cuatro, siete debe ser mejor que eso. A ver. Bien, alcance en cualquier momento. Digamos, dame
tres sugerencias. N versión corta. Bien, agreguemos esto llámanos
247 y luego agreguemos el número. Entonces para hacer eso,
iré al marco home, y aquí está el lugar al
que queremos agregarlo. Entonces presionaré T
y daré clic aquí. Después agregaré el texto. Vamos a copiarlo. Aquí
está el primer texto. Yo solo lo pego y vamos a presionar Comando C y comando V
lo obligan y luego pasaremos
este texto así Ahora lo que voy
a hacer es en Style,
primero, haré click aquí
y cambiaré la tipografía Vamos a establecer la tipografía subhding. Entonces aquí, pongamos esto
como citando tipografía. Entonces siempre selecciono
esos dos elementos y presiono Mayús A para
agregarlo a la maquetación automática. Entonces cambiemos la
posición a disposición vertical. Entonces pongamos
entre los lados seis. Bien. Ahora aquí,
quiero que esta clase sea poco es menor y este
número debería ser mayor. Hago clic en Conc las 247 y vamos a
cambiarlo al tamaño del botón. Eso es mejor. Entonces
voy a dar click aquí y desconectemos el estilo de esta
tipografía del número, luego pongámoslo audaz Ahora es mucho mejor. Ahora lo que necesito es en el icono
telefónico aquí. Hagámoslo también. Para agregarlo, necesitamos
tener un ícono. Consigamos icono de la biblioteca
Figma. Aquí, tenemos acciones. Simplemente hago clic en
él y desde aquí, voy a dar click en
plug in y Widget. Y a partir de aquí, podemos
obtener icono de pontosom. Acabo de buscar fontsom Ahora solo hago clic en
este icono de pontosom, y creo que ya lo
instalé, ya lo
instalé instalé Así que vamos a averiguar
icono y agregarlo. Vamos a obtener el código de icono. Busquemos como teléfono. Bien. Tenemos un icono. Simplemente hago clic en éste
y agregó así, entonces solo seleccionaré el icono y lo pondré dentro de
nuestro marco así. Bien. Entonces lo que voy
a hacer es seleccionar esos dos elementos y turno de
plagas A para hacer
diferentes marcos. Aquí está el primer fotograma
que creamos para la sección de números
o sección de fuente, y aquí está el segundo fotograma. Dentro del segundo marco o
dentro del segundo diseño noto, tenemos a Claus 247 y
ese número de contacto Después selecciono el primer fotograma y lo cambio layout
a layout horizontal. Entonces obtendremos
este tipo de resultados. Bien. Ahora quiero crear fondo azul
alrededor de este icono. Para ello, selecciono el
icono y presiono Mayús A y lo hago Atayou luego
hago clic en Alinear centro Primero, agregamos el Outlayou
luego lo hacemos un centro de línea. Después voy a hacer clic en el
icono más en el color del campo. Entonces aquí, en realidad,
puedo dar click directamente a este estilo
azul así. Entonces lo que voy
a hacer es agregar 20 por 20 así. Ahora no cambió de acuerdo
a los cambios para arreglarlo, voy a cambiar esto
con para abrazar contenido. Ahora vamos a hacerlo por dos. Dos pequeños.
Hagámoslo 15 por 15. Ahora voy a cambiar
las esquinas a 20. En realidad todavía es pequeño, pero es posible que podamos arreglarlo, entonces lo que voy a hacer es agregar trazo a esta capa de
diseño automático para hacer eso. Ahora hago clic en el diseño automático, haga clic en este más puedo y aquí, seleccionemos nuestro color como azul. Después hago clic en este
estilo de desprendimiento y desde aquí, seleccionaré color azul claro Esto va a funcionar. Entonces voy a aumentar el tamaño a como diez y vamos a
ponerlo afuera, real vamos a ponerlo dentro y vamos a cambiar
el diseño más. Bien. Ahora voy a ir dentro del marco y
seleccionar el vector. Entonces aumentaré este tamaño de
vector a 41 por 41. Es 41 por 40. Está bien. Ahora voy a hacer clic en el vector y cambiarlo de
color de relleno a color blanco. Ahora, vamos a
cambiarlo a 30 32 por 32. Así. Si hacemos
esto 32. Así. Ahora es mucho mejor y
espero que tengamos el espacio E. Aquí tenemos seis como espaciado. Ahora arreglemos el Alignu porque esto va
sobre este marco Para arreglarlo, solo tenemos que dar click en este menú
principal y cambiar este 62 auto presentador Ahora solo se ajusta de acuerdo
al Espace que tenga Bien. Ahora tenemos menú completo
como este para que podamos dar click en el
marco del menú principal y cambiar izquierda y a la derecha para que lo
hagamos seis. Bien. A ver.
Es como dos menos. Hagámoslo como 50. Bien. Ahora, aquí está nuestro menú. Parece que son dos compactos. Entonces arreglemos eso primero, podemos reducir el tamaño de
esta fuente como 20 así, luego cambiemos esto
genial nos lleva a 15, 60, luego hagamos clic en el elemento del menú y
hagamos entre el tamaño 30. A ver. Ahora es mucho mejor y
te veo en la siguiente lección.
53. Sección de héroe de diseño CTA: Hola a todos. Ahora es el
momento de crear esta sección. Vamos a iniciarlo. Primero, voy aquí
y hago clic en texto, y solo agrego texto a aquí así que agreguemos texto
como texto de héroe. Entonces deberíamos agregar
este texto en su interior. Ya está dentro de la sección de
héroes. Bien. Antes de hacer eso, en
la sección del menú principal, cambiemos el nombre de los detalles de este marco. Este marco será
llámenos y será
icono de llamada y este marco será
vamos a agregar el número. Bonito. Ahora vamos a crear el texto de la
sección Hero o el texto de CtA para hacer eso presiono el
texto T o Clec aquí y haga clic en Entonces vamos a un texto como Hero. Ahora voy a minimizar esta sección del menú principal
porque estamos listos. Firme eso y ahora desde aquí, seleccionemos el
texto y luego vayamos a Tipografía y digamos encabezado o seleccionemos el
texto de encabezado así Bien. Entonces agreguemos el encabezado que se
genera usando GPT Aquí está el titular. Yo sólo lo copio. puedes generar contenido
por ti mismo usando GPT, o puedes consultar la sección de
recursos ahí dentro Verás un
archivo de texto en ese archivo de texto, podrás obtener el contenido que
utilizamos en este sitio web. Vamos a agregarlo así. Ahora agreguemos el sub adingT
agregar subtítulo, voy clic en Sí, voy a hacer clic en T
y hacer clic como aquí. Entonces agreguemos texto así. Entonces agreguemos
este texto copiarlo, agregarlo así. Todo bien. Ahora vamos a la tipografía
y cambiémosla a subtitular. Bien, ahora tenemos el
subtitular y titular. En realidad, si queremos, podemos agregar otra línea de texto
y agregar el texto de tipo párrafo, pero esto es para reacción de bacalao de
CtA Por lo que la acción de Cd debe ser clara. Bien, ahora lo que podemos hacer es crear el botón. Entonces necesitaremos
más de un botón. Así que vamos a crear botón
y convertirlo en un componente. Para hacer eso, iré
a nuestra hoja de Stiger y dupliquemos esto y
llamémoslo botón Bien. Ahora presiono T, y aquí voy a decir, pero sí. Capaz, entonces seleccionaré
la tipografía como botones. Bien. Ahora cambio de ruta A para agregar
diseño automático a este botón. Y luego a partir de aquí, voy a añadir color de campo. Vamos a agregar color de campo
como este color azul. Y luego seleccionemos
el texto de este botón, y cambiémoslo a blanco o, e islectemos el
marco y en este fotograma, cambiaré el radio de la
esquina como 20 Entonces para
bddin horizontal agregaré 20, agreguemos 30 es más grande Agreguemos 20 y arriba e
abajo serán 15. Aquí está el botón. Ahora podemos obtener
directamente la
instancia de este botón. Para ello, iré a ASsets y aquí vendré a
bibliotecas y pincharé aquí. Bien. Ahora voy a convertir
esto en un componente. Antes de hacer eso, voy a
cambiar el nombre de este marco como VTN. Después haré clic en este
botón de crear componente y se convertirá en un componente. Ahora voy a
ir a nuestro diseño y aquí voy a hacer clic en afirma y aquí
tenemos el botón, así que simplemente hago clic en él y
doy clic en Insertar Instantáneo Ahora voy a ir a archivos, así que este botón está
fuera del marco. Vamos a agregarlo al marco del héroe. Sólo agrégalo así. Ahora cambiemos esta etiqueta
para solicitar cita. No voy a añadir hoy parte. Vamos a agregarlo como
solicitar cita. Entonces cuando lo reviso, parece muy pequeño. Entonces, hagámoslo más grande. Para hacerlo más grande, puedes ir aquí y dar
clic en el texto. En texto, haré clic este medio alineado
y ahora haga clic aquí, luego el
relleno horizontal será 30, y el
relleno superior e inferior serán 25. ¿Es demasiado? Vamos a hacer. Bien, veamos cómo se ve. Bien, mucho mejor. Da clic aquí y hagamos
cambios desde aquí para que
podamos ver claramente qué
podemos hacer así. Para esta sección de héroe, deberíamos tener un
botón más grande para crearlo, voy a dar click en el
componente y desde aquí, voy a hacer clic en esto en variante. Al hacer clic en él, podemos crear una variante de nuestro componente
predeterminado, lo
que significa que tiene todas las
propiedades de nuestro componente, y podemos cambiar esa
propiedad como queramos. Entonces vamos a cambiarlo como
izquierda y derecha
serán 35 y arriba e
abajo serán 25 sí, esto va a ser mejor. Bien, entonces hago clic en él. Entonces ahora hago clic en el
botón, y desde aquí, lo
cambiaré de nombre a botón de
encabezado Me gusta , y presionaré Bien. Ahora vamos a nuestro botón, y desde aquí, podemos
cambiar la propiedad. Actualmente es por defecto. Entonces si hago clic en encabezado
, cambiará a
la variante o a la
variante que creamos. Bien, los seleccionaré todos
y presionaré Mayús A
para agregar el diseño automático, luego renombraré esto como CTa. Bien, entonces aquí, me pondré entre Japa 220 y de aquí, pongámoslo
así de aquí, lo
voy a poner así Bien. Entonces quiero que esto se agregue al fondo
de esta sección de héroes. Entonces vamos a tratar de hacerlo. Por lo que actualmente, aquí
está la sección de héroes. Dentro de la sección de héroes, tenemos el menú, pero este CTa está fuera
de esta sección de héroes Entonces, si cierro la sección de héroes, el CTa no cerrará, así que tenemos que agregarlo dentro de
la sección de héroes así Bien. Ahora lo que podemos
hacer es hacer clic en seleccionar la sección de héroe y hacer
clic en una línea arriba a la izquierda, y desde aquí, voy a poner
esto entre lados en cuanto a, entonces voy a hacer esta altura de sección de
héroe como 800. Después de eso, agregaré
abajo agregando como 20. Parece que 20 es demasiado pequeño. Hagámoslo como 60. Bien. Ahora es mucho mejor, y en realidad vamos a
hacerlo como 40. Bien. Ahora veamos el
aspecto de este diseño. Bien, aquí está nuestro diseño. Para mejorar esto, podemos agregar un subtitular más grande Intentemos agregar uno más grande. En realidad, si elegimos este subtitular
en la opción dos, será mejor Entonces intentemos agregarlo así
como así y luego para arreglarlo, seleccionaré el CTa y
vamos a seleccionar el tamaño de CTa
como contenedor abrazo, y aquí, vamos a
seleccionarlo como relleno en realidad todavía necesitamos
hacerlo más pequeño así Pongámoslo así. Bien. Ahora veamos el diseño. Se verá así. Cambiemos el
radio de la esquina para que quede 15. Vamos a tratar de hacer
eso. Simplemente hago clic aquí y vamos a cambiarlo 20. No 20, 15. Hagámoslo por éste, dos, y veremos cómo
afectó al costado. Ahora es mucho mejor. Y hago clic en el
fondo y vamos a aumentar la oscuridad
del fondo. Doy click en lineal y aquí voy a aumentar
la opacidad como unreno aquí aislar la sección de
héroe y en la parte inferior, hagámoslo como 60 Bien. Ahora veamos el diseño. Ahora se verá así. Podemos hacer algo así, y ahora va a ser mucho mejor.
54. Diseño sobre la sección: Hola a todos. Ahora es el momento de diseñar el resumen sobre nosotros. Entonces hagámoslo. Primero, tenemos que
generar el contenido, así que voy a GPT, y aquí voy a decir
generar sobre nosotros
resumen con titular,
titular y párrafo con
un párrafo con la carga Entonces estamos listos en este comando. Entonces ahora cuando demos
este nuevo comando, generará la sección. Vamos a agregar más información, ahora es el momento de
generar sobre nosotros sección de
resumen con titular y botón. Presionemos Enter y veamos, tengo tres opciones. Ahora quiero decir, quiero agregar dos botones
en nuestra estructura, tenemos dos botones. Vamos Bien, vamos a leer
esas tres opciones. Bien. Me gusta esta
primera opción titular y párrafo y cuatro botones, voy a añadir un botón como aprender más y siguiente botón como proveedores de torre de
carne. Bien, hagámoslo. Entonces aquí está el archivo de texto que
agrego toda la información
que generé con IA, por lo que agregaré sobre resumen a este
titular y a este párrafo, luego tendremos que
agregar botones como aprender
más y agregar botón Learn More
y conocer a los proveedores de torres Se trata de botones aprende
más y el segundo serán los proveedores de MO. Ahora comencemos el diseño. Ahora estoy en nuestro archivo Figma, como primer paso, voy a dar click en frame
y dar click aquí Entonces establecerFame con ese relleno entonces
agregaré alturas Vamos a agregarlo como 600. Bien, ahora tenemos la sección. Entonces lo que voy a hacer es presionar Mayús A para
agregar el diseño automático. Simplemente agregamos diseño automático
a este marco y cambiaré el nombre de este
marco como sobre resumen. Bien. Ahora como primer paso, tenemos que agregar una imagen
y vamos a agregar esa imagen. Para agregar la imagen primero, voy a hacer clic en
Triángulo de contrato y dar clic aquí. Bien, nuestra altura fue cambiada. Vamos a hacer clic en un marco de resumen que ya agregamos
el diseño automático. Entonces agreguemos esta altura como 600. Bien, ahora también deberíamos tener que
quitar el relleno horizontal
y también el acolchado vertical. Entonces aquí dentro, pondré el
artículo entre la talla como 20. Bien. Ahora voy a aumentar
este tamaño de imagen así. Esto. Veamos ¿cuántas
columnas tenemos? Uno, dos, tres,
cuatro, cinco, seis. Bien. Y para este lado, tenemos uno, dos, tres, cuatro, cinco, seis. Bien. En realidad, sólo voy a
disminuir este tamaño a. Vamos a establecer este ancho como 520. Bien. Ahora agreguemos la imagen. Para agregar la imagen,
doy clic aquí y doy
clic en video de imagen. Bien, a partir de aquí,
tenemos que seleccionar imagen, así que me dejaron este IMG cero, tres imagen y presione enter Entonces aquí hago clic en el
rectángulo así. Bien. Ahora lo que hago es agregar esquina radice
como 20 así Vamos a verlo en el diseño, así se verá así e intentemos agregar una imagen
diferente. Doy click en este
triángulo rojo y clic aquí, clic en videos de imagen, y agreguemos este tipo de imagen porque no me gusta
este color de imagen. Bien. Ahora bien, se ve así. Bien. Ahora tendremos que agregar
este tipo de información. Vamos a agregarlos para
agregarlos para hacer eso, tengo que crear
dos tipos de texto. Generemos esos
textos usando el chat GBT. Digamos que la acción relacionada con IC. Uno ahora necesito agregar dos texto
para agregar alrededor de las imágenes, por ejemplo, 100% K, tenemos experto así. Digamos que dame tres
opciones de mi inglés está bien. Veamos qué
genera. Es demasiado largo. Digamos que es demasiado largo. Bien. A mí me gusta esta primera opción, así que las voy a copiar y
pongámosla así en nuestro
documento. Bien, solo se agregó como
texto alrededor de las imágenes. Bien. Ahora vamos a nuestro archivo, y vamos a crear
esos textos más Ist y nuestro primer texto
será 100% caos. Vamos a crear otro texto, y pongamos
esto así para obtener
esa información. Y ahora creo otro
texto como este, entonces lo haré. Lo siento, vamos a crear
otro texto. Entonces pondré texto
aquí y 100 por aquí. Entonces lo que voy a
hacer es dar click sobre ese texto, y en tipografía, lo
agregaré como encabezado Entonces para este, voy a agregar esto como subbedingo Ahora para este experto de confianza, agregaré subbedding Veamos que esta fuente va a funcionar. Sí, parece que va a funcionar. Tenemos espacio aquí. Yo solo canto ese espacio, y ahora tengo que agregar esos
textos así para agregarlos, solo
seleccionaré dos de y presionaré Mayús A para
agregar maquetación automática. Después voy a hacer clic en el diseño
vertical y
configurarlo como medio. Entonces para aquí, sólo voy a poner ítem entre
seis así. A lo mejor vamos a disminuir a cero. El cero será perfecto. Parece que K es demasiado pequeño, así que veamos otro
texto de aquí al 100%, vamos a copiar este y
vamos a tratar de poner eso Bien, parece
mejor que solo K. Sí, vamos a agregarlo así Entonces lo que voy a
hacer es a lo mejor vamos
a tratar de tipografía a botón,
botón es demasiado débil. Cambiémoslo a párrafo. Bien, el párrafo es mucho mejor. Sí. El párrafo está bien. El tamaño del párrafo es ahora
lo que tenemos que hacer es agregar color y agregar color de
fondo. Agreguemos color de fondo a este marco, seleccionemos el marco y cambiemos el nombre de esto como
100% K, etiqueta o algo así. Vamos a eso así. Después voy a hacer clic más se puede llenar, y para aquí, voy a añadir Y. Entonces voy a reducir
las esquinas a 20, y ahora voy a ir x
y hacer clic en este más. Ahora voy a añadir
sombra paralela y dar clic aquí. A partir de aquí,
pondré X cero, y cero, y hagamos la
transparencia como 15, desenfoque será 15. Bien. Ahora tengo que agregar padin
horizontal Agreguemos padin
horizontal como seis, mucho mejor y relleno
vertical como 62. Bien. A partir de aquí, pongamos lo está configurando como dos
Bien, 12 es mejor. Bien, solo
creamos una parte. Ahora lo que tengo que hacer es que tengo seleccionar el elemento
que he creado, después hago clic en
este IgnootoAyout, y ahora puedo ponerlo así Pongámoslo aquí. Pongámoslo aquí. Tenemos que agregarlo fuera de
esto sobre el resumen. Para ello, lo selecciono y agreguémoslo
primero agreguémoslo aquí. Bien. Ahora lo que tengo que hacer
es bajarlo así. Bien. Ahora tenemos esa sección. Pongámoslo
así así así, pongámoslo así. Entonces tenemos esta parte
experta de confianza y para esta, tendremos que agregar un
logo. Vamos a agregar el logo. Para agregar el logo, hago clic aquí y voy a
enchufar el widget de San. Entonces haz click en los iconos de
Fontosm aquí, búsqueda no es buena Contamos con enfermera. Vamos a agregar
esta enfermera. Simplemente haga clic aquí. Pongámoslo fuera
de este marco, simplemente haga clic en esto y agréguela a aproximadamente un
resumen como este. Después seleccionaré esos dos
elementos y presionaré Mayús A. Ahora solo agrego el
diseño automático a ocho. Entonces voy a dar click en este diseño vertical
y lo configuraré como una línea, media, bien entonces aquí no
necesitamos esos dos teléfonos
ALT y marco de enfermera. Obtuvimos esos dos fotogramas
cuando agregamos icono, así que solo los elimino. Ahora tengo que
aumentar este tamaño. Vamos a aumentarlo así. Vamos a agregarlo
así será mejor. Entonces para esto entre talla, agreguémoslo como seis. Ahora veamos éste. Este, sumamos 12 y seis
como el tamaño intermedio. Vamos a hacer clic en este
marco y aquí, vamos a cambiar el nombre de esta confianza dos Primero elemento tago así, entonces vendré aquí
y cambiaré el color del campo Seguramente el color de campo
es este color blanco. Entonces voy a ir
aquí y en effet, puedo agregar efecto así En realidad, ya hemos agregado efecto a esta pestaña de cuidado al 100%, así que simplemente podemos hacer
clic en ella y en efecto, presionaré este estilo de aplicación
y presionaré este ícono más. Después lo agregaré
Perfecto, 01 y presionaré. Bien. Ahora aquí, puedo dar click en esta
etiqueta de experto oxidado y desde aquí, voy a dar click en esto y dar
click en EffXs así Entonces lo que tengo que hacer es agregar padns
verticales y horizontales así Entonces cambiemos este
tamaño a 20. Bien. En realidad, agreguemos
este patrón horizontal a dos y el
patrón vertical será 220. Bien, es mucho mejor. Y luego cambiaré el color de
esta enfermera para
cambiarlo a azul. Bien. Se ve bien. Ahora tengo clic aquí y clic
en este diseño de Igno Auto. Después de eso, sólo voy a
tener que ponerlo así. Hagámoslo aquí. Bien. En realidad,
pongamos este de aquí así y
éste en medio así entre la línea de
tamaño y aquí, agrégalo como 60, 50, 50. Bien, bien. Ahora
veamos el diseño, así se verá así. Y siempre tratamos de
crear una versión minimalista, así que no intentes añadir
demasiadas cosas. Entonces ahora es el momento de
crear el texto. Entonces primero, presionaré T
y agregaré este tipo de texto. Entonces agreguemos el texto
que lo copiamos de aquí. Está en nuestro contenido. Yo sólo lo copio y vengo aquí. El pegarlo, entonces voy a cambiar la tipografía a
encabezado así Así que vamos a salir de
este tamaño para arreglarlo. Doy clic aquí y configuro esto para
llenar contenedor así. Bien. Ahora lo que tengo que hacer es aumentar esto
entre tamaños así. Vamos a aumentar a como 90. Aumentemos como 90, no 690. Bien. Y ahora lo que
tenemos que hacer es agregar acerca de resumen para hacer eso presiono T y crear
texto así, entonces tengo que resaltar esas dos secciones
y presionar Mayús A. Y ahora tenemos un nuevo
diseño automático agregado marco aquí, luego cambio este
diseño horizontal a disposición vertical, y dentro de este, voy a traer este encabezado hacia arriba y este
va a estar abajo. Entonces cambiemos este marco
a 22 sobre resumen Bien. Entonces aquí estableceré
el entre tamaño a 20 y este texto
será párrafo. Ahora, hagamos clic aquí, hagamos clic en nuestro archivo de texto de contenido
web y solo copio este
párrafo así, luego pongamos ese
párrafo y voy a cambiar este abrazo contenido para llenar no llenar contenido
contenedor llenar contenedor, entonces se agregará así. Veamos en diseño real, se verá así,
y todo el tiempo, y todo el tiempo, me olvido de cambiar
el color del relleno. Entonces cambiemos el relleno. Da click aquí y haz clic en
este negro porque este no es de
color negro oscuro. Esto es un poco ligero. Cambiemos el color de relleno a este color oscuro que se
selecciona en nuestra paleta de colores. Bien. Y ahora a partir de aquí,
tenemos que poner esto en el medio para hacer
eso podemos sellar en el un resumen y cambiarlo posición para alinear
centro izquierdo así. Ahora tenemos que añadir dos botones. Además, parece que esta
imagen es demasiado grande, así que vamos a disminuir su
altura Iface comando en Windows debería ser control Entonces simplemente lo cambiaré como vamos a cambiarlo
como 500 así, y luego hago doble clic en la imagen y
pongamos la imagen así. Bien. Entonces hago clic aquí
y pongo esto aquí. Bien, ahora es mucho mejor porque no tenemos mucho
contenido para agregar aquí, así que ahora se verá así. Y ahora vengamos aquí y
agreguemos nuestros dos botones. Para agregar dos botones, podemos usar los botones que
creamos como componente. Entonces hagamos esto, para hacer eso. Aquí, voy a ir a ASsets
y afirma dar clic aquí. Entonces tenemos este
BTN, haga clic en él, y la propiedad será predeterminada porque el botón de encabezado es
más grande que el botón predeterminado Agreguemos el botón de devolve y hagamos
clic en Insertar Instantáneo. Entonces vamos a archivar, y ahora tenemos que agregar
este botón dentro de
este sobre el resumen t.
No, sobre el texto resumido. Entonces agreguémoslo así. Bien. Ahora cambiemos
la etiqueta del botón. Haga clic aquí y la
etiqueta del botón aprenderá más. Vamos a agregarlo así. Bien, ahora se
verá así, entonces tendremos un
botón aquí, también. Vamos a crear ese botón. En este caso, es éste. Entonces para ello,
lo crearé como una variante de
este botón principal. Para ello, voy a ir a
nuestro componente principal aquí. Recuerdas las últimas lecciones, nosotros creamos este botón. Así que vamos a crear una variante. Para crear una nueva variante, haré clic en el componente BTN y clic en este icono más
para agregar una variante Bien. Ahora aquí necesitamos
crear este tipo de botón. Crearlo es fácil,
así que hagámoslo. Entonces aquí, primero, voy a
quitar el color de relleno, y después hago clic en esta etiqueta y la cambio
de color de relleno a azul. Después seleccionaré la
variante y cambiemos nombre de
esta variante a BTN
secundaria, así Creo que las palabras son correctas. A ver. Ahora bien, las
palabras están equivocadas. Nuevamente, cambiemos la palabra
así, secundaria tn,
presente ahora hago clic en la
variante y aquí voy cambiar esta izquierda
y derecha para que me guste 20 y mantengamos la parte superior
e inferior como 20. Entonces lo que tengo que
hacer es agregar el icono. Agrega el icono, doy click aquí y voy a Fonosm y desde aquí, voy a escribir como flecha Bien, esas flechas no
son buenas vendidas. Entonces agreguemos este tipo de flecha, haga clic en ella y
averiguaremos dónde adaptarnos Bien. Se adapta aquí, solo presiono
Comando X para cargarlo, y después hago clic aquí y pego Comando V para
pegarlo así. Bien, ahora dentro de esta
variante y entre talla será seis vamos a cambiar
este color un color azul. Bien, vamos a disminuir
el tamaño un poco así. Bien. Es demasiado pequeña. Vamos a presionar.
Mantengámoslo así. Y ahora si queremos, podemos cambiar esta
etiqueta con un poco más porque el ancho de este
icono es mayor, así que voy a dejar de cambiar este
estilo o separar el estilo, luego cambiar esto a Audaz va a estar bien. Todo bien. Ahora
tenemos un laboratorio así. Entonces vengo aquí y ahora lo que tengo que hacer es ir
a *** en Asats Doy click en BTN y desde aquí, selecciono
BTN secundario y hago clic en insertar Entonces lo pondré dentro de este marco
que tiene diseño automático, el nombre del marco es
sobre texto de resumen. Aquí está nuestra apuesta en o botón. Simplemente lo arrastraré y
soltaré como aquí. Yo no vine. Intentemos hacerlo de nuevo. Yo agregué y ahora voy a cambiar la
posición del botón así. Ahora voy a ver esos dos
botones y presionaré Mayús A para crear nuevo marco y aquí lo configuraré como disposición
horizontal. Bien, el
tamaño intermedio será 220, y ahora voy a cambiar
este cuadro como conjunto BTN Acabo de cambiar el nombre de este
marco a TNS, y ahora tengo que
cambiar este texto El texto se irá
a nuestro documento. Se cumple el texto. Los proveedores lo copian, ven aquí
y lo pegan así. Bien. Ahora, vamos a
verlo en diseño. Se verá así.
Esto es demasiado grande, así que vamos a cambiarlo de tamaño. Yo solo voy a variante y
vamos a reducir el peso, seleccionarlo y cambiarlo semivl Mediano. A ver, a ver, medio será funciona bien. Entonces voy a aumentar un
poco más de este icono. Es demasiado grande. Vamos a quedármela. Bien. A lo mejor hagamos estos
dos no medio a semiv Mucho mejor. Todo bien. Ahora acabamos de crear
el resumen A.
55. Sección de servicios de diseño, parte 1: Hola a todos. Ahora
tenemos que crear la sección de servicios.
Hagámoslo. Primero, voy a ir
aquí e int gB, digamos ahora es el momento de
crear secciones de servicios. Dame los
servicios más importantes que brinden en clínica
familiar y asegúrate de que sea más de ocho servicios
en esos vicios. Necesito que sigas este nombre
pmtvis pequeña descripción, descripción del
préstamo, y también me des titulares título para
ServiceOnPress Bien, está generando Mmm. Ahora tengo que decir que la pequeña
descripción es demasiado corta. Vamos a añadir desde la pequeña
descripción es demasiado corta. Dame una pequeña descripción que tenga hasta 150 caracteres. Vamos a probar esto. Es mejor. Aquí tenemos los detalles, esta será la descripción del
préstamo, y voy a obtener todos
esos detalles
al archivo porque podemos usar
esta pequeña descripción. En la página de inicio y en una página, podemos utilizar este formato. Entonces de esa manera, esto será perfecto. Entonces vayamos a nuestro documento y recogeré
toda la información. Y aquí tenemos que establecer como contenido de la página de
inicio, así. Después agregaré nueva sección. Esta será la sección de servicio. Bien, para servir una sección, agreguemos estos
detalles así, voy a copiar todos estos
detalles así. Después pondré y luego
crearé otra sección llamada un contenido de página y agregaré el contenido
que generó antes, este es el contenido, y solo
los copiaré para su uso posterior. Bien. Ahora aquí
tenemos un titular. Nos generó un titular. Veamos que es bueno
digamos bien, me
puedes dar tres versiones,
tres opciones de elección
para título titular? Vamos a éste.
Consigamos este como nuestro titular y lo
pondré aquí. Bien. En realidad, voy a
poner esto en Google Doc. Ahora comencemos a diseñar. Primero, voy
a ir al archivo Figma y aquí como hicimos antes
tenemos que crear un marco,
y voy a renombrar
este marco como nuestro s. entonces voy a cambiar
con contenedor de relleno, y aquí, digamos que esto es 600 Bien. Ahora lo que podemos hacer es
crear este tipo de diseño. Para ello, primero haré clic en texto y este
texto será titular. Lo haré como titular
y luego duplicaré el texto duplicado por unos pocos vamos a
duplicarlo solo por dos veces. En realidad, me olvido de agregar diseño
automático a este marco de
servicios, así que hagámoslo. Presiono Mayús A y después tenemos que cambiar
la altura a 600. Estamos en la
sección de servicios y desde aquí, configuraré este CO porque no necesitamos relleno
horizontal o vertical, agreguémoslos como C
y luego seleccionaré esos dos elementos
y presionaré Mayús A
para crear un nuevo diseño automático, y lo haré layout
vertical, y aquí voy a cambiar esto
a sng Vs así. Bien. Entonces solo voy a cambiar esto toma tipografía para cambiarlo Voy a hacer clic aquí y
vamos a convertirlo en un sub ding, y luego hago clic aquí y
hagamos que sea un párrafo. Bien. Entonces lo que voy a hacer es cambiar el color del campo. Da clic aquí y cambia
este color de campo como negro y cambia este color de
campo Bien. Ahora, pongamos
el artículo entre tallas, 20, bien, bien. Parece que es demasiado grande. Parece que el artículo
entre tallas es demasiado grande, pero vamos a contenido real. Aquí está nuestro título aquí, entonces tendremos la
descripción así. Bien, entonces pondré este texto con dos
contenedores como este. Por ahora, mantengámoslo
así y me olvido de una cosa. ¿Se puede decir qué es? Es el titular, así que me olvido de añadir titular. Vamos a agregar titular.
Primero, aísle nuestro servicio de diseño automático y hagamos que se diseñe
como disposición vertical Entonces presionemos T y
agreguemos algo de texto como este. Entonces iré a nuestro
documento o sombrero GPT. En nuestro documento, podemos obtener los titulares este copiarlo
y enfrentémoslo aquí. Bien. Entonces
cambiemos la gravedad tipográfica a encabezado y el color de relleno
será este color negro Bien. Ahora, seleccionaré este diseño automático de servicios y configuraré alinear el centro superior
como la alineación. Entonces aquí voy a hacer
este espacio como 20, derecho. Y aquí, intentemos agregarlo en dos así que ahora quiero
agregar esto en el medio, así voy a establecer esta alineación tipográfica
como centro así Ahora tenemos esta parte primero, vamos a ajustarla como queramos. Selecciono el servicio único
atlayou y agreguemos efecto. Ya tenemos efecto, así que solo lo seleccionaré y luego agregaré ancho a este
único servicio para hacerlo, lo
aumentaré así. En realidad, voy a poner
algo así, pero no es permanente. Pero sin embargo, de nuevo selecciono
los servicios individuales, luego agreguemos a izquierda y derecha
paddin 20 y 20 así Ahora bien, si comprobamos el diseño, no vemos el efecto, así que agreguemos color de campo. Cuando agrego
color de campo como el blanco, podemos ver el efecto claramente. Entonces lo que hago es que voy a
cambiar esta radio de esquina 20. Bien, hasta ahora tan bien. Ahora lo que voy a hacer es agregar icono como en este
. Hagámoslo. Para ello, solo voy a ir aquí y busquemos íconos
sobre la atención pediátrica. Abramos Fantosom. Da click aquí, haz clic en fontosom si no conoces el nombre del ícono de
pontosom, solo
puedes buscar
en Google como autosom
pediátrico ahora podemos
ver que tiene ícono de niños, así copiaré la parte de niños
y vendré Entonces vamos a agregarlo.
En realidad, no se está mostrando, pero tenemos un hijo. Veamos qué podemos hacer. Veamos icono de la infancia. No, sólo tenemos un hijo. Vamos a por este niño. Y está bien agregar
este tipo de icono. Figma layout, pero en elemento, podemos tener mejor icono y te
voy a mostrar como
conseguir un mejor icono Aquí está nuestro icono. Simplemente selecciono solo el vector y haré doble toque
en este único servicio y colocaré el icono así y eliminemos los fotogramas
innecesarios. Y aquí, hagamos esto
un poco más grande así. Antes de hacer eso, voy a pizarra esas dos secciones
y presionaré Mayús A. Luego se acaba de agregar a
un nuevo diseño automático. Cambiemos el nombre de ese diseño automático como sexo y aquí
tenemos el vector y el diseño automático de servicio
único y luego el diseño automático de servicio
único de islote y clic en el
diseño horizontal como este Todo bien. Ahora voy a poner esto entre
las tallas dos
y tres, como antes. Entonces aquí, voy a hacer clic en él y cambiemos
este color a azul. ¿Te acordaste de
nuestra regla 603010? Entonces para Segan, veamos, en realidad sí aplicamos
la regla 603010 En este caso, tenemos el blanco como 50 y el color negro como
30 y este azul diez. Pero ya te dije 60, 30, diez regla es sólo una regla. Así podemos romperlo y cada
vez que creamos sección, tendremos que
romperlo y aquí tenemos 60 como negro y 30 como blanco
y diez como este color azul. De vuelta al trabajo y para aquí, vamos a hacer clic en esto
contienen propiedades y vamos a hacerlo como seis. Después presionaré Mayús A para agregar diseño automático a este icono, luego cambiaré
su icono de nombre. Después agregaré izquierda
y derecha como 20, 20. En realidad, tenemos problema
en el tamaño del icono. Así que volvamos y
aquí voy a añadir 60 as, 60 como ancho fijo, y probemos aquí. Voy a añadir 20 por 20 así. La razón es que hemos fijado
en la capa de servicio única. Entonces para arreglarlo, crearé un nuevo diseño automático o agregaré el diseño automático a
este único servicio, luego cambiaré los elementos del
servicio. Entonces voy a cambiar esto
con para llenar contenedor. Ahora podemos obtener tamaño exacto,
hoy, uno, dos,
tres, cuatro, cinco, conjunto será altura ya que esto y aquí voy a añadir esta
altura como contenedor de llenado, y vamos a hacer este
icono centro así, y nos acaba de poner con un 120
creo que va a ser mejor. Bien. Y aquí voy a
reducir esquinas como, hacerlo como 20, y después
voy a añadir trazo así. Entonces cambiemos el color del
trazo a azul, y aumentemos
sus ils a realmente, podemos hacer este tipo de diseño. Entonces hagámoslo.
Primero, tengo que encontrar la talla
entre talla es 20. Agreguemos ese mismo estilo de
diseño a aquí. Para ello, voy a añadir color de
relleno y color azul. Después haga clic en el icono y
el color del icono será blanco, y luego tendremos que agregar
Etroke para que el
color del trazo sea azul claro Consigamos el color azul claro
de aquí así. Bien. Bien. Ahora veamos vamos a
averiguar el tamaño del trazo. Aquí son siete y tiene
el tamaño de siete. Bien. Ahora se
verá así, pero podemos agregar más
Altura menos 22. Se agrega como
diez, diez es mejor, así que ahora solo creamos una
sola sección de servicios y se verá
así en el diseño. Y aquí tenemos un problema. Tenemos que arreglar ese problema. En la siguiente lección, los
arreglaremos.
56. Sección de servicios de diseño, parte 2: Hola a todos. Entonces tengo mejor idea para este
ícono. Vamos a hacerlo. Primero, seleccionaré
el icono y aquí, hagamos este patrón
horizontal como 15 y
patrón vertical como 15. Entonces voy a quitar
este color de relleno. Después copiaré este color de Etroke y
lo agregaré en el color de relleno Entonces voy a quitar
el trazo a. Bien, ahora seleccionaré
el icono vectorial, y cambiemos el icono
vectorial a azul. Mantengamos el icono vectorial azul. Cambiemos el
icono vectorial a color azul. Cámbialo así. Bien.
Veamos este diseño. Se verá así y
este efecto no es
visible en el lado izquierdo, así que vamos a arreglarlo. Para arreglarlo, voy
a nuestro marco de inicio y aquí seleccionaré
la sección de servicio. Después hago clic en
este IgnooToayout. Después de eso, voy a
aumentar 20 fixel aquí. Actualmente, el ancho es de 1,160, así que lo haré 1180 o 70 80 En realidad, tenemos
que hacerlo 1,200 porque tenemos que sumar ese
extra 20 de ambos lados. Ahora solo hago clic en nuestro marco de
servicio y presiono todo y ahora puedo ver el tamaño
que tiene hasta el borde
del marco de la casa. Vamos a reducirlo hasta 1020
así y en este lado, será 1020. Entonces dentro de esta hora de servicio, podemos agregar relleno izquierdo
y derecho
o relleno horizontal como 20. Y ahora si comprobamos el diseño, se alineará perfectamente y no
se verá afectado a
la sombra ni a la FA. Bien, ahora por aquí, voy a hacer esto como 60
porque está demasiado cerca,
así que ahora es mejor y ahora
tenemos otra pregunta. Es decir, si agregamos
una nueva sección, agreguemos una nueva sección como esta, se agregará dentro de esta sección. Para arreglarlo, simplemente
crearé un marco vacío y luego estableceré el ancho como contenedor
lleno y
la altura será de 600. Entonces cambiaré el nombre de este marco a nuestros servicios BG así. Entonces si creamos una nueva sección, estará por debajo de este marco. Entonces ahora este es nuestro primer
servicio o servicio único, y este es un objeto repetido, lo que significa que podemos convertirlo un componente y reutilizarlo. Si verificamos aquí, tenemos
elementos repetidos como este, lo que significa que podemos crear el componente de este
y usarlo en la página. Hagamos eso. Para hacerlo, voy a dar click en este único servicio y dar click
en este componente de creación. Y ahora solo lo cortaré de aquí e iré a
nuestra hoja de pegatinas, luego la pondré dentro de la hoja de
pegatinas así. Entonces obtendré este texto y cambiemos el nombre de este
texto como elemento. Bien. Y ahora para esta sección, simplemente
hago clic en
los artículos de servicio. Entonces ahora tenemos que agregar este elemento a esa
sección para hacer eso, voy a ir a Assens
y dar click aquí, y aquí tenemos servicio único Simplemente hago clic en él y
clin en insertar instantánea así y ahora
vamos a archivar y aquí, vamos a ponerlo dentro de
estos artículos de servicio Podemos hacerlo así. Bien. Ahora puedo seleccionar esta sección de ítem de
servicios, luego ir a aseveraciones
y luego dar clic aquí, clic en esto y dar clic en Insertar Instancia y la
insertará así Entonces lo haré dos veces
más así. Bien. Ahora voy a Pis en Pis, aquí están las secciones Veo que todos ellos
y solo arrastrarlo esto. Bien. Y en los elementos de servicio, voy a cambiarlo layout
a layout horizontal. En realidad, voy a eliminar dos
de esos elementos por ahora, y luego selecciono
los elementos de servicio
autoayout y hago clic en
este diseño horizontal, y se verá Esto, parece que está demasiado cerca, pongamos esto
entre talla a 20 y ahora encaja
perfectamente. Bien. Ahora lo que puedo hacer es duplicar este
artículo de servicio así. Bien, Nuevamente, voy a ver esos dos diseños de elementos de servicio y presionaré Mayús A para
crear un grupo diferente y aquí voy a
renombrarlo como conjunto de elementos de servicio y aquí voy a cambiar el tamaño intermedio
a 20 así. Ahora se verá así. Ahora tenemos que cambiar el
contenido. Vamos a cambiarlos. Abro nuestro documento y rápidamente
los
cambiaré así. Voy a poner esto así
y cambiemos el ayuno. Bien. Ahora acabamos de crear
cuatro de nuestras categorías, y mi plan es cuando pasemos el
cursor sobre esta categoría, se resaltará
la imagen del logotipo En realidad, podemos cambiar
esta imagen de logotipo a mejor. Al igual que si quitamos el
color de relleno y agregamos el trazo, cambiemos el color del trazo a
aquí y a azul y vamos a
aumentarlo poco por nueve. A ver que se ve no
se ve bien. Pero, ¿y si nos fijamos como dos? Ahora se ve mucho mejor, y agregaremos el
ícono de línea a este ícono. De esa manera, esto será
mucho mejor que
este diseño por ahora, mantengámoslo así. Y si, solo selecciono el diseño del componente y
tú puedes hacer lo mismo. Bien. Si queremos, podemos agregar color de campo
con azul claro, como realmente azul claro como
este y no tan visible, pero mantengámoslo así. Entonces tenemos que cambiarlos.
57. Sección de servicios de diseño, parte 3: Hola a todos.
Tenemos un problema aquí. Entonces, si trato de cambiar este
icono, intentemos hacerlo. Voy a acciones y plugins
y widget, luego font tsm. Entonces cambiemos este ícono de la salud de la
mujer, así buscaré como femenina. Bien, da clic en él. Ahora tenemos el icono. Aquí está el icono.
Lo cortaré y retiraré este marco, luego haga clic aquí e
intentaré pegarlo. Cuando trato de pegarlo, A, siempre está pasado fuera
de este componente. Entonces, si quiero agregar esto dentro del componente,
puedo hacerlo. Tener una solución rápida, pero después de hacer esta solución, esta instancia
ya no será instancia de
nuestro componente principal, lo que significa que si cambiamos
el diseño de este, no afectará a
nuestra categoría aquí. Entonces vamos a tratar de hacer eso. Doy click en la
instancia y aquí,
hago clic en esta más acciones, y aquí voy a dar click
en desvincular instancia Cuando hago clic en Detach instant, ya no
funcionará como componente Yo solo un marco que
añadimos a la disposición. Así que ahora puedo agregar
icono dentro de aquí. Entonces para hacer eso, solo puedo
cortar el ícono de aquí, luego dar clic aquí, pegarlo así, y aquí lo. Entonces intentemos agregar este ícono dentro de eso
así. Bien. Ahora, vamos a comprobar el
tamaño de este icono. Es 60. Entonces ahora voy a
cambiar este icono con esto. Vamos a hacer clic en esta propuesta de
restricción. Y ahora cambiemos
el lado a 60. 60 es demasiado grande. Pongámoslo así. Entonces voy a quitar
este icono así. Bien. Después daré click sobre este icono y cambiaré el color del
campo a azul. Ahora este tamaño de icono es 120. Veamos el tamaño real del icono. Su anchura 120 y altura es 110, veamos altura, la altura
debe ser 110, así. Bien. Entonces puedo
aumentar esto como quiera. Bien. Ahora hagamos lo
mismo por éste. Intentemos encontrar el ícono como fregan no tenemos
ese tipo de ícono, así que vamos a tomar aquí Agreguemos
este ícono de hospital a esto Y cuando diseñemos el sitio web
usando Word como elemento, agregaremos un mejor icono. Entonces aquí, hagamos clic en la instancia de este componente, haga clic aquí y haga clic
en instancia separada, luego haga clic aquí y carguéela, luego seleccione esta sección
y peguela dentro de aquí. Eliminaré este icono, y luego estableceré
este fondo a la altura del fondo
como 1,110 así, entonces aumentaré
este tamaño como 60 Bien. A continuación, cambiaré el color del
campo a azul. Bien, ahora tenemos
esta revista familiar. Averiguemos el icono familiar
en la búsqueda de fontosm, lo siento. Busquemos como
familia, familia, veamos familia. No tenemos un icono de fontosum
familiar. Busquemos un
ícono diferente o busquemos algo relacionado con él está en
este ícono de protección. Doy clic en el icono, lo
corté y borro este marco. Y aquí, primero, voy a seleccionar el elemento de servicio y dar
clic en desvincular instancia
y dar clic aquí, ritmo a este icono, eliminar este, después tenemos que establecer
la altura como 1,100 Lo siento, 110. Entonces aumentemos
este tamaño de icono a seis. Bien. Entonces cambiemos el color del
campo Bien. Ahora tenemos cuatro categorías, cuatro servicios, pero
tenemos ocho servicios, así que agreguemos este tipo
de botón deslizante, lo que significa que este cambiará
automáticamente a las siguientes categorías
en 5 segundos. Hagámoslo o cuando
alguien haga clic en este punto, pasará al
siguiente conjunto de categorías. Así que hagamos clic aquí y hagamos
clic en Ellips y no aquí, entonces entraré
dentro de nuestro servicio, y luego agregaré
Ellipse dentro Entonces ahora debería ser
agreguémoslo como aquí. Debería estar dentro de
esta sección de servicios, pero fuera de este conjunto de artículos de
servicios, lo
pondré aquí. Y ahora vamos a disminuir
el tamaño a como 20, y cambiemos de
color como el azul. Parece que no tenemos Espace, así que aumentemos el Espace a como 700 de esta sección de
servicio. Vamos a agregarlo como 700
y aquí tenemos 60, pero podemos agregarlo menos de 60, así seleccionaré este conjunto de elementos de
servicio y Ellips luego presionaré Mayús
A para agregar un diseño automático, y luego aquí puedo
hacerlo como que 2020 no es bueno Hagámoslo como 30. Bien. Ahora lo que
voy a hacer es crear tres Elipse más
y
seleccionarlas todas y presionar Mayús A y
hacerla horizontal y
el espacio será 20 Entonces despegue este color y lo cambiaré de
color a color claro A este color. Bien, y haz clic en éste, desábrelo a este color
claro como este Bien. Ahora veamos el diseño
para que se vea así. Y así agregamos esto
nuestros servicios BG, su altura es 600, pero vamos a hacerla 700 así. Bien. Ahora creamos esto sobre un resumen
y nuestros servicios, entonces tenemos que crear
nuestra sección de proveedores. Vamos a crearlo en la siguiente lección.
58. Genera contenido para nuestra sección de proveedores: Hola a todos. Ahora tenemos que crear nuestra sección de proveedores. En nuestro proveedor, tendremos la imagen del
proveedor y nombre, rollo y pequeña descripción. Vamos a crearlo. Primero,
tenemos que generar el contenido. Voy a JGBT y
aquí voy a decir, ahora es el momento de generar
nuestra sección de proveedores Dame cinco proveedores. Agreguemos como doctores con rol de
nombre y descripción suave. Vamos a crear un préstamo
también descripción del préstamo. Entonces aquí, vamos
a traer esto así porque necesitamos la
descripción del préstamo para los proveedores. Así que vamos a presentar y
veamos qué obtenemos. Bien. Aquí tenemos los detalles. Simplemente voy a copiarlos todos, y vamos a ir a nuestro archivo de contenido y pro abajo vamos a
este contenido como este. Podrás abrir
este archivo de contenido
en el bloc de notas Wordpad Entonces agreguemos esos detalles. Además, verá imágenes de cada médico en nuestro archivo de imagen.
59. Diseña nuestra sección de proveedores: Hola a todos. Diseñemos
esta sección de nuestros proveedores. Bien, ahora voy a
llegar al diseño, y aquí tenemos el contenido, sin embargo, no tenemos título. Entonces vamos a generar el Título dos. ¿Me pueden dar título para
nuestra sección de proveedores? Dame tres opciones. Las elecciones están equivocadas, creo. En fin, me gusta este, así que voy a copiar
eso y en realidad, vamos a seleccionar este segundo. Voy a copiar eso y
enfrentémoslo aquí. Entonces voy a decir título así. Ahora vamos a ir a la Figmfle
y aquí voy a crear un marco y voy a establecer
tamaños de marco con contenedor de llenado Hola, 600. Tenemos que
aumentar el marco de inicio, hacer clic en el marco de inicio y
presionar comando en Windows, presionar control, y aquí
aumentar el tamaño. Entonces para esta sección, presionaré el Turno A, y aquí cambiaré de nombre
a nuestro presentador de proveedores Bien. Ahora aquí,
agreguemos el diseño como disposición
vertical y
comencemos desde el centro superior. Bien. Ahora aquí no
necesitamos estos entre tallas y aquí voy a añadir
el entre talla como 60. Como recuerdo aquí
agregamos el 60. Ahora vamos a crear el texto. Presiono en T y vamos crear este tipo de
texto y vamos a ir aquí y copiar estos tanques y venir aquí en
este texto así, después voy a cambiar la
tipografía a encabezado y dar clic en el texto y vamos a establecer con
un contenedor de relleno Bien, entonces la alineación
será el centro. Bien. Ahora se ve bien. Ahora se cambió la
altura de la sección del proveedor, así que
volvamos a cambiar la altura a 600 así. Bien. Ahora lo que tenemos que hacer
es crear esta sección. Para crear esa sección, simplemente
voy a crear un
rectángulo como este. Entonces pongamos este
rectángulo a este lado. Entonces uno, dos, tres, cuatro, luego aumentarlo
para así y luego digamos altura como
también ese tamaño así. Bien, entonces tenemos que agregar nombre, rollo y pequeña descripción. Entonces vamos a agregarlos. Entonces primero, hago clic en T y pongo
esto como nombre, luego otra vez, presiono texto y configuro
esto como rollo, y nuevamente, presiono T y agrego una pequeña
descripción como esta. Bien. Ahora aquí, da
clic en el nombre y vamos a cambiarlo tipo
a subd y también aquí, pequeña descripción
será párrafo y el rol será vamos a
agregar texto de botón para rodar Bien. Ahora seleccionaré los tres de esos artículos y lo
pondré debajo del rectángulo. Después seleccionaré toda esa información
y presionaré Mayús A y un marco y cambiaré
este nombre a proveedor. Entonces lo haré es esto
entre talla a 20 así. Ahora esta sección es pequeña, vamos a aumentar la sección
así y ahora en proveedor, voy a poner roll como
el nombre superior como la
descripción media y pequeña como y también parece que el tamaño
intermedio es demasiado largo, así que hagámoslo
como, es mejor. Ahora lo que tenemos que hacer
es agregar imagen a aquí. Agreguemos la imagen, haga clic aquí y haga clic en Video de
imagen y aquí, veremos la imagen del proveedor y agreguemos esta imagen y
haga clic aquí así. Ahora selecciono el marco del proveedor y aquí agregaré color de
relleno al blanco, y luego voy efectuar y agregaré
este efecto así. Entonces lo que voy a hacer es cambiar esquinas de esta imagen. El anterior será
dos y será dos, luego el fondo
será dos y dos. Veamos es en realidad no yo arriba no fui
por las esquinas derechas, así que tenemos que hacer click en la imagen y vamos a reducir las
esquinas de esta imagen. Solo necesitamos reducir las esquinas
superiores así. Bien. Ahora a partir de aquí, voy a tener que agregar algo de
espaciado para agregar disipación, simplemente
voy a dar clic aquí
y vamos a agregar seis Bien, pero no necesitamos aplicarlo
a
toda esta sección. Sólo tenemos que aplicarlo
para esos tres rubros. Destacemos
esos tres elementos. En realidad, tendremos que
añadir el botón. Vamos a agregar el botón
para agregar el botón, iré a Assens y
aquí tenemos el BTN, verás ese
botón secundario y pincharé Entonces lo cortaré
y vendré a archivar, y aquí adentro, simplemente lo
pegaré así. Bien. Y este botón, tendremos que hacer algunos
cambios para realizar esos cambios, podemos crear otra instancia
o agregar cambios a aquí. Las formas fáciles crean
una variante diferente. Vamos a crear una variante. Aumentaré el tamaño de la hoja de
pegatinas así y haré clic en variante. En realidad, podemos dar click aquí
y luego hacer clic en variante de entonces vamos a eliminar estos
rellenos así, así Bien. Ahora, cambiemos el nombre esta variante como
enlace de tarjeta así. Bien. Ahora, vayamos aquí
y hagamos clic en el botón, y vamos a cambiarlo a enlace
de tarjeta. Todo bien. Ahora voy a seleccionar todos esos cuatro elementos
y presionar Mayús A, y vamos a renombrar
proporcionar descripción. Proporcionar una biografía, entonces
voy a establecer con un contenedor de llenado y aquí
voy a agregar
margen horizontal como seis así. Bien. Ahora lo que tengo que hacer es que tenemos que añadir
espacio al fondo. Para ello, voy a dar
click aquí y en aquí, agregaré espacios 20 Bien. Ahora bien, si lo comprobamos, se verá
así en el diseño. Ahora si queremos, podemos
convertir esto en un componente. Así que vamos a hacer clic en el elemento y hacer clic en componente para
crear un componente. Bien. Entonces
cortaré este componente y vendré a Style heat y lo
agregaré sobre el elemento así. Tengo que venir a darle estilo al calor
y pegarlo así. Bien. Ahora, volvamos aquí, y después hago clic
en ASRs en ASRS, tenemos el componente Simplemente hago clic en él y hago
clic en Isa Instancia. Bien. Ahora lo que
podemos hacer es a los archivos y pongámoslo dentro de
nuestra sección de proveedores, así que vamos y así. Bien. Ahora lo que podemos
hacer es duplicar esto. Para duplicarlo,
seleccionaré el proveedor y presionaré Control C y
control V así y resaltemos esas dos
secciones y presionaré Mayús A y luego hagamos que sea como disposición
horizontal así. Y nuevamente, voy a duplicar
éste así. Bien. Ahora voy a cambiar
este nombre de marco a prods y aquí cambiaré
el tamaño intermedio a 20 Bien. Ahora agreguemos los
detalles a este rol, voy a cambiar este
rol a color azul. Ven aquí y da clic aquí, luego cambia el color del campo
a color azul así. Bien, voy a efectuar
en los artículos, y aquí, agreguemos los detalles, y luego podremos cambiar el
resto de la información. Así que sólo vengo aquí. Aquí están los primeros detalles, cópielo. Cambiar su nombre. Entonces otra vez, ven aquí y copia la breve descripción
así y fase la breve descripción
así y aquí
estableceré el ancho como
contenedor de llenado y estableceré la gravedad tipográfica para alinear laboratorio luego cambiaré el nombre de esta
etiqueta para aprender más Entonces más o menos renombrarlo como ver perfil y
tenemos que agregar el rollo. Vamos a agregar el.
Agreguemos el rollo así. Y voy a cambiar
este teléfono de rol a, vamos a cambiarlo a párrafo. Para cambiarlo, voy a ir aquí y el texto de rol
será párrafo. De esa manera,
no se verá como el enlace. Entonces ahora si vamos al diseño, se verá así, y continuemos
y agreguemos el detalle. A partir de aquí, voy a copiar el
nombre y el ritmo del nombre aquí, luego ven aquí, copia el rollo. Después agrega el rollo
así, luego nosotros En la breve descripción. Y de hecho en
esto realmente aquí, lo cambio de aquí. No lo cambiemos así. Vamos a cambiarlo a partir de aquí. De esa manera,
podremos hacerlo efectivo para los artículos de la página. Entonces hagámoslo por éste. Y éste. Este es el beneficio de tener un diseño
automático como este. Sin diseño automático. Este es el
beneficio de tener componentes. Cuando los cambio,
afecta al ítem. Entonces lo haré aquí, vamos a cambiarlo a perfil. En realidad, podemos
cambiarlo a partir de aquí. Entonces lo cambiamos
, cambia. Y aquí, tenemos que
cambiar la imagen, da clic aquí doctor
Michel vamos a encontrar esta foto y aquí
está da click así, entonces voy a continuar. Bien, agreguemos otros detalles del
doctor. Aquí están los detalles, y pongámoslo así. Entonces agreguemos el rollo. Agreguemos una breve
descripción como esta. Bien. Ahora, cambiemos
la foto así. En realidad, es mejor cambiar esta imagen de doctor con este
doctor según el nombre, pero mantengámosla así. Entonces veremos pocos problemas, así que vamos a arreglarlos. El primer número es
que esas secciones no van igual y tenemos cinco
médicos aquí, aquí, tenemos cinco médicos, pero sólo tenemos espacio
para tres médicos, así que tendremos que
agregar deslizador a aquí. Tenemos diferente altura
como esas cajas para arreglarlo, vamos a comprobar el tamaño
que queremos agregar, debe ser 615. Vamos a nuestro componente
y hagamos que la altura
sea 615 y podamos
arreglarlo fácilmente así. Ahora si vamos a diseñar, se verá así, pero ahora necesitamos agregar
esta sombra a visible
en la izquierda y la derecha. Recuerda, la última vez que lo
arreglamos, así que para arreglarlo, seleccionaré esta sección,
nuestra sección de proveedores, y luego voy a dar click en este ignotoayo y luego tendré que agregar
40 a este ancho Vamos a agregar 40. Cuando agrego 40 a 1,160, serán mil 200. Entonces aquí voy a añadir
Padins 20 así. Entonces voy
a tener que ponerlo en el centro. Bien. Ahora veamos ahora
es perfectamente visible. A aquí, tenemos otro tema. Este perfil de vista no es lineal, así que para arreglarlo, descubramos la descripción
pequeña más larga. Creo que es ésta. Averiguemos
cuánto dura 96. Hagámoslo como 100. Solo venimos aquí
y damos click aquí, luego hacemos que estas alturas cien. Ahora mira qué pasa. Entonces, hagamos este
texto así. Simplemente selecciono el texto y agrego este align top
en la tipografía Ahora veamos el diseño. Ahora estará
perfectamente alineado. Hasta el momento, no
tenemos ninguna duda, y ahora tenemos que agregar tres
puntos como este para hacer eso, simplemente
voy a hacer click en aquí
y voy a cambiarle el nombre a slide dots y ahora vamos a dar
click en Crear componente. Y cortarlo, ve aquí en el elemento en realidad en
los estilos sobre elemento, solo lo
agregamos. Y ahora vengamos aquí y
vayamos a aseveraciones en aseveraciones. Vamos a hacer clic en nuestro punto deslizante, hacer clic en Insertar Instancia, y pongamos esto dentro de
nuestra recepción gor En nuestro servicio, selecciono en
nuestro servicio y luego
solo lo pego así, y debería estar dentro de
este marco así, estará perfectamente alineado Entonces no necesitamos
crearlo desde cero. Simplemente podemos ir a ASEDs y dar click en Slider
dot y dar click en Insertar Instancia y cortarlo
pulsando Comando X o
Control X y venir aquí Entonces tenemos que agregarlo dentro de
esta nuestra sección de proveedores. Ahora voy a tener que seleccionar esas dos secciones
y presionar Mayús A, y después voy a hacer que se centre. Veamos el espaciado.
Creo que debería serlo. En realidad son 30, así que
vamos y agreguemos vamos seleccionar este y
agreguemos el ítem en bits como 30. Bien. Ahora
tendremos que aumentar un poco más de esta nuestra sección de
proveedores, así que vamos a aumentarla. No este, seleccione
los proveedores. Aumentemos esa
sección así. ¿Y qué pasó con esto? Mm hmm. No necesitamos
aumentar este marco 31. Seleccionemos este marco 21. Hagámoslo como proveedores
contenedor contenedor. Bien. Entonces lo pondré en
altura como contenedor abrazo. Y ahora está perfectamente aquí. Aquí, voy a hacer lo mismo. En realidad, solo
necesito cambiar esto a nuestro contenedor de servicios. Bien. Ahora solo voy a necesitar cambiar esta nuestra
sección de proveedores así. Veamos
cuánto realmente, hagamos este tamaño al 820
o simplemente podemos seleccionar este contenedor de
nuestro proveedor
y verificar cuál es la distancia entre
esas dos secciones. Entonces entonces solo voy a
disminuir su tamaño a 20 así y aquí
podemos hacer lo mismo. Es 54, vamos a disminuirlo y
disminuir más 20. Perfecto. Y entonces tendremos que
cambiar el tamaño del servicio Cambio de BG. Servicio SLEto BG, perfecto. Ahora tenemos que agregar
nuestros proveedores BG también porque ahora si agregamos
agreguemos elipse así, aparecerá
aquí porque
ignoramos el diseño automático de
esta sección de proveedores Vamos a hacer clic en Con marco y crear un marco este marco
será contenedor de llenado, y la altura será 823 Y la altura será de
823. ¿Qué pasó? Aquí. Entonces tendremos que sedar esta sección de proveedor
y vamos a traerla a colación así coincidente con el proveedor
BG ¿dónde está nuestro proveedor? Bien, aquí está nuestro proveedor, razón por la
cual simplemente nos
gusta nuestro proveedor G, y luego
lo pondré aquí así. Bien. Ahora veamos el diseño. El diseño se verá
así. Bien. Y en la siguiente lección, vamos a diseñar
esta sección de vista previa.
60. Cambiar la disposición de la sección: Todos a continuación, tenemos que
crear esta sección de revisión. Pero si revisamos nuestro sitio web, aquí tenemos patrones similares. Aquí tenemos servicios, luego tenemos a nuestros
proveedores y ambas secciones
son iguales y ambas
secciones tienen slider. Pero si agregamos esta sección de
revisión, esta sección de revisión
también tendrá slider. Es por eso que mi plan es crear contacto c sección después de esto nuestra sección dedicada de
proveedores. Después de la sección de contacto, podemos agregar la sección de revisión y luego podemos agregar este pie de página. A esta sección de contacto, voy a elegir
este tipo de diseño porque mantendrá la
consistencia de nuestro sitio web. Después crearemos una página
separada para este formulario y adaptaremos el botón
que alimenta a ese formulario. Bien, ahora en la siguiente lección, empecemos a diseñar
esta sección de contacto.
61. Diseño de la sección de contacto: Hola a todos. Vamos a
crear la sección de contacto. Entonces vayamos a JAD GPT y digamos, necesitamos tener una sección de contacto rápido
que tenga número de teléfono, ubicación, y botón para solicitar
una cita ¿Se puede generar
esa información y hacer que la acción sea procesable ver, dame tres opciones y titular para
la sección dos. Bien, me gusta la opción dos, así que copiemos el contenido y empecemos a
diseñar la sección. Aquí, voy a añadir esos detalles. Es una sección de contacto rápido. Bien, ahora
comencemos el diseño. Para ello, voy a nuestro
cuadro y selecciono el marco. Presionemos comando y
aumentemos así el diseño. Bien. Entonces lo que
vamos a hacer es en sección así
para hacer eso primero, click en frame, dar click en aquí. Entonces voy a poner con para llenar contenedor y digamos a 600. Bien. Ahora aquí, mi plan
es agregar imagen en el lado derecho y agregar texto en el lado izquierdo.
Entonces hagámoslo. Para hacerlo, presiono en T y
creo este tipo de texto, y luego antes de hacerlo,
tengo que convertir
esta sección a
auto layout o agregar auto
layout a este marco, así que solo presiono Mayús A
y luego cambiaré nombre de marco a contacto
WIC luego en
esta configuración de fotograma,
configuraré relleno izquierda y
derecha o desvanecimiento
horizontal y cero y cero
y fadina vertical cero entonces pongámoslo a una línea superior izquierda y
la altura será 600. Ahora aquí, selecciono el texto y doy clic aquí y lo
selecciono como encabezado. Entonces copiemos el titular. Entonces aquí, aquí está el titular solo lo
copio y lo pego aquí, entonces tenemos que
agregar estos contenidos. Podemos agregar este
contenido como cuadro de iconos. Hagámoslo para hacerlo. Primero tendré que
crear cuadro de iconos. Presionemos el y presionemos
T y agreguemos texto así. Por ahora, cambiemos esta sección de contenido rápido
como disposición vertical. Y vamos a
dejar esto así. Entonces cambiaré
texto a subdline. Bien. Ahora, aquí voy a
añadir estas características, entonces voy a duplicar este texto y vamos a
hacer este texto a párrafo y además tendré que cambiar el color de relleno
a este color negro, y tenemos
que hacerlo aquí también aquí. Bien. Entonces cambiaré
este texto para llamarnos para recibir asistencia
inmediata o
información como esta, después duplicaré
esta sección y la pondré aquí y ahora
agregaré el número de teléfono. Creo que este es el
número de teléfono que agregó en la parte superior. A ver, es lo mismo. Simplemente presiono comando un
teléfono Mac y controlo una fuente Windows y
agrego el texto a una fuente Windows y
agrego el texto a
este cuadro de búsqueda y aquí encuentra un contenido similar y ahora lo
agregaré a aquí, luego simplemente haga clic en esto porque ya no
necesitamos eso. Entonces cambiaré
esta cabeza a, hagámoslo encabezado, pero cambiaremos
el tamaño de fuente más adelante. Ahora lo que voy a hacer es
agregar el icono para agregar el icono,
voy a ir aquí e ir a enchufar el widget de
San y
hacer clic en el icono de CFontSM, y desde aquí, vamos a ponernos en icono como la prensa aquí y ahora
tenemos este ícono de teléfono Yo solo lo corté y le quito este marco ALT
y vengo aquí. Entonces sólo pegarlo. Simplemente lo pego dentro de
este contenido de pick, y pres turno
A para agregar Otolao Entonces veamos el
tamaño de esos íconos. Entonces es 12110. Hagamos el mismo tamaño. Escoja aquí y pongamos con
un 120 y la altura como 110. Bien. Entonces
hagámoslo medio Bien, ahora aumenta el tamaño de
este ícono para hacer eso, selecciono el ícono, clic en las
proposiciones de restricción, luego cambiaré
esto a 60 así Bien. Ahora lo que tengo que hacer
es agregar borde a este icono. Entonces hagámoslo.
Para hacerlo, en realidad, puedo ir hasta aquí y
revisar la frontera. Aquí está el borde, así que está dentro de la talla dos. Entonces agreguemos aquí, reeleccionamos trazo azul, talla dos, y aquí la esquina es dos Bien. Ahora voy a agrupar estas
tres secciones juntas. Selecciónelos y presione Mayús A, y luego configuraré esto
con contenedor de llenado D. En realidad, tengo que seleccionar
este y configurarlo con contenedor de llenado
y se ve bien. Entonces tendré que
cambiar el color de relleno. Cambiémoslo a
azul así. Después seleccionaré esos dos elementos y
presionaré Mayús A para agregar autoa luego cambiaré el diseño
automático a disposición
horizontal Entonces iré dentro de
esto y aquí seleccionaré el vector y pondré el cticon
arriba y seleccionaré el fotograma, luego configuraré el marco
alinear a la izquierda así Ahora lo que tenemos que hacer es que podemos disminuir este tamaño de fuente
porque parece demasiado grande, vamos a reducirlo para
reducirlo en tipografía, voy a separar estilo,
entonces aquí, vamos a
disminuir En realidad, mantengamos
ese tamaño original. Bien. También tenemos que agregar sección de
ubicación y botón que llame a solicitar cita. Antes de hacer eso,
voy a agregar imagen a aquí. Entonces hagámoslo primero. Y antes de hacer eso, podemos agregar nombre a esta sección. Entonces este nombre de sección
será reachus, y aquí tendremos icono, y aquí
tendremos icono de impuestos Bien, ahora agregaré la
imagen para agregar la imagen, haré clic en Contract wrangle
y seleccionaré así Entonces averiguaremos que este tamaño
de imagen es 52500. Entonces hagámoslo
52050520 con 500 s i, luego esquina será Bien. Ahora agreguemos la imagen. Entonces, para agregar la imagen, seleccione la disputa de rec, haga clic aquí y haga clic
en Video de imagen Para aquí, seleccionaré
esta imagen cinco clic aquí y podemos
agregarla así como así. Entonces necesito poner
esta sección en el lado izquierdo y esta imagen en el lado derecho para hacerlo, puedo seleccionar fácilmente esas dos
secciones y presionar Mayús A, y luego solo puedo seleccionar toda
esta sección de contacto rápido y cambiarla disposición
a disposición horizontal. Bien. Ahora dentro de esta sección, voy a tener que
seleccionar el texto y vamos a hacer texto con
un contenedor de relleno, y ahora todo
va a quedar bien. Y para el espaciado, agregaré como artículo
entre tallas. No, no, eso no. Voy a agregar este artículo entre
tallas, 20, así. Bien. Y aquí cambiamos
el tamaño a 20 así. Hagámoslo 60 entre el
tamaño de estas dos secciones. 60. Bien, ahora mucho mejor. Ahora voy a pizarra esta sección de contenido
rápido, y si queremos, podemos establecer el align centro izquierdo así. Ahora podemos continuar con el trabajo. Como la segunda sección, duplicaré esta sección de
alcance así y aquí podemos agregar
entre tamaño como 20. Antes de hacer eso, agreguemos contenido para esta
sección para hacer eso, voy a abrir el archivo. A partir de aquí, tenemos que
agregar sección de ubicación, copiar ubicación clínica
y ponerla aquí. Luego copia la ubicación real. Entonces agregaré esa
ubicación así. Y para esta sección, no
necesitamos estos números. Yo sólo lo voy a quitar. Y aquí vamos a copiar este texto, y pongámoslo
debajo de la ubicación. Duplicar el
texto de ubicación y
seleccionarlo ritmo el texto
copiarlo así. Entonces intentemos agregar enlace aquí. Enlace, tengo que ir a
ASsets en ASsets da clic aquí y dar clic en Tn y el
enlace será enlace de tarjeta. El enlace de la tarjeta estará bien. Da click en Insertar Instancia y aquí nuestra instancia y yo
solo la cortaré y daré click aquí, luego la pegaré y solo cortaremos
el texto y pegaré este texto. Podemos encarar el
texto dentro de aquí, pero es demasiado largo. Tenemos que agregar versión corta
de ese enlace para hacer eso, voy a ir a hat GPT Bien, aquí tenemos
las tres opciones. Entonces en tres opción, voy a copiar esto encontrarnos esialzación y solo
agregarlo aquí así Bien. Ahora tenemos que cambiar el icono aquí para
cambiar el icono. Voy a hacer clic aquí y hacer clic en plugins y widget y aquí, haga clic en el icono de Fon tsm y aquí buscar ubicación Mapa icono del mapa, haga clic aquí y agregue el icono al lienzo y corte el No necesito este marco, entonces entra dentro de
esta sección de iconos y pega el ícono,
elimina este ícono. Entonces veamos el tamaño del
icono, es 60. Hagamos que este icono tenga el tamaño de seis P. Luego cambiemos de color a azul. Hasta el momento tan bueno y ahora lo que tenemos que
hacer es agregar el botón. Veamos el texto del botón,
el texto del botón será
solicitar cita, y para agregar este texto de botón, no
voy a usar este
tipo de diseño. Simplemente voy a crear texto y vamos a agregar este tipo
de texto por ahora, y vamos a copiar
solicitar cita. Entonces tendré que agregar esto dentro de estas
secciones como, Bien, ahora para este frame 20, voy a renombrarlo como
detalle de contenido. Entonces cambiaré el nombre de
esta ubicación única. Bien. Entonces voy a duplicar
los tanques así y no aparece aquí porque el tamaño de
esta sección es de 600. Sólo voy a cambiarlo a 700. Bien. Ahora, en realidad,
podemos seleccionar esos dos elementos y presionar Mayús A y cambiar
esto entre tamaño a 220. Entonces puedo agregar estas tomas
dentro de ese marco. Bien. Y cambiemos el nombre de este marco
a una caja de contacto como esta. Bien. Entonces comencemos
a diseñar esta sección. Aísla este
texto de solicitud de cita y duplícalo, luego ven aquí y voy a
copiar esta parte en realidad. Podemos copiarlo de
aquí así, luego venir aquí,
pegarlo así. Bien. Después voy
a ir a ASED en Activos, clic en BTN y dar clic en Vamos a averiguar BTN que es bueno en realidad vamos por defecto
BTN y haga clic en Instancia y aquí voy
a añadir el texto cuál
será el texto Horarios
entonces voy a cambiar el nombre de este Después corté este botón y
voy a archivos dentro de archivos, resaltaré esto y
colocaré el botón así. Esto debería estar fuera de
esta libreta de contactos rápidos A. Debe estar dentro. Y también este botón
debería dentro de estos también. Después seleccionaré tres opciones como esta y presionaré al Jefe
A para hacer una ranura. Y ahora agreguemos detalles. Para tipografía,
seleccionaré subbeding para prueba, seleccionaré párrafo, y el botón En realidad, si queremos, podemos añadir icono aquí, también. Entonces, si agregamos un icono, será perfecto. Entonces agreguemos un icono. Primero, voy a cambiar el nombre este marco 20 para
solicitar una cita, y vamos a crear el icono desde cero o simplemente podemos
copiarlo desde aquí. Vamos a copiarlo desde aquí. Espero que entiendas
cómo crear un icono. Si no, sólo déjame en los comandos así te voy a
mostrar cómo hacerlo. Ahora solicitar cita el
diseño tiene una vertical pero necesitamos
que sea horizontal. Entonces para hacer eso, primero
selecciono esos tres elementos
y presiono Mayús A, y aquí voy a cambiar
esto como etapas. Entonces tenemos el ícono. Por lo que selecciono esta
solicitud cita y la cambio a disposición
horizontal. Y luego tenemos que cambiar
la posición del icono así. Bien, luego selecciónelo y da
click en este lg a la izquierda. Bien. Ahora lo que tenemos que
hacer es en realidad, tenemos que hacer este
texto como llenar contenido y dar click aquí y también cambiar
esto para llenar contenedor, y aquí tenemos que
hacer este abrazo contenido. No no no abrazar contenido. Debe ser contenedor de relleno y este diseño de texto debe ser contenedor de
relleno así. Aquí tenemos dos capas de sección, pero si solo tiene una sección, va a ser genial. Cambiemos otra opción
que nos da JGBT. Intentemos éste, copie, venga aquí y reemplace
este texto así. Bien. Ahora es mucho mejor. Aquí todavía tenemos problema. Yo salo el texto y cambiemos esto
entre ítems como a diez. Ahora es mucho mejor. Ahora lo que tenemos que hacer
es cambiar este icono. Vamos a cambiarlo, vaya a aquí, haga clic en plugin y widget
y haga clic en icono antosm A partir de aquí, vamos
a conseguir es este tipo. Esto se cortará el
vector de aquí, luego seleccione este icono y
pegarlo dentro haga clic aquí
para eliminar esto y luego establecer la altura de lata a
seis en realidad el icono
será de 60 y haga clic en llenar
y haga clic en color azul. Ahora parece demasiado juntos, así que hagamos esto
como gemelo, no 20, 30. A partir de aquí, hagamos esto
como 30 así a partir de aquí, tendremos que cambiar
esta talla a diez. Entonces cambiemos esta visita de
planificador puedo escribir a enlace de tarjeta y
ahora va a ser perfecta Ahora tenemos que agregar algunos
detalles a esta imagen.
62. Sección de revisión de diseño: Hola a todos. Ahora
diseñemos esta sección de vista previa. Bien, vamos a nuestro diseño. A partir de aquí como primer paso, voy a crear un marco, y voy a aumentar esto con contenedor de
llenado y la
altura será de 600. Después presiono Mayús A
dos en el diseño automático. Entonces aquí cambio
este nombre para revisar. Después voy a quitar el margen
izquierdo diez derecho, acolchado
horizontal
y los dolores verticales. Entonces agregaré un texto, prest un texto como este Entonces hagamos ese texto
a encabezado así. Entonces nuevamente tengo que seleccionar esta sección de revisión y
cambiar la altura a 600. Bien. Ahora voy a cambiar esta posición para alinear la
parte superior central así. Bien, vayamos aquí y
vamos a generar digamos ahora quiero generar contenido
para la sección de revisión. Dame cinco opiniones con
nombre del paciente. Entonces también dame titular de
título para presentador de
sección de revisión Aquí necesito tres sugerencias. Dame tres sugerencias
para titular, no heline titular de todos modos, lo
que dicen nuestros pacientes, copiemos esta Con la confianza de familias como la suya. Y vamos a agregarlo
a esta sección. Vamos a hacer revisión sección de
revisión. Después pega el título aquí. Hagámoslo como titular
de línea. Entonces aquí tendremos que
agregar la reseña. Copia todos ellos y ven aquí. Págalos así. Bien. Yo lo diré. Bien, ahora vamos al diseño aquí y primero agreguemos el título en el que confían
familias como tú, luego agreguemos así. Bien, ahora tengo que crear
esta sección de revisión. Bien, hagámoslo. Primero, creo un texto y
este texto será nombre, y antes de hacerlo, seleccionaré esta sección de
revisión y vamos a cambiarla capa
horizontal, y luego este
titular estará arriba. Y aquí tenemos el
nombre y luego revisamos. Bien, nombre y reseña. Ahora lo que voy a
hacer es seleccionar el nombre, cambiar su tamaño a
sub din y dar click en revisar y cambiar
tipografía a párrafo Bien. Ahora vendrán
aquí y pulsamos sobre Elipse y crearemos
la elipse así Cuando lo cree,
presionaré turno. Entonces la forma estará
perfectamente alineada así. Bien. Ahora selecciono todas esas secciones
y presiono Mayús A.
Por otra
parte , selecciono solo esos dos elementos y presiono Mayús A para agregar un diseño automático
diferente. Después selecciono el marco principal y lo hago como disposición
horizontal. Entonces pondré a este Ellips
en la parte superior así. Bien. En realidad este
patrón no va a funcionar, así que voy a quitar este
marco para quitarlo, selecciono el marco
y
luego voy a ir aquí, después selecciono el marco y aquí voy a seleccionar
eliminar el diseño automático, y después simplemente voy a poner esto
dentro así y luego voy a quitar este marco y
necesitamos agrupar esta
foto del revisor y el nombre Simplemente selecciono esas dos
secciones y presiono Mayús A, y luego lo haré diseño
horizontal y
estableceré una línea a la izquierda al centro. Después selecciono el marco principal. Entonces voy a hacer esto
como disposición vertical, y aquí
lo configuraré para que se alinee arriba a la izquierda. Bien. Ahora tenemos el
diseño, y desde aquí, seleccionaré este diseño automático
principal para alinear arriba a la izquierda
y dar clic aquí, luego hacer este contenedor de relleno y cambiarlo texto
para alinear centro. Bien. Ahora aquí,
selecciono el marco. Vamos a cambiar el nombre de esos stop. Esta será caja de previsualización, y esta será Avata
Avata así Bien. Ahora solo seleccionaré la casilla de revisión y aumentaré su tamaño para que me guste
esto, así. Ahora agreguemos detalles reales
y luego agreguemos etyle. Entonces solo voy a
este archivo de texto y vamos a obtener este nombre
y agregar nombre aquí. Entonces copiemos la
reseña así, copiemos y el ritmo de la
revisión así. Después establece con el relleno
contener así. Bien. Ahora, fijemos
también la imagen. Simplemente selecciono esta
elipse y hago clic aquí, luego hago clic en Image Video Entonces aquí
tendremos revisores Avata. Entonces aquí dentro, selecciono la foto
y solo la pongo así. Bien. Entonces lo que vamos a hacer es seleccionar la casilla de revisión. En el cuadro de revisión, estableceré el color del campo
como nuestro color blanco, y luego agregaremos los
efectos que ya guardamos. Bien. Ahora selecciono las reseñas, y aquí pondré izquierda y derecha como y arriba
e abajo como seis. No, ésta no. No
la sección de revisión, tenemos que seleccionar
la casilla de revisión, y su
patrón horizontal será seis y el patrón vertical
será seis así. Nuevamente, tenemos que cambiar las
esquinas a 20 así. En realidad vamos en la parte superior e inferior ya que se verá más bonito. Ahora este lado interior será de 22. Aquí, el tamaño será de dos. Bien. Después selecciono el texto y lo cambio el color del campo
a este color negro. Tengo que hacerlo por sección. Y aquí,
hagámoslo al final, pero ahora tenemos que agregar ISAs Para agregar esas cinco estrellas en, seleccionaré la casilla de revisión y cambiemos esto
a lo que sucedió. Hagamos esta disposición
horizontal como. Para agregar la reseña iAs, voy a dar clic aquí y dar
clic en el icono de Pontosmo, y aquí buscaré
y aquí tenemos estrellas Simplemente hago clic en esta
estrella y vengo aquí, corta, quita el marco. Después selecciona esta casilla de revisión
y dentro de esta casilla de revisión, solo presionaré la estrella, y aquí la
agregaré así. Entonces voy a cambiar su
color a este color dorado. Después seleccionaré la estrella y la
duplicaré cinco veces. Después los selecciono todos, y vamos a seleccionarlos todos. Simplemente presiono Mayús y
selecciono todos ellos, y luego presiono Mayús
A para agregar al diseño, luego lo cambiaré de posición
a disposición horizontal, y aquí voy a cambiar el
ítem entre tamaños. Hagámoslo como seis. Bien, perfecto, y voy a mantener el tamaño como
el tamaño de las estrellas, pero si quieres, solo puedes seleccionarlo y cambiar
el ancho y alto. Bien. Ahora es mirada
ahora podemos simplemente duplicarlos desde aquí o
podemos crear un componente. Para este, vamos a
duplicar esto tal como es. Simplemente tablillé el cuadro de revisión y presiono Comando C y
comando B, así, luego selecciono esos
dos recuadros de revisión y presiono Mayús A y
lo hago diseño horizontal Entonces el tamaño intermedio
será de 20 así. Sí, tenemos que aumentar
esto desde un punto. Tenemos que hacer lo
mismo aquí así. Bien en realidad vamos a
aumentar la altura, vamos a aumentar la altura. Aumentemos por la línea 440. Hagamos lo mismo
aquí, 440, así. Entonces agregaré esto
entre tallas 60, luego volveré a duplicar
esto. Cuando lo
duplique, sale fuera de este marco, pero está totalmente bien porque vamos a hacer
esto como un slider. Bien, bien. Aumentemos también la altura. Intentemos aumentar la altura
por 4,040 2,440 así. Hagámoslo aquí, también, por 40 y aquí 440. Bien. No obstante, no tenemos críticas mucho más grandes, así
que tal vez no la
necesitemos como 440, pero mantengámosla como 300. Sí, 300 va a estar bien. Entonces mira el tema de que
no tenemos un componente, tenemos ajustar manualmente la
altura de esos diseños. Ahora bien, lo que voy a hacer es que
si revisamos el diseño, se verá así, así que tendré que
cambiar el contenido y además tener que
arreglar este borde no mostrar ningún problema para solucionarlo
como lo hicimos antes
tenemos que seleccionar
esta sección de revisión y
vamos a agregar altura como 1,200. Entonces agregaré patines
horizontales para ambos lados y solucionemos
el problema así. aquí tenemos un problema. Si revisas la renuncia, se verá así, pero tiene más espacio
para arreglarla desde aquí Voy a dar click aquí y hacer
el cero como el lado del dolor y pongamos
con un 1,180. Bien. Ahora perfectamente sí. Ahora si vemos
se verá así. Bien. Ahora, como siguiente paso, tenemos que sumar tres puntos. Para ello, voy a Activos, clic en punto lateral, doy clic en insertar instancia
y pongámoslo. Cortémoslo y vayamos a los archivos. Y aquí dentro de aquí, voy a presionarlo así. Entonces solo presiono
esos dos elementos y presiono A para agregar el diseño
automático aquí, haré esto como 220 y el
diseño automático será una línea
al centro así. Ahora, vamos a
ajustarlo manualmente porque esta
sección es demasiado larga, así que tenemos que ajustarla
manualmente. Para ajustarlo manualmente, voy a quitar este marco no, necesitamos ajustarlo, solo
seleccionaré los elementos
y haré clic en Ignotolayout, y simplemente lo
ajustaré manualmente Entonces serán 20. Bien. Bueno. Y ahora tenemos que agregar antecedentes a esta sección de
revisión así, entonces la
sección de revisión será 600, pero no necesitamos que sea 600. Entonces hagamos que contenga
y hagamos que sea como 500. Veamos, veamos, vamos a
disminuir el tamaño así. Entonces seleccionemos esta
y la altura es 492 y donde esta el marco
que agregamos. Esto es. Hagamos altura 492 y
será contenedor libre. Ahora cambiemos el nombre de esas cosas. Aquí voy a cambiar esto a conjunto de
revisión y
no necesitamos este marco, así que solo seleccionaré todas las reseñas y lo
agregaré para revisar y vamos a cambiarlo layout a layout horizontal así. Entonces voy a revisar
este marco y aquí voy a cambiar
este marco para revisar G y este marco será lab
uno o el mismo día los mismos datos, misma etiqueta da, y
este será 24 slash seven tag
todos esos textos,
tenemos que cambiar el color de relleno a este color negro así Ahora agreguemos el arma real Vamos a abrir archivo y tenemos a David, copia el texto y
pruébalo así. Vamos a agregar la imagen. Entonces aquí tenemos
otra reseña. Agreguémoslo aquí y
reemplacemos este texto. Ahora cambia esta imagen así. Ahora vamos a verlo en el diseño. Voy a quedar
así, para que podamos disminuir
el tamaño de esta caja. Lo haremos en el
elementor diseño. Ahora, mantengámoslo así. Ahora tenemos sección. Ahora solo tenemos que
crear la sección de putas. En el siguiente video, diseñemos la sección Puta.
63. Diseño de la sección de pie de página: Hola a todos. Ahora solo nos queda para crear
esta sección de pie de página. Entonces cuando cree
la sección de pie de página, crearé en color oscuro, y aquí agregaré logo, y aquí agregaré
resumen de la clínica, y aquí agregaré identificador de redes
sociales. Después de eso, aquí
voy a añadir enlaces útiles. Entonces de este lado, voy a
agregar este contacto líderes. Bien. Empecemos. Primero, voy a
aumentar el tamaño del marco y vamos a
agregar nuevo marco, y vamos a hacerlo con
un contenedor de relleno, y él será vamos a
hacerlo 500 por ahora, y luego voy a agregar el diseño
automático a eso,
así que presionaré Mayús A, solo agregué el
diseño automático, luego el diseño automático. La dirección será
disposición horizontal y aquí
estableceré el relleno horizontal como cero y el padin vertical como cero Entonces lo que hago es que tenemos
que agregar fondo negro. Si solo cambiamos este color de
relleno a color negro, no
se ajustará al
tamaño de este marco, lo que tenemos que
hacer es dar clic aquí, clic en rectángulo y dar
clic así, luego establecer con relleno y
altura será 500 Bien. Ahora voy a dar click sobre este Igno
Autoayo de este rectángulo. Entonces lo puedo ajustar
como quiera así, ajustarlo así y aquí me van a agregar fuera de
este marco así. Entonces no en la sección de revisión
justo afuera del marco así y deberíamos dar click
en IgnotLaput así ¿Qué pasó? En serio
Bien, ahora todo bien. Aquí está el rectángulo. Pondré el retrangle
no la parte superior de esto, entonces agregaré Itroclor Sin color de campo Itrolor. El color del campo será
este color negro. Entonces ahora nuestro
color de campo es el mismo, entonces tenemos que agregar nuestro
logo como primer paso. Vamos a nuestra hoja de estilo. Aquí está nuestra hoja de estilo, y aquí está nuestro logo. Este es nuestro logo, pero necesitamos el logo blanco. Crear un logo blanco, solo
listé el logo
y en propiedad, puedo dar click sobre esto
en el botón variante y crear una variante
traer sección aquí voy a cambiar este color para establecer la variante y cambiar el nombre de la
variante a logo blanco Todo bien. Ahora otra vez, vaya a la página web y
aquí agregaré el logo, vaya a hacer valer Activos Tendremos el logotipo de JB, haga clic en él, y aquí logotipo blanco
pizarra, haga clic en los insertos luego
corté archivos TG dentro del marco, lo
puse, y cambiemos el nombre de este
marco a absoluto Bien Ahora lo que tengo que hacer es seleccionar la
sección de pie de página así, entonces tendremos que
agregar margen superior ya que está en solo margen superior 60, 60 es demasiado marchas kit 30
va a ser bueno y tamaño del artículo, lo
haré como cero por ahora Entonces tendré que
crear un texto. Presiono T en este tipo de texto, luego de Ty para gab, lo
cambiaré a
texto de párrafo y al color de relleno, cambiemos el color de relleno
a este color blanco Este texto debería estar dentro
del pie de página así. Ahora voy a ver que esas
dos opciones y presione Mayús A entonces voy a cambiar
esta disposición a vertical. Aquí, necesito poner este
logo sobre el texto. Este marco,
tendremos que
cambiarlo artículo entre
tamaño a dos extremos. Ahora siguiente como el siguiente vamos a
agregar resumen a aquí, vamos a ir a hart GPT, y aquí, digamos,
ahora necesito resumen, no, no,
necesito diseñar poner sección, DIUTERTONDame Veamos qué tipo de detalles que tenían GPT generarán. Bien, yo genero los
detalles así. Bien, y bien. Bien, tenemos todos los detalles, pero necesito un resumen. Entonces digamos que necesito resumen
para limpiar en 150 caracteres. Copia, tengo texto. Vamos a agregar aquí. Pongan una sección, algunos aquí, cambien este texto así, entonces lo configuraré
para llenar contener. Ahora lo que tengo que hacer es
cambiar este tamaño cuatro columnas. Bien, tenemos que agregar manejadores de
redes sociales aquí, tenemos enlace de redes sociales, tendré Facebook, Twitter, Facebook, Sam,
Twitter y enlace. Agreguemos el ta voy a ir aquí. Ahora voy a dar click aquí y dar clic en Fontas buscar pase Este ritmo, puedo aquí, solo seleccionarlo, quitar esta parte luego seleccionar en la intersección, darle el
ritmo así Pasa por debajo de este marco. Hagamos que este marco sea una suma
limpia así. Ahora aquí tenemos solo presionar
Mayús A para agregar el diseño automático. Después voy a hacer clic en el icono del
vector y vamos a cambiar el color del
campo a blanco para que podamos ver
claramente
lo que pasó aquí. Entonces aquí dentro, cambiemos el nombre este saraceb y aquí lo
pondré como una línea enviada y
aquí voy
a cambiar a abrazar y la altura
será abrazo contenido Y ahora podemos cambiar la
pátina horizontal y vertical 20 es más grande, bien. Y ahora lo que hago es que
voy a estar en color de campo. Agreguemos este color azul
como campo luego radio 20, hagámoslo por 20. Entonces vamos a disminuir las
esquinas a nueve. Vamos aquí. No está mal, pero
podemos aumentar este Facebook solo hago
clic en el I 2542 Ahora se ve bien
ahora lo que tengo que
hacer es que tengo que duplicar
esta hoja de prensa, vamos a seleccionar esos dos
iconos y presionar shift A para agregar diseño automático y vamos a
hacerlo layout horizontal. Y entre el lado B 20. Y ahora cambiemos
este icono vectorial. Vamos a agregar link thin. Vamos a agregar X Twitter C tweeter. ¿No tenemos nuevo ícono de Tita? Parece que no
tenemos nuevo ícono de Twitter. Por ahora, agreguemos este
viejo, y en elemento, podemos agregar el real rápido aquí y
pegarlo así. Después voy a eliminar
este Facebook y seleccionar el
icono de Twitter y hacer clic en C cepa proposición
y cambiar con 505250 es un poco grande
y disminuir Seis estará bien ahora para llenado
alto hagamos contenedor
hi fill. Con será de dos por demasiado pequeño. Vamos a hacerlo. Sólo necesitamos dos. Comprobemos el ancho
aquí con 65 77. Podemos fácilmente 657 así. Bien. Ahora tendremos que cambiar este color de relleno a
color blanco. Y volvamos a duplicar esto y aquí vamos
a agregar enlazado en icono. Hemos vinculado solo seleccionamos
el icono enlazado en, y no necesitamos este
marco y damos clic aquí, da clic dentro de este vector y
el ritmo de este enlazado aquí. Ahora deberíamos
incrementar esta vinculada en icono que coincidan
con otros. Bien. Y ahora agreguemos Instagram. Ir a Font tsm S Instagram. Aquí, conseguimos el icono y
cambiamos el Instagram, quitamos el marco de Instagram y damos clic aquí,
pégalo así. Esto entonces vamos a
aumentar este tamaño para cambiar el color a blanco. Bien, ahora aísle este conjunto y cambiemos
entre tamaño a dos. Bien. Ahora veamos el look
y se verá así. Entonces, si parece demasiado débil, podemos simplemente recrearlo
cambiando el alto 60, hacerlo como 65 65 Sí, 65 65 va a funcionar bien. Ahora, ya ves, ahora
se verá así. Y aquí tenemos un blanco. Cambiémoslo así. Bien. Y ahora
cambiemos la otra sección. En realidad, puedo agregar realmente ver la sección de fotos y es
a los 30 un relleno horizontal. Y ahora cambiemos el nombre de
esas secciones, resumen de
clínica y aquí. Entonces redes sociales. Entonces tenemos que
agregar enlaces útiles. Vamos a enlaces útiles para hacer
ese tipo ST y aquí, agreguemos ese tipo de tanques
y vamos a cambiarlo a sub ding el sub edin no
tenemos sub aquí
vamos a juzgar rápido Entonces stat aquí,
agreguemos texto aquí. Entonces tenemos que agregar
nuestro enlace rápido. Duplicaré la t, sle ambas de esas secciones y presionaré Mayús A y cambiaré el
diseño a disposición vertical Y aquí voy a cambiar
el texto a botones, y luego podremos agregar
detalles como home, y esta casa se rellenará en color
azul porque este
es el enlace seleccionado. Entonces solo
los duplicaré y vamos
a ir al mapa de nuestro sitio y copiar
esos blog de la sección. nuestros proveedores, nuestro proveedor, nuestros proveedores,
proveedores proveedores, contacto sobre contacto, y luego tendremos que solicitar una cita
horario no necesitamos nuestra solicitud de servicio y
solicitaremos una cita. Y luego y después agreguemos página de
término y condición. Bien, ahora solo selecciono esos
enlaces y presiono Mayús A, y
cambiemos entre tamaño a 12 y seleccionemos este fotograma. Y aquí, vamos a agregarlo como 30. Bien. Entonces
cambiaré esos colores para simplemente seleccionarlos todos y
cambiar sus colores a Y. Bien. Y aquí por ahora, vamos a agregarlo como 60, pero obviamente vamos a
cambiar ese tamaño. Y ahora agreguemos nuestra sección de ubicación.
Es nuestra ubicación. Copia de contacto. Y aquí, vamos a crear otro
texto, presionar el texto, y vamos a cambiarlo
tipografía para subdin de nuevo, presione Dye texto, y desde aquí, copiemos esos detalles Primero,
tendremos el número de teléfono, el número de
teléfono en el número de teléfono así, luego tendré que seleccionar esas dos secciones así y presionar Mayús A y luego cambiar la posición
a disposición vertical. Y aquí voy a darle a
la T y dar click aquí, y aquí cambiaremos este tamaño de
fuente a Párrafo. Bien. Ahora agreguemos los detalles. Correo electrónico. Sí. Sí. Duplicar
este en el correo electrónico. Duplicemos esto
unas cuantas veces. Solo agrega esas presas entonces otra vez, tendremos horas. Todo bien. Ahora aquí tenemos temas, entonces ¿y si lo agregamos
así? Vamos a agregarlo así. Bien. Bien. Y ahora
seleccionaré todos esos elementos y presionaré
Mayús A para agregar un grupo, y este entre el tamaño
será Datel Todo bien Ahora tenemos esas
tres secciones, y solo selecciono la sección de pie de página y
voy a cambiar esto entre lado a Otto y se
ajustará según
el espacio que tenga. Y aquí está ese diseño. Tendremos que aumentar este
poquito así y
ahora disminuir este tamaño de fotograma para que se ajuste al pie de página. Ahora lo que tenemos que hacer
es una sección de derechos de autor. Entonces hagámoslo también. Para hacer eso, en realidad, podemos usar este marco. Entonces para hacer eso, solo
aumento este tamaño de rectángulo. Hagamos rectángulo como
metraje, intervalo B. Ahora aquí, voy a
agregar texto donde lo
hice se adhirió así que solo
agrego a la sección a. Y en esta sección de pie de página, cambiemos el nombre de esas cosas para que
podamos entender fácilmente. Entonces esto va a ser
eslabón débil anillos rápidos, y aquí habrá tanque adentro por
ahora tenemos esos informan donde está contacto en este será tinta Esta será contacto info de
contacto. Bien. Ahora vamos a tener
esas tres secciones. Simplemente presiono solo selecciono
esas tres secciones y presiono Mayús A
será juego de putter, y luego pondré una
y en esta sección de Poa, cambiaré a disposición
vertical Y ahora el texto va al fondo y aquí lo
pondremos como relleno contener. El tamaño inbteen es de
60, está bien. Ahora aquí voy a cambiar
este tipo de gravedad a tipografía
barging y
cambiarlo de posición Ahora aísle la sección putas
en
la sección de pie de página en el relleno vertical, voy a dar click aquí y
pondré este cero. Bien. Ahora lo que voy a hacer es añadir a maquetación
a esta sección. Yo solo turno A y
luego sumaré 30, 30 a 2020 bien. Ahora aquí, agreguemos
los datos de copyright. Aquí tenemos derechos de
autor copyright. No no hay derechos de autor. Escribimos un 2024,
2024, así. Ahora lo que puedo hacer es
que puedo agregar un trazo, clic en Trazo y
aquí voy a cambiar este color a color blanco
y dar clic en este. No esta, da clic en esta. Seleccionemos solo la
parte superior y seamos así, entonces solo tengo que seleccionar la puta VG y aumentar
su tamaño así Bien. Ahora tenemos por sección de putas de diseño
semanal. Así que puta set, tengo que establecer el withs va a
contener algo mal Aquí dentro, voy a hacer esto 30. Ahora, hagamos que sea un 60. Y en foa set, voy a tener que agregar esto entre tamaño a Otto así Ahora bien, está bien, y
aquí no vamos a 60, eso es como 30. Se
verá así. Bien. Ahora, en realidad,
esos íconos son demasiado grandes. Eliminemos esto y después
intentemos sumar 56 por 60. Vamos a los 66 primero quitamos el diseño horizontal
y vertical, y no necesitamos un relleno
y vamos a cambiarlo como 56 por 50 Keep do para
todos esos artículos. Otra vez, hagámoslo fifo. Ahora se ve así
y ella se ve bien. Ahora necesitamos
seleccionar la página principal y presionar comando o control
y ponerlo así. Bien. Ahora aquí nuestro diseño de
página web.
64. Diseño acerca de la página, parte 01: Hola a todos. Ahora
tenemos que diseñar sobre registro de nuestros proveedores
y páginas de contacto. Creamos con éxito la
página principal y ahora tenemos esas pequeñas tareas y para
obtener contenido para aproximadamente la página, podemos usar a nuestros competidores. En realidad, solo necesitamos
hacernos una idea de cómo nuestros competidores crean
sus páginas sobre y qué tipo de
contenido se utilizan. Y al obtener esas cosas, podemos crear nuestra
propia página sobre. Si vamos al archivo de requisitos de
diseño del sitio web, podemos ver la inspiración del
diseño. A partir de aquí, abriré la cuenta de
esos competidores, solo haz doble clic aquí
y copiaré luego pasado en Nueva Pestaña y lo haré por todos
esos competidores. Sitio web como este. Bien. Ahora aquí, veamos las páginas acerca de. Primero, tenemos este
sitio web y aquí tenemos Autink y esta página sobre
solo tenemos esta sección Y si vamos aquí, ¿podemos ver acerca de la página? No, aquí no
tenemos ninguna sobre la página, así que podemos ignorar este diseño. Y si vamos aquí, tenemos sobre atención urgente. Y aquí tenemos sobre la página. Entonces en esta página acerca de nosotros, tenemos sobre nosotros historia, y aquí tenemos nuestra
misión y valores. Entonces si bajamos, podemos ver a nuestros profesionales
médicos y panel de médicos, y podemos agregar esta sección en nuestra
página de proveedores y desde aquí, podemos obtener esta sección y nuestra sección de misión
y valor. Si vamos aquí, aquí tenemos una sección y
en esta sección sobre, tenemos contenido sobre la
clínica y aquí tenemos Y Joss y Riax&enjoy entonces
tenemos detalles Entonces, verificándolos es difícil, podemos hacernos la idea de que lo que tenemos que agregar en
nuestra página Acerca de. Y en nuestra conjetura, mi plan es
crear este tipo de sección y crear
sección para nuestra misión. Hagámoslo. Para hacerlo, iré al diseño Figma,
y en el diseño Figma, pondré este diseño y
vamos a crear un nuevo marco, y el marco será de escritorio
y lo pondré junto a nuestra página de inicio y luego
cambiaré el nombre a arriba Entonces presionaré Mayús
A para agregar diseño automático, y en el diseño automático, lo
haré
diseño vertical y aquí, el tamaño intermedio
será de uno a 20, y el relleno izquierdo y
derecho serán 140 y el
patrón superior e inferior será cero. Bien. Ahora tenemos que
agregar este diseño de cuadrícula. Si verificamos aquí, no
tenemos ningún estilo de cuadrícula, pero si hacemos clic aquí y
aquí ya hemos
creado el diseño de cuadrícula, así que simplemente puedo hacer clic en esto
y hacer clic en este icono más. Entonces puedo crear estilo
para este diseño de cuadrícula. Let's S es como red principal esto. Bien, ahora si voy a
A y hago clic aquí, podemos ver el diseño de la
cuadrícula principal. Bien. Ahora lo que vamos a
hacer es agregar esta sección. Así que podemos simplemente copiar esas secciones desde aquí
sin crear desde cero porque ahora tenemos una inicio
clara y obtenemos la
aprobación de nuestros clientes. Entonces, cuando hayamos aprobado el diseño, podemos simplemente copiar el
contenido de aquí. Vamos a copiar este menú para copiarlo. Sólo puedo seleccionar a este héroe y presionar Comando C y
pegarlo así. Bien. Ahora, asegúrese de estar en diseño automático de
página configurado de
manera similar a la configuración de diseño automático de la página de inicio. Si es similar,
no tendrás ningún problema. Y ahora para la página a, no
necesitamos este botón o no
necesitamos este
tipo de espaciado. Voy a reducir esta
altura de sección de héroe a 600 así. Entonces aquí tenemos este texto en color
blanco, pero no los podemos ver. Agreguemos imagen de fondo
para que podamos verla claramente. Voy a hacer clic en rectángulo
y dar clic aquí. Entonces hagamos alturas 600 y voy a dar click en
este IgnooToayout Entonces puedo ponérmela aquí
sin ningún tema como este. Bien. Ahora voy a poner esto así
antes de hacer eso, tengo que agregar la imagen. Entonces ya creé la imagen. Puedes consultar esa imagen
en la sección de recursos. Vamos a agregar esa imagen. Haga clic aquí, haga clic en el video
de la imagen. Bien, aquí. Vemos imágenes y primer
proyecto y una página, y aquí tenemos imagen. Simplemente hago clic en Abrir y dar
clic aquí para agregarlo. Entonces lo que puedo hacer
es ponerlo atrás. Pero cuando lo pongo atrás, no
veo este
tipo de color negro. Entonces si vamos a la página principal, y aquí tenemos color
lineal que tiene el
80% de la opacidad Entonces aquí tengo que agregar esta superposición lineal
a esta página sobre. Entonces hagámoslo. Hazlo primero, hago clic en este ícono más. Y aquí, veamos el escenario. Es cero y 84, y el color consiguió este
negro. Entonces vamos a agregarlo. Primero, tenemos 80 como la
opacidad y si hago clic aquí y doy clic en Lineal
y aquí aquí tenemos 84 Entonces veamos 84, cero, y aquí tenemos 24. Agreguemos esos detalles a 24. Bien. Ahora es bueno, pero este mismo estilo no
va a coincidir con aquí porque esta
imagen del doctor no se muestra, así que vamos a ajustarla como la
veamos podemos dejar caer esto. Podemos dejar esto hasta
aquí así. Bien. Y aquí podemos
reducir así la opacidad y
es mucho mejor Bien, ahora no
necesitamos este botón, así que borra el botón. Aquí tenemos que añadir el texto. Para agregar el texto, tenemos que generar el texto
y para generar el texto, podemos usar GPT Abrí el HGPT y
vamos a conseguir nuestro prompt. Aquí tenemos el primer
prompt y copiamos el prompt, después pegamos el front. Eres un escritor de contenido. Eres un escritor de contenido, y quiero que
escribas contenido para aproximadamente página del sitio web de JB
Family Clinic Entonces aquí está la información. Entonces agreguemos nuestra información
sobre la clínica familiar JB,
en realidad, esa información que
tenemos en el contenido del sitio web Si revisamos el contenido del sitio web, aquí tenemos el contenido del
sitio web. Yo sólo voy a copiar esos
contenidos así. A lo mejor será suficiente que copiemos el
contenido para aquí. Yo sólo lo voy a copiar y
luego en GBT, yo ellos. En realidad, tenemos contenido para crear préstamo resumen
de las categorías. Entonces ahora quiero decir
realmente aquí adentro aquí, digamos, quiero seccionar. La primera sección es sobre nosotros, y la segunda sección es
nuestra misión y valores. Bien, ahora presentador para
generar el contenido, y veamos, bien. Ahora tengo que decir, quiero título para sobre página
y subtítulo Necesita subtítulo
para cada sección. Y en realidad, no necesitamos
subrit para cada sección. Sólo lo necesitamos para los titulares. Bien, aquí tenemos título. Simplemente lo copiaré y vendré
aquí y pincho aquí, luego pegaré el título
así y vengamos aquí. Y el ritmo del subpdin así. A lo mejor necesitamos más detalles para sub peding porque
esto es demasiado bajo. Entonces digamos que subdin
necesita un poco más de información. Vamos a copiar este. A lo mejor será
mucho contenido, pero vamos a ver, a
lo mejor va a encajar. Sí. Aquí encaja. Y ahora tenemos que crear este
tipo de sección. Entonces solo copio la sección
y la pego así. Y no agreguemos este tipo
de contenido a acerca de la página. Y aquí, hagamos
esto entre tamaño ya que, entre talla 90 será trabajo. Y aquí,
agreguemos sobre el contenido, y aquí voy a copiar la línea como titular
del miedo así. Y copiemos este contenido. Primero, voy a copiar esto
y pegarlo así, y luego lo duplicaré. Y aquí tenemos esta sección, solo pega esa sección
y en realidad aquí, hagamos esto como 60 porque cuando lo
hagamos como 60, va a tener más espacio. Bien. Ahora aquí no aprendemos más. Podemos agregar esta solicitud de
contenido a su cita y aquí no
necesitamos este botón. ¿Bien? Ahora tenemos sobre contenido y tenemos que
cambiar esta imagen. Antes de cambiar la imagen, vamos a crear la siguiente sección. Para crear la siguiente sección, simplemente
duplicaré
esta y aquí voy a cambiar este nombre de contenido a
unos tres niveles, y aquí vamos a
tener nuestra misión, creo, nuestra misión y
valores, solo copiarlo, probarlo aquí, y
lo que tenemos que hacer es poner esta sección primero y
esta imagen, segunda, así. Aquí agreguemos
esa información, solo copiemos nuestra misión y
valores, ponla así. Entonces aquí no
necesitamos subdline, pon esto toma así Vamos a quitar este botón. No necesitamos ese botón. Voy a quitar éste también, y aquí tenemos que
sumar nuestros valores fundamentales. En realidad, vamos
a agregarlo para agregarlo para agregarlo, podemos agregarlos
como una lista. Entonces lo que podemos hacer es crear nuevo texto dentro sobre
resumen como aquí, no ahí dentro de este. Bien, aquí tenemos un subding agreguemos nuestros
valores fundamentales ahí así Entonces aquí lo dijo como subdin y ahora lo
duplicaré
y lo cambiaré a
texto a párrafo y aquí lo que tenemos que
agregar son esos detalles primero,
voy a copiar estos textos y mi plan es sólo
copiar este texto No necesitamos
tanta información porque el usuario podrá
entender esto fácilmente si agregamos texto simple
como este y seleccionaré la elipse y crearé una elipse como hagámosla como 16 por 16 Y ahora cambiemos
este color de relleno a azul y resaltemos esos dos
elementos y presionemos Mayús A, luego seleccionemos el
diseño horizontal y aquí lo
hacemos centro y el tamaño
intermedio será 12. Así, tal vez seis, seis está demasiado cerca. Se basará. Bien. Ahora sólo voy a copiarlo
unas cuantas veces así. Ahora voy a agregar esa
información así. Nuevamente, agreguemos los detalles. Entonces tenemos atención
personalizada. Ahora voy a copiar este texto
y pegarlo en la parte inferior. Aquí tenemos un problema. El problema es si
vamos a nuestra misión, el tamaño es
menor que el texto. Entonces lo que podemos hacer es dar
clic aquí y hacer
clic en el contenido y se
incrementará así. Entonces aquí copiemos este texto y coloquemos el
texto así. Bien. Ahora tenemos sobre nuestra
misión y sección de valor. Y creo que aumentar esta
imagen para 600 se basará. 605 20 está bien. A lo mejor 520 va a estar bien aquí, hagamos la altura 600
así y ahora tenemos que
cambiar esas imágenes.
65. Diseño acerca de la página, parte 02: Bien. Ahora,
agreguemos esas imágenes. Primero hago clic en este re
triángulo o en la imagen. Da click aquí, haz
clic en maglah Videos y en una carpeta de página
en el archivo de imagen, puedes ver sobre nosotros
nuestra imagen de misión, solo haz clic en ella y
ponla así Entonces en nuestra misión, puedes hacer lo mismo así. Bien. Ahora tenemos sobre nosotros
y nuestras secciones de misión. Después en la carpeta de contenido del sitio web, podemos ver que hay
ocho categorías para agregar. Entonces vamos a agregarlos. Es bastante simple. Voy a aumentar esto
sobre el tamaño de la página, y aquí podemos simplemente copiar esta sección ya que es simplemente copiarla y
pegarla así. En realidad sellar sobre la página
y pegarla así. Por qué no es agregar
O, algo mal. Porque agregamos que Ignotolayo así que solo lo desmarco
y encaja perfectamente. Y aquí tenemos que
cambiar este ancho. Entonces aquí tenemos
ancho como 1001 60, así que tenemos que hacer este
ancho como el mismo. Entonces para hacer eso, podemos
quitar fácilmente este relleno izquierdo y
derecho así, luego se ajusta
automáticamente y aquí, solo
podemos hacer que llene
contenedor y se sentirá
así y aquí no
necesitamos esos íconos de carrusel Esto será lo menos así. Bien. Ahora tenemos que
añadir el contenido. Entonces hagámoslo.
Primero, aquí dentro, tenemos que agregar la pequeña
descripción así, después la duplicaré, y aquí tenemos que agregar la descripción del
préstamo así. Bien. Y en estas tomas, tendremos que cambiar la tipografía vamos a
cambiarla como botón,
botón no va a funcionar A lo mejor vamos a
cambiarlo a párrafo, y entonces ¿y si
añadimos subrayado Agregar subrayado no es
profesional y tal vez vamos el párrafo y hagamos así este medio
regular Aumentemos el tamaño
a 2021, así. Y ahora puedo
entre la talla es 20, pero vamos a hacerla como 15. 15 va a funcionar bien. Bien, tenemos primera
categoría y tenemos que hacer lo mismo para
de las categorías, y sólo voy a copiar este texto de aquí y
ponerlo aquí así. Entonces el ritmo de
los tanques en la descripción del préstamo así
y aquí podemos hacer este mismo tamaño y hacer
la alineación superior izquierda como la alineación y hagamos lo
mismo hasta aquí así. Sigamos adelante y ahora
tenemos esta tercera en
esta pequeña descripción, copia pequeña descripción
de aquí. Anuncio como dit como aquí, luego copie la descripción del préstamo, pase la descripción del préstamo, y simplemente copie simplemente haga clic
en este artículo y haga clic en Copiar propiedad y haga clic aquí y venga aquí y haga clic
en Pegar propiedad. Aquí entre tallas 15 y también tenemos que
hacerlo hasta aquí 15. Bien. Ahora, entonces
tenemos que añadir éste. La pequeña descripción, vamos a
copiar el texto de aquí y pegarlo así y colocarlo y
pegarlo así. Bien. Ahora otra vez,
aquí, propiedad pasada ,
en realidad, tenemos que
copiar la propiedad nuevamente copiar propiedad,
pegar propiedad. Bien, entonces hazlo igual artículo. Entonces ahora tenemos esta sección
y tenemos cuatro más por recorrer, y agreguemos esos cuatro
elementos en el diseño real. Y ahora lo que tenemos que
añadir este pie de página. Así que sólo podemos copiar este
pie de página y ponerlo aquí. En realidad, creo copiar tanto pie de página como pie de página VG
y pegarlo así En realidad, lo que podemos hacer
es seleccionar esos elementos. Haga clic en crear componente y el
nombre del componente será pie de página. Ahora lo que podemos hacer
es ir a ASRS, y aquí tenemos el
trapo de pie de página y caer así O simplemente podemos dar click aquí y dar click en la
instancia de Istat como esta Entonces hagamos las tallas una
a 20 y pongamos así. Bien,
diseñamos con éxito la página acerca de.
66. Diseñar página de blog: Hola a todos. Ahora es el momento de
diseñar la página de bloques. Mi plan es diseñar publicaciones de
blog como esta. Empecemos. Primero,
voy a crear un nuevo marco. En realidad, podemos
simplemente duplicar esta página
acerca de y eliminar
esos contenidos. Solo necesitamos el contenido del encabezado y aquí voy a cambiar a bloquear. Ahora voy a ir al
har GTP y preguntar
quiero bloquear el título de la página
y una pequeña descripción Aquí tenemos el título. Yo sólo voy a copiar
y pegar y aquí tenemos pequeña descripción
pegarlo así. Bien. Ahora voy a utilizar
este tipo de diseño, así que sólo puedo copiar este
diseño y editarlo. Yo solo voy a ir a
multas y aquí copiar nuestros proveedores y dar clic
aquí y pegar así, entonces lo voy a poner así
y de aquí, voy a quitar este. Bien, y ahora voy a hacer
el entre tallas,
uno, dos, y y hacer que la izquierda y la
derecha sean iguales así. Bien. Ahora aquí
no necesitamos este, solo quítelo y no
necesitamos ver icono de perfil para, eliminar eso y aquí, vamos a eliminar este uno, dos, y aquí, eliminarlo también. Y volvamos a ver nuestro diseño. Aquí tenemos título y
pequeña descripción, luego la fecha del
artículo publicado. Así que agreguemos esos en para. Bien, aquí deberíamos
tener la fecha. Vayamos a Chat PIB y
pregúntame artículo de blog, sructblogista Debería incluir
título pequeña descripción y la fecha de creación Bien, aquí tenemos el título. Yo sólo copio el título
y lo pego así. Entonces pequeña descripción, copia la descripción y
pega así, entonces aquí necesitamos copiar este título y colocar el
título este título, no título. Es la fecha. Y lo
siguiente es, quiero esto como de dos en dos porque tres por tres no
va a tener mucho espacio, pero tres por tres está bien. Sí, de tres por tres está bien. Mantengámonos así a
los tres por tres. Pero si queremos, solo podemos aumentar esto y
sumar dos en dos. A por dos será más grande. Hagamos tres por tres
y aquí tenemos el siguiente. En realidad, no necesitamos agregar contenido
para cada uno, así que voy a pegar esto por tres
veces antes de que hagas eso, eliminemos esos dos y solo copiemos y
peguemos tres veces. Y aquí no necesitamos esos
dos artículos, solo quítelos. Y ahora voy a
cambiar esta imagen. Creo que ya tenemos
las imágenes, así que bien, da clic en la imagen y da click en aquí y tenemos la página del blog, solo copia el texto de ahí y también hagamos lo
mismo por aquí. Sí. Ahora solo tenemos que duplicar esto
por segunda vez así y aquí tenemos que cambiar esta altura a
contenido como este. Entonces hagámoslo un poco
más grande así. Bien. Y aquí puede que tengamos que
aumentar esta parte como 640 y hagamos lo mismo
por esto, en realidad son 645. Hagamos lo mismo aquí. Bien. Ahora la parte del bloque se ve bien y vamos a ASRs y
tenemos que agregar el pie Vamos a agregar el pie de página así. Hagámoslo uno y aquí
reduzcamos esto así. Ahora tenemos bloque
alrededor de diez páginas de bloque. Ahora tenemos que crear
la página de contacto.
67. Diseñar la paginación del blog: Nuestro número en la página del blog. Creo que tienes 100 entradas de
blog en tu sitio web. Si alguien viene a
esta página de blog, cargará toda la entrada del blog. Hay dos formas de abordar
esta primera es agregar función que carga solo publicar cuando alguien se desplaza por el sitio web. Tenemos que usar JavaScript
y PHP para hacerlo, o podemos agregar una paginación, lo que significa que
solo podemos cargar seis publicaciones por página Si alguien
quiere ver más aquí, tenemos una paginación
y podemos hacer clic en la segunda y
tercera página para
revisarlas así que vamos a crear una paginación Para hacer eso primero, voy a crear un marco y
vamos a aumentar este tamaño de fotograma a aquí porque agregamos este
contenido asigno auto layout Ahora aquí podemos agregar
la paginación. Para ello, voy a
crear un nuevo marco, y va aquí porque nuestro marco entre tamaño o
entre espacio es uno a, aquí, uno a 20.
Seleccione ese archivo. Aquí está el indicado y voy a agregar el ancho como contenedor de llenado. Bien. Ahora aquí podemos click en IgnooToayout
y ponerlo aquí, dar
click en IgnooToayout
y ponerlo aquí,
así que tenemos que hacerlo Entonces crearé un rectángulos creados
aquí y en realidad, agreguemos el diseño automático
a este marco y
lo pondré como
disposición horizontal y aquí, eliminemos estos detalles de izquierda
y derecha Hagamos que sea un cero
y el marco no
se debe arreglar con el marco
debería ser así y aquí, hagamos contenido
en el medio y ahora quiero agregar flecha
izquierda derecha, primero, agreguemos flecha izquierda. Doy click aquí y en font tsm, vamos a conseguir esta flecha y ya veo, aquí tenemos la flecha Elimino esto y da clic aquí. Bien. Ahora no
necesito en realidad no necesito este. Ahora solo puedo hacer clic en esta flecha y presionar Mayús A para agregar ayo, luego hacerla media. Y agreguemos pátinas izquierda
y derecha 30, y la parte superior e
inferior como también 30 Eso es demasiado grande, tal vez gemelo será el tamaño. Bien. Ahora voy a agregar radio de
esquina como
Hagámoslo l dos. Bien. Ahora tenemos que
añadir color de fondo. En relleno, agreguemos color
de fondo. En realidad, podemos agregar este color azul claro y
las esquinas son demasiado grandes. Hagámoslo como
seis va a ser perfecto. Aquí tenemos que aumentar esta altura de
icono y vamos a hacer icono 202-20-3203 va a estar
bien y deberían ser 15 y eso debería ser
15 aquí vamos a cambiar
el color del campo a
Blanco hasta el momento tan Y el icono es un poco más grande, hagámoslo como 15. 15 será perfecto y ahora
duplicaré esto y luego lo rotaré así y
hagamos en tamaños mordidos C ahora lo que tengo que
hacer es sumar números. Vamos a sumar los números. Primero, hago clic en los tanques
y agrego texto como aquí, así que agreguémoslo como uno
y en la tipografía, hagamos el texto como sub dit Luego presione Mayús A para
agregar diseño automático y agregue 15 como izquierda y
derecha. Yo no trabajaba. No lo hice así que
agreguemos color de campo. Entonces agreguemos este color de campo. Entonces tenemos que aumentar
esto puedo izquierda y derecha detalles como este
y aquí 15, aquí, 15, tal vez hagamos izquierda
y derecha como 20, no vamos a trabajar, tal vez
vamos a aumentarlo manualmente. Las esquinas estarán adentro y aquí
el color será blanco. Hagamos esto como también 45, 52, será igual
que esos dos elementos y aquí cambiemos el
color de relleno a blanco y el color de prueba
será el color de prueba será este color negro y
vamos a agregar borde pequeño. Trazo, los colores del trazo, hagamos esto y esto
mejor que antes, y vamos a duplicarlo. Ahora aquí tenemos
dos y fase dos, hagamos esto como
Hagamos el último como diez. Bien. Ahora aquí
tenemos que hacer esto en color
azul porque este
será el ítem seleccionado. Entonces para hacer eso, establece los tanques, haz que el texto sea de color azul, y el color de fondo
será este color azul claro. Sí. Esto va a funcionar. Aquí, vamos a cambiar este color
a este color negro aquí, cambiarlo a color negro y luego copiar este estilo de trazo
aquí estilo de trazo de color, olvídalo aquí, solo haz clic derecho y haz clic en copiar propiedad y aquí ven
y haz clic en pegar propiedad. Haz lo mismo aquí. Ahora
voy a poner esto aquí. La generación de páginas
se verá así. Podemos hacer esta izquierda
y derecha como azul eso. Entonces aquí también podemos
hacer estos números como azules porque esos son
cliqueables a azules así Aquí solo agrega tres puntos es
esto y hazlo así. Aquí vamos a hacer de este
color al negro. Y ahora tenemos la paginación y esta paginación
cambiará en el diseño, pero esto será base el
cliente verifique el diseño,
podemos explicar la característica de
paginación
68. Diseñar página Contáctenos, parte 01: Hola a todos. Ahora tenemos
aquí nuestro enlace de proveedores. Para nuestros proveedores,
no necesitamos una página separada porque aquí tenemos nuestros proveedores
dedicados. Entonces, cuando alguien o cuando visitante haga clic en
nuestro Enlace de Proveedores, hagamos que esa persona
vuelva a leer a la página de inicio Ahora lo que tenemos que
crear es el contacto. Para crear la página de contacto, como hicimos antes, podemos consultar el sitio web de nuestros
competidores y veamos sus páginas de
contactos. Aquí tenemos
dirección de formulario, dirección de formulario, teléfono y
horario de atención aquí tenemos mapa y vamos al
siguiente para este, no
vemos la página de contacto. A ver. No tenemos página de contacto
separada, pero aquí tenemos contacto con nosotros horario
comercial y
detalles en el pie de página. Entonces en este sitio web, tenemos ubicaciones
y en ubicaciones, tenemos los detalles de ubicación
y en este sitio web, tiene página de contacto y
en esa página de contacto, tenemos formulario y
la ubicación de la oficina y horario comercial,
luego otra información. Usemos un botón similar
a nuestro sitio web también. Y vamos a HagidB
y digamos que necesitamos
título y pequeña descripción
para la página de contacto Entonces digamos ahora que necesitamos
ubicación, horario de apertura. Creo que en realidad tenemos
la ubicación y nos abrimos. Sí, tenemos esos detalles, así que no necesitamos
esa información, y creo que podemos continuar. Bien. Entonces primero, voy
al letrero de higo Muddy Podemos simplemente duplicar
uno de estos. Duplicemos el bloque
y lo pongamos así. Después eliminar esta sección
la eliminación de esto porque no la necesitamos aquí necesitamos agregar este pie de página dentro
del blob así Ahora aquí, vamos a cambiar marco Sin contacto copiar el
título, presionar el título, copiar las descripciones la
descripción así, entonces hagamos
este tipo de formulario. Pidamos generar contacto, preguntar formulario f. nombre completo,
correo electrónico, teléfono, mensaje del asunto. Bien, esta es una buena. Entonces hagamos el formulario y podamos usar el
diseño similar a este. Entonces primero creo marco y hagamos el marco con ancho de
tracción así, luego hagamos que la altura del marco
como 800 sea como 800, luego presionemos un Bien, luego eliminemos
esos duh innecesarios No necesitamos ninguno de estos
y entre tamaño, hagámoslo un 20, y aquí vamos
a crear el formulario. Vamos a crear texto
así y digamos que da forma título así. Vamos a copiar este título el título cambiar el tipo
de gravito subtítulo, subhding es demasiado sm es
demasiado grande tal vez mantengamos el tamaño como ropa de
cama y tenemos que cambiar el marco
ajustado
a Ahora aquí, tenemos que
crear el texto. Hagamos texto
por ahora así. Después nombre completo,
copia estos ts y primero tenemos que crear
diferentes marcos. Voy a destacar
esos dos elementos y presionar hip Ao crear diseño
automático y
hacerlo disposición vertical. Y este tamaño de diseño
será como vamos a mantenerlo aquí. La altura va a
ser 800 así, entonces ponla arriba y aquí entre la talla 20
va a estar bien y ahora presiono Mayús A y luego voy a
cambiar la altura para
llenar contenedor y la altura va a
ser tal vez vamos a 45 y mantenla así
y luego a la izquierda, vamos a hacerla como
seis y en trazo, cambiemos este color. En realidad ya tuvimos
el mejor trazo aquí, copia este color y el color del trazo será este y el
radio de esquina será seis, hagamos esto con 55. Tenemos que cambiar el color de relleno de este nombre
completo en
realidad, son dos aquí, es bueno. Creo que estamos bien, luego
crear el siguiente campo de texto. Vamos a copiar el campo de texto de la
dirección de correo electrónico y pegarlo así y
luego el número de teléfono, copiar el texto y obtener esto pasando y
gota de dragón así. Entonces otra vez,
lo voy a copiar unas cuantas veces. Entonces tenemos materia materia no
debe optativa. En realidad no
necesitamos tema aquí, así que copiemos el mensaje. Agreguemos tema de todos modos. Hagamos que el tema sea
opcional así. Bien. Entonces lo que tenemos que añadir es el método de contacto preferido, y este es desplegable. Entonces agreguemos así
y aquí tenemos que
agregar el ícono desplegable
así, no es bueno, no es bueno. Y en esto, entonces
hacerlo como seis es una lástima. Ahora vamos a hacer posición si no en el diseño y
ponerlo aquí mismo, luego cambiar de color a este color de
texto. Esto es bueno. Ahora lo que tenemos que agregar esta fecha de
cita preparada es opcional. Hagamos esto.
¿Cómo te enteraste de nosotros? Hagámoslo como
opcional en realidad y aquí podemos duplicar
esto lo haría así. Después sube el documento. Vamos a subir el
campo de documento para agregar datos adjuntos, que las personas puedan subir archivos adjuntos como
informes médicos y notemos que esta casilla de verificación
porque separamos agregamos término
y condición y política de privacidad, si lo deseas,
puedes agregar ese texto. En realidad, no
creamos el botón de mensaje. Vamos a crear el botón de mensaje. No es botón, campo de mensaje. Se requiere y aquí,
tenemos que cambiar esto. En mensaje, tenemos que aumentar
este poquito como 150
va a estar bien y poner
punta a superior y superior, vamos a hacerlo como seis en el relleno y aquí de nuevo,
tenemos que cambiar esto. Bien. Ahora se ve
bien y aquí tenemos que agregar un botón para que podamos simplemente copiar este botón y venir aquí, probar el botón, no aquí. Tenemos que seleccionar este
marco y pegar el botón. Aumentemos el
marco con esto y aquí cambiemos este texto para sub
enviar el poema está listo. Ahora lo que tenemos que hacer es sumar en el horario comercial y
otro personal. Vamos a hacer
69. Diseñar página Contáctenos, parte 02: Bien, aquí tenemos que
añadir los datos de contacto. Si vamos a la página de inicio, aquí
podemos ver los datos de
contacto, así podemos simplemente copiar
esto y
pegarlo directamente en la página de
contacto así. Ahora vamos a editar esta sección. Primero, voy a disminuir esta
altura así que se ajusta
al diseño y además
necesitamos la ubicación y no
necesitamos esta, así que la voy a quitar y aquí
vamos a hacerlo así. Entonces voy a poner esto
como una línea izquierda centro. Ahora aquí podemos
ajustar esto así y luego lo que tenemos que
agregar es en realidad, no
necesitamos este polvo
fino fácilmente icono y ahora lo que
necesitamos es nuestro horario de atención, yo solo duplicaré éste y si
vamos al pie de página, tenemos horario de atención aquí, así que solo voy a copiar eso y venir aquí y vamos a cambiar
esta ubicación clínica a horario
abierto y aquí tenemos texto Lunes a Viernes 8:00 A.M.
5:00 P.M Ahora tenemos que cambiar
este icono, vamos a cambiarlo. Para cambiarlo, iré a los
iconos de barra de pons.google.com y aquí,
busquemos horas de apertura, tal vez
horas Quizá el reloj funcione. Vamos a agregar este tipo de reloj
y aquí tenemos que disminuir su tamaño así y vamos a averiguar el
tamaño del icono. El tamaño del icono es de 106 por 106. Cambiemos el tamaño a 100. Hagámoslo como 100. Bien, hagámoslo más grande. Ahora, mantengamos esto y
pulsemos en ENG para
descargarlo y aquí, vamos y hagamos clic en
icono y aquí NV videos, luego agreguemos el icono. Como esto en realidad es más grande y el color no
es del todo correcto, así que vamos a obtener nuestro código de
color así. Y vamos aquí y cambiemos el código de color y
cambiemos este calibre. Calibre vamos a cambiar
con a 200 y da clic en PNG para
descargarlo y ven aquí. De nuevo, haga clic en CJ Image. Pasado así.
Bien, perfecto. Ahora tenemos los detalles y
detalles de NAs abiertos y luego
quiero agregar mapa aquí. Simplemente crearé un
nuevo marco y haré el tamaño del marco como 500 y
copiaré esta dirección. Esta es en realidad una
dirección falsa, vamos a probarla. Solo tienes que ir a Google y
buscar la dirección. No creo que en realidad
haya una ubicación así,
así que aquí está. Ahora presionaré Shift
Command y photo get screenshot en el Mac y
si trabajas en Windows, puedes ir a herramienta de francotiradores o Snipe intol y obtener Ahora, aquí vamos. Voy a dar click en
este botón de video y vamos a ir aquí y
ponerlo así. Ahora voy a disminuir el ajuste. En realidad, tengo que disminuir
este tamaño así para que se ajuste o puedo
aumentarlo y hacerlo visualmente
mejor y aquí vamos. Ahora lo que tenemos que hacer es agregar el pie de página para
agregar el pie de página, puedo ir a Activos y entrada, clic en Insertar Instancia y agregarlo así,
así como así. Entonces aumenta el bit
de fotograma así. Bien. Bonito.
70. Diseño de página Quiénes somos, parte 01: Hola a todos. Ahora
diseñemos esto una página en Wordpress
elemento de pro. Bien. Aquí nuestro diseño Figma, así que voy al panel de
WordPress, y ahora vamos
a ir a las páginas R página Bien, aquí, hagamos clic en Nueva página y el
nombre de la página estará arriba. Copiemos este
titular como título. Y aquí, vamos a pegarlo y dar clic en Editar con
elemento de todo derecho. Ahora lo que tenemos que hacer
es diseñar el sitio web, y si revisamos el
elemento o sitio web, tenemos una sección similar
como esta sección de héroe,
esta sección de página principal es
similar a la sección about, lo que significa que podemos usar esta sección de página principal
para crear una sección. Me refiero a la sección de
héroe de la página principal. Entonces hagámoslo. También esta sección de héroe de la página acerca de la página del blog y la página contacto siempre se repiten. Vamos a crear esto como una plantilla, lo que significa que podemos usarlo
repetidamente en nuestras páginas de Earl Ahora por ahora, solo
publicaré esto sobre la página y aquí voy a abrir el
panel de WordPress en Nueva Ventana, y desde aquí iré
a plantilla y guardaré plantilla aquí iré a
sección y en sección, haga clic en agregar nueva sección aquí, seleccionemos
tipo de plantilla pasar sección y agreguemos el nombre. Voy a añadir el nombre
como sección héroe para subpáginas y dar clic
en crear plantilla Simplemente voy a quitar esta biblioteca porque
no la necesitamos. Ahora bien, si revisamos la sección
acerca de la página héroe y la
sesión principal de héroe de la página principal es bastante similar. Sólo podemos copiar esta sección desde la
página principal. Hagámoslo. Nuevamente, abriré
el sitio web en Nueva Ventana y aquí
haga clic en Editar con elemento de y simplemente haga clic
derecho y haga clic en Copiar y vayamos a
la sección de plantilla, sección héroe para plantilla de
subpágina y haga clic derecho y haga
clic en pegar Y simplemente pega así. Ahora lo que tenemos que hacer es
eliminar cosas innecesarias. En primer lugar, si vamos aquí, no, aquí
no, si vamos
al diseño de Figma, podemos ver la altura La altura es de 600, así que vamos a seleccionar el contenedor
y aquí tiene 800. Yo solo lo hago como 600 y luego
aquí no tenemos botón, así que vamos a quitar el
botón, borrarlo. Ahora la imagen de fondo. Aquí tenemos esta imagen
de fondo. Haré clic en la
imagen de fondo y en Exportar, cambiaré a JPEG, y haré clic en el botón Exportar. Ahora vayamos a tiny png.com y
disminuyamos el tamaño de este tamaño de archivo
de esta imagen de portada Ahora hago clic en
el botón JPEG para
descargarlo aquí vamos aquí
en estilo contenedor. Cambiemos esta imagen. Da click en la imagen
y aquí tenemos la imagen y la acaba de
subir y aquí, vamos a agregar el texto ALT o texto antiguo y dar clic en
Conselecciónelo acaba agregar así y no
necesitamos
hacer nada y ahora da
clic en Publicar Ahora tenemos esta
plantilla y si vamos a la página A y hacemos clic
en este icono de carpeta, podemos ver nuestra plantilla
en mi sección de plantilla. Actualmente, no tenemos la sección héroe para plantilla de
subpáginas, así que volveré a pasar repage Cuando aquí tenemos
sección de
héroe Simplemente puedo hacer clic en Insertar
y dar clic en aplicar. Así como eso, solo agrega. Ahora sólo tenemos que
cambiar el texto. Ver, este es el poder
del elemento o plantilla. Pasemos al
diseño Pigma y copiemos el título. Ven aquí, pasea ese título
aquí y descripción, copia la descripción y pasa esa descripción
así. Bonito. No obstante, si revisamos
la descripción, aquí tiene poco
espacio como este. Hagámoslo para hacer eso, podemos agregar R aquí, tenemos que aumentar esto
y agreguemos R aquí. Entonces agreguemos R aquí, luego otra vez, tenemos que
agregar R después de esta toma. Vamos aquí,
agreguemos B así. Bien, bastante bien. Ahora hago clic en C publicar para guardar. Bien. Ahora pasemos
a la siguiente sección. Esta sección también es
similar a esta sección. Simplemente podemos copiar esta sección desde la
página principal y agregarla aquí. Hagámoslo. Aquí nuestra
página de inicio y voy a simplemente dar clic en esta sección y dar clic derecho
y dar clic en Copiar. Después en una página, haga clic aquí y haga clic en Pegar. Haga clic derecho y haga clic en Pegar. Bien. Y para aquí, no
necesitamos esta caja de imagen, así que la
seleccionaré y la eliminaré. No necesitamos este. Sólo tienes que seleccionarlo. Eliminarlo. Bien. Ahora está bastante
bien y puede que tengamos que cambiar algunas cosas
que
comprobamos aquí, no tenemos dos botones. Sólo tenemos un botón. Eliminemos este subbotón, y si comprobamos el tamaño inbten, el tamaño intermedio es 60, y hagamos clic en el
contenedor principal y Columna gap 60, no
necesitamos hacer nada y simplemente copiar el
texto primero así, luego copiar el segundo texto, simplemente copiarlo hasta aquí, luego copiemos este Haré clic en este texto y haré clic en Condo Bigate y
aquí solo agregaré ese texto y aquí
tenemos que agregar el
botón de solicitarte cita vamos a agregarlo aquí Y después de
diseñar completamente este sitio web, crearemos acciones
para esos botones. Por ahora, agreguemos la
etiqueta hash a esos enlaces, y ahora tenemos que
cambiar esta imagen. En estilo de imagen,
no tenemos nada. Así que simplemente voy a hacer
clic en esta imagen y clic en Exportar y
el tipo de archivo es PEG, luego ir a Ti PNG, agregar la imagen y radio el tamaño del archivo
así, luego ven aquí. Con elige imagen en
la imagen así, luego copia el texto antiguo
así y haz clic en Ocultar y solo agregó así y no tenemos
nada que hacer Ahora tenemos que ir a
la siguiente sección y crear la siguiente sección también
es bastante fácil. Esta es la forma en que cuando
creamos la página principal, podemos simplemente copiar el
contenido de ahí. Así que puedo
hacer clic derecho sobre esta
sección acerca de y
dar clic en Condupl ahora lo que
puedo hacer es hacer clic en el
contenedor y hago clic en este contenedor dentro
del contenedor principal y ponerlo así Ahora, cambiemos el texto. Aquí, cambiemos este
texto primero así, luego copiemos este texto
y aquí más allá del texto. Nuevamente, tenemos que agregar
sumin aquí así que copia el título tum y simplemente
duplique esto y pegarlo Ahora una ficha cambiemos
este texto a demandado, así. Entonces tenemos que agregar
la lista de unders. Vamos a hacer clic en Agregar
elemento y lista de búsqueda. La lista de iconos funcionará,
agréguala así. Y aquí voy a quitar los elementos y sólo
conservar el único elemento y luego dar clic en este texto para editarlo y
copiarlo, después pegarlo. Ahora da click sobre este icono
y tenemos este círculo. Da clic en insertar para insertarlo
e ir a estilo en estilo, el color del icono es
color primario y veamos el tamaño del icono. El tamaño del icono es de 16 por 16. Que no sea 60, 16. El gap ver la brecha, aumentarla, presionar
y gap es ocho, hacer la brecha ocho y en el texto, cambiemos de color a
este color de tipografía Veamos que este texto es
tipografía para que podamos mantener los estilos de texto tipografía
o Bien. Ahora lo que tengo que
hacer es simplemente duplicar estos elementos por tiempos
y agregar el contenido. Simplemente copie el contenido, base el contenido aquí
y copie el contenido T aquí, luego copia este contenido y copia
éste, pásalo. Ahora, cambiemos el
tamaño intermedio aquí el espacio entre. Veamos el espacio
entre y son 20. Hagamos espacio entre 20. Bien. Bonito. Ahora tenemos que agregar este copy paste que sabe así y no necesitamos el
botón, borra el botón. Bien ahora, vamos a ver. Ahora tenemos que agregar esta
imagen así nosotros la imagen, exportarla como JB EG, clic en exportar nuestra misión de botón Exportar para exportarla Después en minúsculo PNG, agrega el PNG así. Después haga clic en JPEG para descargar esta imagen
y ahora vamos a acerca y haga clic en esta imagen y haga clic
en elegir imagen aquí, solo
agreguemos la imagen. COVID, pasado así. Ahora haga clic en seleccionar agradable. Ahora lo que tenemos que hacer. Ahora tenemos esta categoría es con la descripción del préstamo.
Entonces hagámoslo. Es bastante fácil porque ya tenemos esa sección
en la página principal, pero hay algunos cambios, pero solo necesitamos este diseño. Entonces simplemente voy a copiar
toda la sección de aquí y vamos a ir a la página y vamos a
pegar el contenido, y aquí no necesitamos este. Eliminarlo porque no
hay ningún botón aquí, Bien. Ahora aquí, vamos a copiar el título. Creo que el título
es igual así. Bien. Bien. Ahora no
necesitamos esta característica de carrusel En realidad, podemos arreglar esto
muy fácilmente con rejilla, no con columnas. Así que vamos a intentarlo. Doy clic en agregar elemento
y agregaré una cuadrícula como esta
en la configuración de cuadrícula, también
estableceré la
masa de columna y la fila
será de dos y los huecos
serán 20 así. Entonces lo que puedo hacer
es agregar esas estrellas. Primero, tenemos el real vamos a
poner esta grilla en la parte superior, así que voy a dar click aquí y
vamos a agregarla así. Entonces a partir de aquí, voy a
ver que el
cuadro de imagen y agregarlo
así en la cuadrícula, voy a quitar el
margen y los tapetes y ahora vamos a agregar
este a aquí Entonces otra vez, tenemos éste, luego éste y ahora tenemos que aumentar
el recuento de filas de la cuadrícula. Haga clic en concreto, vaya al
diseño y cambie la fila a tres filas y
agréguelas así. Ahora creo que agregamos Dt
voy a madre carrusel, clic aquí, da clic en Condolete y además no necesitamos este, así que simplemente lo eliminaré Bien. Ahora bien esto está perfectamente alineado y no
necesitamos hacer nada. Simplemente aparece así y ahora tenemos que
editar los contenidos. Haga clic en el cuadro de imagen y en un estilo cambie la alineación
vertical. Arriba. Y ahora agreguemos
esos detalles extra. Primero, tenemos el
texto sobre descripción, agreguémoslo
así y agreguemos el BR, creo que debería funcionar y
agregar otro BR, Bien, bonito. Y ahora este texto debería aumentar un
poco para hacer eso. Sólo podemos agregar la etiqueta B así. Creo que no está funcionando. B. No está funcionando, no vamos a poder usar el cuadro de imagen porque
tenemos esta línea extra, así que tenemos que crear esto desde
scribe o podemos usar CSS,
pero agregar CSS es la manera más fácil Agreguemos el CSS y
veamos qué podemos hacer. Entonces primero voy a copiar este
texto y reemplazar este texto, y como lo hice antes, voy a añadir dos líneas de
rotura BRO como esta y aquí voy a añadir
nueva etiqueta llamada span. Esta es una etiqueta TML y flash
span para cerrar la etiqueta span, y aquí voy a añadir la clase clase igual
cgory caja sub subtítulo Bien. Bonito. Ahora bien, esto es un SMLC Clase TML que acabo de crear, así que la copiaré
y haré clic en publicar y aquí iré
al diseño web personalizado US o iré al
dashboard de nuestra página web y aquí tenemos apariencia
y da clic en Personalizar En personalizar, podemos
agregar adicionales ESS. Para agregar ESS adicional, puedo
volver a copiar el CSS y venir aquí, ad dot porque es una clase
y un corchetes como este, luego agregaré tamaño de fuente
como veamos, veamos. El tamaño de la fuente es de
20, 20 x. Creo que esto
debería funcionar ahora. Y vayamos a la página acerca y reprimamos esto y
veamos que funcionó o no Bien, está funcionando. Este texto es más grande que el texto de la
ventana para confirmarlo, abriré esta nueva
ventana y revisaré esta, derecha, vaya a Inspec
y esta En Inspec, tenemos span y
aquí tenemos nuestra clase CSS. Si en realidad tengo el mismo tamaño no, es el mismo tamaño, así que
no necesitamos hacerlo. Esos dos ítems se dicen que
este debería ser 21. Por aquí, tengo que hacer 21 así y dar
click en Publicar. Ahora si lo compruebo desde aquí, deberíamos ver Prueba 21, clic aquí y aquí tenemos 21 y ver con la
diferencia, bonito. Ahora podemos hacer lo mismo para
el resto de esta caja de imagen. Da click aquí y
pega este texto y vamos a ir a aquí espaciar
el contenido real, así que para obtener el contenido real, iré a nuestro archivo de texto de
contenido y al texto de ahí.
71. 0708 diseño acerca de la página parte 02: Tengo las categorías con descripción
pequeña y larga. Entonces primero uno ya creamos, y luego tenemos salud de mujer, copia el texto y
herem interesante Creo que lo echamos de menos. Entonces vayamos a la página principal. Y en la página principal, sí, simplemente ignoramos a la mujer, pero podemos hacerlo porque
podemos conseguir la forma perfecta
con esos seis artículos. Así que vamos a ignorarlo. Entonces vayamos a este
tamizaje de salud y atención preventiva. Y en pequeña descripción, agregaré este en descripción del
préstamo aquí
tenemos la descripción del préstamo. Bien, entonces tenemos atención
pediátrica. Entonces a la atención periátrica, tengo que copiar esta descripción
y pegarla así, luego copiar el texto, el texto En realidad, agregamos el mismo
texto al primer ítem, así que tenemos que cambiar el
primer ítem y cambiar los detalles del primer ítem
así, ritmo así. Ahora tenemos este quinto icono. Vamos aquí, ritmo
así, copia el texto. Puede que no veas la
parte que copio en el texto porque la abro en
mi segunda ventana así. Entonces otra vez, copia
todo este texto y ve al subord
mental tenemos
tu descripción Bien. El último. Vamos a copiar el formato
de aquí y pegarlo. Ahora, este así, copia éste,
pegarlo así. Bien. Ahora lo que tenemos que hacer es
poner esta imagen arriba como alineación
vertical superior y
tenemos que hacerlo para un ítem, pero sólo podemos escribir
con y dar click en copiar y escribir escribir y escribir Pegar tipo
pegar este tipo Oh, no es copiar, así que hagamos clic aquí y copiemos. Después da click aquí y pega
este tipo. No pasó nada. Vayamos al estilo. Sí, pasé,
pero no parecía. Vayamos aquí y
hagámoslo así. Bien, da clic en publicar y
vamos a comprobarlo en el diseño. Me quedaré
así y lo que significa que creamos con éxito el
diseñador sobre la sección. Ahora tenemos que diseñar
la sección de bloques.
72. 0709 Diseño de solicitud de marco de cita: Ahora en nuestro diseño FICMA
y el sitio web, si alguien visita el sitio web y da clic en este botón de llamada
a la acción, deberíamos tener una página
para solicitar cita Así que vamos a crear esa
página para que tenga un formulario de solicitud de cita
y poca descripción. Entonces vayamos a nuestro
chat GPT y digamos que no necesitamos. Digamos, necesito diseñar, copiar el texto de aquí. Página y debe tener titular titular
subtitular y formulario de
solicitud pequeña cripción Vamos a ejecutar este código, y aquí tenemos los
detalles. Todo bien. Aquí están los detalles, y aquí está la
pequeña descripción, y tenemos toda la información. Así que vayamos aquí
y solo podemos obtener el marco del formulario de contacto
para crear este, así voy a duplicar
el yo soy así Entonces aquí, cambiemos el
titular, copiemos y peguemos. Después en el subtitular, copia la
sublínea pegala así. Ahora aquí podemos agregar
una pequeña descripción. Copiemos esta primera parte
y la agreguemos así. Después copia este texto y
duplicaré este texto, presionaré y arrástrelo y lo
soltaré así. Agreguemos este contenido. Y aquí, cambiemos
este texto a somnete solar. Será párrafo
y aquí no altura, el ancho será llenar
contenedor así. Y aquí no necesitamos esta sección y
no necesitamos esta sección, solo
necesitamos este marco y voy a aumentar
la altura del marco. En realidad, puedo
cambiar la altura a medio contenido y va a mostrar Earl aquí solo voy a
aumentar esto para que me guste
esto y para esta forma, hagamos que este formulario se centre Lo haré como centro y esas tomas deberían estar
centradas así. En este botón también debería
estar en el centro así. Entonces de esta manera, en realidad agregar centro
no se ve bien. Entonces aquí dentro, tenemos un Espace enorme. Para este Espace, podemos
agregar imagen porque esa será la forma más fácil de
eliminar el espaciado E. Seleccionaré aquí y
agregaré esta imagen así y hagamos
la imagen más pequeña. Entonces agreguemos esta
imagen con esto. Vamos a aumentarlo así. Y si queremos, podemos agregar este texto aquí. Cortemos el texto y lo
peguemos aquí mismo. En realidad, tenemos que agregar
marco a esos dos elementos, así que presione Mayús A y
hágalo diseño horizontal. Entonces aquí pon este texto arriba, selecciona el texto,
y póngalo arriba. Entonces el ancho
será la mitad, no la mitad. Vamos a ajustar el
texto manualmente así. ¿Y qué pasa con
el tamaño intermedio? El tamaño intermedio es dos buenos. Y también este texto
debería ir aquí, esto lo puso arriba así y ahora parece que se ve bien, y ahora lo que tenemos que hacer es relacionar el putter y
poner el putter Hagámoslo uno, 220 así, luego
disminuya el tamaño. Y aquí,
cambiemos esta imagen. Bien, en la sección de recursos, encuentra la carpeta de imágenes. Bien, ahora hago clic aquí y
selecciono el video de imagen. Entonces aquí en las imágenes, verás primer proyecto
y solicitarás página de cita. Y aquí tenemos una imagen, da clic en Abrir
y agregar así Bien, ahora nuestra página de solicitud de
cita está diseñada y aquí cambiemos el título de
esta página para solicitar cita. Bien.
73. 0101 compra de alojamiento y dominio: Hola a todos. Ahora es el
momento de comprar un dominio y
alojarlo porque necesitamos
el dominio y el host para alojar nuestro sitio web de
WordPress. Así que primero menos escoger dominio. Hay un sitio web
llamado taldls.com. En este sitio web, podrás ver todas las promociones y ofertas
de los proveedores de dominios, y desde aquí,
podrás comprar un dominio que seleccione mejor Hostin y
conseguir dominio más barato Aquí, verás un filtro. Aquí, buscaré nuestro nombre de dominio como diseño
web personalizado, y aquí tengo que dar click en
verificar que no eres robot. Bien, aquí tenemos los dominios
disponibles, y de este filtro de precios, lo
pondré como $1 y veamos qué tipo de
dominio tenemos por $1. En aquí, tenemos diseño
web personalizado punto S
dominio 4099. Nombre Jeep. Entonces voy a elegir este en la nave espacial que podemos conseguir punto dominio
XYC por dólar Entonces aquí solo hago clic en Nombre Jeep y se
redirigirá al nombre foque Y aquí puedo buscar
el nombre de dominio. Así que vamos a copiarlo de
aquí y pegarlo. Después haga clic en buscar. No necesitamos el.com. Necesitamos puntos. Entonces aquí podemos ver punto s, en realidad, podemos
agregar punto S. Bien. Ahora aquí lo tenemos
por dólar 2.98. Simplemente hago clic en agregar a tarjeta
y se agregó a la tarjeta. Ahora hago clic en Pagar y aquí puedo agregar
el código promocional. Entonces iré aquí y
averiguaremos el código promocional. Este especial 99 es
el código promocional. Entonces solo lo copio y
lo pego aquí, da clic en aplicar. Bien, ahora tengo que ingresar a la cuenta de Name Jeep,
en realidad ya tengo
una cuenta de Jeep con nombre. Si no tienes una, puedes hacer clic en Crear
cuenta gratuita y seguir el paso. En mi caso, haré
clic en iniciar sesión, y aquí agregaré mi
nombre de usuario y contraseña. Bien, acabo de iniciar sesión en la cuenta de
Namechp y aquí, agregaré el código promocional, lo
copiaré de aquí y lo
pegaré así Da click en aplicar, y ahora
tenemos el subtotal como 0.99, y voy a desmarcar todas estas cosas,
así que elimínala No necesitamos ninguna
de esas cosas. Así que ahora puedo hacer clic
en Confirmar pedido. Antes de confirmar el pedido, iré a namjb.com, y vamos a refrescarlo. Entonces podemos seleccionar el anfitrión haciendo click en este anfitrión y haciendo
click en el anfitrión compartido Hostin Y en Name GP, podemos conseguir este
paquete iSTlla
y I Stellar plus para diseñar y desarrollar
nuestro sitio web WordPress En el istllaPackage,
tendremos función de
correo electrónico y
tendremos GB, SSD En el ITLlarPlus
tendremos dominio ilimitado. Sin embargo, hay un límite, aunque es ilimitado, nunca
es ilimitado. Creo que es solo un
gimmick de marketing. Sin embargo, aquí, tenemos buzón
ilimitado y
tenemos esta función de autobup Esta función de autobup
es muy potente, y mi recomendación es elegir
esta cuenta de ItellarPlus si vas a usar
el nombre servidor
barato para el nombre servidor
barato Por lo que actualmente hay
un acuerdo del Black Friday. Por eso la cantidad
es tan baja. Sin embargo, todavía Namecheap es el proveedor de
alojamiento más barato y asequible Y aquí podemos establecer la
facturación como mensual o anual. Si lo establecemos como mensual, va a costar tanto. No obstante, lo configuré anualmente, y ahora podemos obtenerlo por 22.80 $0.08 y podemos renovarlo
tras año por Así que ahora hago clic en Get start y aquí lo configuramos como nuevo dominio y pulsamos en ya en la tarjeta y nuestro costo total
será de 23.80 $0.07 Ahora puedo hacer click en. Agregar al carrito y aquí puedo
hacer clic en confirmar pedido. No obstante, ya
tengo lágrimas hospedando, así que no necesito este hosting, así que simplemente hago clic en este
icono de cláusula y solo necesito dominio. Además, puedes obtener dominio
de esos otros proveedores. Y si vamos a este
dominio XYZ en nave espacial, podemos buscar el nombre de dominio
aquí y continuar con el trabajo Pero para esto, voy a
elegir el nombre GIP, y ahora hago clic en Confirmar
Pedido y continuar la compra también cosa
muy importante antes de que compres el dominio, siempre revisa el
texto del dominio Si compras dominio con texto
incorrecto o caracteres incorrectos, no representará
tu marca. Así que siempre vuelve a revisar el
texto de tu dominio. Si buscas dominio
como diseño web personalizado, verás que este
dominio ya está tomado, lo que significa que podemos obtener este dominio y en lugar
de obtener ese dominio, podemos obtener este tipo de dominio. Entonces cuando conseguimos un dominio, siempre
tenemos que comprobar el dominio es dominio de nivel
superior o para hacer eso, solo
puedes buscar
en Google si
vamos al dominio B punto XYZ,
podemos buscar es dominio XYZ
dominio de nivel superior. Entonces dice que XYZ es un nombre de dominio de nivel
superior, y de esa manera, puedes averiguar el nombre de dominio
oeste, pero los
nombres de dominio más familiares son.com punto. Punto org. Si es, es punto co
punto k, así. Obtener un
dominio de nivel superior es realmente importante porque Google
y otros motores de búsqueda clasificarán los dominios de nivel superior más fácilmente que solo clasificar
algunos dominios de bajo nivel. Entonces te
veo después de completar el proceso de
compra del dominio. Bien. Ahora aquí
tenemos el nombre de dominio, y ahora tenemos que cambiar
el DNS para cambiar el DNS, voy a hacer clic en
Administrar DNS colgando significa que tenemos que configurar
el dominio con el servidor. Y aquí tenemos nombre
jefe DNS básico. Lo voy a cambiar por nombre
jefe de hospedaje web DNS. Entonces voy a dar click en este
savy y cambia. Bien. Ahora lo que tenemos
que hacer es ir al panel C. Voy a hospedar en lista, y en la lista de hosting
aquí está nuestro anfitrión en. Entonces aquí vamos al panel C, ¿puedo simplemente dar click en él y se redirigirá
al panel C. Por lo que no
importa qué tipo de dominio o
proveedor de hosting elijas. Los paneles A C tienen la
misma funcionalidad. Entonces me desplazaré hacia abajo y
aquí tenemos sección de dominio, así que simplemente hago clic en él
y ahora desde aquí, hago clic en, crear un nuevo dominio. Aquí tenemos es conjunto de dominios, basta con hacer clic en,
crear un nuevo dominio, y aquí vamos a agregar
el nombre de dominio, copiar el nombre de dominio
y pegarlo así. Entonces en el servidor de hosting, creará nuevo fold call
custom website design dot. Bien, entonces
tendremos un subdominio. Así que ahora hago clic en el botón de enviar. Bien, el dominio se
ha creado con éxito. Entonces, si hago clic aquí y
voy a la página web, se verá así. A nombre G, tenemos
certificado de presl para uno cerca. Entonces cuando hacemos clic aquí, podemos ver la conexión Cece, lo que significa que el certificado SSL
está configurado correctamente y además nuestra URL es TTP Bien Entonces ahora, Earl Wood, si no obtuviste esta página, solo espera de cinco a 10 minutos y esta página aparecerá Bien. Ahora lo que tenemos que hacer es instalar WordPress
en el dominio.
74. 0102 Instalación nueva de wordpress: Hola a todos. Es hora de
instalar WordPress. Voy al panel C
y en panel C, tenemos instalador de
app soft tacular Simplemente hago clic en él y aquí tenemos Wordpress
y desde aquí, simplemente
hago clic en Instalar. Y ahora aquí tengo que
seleccionar los detalles. Primero, seleccionaré TTP y
sin esta parte www dot, así que solo TTP como protocolo, después seleccionaré
el nombre de dominio Así que aquí está nuestro nombre de dominio
y aquí voy a elegir la última versión
del Wordpress y no voy a añadir
ningún directorio. Simplemente instalaré WordPress
en la carpeta raíz, y aquí podemos cambiar el
nombre del sit y la descripción del sitio. Pero cambiemos esos ITA
mientras diseñamos el sitio web. Por ahora, mantengamos
esas cosas tal como están. Y aquí tenemos que agregar usuario de
administrador y contraseña de
administrador. Voy a agregar esos detalles
también agregaré una contraseña. Asegúrate de recordar tu nombre de usuario y contraseña
porque deberías tener usar este nombre de usuario y contraseña para iniciar sesión en el
Wordpress y desde aquí,
voy a cambiar este correo de
administración a correo electrónico de
trabajo porque actualmente este correo electrónico no funciona. Bien, desplácese hacia abajo y aquí no necesito esto
ningún complemento adicional. Retira los plugins adicionales
y ahora da click en este botón Instalar
y comenzará a instalar el
wordpress en el sitio web. Bien, Wordpress
se instaló correctamente y desde aquí, puedo hacer clic en esta URL e ir
al sitio web de WordPress en
la URL administrativa, puedo ir a Wordpress así. Desde aquí, solo hago clic en no, no
quiero intentar
probar un proceso de configuración ET, y aquí está nuestro panel de
WordPress. Para acceder al panel de WordPress, podemos simplemente en la URL de nuestro
sitio web y luego agregar WP Admin al final
de la URL del sitio web. Ahora aquí está nuestro
sitio web parece. En la siguiente lección, aclararemos
el Wordpress y eliminaremos cosas innecesarias
de nuestro sitio web de WordPress.
75. 0103 limpiar wordpress: Hola a todos. Cuando instalemos WordPress
por primera vez, habrá algunas cosas
innecesarias. Así que vamos a eliminarlos. Primero, comencemos con plugin. O por aquí y da clic en Instalar plugins y aquí
tenemos tres plugins, así que los selecciono todos y hago clic en Desactivar
y dar clic en Aplicar Por otra parte, selecciona todos ellos y da clic en Eliminar
y haz clic en Aplicar. Bien. Entonces vamos a los temas. Aquí tenemos tres temas. Actualmente, el
tema activo es del 20 al 25, hagamos clic en el resto de los equipos y
los eliminemos así. También hazlo por éste también. Ahora vamos a ir a comandos y aquí tenemos
otros comandos, da clic en Papelera y vamos a Papelera y pulsamos en
Eliminar permanentemente. Vamos a páginas y páginas de Earl
y aquí voy a mantener esta única página de política de privacidad
y basura la página de muestra También vaya a la pestaña Papelera y
haga clic en Eliminar permanentemente. Y veamos la mediateca. Actualmente, no
tenemos ningún medio y luego vamos al
post Earl post, y aquí tenemos
Hello WordPOS cash Vaya a Papelera y haga clic
en eliminar de forma permanente. Bien. Ahora voy a ir al
tablero y en el tablero, voy a descartar esas cosas porque no necesitamos nada
de esto por ahora. Bien. Ahora tenemos un sitio web
WordPress recién instalado y estamos listos para diseñar
sitios web personalizados usando WordPress.
76. Tutorial 0104 de WordPress: Hola a todos.
En realidad, me olvido crear el
trabajo de WordPress a través del video. Entonces hagámoslo ahora. Primero, cerraré la sesión
justo por aquí y clic en Cerrar sesión para iniciar sesión en
el sitio web de WordPress, podemos agregar slash después URL
del sitio web y en
wp admin Entonces llegaremos a esta página de inicio de sesión de
Wordpress, y aquí tenemos que
agregar el nombre de usuario y contraseña del
sitio web de Wordpress que registramos. Después haga clic en Iniciar sesión y ahora estoy en el panel de WordPress. En el panel de WordPress, aquí tenemos este
logotipo de Wordpress, y desde aquí, podemos consultar la documentación y conocer más sobre Wordpress, y luego tenemos homepage R.
Si solo hacemos clic aquí, se redirigirá a la
página principal del sitio web. Voy a dar click y luego aquí
tenemos sección de comando. Actualmente tenemos cero comandos. WordPress es lo mejor para iniciar sesión. Entonces por eso tenemos este
tipo de sección de comando. Entonces aquí, tenemos nuevo ícono de
menú y por encima del nuevo y luego podemos crear páginas
de medios publicitarios
y crear usuarios. También en el lado derecho, tendremos detalles
sobre nuestro perfil de administrador. Entonces coloco el cursor sobre él y hago
clic en este admin Bien, aquí tenemos detalles personales de
propil Entonces a partir de aquí, podemos
cambiar el color del admin. Como ejemplo, si
selecciono este color, cambiará así y
este cambiará así, pero me gusta el color predeterminado. Y aquí podemos agregar
nuestro nombre, apellido y apodo, aquí podemos agregar nuestro correo electrónico. En realidad, el correo electrónico ya
se configurará. Entonces la URL del sitio web se establece como URL de
nuestro sitio web actual porque somos los súper administradores
de este sitio web. Entonces podemos agregar detalles
sobre nosotros mismos, y también podemos agregar
una foto de perfil. Para agregar la foto de perfil, tenemos que registrarnos
con cuenta de Gravata Si solo haces clic aquí, voy a dar clic derecho y dar clic en Abrir nueva ventana y aquí
podemos dar click en GT Data ahora y
crear nuestra cuenta Gravita Por ahora, voy a mantener lo mismo y aquí podemos
cambiar nuestra contraseña, clic en establecer Nueva contraseña
y agregar su contraseña aquí, luego dar clic en Actualizar perfil y no lo voy a hacer. Después de hacer eso,
cerrarás sesión y podrás iniciar
sesión con una nueva contraseña. Bien, ahora vamos
al tablero y a casa. Vamos a hacer clic en Live. Bien. Y en la sección Actualizaciones, si solo hago clic en Actualizaciones, podremos ver los plugins, temas y actualización de la
versión de Wordpress. Actualmente, nuestro sitio web
está actualizado. Y cuando realices
actualizaciones a tu sitio web, siempre obtienes copias de seguridad, y
luego tenemos la sección de post. Entonces si hago clic en ErlFost aquí
podemos dar click en AdnwPost y vamos a dar click en Adnew y aquí podemos agregar
el título así,
y aquí podemos agregar detalles, y podemos dar y vamos a dar click en Adnew
y aquí podemos agregar
el título así,
y aquí podemos agregar detalles,
y podemos dar click en Publicar. Pero en el futuro, vamos a
hacer esas cosas por ahora. Vamos a conocer la familiaridad
de la interfaz. Simplemente voy a hacer clic en
Lu y volver y aquí va a mostrar los posts
que ya tenemos. Entonces tenemos categorías
y y en lecciones futuras, pasaremos por las
categorías y en medios, podremos ver las imágenes, videos y documentos que nuestro sitio web tiene en esta sección de medios. Entonces tenemos páginas. En las páginas A, actualmente
tenemos página de política de privacidad. Si hago clic en Vista previa, se verá así y
si queremos editarlo, simplemente
podemos hacer clic en Editar y
editar esos detalles como queramos. Pero por ahora, solo
pasemos por el personal. Nuevamente, iré
al tablero después
tenemos sección de comandos y mostrará los comandos
que obtenemos para nuestro post, luego tenemos la sección de
apariencia. Actualmente, en
la sección de apariencia, no
tenemos muchos detalles
porque solo configuramos el equipo predeterminado de Wordpress
2025 y en el futuro, aprenderemos más en
la sección de complementos. Tendremos son los plugins que necesitamos para
diseñar este sitio web. Como ejemplo,
vamos a utilizar Element Pro para
diseñar nuestro sitio web. Element o Pro es un plugin. Si hago clic en esto
agregar Nuevo plugin y aquí puedo ver
los plugins y luego si busco aquí elemento o presentador y apareció este elemento o
plugin de creador de sitios web, y aquí dice último actualizado hace una semana
y es capaz con la versión de nuestro sitio web de
WordPress dice diseño elemento.com, y solo podemos hacer click en y aquí puedo ver
los plugins y
luego si busco aquí elemento o
presentador y apareció este elemento
o
plugin de creador de sitios web,
y aquí dice último
actualizado hace una semana
y es capaz con
la versión de nuestro sitio web de
WordPress
dice diseño elemento.com,
y solo podemos hacer click en este Instalar
ahora e
instala el plugin, luego actívelo, y
aparecerá este
enchufe instalado en la sección. A desde aquí, podemos hacer click
en este plugin de subida. Y si descargamos
plug en nuestro sitio web, sólo
podemos elegir el
archivo e instalarlo. Y aquí podemos dar
click en ERLSer y aquí podemos ver a los usuarios de Earl que tenemos en Por lo que actualmente
solo tenemos super admin y el
rol es administrador. Entonces si hago clic en nuevo usuario. Aquí están los detalles
que podemos ingresar. Luego, como rol, podemos seleccionar su administrador, editor, autor o colaborador. Si es editor, el
rol de editor no tendrá todos estos detalles y solo
podrá editar cosas como páginas, publicar, verificar comentarios
y cosas así Entonces nosotros herramientas. Esta sección de herramientas
no es importante por ahora, saltemos esa. Entonces nos hemos fijado. En set in, tenemos sección
como general escribir en, leer en discusión
y aquí podemos escanear los detalles laterales y
hay otra sección como esta. Por ahora, esos
no son elementos importantes. En lecciones futuras,
aprenderá más sobre estos ajustes y cómo anular esos
ajustes si lo
desea, puede pasar por el panel de WordPress y encontrar más sobre el tablero. Espero que tengas un entendimiento
básico de la palabra prensa
y en la siguiente lección, comencemos el diseño.
77. 0105 configuración de elementor pro: Hola a todos. Vamos a utilizar Elementor Pro para diseñar nuestro sitio web personalizado porque Elementor es el mejor creador de sitios
web de WordPress que existe. Elementor tiene una versión pre, pero tiene características limitadas Vamos a revisar los planes de Elementor. Para llegar a esta página, haz clic en la
sección de tinta sobre recursos o descripción, y redirigirás
a esta página. Entonces aquí tenemos
unos planes de precios. El plan de precios recomendado es Advanced solo
website builder. Con este plan de precios, podemos obtener 118 pre
y pro budget, y tiene 86 proyectos, pero con el plan esencial, solo
tenemos 57 proyectos. Además, si salimos al mercado
en la sección de comercio electrónico con Advanced solo
obtendremos pop up Builder. Esta es una característica que
vamos a utilizar, y en la marca esencial, no
obtenemos muchas características. No obstante, si vas a diseñar más de un sitio web, puedes ir al plan Avanzado. O si eres freelancer que construyes sitio web
para tus clientes, puedes adquirir
la versión experta. Al elegir este tipo de plan, podremos reemplazar muchos complementos y complementos y
ayudará a aumentar la carga de
la página en velocidad y optimizar el sitio web en
general. Entonces comencemos a
instalar Elementor. Para ello, iré al
dashboard de nuestro sitio web, y aquí iré a
plugins y haré clic en AdneU. Primero, tenemos que instalar
el elemento pre plugin. Entonces a partir de aquí,
buscaré Elementor. Entonces aquí tenemos elemento
website builder plugin. Está desarrollada por elemento.com, y es compatible con
nuestra versión de Wordpress Así que hago clic en Instalar ahora. Bien. Después hago clic en
Activar. Todo bien. Ahora hago clic en Escape y me saltaré esos pasos
o haré clic en este botón Cerrar
porque vamos a
configurar Elementor Pro usando
el sitio web de Elementor Nuevamente, haz click en la URL de la sección de recursos y te
redirigirás a esta página, y desde aquí,
haré click en el botón Por ahora en Advance
sitio web solo, Plan Builder. Y aquí voy
a tener que llenar los detalles. Entonces haré clic en pagar
ahora y realizaré el pago. Después de que te
hayas
registrado correctamente, puedes descargarlo desde aquí haciendo clic en este botón
Descargar, o puedes ir al panel de
Elementor
agregando ind elemento.com Y cuando lo hagas, verás este tipo
de icono de descarga, y luego verás
elemento enchufar en Descargar, pincha en entonces empezarás la
descarga y ahora tienes el
elemento de plugin. Ahora vamos a configurar con
nuestro sitio web para hacer eso. Iré al panel de
WordPress e iré a plugins y haré clic
en Instalar Plugin. Después hago clic en agregar nuevo plugin. Después hago clic en este botón de
subir plug in. Después hago clic en para apile, y aquí tenemos el
elemento pro enchufado descargado. Entonces es un archivo C. Así que solo lo selecciono
y hago clic en Abrir. Después hago clic en Instalar ahora. Tardará unos
minutos en instalarse. Bien. Entonces
verás esta ventana. Entonces a partir de aquí, solo haz clic en
este botón de activar plug in. Y se instalará
con éxito. Entonces aquí está el enchufe de instalación. Ahora hago clic en
conectar y activar. Entonces llegaré a
este tipo de página. Así que aquí hago clic en
activar mi licencia. Bien, elemento pro se activó
con éxito, y ahora podemos usar las
características del elemento pro.
78. Panel de control claro de Wordpress 0106: Hola a todos. En tu panel de
WordPress, verás este tipo de elemento. Para eliminarlos todos, simplemente
puedes dar click sobre
estas opciones de Estren y aquí puedes desmarcarlos el Itab
que no te gusta Así, cuando los desmarques, ya no
verás esas pestañas A en plugins,
iré a Instalar Plugin. Se instala automáticamente caché de velocidad de
la luz en el sitio web. Aquí hay un plugin de caché
de velocidad de la luz que se instaló en mi servidor. Voy a hacer clic en
Desactivar porque por ahora no necesitamos
ningún plugin de caché Yo lo eliminaré. Bien, perfecto. Empecemos a diseñar el
sitio web en la siguiente lección.
79. Tutorial del editor Elementor 0107: Hola a todos. Conozcamos el editor de elementos. Así que vamos a crear una página. Ahora estoy en nuestro panel de control del
sitio web de WordPress, y desde aquí, pasaré el cursor sobre las páginas y haré clic
en Agregar nueva página Y aquí voy a añadir
título como página de sabor. Entonces aquí tenemos un pop
up de plantillas. Lo cerraré, y aquí agregaré página de sabor. Entonces lo que voy a hacer es click en esta edición con botón
de elemento. Cuando haga clic en él, redirigiré
al editor de elementos. Voy a omitir esto por ahora, y aquí está nuestro
editor de elementos, y primero, haré clic en el conjunto de páginas en, y desde el conjunto de páginas en, voy a cambiar el diseño de página
a elemento canvas. Así, cuando hagamos
eso, nos dará una página
en blanco que
podremos usar para diseñar
nuestro sitio web personalizado. En nuestro lado izquierdo, podemos ver los widgets que
podemos usar con elemento pro. Si tienes un elemento
de pre versión, no
podrás acceder a
todos esos widgets. Simplemente puedes arrastrar y soltar cualquiera de esos elementos
en el lienzo. El lienzo es esta área en blanco. Por ahora, voy a cerrar esta pestaña de estructura y si
comprobamos en esta barra superior, podemos ver en el lado izquierdo, tenemos lado establecido en icono, así que vamos a dar clic en yo clic en él, iremos a la configuración lateral. En esta configuración lateral, podemos cambiar o configurar las opciones de
nuestro sitio web principal como ejemplo, si hago clic en el diseño y actualmente el ancho del contenido del tamaño
del escritorio es 1140 Si cambiamos esto a 101,060, afectará a
todo el sitio web, pero lo mantendré Y si queremos agregar relleno
a la parte superior del sitio web, solo
podemos desvincular este valor haciendo clic en
este ícono de cadena, y aquí podemos configurarlo como 60 y luego vamos a hacer clic
en guardar y ahora hago clic en volver a Editor y luego solo arrastremos
y soltamos un titular como este y el
titular caerá como aquí porque
tenemos 60 de relleno superior Entonces, si volvemos a sentarnos y vamos a layouts y
hacemos esto como cero, el encabezado será cero. Ahora voy a hacer clic en Guardar cambios y
volver al editor. Después haciendo click aquí, podemos ver la estructura
del sitio web. Actualmente,
solo tenemos un titular. Entonces aquí podemos agregar nodos, basta con hacer clic en nodos
y luego si
quieres agregar el nodo o
pensaste en una sección, simplemente
puedes seleccionar la sección. En este caso, seleccionaré este titular y aquí
puedo escribir node lie. Esto es para pruebas. Entonces puedo dar click en dejar un nodo y ese nodo
aparecerá aquí. Piensa si trabajas
con el equipo y tienes pocos diseñadores
que trabajen en las páginas. Al agregar este tipo de nodos y cuando tus co-diseñadores
iniciarán sesión en el sitio web y comprobarán la
página y podrán leer esos nodos y entender muy bien
el diseño. Vamos a cerrar esta. Ahora aquí tenemos el nombre de la página. El nombre de la página es página de prueba
y actualmente está en borrador. Si hacemos clic en este botón
publicado, estará disponible en la página web, pero actualmente es modo borrador. Entonces tenemos este icono,
este icono de Jar para acceder a
esta configuración de página. Si haces clic aquí y
cambias los detalles, esto afectará a todo el sitio. Pero si haces clic aquí y
cambias esos detalles, solo afectará
la configuración de la página como lo hice antes al
cambiar el diseño de la página. Entonces tenemos tres puntos de vista. El primero es de escritorio, segundo es tableta y el
tercero es móvil. A modo de ejemplo, si queremos cambiar este
tamaño de texto en el móvil, simplemente
podemos hacer clic
en el texto e ir a Etyle luego
cambiar el tamaño de fuente En realidad, tengo que hacer clic en
este texto así e ir a Etyle y ahora puedo
cambiar su tamaño así Cuando hagamos eso,
sólo afectará en el móvil. Si vamos a la versión de escritorio, el texto será el mismo y es el mismo en
la versión tablet. Versión móvil, cambia
al tamaño que ya configuramos. Ahora vuelvo a la versión
de escritorio. Ahora la parte más importante
es esta sección rara. Como dije antes, podemos usar estas características pro en el elemento pro y
en la versión pre, cosas van a ser bajas vamos eliminar este texto y
vamos a crear la sección. El primero eres tú, tenemos que
añadir el contenedor. Esa es la forma correcta de
crear el sitio web. Voy a dar click en el
contenedor y se agregará así
de este contenedor, podemos ajustar en detalle. Por ahora,
mantengámoslo como predeterminado y luego agregaré
otros elementos para hacer eso, haré clic aquí y luego
agreguemos el titular y también haga clic en este ícono más y agreguemos
editor de texto así. Ahora hago clic en el contenedor y actualmente su dirección
es vertical. Tiene una columna, pero si hacemos clic en horizontal
, cambiará a
la horizontal. Hay muchas opciones que
podemos usar para diseñar
un sitio web perfecto. Y veamos si queremos
cambiar este texto. Podemos dar click en este ícono de lápiz o dar click aquí y dar click en Editar, y luego podemos cambiar
el texto desde aquí. Lo voy a cambiar
como amarillo Palabra. Y luego hago clic en estilo y voy a cambiar este color de
texto a por ahora, cambiémoslo a negro, y cambiaré este
tipo por pines de Grappy Pines es mi fuente favorita, y cambiemos su tamaño a 60. Hagámoslo como 60. Entonces lo cambiaré a medio. Tal vez lo normal se vea
mejor así, y podemos cambiar
la altura de la línea así y establecer la
alineación para colocar. Bien. Ahora por ahora, eliminemos este editor de texto. Simplemente hago clic aquí, y luego solo puedo
presionar el botón Eliminar o simplemente puedo hacer clic derecho y
hacer clic en Eliminar, así. Ahora de nuevo, hago clic en el
contenedor y agreguemos este Mint alturas 600 y la
altura del contenedor se convierten en 600. Después hago clic en este texto
y hagamos un centro de línea así que haga clic aquí y
hagamos que esto justifique el
contenido como centro. Y hagamos esto
como medio para hacer eso. Doy click en este
centro así. Y ahora aquí tenemos dos
líneas. Así que vamos a arreglarlo. Para arreglarlo, iré al
Avance, y de antemano, hemos dicho este
ancho como ancho personalizado, así podemos dar click en default y
hará el ancho completo. Así que hay muchas
cosas que hacer, y en futuras lecciones, usaremos todas
esas cosas y podrás
crear un letrero increíble. Bien. Ahora aquí nuestro
sencillo hola mundo toma y ahora si hago clic en
este icono de panel de altura, podemos ver la vista real y además podemos dar click
aquí para recuperarlo. Y si hago clic en este icono de flecha y hago clic en ver páginas, no
se actualizaba. Vamos a hacer clic en publicar e
intentemos volver a verla. Bien, yo veo esto. Si queremos otra sección, simplemente
podemos dar click aquí y dar click en el contenedor para
aquí así o podemos dar click en este icono
más y dar clic en Plex Box y
seleccionar la estructura. Si quiero agregar cuadrícula de
dos columnas, solo
podemos dar click aquí
y ahora tenemos columna. Entonces podemos hacerlo de forma manual. Como ejemplo, vamos a
conseguir este contenedor, y hago clic aquí. Entonces vamos a Estyle y déjame agregar el tipo de
fondo Así que haz clic en este clásico
y cambiemos el color a este color azul
y hagamos clic en Layout. Desde Layout, estableceré alturas
Mint
hagámoslo como 300. Bien. Y esta estructura es un poco de dolor de cabeza, así que para arreglarla, solo la
voy a poner así y solo la arrastro al sitio
izquierdo y se convertirá en una sección para que podamos verificar
fácilmente la
estructura de nuestro sitio web. Y a partir de aquí, necesitamos agregar este tipo de dos
columnas para hacer eso. Haré clic en este ícono más y solo agregaré un
contenedor como este. Ahora tenemos el contenedor dentro del
contenedor así que hacemos
clic derecho y pulsamos en Dublgate entonces lo que puedo hacer es que puedo hacer clic en
el contenedor principal y cambiarlo de dirección a u horizontal y simplemente
se convierten en dos Y aquí tenemos una
brecha para arreglar esta brecha, voy a cambiar esta brecha a cero, y ahora no tenemos brecha. Así que ahora hago clic aquí para
seleccionar este contenedor. Ve a tyle, haz clic en Clásico
y cambia el color. Vamos a cambiarlo al color
de la pantalla y cambiemos este totyle clics Cambiemos a este color de texto. Elemental Editor es un editor realmente
simple de usar. Así que simplemente hago clic en
publicar o
simplemente podemos hacer clic en este
icono de vista previa para previsualizar los cambios. Podemos hacer clic en este icono o icono de
vista previa y comprobar los cambios de
Elger en las lecciones reales
y futuras, profundizaremos en el editor elemental
y aprenderemos mucho más
80. Página 0108 de elementor que pronto se publicará: Hola a todos. Ahora si el
visitante visita nuestro sitio web, se verá así. Y cuando diseñamos sitios web para nuestros clientes reales
y empresas reales, esta es una muy mala
impresión para la marca. Vamos a crear una
Come InsoonPage y establecer
esa página de Coming Zoon
lanzamos nuestro sitio web Para ello, voy al dashboard
de WordPress
y desde aquí, lo haré sobre el elemento
y hago clic en herramientas. En las herramientas, tenemos una pestaña
llamada Maintainers Mode. Simplemente haga clic en él y actualmente modo de
mantenimiento está
deshabilitado para que podamos hacer clic en este
cuadro Db abajo y configurar entrar pronto hay opción de
mantenimiento. Entonces en la opción de mantenimiento, si agregamos esto, afecta a
los buscadores, y dice que
no se recomienda
usar este modo por
más de un par de días. Así que incluso estás en mantenimiento o creando un
nuevo sitio web, selecciona
siempre la página
próximamente. Entonces puedes cambiar el diseño. Como ejemplo, si vas
a hacer algún mantenimiento, puedes diseñar una plantilla
elemental que tenga detalles sobre
el mantenimiento. Ahora, en quién puede acceder, podemos establecer login, lo que significa quién puede acceder
al panel de WordPress. Si lo configuramos como iniciado sesión, cualquiera puede iniciar sesión en el panel de prensa de
acuerdo con los roles que tenga. Pero si pincha en custom, aquí tenemos opción de
elegir rollos. Si solo seleccionamos el rol de
administrador, solo los administradores pueden iniciar sesión
en el panel de WordPress. Para esta autopista sealt iniciar sesión. Ahora aquí podemos elegir plantilla. Actualmente no
creamos ninguna plantilla, así que podemos dar click en
crear una ahora, Enlace, simplemente hago clic en ella. Ahora estamos en la sección de plantillas. En esta sección de elemento o
plantilla, podemos diseñar diseños de página y sección luego
podemos guardarlos. El beneficio es que podemos insertar esos diseños de
página y
secciones prediseñados en nuestro diseño de sitio web de
WordPress. Aquí sólo puedo añadir el nombre y dar clic en Editar con
elemento. Hagámoslo. Simplemente agrego el
nombre de la plantilla como próximamente, luego hago clic en Editar
con elemento y se redirigirá al
elemento y desde aquí, voy a dar click en esta
página establecida en y
configuraré el diseño de la página como
elemento o lienzo. Bien. Ahora lo que puedo hacer es que puedo clic en este icono más
y agregar nuevo contenedor, y seleccionaré
el cuadro plex y nuestro diseño de página
será diseño vertical, así que hago clic en este, y luego hago clic
en el contenedor, y aquí agregaré
Min hight test Agreguemos 700 así, luego hago clic en este
ícono más y agreguemos titular. Solo agreguemos el
titular así. Entonces vamos a los estilos, y cambiaré
este color de texto a negro y pongamos la
alineación como centro. Después en la tipografía, hago clic en este icono de lápiz y cambio
la familia de fuentes a Puedes seleccionar cualquier
fuente que te guste, pero me gusta mucho el fpin Entonces agregaré tallas 60, luego agregaré el
a normal así. Entonces bueno y
voy a añadir texto como, haga clic en este icono de lápiz
y haga clic en el contenido, y voy a aquí en el texto como algo nuevo
viene en breve. Presente. Ahora necesito agregar un párrafo
para agregar un párrafo, puedo hacer clic en este botón de elemento de
anuncio, y aquí voy a conseguir un editor de
texto como este. Entonces agregaré texto
como si estuviéramos emocionados lanzar nuestro nuevo diseño de
sitio web solo para ti. Entonces
lo resaltaré y después hago clic en este Toggle Toolbg y
hagamos alinear el centro así Después iré a Estilo, puedo hacer alineación
central desde aquí, y luego cambiaré el color
del texto a negro y volvamos a cambiar la
tipografía a pop ins Un conjunto de tamaños 21. Entonces lo que quiero hacer es poner estos dos textos en el
centro para hacer eso, aislar el contenedor y en la sección de diseño
del contenedor, voy a añadir justificar contenido
como centro así. Entonces quiero logo en
la parte superior para hacer eso, voy a dar click en Agregar
elemento y aquí imagen. Busquemos imagen y aquí
tenemos imagen y la voy a
poner así. Entonces aquí tengo que
añadir el logo de nuestra empresa. Doy click en esta sección de
elegir imagen y aquí recon selecciono archivo, y ahora aquí está el archivo Simplemente hago clic en
él y agregó así, luego me quito este título
y voy a texto ALT. El texto ALD será el logotipo de
JB Family Phenic. Después hago clic en seleccionar Ahora voy a Etyle y
arignment será centro. Eso es un los dos. Hagamos con 30,
30 va a ser bueno. Entonces necesito agregar más espacio
entre esas dos secciones. Para ello, selecciono la imagen, luego hago clic en Avanzado y en avanzado hago clic en este
enlace valor juntos. icono de la cadena lo vincula, entonces lo haré en
el margen inferior como 30 así. Bien. Ahora en la parte inferior aquí, necesito en N un
asistente ahora enlace. Para ello, hago clic
en este icono más y hago clic en titular Vamos a
poner titular así. Entonces cambiemos su
diseño a este diseño. Para ello,
solo intentaré hacer clic en este texto y dar clic en Copiar. Después hago clic aquí
y clic derecho, luego hago clic en pasado el estilo. Cuando pegue este estilo, el estilo que agregamos aquí se
agregará automáticamente al título. Después voy a estilos E
y hago clic en Tipografía, después voy a cambiar su tamaño
para que sea 30 así Entonces agreguemos más tarde
pace en como 0.5, y ahora voy a agregar el texto como necesito un asistente
ahora en realidad, hagamos que el texto sea un poco más pequeño. Hagámoslo 25 y el
ancho será medio. Ahora quiero agregar dos mensajes de texto como llamarnos al y enviarnos un correo electrónico a. Para ello, vamos a
crear un cuadro de iconos. Para ello, hago clic en agregar elemento y buscar
Widget como icono sí, aquí tenemos cuadro de iconos. Yo solo trapo y lo
dejo caer así. Así, entonces entonces
puedo editarlo desde aquí. Entonces primero, cambiemos el ícono. Primero, necesito agregar el ícono
del teléfono para hacer eso. Doy click aquí y
vamos a buscar la línea telefónica. Y agreguemos este
ícono de teléfono y hagamos clic en Insertar. Entonces quieres agregar texto como llámanos a nuestro número de celular. Entonces hagámoslo. Entonces
solo lo agrego así. Entonces no necesito
la descripción. Acabo de quitar la descripción. Entonces cambiemos este
color para cambiar el color, hago clic en tyle y en estilo, clic en el icono y cambio
el color primo a negro, y el tamaño estará bien. Después en el contenido, cambia el
título a negro así. Así podemos cambiar tipo de buharrillo. Podemos cambiar el tipo
de gravedad para que me gusten pop ins y
hagamos que sea como 20. Entonces será normal. Ahora, hagámoslo como medio. Ahora lo que quiero hacer es agregar el envoltorio alrededor de este cuadro de
iconos para hacer eso. En realidad, antes de hacer eso, vamos a crear el segundo icono, que es enviarnos un correo electrónico
y para ello, sólo
puedo hacer clic aquí y duplicar este
duplicado de este elemento. Con razón puede hacer clic en Duplicar. Entonces aquí voy a
cambiar de teléfono Icono a sobre cambiar
a esto así. Entonces lo haré al enviarnos un correo electrónico
a nuestro correo electrónico. Entonces quiero agregar esos
dos en la horizontal, pero actualmente es vertical. Para ello, podemos hacer
clic fácilmente aquí y dar clic
en Nuevo contenedor. Y aquí voy a arrastrar los enfría en icon boox
al contenedor, que pueda hacer lo mismo y
en segundo icono Después selecciono el contenedor y configuro la dirección
como horizontal. Entonces hagamos que justifique centro y voy a cambiar
esta brecha a auto. En realidad, hagámoslo. En realidad, hagámoslo como
espacio alrededor así. Entonces puedo dar click en este cuadro de
iconos y ahora hago clic en Avanzar ir a borde en
borde tenemos sombra de caja. Simplemente hago clic en
este icono de lápiz. Entonces agreguemos detalles. Voy a hacer el desenfoque como 15 y
vamos a hacer spread como cero, y vamos a cambiar el color
un poco más claro. En realidad, no
agreguemos sombra de caja, haga clic en volver a la predeterminada. En lugar de agregar
la sombra de caja, agreguemos borde sólido. Simplemente haga clic en borde y aquí, agreguemos el tamaño como dos. Hagámoslo como uno. Entonces cambiemos el
color del borde a como así. Entonces agreguemos
frontera reducir como 15. Bien. Ahora lo que podemos hacer es en el diseño
avanzado y agregar relleno
agreguemos Padin como 20 Bien. Ahora se
verá así. Entonces se ve bastante increíble, y hagamos lo mismo. Vamos a hacer clic en este cuadro de iconos y podemos simplemente
hacer clic derecho y copiar, luego hacer clic derecho y
pegar estilo como este. Después hago clic en el
contenedor principal y aquí, vamos a
ponerlo vamos a ponerlo como centro, y hagamos columna
gap pas tercero así. Hagamos que esto sea
más llamativo. Para ello, podemos
cambiar los colores. Entonces hago clic aquí y
voy a EtylesOetyle, clic en icono y
da clic en Después hago clic en
este sampler de color. Ahora voy a cambiar este color
a color azul así. En realidad, vamos a conseguir
el
mismo color azul que tenemos el logo. Eso. Voy a añadir el código de color
azul aquí. Es cero, doble, F. Y entonces lo que puedo hacer es hacer clic
derecho copiar y clic
derecho pegar
el estilo así. Ahora se verá
así en el sitio web. Como podemos hacerla centro si
sumamos la medianoche como cero. Entonces ahora se verá
así y podremos agregar más estilos, pero por ahora, esto
va a ser mejor. Por lo que ahora hago clic en publicar. Como podemos cambiar el diseño en la vista
de la tableta y la vista móvil. La vista de tablet está bien, pero en el móvil, hago clic en este móvil, entonces cambiemos este
texto al tamaño del texto será como 38 y el
resto estará bien. El resto del
diseño se verá
así y en el futuro,
aprenderemos más. Pero por ahora, publiquemos
y si hago clic en este yo, puedo comprobarlo en la página web. Se verá así. Ahora lo que voy a hacer
es que voy a ir a la página de
modo mantenimiento y aquí tengo que hacer clic en Guardar
como ahora si
comprobamos, tenemos esta página próximamente, simplemente
hago clic en ella
y da clic a cambios. Entonces, una vez que lo hacemos, es un modo de mantenimiento activado. Entonces voy a copiar la URL del sitio web y vamos a probar con
nueva ventana de incogntor, para que podamos
ver claramente el diseño Entonces se verá así. Así que para acceder al back end, solo
podemos en slash WP admin Entonces aquí podemos agregar
nombre de usuario y contraseña. Después hago clic en Iniciar sesión. Una vez que hago clic en Iniciar sesión, redirijo al panel de
WordPress, y si reviso en la página principal del
sitio web, mientras iniciamos sesión como administrador, veremos el
aspecto real del sitio web en lugar de en una página. Entonces, si necesitamos
editar el come in on, podemos ir a Plantillas y
hacer clic en Guardar plantillas. En Satemdates aquí
tenemos Ven en zona, así puedo dar click en editar
con Elementor y hacer cambios a esta página de Ven en Zona que estamos creados Entonces esto es realmente
básico, pero en el futuro, aprenderemos más y
usaremos
nuestro conocimiento para
crear un aprenderemos más y
usaremos sitio web personalizado que llame la atención y
represente el
valor y la identidad de la marca. Y cuando estés listo para
lanzar el sitio web, puedes eliminar esta página de Coming
Zone haciendo clic aquí, y redirigirás
a la página de herramientas y aquí en la pestaña de modo
mantenimiento, y desde aquí, puedes
ooe el modo para deshabilitar Entonces puedes hacer clic en Guardar cambios cuando
presionas en el Guardar cambios, y vamos a copiar la URL, luego vamos a la ventana de
Incognitor y
presionemos Enter y ya
no vas a ver en realidad, tengo que logo cuando
desconectes y vamos a ir a la página de inicio y ya
no verás la página de
Coming Zone
81. 0109 cómo se hace wordpress y elementor: Hola a todos.
Antes de ir más allá, es importante
entender un poco sobre la base
de los sitios web de WordPress. Esos sitios web se
construyen principalmente utilizando STMS CSS y otras tecnologías web Al trabajar con Elementor, no
necesitamos
dominar STML y CSS, pero deberíamos estar familiarizados con algunos conceptos clave por ejemplo, en TML, encontrarás
elementos como H uno,
dos, tres, párrafo En CSS, escucharás
términos como margin, padding o top margin,
bottom margin,
top padding, bottom
paddin y CSS ID, class Los términos aparecen con frecuencia y saber lo que significan te
ayudará a navegar elemento del mismo, no
necesitas aprender
esos conceptos de A a Et en su lugar solo familiarizarte
con sus nombres y opciones. A medida que trabajas a través de elemento, naturalmente comprenderás
más cómo funcionan. Ahora profundicemos en
algunos de esos conceptos básicos que contienen las
estructuras de lenguaje de marcado HTML o hipertexto que contienen los sitios web Piense en ello como
esqueleto de un sitio web. Por ejemplo, H
uno, H dos, tres, esas son
etiquetas de encabezado que definen la importancia del
titular en una página. H uno suele ser el título principal
mientras que H dos y tres
se utilizan para someter como
ejemplo en elemento de Canvas, hago clic en este texto helloworld, y si reviso la etiqueta HTM ML, es Si queremos, podemos seleccionar H uno, H dos, H tres así. Entonces tenemos aquí P.
P significa párrafo. Esta etiqueta se usa de texto. Como ejemplo, si hacemos clic
aquí y agregamos el editor de texto, vamos a agregarlo así, entonces aquí podemos
verlo como párrafo, lo
que significa que es una etiqueta P. Entonces si queremos agregar
el enlace así,
resaltaré esta parte
y hagamos clic en este enlace de
Inset Edit y agreguemos nuestro enlace como
google.com y presionemos Esta es la etiqueta A. Entonces si cambio este visual a
texto y si lo comprobamos aquí, aquí hay una etiqueta. Cuando alguien haga clic en esta parte, redirigirá al
google.com porque
agregamos este google.com como enlace
de este texto Entonces si queremos poner en
negrita esta parte, solo
puedo resaltarla
y dar click en esta negrita. Entonces el diseño, el texto
cambian y si vamos al texto, conseguimos esta
etiqueta fuerte como esta. No necesitamos
editarlo con el editor SDML. Sólo podemos editarlo visualmente. Lo único que debemos
saber de lo que somos. Si conocemos lo básico de
lo que estamos haciendo, nos ayudará a
dominar el elemento. Entonces debemos considerar
acerca de CSS básico. CSS significa cascada
en la hoja de estilo. Se trata de estilismo E. Controla la
apariencia de tu sitio web, como colores, fuentes, y espaciado, podemos
organizarlos usando CSS. Por lo general, podemos editar
CSS en esta pestaña de Etyle. Como ejemplo, hago clic en este botón de lápiz de
este titular y hago clic en estilo
E y aquí está el CSS o conjunto de estilos que
podemos hacer al texto. A modo de ejemplo, si quiero
cambiar el color, puedo dar click aquí y cambiarlo de color a
algo así, no así, así. Esta es una propiedad CSS de
este texto que acabamos de. Entonces podemos cambiar
la alineación. En este caso, la alineación
no va a cambiar y si queremos, podemos agregar sombra de texto o aquí está la propiedad
de la tipografía Podemos cambiarlo como queramos. Cuando los cambiamos, cambiamos el
estilo CSS del elemento. Entonces
usarás mayormente margin y padding. Elemento o simplificar todos esos conceptos
en entornos visuales. Margen es el espacio I
fuera de un elemento como una brecha entre
titular y párrafo. Padin es el espacio I dentro un elemento entre el
contenido y su borde Elemento o simplifica todos esos conceptos
en estatinas visuales Por un ejemplo, para ajustar el
ispace alrededor de un elemento, podemos ir a pestaña avanzada y aquí tenemos margen y pad Demuestre esto
claramente, crearé una nueva caja flexible y crearé este
contenedor tipo columna directa así. Entonces agreguemos el color
de fondo. Da clic aquí y ve a
Is dies luego haz clic en Clásico y agreguemos
color rojo así. Bien. Entonces duplicaré esto haciendo
click derecho y dando click en duplicado y luego voy a dragar la
soga dentro del
contenedor que creamos. Después haré clic en el icono del lápiz titular
e iré a su estilo. Cambiemos este color de
texto a negro. Además, duplicaré éste y vamos a ponerlo dentro
del contenedor así. Vamos a cambiarlo de color a
algo así como blanco como este. Ahora aquí el texto amarillo está
fuera del contenedor. Para arreglarlo, puedo agregar
margen superior. Vamos a hacerlo. Doy click aquí y ahora estoy en el contenedor y
voy a Avance. Aquí está el margen y Padin. Aquí hago clic en Vincular valor
juntos y lo desvinculo. Básicamente, lo que pasó es que si lo
hago enlace y
agrego diez al principio, se sumará al
resto del diseño. Pero hagámoslo cero y si
solo quiero agregar margen superior, puedo agregarlo así. Margen es el ispace
fuera del elemento. Cuando agrego margen para pasar 60, a 62 fuera
del contenedor, y si lo hago uno a 20, 120 pixel es espacio al
exterior de este contenedor, y si agrego valor menos, es a -120 pixel
a este contenedor Entonces, si quiero agregar ritmo
dentro del contenedor, puedo agregar relleno. Desvincula los valores luego
agregaré relleno superior como 120. Cuando lo agrego, me
sale este tipo de pasos, y si lo hago al fondo, agregará 120 al fondo y podremos hacer lo mismo a la
derecha y así así Hagámoslo como
500 para que podamos
entender fácilmente o podamos
ver visualmente los cambios así. En realidad, es demasiado. Hagamos como 200. 200 es visualmente
atractivo, así. Bien. Ahora si quiero agregar más espacio entre
esos dos textos, puedo dar click sobre este
texto e ir a avanzar, y de antemano, puedo agregar
margen como 60, no arriba. En realidad, tengo que
añadir margen inferior. Entonces si necesito más espacio, puedo agregar más pixel
al fondo así. Puedo dar click en este
párrafo y en margen
superior se encuentran 60 y se agregó a la parte superior
del párrafo. Por lo tanto, tener una comprensión básica
de esos conceptos hará que la resolución de problemas y la
personalización sean mucho más fáciles. Por ejemplo, si un botón
no se alinea como se esperaba, ya
sabe verificar el
margen del conjunto de relleno. Con Nina CSS, podemos entender
con éxito y
crear un sitio web personalizado más fácil.
82. Diseño 0110 01 Sección principal parte 01: Hola a todos. Diseñemos esta sección de héroe con elemento. Entonces esta es una interfaz de usuario Figma que
creamos en el
diseño del sitio web personalizado con la parte Figma. Así que revisa la sección de
recursos para obtener este archivo de la comunidad Figma Entonces vamos a convertir este
diseño de Figma en elemento. Para ello, estoy en el panel
de WordPress. Acabo de pasar las páginas y hago
clic en Nueva página, y editemos como Hero one. Entonces agreguemos el
título de la página como héroe uno. Después sólo voy a dar click
en editar con Elementor. Entonces me sale este mensaje. Yo solo la cierro porque
vamos a diseñar sitio web
personalizado. No necesitamos ninguna plantilla
preconstruida. Bien, ahora estamos en
el editor de elementos. Entonces primero, hago clic en
esta configuración de página y selecciono el diseño de página como
elemento canvas. Así. Bien, ahora tenemos
un lienzo claro. Después primero, veamos el
tamaño de esta sección de héroes. Entonces selecciono la
sección de héroe, y aquí, su ancho es 1440 y
la altura es 700. Entonces ahora hago clic en este ícono más y aquí
voy a configurar flex box. Después seleccionaré esta columna de dirección y obtendré una
sección de columna como esta. Entonces puedo ver la propiedad
de este contenedor, y desde aquí lo haré a
mínima altura como 700 fixel Entonces para el ancho, podemos listar la caja de
ancho de contenido a ancho completo Entonces aquí me pizarra pixel, y el ancho es de 1,400 40. Entonces digamos esto 1,440 Bien. Ahora se ve bien. Entonces, como siguiente paso, tenemos que agregar esta imagen de
fondo. Para agregarlo, seleccionaré la imagen de
fondo desde aquí. Aquí está la imagen de fondo. Después hago clic en este Exportar
y configuro el tipo de archivo como JPG y las tasas
en tamaño como 1.5 X, después hago clic en exportar MD uno y es solo
descargar sin embargo, el recuento de kilobytes
es realmente alto, vamos a reducir el tamaño del archivo Para hacer eso,
iré a tiny png.com, entonces solo lo arrastraré
y soltaré hasta aquí Entonces antes de
optimizarlo, tiene 580 kilobytes, pero ahora solo
tiene 74 Doy clic aquí para descargarlo. Bien ahora lo que
voy a hacer es ir al elemento o editor y
seleccionar
el contenedor para editarlo,
luego ir a Etyle En Etyles
agregaré fondo El tipo de fondo será clásico y aquí tenemos
opción de agregar imagen. Simplemente hago clic en Elegir
imagen y ahora
solo puedo arrastrar y robar esa imagen
a nuestro sitio web así. Después hago clic en Salt. Ahora es aparecer
así y ahora lo que
tenemos que hacer es hacer la opción de imagen de
fondo. Por lo que la
resolución de la imagen de fondo estará llena y la posición
será centro centro, luego el adjunto es scroll, lo que significa que cuando nos
desplazamos por el sitio web, la imagen se desplazará. Pero si lo hacemos como fijo, la imagen no va a Iall
cuando nos desplazamos por el sitio web Hagamos que se desplace. Entonces al repetir, lo
diré como no repetir, entonces el tamaño de la pantalla se cubrirá así y
se verá así. Cuando revisemos la vista previa del
sitio web, se verá así, pero debería cubrir toda
el área. Arreglarlo, hago clic en el
contenedor y voy a maquetación. Entonces cambiemos este
bit al 100% así. Ahora funciona así, entonces vamos a
la configuración lateral,
no a la configuración de página, a
la configuración lateral. Para ir a la configuración lateral, podemos dar click a este conjunto en icono, y aquí voy
a ir a maquetación en maquetación, nosotros 1,140, voy a hacer 1,440 Después haz clic en Guardar
cambios y cierra aquí. Entonces si comprobamos el diseño, se verá así, y si lo comprobamos
en la vista previa, también
se verá así. Bien. Ahora se completa la adición
de la parte de fondo. En realidad, podemos ocultar esta cuadrícula dando click aquí y
podemos ver claramente el diseño ahora lo que tenemos que
hacer es agregar este
logo y el menú. Hay pocas maneras de hacerlo. Entonces vamos con el método
fácil y sencillo porque todavía estamos
aprendiendo sobre el elemento. Para logo, solo
agregaré un texto como este, luego cambiemos
el texto a logo. Ahora vamos a la propiedad
de este logotipo. Aísle el logo, es un texto y fuentes ferroviarias semi bool 35 Agreguemos esos detalles. Doy click en titular y
aquí voy al estilo e, después
lo cambiaré de color a blanco y haré clic en el
icono del lápiz en Tipografía, y aquí voy a cambiar
familia de fuentes a ferrocarril así Entonces con este semi boold
y el tamaño es 35. Veamos si, el tamaño es
35 y el color del campo es blanco. Ya lo hicimos. Bien, ahora tenemos el logo, entonces tenemos que agregar el menú. Entonces en el menú, simplemente
hago clic en Adeleens
y busco Menú Y aquí tenemos
algunos elementos del menú. Así que vamos a conseguir este sencillo ancla de
menú así. Y aquí tenemos que añadir detalles
del menú, actualmente, no
tenemos ningún menú, lo que podemos hacer es
crear un nuevo menú. Antes de crear un nuevo menú, simplemente
haré clic aquí y haré clic en Guardar borrador para
guardar esos cambios. Entonces agreguemos el
menú para agregar el menú, iré al dashboard del sitio web de WordPress
y en WordPress, tenemos opción de agregar
menú en apariencia, pero actualmente no vemos parte
del menú porque
no seleccionamos un tema. Entonces, cuando creamos
sitio web con elemento, se recomienda agregar el tema
Hello elemento. Entonces vamos a agregarlo. Ahora estoy en el panel
de WordPress y apariencia y selecciono tema. Desde aquí, doy clic
en Agregar Nuevo Tema. Y aquí busco elemento Hola. En realidad, aquí tenemos el tema. Vamos a dar clic en
los detalles y vista previa, y aquí tenemos Hello
elemento por elemento, clic en Instalar y
dar clic en Activar. Ahora tenemos este tema, así que no necesitamos este 20251, solo selecciónelo y
haga clic en eliminar Ahora aquí está nuestro tema. Ahora si reviso
la apariencia, podemos ver el enlace del menú. Si hago clic en Menús, redirigiré a
esta página de Menús. Pero actualmente
no tenemos ningún menú. Vamos a crear un nuevo menú. Vamos a nombrarlo como menú Hero, luego hago clic en
crear y no
agrego ninguna
ubicación de display ni ninguna cosa, clic en Crear hombre cuando
diseñamos sitio web real, podemos cubrirlos todos. Bien, ahora se crea el menú. Así que ahora podemos agregar elementos del menú. Actualmente, no tenemos ningún pase
de pago ni categorías. Sólo nosotros podemos agregar enlaces personalizados. Entonces, seleccionemos Enlaces personalizados, y para URL,
agregaré solo etiqueta hash. Y para texto de enlace, podemos copiar esos textos. Primero, copio el inicio y lo
pego así y hago
clic en agregar al menú, y lo acabo de agregar al menú. Entonces vamos a crear el
segundo elemento del menú. Se trata de nosotros, pégalo
así y ponlo así. Entonces agreguemos este elemento del
menú como este y nuestro entrenador y etiqueta C. Ahora nuestro menú está terminado, y hay un montón de cosas
que podemos hacer con menú. A modo de ejemplo, podemos agregar elementos de
submenú como
este, pero por ahora, mantengámoslo sencillo menú como este y en el diseño real de sitios web, iremos al menú. Ahora hago clic en Guardar
Menú. Todo bien. Ahora voy a la sección de
héroes y
guardamos el borrador así
reprimiré esta página Al reprimirlo, aquí está el menú
y el elemento Kamenu, así hago clic en este icono de
lápiz y aquí buscaré
héroe en realidad, no
podemos usar este Lo borraré y el menú
de búsqueda nuevamente menú. Y vamos a conseguir este elemento del menú de
wordpress, y lo arrastraré y
robaré así y aquí podemos seleccionar
el menú así, el menú está seleccionado como este. Entonces agreguemos sus lazos
a este menú para hacer eso. Vayamos aquí y
comprobemos qué tipo de texto utilizan en este elemento del menú
Figma, es abre y semibold 18 Agreguemos esos detalles. Aquí hago clic en estilo y hago clic en tipografía y busco
Open Sans así, entonces el tamaño es 18 y con este semivol así
, luego en transform, tenemos que ponerla en mayúscula porque aquí
está en
mayúsculas y bueno por ahora, entonces cambiemos Bien. Ahora aquí
tenemos logo y menú. Además, tenemos que arreglar
estos detalles de Hor, y para ello, en lo normal, el color del texto es
blanco en hover El color del texto debe
ser este color rojo. Pizarra este texto y
copio el color de relleno. Y ya veo, aquí está, voy a agregar color como rojo y no
necesitamos el puntero, así que simplemente lo voy a quitar color así y
se verá así. Simplemente cambio la opacidad
del color del puntero. En activo, lo
pondré en rojo y en puntero, eliminaré el color del puntero. Bien. Ahora tenemos que encontrar el
relleno entre elementos, así que es de 50 píxeles y
vamos a agregarlo desde aquí. Entonces el espacio entre
será 50 así. Bien. Ahora bien, si
comprobamos el diseño, se verá así y
solucionemos los problemas uno por uno. El primer número es el logotipo y el menú está en la misma línea. Para arreglarlo, iré
al diseño y luego
haga clic en elementos y haga clic en contenedor simplemente haga clic en contenedor y el contenedor
agregado y hago clic aquí, luego estamos en la configuración del
contenedor. Cambiaré el contenedor
a ancho completo
así y de antemano los
haré como cero. Y aquí voy a cambiar el hueco de columna y fila
como cero, así. Entonces lo que voy a hacer es agregar esos logo y agregar este menú
al contenedor así. Entonces aquí está el
contenedor y el logotipo y el elemento del menú está
dentro del contenedor. Entonces selecciono el
contenedor de aquí, luego lo cambiaré de
dicción a horizontal Arreglo así, entonces voy a agregar espacio
entre el logo
estará en el lado izquierdo y luego
estará en el lado derecho. Ahora el segundo número está en el archivo Figma es espacio
en el medio como 140 Si vamos aquí, si hacemos clic en
el diseño y verificamos aquí, el relleno horizontal es 140. Agreguemos
acolchado horizontal a nuestro diseño también. Para ello, seleccionaré
el contenedor principal. Y da clic en Avance. Entonces aquí tenemos relleno. Voy a agregar el relleno derecho como 140, luego el relleno izquierdo
también será 140. Bien. Ahora se ve así. Entonces lo que tenemos que hacer
es en este acolchado superior. El acolchado superior es de 20. Vamos a agregarlo a. Vaya
aquí y haga clic aquí. Entonces agreguemos este top
paddings, 20 así. Bien, hasta ahora tan bien. Ahora bien, si comprobamos
esos dos diseños, son bastante similares.
83. Diseño 0111 01 Sección principal parte 02: Bien, ahora tenemos que
crear esta sección. Entonces comencemos. Voy al diseño, primero, necesitamos agregar un sub titular, así que voy aquí y arrastre y
cuerda un titular como este, haga clic en el titular y
pongamos aquí dentro. Así que vamos dentro de
este contenedor, pero lo necesitamos fuera de
ese contenedor como aquí. Y en realidad, lo
necesitamos aquí abajo. Bien. Ahora vamos a la pestaña de
estilo y cambiemos el tipo. Primero, voy a
convertirlo en un centro de línea. Entonces cambiemos de color a Y. Y aquí, haz doble clic sobre él, y la tipografía es
abierta sans, semble Agreguemos esos detalles. En tipografía, familia de fuentes es abierta sans y W es
semibol y el tamaño es 20 y lo que tenemos aquí tenemos altura de
línea eso es 31 agregar a
la altura de línea será 30,
lo siento, 31 Entonces tenemos que
convertirlo en gas superior, así transformar el gas superior. Ahora agreguemos el resto
del contenido y fijemos
el tejido de alineación. Entonces tenemos que
agregar este titular. Antes de hacer eso, tengo que
cambiar el texto. Voy a copiar este texto
de aquí y venir aquí y dar clic en contenido y cambiar el
contenido así. Entonces sólo duplicaré este titular y vayamos aquí. Entonces aquí voy a copiar esto
y la tipografía está lejos negrita 60 y la altura de la línea
es auto. Vamos a hacerlos. Haga clic en este
icono de lápiz, vaya a azulejo, y la tipografía es
ferrocarril 60 negrita Entonces la altura de la línea es automática. Para hacerlo automático, voy a dar clic aquí y dar
clic a este icono de lápiz. Entonces puedo agregar la
diapositiva de texto Otto así. Bien. Pero no es gas superior, debería ser gas, así que iré a la
transformación y agregaré default. Entonces aquí, ve al contenido
y pega el contenido. En realidad, la
transformación, veamos la transformación la
transformación es el caso del título aquí, vamos a cambiarlo a title
case en tipografía y la transformación se
capitaliza Bien. Ahora lo que tenemos que
añadir es este párrafo. Entonces primero, lo copiaré y
vamos a revisar los detalles. Está abierto sans regular 20, y puedo simplemente duplicar
este de nuevo, luego ponerlo aquí, y agreguemos el
contenido así. Entonces en el StmlTag, este es un párrafo, así que
lo cambiaré a P y ahora,
nuevamente, los valores están
abiertos sans regulares Hagámoslos para
etyle la tipografía es abierta sans 20 y el tamaño es
normal, regular significa normal Y aquí el caso está
por defecto así. Bien, ahora tenemos CTA lo
único que necesitamos para
agregar esto al centro Para agregarlo al centro, intentemos hacer clic en el
contenedor y en el contenedor, hagamos que sea como
justificar centro. Cuando lo haga, venga
al centro, eso no va a funcionar. Ahora lo que podemos hacer es agregar este contenido dentro
del contenedor. Haga clic en el elemento de anuncio y cree
un contenedor como este, luego eliminemos
todos esos detalles y pongamos el margen como
cero y paddin como Entonces pondré todo
este contenido dentro de este
contenedor así. Ahora selecciono este contenedor. Ahora voy a Avance
y aquí en Margen, es como Px o fixel Simplemente hago clic en él y hago
clic en icono de lápiz. Entonces lo que hago es agregar Margen como auto y luego para el fondo, agregar como auto así. Cuando hago eso,
va al centro. Básicamente lo que pasó aquí
es cuando nosotros en la parte superior Otto, vamos a quitar el lema inferior Cuando nosotros en la cima de Otto, el espacio entre
el menú y el CTA se llenó hasta que la sección de
CTA llegó al fondo Y cuando añadimos a Otto al fondo, este contenedor
se llena hacia arriba desde el fondo. Entonces hemos tirado hacia abajo desde arriba y jalamos hacia arriba
desde abajo, por lo que este contenido se convierte en centro. Bien, y a continuación,
tenemos que agregar un botón, tenemos que agregar este
botón. Entonces vamos a agregarlo. Doy click en esto agrego el elemento, y aqui busco boton, y aqui tenemos
mucho boton, pero actualmente, vamos a conseguir este sencillo boton
y ponlo aqui. Después hago clic en
este icono de lápiz, y aquí primero,
cambiemos el texto. Vamos a copiar este texto, y las propiedades del texto
son abiertas y sembol Agreguemos el texto aquí, y actualmente el link es hash tag porque
no tenemos Link, luego hago click en Estyle y en Estyle
en tipografía, familia de fuentes es
Open Sans 20 y
déjame ver
el resto de los
detalles sembl semi negrita,
y luego la y Bien. Ahora tenemos que cambiar
el color de fondo, así que pizarra el fondo y copiar el color, luego ven aquí. Y vamos a averiguar
el color de fondo. ¿Dónde está el color de fondo? Bien. En sombra de texto, tenemos color como verde, pero lo hacemos rojo, y aquí, agreguemos
toma color como blanco, y en, agreguemos
color como negro. W sobre el texto estar de vuelta. Y por ahora,
mantengámoslo así. Entonces lo que tenemos que
hacer es agregar el espacio entre el texto y el
borde del botón. Son 16 y aquí tenemos 20. Es acolchado de los 16 como superior e inferior y 20
como izquierda y derecha. Entonces hagámoslo también. Simplemente haga clic aquí y hagamos Vamos a desvincular
el valor juntos, y hagamos
relleno superior como no 60, 16,
derecha, 20, abajo, 16, y derecha 20, así Entonces pongamos la
posición como centro Bien. Ahora se ve bien. Entonces los artículos están demasiado apretados, así que tenemos que agregar pad
antes de agregar el pad adentro. Veamos si el botón
tiene esquina redondeada. Vamos a revisar el botón. En realidad, este botón tiene
cero como radio de esquina, así que no necesitamos
agregar ningún radio de esquina, y veamos el
ítem entre el tamaño, es 15 y en el
botón del botón, es 20, y el
resto son 15. Por lo que actualmente este
es un contenedor. Dentro de este contenedor, tenemos
los titulares y el botón. Entonces en diseño, solo dejo que
el contenedor y el diseño. Establezca la fila de huecos como 15, y solo agregue 15 como
el tamaño intermedio. Y aquí, botón es 220, así que tenemos que sumar otros cinco. Para agregar otros cinco, hago clic en el botón y voy a Avance y hago clic en valor de
tinta juntos, y en la parte superior, agrego cinco, y solo tiene 220 y otro ítem tiene
entre tamaño como 15. Bien, hasta ahora tan bien. Y vamos a verlo en los anuncios de
diseño completos se ven así. Y si vemos el diseño de Figma, vamos a revisarlo en modo vista
y se ve así Está en el
sitio web real y podemos hacer clic en esta vista previa cambia
y abrirla en Nueva Ventana, y se ve así
en el sitio web, y este es el diseño de Figma Lo único en el diseño de Figma, la página principal es roja, pero aquí el enlace del menú de
inicio de la página principal es de color blanco Para arreglarlo, tengo que
agregar este hogar hombres como esta página actual
ya que si vamos
a vamos a ir al
diseño y dar clic aquí, luego dar clic en estilo para
comprobar el estilo del menú y en Acto
activo significa
la página seleccionada o activa significa la página actual. El color actual del
texto de la página es rojo, pero aquí solo agregamos URL de Dum, solo
estamos en el hashtag. Así que agreguemos la URL de la página de campo. Así que solo voy al panel de
WordPress, y aquí, vamos a la
apariencia y Menús. En Menús, tenemos este Menú Hero
one y en la página principal, solo en Enlace personalizado. Pero en las páginas, hago clic en E. Así que la página aún no se
muestra para arreglarla, tengo que publicar
esta sección de héroe. Vamos a hacer clic en publicar y Vivir aquí
se publicó la página, y volvamos
a ir al tablero
e ir a la apariencia lo siento, no a la apariencia. ' s menús de
apariencia en los menús aquí en las páginas, hago clic en VUL y aquí
nuestra página Héroe uno Solo lo reviso y hago clic en agregar al Menú y acaba de agregarlo, así que lo voy a poner como aquí, luego elimino este enlace de la
página principal y aquí, da
clic aquí y Leg renombra a
este Héroe uno a casa. Haga clic en Guardar Menú. Y revisemos la página ahora, haga clic en el icono para previsualizarla, y ahora muestra el enlace activo porque ahora estamos en
la página Hero one, y solo agregamos Hero una página como la
página principal de este menú. Bien, continuemos con el
siguiente diseño de la sección de héroes, y si tuviste alguna
duda o algún problema, serás claramente entendido cuando practiques
con las próximas lecciones.
84. 0112 0111 diseño 01 sección principal, parte 03: Hola a todos,
diseñamos con éxito la página de héroe. Ahora arreglemos la capacidad de respuesta móvil
y agreguemos animación Empecemos por optimizar esta sección de héroes
para teléfonos móviles. En elemento de editor, tenemos opción de ver la versión tablet y móvil
del sitio web así. Si vamos a tablet, el diseño está bien, pero el menú no se muestra. Vamos así cuando vayamos a la versión tablet
haciendo clic aquí, nuestro sitio web se verá así, pero podemos
hacerlo mucho mejor. Entonces comencemos a arreglarlos. Por lo que hago clic en el contenedor
principal. Entonces vamos a Avanzar. De antemano, tenemos relleno de
escritura como 140. El problema es que lo mejor
para la versión de escritorio, pero en la tableta
no se ve bien. Hagamos este 60 así. Pero cuando agrego 60, todo cambió a 60, pero no necesitamos que
todo sea 60. Hago clic en este
valor de enlace juntos, icono y agreguemos el pase superior
20 y el derecho como 60. Entonces también se fue como 60 así, es mucho mejor que antes. Entonces cuando revisamos el
menú, no se muestra. Así que vamos a arreglarlo. Simplemente hago clic en el icono del lápiz de este menú de
WordPress para editarlo. Entonces si
bajo, puedo ver este móvil desplegable. Ahora estamos en la
tableta versión Portrat. Aquí voy a hacer clic completo con
y si lo compruebo ahora, se verá así y
esto es mucho mejor que antes. Entonces lo que podemos hacer es que aquí
tenemos el ícono de la hamburguesa. Entonces aquí, este
icono predeterminado es hamburguesa, pero su color es negro, así que cambiemos el color Para cambiar el color, tenemos que ir a corbatas IE lazos, aquí tenemos botón togal y vamos a cambiar el color del
botón de alternar a blanco Ahora, ahora si lo reviso, es en color blanco y
podemos cambiar el tamaño. Hagámoslo como 36 o 35, y después le hago clic en ella en Ja, vamos a cambiarlo de color
a este color rojo. Doy click en este desenfoque de colores y vamos a conseguir este color
rojo así. Ahora cuando sin embargo se vuelve
roja y aquí está se ve. Ahora aquí podemos cambiar
este color también. Vamos a cambiarlo de
color para hacer eso, hago clic en desplegable en
desplegable en normal, hagamos el color del sabor como negro. Entonces el
color de fondo será blanco, mantengamos estos mismos colores. Entonces para hacer eso, voy a cambiar
el color del texto a blanco. Entonces voy a quitar
el color de fondo, vamos a eliminarlo así. Pero cuando hacemos eso, el
diseño no se ve bien, así que agreguemos el color de fondo como blanco y hagamos el color de
prueba como negro. Sólo en marcha y activo, hagamos prueba de color
como este color rojo. Da click en el muestreador de color
y da click así, luego deja que este color rojo Ahora se ve así. No agreguemos el color
de fondo. Mantengamos el
color de fondo como blanco. Pero tener
color de fondo se ve bien. Hagámoslo como un
color ceniza claro como este. El bueno. Ahora en activo, hagamos el color del enlace
activo
como este color rojo para dar click aquí y
hagámoslo así y ahora bueno. También tenemos que seleccionar el
color de fondo activo como este color ceniza. Hagamos eso también, así. Bien. Ahora podemos agregar relleno
horizontal. Si agrego pading horizontal,
hagámoslo como dos, añadimos relleno al lado
horizontal, y si agrego suma vertical, podemos cambiar el
tamaño entre medias Hagámoslo como 15. Bien, hasta ahora tan bien. Y aquí en la distancia, mantengámoslo a cero. Bien, ahora tenemos menú
perfectamente funcionando, y vamos a ir a esta sección. Entonces aquí, este texto está bien, pero podemos minimizar el tamaño del
texto de este titular. Entonces, hagamos clic en
este icono de lápiz y vayamos al estilo E y aquí
pulsemos en Tipografía, y cambiemos el tamaño del
texto a como 50 Bien, perfecto. Cuando hagamos cambios en la versión de
tablet, no afectará al escritorio. Si hago clic en el escritorio, los estilos de texto son los mismos, y si vamos a la tableta, se cambia porque
lo cambiamos para que quede más claro. Si hago clic en la izquierda aquí, este texto va a la izquierda. Pero en la versión de escritorio,
está en el centro. En versión tablet, está en la izquierda. También cuando vayas a
la versión tablet, verás que puedes cambiar aquí. Aquí, actualmente, está en tableta. Si hago clic aquí,
es ir a Escritorio y cuando lo hagamos desde aquí, eso puedo cambiar. Esto es lo que llamó la capacidad de respuesta
móvil. Ahora estamos bien para irnos. Entonces hago clic en la versión móvil móvil
Patriot aquí, cambiemos esos detalles también. Haga clic en el contenedor. Como podemos cambiar la previsualización
móvil así, pero vamos a mantenerlo así bien, ahora hago clic en el contenedor, y aquí tenemos
los acolchados 60, 60 Hagámoslo como 15. Hago clic en Vincular valor juntos. Puedo quitar el enlace valorado. Entonces voy a agregar top pass 20, entonces estaremos 2020
es un poco más grande. Hagámoslo como
15 y serán 15. A la izquierda serán 15. Bien. Entonces si reviso el
menú, está funcionando perfectamente, entonces tenemos que cambiar
este texto así que pincha sobre este lápiz puede ir a
estilos y en tipografía, hagámoslo como 18, cambie el tamaño a Entonces cambiemos el tamaño del texto de este
título a que sea demasiado pequeño. 45 va a ser perfecto aquí creo que el texto
del párrafo está bien, no
necesitamos
cambiarlo, queremos, podemos simplemente cambiarlo a 18. Pero no es necesario. No obstante,
lo voy a mantener como 18 por ahora y también podemos cambiar
la altura de la línea si queremos vamos a
cambiarlo así. Bien. En realidad,
vamos a establecerlo como 1.5. Bien. Ahora tenemos que cambiar
el tamaño de fuente de este botón, clic en el botón y ir a Iteris y aquí con tipografía, vamos a hacer que sea tamaño de fuente
a no uno, dos, tres Hagámoslo como 16, 16 es. Bien. Ahora solo arreglamos
la versión móvil y ahora
funciona perfectamente en versión. Ahora lo que tenemos que
hacer es agregar animación. Agreguemos animación. Para agregar animación,
hago clic en avanzar y en avanzar
tenemos efectos de movimiento. Yo hago clic en él, y lo haré
del Icroolineffect y mouset por ahora porque esta es
solo una sección Entonces cambiemos la animación de
entrada. Y actualmente
estamos en el menú. Entonces el menú, vamos a hacer el menú como diapositiva
Din derecho así. Entonces agreguemos bajo al efecto de
movimiento como el
DN de deslizamiento, a la izquierda así. Entonces aquí tenemos este subdin de coaching en vivo para
altos achievers, da click en él y ve a Avance luego haz clic en efecto de
movimiento y aquí, vamos a cambiarlo a
Hay muchas animaciones, pero agreguemos algunas de ellas También podemos agregar duración de
animación y agregar
delay a la animación, lo que significa que si agregamos como mil mil
milisegundos media 1 segundo Voy a esperar 1 segundo o mil milisegundos para activar este texto Entonces vayamos a la cabeza
y avancemos el efecto de movimiento. Él deja que esté rebotando, atado va a estar bien. A agreguémoslos al diseño. El swing swing no es
bueno desvanecerse. Pero en mucha animación no
es profesional y afectará la velocidad de
carga del sitio web, pero esto es solo para aprender y divertirse así que agreguemos
esas animaciones. Funda Bien. Ahora haga clic en el cambio de vista previa
veamos el
trabajo de animación. Sí, es trabajo. Y si, así es como
agregamos animación. Por lo que ahora solo tenemos que
hacer clic en Publicar y estará disponible
en la página web en vivo.
85. Diseño 0113 02 Sección principal parte 01: Hola a todos. Ahora es el momento de diseñar
esta sección de héroes. Entonces hagámoslo. Primero, voy al panel de
WordPress. Aquí pongo el cursor sobre esta
nueva y hago clic en la página. Este es un atajo para
crear una nueva página, y aquí voy a añadir
título como héroe dos. Después hago click en esto con
elemento o botón Bien. Ahora aquí tenemos la
página Elementor y ahora damos clic en esta configuración de espacio y aquí cambiamos el diseño de página
a elemento canvas Bien. Ahora tenemos
lienzo limpio y a partir de aquí, primero tenemos que crear
este fondo. Para crear este fondo, tenemos que agregar un contenedor, dar clic aquí y dar clic en cuadro Plex
y dar clic en este contenedor. Entonces veamos con
el ancho es de 1,440, la altura es de 700 Agreguemos esos detalles. En realidad para el ancho, agregaré ancho completo, luego para altura media, agregaré 700 así. Ahora lo que tengo que hacer
es agregar el fondo. Para ello, hago clic
en el estilo I y doy clic en Clásico y aquí
tenemos que añadir la imagen. Vayamos aquí y
ahora aislaremos al BG. Después simplemente hago clic en Exportar
y vamos a hacerlo 1.5, y vamos a hacerlo GPG, luego haga clic en Exportar, grande Ahora vamos a minúsculo
png.com y damos click aquí, luego imagen de trapo,
tiene 707 kilobyte Ahora solo es tener 120 kilobyte. Ahora solo presiono JPG y se descarga
y luego voy aquí, click en esta imagen y
justo y la dejo caer así. Entonces podemos agregar texto antiguo. Agreguemos texto antiguo como 02g. En realidad, este texto antiguo
utilizado con fines SEO o si algo le pasó a esta imagen o esta
imagen no se cargará, este texto ALT se
mostrará en el sitio web. Haré clic en Concealeg y
luego cambiemos la configuración. Por lo que las resoluciones de imagen serán posición
completa
será centro centro, entonces el apego es predeterminado, repetir, no repetir, el
tamaño de la pantalla cubre así. Ahora veamos el diseño. Yo me quedaré así. Ahora lo que tenemos que
hacer es agregar este menú. Antes de agregar el menú, tendremos que agregar margen. Porque si hacemos clic en el
marco en Figma y aquí, es un 140 como relleno
horizontal. Agreguemos, aquí, vamos a avanzar y en margen,
hagámoslo. En realidad, no es
margen, es relleno. El relleno derecho será de 140 y el relleno izquierdo será de 40. Bien. Ahora, agreguemos este logo. El logo es mi finanzas. Simplemente hago clic en él y
aquí están los detalles. Vamos al elemento
y haga clic aquí, luego simplemente arrastre y suelte un titular y
veamos la tipografía Haga clic en el texto y la
tipografía es Georgia regular 45 y el color de
relleno es plano Hagamos esos detalles, haga clic en el titular, haga clic en el estilo, luego
vaya a la tipografía El tipo de letra es Georgia GE OR, aquí tenemos Georgia el
tamaño es 45 y el ancho es, veamos de nuevo el ancho con esta marca regular con una normal. Ahora el color del texto es negro. Ahora vamos a copiar estos tanques
así, entonces ven aquí, luego vamos a Contenido, pega ese texto así, y va a cambiar. Si no cambia, simplemente presione
Enter y retire el Enter. Va a cambiar así, entonces lo que tenemos que hacer es que
tenemos en la parte superior sumando como 25. Antes de agregarlo, vamos a crear el menú y el botón de
contactos, luego podemos agregar la parte superior
agregando y otras cosas. Ahora tenemos que crear el menú. Da click aquí y busca menú y vamos a obtener la palabra presione
menu, ponlo así. Ahora lo que tenemos que hacer es hacer
clic en Editar y aquí tenemos el menú Hero one y
tenemos que crear un menú
para este M más fino Hagámoslo primero hago clic
en la pantalla del menú y se redirige a la pantalla de menú y aquí hago clic en.
Crear nuevo menú. Nombremos esto
como menú Hero two, y luego hago clic en. Crear hombres Bien. Ahora selecciono aquí el menú Héroe
dos y hago clic en seleccionar. Entonces aquí podemos agregar los
enlaces primero como la página principal, tenemos que usar esta página de
Hero dos. Para ello, tengo que
publicar esto. Simplemente hago clic en
publicar y ahora voy
al menú y tendremos que
reprimir esta reprimir la página Y aquí tenemos 02, da clic en él y agrégalo a Menú. Después haré clic aquí y cambiaré la
etiqueta de navegación a formulario. Bien, ahora tenemos que
agregar enlace personalizado, como la URL, diré hash tag. Y luego veamos
el elemento del menú, el
primer elemento del menú es servicio,
copia, prestigio,
haga clic en el menú AT. Entonces vamos a comprobar el segundo
su prestigio de ubicación, hash tag a menú luego soplar
en el hashtag a URL y hacer clic en en dos menú
luego una tarea de en un hashtag, haga clic en en a Menú. Bien, nuestro menú está terminado, y verás aquí
hay un botón de contactos. Entonces este es un botón separado, y lo crearemos usando el elemento button y
no incluirá dentro de este menú. Entonces ahora hago clic en
Guardar y voy aquí, entonces tengo que solicitar
el Héroe de dos páginas. Ahora hago clic en el
menú y en el contenido, configuraré el menú
como menú Hero two. Apareció así, entonces lo que tenemos que hacer es
agregar el estilo E, primero, iré a Avance y agregaré
margin y padding como cero. Entonces consigamos el detalle. Primero, tenemos la tipografía
como Vertica 16 regular. Agreguemos esos detalles. Haga clic en Tipografía estyle,
una familia será Vertica. Creo que es Vertica, y la talla es 16 Entonces con esta
media regular regular normal en elemental. Bien. Ahora transformar
volverá a ser superior. Bien, bien. Entonces vamos a
comprobar el tamaño entre medias. El tamaño intermedio es de 25 para
verificar el tamaño intermedio. En Mac, puedes seleccionar
elemento y presionar todo y pasar el cursor sobre el
siguiente elemento así En Windows, se puede hacer lo mismo. Cuando presionas el puedes ver el espaciado o ver el
relleno que tiene. Bien, ahora voy a aquí, entonces hagamos el
espacio entre como 25. Ahora voy a flotar en hover
debería cambiar el color. Entonces el color es negro
y la fuente es negrita. Vamos a tratar de lograrlo. En como el color no es
blanco el color es negro, puntero no
necesitamos los punteros Vamos a balancearnos. El color es negro. Y también en lo normal, tenemos que hacer el
color como negro y encendido. Ahora tenemos problema porque
aquí no tenemos forma de negrita esta fuente
mientras se cierne, así que solo podemos hacerlo desde aquí, como agregar aquí,
pero cuando lo hacemos, afecta al así para arreglarlo, tenemos que agregar CSS personalizado, hagámoslo después de
completar este diseño
porque es un poco complicado
y sigamos diseñando, el resto de la web Ahora lo que tenemos que
hacer es agregar esto a la línea horizontal o a
una sola línea para hacer eso, voy a dar click aquí y a
un contenedor como este. Entonces vayamos al contenedor. Voy a poner el contenedor
a lleno con esto. Después por adelantado, vamos a quitar
el margen y el relleno. Entonces solo los pondré
dentro de este contenedor. Ahora está encendido dentro del contenedor y da click
en el contenedor, ir a layout y dar
click en dirección como raw horizontal así
y se ve bastante bien, entonces tenemos que
agregar un botón aquí. Para agregar el botón, haga clic aquí. Botón de búsqueda. Bien, aquí tenemos
muchos botones, pero solo necesitamos un
botón sencillo como este, ponlo aquí. No el exterior del contenedor
en el interior. Sí, podemos agregarlo
desde aquí así. Bien. Ahora tenemos que cambiar
el estilo de este botón. Averiguemos el estilo
actual, da clic en el botón Y aquí tenemos radio de
esquina como 60. Hagámoslo 60 y
el color es negro. Vamos a hacerlos primero y aquí
voy al estilo e y al radio
del borde, lo
hago como 60 y
el color es negro. Aquí, el color es
negro y cuál es el texto que el texto nos puede copiar. Y ven aquí y ve al contenido. Y aquí, cambia da clic aquí para contactarnos e ir
a Estyle En Etyle, podemos cambiar la Entonces veamos la tipografía. La tipografía es
Vertica regular 16. Entonces, hagámoslo. Aquí, familias de
fuentes Vertica 16 Normal y está en mayúsculas. Hagamos que
transforme mayúsculas. Ahora lo que tenemos que
hacer es agregar relleno, clic en el texto y presionar Alt. Cuando presionas viejo, puedes
ver el relleno superior e inferior como 16 y los
padns izquierdo y derecho como 37. Hagámoslo. Ir a avanzar en adelantar
el margen y arriba como 16, no aquí. Lo siento, aquí no. Sólo hazlo como es. Yo sólo voy al estilo. En realidad,
hagamos que transforme mayúsculas y está
aquí, está aquí. El patrón superior es 16 y
el patrón derecho es 16, patrón
derecho es 37 37, inferior 16, 37 como el izquierdo. Ahora tenemos
el botón perfecto y cambiemos detalles
del hover en el cambio
normal al pasar el cursor estacionario, cambiemos el color del texto a negro y el color al blanco así Se ve bien. Ahora lo que tenemos que
hacer es agregar un relleno. Comprobemos el relleno. Aquí, selecciona todas esas cosas. Entonces veamos el
acolchado de 25 años, agreguemos el relleno superior
o el margen superior como 25. Seleccionemos primero el
contenedor y luego aquí vamos al margen superior
como 25. Todo bien. Ahora lo que podemos hacer es que podemos
ir a sentar y aquí podemos establecer alinear elementos al centro y
hacer todo el centro de masa. Bien. Ahora en la siguiente lección, agreguemos el
texto activo en negrita. Entonces para hacer eso,
tendremos que usar CSS, y es bastante fácil. Hagámoslo.
86. Diseño 0114 sección principal parte 02: Bien, ahora vamos a continuar. Si hago clic aquí y
reviso el diseño, se verá así, pero lo necesitamos perfectamente
alineado para hacer eso,
voy a hacer clic en el
contenedor y en contenedor, justificar el contenido
será espacio parejo. Entonces si lo vuelvo a verificar, se verá perfectamente bien. Bien. Ahora a continuación,
tenemos que crear esta sección de CTa y
esta imagen para hacer eso, voy al nuevo contenedor, así que vamos a dar click aquí
y contenedor, vamos a agregarlo así, y luego pongámoslo Pongámoslo abajo
aquí así. Aquí no.
Hagámoslo aquí, bien. Ahora está aquí, entonces iré a
Avanzar y quitaré
las cosas de diseño. Hagamos la brecha a cero. Y primero, tenemos que crear este subtitular
párrafo titular y el botón. Para ello, vendré
aquí y haré clic en agregar elemento, luego agregaré el titular. Agreguemos esos detalles. Primero tenemos bienvenida
a mis finanzas. Vamos a copiarlo así. Después ve al estilo. El color era negro. Y veamos la tipografía
Georgia, regular 55. Let's make is 55 fonts, familia de
fuentes es God. Y cuál es la forma en que el
peso es normal regular. Bien, aquí tenemos un problema en versión pequeña del escritorio. Entonces vamos a arreglarlo antes avanzar para
arreglarlo, qué podemos hacer. Vamos a hacer clic aquí y vamos a
eliminar los huecos como cero, y creo que está bien
desde aquí y vamos comprobar su tamaño así y
sí, encaja perfectamente. Bien. Ahora
continuemos con el trabajo, y aquí agrego el titular, entonces tenemos que agregar
este párrafo para el
subBDingT hacer eso, solo
voy a este párrafo para el
subBDingT hacer eso, duplicar esta parte, y agreguemos los tanques,
y un estilo, tenemos
Vatica regular, Aquí, Vatica 25 regular. Bien. Ahora, entonces tenemos que
añadir esos dos botones. Entonces antes de agregar el botón, vamos a comprobar el tamaño
inbteen. Son 20. Hagamos esto
entre tallas. Da click en el contenedor y aquí el tamaño de la fila
será de dos 21. Hago clic en Vincular valor
juntos así, entonces hagámoslo 20. Ahora, agreguemos el botón. En realidad, podemos
obtener este botón, pero vamos a
crearlo desde cero. Busco botón, luego lo
pego así. Entonces averiguaremos los detalles. Aquí, el texto es hel
vaticargular, 20, y entre tamaños
18, 18, 35, 35 Vamos a hacerlo. Primero, vamos a copiar el luego ir al estilo en estilo, tipografía, es 20, Vertica ¿Es 20? Sí, son
20 y es regular. Después transformo gas Ava entonces si voy al
diseño Figma y presiono Alt, obtendremos 18 como margen
superior e inferior
o relleno inferior, luego 35 como relleno izquierdo
y derecho. Agreguemos esos
detalles. Aquí no. Seguro en estilo e, el acolchado será
para bolígrafo Moten como 18, justo como 35, 18, 35 Ahora las
esquinas redondeadas serán 60. El radio del agua será de 60 y
el color es de color negro. Este color será negro
y en nuestro vamos a cambiar el color del texto a negro y el
color de fondo a blanco así. Bien, bien. Ahora lo que tengo que hacer es que tengo que crear este botón de
aprender más. Vamos a hacerlo. Primero copio
este aprender más texto. Entonces podemos simplemente Dubligate
este botón así correctamente, clic en Condo bligate y
aquí voy a cambiar el texto para aprender más e ir al estilo en estilo E,
voy
a cambiar este color a
0% de visibilidad y cambiar
el color del texto Después tendré que agregar el
borde para agregar el borde, voy a dar click en tipo de
borde sólido. Y veamos el tamaño del
borde aquí, así que el tamaño del borde es uno. Hagámoslo como
frontera será uno. Bien. Ahora si
comprobamos el diseño, se verá así, y ahora tenemos que
hacer línea horizontal. Para ello, tenemos que crear nuevo contenedor y
ponerlo así. Entonces agreguemos los
dos botones a este contenedor así y
está dentro del contenedor, y hagamos clic en el
contenedor y cambiemos la dirección a horizontal. En realidad, tenemos que cambiar la posición del botón así. Bien. Y veamos
el tamaño intermedio, haga clic en el botón,
presione todo. Son 20. Creo que
ya, son 20. A ver. Sí, son 20. Vamos a sumar el hueco de
columna más dos. Bien. Bien. Hasta el momento tan bueno. Ahora lo que tenemos que hacer
es ir al diseño. Habrá que agregar
algo de espacio aquí. El espacio debe ser
30 actualmente es 220, así que hago clic aquí y voy
a no estilo de antemano. Voy a añadir margen como margen
superior como diez. Sí. Cuando sumemos el diez, obtendremos espaciado. Ahora tengo que en realidad, tenemos que poner este contenedor dentro del
contenedor principal así. Ahora lo que tenemos que hacer
es simplemente dar clic aquí y ahora vamos a ir a
avanzar y en margen, voy a dar click a este lápiz. Puedo arriba será auto y la parte inferior será
auto así. Simplemente se ha convertido en centro y
se verá así. Aquí está el tema. Cuando
tratamos de incrementar el diseño, éste, ven aquí. Este no vino aquí, así que ese es el tema. Veamos qué pasó
aquí en este contenedor. Lo que hicimos es agregar el
espacio incluso vamos a eliminar eso. Cuando lo quitamos,
simplemente cambia. En realidad, tenemos que agregar
espacio mordido. Vamos a intentarlo. Sí, tenemos que añadir
espacio bitwen no espacio uniformemente poco espacio entonces se
verá bien y va a funcionar bien Bien. Entonces aquí está
nuestro contenedor principal, y tenemos que agregar imagen aquí, y su dirección es
vertical así, pero necesitamos un contenedor que
tenga dirección horizontal. Para crear ese, simplemente
haré clic en Nuevo contenedor
y agregaré el contenedor. Entonces vamos a nadar todas
esas cosas aquí, que estén llenas con Okay. Ahora voy a establecer la
dirección como horizontal. Entonces lo que puedo hacer es no
lo haré, no está dentro de esto, lo
voy a poner aquí,
entonces no aquí. Aquí, entonces agregaré este contenedor dentro de
ese contenedor. Sólo ponlo así. Bien. Bien. Ahora de nuevo, tenemos que
agregar la función de diseño automático. Tenemos que agregar auto
al margen así, arriba será auto, abajo será auto Bien, ahora podemos agregar imagen. Entonces esto es horizontal, y agreguemos imagen
para agregar imagen, haga clic aquí y busque Imagen y agreguemos
imagen como esta. Bien. Primero vuelve a pasar la imagen
para reprimirla la imagen, voy a dar click sobre esta Esta es la imagen, da click sobre ella, selecciona la imagen, luego da click en Exportar
y la necesitamos en versión
PNG porque esta imagen
no tiene ningún fondo. Después hago clic en el botón Exportar
y acaba de descargarse. Después ve a Tiny PNG. Y agréguelo hasta aquí, optimice, haga clic en
PNG para descargarlo, luego venga aquí, haga clic aquí, luego haga clic en la imagen y
agregue la imagen así. Después hago clic en Seleccionar. Bien, la imagen se adapta y voy a cambiar la
resolución de la imagen a plena. Ahora tenemos que fijarlo así. Actualmente la imagen
se ve así, pero no está funcionando con ahora si ves un
diseño de sitio web como este, solo
puedes disminuir esta sección de estructura
y mejorarla. Ahora tenemos que configurar
esta imagen así. Para ello, daré
click en la imagen y luego iré a avanzar por adelantado
en tamaño, configuraré como crecer. Ahora se hace más grande, entonces lo que tengo que
hacer es ponerlo en la esquina en el
diseño Figma. Hagámoslo. Para hacer eso, lo haré
a diferencia del valor del margen y agregaré
margin lef así Sin margen lef, tenemos que agregar margen derecho y
debería ser menos, lo que significa que esta
parte se enviará ignorando el relleno del
contenedor principal Vamos bien. Cuando hago más de lo que
necesitamos, vemos este tipo de barra
ICO para quitarla, solo
podemos pisarla así. Es menos 140 y ahora
si comprobamos el diseño, se verá así. Mi pantalla es de 24 pulgadas. Por eso este diseño
se ve así. Pero si lo comprobamos en un dispositivo
pequeño como laptop, computadora escritorio u otro dispositivo, se verá así. Ahora lo que voy a hacer
es agregar en la siguiente parte. Entonces robot está terminado, y ahora tenemos que
crear esta parte. Lo selecciono y su altura
es de 270. Entonces hagámoslo. Haga clic aquí. Entonces hago clic en esto más segundo para crear
un nuevo contenedor, y el contenedor
será columna directa, y aquí
lo pondré a ancho completo, entonces voy a quitar todas las cosas
innecesarias como esta, entonces la altura de Mint será 270. Bien, ahora tenemos
otro problema. Pensemos que agregamos el
titular a este contenedor. Me instalé en la esquina superior izquierda, pero aquí tenemos un margen 140
o 140 pad. Para agregarlo, tengo que dar click aquí e ir a Avance y después
tendré que agregar padin derecho como 140 y padin izquierdo como Ahora está hecho, entonces
lo que tengo que
hacer es hacer que este
contenido se centre. Haga clic en el contenedor y
vaya al layout en layout, voy a hacer que justifique
el centro de contenido, así. Entonces hagamos la dirección
tan horizontal así. Nuevamente, vamos a convertirlo en
un centro de línea de pedido, y aquí, ponlo estrella,
justifique estrella de contenido. Bien. Ahora aquí, vamos a
revisar este texto. Este texto es Georgia
regular 45, en realidad, podemos obtener el estilo de
esta sección de héroes para hacer eso, voy a hacer clic derecho aquí, copiar, luego ven aquí,
click derecho pega este estilo. Ahora tendré que cambiar este tamaño de
fuente a 45 así. Ahora lo que puedo hacer es
agregar este contenido, simplemente copiarlo e ir al contenido
y pegarlo así. Entonces aquí tenemos que agregarlo
en dos líneas para hacer eso,
voy a agregar paréntesis R mean break, luego cierro el Bagot y ahora lo conseguimos en dos
líneas, igual que esta Entonces vayamos al Estyle. Vamos a agregar en tipografía. Agreguemos algo de altura de línea
que me gusta. Esto es mejor. Ahora tenemos que sumar
esas tres secciones. Así que vamos a crear éste y
luego podremos duplicarlo. Antes de hacer eso, tenemos que
hacer este color como negro. Veamos el
color es negro, pero no negro oscuro. Entonces copio el
código de color, vengo aquí, vaya a Eastile, haga clic en fondo clásico en
color, pase código de color Después da click aquí, luego
cambia este color a blanco. Bien. Ahora comencemos a
diseñar esas dos secciones. Entonces aquí, hago clic aquí en
el titular así, luego copiemos el contenido. Ahora, vamos a comprobar que la tipografía
es VaticarGular, 65. Vamos a hacerlo. Vamos a hacer clic aquí. Por lo general, tenemos que
agregar el título aquí. Si lo agregamos directamente aquí, obtendremos cosas innecesarias. Así que ahora hago clic aquí
Tipografía Etyle, familia de fuentes,
Heaica 65, 65, W es normal media normal. Bien. Ahora el color es por qué y ahora tenemos que
sumar esta experiencia. Así hel VaticarGular 25. Podemos simplemente duplicar
esta parte así, luego hacer clic aquí y
agregar el texto aquí. Entonces cambiemos
este tamaño a 25. Bien. Ahora lo que tenemos que hacer es agregar esta sección
horizontalmente así. Para hacer eso primero, veamos
el artículo invitando a la talla
, son 15. Entonces hagámoslo. Para hacerlo, da clic aquí, da clic en contenedor y pon
un contenedor como este. Entonces pongamos esas cosas dentro de este contenedor así. Sí, está dentro del
contenedor, y aquí, voy a quitar este hueco y
el hueco de fila será de 15 o 20. Volvamos a verlo. Son 15. La brecha es de 15, y debe
ser un centro de líneas de artículos. La dirección es vertical de columna. Bien. Ahora duplicaré
esto por dos veces, y
duplicaré de nuevo. Ahora agreguemos los otros
detalles así. Todo bien. Ahora
tenemos otro problema. Vamos a arreglarlo. Para arreglarlo, aumentemos esta talla de
toma así. Entonces, podemos disminuir este
tamaño para que quepa así. Se lo podemos hacer a éste, dos, y a éste, así. Ahora lo que podemos hacer es
verificar el tamaño intermedio. El tamaño intermedio
es 57, es 57. Agreguemos 57 como
el tamaño intermedio. Para agregarlo, tenemos que agregar esta sección dentro de
otro contenedor. Haga clic aquí y
agreguemos el contenedor. Vamos a esto. Entonces agreguemos esas tres
secciones dentro de ese contenedor. Primero, voy a agregar este, luego este, luego este, pero no le agrego el interior, así que vamos a agregarlo dentro
de este como este, así. Bien, hagamos la
dirección como horizontal. Y aquí, agreguemos tamaños de
columna, 57. Bien. Ahora otra vez, aumentemos esos tamaños de elementos así. Y aquí, hagamos
la misma nota aquí, seleccionemos esta y
ponla así ko y bien. Ahora vamos a seleccionar
el contenedor principal y dar clic en el espacio alrededor o simplemente
podemos agregar el
tamaño de columna como 57, así, 57. Ahora lo que tenemos que hacer es comprobar
el tamaño entre aquí, lo
tenemos como 116, pero aquí lo que
podemos hacer es dar click en este contenedor principal e
ir a layout en layout, podemos dar click en Ipace entre Si lo comprobamos en el diseño, se verá así. Cuando lo comparamos con
el diseño original, se ve muy bien. Cosa aquí tenemos una pequeña línea. Entonces intentemos
arreglarlo para arreglarlo, voy a la
sección de héroes y hago clic aquí. Entonces en la parte inferior el margen
inferior de la imagen se dejará
caer así. Ahora bien, debería ser arreglado.
A ver, a ver. Sí, está arreglado, y aquí vamos. Aquí está el diseño final del
sitio web. En realidad, aquí tenemos que poner espacio entre,
entonces se verá.
87. Menú destacado del héroe del diseño 2 parte 2: Hola a todos. Ahora
necesitamos hacer que estos elementos del menú sean atrevidos en Su etapa
y etapa activa. Actualmente, esta casa está activa, lo que significa que esta página de inicio es la página en la que nos
encontramos actualmente. Entonces cuando estamos aquí, tenemos que hacer que este elemento del
menú sea negrita. Porque en nuestro
diseño Figma, aquí es audaz. Vamos a agregar esa funcionalidad. Para ello, voy a dar click
aquí para editar el menú. Entonces iré a Avanzar. En Advance, tenemos un
lugar para agregar CSS personalizado. No vamos a hablar
mucho más sobre CSS, pero puedes aprender
más sobre CSS viendo Tuttoris en wscos.com, y aquí vamos a agregar Si voy al diseño
y hago clic derecho sobre el elemento del menú y hago
clic en Inspec y verás este
tipo de etiquetas STM y ya
conoces
elemento o usas CSS para darle
estilo al sitio web y CSS como una característica o
elemento llamado clase si la URL de la página actual es igual
al elemento de menú en elemento, es un elemento elemento activo Actualmente estamos en
ATAC A mean Ankatag. Cuando lo destaco, se puede ver la página principal resaltada. Si hago clic aquí y
reviso este elemento del menú de servicio
o servicio Ankatag, verás la clase, pero en esa clase, no
verás
elemento elemento clase activa Ahora solo lo copio
y luego voy aquí,
presiono punto y pego el
elemento elemento activo clase CSS. Y aquí voy a añadir fuente con. Este es un estilo CSS para hacer
fuente con y en este caso, debería ser negrita así. Entonces agreguemos como
importante, luego publiquelo. Ahora funciona. ¿Qué hizo esta
importante etiqueta? En su mayoría anulan el código CSS
actual. Ahora una parte está hecha, entonces tenemos que hacer que este
ítem esté activo cuando nosotros oh él. Para ello, voy a dar clic en este pequeño icono y dar
clic en uno de estos elementos, y ahora tengo que encontrar la lista
ULL significa desordenada, y este menú es una lista, y aquí tenemos este ID, pero podemos agregar ID desde aquí Agreguemos una identificación clara. Para ello en el menú
de edición wordpress avance, iré a poner. En el diseño, podemos
agregar las clases CSS ID o CSS y solo agreguemos
el CSS ID como menú Hero, luego lo copiaré e iré
a Advance e iré a
CSS personalizado y agreguemos como Herou
y AA mean anchor tag, y aquí agregamos H mean sin embargo, y cómo el
tweet de la fuente estará en negrita Yo sólo lo copio y lo
pego así. Ahora bien si lo reviso en el diseño, debería funcionar
aquí deberíamos agregar etiqueta
hash no punto punto para clase
CSS y
hashtag para CSS ID. Puedes consultar esos Eta en la página web de la Escuela
W tres. Lo publico y vamos
al diseño y
se verá así. Bien, ahora creamos con éxito esa parte y nos
vemos en la siguiente lección.
88. Desafío de diseño 0115 hero 3: Convertimos con éxito esos dos diseños de héroes
pigma en Elemento, y aquí está tu reto Ahora es el momento de convertir este
diseño Figma hero three en un Elemento Así que solo juega
con y trata de hacerlo. Y en la siguiente lección, yo también lo haré.
89. 0116 héroe del diseño 3 parte 01: Hola a todos. Ahora tenemos que
diseñar este Héroe tres. Entonces comencémoslo. Aquí estoy en el sitio web, y aquí, voy a ir a la
página y dar clic en Agregar Nuevo. Entonces aquí voy a añadir
el título como 03. Después haga clic en Editar con
elemento de un segundo. Se redirigirá
al elemento o editor y el editor se cargó, luego hago clic en configuración de página
y en configuración de página, simplemente
voy a cambiar el
diseño de página a elemento o
ya puedo empezar a diseñar primero tengo que encontrar la
altura de esta sección. La altura es 223, vamos a crear una caja plex y su dirección será
dirección columna así. Entonces aquí, da clic aquí, vaya a la sección
de diseño del contenedor. Y aquí el tamaño
será de menta dos, dos, tres. Bien. Ahora voy a hacer que
la dirección sea como horizontal. Entonces de antemano, tengo que
agregar este relleno. El paddin es 140,
como dije antes, cuando haces clic en una sección
en Figma y presionas Alt, puedes ver el espacio
entre el ítem Aquí tenemos 140. Vamos a agregarlo aquí. El derecho será 140 y
el izquierdo será 140. Bien. Ahora como primer paso, tenemos que añadir este logo. Seleccione la imagen del logotipo en la Figma y haga clic
en Exportar imagen Hagámoslo 1.5 a. ahora voy a ir aquí. Y haga clic en este icono de elemento, y aquí, agreguemos
la imagen así. Después haz clic aquí y arrastra y roban el logo así, selecciona
y establece el tamaño como completo. Bien, el logo está
borroso para arreglarlo, vamos a ir aquí y vamos a
hacerlo tamaño como dos X, y vamos a probar K. Entonces
vamos a reemplazar este logo Haga clic aquí, haga clic aquí, luego suba este logotipo
así y haga clic en Ocultar en realidad este logotipo se vuelve
más grande que la sección Por lo que esta sección
min altura es 223, pero ahora su altura
es más que eso. Vamos a hacer clic en el
logotipo y pasemos al estilo. Entonces vamos a la altura como 2023 entonces
hagámoslo 100 plus así. Ahora tenemos que agregar este
menú para agregar este menú, tenemos que crear un menú primero, clic aquí y buscar menú en la barra de búsqueda y
obtener la palabra presione menú. Ponlo aquí. Ahora aquí tenemos que agregar
el menú para hacer eso, voy a dar clic en Menú creen
aquí vamos a crear un nuevo menú, clic en crear un menú,
crear un nuevo hombre. Entonces agreguemos esos detalles. Primero, tenemos que publicar esta página porque
como página de inicio, tenemos que poner a este
héroe en tres páginas. Bien, ahora está
publicado y aquí tengo que reprimir de nuevo
esta página. Entonces agreguemos el texto
como menú Hero three. Después haga clic en Crear Menú Bien. Y aquí tenemos a
Hero de tres páginas, clic en ella y da clic en En dos Menú y da click
aquí para expandirla, luego cambiar esta etiqueta de
navegación a y luego no tenemos
el resto del enlace, así que vamos a crear un enlace personalizado como la URL en hashtag
y en el texto del enlace, agreguemos esas tomas
primero sobre turnos segundo servicio eléctrico
en URL como hashtag, tercero, contacto,
casting y hashtag, haz clic en agregar a Menú. Bien, ahora hago clic en
Guardar clic en Savin. Y ahora si voy al Héroe tres y actualmente
no veo el menú. Entonces si reprimo esta
página y ahora da clic en el menú y aquí ahora
tenemos tercer menú, 03 menú Entonces iré a E tyle y
tenemos que cambiar el estilo. Entonces primero, veamos el texto. Aquí la tipografía
es cabina, regular 18. Primero agreguemos esos detalles tipografía el
tamaño de la cabina es regular, mermal
regular y es 18,
y está en conjetura superior Transformar será conjetura superior. Entonces veamos el color, el color es negro. Aquí está el color negro. El color es negro. Entonces vamos a verificar el
espacio entre seleccionar uno de menú y presionar
verificar su tamaño, son 50 pixeles, pegar
entre será 50. Bien, y ahora tenemos que
cambiar la configuración de Ha. En hover, cambiará el color a este color verde
oscuro, y tendremos un subrayado Da click aquí y pega
el color así, y aquí tenemos el subrayado, haz clic en pegarlo color, Bien, y en activo,
automáticamente obtendremos el color hover activo así que no necesitamos hacer ninguna Bien, entonces lo que tenemos que hacer
es hacer este centro Bien, para que sea centro, voy a dar clic en él e ir a
Contenido y no a contenido. Vayamos a avanzar en Avance. Hagamos clic en alinear uno mismo, y solo alinee el centro Simplemente fue al centro. Y ahora lo que tenemos que
hacer es agregar este ícono de llamada. Primero, vamos a crear un contenedor y dentro de ese contenedor, podemos crear esta sección. Bien, haz clic aquí y agrega
un contenedor es más grande, así que vamos a disminuir su
tamaño un poco así. Ahora, hagámoslo
así por ahora
y podemos cambiarlo
más tarde y dar click aquí. Entonces buscaré cuadro de iconos. En realidad, no
necesitamos un contenedor. Yo sólo lo eliminaré. Solo podemos usar el cuadro de iconos
de búsqueda de iconos. Y aquí tenemos la caja de iconos, ponla así. Seguramente, debería ser después
del menú de tres así, entonces lo que puedo hacer es
primero, voy a dar click aquí. Este icono es un ícono de teléfono. Busquemos teléfono
y seleccionemos el teléfono, puedo dar click en Insertar, y aquí tenemos que
cambiar el contenido. Copiemos el
contenido de aquí y ahora peguémoslo en el nivel
luego copiemos este número, luego lo peguemos en
la descripción. Hasta el momento tan bueno. Y entonces lo que puedo hacer es
aquí en la vista, iré al estilo E en estilo E. Hagamos que la posición
como derecha así y alineación
vertical
será media así y luego vamos al icono en icono. Hagamos el
color primario como blanco, y tenemos que agregar
el fondo. Entonces vamos el
color primario como el blanco, y luego voy a la
otra vez y en la vista, voy a agregar marco. En realidad, no es
marco debe ser trazo e ir a estilo
y estilo en icono. Agreguemos este color de trazo ya este color
azul copia
el color azul de aquí y el color secundario será Localmente el color primario
será azul y el color secundario es el icono, será blanco. Hagámoslo mejor diseñado
después de que creamos el resto. Entonces tenemos cambiar este
texto a medio cabina, 16.5 y el color es este
azul vamos a hacerlo, voy a ir al contenido sobre contenido El color del título
será este color. Entonces la tipografía
será cabina, perdón, 16.5 y el tamaño es
medio medio medio 500 Bien. Entonces tenemos que
cambiar la descripción. Vamos a revisar los detalles de la
descripción. El color de fondo es
negro y cabina wold 25. Ese fondo está
en blanco, tipografía, cabina 25 wold Bien, hasta ahora
tan Lo que tenemos que hacer es
revisar el relleno. Aquí el relleno
será de 19 por 19. Agreguemos el relleno de iconos
aquí el patrón será 19 y el tamaño del icono es 25 25. Hagámoslo después de que arreglemos
esos tejidos de alineación. Como tenemos que hacer
este centro centro, da clic en él y hacer que
se alinee. Ahora hago clic aquí y voy
a maquetación en maquetación, voy a cambiar este contenido
con ancho completo y luego vamos hacer espacio entre solo
codificamos en el tamaño del sitio web. No es bueno en esta versión
pequeña, vamos a eliminar esta sección de
estructura así y ahora
aquí está la vista. Acabo de publicar
90. 0117 Cómo solucionar el problema de respuesta del escritorio: Verás este tipo
de problema de alineación. Así que vamos a arreglarlo. La mayoría de las veces esto
sucede porque a este contenedor ya le salen huecos. Si hago clic aquí, se mostrará como cero, y si voy a la
configuración lateral y en diseños, también aquí obtenemos huecos. Eliminemos esas
dos brechas a cero. No necesitamos eso y da
clic en guardar cambios, luego ciérrelo y
haga clic en guardar aquí. Parece que no salvó, y vamos a guardarlo. Ahora hago clic en
volver para editar Bien. Ahora lo que tenemos que hacer es
establecer otro espacio innecesario. Aquí, hago clic en este
menú y en este menú, pondré este puntero
con cero y cuando lo haga, el puntero no se mostró, así que hagámoslo como dos. En realidad, vamos a verlo en
el diseño Figma y aquí, vamos a revisar el puntero.
En realidad son dos. Hagámoslo dos, ya es a y luego hagamos padin
horizontal como cero Y cuando lo hacemos instantáneamente, el espaciado se hace más pequeño y hagamos el
relleno vertical como cero, dos. Hagámoslo en realidad. Hagamos el
pading horizontal como dos. Entonces aquí voy a quitar el arreglo de
dos puntos
del espacio entre ellos. Ahora tenemos un diseño claro. Ahora voy a dar click en
publicar y aquí
voy a responsive test
tool.com y desde aquí, podemos comprobar la capacidad de respuesta Doy click en previsualizar
cambios y copiar la URL, solo la parte URL
y la pongo aquí y da clic en verificar en pantalla de tamaño
pequeño, se verá así. Entonces vayamos a la versión
de escritorio más grande. Entonces en tableta pequeña, se verá así. Entonces pasemos a la siguiente
versión y en esta versión, se verá así. Vamos a verlo desde pulgadas. Mide 15.6 pulgadas, así que
se verá así. Al recordar las secciones de héroes
anteriores que
diseñamos, tuvimos el mismo problema. Vamos a esas
secciones de héroes y editarlas. Entonces a SUS páginas. En páginas, abro Hero two, hagamos clic en editar con Elementor y abrirlo
en nueva ventana aquí, abramos esta también. En Hero one, lo
tenemos así. Se pasa principalmente por este menú hago clic aquí y voy a TyleOtyle voy a añadir el puntero con un cero y padin
horizontal como cero Entonces el relleno vertical
también será cero. Hagamos
paddinas verticales por defecto así, entonces se verá así, pero ahora tenemos un problema Esto no está en el centro. Para que sea centro, creo que en este diseño, sí, en el diseño no
está en el centro, se verá
así, y nosotros solo arreglamos ese problema
y luego solo lo publicamos. Entonces vayamos al
Héroe dos en Héroe dos, tendremos el mismo problema. Así que vamos a arreglarlo para dar click aquí
e ir a Its on E times, pointer will be zero, horizontal padding will be zero. Relleno vertical,
mantengámoslo por defecto y ahora se está acercando y ahora es bastante similar
a este diseño. Este fue el tema que
metió con nuestro sitio web. Ahora lo publicaré también.
91. 0118 héroe del diseño 03 parte 2: Vamos a continuar con el trabajo, y simplemente hago clic
en este cuadro de iconos. Y en el diseño Figma, tenemos este borde azul claro, pero en elemento no
tenemos forma de agregarlo Entonces solo tenemos
el color fimary, lo que significa el color de fondo
y el color secundario
como el color del texto Pero no tenemos opción
para agregar color de borde. Entonces para arreglarlo, podemos usar cuadro de imagen. Descarga este icono como imagen. Entonces podemos
agregarlo directamente como imagen. Entonces para hacer eso, voy
a la página del elemento, después hago clic en
este agregar elemento, y aquí
buscaré cuadro de imagen. Aquí tenemos la caja de imagen. Sólo voy a arrastrarlo
y atarlo así. Entonces lo que hago es que solo intento click y dar click en
copiar porque
ya estamos tenemos el estilo E
así podemos pasar directamente ese estilo haciendo
click derecho aquí y dando click
en Estilo de Fase. Bien, ahora agreguemos
esa información. Para agregar esa información, aísle el
cuadro de iconos, vaya al contacto, y aquí copiaré el
título y vendré aquí, luego simplemente pasee el título. Entonces ven aquí y
copia la descripción, y aquí solo pasea la
descripción. Así. Bien. Ahora
tendremos que ir al estilo E y ya está en el medio ahora vamos a
eliminar esta parte, ya no
necesitamos esta parte, así que solo la borro. Bien. Entonces lo que
puedo hacer es que puedo dar click aquí y primero
agreguemos este icono. Seleccione el icono. Aquí tenemos esta
capa panicon y ve aquí, da clic en Exportar y aquí, establece PNG y da clic en
Exportar icono de peón P. Se acaba de exportar. Vamos aquí. Da click aquí y
simplemente arrastraré y robaré
el ícono así. Ahora hago clic en este icono de selección, se agregó así
y de aquí, voy a establecer los tamaños completos y ahora vamos a ir a los
Etyles en Estils Voy a dar click sobre la imagen. Imagen, estableceré el ancho
como 100%, tipo borde ninguno. En realidad,
hagamos el ancho así hasta que no
radice este tamaño Ahora voy a adelantar. Ahora tenemos que alinear esto
para alinear esto, ir al estilo,
en estilo, dar clic en el cuadro, y aquí tenemos el espaciado de
imagen como 15. Hagámoslo cero. Y ahora se ve así y tendremos que
aumentarlo un poco así. Entonces arreglemos esto correctamente. Entonces bandeja de entrada, voy a agregar alineación
vertical como superior, luego se dejará la alineación. Y luego el espaciado de imagen, hagámoslo como veamos el espaciado de la imagen
aquí. También lo es. Vamos a hacerlo. No, es herramienta. Entonces el espaciado de contenido es de diez. Hagámoslo diez. Bien. Entonces vamos
a ir a imagen en imagen, voy a establecer el ancho 100%. Sí, entonces bien aquí y vamos a ir a
avanzar con anticipación. Voy a cambiar esta
costumbre con la predeterminada. Entonces aquí el tamaño
en será cadena. Bien. Ahora voy a hacer clic en
publicar y vamos a actualizar
esta página
para ver la w actual. Por alguna razón
no se muestra correctamente, así que vamos a ajustar esas cosas, y aquí el ancho debería ser 100 fixel así
y vamos a hacerlo Tenemos un problema con este mié, hagámoslo 100
debería ser 100%, y entonces el contenido
es bueno aquí dentro. Me veo bien y el
tamaño de la imagen debe estar lleno. Entonces ir a avanzar en avance, alinearse será centro, que debería ser por defecto
o el cien por ciento realmente lo hacen
devoltear entonces el tamaño Un bien, pero por alguna razón no
se está mostrando correctamente. Entonces, ¿y si cambiamos
el ancho de esto? Cambiemos el ancho de
esta imagen a 50 así. Ahora es mucho mejor. Después iré a avanzar y
estableceré margen y relleno como cero. En un dispositivo más pequeño,
no funciona correctamente. Disminuyamos este
tamaño así aquí, vamos a quitar el ancho
Cuando eliminemos el ancho, se está mostrando correctamente y aquí de antemano, bueno en imagen. Vamos a agregar personalizado con
este 45 45 va a ser bueno. Ahora publiquemos
este diseño y vamos a verlo en el sitio web
responsive de escritorio. Vamos a la
herramienta responsive y copiamos aquí, pegamos así, clic en check y
hagamos tamaño de escritorio. Esto es más grande. ¿Y qué pasa con este tamaño? Bien, es trabajo para semanalmente, y sobre este tamaño, todavía
funciona para semanalmente. ¿Y qué hay de aquí? Bien. Cuando lleguemos
a este 280 por 800, es conseguir líos para arreglarlo, veamos el inten talla 50,
64, vengamos aquí
y hagamos clic en Entonces en cada dile, veamos el espacio
intermedio, son 44 Hagámoslo un poco más pequeño. Hagámoslo como 34. Y ahora publícalo, luego aquí, podemos hacer clic en Revisar de nuevo, y ahora se está mostrando correctamente. Bien. Ahora pasemos a la
siguiente parte del sitio web, que está sumando esta frontera. Para agregar este borde, podemos ir aquí y dar clic en este contenedor principal e
ir a avanzar en Avance, deberíamos ver el borde. De antemano, no
tenemos frontera, ¿no? Sí, no por adelantado. Vamos a Etyle
InStyle, tenemos frontera. Por lo que la frontera será
sólida y haga clic aquí. Entonces veamos la
frontera desde aquí. Bien, aquí, el borde con es
dos y el color es este color. Entonces copia el color, ven aquí. El borde con será dos, y aquí solo necesitamos que sea inferior y el color del borde
será este color. Bien. Ahora se
verá así. Entonces lo que tenemos que hacer
es crear esta sección. Para crear esta sección,
doy clic aquí y doy clic en
Cplex box y creo un nuevo contenedor como este y hago clic en Avance sobre Avance El patrón derecho
será 140 y el relleno izquierdo también
será 140, así. Entonces tenemos que agregar este texto, así que voy a dar click aquí y Rag androper titular
así y dar click Entonces la tipografía es
cabina mediana 24. Vamos a Estyle y la
tipografía es cabina 24 mediana. Media media 500 solo copie el texto y haga
clic en Contenido y pegue
el texto así. Entonces aquí, tenemos que
cambiar el color. Así que copia este color de relleno
y ponlo así. Entonces en ítem en diez s dos, y aquí tenemos que
agregar pop ins mediana 50. Simplemente
duplico este y hagamos que sea
tipografía de estilo, pop in Mediano, 50 así, luego copiemos el texto y solo peguémoslo
aquí así. Bien. Ahora voy a volver a hacer clic en este contenedor e
ir a layout aquí, el hueco debe ser fila C y vamos a averiguar
la altura media. La altura media es 577. Vamos así. Entonces aquí el ítem
será justificado centro. Y hagamos esto así. Después voy a dar click aquí
e ir a eTyleoeStyle, Tipo de fondo y dar
clic Entonces descarguemos
esta imagen de fondo, haga clic en ella y haga clic en Exportar. Vamos a configurarlo como JPG, luego haga clic en Exportar, así. Entonces vamos a Tiny
PNG, da clic aquí. Simplemente arrástralo así. Después haz clic aquí para descargar la imagen optimizada
y pongámosla aquí. Haga clic en Cslect y se
acaba de agregar así, y ahora podemos ajustar
esto así Y aquí, tenemos que
cambiar el color. El color es negro, y el artículo entre lados también
debe cambiarse, lo que significa que la línea no el
elemento entre lados. Hagamos la altura de línea como 55 y hagamos esto más grande como
este color debería ser negro. Ahora veamos que el ítem
entre el tamaño es herramienta, así que hagamos clic en el contenedor y vayamos al layout en layout, el gap Crow debería
ser dos así. Entonces lo que tenemos que
añadir es el botón. Así que agreguemos el
botón, haga clic aquí, botón de
búsqueda, y solo
agreguemos botón así. Entonces veamos las tomas del botón, copia el texto del botón. Entonces el botón texto typo
gap es cabina mediana 24, y está en por caja, ponlo así un
estilo, tipografía,
cabina, medio, 24 y la transformación
debería ser superior Entonces veamos el
tamaño intermedio. La parte superior es 25, la izquierda
y la derecha son 30, 30. Hagámoslo 25 por 25. Haga clic aquí, vaya a no en
avance en este relleno. Hagamos 25, así. Entonces el color
debe ser blanco y este color azul oscuro y
las esquinas son cero. El color es este y
blanco y este color, el radio del borde será cero. Ahora tenemos un problema porque el texto
debería verse así, para arreglarlo, iré a
avanzar y avanzar, hagamos esta costumbre con 253 y aún así se hace más grande, eso es un tema y además el fondo no está
funcionando como debería ser. Primero, arreglemos este
problema para solucionarlo, voy a agregar esto con
lo completo y luego lo que puedo hacer es ir a
Contenido y aquí agregar BR. Entonces aquí agregue BR sla bracket BR y cierre el soporte así. Entonces no cambiará cuando
cambiemos el tamaño
de este sitio web. Ahora tenemos un problema con la
imagen de fondo. Vamos a arreglarlo. Es fácil. Da click en el contenedor porque añadimos
esta imagen al contenedor. Y haga clic en la resolución de imagen como completa y la posición
será centro derecha. Y cuando lo veamos, se verá así. Entonces aquí, lo que tenemos que hacer es repetir no repetir
esta portada paise Entonces si lo comprobamos, se verá así. Si lo comprobamos en un
pequeño dispositivo como este, se verá así. Bien. Aquí tenemos
otro tema. Creo que porque este
espacio es demasiado no, es
lo mismo en el diseño
original. Entonces sí, aquí solo creamos
el héroe sección tres.
92. 0119 elementor actualizado: Hola a todos. Si
vamos a la página web, tendremos una actualización. Entonces solo hago clic en él, y aquí tenemos actualización de
versión de elemento. Así que vamos a ir a los plug-ins y dar clic en Instalar plugins y aquí tenemos la versión 3.25
0.4 como versión actual, y obtuvimos nueva
versión como 3.26 0.2 Aquí tenemos un mensaje llamado por favor copia de seguridad
antes de la actualización, lo que significa que si vamos
a actualizar este plugin, tenemos que tomar una copia de seguridad de este sitio web porque las actualizaciones de plug in pueden
romper el sitio web. Cuando sucedió, si
tenemos una copia de seguridad, podemos restaurar la copia de seguridad. Antes de actualizar este plug in, vamos a obtener la copia de seguridad. Estoy en el panel C en el panel
Namecheap C, instalo este Wordpress como uso de Wordpress en
Softacula Si usas alojamiento
web diferente, solo busca en Google sobre su sistema de respaldo
y obtén la copia de seguridad. En este caso, hago clic
en WordPress administrado por Softaculs y aquí
tenemos nuestro Simplemente hago clic en este ícono estrecho
hacia abajo, y aquí están los detalles
de nuestro sitio web. Y aquí tenemos un
botón verde llamado backup. Simplemente haga clic en él, y aquí dice que esta copia de seguridad es solo por 28 días,
pero está bien. Y a partir de aquí,
podemos agregar un nodo. Entonces agregaré nodo como
elemento o actualización de complemento pro. Y voy a establecer ubicación
de copia de seguridad por defecto
y aquí hago clic en el botón de instalación de
copia de seguridad y ahora estamos respaldando
nuestro sitio web de WordPress. Bien. Ahora tenemos la copia de seguridad y hago clic en volver a
WordPress Management. Y aquí, si pasa algo, cuando actualicemos el
elemento o plugin, podemos simplemente dar click en este botón de copia de seguridad
o restauración de fstore Entonces aquí tenemos
las copias de seguridad y si hago clic en este nodo o
si pongo el cursor sobre este nodo, podemos verificar el
nodo de respaldo que agregamos Entonces aquí está el respaldo
que acabamos de crear. Y si hacemos clic en este botón
Restaurar, esta copia de seguridad comenzará a
restaurar o podremos descargar esta copia de seguridad
a nuestra computadora local. Bien, ahora es el momento de
actualizar el plug in. Así que solo ve a la página de enchufar, y aquí hago clic en Actualizar ahora, y se actualiza con éxito. Entonces voy a reprimir la página, y ahora nuestra versión es 3.26 0.2 Y si vamos al sitio web, el sitio web está funcionando bien. Así que
actualizamos con éxito el plugin.
93. Centro administrativo claro del sitio web 0120: Hola a todos. Ahora
es el momento de convertir interfaz de usuario de
nuestro sitio web FIGMA en un web de WordPress
completamente funcional usando Elementor Empecemos a
hacerlo paso a paso. Primero, iré al panel de
WordPress y usamos este sitio web de WordPress para crear nuestras páginas de prueba. Ahora es el momento de
quitarlos a todos. Entonces hagámoslo. Primero, voy al tablero, el
tablero está claro, luego vamos a Fst
AposFSTPage es claro, y vamos a Y aquí tenemos algunas imágenes. Hagamos clic en la selección masiva y seleccionemos todas esas
imágenes como esta, luego hagamos clic en
eliminar permanentemente. O si tienes muchas imágenes, puedes hacer clic en este
icono y dar clic aquí, clic en esta casilla de verificación, entonces simplemente
puedes eliminar todas las imágenes Bien. Ahora vamos
a las páginas sobre Lpage Tenemos esas páginas. Voy a dar click aquí
y en acción masiva, voy a dar click en Moto
trash y dar click en Aplicar. Bien. Ahora hago clic en Caja de
basura y da clic aquí. Después haz clic en Eliminar
permanentemente y haz clic en Aplicar. Bien. Ahora la sección de comandos es
clara y elemento es clara, y vamos a comprobar
la plantilla de guardar. Y aquí tenemos la plantilla de zona que
viene, pero aún la necesitamos
porque si revisamos la vista de la página,
se verá así. En realidad, aquí tenemos un problema. Así que vamos a arreglarlo en la siguiente lección. Para este nuevo sitio web, necesitamos en la página de sonido. Regresa y aquí, vamos a la apariencia
y temas sobre temas, tenemos este tema del elemento Halo y vamos a usar
este tema de elemento Halo, así que lo voy a mantener así Si tienes un tema diferente, puedes simplemente hacer clic en
este botón en nuevo tema y buscar Hola,
elemento como este. Entonces, cuando lo
hagas, obtendrás este tipo
de tema, haz clic en él, y aquí
verás Instalar tema, simplemente haz clic y
activa el tema. Ya lo hice, así que ahora lo cierro
y en plugins, da clic en Instalar plugin. Tenemos elemento y
elemento plugin, que vamos
a utilizar para construir el sitio web desde
cero y en el usuario, ir a El usuario. Aquí tenemos solo usuario admin, y hasta ahora tan bueno, voy a ir al dashboard. Y ahora es el momento de
ir al siguiente paso, que se configura de lado puesto en, y hagámoslo en la siguiente lección.
94. 0121 Fuentes y colores globales elementor: Bien. Ahora es el momento de
configurar la configuración del sitio. Entonces cuando revisamos
nuestro diseño Figma, ya
tenemos el tamaño de la versión de escritorio y
el
relleno del sitio web Entonces son 140. Para que podamos definir esas
cosas en el sitio web de elemento. Entonces hagámoslo. Aquí estoy en el tablero de
Wordpress, y como primer paso, iré a casa de Elementor
y eliminaré esta parte Aquí, podemos hacer clic
en el lado establecido en. Así que solo hago clic en Personalizar. Cuando hago clic en Personalizar, tengo que crear nuestra primera página porque actualmente
no tenemos ninguna página. Entonces comencemos de ahí. Aquí tenemos un
elemento de mensaje o datos de datos, simplemente
hago clic en, da
clic aquí para ejecutarlo ahora y eliminemos
ese mensaje así. Después hago clic en en Nueva Página
y agreguemos el título. Esta página será nuestra página principal y si
vamos al sitio web, el nombre de
nuestra página de inicio debe
ser este nombre de sitio web. Aquí tenemos los
requisitos de diseño web aquí, el nombre de la empresa o el nombre del sitio web
es JB Family Clinic, así que solo lo copio
y lo pego aquí, después hago clic en esta edición con el botón
Elementor Bien Ahora estoy en el editor de elementos. Vamos a
sentarnos a partir de aquí. Para ello, hago clic en
este icono de configuración del sitio, y aquí tenemos los detalles. Vamos uno por uno. Primero, tenemos que colocar que
podamos definir el sistema de diseño. Haga clic aquí sistema de diseño
es una colección de componentes
reutilizables con estándar
claramente definido para su uso. En elemento podemos colores
globales y
fuente global como sistema de diseño. Podemos crear
colores y fuentes reutilizables. Primero, da clic en colores globales y aquí podemos establecer los colores. Si vamos al diseño Figma
y en nuestra hoja de Ithica, podemos ver los colores
del sitio web Definamos esos colores. Primero, tenemos este color azul solo selecciona el
rectángulo y en relleno, podemos ver el código de color, seleccionarlo y copiarlo. Entonces ven aquí. Vamos a
establecerlo como primario. Así que aquí, da clic en el color
y pega el color así. Bien. Entonces vayamos aquí. Aquí tenemos el color
secundario. En realidad es blanco, así que
vamos a agregarlo así. Entonces tenemos que agregar nuestro
tercer color o color de texto. Entonces solo copiarlo y aquí, agreguemos el color del texto. Y sólo tenemos
tres colores principales. Pero si comprobamos el diseño, podemos ver este tipo
de color azul claro, así que simplemente lo copiaré y
podemos agregarlo como
color de acento así. Pero en tu caso, si solo tienes tres colores, simplemente
puedes ignorar
el color de acento. Si tienes
más de tres colores, puedes hacer clic en este botón
en Color, y aquí puedes agregar
nombre para el color. Entonces agregaré Tn o color de
botón y aquí puedo seleccionar el
color como me gusta este. Puedes crear
tantos como colores, pero en este caso, no
necesitamos ningún color personalizado. Entonces yo sobre esto y aquí
tenemos botón de borrar, así que hago clic en eliminar
y dar clic aquí. Hazlo. Bien. Ahora lo que voy a
hacer es dar clic en Guardar cambios. Y aquí también tenemos sección global de
fuentes. O si volvemos, hago clic en Salir y
vamos a sentarnos de nuevo. Y si comprobamos aquí, podemos dar click a esta fuente Global. Cuando hacemos clic en él, es redireccionado a la misma página. Es como una ficha. Ahora en fuente, si vamos a nuestro archivo Figma y
en tipografía, podemos ver los detalles de
la fuente que utilizamos
en Bien, agreguemos
los detalles de la fuente. Aquí tenemos encabezado
como lato 60 regular. Entonces vamos al sitio web de
WordPress, y aquí tenemos el
primario, da clic en él, y aquí voy a establecer la familia de
fuentes como LTO Entonces el tamaño es 60
y la altura es regular. Es significa normal en elemento. Ahora aquí tenemos la fuente y vamos a agregar altura de línea como 36, 36 va a estar bien. Y el beneficio de definir esos parámetros o esas
fuentes y colores lo son, podemos reutilizar estos
elementos en el diseño. Vayamos a un ejemplo. Para hacer eso, solo hago clic en
concebir cambios y
volvamos y simplemente hago
clic en Plus y Flexbox, luego creo una columna directa que contiene el
tiempo y aquí, haga clic en agregar elemento y
agreguemos un titular Entonces duplicaré este
titular por tres veces y aquí hago clic en el titular para editarlo
y dar clic en I style. Aquí, configuramos
la tipografía. Seleccionemos el primario
como la tiogafía. Ahora tenemos un problema. La altura de la línea está demasiado cerca, así que intentemos
arreglarla desde aquí. Hagamos línea hit 55, 55 valdrá la pena. Y ahora lo que tengo que hacer
es ir a sentarme configurando y luego fuentes globales y aquí el tamaño primario será el texto primario la
altura de la línea será 55. Bien. Ahora guardemos los cambios y volvamos al diseño. Ahora hagamos este
color como color de texto, y aquí hagamos este
color como color de acento. Bien. Ahora lo que hago es duplicaré este texto de
color de acento dos veces, y esto
te ayudará a entender el poder de los
colores predefinidos y la tipografía Entonces ahora hago clic en
Fablish está bien. Publica esta página. Ahora piensa en
este tipo de escenarios. Entonces cliente de este
sitio web quiere cambiar este
color azul claro a color rojo, y creo que tenemos este tipo de texto como 60 texto
rellenado en este color, campo de
texto o botones
en este color. Y si queremos cambiar este color azul claro
a tenemos que cambiar esos 60 textos manualmente yendo estilo y
cambiándolo de aquí así. Pero si decimos
variables globales o colores globales, podemos simplemente cambiar ese color en la configuración lateral y
afectará el sitio web de otoño. Vamos a sentarnos a la configuración
y aquí voy al color
global y necesitamos cambiar esto
a color
rojo así, cambiarlo rojo así, luego hago clic en concebir cambios y se aplica a todo
el sitio web Doy clic en volver al editor, y ahora ves que esos
dos textos se vuelven rojos porque establecemos la propiedad de
color global a este texto. Este es el beneficio. Y si necesitas cambiar este tamaño de texto a
otro tamaño, si usas
tipografía global o fuente global, simplemente
puedes cambiar
ese conjunto en la configuración de tamaño y
afectará a todo el Espero que entiendas
por qué vamos a establecer este tipo de fuentes y colores
globales. Bien, ahora vamos a texto secundario. Entonces el texto secundario
es higuera 25 regular. Hagámoslo la
fuente es fk tree, 25, y el ancho es
normal mean nom. Establezca esta altura de línea en auto como la tipografía en la tipografía
Figma,
así será fácil, así será fácil, configúrela como Otto así y
hagamos lo mismo La altura de línea es automática
y si tiene algún problema, podemos simplemente cambiarla de aquí, entonces tenemos que
cambiar el tipo de texto. El texto es este
párrafo fuentes. Es la higuera 20 regular. Vamos a cambiarlo a falso árbol 20 es regular y aquí línea
noche es auto haga clic aquí, haga clic en lápiz y configúrelo como
Hto ahora tenemos aquí axon En realidad, voy a
cambiar este axón a botón porque aquí lo
tenemos como botones Si queremos, podemos
cambiar otros textos y el texto del botón es
victoria 20 regular. En realidad, es medio aquí debería cambiarse como medio. De todos modos, es de fábrica 20 mediano y está en
mayúsculas. Vamos a hacerlo. Deberíamos ser capital
aquí fábrica 20, no 25 20 con esta mediana semivol media
semiv y transformación semiv y Bien, y la altura de la línea
volverá a ser automática Sí, sí,
sí, sí. Bien. Ahora en realidad podemos
renombrar esos nombres. Cambiemos primario a encabezado y el subdin es texto
secundario,
y ese texto de botón ya lo
cambiamos, y aquí hacemos el
texto de párrafo para que podamos
entenderlo fácilmente Y en realidad, tenemos que
cambiar este color de acento a azul claro porque
ya hacemos cambios. Vamos a copiar el código de color
y aquí ponerlo así. Da click en guardar cambios, y ahora hago clic en esta cruz porque necesitamos
configurar otras cosas. De nuevo, tengo que
ir a sentarme a la configuración, clic en la configuración del sitio. Bien, ahora establecemos los
colores globales y la fuente global.
95. 0122 Configuración del sitio: Hola a todos. Ahora
aquí podemos ignorar el estilo del tema porque esos set ins heredados
por el tema, y vamos a diseñar
nuestro sitio web desde cero y el sistema de diseño colores
globales y fuentes son suficientes para
diseñar el sitio web, y luego tenemos que ir
a establecer ins. En SETNs primero
tenemos identidad de sitio. Entonces solo hago clic en él, y aquí tenemos que agregar
el nombre al sitio. Así que vamos a nuestro diseño Figma. Y aquí requisito de
diseño de sitios web, voy a copiar el
nombre de la empresa o el nombre del sitio web. O podemos ir aquí y revisar los líderes de aquí y solo lo
pego así. Entonces tenemos que agregar la descripción
del sitio. Esta es la
descripción del sitio o línea de etiqueta. Voy a copiar este titular como descripción o título del sitio
y se verá así, entonces tenemos que
agregar el logotipo del sitio, el logo del sitio
ya está creado. Aquí está el logo de nuestro sitio web, y simplemente hago clic en este ogo BG y voy
a Exportar al Exportar, Pizarra el formato como PNG, luego hago clic en Exportar Logo
GB, I Epoded Entonces iré al sitio web, haga clic aquí y
subamos el sitio así. Después agregaré el texto antiguo como logo de JB Family Clinic
y daré clic en seleccionar, solo
lo agregaré, y luego
tenemos que agregar la FVCon Actualmente no tenemos icono de Fv, creo, ¿o tenemos? No, no vamos a crear
uno rápidamente para hacer eso. Yo solo presiono sobre este marco, y aquí solo hago
clic así y F Vicon debería estar cinco bien por cinco bien vamos a establecer la prueba de ancho
y altura f demasiado bien, cinco demasiado bien, así Entonces cambiaré
este marco a icono de FV. Ahora voy a ir a ASEDs en clic en
creado en este archivo, y aquí tenemos el logo de JV, y simplemente hago clic
en Instancia ISAT, y aquí voy a dar
click en el logo, y simplemente voy a hacer clic en
este icono de instancia de desvincular, y luego voy a mover esta parte clínica familiar y aquí voy En realidad, tenemos que aumentar el tamaño de la fuente. Vamos a hacerlo. Iré a archivos y en archivos, seleccionaré el texto y
vamos a aumentarlo. Aquí, voy a añadir 500, 500 es demasiado grande, 200. Aquí tengo que cambiar
esta talla, así. Hagámoslo como 300. Podemos incrementar esto
más así. Ahora voy a aumentar el
y se ve bien. Entonces veo este
ícono de FV y doy click en Exportar y dar click
en el icono Exportar FV, e Ilate el Ti
fas PNG, da clic en él Bien. Ahora voy aquí, da
clic aquí, Peligros, arrastre y suelte el icono de Fav
y agrego texto en realidad, el icono de Fav está vacío, así que no voy a editar Voy a hacer clic en
eliminar de forma permanente, algo pasó
mientras lo descargamos. Yo lo haré. Aquí está
nuestro marco de icono FV, pero está en este logorame de JB Simplemente selecciono el texto JB y hago clic en el
icono de FV y lo pego Ahora está dentro del marco
del icono FV. Entonces lo haré Bien, ahora bien, seleccione el icono de Fav
y haga clic en puerto FV Entonces pongámoslo así
y cortemos esto, cópielo aquí, luego
pegarlo así. Después haga clic en CLX y ahora haga clic en Guardar cambios para guardar esos
elementos y volvamos. Ahora vamos a revisar
esta página para ver el nuevo look cuando
añadimos esos es duro. Actualmente aquí tenemos el título y si tenemos una
vista previa de este sitio web, la parte JB o el icono de FAV
aparecen en la pestaña Bien Ahora lo que tenemos que hacer
es configurar el layout, click en layout, y en layout, primero, tenemos ancho de contenido. Si vamos al
archivo FIGMA y verificamos en la página principal seleccionamos
el marco de
la página principal y aquí el ancho es de 1,440 Entonces agreguemos 1,440. Después tenemos que añadir el relleno. Veamos el relleno actual. Aquí tenemos padding
como 140 padding media, el espacio entre
la izquierda y la derecha. A modo de ejemplo, si lo
cambio a cero, el diseño cambia así, pero si lo agregamos 140, conseguimos este tipo de paddin o espacio entre izquierda derecha Es 140, aquí el lado derecho es 140 y el lado izquierdo es 140. Ya está ahí.
Entonces tenemos brechas. En brechas, tenemos columna y fila. Si lo hacemos cero, el espacio entre
esos ítems será cero. Pero si sumamos 50
, serán 50. Veamos el artículo
entre tallas. Aquí tenemos 220 y
aquí cuando selecciono elementos o elemento y haga clic en
presionar Y sobre el siguiente elemento, podemos ver el
tamaño intermedio, así que es 220. Agreguemos Raw Gap ps 220. Hago clic en este botón de valor de enlace
juntos para desmarcarlo, entonces el valor bruto será 220 Entonces, ¿qué pasa con las brechas? Aquí la brecha es de dos. En realidad,
no agreguemos hueco de columna como hueco entre dos
elementos como este, hagámoslo manualmente. Entonces agregaré brecha de columna Co. Después hago clic en
Concebir cambios y el diseño de página predeterminado será elemento de ancho
completo, así Si seleccionamos tema, las cosas del tema se
heredarán, pero vamos a seleccionar
elemento de ancho completo, y ahora haga clic en guardar cambios. Entonces mantengamos los
puntos de quiebre por defecto y
volvamos y establecemos con éxito la configuración lateral y ahora
voy a cerrar esta pestaña, y aquí estamos en el diseño, y aquí veo un problema. Así que vamos a hacer clic así. Entonces el espacio entre
este texto es demasiado alto. En realidad, se arregla cuando
recargamos la página y hasta ahora tan bueno ahora tenemos que
agregar el
encabezado y el pie de página y hagámoslo
en la siguiente lección Por ahora, voy a eliminar esta parte y vamos a dar clic en
Publicar para guardar
96. 0123 Encabezado de diseño 01: Bien, ahora tenemos que
comenzar el diseño. Entonces en elemento,
tenemos plantillas. En plantillas,
iré a Team Builder. Entonces en Team Builder, tenemos secciones de sitios web. Entonces esas secciones se repiten, y cuando creamos un
diseño para la sección, se aplicará todo el sitio. A modo de ejemplo, el encabezado del sitio web es bastante
similar en el sitio web, lo que significa que si
vamos a
la página principal, la sección de menús
será la misma, y si vamos a acerca de página o
contacto o cualquier otra página, la sección de menús será la misma sección de menús o
el encabezado será el mismo. Así podemos crear plantillas
para headersection, footer y otras
páginas repetidas del sitio web, lo que significa que solo
necesitamos crearlo una vez y podemos aplicarlo En este caso, podemos crear la parte de encabezado usando
esta sección de menú A, podemos crear la parte de putter Empecemos con
el diseño del encabezado. Para hacer eso en el constructor de elementos
o temas, voy a hacer clic en este icono
más en el encabezado. Entonces aquí tendremos plantillas
preconstruidas como esta, pero no selecciono ninguna de estas, así que simplemente hago clic en este cierre Voy a incrementar este
diseño así. Entonces aquí como primer paso, voy a crear un contenedor. Simplemente haga clic aquí, haga clic en el cuadro Plex, haga clic en este contenedor de columna y veamos el
tamaño de esta sección. Entonces su tamaño es de 120, así que pongamos Mint como
120 fixel así, entonces voy a hacer
este contenido con ancho
completo y aquí voy a
agregar color de fondo Vamos a agregar un pequeño color
verde como este porque ahora podemos
ver claramente ¿dónde estamos trabajando? Ahora primero agreguemos
este logo para agregar, haga clic en este ícono más y
aquí obtendremos logo lateral, solo arrastre y
fila un poco así. Después en contenedor,
estableceré el centro de
contenido de justificación y la dirección como
dirección de fila como fila y justificaré el contenido
como estrella así, entonces una línea de pedido será centro. Ahora vamos a crear esta
sección de menú para crear el menú. Aquí voy a hacer clic en agregar elemento menú de búsqueda
y aquí voy a obtener el menú de wordpress y
vamos a ponerlo así e ir a Etyle en
Etyle la tipografía Sí. Es el tamaño del botón. Entonces en el contenido, estableceré el texto align como
centro y por ahora, pongamos la alineación como inicio. Entonces en Etyle vamos a
cambiar normalmente el color de prueba debe ser el color y se
ve bien por ahora, vamos a hacer clic en la imagen
y en la configuración de la imagen, alineación debe ser vuelta y alinear uno mismo debe ser
centro así Entonces vamos a crear
este icono de llamada para hacer eso, voy a hacer clic en un
elemento y aquí, vamos a crear la imagen
bob así, agregarla aquí mismo. Después de aquí, ir a Etyle
y en posición de imagen, ponlo como ef y la
alineación será vuelta Entonces veamos la
imagen disipando seis,
pongámosla en C. Ahora
tenemos que descargar este icono Haga clic en el icono aquí
y Exportar y PNG, haga clic en Exportar, icono de llamada. Entonces vengamos aquí y clic en el
cuadro de imagen sobre el contenido, simplemente
podemos hacer clic en el Contenido. De nuevo soga esto.
Esto me puede gustar. Después haga clic en C SLAC. Ahora agreguemos esos detalles del
texto, copiemos el texto y
agreguemos el título de la prueba, luego copiemos el número y el
disco como descripción. Ahora vamos al
titular en titular, haga clic en la imagen y la
imagen con debe ser 100% real no agreguemos
ningún tamaño a la imagen con. Entonces por ahora,
mantengamos el ancho de la
imagen o cosas de imagen como esta y
vayamos al contenido en contenido aquí, el tipo de gappy es
victoria medio 16, y para agregarlo, agregaré agreguemos texto de
párrafo en realidad, y veamos que su tamaño es dos, solo lo
cambiaré 16
y ¿debería ser negrita Sí. Y si fuera gas superior, debería ser mirada superior
y en transformación, lo
diré superior así. ¿Y con este medio? No es normal, debe ser medio. Todo bien. Entonces el color
es el color negro, este color. Todo bien. Ahora aquí, lo que tenemos es fig negrita 20. Agreguemos esos detalles también. Sobre descripción, voy a sentar el texto del párrafo y ahora
tengo que editar el texto, su tamaño es 20 y con
esta negrita hasta el momento tan bueno. Ahora aquí voy a ir a
adelantar el cual
debería estar lleno con tal vez de establecer el
auto inline y
se arreglará así y tenemos que cambiar
el tamaño entre medias. Vamos a ver el
entre tamaño, es Z. vamos a Etylectaspac adentro, vamos a hacerlo como seis. Perfecto. Ahora se ve así, entonces lo que tenemos que hacer es
ir al contenido, no al contenido, clic en el contenedor y en contenedor hacer
clic en Ispace de manera uniforme, así se configurará así y ahora tenemos que
agregar el menú porque actualmente este menú no es el
menú que queremos, aquí tenemos el menú como sobre bloquear a nuestro proveedor y
contacto y la página principal Vamos a dar click en este
elemento del menú y aquí en el contenido, voy a dar click en G
a la pantalla de menú y aquí tenemos esos menús
que ya creamos. En realidad, los
eliminaré porque ya
no necesitamos esos elementos
del menú como este. Borremos Bien. Ahora aquí agregaré el nombre del
menú como menú principal y haré clic en Crear
Menú y aquí en las páginas, haga clic en y aquí
seleccionaré la
página elementor como página principal, y aquí voy a cambiar
el nombre a home y ahora tenemos que agregar otras
páginas primero sobre la página En realidad, por ahora, solo agregamos Dammnus así
para aproximadamente entonces blog, luego nuestros proveedores
y podemos tanque copiar, pegarlo aquí en Tumenu
y dar clic en sameno Bien,
ahora tenemos el menú, ahora tenemos el menú, así que ve a elemento de
página y aquí hago clic
en publicar y en realidad
vamos Hay un borrador, da clic
aquí y haz clic en Guardar borrador hasta que
completemos el menú, luego hago clic aquí. En realidad, tengo que reprimir
la página así. Después da click en el menú y
aquí selecciona el menú principal. Bien, ahora ve a Etil
en eTyleF cambiemos los colores y sobre cómo voy a cambiar el color del texto a
color primario En realidad, no
necesitamos un puntero. Vamos aquí y no aquí, vamos a estilo en estilo, dividir o cuatro puntos serán cero porque
no necesitamos un puntero. En realidad,
debería haber una opción para eliminar el puntero aquí, tenemos esto en el contenido. Tenemos este puntero como ninguno. Vamos a establecerlo como ninguno, luego ir a Etie en Estes, patrón
horizontal
debe ser cero, patrón
vertical debe ser cero, espacio intermedio debe ser 04 Y ahora vamos a revisar
esos espaciamientos. Primero, el espaciado debe ser 30 y el espacio entre
ellos debe ser 30. 30 está demasiado cerca. Conozco la razón de
este tema de espaciado. Si comprobamos el diseño Figma, tiene este tipo de contenedor
blanco Creemos ese contenedor
y comencemos a editar. En agregar elemento, y
aquí hay un contenedor. Yo sólo lo arrastre y
la soga así. Bien. Entonces primero, cambiemos esta
dirección de contenedor principal a columna, y ahora podemos
ver claramente los artículos, y aquí está el
contenedor que agregué. Entonces hago clic en este pequeño
icono y lo hago abrir, después pondré a este
menú logo una caja de imagen dentro de
ese contenedor así. Bien. Ahora, haga clic
en el contenedor y haga clic en dirección
como fila horizontal. Y aquí tenemos
problema con el espaciado I. La razón es que agregó el
relleno como 142 izquierda y derecha. Así que vamos a hacer clic en el contenedor e ir a avanzar sobre margen, quitar el margen en
relleno, quitar el relleno. Ahora, haga clic en el contenedor
principal, luego haga clic en el subcontenedor y vaya al diseño en el diseño, configurarlo como espacio entre ellos Ahora ajustemos
esa información. Cuando selecciono este contenedor, puedo ver el borde
de este contenedor. Entonces aquí tenemos un espaciado. En cuadro de imagen, voy a quitar este ritmo cambiando
su tamaño así y aquí podemos reducir el tamaño de la
caja de imagen o el logotipo Hagámoslo así. Ahora se está mostrando correctamente y ahora tenemos un tejido de
alineación, haga clic en el segundo contenedor y haga clic en alinear
elementos como centro. Después haga clic en esta
imagen en Avance. Aquí, vamos a
cambiarlo como en línea auto así parece que hay un
margen arriba y abajo, así que vamos a agregar Dance
y eliminar el margen. Elimine el margen, haga clic
en el valor del enlace juntos y agreguemos menos
margen a la parte superior así. Entonces en la parte inferior, tenemos el margen. Eliminemos ese margen también. Ahora está perfectamente alineado, y si lo comprobamos en
la ventana más grande, se verá así, y luego vamos a disminuir este tamaño
de estructura así para que
podamos obtener el
diseño claro de esto. Ahora lo que tenemos que hacer es agregar color blanco a
este contenedor. Para agregar el color blanco, iré a Está en
fondo elegante entonces aquí, agreguemos el color blanco El color secundario
es el color blanco. Entonces ahora lo que tengo que hacer es averiguar el
espacio I alrededor del Menú, en realidad, tenemos que seleccionar
el ítem más grande en este caso, es este ícono de teléfono. Entonces cuando lo comprobamos, son 29 y 15 como
la izquierda y la derecha. Entonces agreguemos esa información. antemano la
parte superior acolchada es no en realidad, en realidad haga clic en el contenedor, y en la parte superior, es 29. Después a la derecha, 15 en la
parte inferior 15 a la izquierda 29. A lo mejor hagámoslo
como no a la
izquierda, la izquierda debe ser 15 y abajo
debe ser 30, no 29. Hagámoslo como 30. Bien. Y luego
tenemos que averiguar el espacio entre
la esquina superior y
el menú. Entonces son 20. Solo tenemos que seleccionar
el ítem y sobre el ítem que junto al
ítem que seleccionamos, luego presionar todo y
podemos ver que el espaciado es de 20, así que seleccionemos
el contenedor principal y agreguemos el margen superior como 20. Bien. Ahora tenemos que
añadir esquinas redondeadas, veamos las esquinas redondeadas. Las esquinas redondeadas son 20
o el radio de esquina es 20, para hacer el radio de esquina, ir a Itis y tis a bordo, agregar el radio como 20 Bien, así como así, podemos ver el diseño. Ahora lo que puedo hacer es hacer clic en el contenedor de fondo y quitar el fondo así. Después haga clic en Publicar. Antes de hacer clic en Publicar, haga clic en la configuración de encabezado, y en la configuración de encabezado, cambiemos este título a encabezado
principal y
luego haga clic en publicar. Y cuando hago clic en publicar, hay una pregunta llamada, donde quieres
mostrar tu plantilla, y aquí tenemos botón
para agregar condición. Por lo que solo hago
clic en agregar condición, y aquí podemos incluir
o excluir el artículo. Por lo que selecciono incluir sitio
completo porque quiero
ver este menú en todo el sitio. Y podemos agregar más
condición como ejemplo. Quiero excluir o no
mostrar esto en homepage, podemos dar click en singular
y aquí podemos seleccionar la portada y luego
puedo dar click en San Clause. En este caso, necesitamos incluir este menú
en toda la página web, así que elimino esto y hago
clic en Guardar y Cláusula, luego acaba de publicarlo. Ahora vamos a ir a las páginas y páginas ER y aquí
tenemos la página principal, así que simplemente hago clic en Editar con Elemento y aquí
nuestro menú es mostrar.
97. Encabezado de diseño 0124 02: Hola a todos. Ahora
tenemos un problema. Entonces hago clic en este ícono más, y vamos a crear un contenedor
simple. Y como diseño de nuestro sitio web, esta imagen debe ser
imagen de portada de la página principal. Entonces intentemos agregar esa imagen. Da click en la imagen y
haz click en para seleccionar el PNG y haz clic en exportar y
el tamaño de la imagen es mayor, así iré a minúsculo
png.com y rack la imagen y la dejaré caer en
el sitio web minúsculo png.com, luego las radios de imagen clic en el botón JPG
para descargarla y ahora tengo que ir a la página principal y aquí vamos a hacer
esto Veamos la
altura mínima de esta sección. Es 800, la altura es 800, así que hagamos esto como
800, no 700, 800. Bien. Ahora ve a Estils
en Estyle da clic en Fondo y clásico y
aquí agregaré esta Y esta
etiqueta ALT de imagen no estará atada. Imagen de héroe y haga clic en C. Bien. Cuando lo agrego, agregó
fuera de este menú. Entonces lo necesitamos
dentro del menú. Entonces para hacer eso, podemos
agregar margen negativo. Por lo que hago clic en este
contenedor y voy a avanzar en Avance, da
clic en Margen. Y para colmo, voy a
sumar cien negativos. Cuando agrego cien negativos, es ir arriba y ¿y
si sumamos 200 negativos? Es ir arriba, pero podemos obtener
el tamaño exacto que queremos agregar porque cuando hacemos clic en
el menú y verificamos la altura es de 120, y aquí tenemos otro
20, lo que significa 140. Agreguemos margen negativo como
140 y tenemos que sumar 60, 60 será trabajo tal vez 50. Sí, el 150 va
a funcionar perfectamente. Entonces ahora todavía tenemos un problema porque no podemos
ver los antecedentes. Por ahora, voy a dar
click en publicar, y después iré al
encabezado para ir a encabezado, iré al dashboard,
elementor, no elemento en
plantilla, Team Builder Team builder, podemos
ver el encabezado principal, dar clic en él y
aquí dar clic en Edi. Podemos arreglarlo agregando
índice de TI a este contenedor, seleccionamos el contenedor
e iremos a avanzar. Y si te preguntas
qué es un índice de TI, It index es una
propiedad CSS que controla el orden Iacin del
elemento TML en una página web A modo de ejemplo, si agregamos uno como índice
IT
de este contenedor, aparecerá
delante de un elemento. Por lo que el valor de índice de It más alto
aparecerá frente un elemento y el valor de índice de
It inferior se
mostrará en la parte posterior. Ahora hago clic en
Publicar y voy aquí, entonces vamos a rebash Mira, cuando lo rebash, nuestro menú acaba
98. 0125 eliminar el pie de página predeterminado: Hola a todos. continuar con el resto del diseño, eliminemos esta parte, y vayamos paso a paso
o sección por sección. Para quitar esta parte,
iré al tablero de tress. Entonces aquí, iré a
Plantillas y Ellas Constructor. En ellos Constructor, aquí, hago clic en Pie de página y
cierro esto, luego aquí, hago clic en icono Plus
y cuadro CilletPlex, luego creo un
contenedor como este, luego hago clic en Pie de página establecido
en y aquí cambio el título página
principal así, luego haga clic en
Publicar y haga clic en
en condición y se
mostrará en Haga clic en Guardar y cerrar. Ahora bien, si voy a la
página principal y aquí, da clic en Editar con elemento realidad todavía no
configuramos la página principal, así que tenemos que ir al panel de control
en las páginas del tablero, hacer clic en las páginas, y aquí, clic en Editar con elemento. Y ahora ya no vemos la parte del
pie de página o ese contenido, así que vamos a construir
sección por sección. Entonces de esa manera, podemos entender
fácilmente
lo que estamos haciendo.
99. 0126 Diseño de la sección principal: Hola a todos. Cuando
visito nuestra página de inicio del sitio web, Es este tipo de espacio porque aún no
configuramos la página de inicio. Vamos a configurar la página de inicio. Para ello, iré al
dashboard de la página web. Después voy a establecer en el interior
set haga clic en la lectura. Al leer, aquí tenemos una
frase para configurar tu página de inicio. Lo configuraré como
una página estática y aquí configuraré la
página principal como JB Family Ginic que es el nombre de
la página principal y hago clic en Guardar cuelga ahora
si visito el sitio web, podemos ver nuestra
página de inicio Ahora volveré a ir al tablero y
continuemos con el diseño. En las páginas, podemos conocer nuestra página de
inicio y aquí hago clic en Editar este elemento y
tenemos que crear esta sección. Ya creo esta parte, pero empecemos de cero. Voy a quitar eso y aquí
está la página parece. Cuando creas una nueva página, debería verse así porque ya
configuramos la parte de encabezado. Aquí, hago clic en
este icono de clase, elijo Flexbox y selecciono el contenedor de
tipo columna de dirección Y en este contenedor, lo
pondré como peso completo. Luego en
margen de avance y relleno, luego en maquetación, podemos
agregar altura mínima Averigüemos la altura
mínima. La altura mínima es de 800
o la altura es de 800, así que vamos a agregarla así 800. Bien. Ahora, agreguemos imagen
antes de hacer nada. Para agregar Imagen,
tenemos que descargar, seleccionar la imagen así, luego dar clic en Exportar. Lo voy a exportar como JPG, entonces tenemos que
ir a tinpng.com, y aquí lo arrastraré
y soltaré Entonces radia el tamaño del archivo. Da click en JPG, JPEG
para descargarlo. Ahora voy a ir a Estilo
de este contenedor, y aquí seleccionaré tipo
clásico de fondo. Entonces aquí hago clic en elegir Imagen y aquí
ya subí la imagen y puedes subir la imagen de descarga
seleccionando envejecimiento así. Ya configuré el
texto antiguo y ahora hago clic en seleccionar aquí tenemos que
agregar algunos ajustes. La resolución de la imagen
será la posición
será centro central, y el accesorio es de
desplazamiento y repetición, sin repetición, tamaño de pantalla cubierta. Bien, ahora se
verá así, pero el tema es,
debería comenzar desde aquí. En realidad ya
hicimos esta parte, así que esta altura de parte es de 120, y le sumamos 20,
así será de 140,
y vamos a así será de 140, dar clic en el contenedor, y de antemano, tenemos que agregar margen
negativo como 140 tal vez 50. Bien, 150 funcionan bien. Ahora solo lo configuramos así. Ahora lo que tenemos que hacer
es en esta sección. Es bastante simple. Voy a copiar el texto de aquí
y llegar al elementor y dar click en este ícono más y ag y roper
titular así, luego pondré este Nuestro titular está dentro aquí, así que vamos a arreglarlo para arreglarlo, voy a hacer clic en contenedor y en la sección de diseño de contenedor, podemos definir donde debe estar
nuestro contenido. Si hago clic en justificar contenido, vendrá a aquí y aquí, este es el ritmo que
queremos agregarlo,
por alguna razón, no
se configuraron los acolchados
izquierdo y derecho , así que vamos a agregarlos
manualmente para agregarlos, hago clic en contenedor
y voy a Avanzar. En Avance,
agregaré paddins derechos
140 y paddins izquierdos Bien. Ahora, sigamos continuando aquí podemos establecer la
tipografía aquí, la tipografía
será encabezado y
el color debería ser secundario.
Es de color blanco. Bien, ahora deberíamos tener un
espacio de aquí para hacer eso. Voy a ir al contenido y aquí
estoy en la BR así. Entonces agreguemos el párrafo, cópielo y luego haga clic aquí, luego agreguemos un titular
como este y cambiemos la etiqueta TML de
titular a P,
y aquí, agreguemos el contenido del texto y
vayamos a Etyle con estilo Establecer este texto a
párrafo ver es regular 225 y cuáles serán
los detalles del texto del párrafo. Para verificar el texto del párrafo, sólo
puedo hacer clic en esta
edición con un botón. Cuando lo reviso, es
220, así que ese es el tema. ¿Y si agregamos subtitular? Sí, es el sub titular. Lo voy a mantener
así por ahora, entonces cambiemos el color del
texto a blanco. Entonces lo que tenemos que hacer es agregar este botón,
agregar este botón. Entonces para agregar este botón, hago clic en este elemento de agregar y aquí botón de búsqueda y rack un botón y
soltarlo así. Bien, agreguemos esos detalles. Aquí, voy a copiar el
texto y venir aquí, pegar el texto así. Por ahora, mantengamos el
enlace como paso como hash tag. Entonces tenemos que
cambiar los colores. Es fácil, ve al estilo E
y el color de fondo es este color de texto azul
es este color blanco. Bien, ahora lo que
tenemos que añadir es espacio. Así que vamos a seleccionar la
t y presionar todo. 252-53-5305. Agreguemos esos detalles
en pad aquí, luego arriba 25, derecha, 35, abajo 25, derecha 35. Bien, ahora tenemos que
revisar las esquinas. Las esquinas 15. Bien, aquí, vamos a lo que dice la radio 15. Bien, ahora tenemos titular, texto, y el botón. Ahora lo que tenemos que hacer es
en BR desde esos puntos. Entonces aquí en la BR y la BR, buen contenido sobre familia
y la BR así. Y después de eso, tenemos
asegurar y PR el Bok Nice. Ahora lo que tenemos que hacer es encontrar el espacio desde esta
parte inferior hasta esta sección. Entonces son 60. Entonces
agreguemos esos detalles. Da clic en el contenedor,
y de antemano, tenemos que agregar el pad inferior
en como 60 píxeles así. Bien, se ve bien. Ahora hago clic en Savedraft
y vamos a repash esto. En realidad,
publiquemos esto de todos modos porque este sitio web está
en modo Coming zone. Entonces ahora si refash la página, se verá así Y aquí tenemos un problema. Tenemos un espacio para enfrentar. Bien, encontré el
motivo de este problema. Entonces, cuando configuramos
la configuración lateral, agregamos el layout default
raw gap pasado 220, así lo eliminaré. Cuando lo quite, este
problema se solucionará, y ahora hago clic en Guardar cambios. Vamos a agregarlo manualmente. Da click aquí y aquí ya
tenemos algo de espaciado. Entonces para eliminarlo, podemos agregar
margen negativo así. En realidad son diez y
si vamos al diseño, el tamaño intermedio dice 20. Entonces aquí ya tenemos diez. Si eliminamos este margen
negativo, ya
tenemos diez. Entonces si agrego diez
así, serán 20, así que tenemos que hacerlo para
una sección como esta, diez o podemos agregar diez a
este contenedor así. Lo mismo va a pasar. Agreguemos diez a este contenedor porque
esa es la manera más fácil. Y sí. Cuando hagamos eso, el espacio en cuestión quedará resuelto y agradable. Ahora hago clic en Publicar y ahora si comprobamos el
diseño en vista real, se verá así. En realidad, normalmente el
tamaño del sitio web será así, pero como te dije antes, mi escritorio es más grande, así que por eso se está
mostrando así. Bien. Ahora lo que tenemos que
hacer es agregar algo de animación. Agreguemos algo de animación pequeña. Primero hago clic aquí, vamos a avanzar por
adelantado iré
a Efectos de movimiento. En los efectos de movimiento, podemos
establecer la animación de entrada. Agreguemos simple como desvanecerse
o rebotar es demasiado, anotar es demasiado. El desvanecimiento se basará. Agreguemos fade in
para cada sección. Haga clic aquí, haga
clic en Efectos de movimiento
y, por defecto,
agreguemos fade in. Y aquí, efectos de movimiento, haga clic en desvanecerse. No, Padin estará
bien. Todo bien. Ahora puede publicar y ahora se
cargará así. Es realmente simple porque este sitio web es para profesionales y agregar demasiada animación no
se ve bien. Bien. Ahora tenemos que
diseñar esta sección. Vamos a diseñarlo la siguiente lección.
100. 0127aboutsummerysection01 ALTERED: Ahora diseñemos esta sección. Voy a la página
y aquí hago clic en icono más y
libro Plax, luego este Entonces aquí, veamos
selecciono la sección, luego presiono todo y verifiqué
el tamaño entre medias. Es uno, dos, 20,
y vamos aquí, voy a adelantar de
este contenedor y puse el margen superior pase
uno a 20 así. Entonces tenemos que encontrar la altura, la altura es de 600. Agreguemos el diseño de altura en el diseño,
la altura media será de 600. Ahora deberíamos tener dirección como horizontal
cruda y
como primer paso, tenemos que agregar esta imagen. Para agregar la imagen, tenemos que descargarla, hacer
doble clic sobre ella, dar clic en Exportar IM y aquí, vamos a ir a tiny png.com y descargar Dragan op a
aquí para optimizarlo En realidad, se descarga como PNG, pero no lo necesitamos en PNG. Veamos si lo
descargamos como JPG, podemos obtener más
espacio o podemos conseguir imagize como mucho más
pequeños como C aquí,
tenemos 90 1 kilobyte, pero aquí tenemos 26 kilobyte pero aquí tenemos Bien. Ahora voy
a ir aquí y dar clic en Con más icono luego
buscar imagen y trapo y cuadro de imagen op como
este y dar clic en él y aquí subir la
imagen y el título Para etiqueta vieja, agregaré como
doctor en JB Family Clinic, porque ayudará a incrementar la optimización de
buscadores Y luego hago clic aquí
y aquí está en el centro, así que vamos a hacerlo centro haciendo clic en este icono central
en el contenedor. Ahora lo que tenemos que
añadir esos dos ítems. Empecemos con
esto para agregar esto, solo
puedo crear un contenedor, luego podemos agregar esos dos como
texto. Hagámoslo primero. Tenemos que dar click aquí
y agregar el contenedor. Agreguemos un contenedor como este. Ahora lo que tenemos que hacer
es agregar a los titulares en este y luego dar clic aquí en el segundo
titular así, luego copiemos esos textos aquí, yo copio esto y lo
pego así, luego copio este
y lo pego aquí. Ahora ve al estilo y este
tamaño de texto debería ser P regular, lo que significa que ya
lo configuramos como párrafo así. Entonces aquí creo que
esto es titular. ver, es titular, así que agreguemos color
como negro así. Entonces tenemos que hacernos la
idea del espaciado. Parece que el espaciado
es como seis ex es así que agreguemos el espaciado como C. Haga clic aquí y
elimine este, luego agregue como así. Ahora tenemos que hacerlo centro, clic en el centro de línea de artículos. Entonces iré a
avanzar por adelantado, voy a establecer el tamaño de la cadena. No pasa nada.
Agreguemos un vamos a agregar el pad. Averiguemos el
relleno y agregémoslo. Entonces vamos a tratar de hacer
algo al espaciado. Son 20 por 20 y 12 por 12. Bien. Agreguemos
esos detalles aquí, arriba como dos, prueba derecha bien, abajo como dos, prueba derecha. Entonces tenemos que decres esto. Vamos a disminuirlo así. Debería ser así. Simplemente lo ajusto manualmente, después tengo
color de fondo y esta sombra. Vamos a agregar color de fondo, tenemos que hacer
la esquina como 20. Agreguemos esos detalles para agregar, hago clic aquí y doy clic
en Tipo de fondo. Entonces aquí selecciona el
fondo como blanco. Bien. Después da click a bordo
y aquí tenemos sombra de caja. Vayamos aquí y comprobemos
los detalles de la sombra. Entonces aquí tenemos la sección eff
en la sección eff. Tenemos los detalles. Es la posición cero,
cero, y nosotros 15, entonces el color es color negro
con 15% de opacidad Agreguemos esos detalles aquí, tenemos que hacer el desenfoque como 15 y el color como
negro color negro, y luego tenemos que
establecer la opacidad Para establecer la opacidad, en realidad tenemos que
obtener el código de color Para ello, primero selecciono el color como negro
y luego cambio a este HA aquí vamos y también
aquí lo pongo como Hs L, y aquí tenemos cero, cero, y aquí tenemos 15. Vayamos aquí y reduzcamos
estos dos hasta que llegue a 0.15 como último
valor de esta HSL, y ahora se está mostrando así. Bien. Ahora lo que
tenemos que hacer es agregar esquina de
dados como 20 así. Bien, acabamos de crear
esa sección, y parece buena, y ahora lo que tenemos
que hacer es agregar esto a aquí para agregarlo
en esta posición, voy a poner como absoluto, y ahora lo que puedo hacer es que
puedo cambiar el lugar, pero cuando lo configuramos como absoluto, nuestro cambio de diseño
arreglemos ese problema para arreglarlo, voy a layout y vamos a valorar
el till que se configuró así. Ahora puedo ir a avanzar y aquí puedo poner en marcha
el set como quiera. En realidad, a partir de aquí,
tenemos un problema, lo
voy a poner tas completo y por
alguna razón se vuelve más
grande de lo que
ganamos en realidad vamos cambiar esta costumbre con
default así. Ahora es perfecto y da clic aquí, luego configura esto toma para configurarlo, tenemos que verificar la posición, así que está aquí, así que
vamos a ajustarlo. Parece bueno, a lo mejor
añadimos demasiado espaciado, así que cambiemos este top a dos bien y abajo
a gustar bien. Ahora tenemos que hacer ya que esto ahora parece bueno y ahora lo que tenemos que hacer
es crear esta sección. Para crear esa sección, voy a crear una caja de imagen. Con cuadro de imagen, podemos crear
fácilmente esa sección, dar clic aquí y buscar imagen
o agreguemos cuadro de icono porque ese es icono tal vez agreguemos cuadro de
imagen porque en el futuro, podemos cambiarlo si queremos. Yo solo agrego entonces aquí, tengo que descargar este icono, dar clic en el icono, clic en Exportar vector, y aquí copio la
t y vengo aquí, después agregaré el
titular como esto lleve, luego elimino esta descripción porque no
necesitamos una descripción. Veamos el tamaño. El tamaño es regular 25
ir a sis y contenido, el color debe ser negro y la tipografía debe ser Ahora tenemos que eliminar este espacio entre el
icono y los tanques. Vamos a poner cero y en imagen, podemos con el ancho, pero por ahora entonces
vamos a ganar la imagen, haga clic aquí y directamente subir esta imagen y
eliminar el título, esto como igual concilar
aquí tenemos gran espaciado grande,
bueno para estilo en estilo, bueno para estilo en estilo, cambiar el espacio de la imagen
en no suceder si
agregamos menos valor agregando valor menos
valor no va a cambiar nada ¿Qué debemos hacer?
Eliminaré el margen y el relleno e iré al estilo
E en estilo E. No, iré al
contenido en contenido, cambiemos este título a D y es un
poco mejor. Ahora lo que tenemos que hacer es agregar fondo y esta
sombra para hacer eso, voy a avanzar de antemano, iré a esta
sección de fondo y aquí hago clic en tipo de fondo como
clásico en color secundario. Ahora veamos el espaciado, izquierda y derecha como y
arriba e abajo como. Vamos a esos detalles aquí, arriba e abajo como 20 e
izquierda y derecha como 20. Ahora tenemos que reducir las
esquinas de fondo aquí, tenemos que sumar 20
porque creo que es 20 centavo la radio fronteriza
o radio esquina es 20. Bien. Ahora tenemos que agregar esta
sombra para agregar la sombra. Tenemos que verificar los
detalles y aquí en borde, podemos verificar los detalles aquí I 15 desenfoque y voy a dar click en esta x y copiar este código de color para que podamos dit
directamente desde aquí, clic en él y en borde, haga clic en cuadro sombra, que será 15 y en este código de color. Perfecto. Ahora da click aquí, entonces tenemos que posicionarlo
igual que esto para hacer eso, verificar la posición, cambiar
por defecto a absoluto. Ahora podemos establecer el desplazamiento. Es así. A ver, veamos que la E debería ser y
esto debería estar aquí mismo. Hemos
creado con éxito la sección y ahora tenemos
que añadir este texto. Vamos a agregarlo en la siguiente lección.
101. Acerca de la sección de resumen: parte 02: Bien, ahora tenemos que
crear esta sección. Entonces comencemos. Primero, tenemos que agregar
un contenedor porque esto es de
manera vertical y dar click aquí, agregar un contenedor como este. Cuando repasemos la imagen, podemos ver el lugar que
podemos agregar contenedor, clic aquí, ir a avanzar, eliminar todos esos paran. Y ahora voy a añadir las columnas lamer primero
tenemos un titular, después tenemos un párrafo. Tenemos que encabezar,
primer titular. Y el segundo titular, el segundo titular debería ser P porque es un párrafo
y da clic aquí, luego copia este texto, pegarlo así, luego cambiarlo de estilo para tomar color como negro y
luego aquí copia esto nuevamente y pegarlo y
aquí deberíamos cambiar la tipografía a párrafo
y color del texto así Ahora tenemos que agregar el espaciado, por lo que el espaciado es de 20. Agreguemos el ritmo para
agregarlo rápido en el contenedor, y aquí en el diseño, agreguemos raw como 20. Bien. Ahora lo que tenemos que hacer es
sumar entre espaciado. Si comprobamos entre
espaciado como 90. Vamos a configurarlo, dar clic aquí, luego ir a Avanzar y
sólo podemos buscar margen izquierdo como 90. Perfecto. Ahora lo que tenemos que
hacer es agregar el botón. Aquí voy a buscar botón y dragón opper
botón así, entonces tenemos que agregar
el texto para que sea aprender más aprende
más como este y olvidemos el enlace por
ahora y vamos a estilo E en
E style change typogravito
button y el color
es color de fondo es este color azul
y el color del texto
es color
blanco Ahora, veamos el radio de
agua del 15 y agreguémoslo como 15 y no
necesitamos una sombra de caja, solo retírela
configurándola así. Hacer el como cero y ahora bueno entonces tenemos que checar
el tamaño intermedio. Pizarra el texto y haz clic en
y aquí está 2020 antes del 30, 30. Aquí tenemos el
acolchado es top 20, derecha 30, top 20, derecha, 30, y bueno. Aquí otra vez, tenemos este
espaciado, este extraño espaciado, y eso es un gran problema, pero sigue apareciendo y no
tenemos que hacer nada. Para arreglarlo, solo voy a
agregar margen negativo. Ahora lo que tenemos que hacer es en este botón secundario,
es bastante fácil. Entonces hagamos clic aquí y
agreguemos el botón o
simplemente podemos duplicar esto haciendo clic
derecho y dando
clic en obligado, entonces tenemos que agregar un
contenedor a aquí así Entonces agreguemos estos detalles dentro del contenedor y hagamos clic aquí y vayamos a avanzar
hazlo un cero y en disposición, agreguemos horizontal como dirección
y la columna será 20. Creo que son 20. Sí, son 20. Ahora lo que tenemos que hacer es quitar el fondo para quitar el color de fondo para
eliminar el color de fondo, voy a dar click en el botón y aquí voy a estilo y cambiar el color de fondo
a transparente y cambiar el color del texto
a primario así. Entonces lo que tenemos que hacer es agregar icono y también necesitamos
cambiar el texto. Cambiemos los
así y para agregar el icono, podemos hacer clic fácilmente en el icono
Biblioteca y aquí tenemos fontosm icon library y
veamos este nombre de icono En realidad, no hay
nombre para ese icono. Sólo podemos comprobarlo desde aquí. Busquemos como flecha aquí
tenemos el icono haga clic en
él y haga clic en Insertar, y aquí podemos
establecer la posición del icono. Voy a añadir la
posición del icono así y luego podremos
establecer el espaciado de los iconos. Veamos el espaciado de los iconos. Vamos a configurarlo como y tenemos que
agregar ESS personalizado para
aumentar el tamaño del icono. Entonces hagámoslo en
la siguiente lección. Aquí de nuevo, hago clic aquí y
tenemos que configurarlo
alinear el centro del elemento, así se alineará correctamente al
centro. Bien, hasta ahora tan bien. Ahora se verá así
102. Acerca de la sección de resumen: parte 03: Hola a todos. Ahora tenemos que
aumentar este tamaño de icono. Para ello, tenemos que usar CSS. Entonces comencemos. Doy click en este
icono de lápiz para editar el botón, y aquí tenemos un lugar
para agregar ID a este botón. Por lo que agregaré ID como
nuestro proveedor BTN. Simplemente agrega este ID
y cuando lo
agrego, no agrego ningún espacio porque tenemos que
agregarlo en una línea. Ahora lo copio, después voy a Avanzar. De antemano, tenemos un
lugar para agregar CSS personalizado. Ahora, ya creé el ID, así que selecciono ese ID en el CSS para hacer esa etiqueta
hash de Ipress y pegue el nombre ID y aquí
es como seleccionamos ID en el CSS y ahora
hago clic en Publicar Entonces aquí hago clic en Vista previa de
cambios y en código CSS, tenemos que agregar este tipo
de corchete para agregar código DA. Ahora me desplazé hacia abajo
solo escriba aquí, haga clic en y haga clic en Inspec Ahora hago clic en este icono y
selecciono el icono así. Aquí está el icono. Si verificamos aquí, nuestro ID es visible y ahora tenemos que
seleccionar esta parte para hacer eso, puedo copiar esta clase y
luego venir y agregar espacio, usamos punto para seleccionar
la clase así. Bien. Ahora aquí voy a añadir el código para aumentar
el tamaño de este icono. Este icono es texto, así que agregaré código
como tamaño de fuente, y aquí lo agregaré como
30 pixel 30 pixel es demasiado grande. Cuando lo agrego, puedes ver la vista previa en vivo. Qué tal 25, 626 es mejor. Cuando agrego 26, solo baja, así que tenemos que maquillarlo. Agrego punto y coma y aquí voy a agregar código pequeño como margin top, margin top, presentador,
entonces aquí voy a agregar algunos Agreguemos menos diez
px, es demasiado. ¿Y qué pasa con cinco? Todavía es
demasiado. ¿Y qué pasa con dos? Uno parece uno, no, dos serán dos será
la alineación perfecta. éxito hacemos que
nuestro icono de botón sea más grande y ahora hago clic en publicar
y en la vista previa real, Con éxito hacemos que
nuestro icono de botón sea más grande
y ahora hago clic en publicar
y en la vista previa real,
se verá así en el siguiente video, agreguemos animación
a esta parte.
103. Acerca de la sección de resumen: parte 04: Ahora tenemos que agregar
animación, hagámoslo. Primero, necesito agregar momento a estos dos elementos cuando
nos desplazamos por el sitio web. Primero, hagámoslo
por este contenedor. Selecciono el contenedor
o selecciono aquí. En realidad, este es el contenedor. Selecciono contenedor,
luego en estilo, se
puede ver el efecto de desplazamiento Este efecto de desplazamiento se
aplica para los elementos interiores. Entonces no está funcionando, necesitamos agregar
efecto de desplazamiento a toda esta sección Para ello, hago clic en
avanzar por adelantado, tenemos sección de efecto de movimiento. En efecto de movimiento, podemos
agregar este efecto de desplazamiento. En efecto de desplazamiento, tenemos
muchas opciones y aquí
tenemos característica para seleccionar dispositivo que queremos
usar el efecto Pero por ahora,
mantengámoslo así. Entonces necesito agregar desplazamiento
vertical. Cuando me desplace por esto, necesito ir esto arriba y abajo. Entonces para hacer eso, hago clic en
este icono de lápiz, y aquí cuando selecciono el efecto de
desplazamiento, puedo configurarlo hacia abajo o hacia arriba. Entonces, si lo configuro como arriba, subirá cuando lo desplazemos. Cuando lo desplazemos
hacia abajo, va a subir. Cuando nos desplazemos hacia arriba, bajará. Y lo necesito abajo. Ahora tengo que
poner el punto de vista. Bien, ahora subo y
veamos los movimientos. Cuando nuestro punto de vista está aquí, podemos mostrar este
icono en esta parte, pero no lo necesito
para mostrarlo aquí. Entonces para arreglarlo, voy a cambiar este
punto de vista abajo a aquí. Entonces si llamo
, comenzará desde aquí. Ya ves, cuando el
fondo así, empieza a desplazarse hacia abajo y tenemos que agregar este punto de
vista superior para agregarlo, tenemos que bajar
más que esto,
así voy a agregar nuevo
contenedor vacío como este. Entonces agreguémoslo
media de altura como 800, veamos aquí 800
es suficiente. Y agradable. Ahora otra vez, hago clic aquí en
un hacha de movimiento de baile y aquí, veamos qué pasa si
nuestro top en nuestra parte superior golpea como aquí, necesito llegar solo a
esta parte así. Ahora puedes ver que está
cambiando claramente y si quiero
hacerlo horizontal, puedo usar este escolin
horizontal Ahora va a ir a ambos
lados así, pero me gusta la parte superior e
inferior y para esto, agreguemos de arriba a abajo. Para ello, selecciono esta casilla de imagen y voy
a avanzar con anticipación. Vamos a movimiento a popa y aquí
pulsamos en scroll sobre scroll
vertical, voy a agregar dirección de, lo que significa que cuando nos desplazemos, esta sección va a subir. Arreglemos la w
cuando venga aquí, necesito que la parte superior
baje así. Sólo necesito ir
así y ver, bien. Tenemos que cambiar la posición
de esto para mejorarlo. Demos clic en este cuadro de
imagen y vayamos a maquetación y en el desplazamiento
vertical, pongámoslo aquí. Ahora creo que debería
funcionar mejor que antes o ¿qué tal
ponerlo aquí en medio? Sí, cuando lo agreguemos a media, funcionará perfectamente. Bonito. Bonito, bonito. Ahora vamos a los
effxs de movimiento y damos clic aquí. Entonces pongamos el
fondo. Aquí, lo haré. Aquí si esto va así, configuraré este pase superior aquí, luego desplácese hacia arriba, desplácese hacia
arriba funcionará bien. No, algo anda mal. En realidad, tenemos que poner esta posición de maquetación
más media así, aquí, veamos
algo mal con ello. Pero ahora creo que es trabajo
bien. Es el trabajo bien. Seguramente, tenemos que
hacer este pedacito. Bien, ahora es trabajo Bien. Tenemos que jugar con esos valores utilizados para obtener
el mejor efecto de movimiento, y ahora creo
que se ve bien. Bien. Simplemente lo agregamos y aquí, agreguemos el efecto de movimiento
a toda esta sección. Por lo que hago clic en la sección
y voy a Avanzar porque agregar más efectos de movimiento y transacción
ralentizará el sitio web, así que tenemos que tenerlo en mente y agrego este
tipo de efecto. Vamos a publicarlo y vamos a
verlo en el sitio web real. Sí, funcionará así,
pero esto no debería ser
similar al diseño del encabezado. Veamos que el efecto de movimiento de este contenido de encabezado se está desvaneciendo, así que tenemos que agregar fade
en esta sección Efectos de movimiento,
no desvanecimiento patrte, así. Publica. Ahora si
revisas el diseño, sí, se verá así, aquí tenemos un problema. Cuando desplazamos esto hacia arriba y hacia abajo, este ritmo es que el
ritmo está cubierto, así que tenemos que arreglar realmente
tapen en la pantalla más grande, pero aún así tenemos que arreglarlo, no Para arreglarlo en el diseño, agregaré personalizado con me gusta, entonces debería estar bien. Yo creo. A ver, puede publicar y
algo mal. ¿Qué es eso? Hagamos que esta
estructura desapareciera y disminuyamos esta sección también. Cuando lo disminuyo, este diseño vez más grande
y hay un problema, tenemos que arreglarlo en
avance bueno y aquí,
vamos a hacer que se encoja
offset está bien. El tema. Hagamos clic
en este texto y hagamos que el texto se centre y
eliminemos todas esas cosas y con full hagamos lo mismo con ancho completo
y hagamos que se alinee al centro, y veamos hasta
que tengamos el problema. ¿Por qué sucedió? Lo puse
como el arreglo con algo o. ahora podemos deberíamos
poner esto en fixel Hagámoslo como 500, 500 es demasiado débil y 400, 200, 202 pequeños, 300, 300 es para la semana dos. En realidad, podemos comprobar
el tamaño desde aquí. El ancho es de 215. ¿A qué hora lo hago? 215 debería ser el viento. Bien. Ahora debería estar bien. Ver, pequeño fixel que el peso
pase ahora es bueno, publícalo y
veamos en el diseño Sí,
ahora se verá así hasta que tenga un problema. En realidad,
tratemos de arreglarlo también. Pienso en la izquierda y
derecha a ello así. Pongamos nuestro 250 personalizado, tal vez 200 200 va a estar bien. No multa. 15 publicar. Ahora está funcionando
bien, bien.
104. Diseño de la sección de servicios: parte 01: Hola a todos. Ahora tenemos que
diseñar esta sección. Pero antes de diseñar
esta sección, tenemos que encontrar mejores íconos. Esos íconos no son
guapos y no representa el servicio que brindamos en la sección de
servicios. También, aquí, tenemos otros íconos y es
mejor en Slim icon. Para encontrar iconos, podemos usar
sitios web como Adobe Itok e iconos de
búsqueda o podemos usar iconos de
Google para usar íconos Los iconos de Google son libres de ir
al icono de material de Google, solo
puedes buscar en Google
los iconos de Google en Google. Obtendrá
el símbolo material y los iconos pincha sobre él y aquí
tienes el icono. Necesito cambiar el
aspecto de esos iconos, voy a reducir el ancho a 200 y vamos a hacer
gris dash 200. Entonces el tamaño óptico será 40 weixel 40 weixel es mejor y aquí el estilo será redondeado y material símbolo nuevo Yo solo lo selecciono
y aquí hagamos la calificación como cero y hagamos que el icono sea un poco más grande como 300 y hagamos calificación como 200 y aquí
podemos buscar en el icono. Primero, necesitamos
reemplazar este ícono de teléfono. Para ello, simplemente hago clic en el icono del teléfono y
vamos a obtener su tamaño. Es 32 pixel con vamos a
buscar aquí como teléfono, aquí tenemos un icono de teléfono y vamos a seleccionar este
todo el teléfono y aquí
tenemos que hacer este tamaño como 32 pulsamos Enter y el
color el color es blanco, hagamos el color
blanco y hagamos clic en PNG, y el icono fue
descargado y ahora ve aquí y solo haz clic
aquí imagen y video, selecciona el icono así y presiona Enter y ahora
puedes simplemente dar click aquí. Ya lo seleccionamos. En realidad, hay que
seleccionar el icono co aquí, así que ahora da clic en el icono
y ponlo así. Ahora lo que tenemos que hacer es disminuir
poco su tamaño en realidad, tenemos que seleccionar el icono y disminuir su tamaño así. En realidad, se diseña 32 píxeles. En fin, ahora vamos a hacerla altura ya que 32 32 es demasiado pequeña, ¿
no crees? Sí, 32 es demasiado pequeño. Hagámoslo 48. 48 es mejor, mantengamos
el 48 como el tamaño. Ahora bajemos y
aquí tenemos una enfermera. Busquemos aquí como
enfermera Cuando buscamos enfermera, tenemos este tipo de cosas. Busquemos como hospital bueno. ¿Qué pasa con la salud? Bien,
en salud, busquemos. Busquemos algún ícono que sea
adecuado para ese ritmo. Sí, este icono va a estar bien. Seleccionarlo, o ¿tenemos
diferentes íconos mejor que él? No, a partir de esos iconos, este icono será
adecuado para ello. Solo intentemos
disminuir el peso. Obtener un icono de línea delgada, y el color del icono es azul. Yo solo vamos a copiar
este color azul para que podamos cambiar
fácilmente el
color del icono desde aquí así. Bien. Entonces vamos a comprobar el tamaño. El tamaño es 57. Hazlo 57. En realidad,
57 es demasiado grande. Hagámoslo como 48. Y haz clic en Copiar y descargar GTu. Ahora ve aquí y selecciona el icono y haz clic en imagen para agregar en
realidad no se actualizaba. Da click en toda
esta
sección para agregar así y ponerla así. Ahora, la talla es 57, vamos a reducir esta talla a 57. El 57 es demasiado pequeño. 98 se va a quedar bien. Mantengámoslo como nueve. En realidad, la Línea 20 es
más grande de lo que imagino. Se puede eliminar este fondo haciendo clic aquí y
dar clic en el cultivo, entonces podemos copar el
fondo así. Entonces tendremos mejor icono. Ahora, ¿qué tal del 30 al 57? Ahora hasta el momento tan bueno. En realidad, el icono delgado se ve
mejor que este ícono. En fin, hagamos rojo como 100 veamos el
aspecto delgado del ícono delgado. Aquí está el delgado.
Aquí está el delgado. Da clic aquí y es. De todas formas. Ahora tenemos que
cambiar esos íconos. Primero, vayamos
preámbulo y busquemos. Se ve bien. Haga clic aquí. Tenemos una botella de leche y
queda bien para acá. Tenemos que encontrar el tamaño del icono
vectorial. Es 60 por 80. Hagámoslo un 60 y el
color es el color es el azul. Haga clic en confi eng download y seleccione este icono
aquí y haga clic aquí Entonces solo agrégalo así. Yo no agregué. Oh, ya veo por qué no está sumando porque esto
es un componente. Da clic aquí y haz
clic en Separar instancia, y luego puedo agregar
¿qué pasó? Lo que pasó aquí. Ahora, agreguémoslo aquí, basta con hacer clic así y
luego gotearlo así Ahora disminuye su
tamaño. ¿Qué pasó? Aquí. En realidad,
tengo que quitar esto oh vamos a esta imagen así. ¿
Con qué estaba la imagen? Son 60. Seleccionemos la imagen
y la hagamos con 60,
no, nada bueno, 120, el tamaño del fondo
debe ser 12110 El tamaño debe ser 110. Ahora tengo que dar click sobre esta imagen y hacer clic en
Recortar y apuntalarla así porque podemos hacer esto más grande cuando eliminemos
este tamaño innecesario, entonces puedo hacer
esto como 60 así pre seleccionar la imagen y presionar
shift y hacerla más grande. Son seis Bien, se ve bien, y aquí tenemos este texto, vamos a copiar la parte del embarazo. Bien, aquí tenemos una imagen de
embarazo y da clic en PNG para descargarla y
reemplacemos esta imagen. Da click en esta imagen
para eliminarla. Y aquí, agreguemos esa imagen. Lo acabamos de descargar
aquí luego doble toque en la imagen y vamos a recortar espacio
innecesario así. Ahora podemos disminuir su tamaño desplazamiento de espacio y
disminuir su tamaño así. Ahora tenemos mujer
copia hembras humanas. Busquemos P y
aquí tenemos hembras. Simplemente podemos agregar este
tipo de ícono femenino
o ícono de mujer como
este o o este ícono funcionará Vamos a
descargarlo y
pongámoslo quitar esto aquí
y no tan apretado. Este es el click
sobre él y pegarlo dentro de la caja
así y ponerlo. Tenemos que comprobar
el tamaño hasta ahora tan bueno y ahora tenemos medicina
familiar, así que vamos a copiarlo y
pegarlo así como de familia. Me gustaría agregar este tipo de icono porque este tipo de icono dará click en PNG para descargarlo
y eliminar este. Quickie, pegarlo así, luego deprimir el ajuste Ahora es bueno. Ahora lo que tenemos que hacer es agregar esos íconos a nuestro sitio web
de WordPress. Da click en este icono y
en X qué pulsamos en Descargar e ir a la
página web y da click aquí, luego da click aquí y solo
podremos descargarla. Es muy pequeño archivo, así que puedo Bien. Si, solo descárgalo y di así y queda bien, click en publicar para guardar y ahora podemos empezar
a diseñar este sexo
105. Diseño de la sección de servicios: parte 02: Hola a todos. Ahora,
vamos a crear esta sección. Entonces aquí voy a nuestro tablero, y aquí tenemos que crear un contenedor como este
y veamos el tamaño. La estatura media fue 666. Hagámoslo
aquí Mnhight 66,
seis, y ahora bien aquí,
y aquí tenemos que agregar
este título para agregarlo, solo
lo copio así, luego ven aquí y agregamos
el encabezado así, el título de la
cara y vamos al conjunto de estilos
Alinear centro y Tipografías
cabecera y el color del texto debe ser
este color negro y el texto
debe cortarse de aquí,
así que para hacer eso agrego Bro tengo
que comprobar el inbteen cabecera y el color del texto debe ser
este color negro y el texto
debe cortarse de aquí, así que para hacer eso agrego Bro tengo
que Son 120. Vamos a agregarlo, haga clic aquí y vaya a Avanzar
el margen superior es de uno a 20. Bien, hasta ahora tan bien. Ahora lo que tenemos que
añadir es esta sección. Si revisas esta sección, tenemos un arrusel I elemento para agregar arrusel podemos click en este agregar elemento
y buscar carrusel Y cuando lo busco, obtenemos este tipo de resultado y aquí solo agrego este artículo de auto. Ahora lo que tengo que hacer es quitar
esas cosas innecesarias. Primero, retiraré la
primera diapositiva y guardaré solo dos diapositivas y
la diapositiva en exhibición serán dos. Entonces voy por aquí, vamos a establecer en, el set in está bien. Navegación, la navegación está bien. Hagamos cosas glo después de
completar el diseño. Ahora bien, si revisas el
diseño cas, está demasiado cerca. Entonces para arreglarlo, hago clic
en este contenedor de edición, y ahora si revisamos aquí, podemos verificar la vía
en Slider hashtag uno. Entonces, si queremos,
podemos cambiarle el nombre también. Pero por ahora, voy a
quitar eso y aquí A vamos a quitar
el espaciado así. Ahora tenemos que agregar el pad izquierdo y derecho
adentro para agregar el pad adentro,
hago clic en el contenedor
y aquí tengo que
agregar padnas derecho 140
y padnus izquierdo Bien. Ahora rápido y aquí
tenemos dos contenedores. Selecciono la causal y
voy a Avanzar de antemano, eliminar todas esas cosas
innecesarias aquí primero, tenemos que agregar este título y aquí busco cuadro de imagen así,
solo hay que poner
cuadro de imagen dentro de
aquí y con cuadro de imagen, podemos completar la
tarea con bastante facilidad la alineación quedará a la izquierda y la posición de la
imagen es correcta. Ahora voy al contenido en contenido. Agreguemos esos
detalles así, luego copiemos este ritmo como este y
descarguemos esta imagen, seleccionemos el icono y
exportemos en exxpot,
pulsemos en icono Exportar Entonces aquí, puedo agregar
esto a un pequeño PNG, pero para éste, solo
súbelo así. Agreguemos texto ALD como esta parte
pediátrica y hagamos clic en Consilar ahora seleccione
el cuadro de imagen y solucionemos los problemas Primero, averiguaremos que el tamaño
intermedio es de 20 por 20. Bien. Ahora ve al
estilo E en estilo, Imagepason es 20, 20
contentpacing es 20 Ahora ve a imagen y borde de
imagen no es
ancho de imagen será 100%. En realidad, no es
un ancho de imagen. De esa manera, la imagen utilizará el tamaño predeterminado y ahora tenemos que hacer la imagen en el
centro para hacerlo. Cambiemos este STMLTg a D y ahora pasemos al estilo E
y en el contenido, el color periódico debe ser el color texto y la tipografía
debe ser Bien. O quitar el margen y el relleno que
será de ancho completo, entonces aquí la
alineación vertical debería ser media hasta ahora
tan buena y ahora
tenemos que agregar esta sombra de
fondo, sombras de
roca o hacer
clic en la sombra de roca y es 15 y aquí
tenemos la información. Hagámoslo. Estamos
listos, si recuerdas, Selet la caja de imagen ir
a avanzar con anticipación, tenemos la por frontera Orden libro sombra, el nervio es 15 y el color debe ir a HL X entonces ven aquí y el color debe cambiar para dar click aquí y HXL seleccionar el CSS, copiar el código de color
y venir aquí Es el código de color así, solo
agregamos una fecha y
tenemos que cambiar el radio del
borde. Si verificamos el radio del borde, el tablero reduce es 20, vamos a reducir como 20. Bien. Ahora nuestra
sombra no está funcionando. ¿Recuerdas que este mismo problema ocurrió en el diseño de Figma Y lo que hicimos es simplemente
crear padding como 120, luego agregamos margino aquí como Hagámoslo por éste. Para ello, selecciono
el contenedor. antemano, cambio este 140 a 120 y aquí también lo hago 120. Después haga clic aquí.
Para este deslizador, puedo agregar relleno derecho como 20 y el relleno izquierdo será 20. Bien. Cuando hacemos eso, podemos ver claramente la frontera. Como tenemos que añadir
el acolchado superior como 20 y el acolchado inferior
también será 220. Ahora lo que tenemos que hacer es agregar el relleno de
esta caja de imagen, es 20 y dar clic en
el cuadro de imagen y aquí, clic en Icono de Cadena luego agregar 20. Hasta ahora tan bueno y
se ve así, entonces lo que tenemos que hacer
es simplemente duplicar este y aquí tenemos que
averiguar el tamaño entre medias. También es 220, así que solo
podemos hacer click aquí. O para maquetar en maquetación, podemos agregar como 20. Ahora tengo que cambiar
esos detalles. Vamos a cambiarlos,
copiar desde aquí, clic aquí y pegar
así y cambiar la
imagen para cambiarla. Tenemos que descargar
este icono y copiar este texto para agregarlo al
texto antiguo y hacer clic en ocultar Bien. Ahora solo creamos un
lado y ahora voy duplicar esta diapositiva porque necesitamos un segundo lado para hacer eso, voy a Carsels y hago clic
en este botón duplicado para duplicar el deslizador aquí voy a agregar slider
a como nombre, y ahora tenemos que cambiar los
detalles como lo hicimos antes Así haz lo mismo
hasta aquí así así. Exportar, haga clic en el icono
Exportar aquí. En el exportado luego
agregue Al tag así, haga clic en Consiler ahora son buenos
y aquí tenemos un problema Este es
más grande que este, para arreglarlo, hago clic en
esta caja de imagen y aquí, da
clic en crecer y
crecerá así y podemos hacer lo mismo
con esos artículos también. Ahora aquí tenemos un gran
espacio para eliminarlo. Doy click en Karasel e incara iré
al estilo por estilo, brecha entre será cero
y la bola reduzca pad adentro, no
necesitamos ninguno Ahora lo que podemos hacer es hacer
clic en la diapositiva uno y agregar el pad derecho como diez. Entonces aquí haga clic en éste y vaya a avanzar agregar el
pad izquierdo en como diez. Ahora se ve bien. Aquí en carrusel, podemos
cambiar los detalles del contenido. Entonces aquí podemos agregar nombre de
carrusel, así voy a agregar servicios, y luego aquí, tenemos que agregar un slider más y
cuando agrego el slider, puedo ver este punto Cambiemos esos
detalles de punto para hacer eso. Debería ir a navegación
en navegación, no en la flecha, debería
ser inación de página. En paginación, se establece como puntos y vaya a Estilo en paginación de
estilo Veamos el estilo. Entonces creo que el estilo es 220. Entonces veamos aquí está la D das. Yo solo reviso
el estilo son 20. Entonces hagamos el espaciado como 20. Es espacio desde el deslizador. Veamos el espacio
desde el deslizador. Creo que también son
20, pero veamos. Sí, son 30, no 20. Hagámoslo 30
posición es centro, luego talla averigua el
tamaño de este punto. Son 20 por 20, hagamos talla como 20. El espacio entre punto
será de 20. ¿No es así? Sí, son 20 ¿y qué menos? Parece demasiado, así que hagámoslo como
diez sigue siendo demasiado. Que sea como seis es mejor. Y color, voy a
hacer color primario como y nuestro color
será este color de acento. Bien. Ahora ha funcionado perfectamente
y ¿tenemos flechas? No, no tenemos flechas, así que voy a quitar esas flechas para
eliminarlas para la navegación, solo
puedo poner cero o
en el contenido, veamos, ¿hay alguna manera de que podamos simplemente destomar esta parte de flecha y simplemente
desaparecerá así Bien. Ahora
agreguemos otro contenido. Para agregarlos, tenemos
la lista de contenido. Así que vamos a conseguirlo. Bien,
aquí está el contenido, y tenemos que agregar esos contenidos a la siguiente
diapositiva. Entonces hagámoslo. Simplemente copiarlo y poner contenido
y pegarlo así. Entonces otra vez, copia la
pequeña descripción. En realidad, no pequeña descripción. La descripción del préstamo debe ser la parte que tenemos que agregar. No, se trata del contenido de la página. Aquí está el contenido que
tenemos inmunidad y Maxine, cópielo aquí nuestra sección de
servicio, agregue el contenido de
ahí y sea éste, luego copie la pequeña descripción, peguela así, como aquí y
primero agreguemos el contenido, luego podemos agregar los títulos soporte de salud
mental, adamall descripción, pegarlo, luego copiar este, agregarlo aquí y luego pegar esto. Bien, pegarlo aquí. Bonito. Ahora tenemos que
agregar las imágenes. Entonces para agregar las imágenes, copiar el texto de aquí, vamos a copiar la
parte de vacunación y
ponerla en la vacuna
será el texto, ponlo en el Google. Da click en PNG para descargar y aquí tenemos que
agregarlo para agregarlo, voy a crear una instancia
de esto así, luego la separaré, clic aquí para desconectarla, y luego simplemente puedo reemplazar
esta imagen con el icono y clic en imagen y aquí
tenemos la vacuna así Entonces nosotros la parte axing
y la hacemos en realidad, solo
podemos agregarla como aquí En realidad, el just on
puede hacer clic así, luego hacer clic en él
y vamos a ponerlo vamos a ponerlo dentro
del icono y eliminar este vector y simplemente
disminuir este tamaño así y aquí debería ser tamaño
como Vamos a ver tamaño 125,
110, vamos a hacer este
tamaño de icono como 125, uno Bien. Ahora esto se ve perfecto
y da clic aquí, luego exportar, dar
clic en el icono de exportación ,
y
voy a seguir continuar primero , voy a poner esto aquí, después seguiré manteniendo generador,
copiando este texto, ir al material
y descansarlo así. Entonces vamos a conseguir este tipo de icono y ponerlo aquí mismo está. Acabo de configurar así,
es bueno, lo exporto, y luego la salud mental, busco salud mental.
Buscar mentor. Aquí tenemos
parte de psicología, descárgala, ve aquí y una imagen como esta, luego selecciona el icono, da clic en icono de Exportar, y después tenemos
asesor buscar salud. ¿Qué pasa con la nutrición? Nutrición. Este icono
será trabajo descárgalo, da clic aquí y póngalo así. Ahora voy a dar click en el icono de Exportar. Ahora podemos agregar esos íconos. Da click en este cuadro de imagen, da
click aquí y primero
tenemos el ícono. Creo que este es el primer icono. Debería ser el icono. Sí, sí, sí, es el icono, copiarlo y copiar el
título para agregar un texto ol. Agregar texto Ol es
realmente importante porque ayuda a
franquear su sitio web, franquear esta imagen
en el motor de búsqueda. Siempre trato de agregar l tag y
luego lo que tenemos que agregar, creo que esta en mental
creo que agrego la imagen equivocada, pero es imagen mental, salud
mental, y simplemente
no la agrego por ahora. En realidad, la salud es
tamizar y prevenir la atención. La salud es la pantalla y la atención
preventiva, da clic en ella, y esto debería ser que la
búsqueda no puede esto. En realidad, voy a
comprobarlo en el diseño. Entonces, veo que este de
aquí es el indicado. Puedo canalizar ahora tenemos un espacio
y pulsamos en seleccionar. Bien, aquí, podemos agregar el ícono de salud
mental así. Bien. Ahora aquí podemos
agregar ese ícono de manzana. Muy bien, haga clic en Publicar. Veamos el diseño
y nuestro diseño se verá así
y podemos agregar más su trabajo perfectamente
y podemos agregar más cosas como
efectos de portada y otras cosas. Vamos a agregarlos después de
diseñar todo el sitio web. Creo que eso va a ser mucho mejor que agregarlo desde aquí. Aquí tenemos problema para solucionarlo. Simplemente haré clic en Casel
e iré a set in set in. Voy a quitar el scroll
infinito y creo que
solucionará el problema, lo
publicaré y ahora
veamos, veamos. Simplemente arreglo no más
scroll infinito y no más problema. Ahora hasta ahora tan bien y te
veré en la siguiente lección. Tenemos que agregar icono Su efecto. En realidad, agreguémoslos después de completar el
sitio web. Adiós.
106. Mejorar la seguridad: Hola a todos.
Antes de ir más allá, mejoremos la seguridad
de nuestro sitio web de WordPress. Entonces hay algunas
cosas que
tenemos que hacer como primer paso,
vamos a instalar el plugin de seguridad. Así que voy a ir a plugins y
hacer clic en en Nuevo Plugin. Bien, aquí
buscaré Word Pence. Ahora verás la
seguridad de Wordpens por WordPensPlug in. Así que vamos a instalar este plugin. Da clic en Instalar ahora, y está Instalando
luego hago clic en Activar. Bien. Aquí voy a dar clic, obtener una licencia de Word Pens. Aquí tenemos plan de precios, y voy a usar Word gratis Bland Aquí, hago clic en
obtener licencia gratis, y aquí voy a
hacer clic en Estoy bien, esperando 30 días para la
protección de nuevos hilos, da clic en él, y aquí
agregaré mi correo electrónico. Entonces te gustaría que la alerta de seguridad
y vulnerabilidad de
WordPress te
enviara por correo electrónico, haré clic en No
y aquí haz clic en esta casilla de verificación
para aceptar los términos y condiciones. Después hago clic en registrarme. Ahora enviará un correo electrónico
a nuestra dirección de correo electrónico. Iré a mi
cuenta de Gmail y revisaré el correo electrónico y aquí
me llegó el correo electrónico. Simplemente voy a hacer clic en Instalar
mi licencia automáticamente, y aquí se redirigirá
al sitio web y hago clic
en Instalar licencia. Bien, ahora hago clic en. Ir al tablero de instrumentos. Bien, instalamos
con éxito el complemento de seguridad Wordpens
en nuestro sitio web de WordPress, y ahora tenemos que hacer
alguna configuración Entonces, como primer paso, verás que
tenemos un mensaje para
habilitar la actualización automática del complemento de seguridad de
Wordpress. Entonces hago clic en
habilitar actualización automática. Si no lo viste,
puedes ignorarlo, y ahora primero, voy a hacer clic en
este firewall también, aquí
verás una llamada de mensaje para que tu sitio sea lo más
seguro posible. Tómate un momento para optimizar tu firewall de
aplicaciones web Wordpens, así que hago clic en click
aquí para configurarlo Bien. Ahora
obtendrás este tipo de pop up y aquí voy a seleccionar esta
versión recomendada y dar clic en Descargar archivo HT Access para
descargar nuestro archivo de acceso HD, y aquí solo puedo hacer clic en
Continuar y dar clic en Bien. Ahora estamos en la sección de
firewall y el
estado del firewall de la aplicación web es actualmente
modo de aprendizaje y
automáticamente habilitará el firewall en nuestro sitio web
después de unos días para
que sea preciso, sucederá el
13 de febrero. Lo voy a mantener así y ahora puedo dar click en
Ican y eliminar esto. Entonces aquí podemos iniciar
Ican voy a dar click en iniciar nuevo Ican y lo
hará Ican nuestra página web. Entonces iré a Seguridad de inicio de
sesión, eliminaré esto y en seguridad de inicio de
sesión, podemos agregar
autenticación de dos factores, pero no suelo habilitar la
autenticación de dos factores para nuestro sitio web de WordPress porque
tengo otra forma de
proteger nuestra página de inicio de sesión, y por ahora, haré clic
en set in on set in, desplácese hacia abajo y aquí hago clic en Habilitar recaptura al iniciar sesión
y página de registro de usuarios. Entonces con esta función, podemos agregar la
recaptura de Google a nuestro sitio web Doy clic en esta página de administración de
recapter y se redre a
nuestra recaptura de Google Página. Al iniciar sesión
en esta página, puede hacer clic en
este botón Crear, y aquí podemos agregar los detalles de
nuestro sitio web. Aquí tenemos que añadir una etiqueta. Agreguemos una etiqueta como
nuestro nombre de dominio. Así, sólo voy a añadir sólo el nombre de dominio y
re tipo de capítulo será. Entonces aquí tenemos que
agregar nuestro nombre de dominio. Simplemente copiaré el nombre de
dominio y eliminaré las cosas y solo usaré el
domame con.com o puntos En este caso, puntea, luego hago clic en Agregar dominio
y se agrega con éxito. Y aquí tenemos que configurar plataforma
Google Cloud y
ya creé algún
proyecto en Google Cloud, así que voy a elegir uno de ellos, luego hago clic en Subm Ahora obtenemos la
clave lateral y la clave de seguridad, así que simplemente
los voy a copiar y pasarles
así y vamos a pasar esas
claves y luego hago clic en Guardar agregamos con éxito
iniciar sesión seguridad para verificarlo, me desconectaré
del sitio web y cuando vaya a nuestra página de inicio de sesión de
WordPress, veremos esto protegido
por el logotipo de f capter, lo
que significa que
se agregó con éxito a nuestro sitio web Ahora hago clic en Iniciar sesión de nuevo. Bien. Después en bolígrafos de palabras, vayamos al tablero de instrumentos. Entonces vamos a escanear página
y verificar el resultado. Actualmente, no
tenemos ningún problema encontrado, y eso es algo bueno. Si ves algún problema, puedes revisarlos y solucionarlos. Ahora voy a ir a L
ptionsOelOptions, voy a mantener la mayoría de
ellos por defecto, y en preferencia de correo electrónico, marcaré el correo electrónico si
Wordpens está desactivado
y enviarme un correo electrónico si el
firewall de la aplicación web de Wordpens está apagado, y no necesito alertarme Si lo agregamos, vamos
a recibir muchos correos electrónicos, y no necesito este. No necesito este. Si tu sitio web tiene
mucho hilo, deberías habilitar esos dub, pero para no es necesario y no necesito
este, este,
este, y solo
guardo esta alarma cuando hay un gran aumento en la detección de
ataques en mi sitio Cuando establecemos esas preferencias de
correo electrónico, obtendremos los correos electrónicos para
las actualizaciones más necesarias. Ahora hago clic en Guardar hange
107. Cambiar la URL de inicio de sesión de WordPress: Hola a todos. Podemos
acceder a cualquier sitio web de WordPress, página de inicio de
sesión usando.
Hola a todos. Podemos acceder a cualquier página de inicio de sesión de
wordpress por tipo nuestro sitio web. IrlahWPadmin. En este caso, diseño
de sitios web personalizados
dot slash WP admin Cualquiera cómo acceder a la
palabra prensa página de inicio de sesión. La mayoría de las veces, usamos el
nombre de usuario como Admin y si alguien ejecuta un bot en tu página de inicio de sesión o intenta
adivinar los datos de inicio de sesión, esa persona podrá acceder
al panel de WordPress. Para solucionarlo, podemos cambiar URL de la página de inicio de sesión de
Wordpress. Hagámoslo. Primero, voy al panel de
WordPress iniciando sesión
en el sitio web de WordPress, y aquí iré a
plugins y agregaré nuevo plugin. Y aquí buscaré WPs H Login presentador ahora
tenemos este wPs hide login, plug in y actualmente
no está probado con nuestra versión de Wordpress Pero intentemos instalarlo. Cuando revises esta lección, es posible que sea compatible
con tu sitio web. Doy click en Instalar Ahora
y da click en
activarlo con éxito activar y ahora voy a
sobrepasar el set in en set in, podemos ver WPs hd og in Simplemente haga clic en él y
cuando me desplace hacia abajo aquí, podemos especificar la URL de inicio de sesión y cuatro oh cuatro oh
página no encontrada URL, lo que significa que podemos
crear una página personalizada cuatro páginas no encontrada
y configurarla aquí, y por ahora, solo
cambiemos la URL de inicio de sesión. Para ello,
solo puedes cambiar este texto, así que voy a agregar aquí GA
login así y siempre recuerda memorizar esta URL o el texto que
vas a agregar Solo voy a agregar login. Si olvidas esta URL, no
podrás acceder
al panel de WordPress. Tendrás que editar la
base de datos y el archivo plug in. Siempre recuérdalo. Simplemente agregaré inicio de sesión y haré
clic en Guardar cambios, y luego haré clic en Logo. Cuando hago clic en Cerrar sesión me cambio la URL de la
página para iniciar sesión, y ahora si trato de
agregar WP admin, se redre a la página
cuatro oh cuatro Agreguemos login aquí, así que ahora puedes compartir esta URL solo con el
nombre de usuario y contraseña. Si alguna persona que intente agregar
WP admin o intente iniciar sesión, esa persona no
podrá hacer eso, y esto ayudará a mantener el
sitio web profesional y nadie sabrá sobre la
página de inicio de sesión de su sitio web. Bien, ahora hago clic en
Entrar en el sitio web. Aquí podemos ver la
actividad de las tendencias de Word en la semana pasada. En realidad, no necesito fechas, así que iré a la
opción Pantalla y destomaré esta actividad de Worden en
el ícono de la semana pasada
y Earl
108. Crear campos personalizados con el complemento Advanced Custom Fields: Hola a todos. Ahora tenemos que crear esta nuestra sección dedicada a
proveedores. Entonces esta es la página del
miembro del equipo en el elemento que no tenemos un
widget para crear equipos. Tenemos caja orto y caja de imagen, pero si creamos esta sección
con esta caja de imagen o
caja orto, un problema es que no podemos
agregar este tipo de enlace Entonces como ejemplo, vamos a crear un
Flexbox y hagamos clic aquí para agregar elemento
e imagen de búsqueda Bien, aquí está el cuadro de imagen parece y no tiene
este tipo de enlace,
el enlace de ver perfil, vamos a marcar el
cuadro orto y editar así Orthobox no
van a funcionar de todos modos. Otro problema es que incluso
usamos este tipo de cuadro de imagen, piensa que actualmente
tienes diez miembros del equipo. Pero en el futuro
dentro de unos meses, su empresa contratará a
tres miembros más, lo que significa que
la compañía tiene que agregar a este nuevo miembro del equipo
editando el diseño del sitio web. Pero si creamos una sección diferente a la que
podemos agregar los miembros de nuestro equipo, lo que significa que vayamos a la página de administración de
WordPress. Si tenemos una sección
aquí como miembros del equipo, podemos agregar fácilmente
miembros del equipo usando esa sección. Entonces, cuando agreguemos a los miembros
del equipo, WordPress agregará
automáticamente ese miembro del equipo a nuestra sección de proveedores
dedicados. Para lograr esto, podemos
usar el complemento de campo personalizado. Los complementos de campo personalizados nos permiten
crear un tipo de pose personalizado. Actualmente tenemos pose
type like posts y pages, pero con este plugin de
campo personalizado, podemos desbloquear el
verdadero potencial del wordpress y además estamos
usando el elemento pro. En elemento de pro, tenemos elementos loop grid y
loop carasa, lo que significa que podemos agregar
plantillas enteras a esas secciones Ahora puede que no
entiendas esto completamente, pero en la siguiente lección, comprenderá
claramente sobre los tipos de pose personalizados y el
poder del elemento de pro. Empecemos. En primer lugar, iré al panel de WordPress
y aquí en los plugins, haga clic en agregar Nuevo enchufe y buscar presentador de
tipo pos personalizado Ahora obtenemos este tipo de
resultados y aquí lo que
seleccionamos es este avanzado campos
personalizados por motor WP, da clic en Instalar ahora. Después haga clic en Activar. Bien, activé. Si hacemos clic en ver detalles, podemos ver que el
campo personalizado avanzado convierte el sitio web de Word en un sistema de
gestión de contenido completo al brindarle las herramientas para
hacer más con sus datos Empecemos bien, ahora verás un elemento del
menú llamado ACF En este elemento del menú, primero, iré a Tipo de pose. En el tipo de pose, podemos
crear un nuevo tipo de pausa. Doy clic en Agregar Nuevo y aquí
configuraré la etiqueta como proveedor. En realidad, nuestros proveedores. Vamos a agregar proveedor. Y el nombre singular
será proveedor y la clave de publicación
automáticamente se agregará y actualmente no tenemos
ninguna taxonomía existente, así que no seleccionaré nada y la
visibilidad será pública Así que aquí solo hago clic
en Guardar cambios. Cuando haga clic en Guardar cambios, verá en el elemento del menú, nueva sección llamada
Nuestros Proveedores. Si hago clic en proveedores de EO, debería estar vacío y bien. No obstante, el icono no está
relacionado con nuestros proveedores para
cambiar el icono, haré clic en configuración
avanzada en configuración avanzada, haré clic en
visibilidad sobre visibilidad. Aquí tenemos el conjunto de iconos, y aquí podemos
seleccionar un icono que esté relacionado con nuestra página web
o nuestra sección de proveedores. Voy a añadir este tipo de icono, después concebimos cambios Yo sólo cambio así. Bien, la primera
parte está terminada. Y luego iré a grupos de campo en
grupos de campo, daré click en Agregar Nu
y aquí podemos agregar los campos que queramos para almacenar los datos
de nuestros proveedores. Vayamos al contenido de nuestro sitio web. Aquí está el contenido de nuestro sitio web, y en nuestra sección dedicada de
proveedores, tenemos el rol de nombre y breve descripción,
luego la descripción del préstamo. También tenemos una imagen. Agreguemos esos detalles. La primera etiqueta de campo será
nombre de proveedor del proveedor, nombre del proveedor, y
este espacio así, entonces no agregaré
ningún valor predeterminado. Antes de hacer eso, tenemos que
agregar título de grupo de campo. Agregar campo título de grupo, agregaré nuestros proveedores
campo así, entonces aquí lo haré. Entonces aquí solo agregamos
texto tipo grupo de campo, y ahora hago clic en AddFel
para agregar un nuevo campo y aquí lo que necesitamos para
agregar este rol aquí copiar rollo y en
aquí tipo de campo, tenemos mucha
opción para seleccionar Comprobaremos los tipos de campo, y aquí tenemos
opción como selectos. Vamos a agregarlo como select
y luego aquí agregaré etiqueta de
campo como rollo y el nombre del campo
automáticamente se agregará, y aquí podemos agregar rollos. Entonces, actualmente veamos los
roles de estos proveedores. En realidad, tienen diferentes roles. Así que simplemente podemos agregar campo de tipo
cuadro de texto para esto porque no tenemos
ningún rol repetido Entonces cambiemos este
tipo de campo a cuadro de texto o texto. Bien. Ahora otra vez, hago clic en Agregar Nuevo y aquí
podemos cerrar aquí, aquí, podemos dar click
en cerrar campo. Y bien ahora lo que tenemos que
añadir es breve descripción. Sólo tienes que copiar esta
breve descripción. Y pongámoslo como etiqueta de
campo, y aquí, cambiemos este
texto a área de texto y hagamos clic en Cerrar y
AddFil para agregar nuevo campo Y vamos a ver. Ahora aquí tenemos
descripción del préstamo, solo copia. Y para éste, podemos agregar el editor. Aquí, tenemos editor visivc, así podemos dar
click en ViswKEditor y aquí
como etiqueta de campo,
podemos agregar descripción del préstamo
haga clic en cerrar y en campo, ViswKEditor y aquí
como etiqueta de campo,
podemos agregar descripción del préstamo
haga clic en cerrar y en campo,
entonces lo que tenemos que Entonces para la imagen, solo
agregaré
etiqueta de campo como disparo a la cabeza, luego el tipo de campo
será imagen El formato de retorno
será array de imagen, y creo que ahora tenemos campo. Entonces tenemos el nombre del proveedor, descripción breve de
rollo,
descripción del préstamo y breve. Sí, quiero decir, solo
cámbiate esto por el nombre. No es necesario agregar el nombre del proveedor, solo agrégalo como nombre. Bien. Si vas a crear otro tipo de tipo pasado
o diferente tipo de sitio web, puedes agregar este tipo
de campo como quieras. Para éste, esto va a ser genial y aquí tenemos que
establecer la regla. La regla mostrará este grupo de
campo si aquí
podemos establecer la pose y es
igual a nuestro proveedor. ¿Recordaste que creamos nuestro tipo pros como nuestro proveedor? Entonces podemos agregarlo así
y actualmente, solo
necesitamos ver este grupo de campos dentro de
esta sección de proveedores. Así que hagamos clic en Guardar cambios
para guardar este grupo de campos. Ahora si voy a nuestros proveedores y aquí hago clic en
agregar Nuevo proveedor OR, y aquí tenemos los detalles de nuestro
proveedor, así podemos aumentar
esto así. Y aquí tenemos nombre, descripción breve del
rol, una descripción, y el
disparo en la cabeza para agregar esta imagen Entonces esto es similar al post, pero aquí tenemos campos
personalizados que podemos usar para agregar los detalles de los miembros de nuestro
equipo. Entonces agreguemos este contenido a la sección O provider
y continuemos con la lección. Entonces aquí, selecciona rollo y pégalo así y copia
la breve descripción, pégalo así, y aquí tenemos la descripción del
préstamo para la descripción del préstamo, solo
voy a copiar esto
como texto así. Pero si queremos, podemos agregar estilos a esta descripción de
préstamo, y ahora tenemos que
agregar el tiro en la cabeza Agreguemos el headshot
para agregar el headshot, hago clic en Addimage y aquí
podemos acceder a nuestra
mediateca y hago clic en subir archivos y en seleccionar archivos aquí tenemos la imagen de
nuestros proveedores, así que los selecciono todos y hago clic en abrir para
subirlos todos Ahora vamos a averiguar la imagen. La primera imagen es la
doctora Sarah Thomson. Esta será la primera imagen. Agregue el nombre del médico al
texto ALT y haga clic en C CLC. Yo solo agregué así. Bien. Ahora aquí,
agregaré título como doctora Sarah Thompson y no
agregaré ninguna descripción. Después hago clic en publicar para
publicar los detalles del proveedor. Bien. Ahora si lo revisamos aquí, podemos ver los detalles del médico. Hasta ahora tan bien, así que
sigamos agregando los datos de nuestro
proveedor e iré aquí y
copiaré el nombre del doctor
o el nombre del proveedor, copiemos el rol y breve
descripción, descripción del préstamo. Por último, la imagen, agrega el nombre al título
y ve a agregar Imagen. Entonces veamos la imagen. Esta es la imagen
en los tanques ALT y haga clic en CLF, luego
haga clic en Publicar Ahora podemos hacer clic en esto en
Nuevo Nuestros proveedores y aquí vamos a obtener el siguiente
médico nombre del doctor aquí, y nombre aquí. En realidad, no
necesitamos este campo de nombre porque ya tenemos
el título como nombre, pero por ahora, vamos a
mantenerlo así. Enfréntate a lo equivocado,
breve descripción , descripción
larga,
luego agrega una imagen. Doctora Emma, aquí está la
doctora Emma puede publicar, da
clic en agregar nuevo Nuestros proveedores aquí agregarán el resto de
los doctores y te verán. Agregamos con éxito a nuestros médicos. Iré a nuestra
sección de proveedores y haré clic en proveedores
ELO y aquí están los proveedores Earl
que tenemos Ahora si queremos,
podemos dar click en Editar o enviarlo a la basura o
hacer cualquier tipo de cosas. Actualmente, si hacemos clic en, no veremos los detalles porque no los configuramos. En realidad, no
necesitamos configurarlos así y en
la siguiente lección, agreguemos esos detalles
a la página de inicio como.
109. Diseña nuestra sección de proveedores: parte 01: Hola a todos, acabamos de agregar detalles de
nuestro proveedor y ahora es el momento de diseñar el sitio web. En nuestro archivo Figma, aquí está la sección
que tenemos que diseñar Aquí tenemos un carrusel
y empecemos. Primero, voy al elemento o editor y eliminemos
esta sección porque no la necesitamos y voy a dar
click aquí para crear una nueva sección y
averiguaremos la altura de la sección. Entonces copiaré texto y aquí, haga clic en este ícono más para agregar un título y agregar texto de
título como este, luego vaya al centro de
alineación de estilo y tipografía será encabezado y el color del texto
será de este color Ahora de nuevo, hago clic
en el contenedor. En contenedor, voy a cambiar contener B a lleno con y
la dirección será columna, vertical, align item
será centro. Bien. En realidad, hagamos el contenido con
cuadro de tareas y en Avance, haga clic aquí y agreguemos el pase
superior de margen 120. Bien. Ahora aquí, veamos
el tamaño intermedio. El tamaño intermedio es de 60, así que vamos al diseño de
wordpress, y aquí
seleccionaré el contenedor. Contenedor, voy a
añadir un 60 así. Ahora lo que tenemos que
añadir es esta sección. Para agregar este carrusel, podemos usar carrusel loop Vamos a agregar bucle de carrusel. Para ello, voy a buscar loop aquí y cuando
busquemos loop, obtuvimos loop arousel item Yo sólo lo agrego así. Este carrusel de bucle es
una cuadrícula de bucle que permite que las
plantillas o los elementos se deslicen de diapositiva en diapositiva, lo que podemos crear una plantilla
y usando estas consultas, podemos dar elementos o
dar datos que queramos agregar
a este carrusel o agregar a este bucle.
Hagamos eso. Primero, tenemos que
crear una plantilla. Para ello, voy a dar click
en crear una plantilla, y aquí voy a dar click en Bien. Ahora si revisas aquí, creamos el
elemento elemento loop, que es nuestra plantilla. Aquí, buscaré
elemento de bucle de elemento 370. Aquí, cambiemos esos detalles y veamos qué pasará primero, voy a establecer el número de diapositivas
como tres y mostraré, lo
que significa cuántos lados queremos mostrar aquí, serán tres
y lado en Scroll será uno y aquí
igual altura en. Vamos a Consulta. En consulta, el cambio se plantea
a nuestros proveedores y luego bueno vamos a dar click en publicar y ver que
podemos editarlo o no. Aquí volveré a hacer clic en Editar
plantilla. Bien. Regresa. Bien, ahora voy a la plantilla y aquí podemos editar
los detalles de la plantilla. Creo que algo
anda mal con mi navegador, así que hagámoslo de nuevo para que entiendas claramente
lo que
hice primero iré a la página principal del
sitio web y pincharé en Editar con elemento. Y aquí, vamos a
desplazarnos hacia abajo hasta aquí. Bien. Ahora voy a seleccionar
esta sombrilla de bucle, y aquí selecciono
el tipo de plantilla como se plantea
y creo una plantilla Después agrego número de deslizado como tres y deslizo hacia abajo
muestra como tres Si lo hago como dos, sólo
voy a ver dos de ellos, pero necesitamos tres así. Entonces dije que la consulta
como fuente serán nuestros proveedores y esos detalles serán predeterminados y si queremos, podemos cambiar Bien. Ahora vamos a editar la plantilla. Entonces para hacer eso, hago clic
en Editar plantilla. Bien. Ahora aquí, puedo
editar la plantilla. Entonces primero, haré clic aquí
y revisaré los detalles, y luego hago clic en agregar elemento. Yo agrego elemento, tenemos post title post content feature
mage post information, pero no necesitamos ninguno de ellos. Entonces agrego el cuadro de texto así, y luego verás
las etiquetas dinámicas Simplemente haga clic en usted haga clic en él, podrá ver detalles
como agregar fecha de pausa, Force ID, y cosas así, pero necesitamos agregar el nombre del miembro del
equipo aquí. Simplemente hago clic en este campo ACF. Bien. Ahora si vemos aquí, primero, tenemos este papel. Primero agreguemos el rollo. Aquí voy a dar click en este campo
ACF y dar click aquí. Entonces aquí tenemos el papel. Simplemente hago clic en Croll on Advance, no
necesitamos agregar
nada antes o después de que necesitamos rol Ahora el problema es que no
vemos ninguna información, pero podemos ir a este elemento de
bucle establecido en, y aquí podemos seleccionar
el conjunto de vista previa y cambiar este post o ítem
específico, configurarlo como nuestros proveedores y hacer clic en Aplicar y
previsualizar así. Cuando haga eso,
se mostrará así. Primero, escojamos este
espacio en cuestión para hacer eso, hago clic en este contenedor y
aquí vamos a ir a avanzar, hacerlos como cero, así. Cuando hacemos eso, simplemente nos
deshacemos de ese espacio E. Ahora hago clic en este
titular que ya agregué y aquí voy a
Estile y en tipografía, voy a cambiar la
tipografía ver, es pi 20, veamos nuestro párrafo, es hoyo 20 regular. Ahora voy a comprobar aquí. El nombre es pose title, pero aquí no necesitamos
el título de pose. En cambio necesitamos
el nombre del proveedor. Si vamos a nuestra
sección de proveedores y damos clic en AD, puedes ver que agregamos el
título de la publicación como nombre del proveedor. Además, creamos
nuestro nombre de proveedor en el campo personalizado avanzado, así que usaré este nombre en lugar
de usar este título de publicación. Da click aquí y elimínalo, haz clic
derecho y haz clic
con Dilete ahora aquí
voy a obtener el titular
así y aquí,
haz clic en etiquetas dinámicas y Affeld luego haz clic en el Acffeld y la
clave se llamará Estos campos de etiquetas dinámicas están disponibles solo en el
elemento de pro. Este es un elemento
de característica pro, que podemos crear una
plantilla o podemos crear una sola plantilla y
configurarla para la sección Pago. Entonces los datos que solicitemos en el campo dinámico se agregarán
automáticamente. Como ejemplo aquí, crees que necesitamos
agregar el título de fuerza. Simplemente podemos dar click en
este campo dinámico y dar click en forzar el título así y lo
duplicaré. Veamos si queremos
agregar hora o hora de publicación, la hora de publicación aparecerá así y si queremos
la fecha de publicación, la fecha de publicación se
mostrará así. Solo necesitamos definir
esta etiqueta dinámica a
la vez la base de datos se conectará con ese campo y nos dará detalles. Ahora eliminemos esto. Aquí establecemos el
nombre, no para título. Vamos a configurar el Affeld
y haga clic aquí, haga clic en valor agregar nombre, luego vaya a Etyle Veamos los detalles. Son 25, creo que es subfding. Fábrica C, 25 normales y aquí
tenemos los mismos detalles. Ahora tenemos que cambiar el
color del texto a este color negro. Antes de cambiar el
espaciado y otras cosas, agreguemos los detalles aquí. Después tenemos que añadir
la breve descripción. Para agregar, voy a hacer clic en elemento y vamos a
buscar algo así como. Agreguemos otro titular, y esta vez, la etiqueta STML
será P o párrafo Un azulejo, vamos a establecer
la tipografía como párrafo y el color
es este color negro Ahora en el contenido, haga clic
en la etiqueta dinámica, y aquí, desplácese hacia abajo, haga clic en el campo ACF Y da click aquí, la clave debe ser breve
descripción como esta. Bien. Ahora tenemos que
agregar la imagen. Vamos a agregar la imagen. Para agregar la imagen, doy clic aquí y busco imagen. Bien, aquí tenemos la imagen. Agregaré la imagen
en la parte superior y configuraré la resolución para que caiga y
haga clic en esta etiqueta dinámica. En realidad haga clic en esta etiqueta
dinámica y aquí en el
campo de imagen ACF, haga clic aquí, seleccione la foto de la cabeza
y la imagen agregada así la resolución de la imagen
estará llena, sin subtítulo Enlaces. Bien. Ahora lo que tenemos que
agregar este perfil de vista. Por ahora, agreguemos solo
botón simple para ver el perfil. Buscaré BTN o
botón botón y botón Rager así e
iré a Estyle en Estyle Veamos los detalles. Ya estamos en este botón aquí. Simplemente puede copiar los
detalles del botón desde aquí. Hagamos eso. O vamos a
crear esto de nuevo. Para ello, vaya a Estyle
y en tipografía,
seleccione el botón y en color, simplemente haga clic en Color de Contexto
y configurarlo
como primario y el En realidad, no necesitamos
ningún fondo y tablero no box shadow debería ser así y aún así
tenemos el fondo. Ahora no
tenemos antecedentes. Ahora aquí, elimino los
paddings y de antemano, voy a quitar los paddings, los cuales estarán llenos con, lo
haré por defecto en el contenido, el tipo es por defecto y
tenemos que agregar el icono Haga clic en la biblioteca de iconos
aquí vamos a comprobar el icono. En realidad, necesitamos este icono. Aquí tenemos el ícono. Haga clic en él y haga clic en Insertar y la posición del icono
será N. Bien. Ahora aquí tenemos un problema. Tenemos un espaciado enorme y
veamos el espaciado de los iconos. Es Z icono espaciado y estilo, hacer la posición
a la izquierda para eliminar el espaciado, podemos añadir margen negativo como
110. Cómo usar el carrusel en bucle: parte 01: En elemento de, tenemos una
característica genial llamada loop carusel. Vamos a buscar loop aquí, y aquí tenemos loop carusel Con este carrusel de bucle, podemos agregar contenidos dinámicos
como pausar campos personalizados, pausar tipos de pose personalizados que
ya creamos usando campos personalizados
avanzados, plug in, y
si ejecuta ecommerce, puede agregar productos
y crear carrusel El beneficio de esto
es que solo tenemos hacer el diseño de arusel por
una vez y luego
solo necesitamos crear contenido en el
dashboard de WordPress y ellos automáticamente
se adaptarán al diseño que creamos
usando loop
Carusel Profundicemos y hagamos
algo de ejercicio con post. Primero, voy al panel
de
WordPress de nuestro sitio web y
vamos a crear alguna publicación. Voy a Earl Post. Actualmente no
tenemos ningún post, así que voy
a buscar profundamente generar algún post. Entonces aquí voy a agregarMPMP y te
acordaste en
nuestras lecciones anteriores, hablamos de AI prompt, así que solo uso esos prompts, y aquí voy a asignar rol asm clínica doctor
que tiene redacción de artículo, experiencia en
escritura y tareas quiero que generes
diez artículos, y aquí está No necesitamos ese, y aquí generar diez artículos
generamos diez artículos. Bien, este apuntador funciona, así que presiono fin y veamos qué tipo de artículos
obtenemos Bien, solo genero estructura
del artículo
o los datos para el artículo. No necesitamos eso, así que
lo detengo y voy a escribir Necesito artículo
real al menos
con 500 Bien, veamos. A ver. Esto es sólo
por un ejemplo, así que no intentes hacer esto. Esos son en
realidad artículos muy pequeños, pero esto va a funcionar para Beckley Entonces aquí, tengo que decir que
necesito diez artículos reales. Digamos diez artículos reales al
menos con 500 como este. Cuando lo generemos así, obtendremos diez artículos reales. Bien, acabamos de generar
diez artículos como este, y ahora lo que tenemos que hacer
es agregarlos al sitio web. Vamos a la
página web y aquí
voy a ir a publicar y dar
clic en EL Post. Actualmente, no tenemos
ningún artículo ni ningún post, así que hago clic en en
New Post, y aquí, copiemos ese título y
peguemos el título aquí. Entonces sólo voy a copiar este
contenido y pegarlo aquí. En realidad, tenemos
que mejorar esto. En realidad, ¿y si le
decimos a Deepsek que genere este contenido para el editor de bloques
de Wordpress Entonces, digamos, ¿puedes generar este contenido para el editor de bloques de
Wordpress? Así puedo editar sin cavar
y vamos a copiar el contenido. Veamos qué va a pasar. Yo genero con el contenido DML, y aquí voy a eliminar todo
este contenido aquí DML Tenemos la etiqueta DML, así que solo podemos agregar este
contenido dentro de esa etiqueta HTML Puede llevar algún tiempo, pero esperemos y
veamos que funcionó o no. Bien, aquí tenemos
que decir que el nombre de la clínica
debe ser familia JB Vamos a contarlo en la siguiente parte. Entonces por ahora, solo copio
el código HTML y pego el código HTML y pego el código HTML y hago
clic en vista previa, y se verá así. Y aquí,
cambiemos esto a J. ¿No podemos cambiarlo así Tengo que ir a TML
y encontrar esa parte. Sí, e. Si, como familia
JV Clei. Bien, ahora está bien, y ahora hago clic en Compost y aquí tenemos que establecer imagen
destacada. Para crear imagen destacada, usaré Canva,
y no te preocupes, voy a todas las imágenes y esos artículos en
la sección de recursos Entonces ahora aquí estoy en Canva, y aquí hago clic en
personalizar y hagamos 600 por 400 como con un
para el largometraje mage Y aquí, vamos a copiar el título. Copiemos como la salud de la familia. No, esa no, aquí, aquí. Sí, salud familiar,
ve a elementos, ritmo así y ve a fotos. Y en fotos, tenemos
este tipo de fotos. Hagámoslo más grande. Y no necesitas este. Después hago clic en C Compartir, dar
clic en Descargar, seleccioné la prueba JPG y
doy clic en Descargar. Bien, ahora voy al sitio web, clic en Concepto Imagen destacada, y agreguemos la imagen
descargada así. Luego haz clic en Concepto imagen
destacada. Y vamos a dar clic en
Publicar Publicar. Y ahora puedo ver el primero. Vamos a hacer clic derecho aquí y dar clic en Abrir en Nueva Ventana. Aquí está nuestro post y actualmente no
se está mostrando del todo bien porque no
creamos plantilla para
nuestro artículo de blog, artículo blog
único, lo
haremos en futuras lecciones, pero por ahora, esto va a ser trabajo. Ahora hago clic en en
New Post y creo el nuevo post al segundo post. Aquí está la segunda fuerza, copia el cuarto título, y esto no es bueno para la redacción de artículos
reales. Esto es solo para aprender sobre el carrusel de
bucle y esta publicación puede ayudarnos a crear nuestra sección de
página de blog. Vamos. Y aquí voy a
copiar el contenido. Digamos, ¿se puede generar el contenido para el editor de blogs de
Wordpress? En realidad, cambiemos
esto de y digamos, ¿
se puede generar sobre contenido de la
publicación a unos diez
post diez post content, el contenido para agregar el editor de blog de
WordPress, que pueda agregarlo sin editarlo. Además, el nombre de la clínica
es JB Family Clinic, y veamos qué pasará Bien, no está funcionando, así que ahora voy a copiar este
comando e ir a GPT En Ja GPT,
agregaré este comando, y en códigos dobles, agregaré la pose Entonces aquí, no
necesitamos el primero. necesitamos de
aquí. A ver. El puesto, cinco, seis, siete, ocho, nueve, diez. Bien, ahora pon esos contenidos, y veamos va a esto no, no, no, esto no está funcionando. Tengo que decir, digamos por encima nueve post contenido para editor de
tress en DM en TML, por debajo de 94 Bien, ahora
hago clic en consentimiento, y ahora debería generar
en SDML Ya veremos, Bien, no va a funcionar Bien, se genera
en el formato SDML. No necesitamos este encabezado pero solo necesitamos texto de aquí, así que vamos Bien,
se generó el artículo, y ahora solo necesito agregarlos. Este es el segundo artículo. Creo que no necesitamos
esto y necesitamos esto también, y aquí tenemos el título, y aquí sólo voy a copiar este contenido a esta
etiqueta de párrafo a este párrafo. Y aquí, vamos a agregarlo. No, no, da click aquí y busca THDM y escríbalo así En vista previa, se
verá así. Bien, entonces ve a publicar en post. Tenemos que agregar la
imagen destacada y copiemos esto y enfrentemos la
vacunación infantil ne descárgala. Lick Concept característica Dimage, da clic aquí y agrégalo así Después haz clic en Concept feature Dimag y haz clic en
publicar, publicar Bien, ahora da clic en agregar nuevo post, y aquí tenemos el tercer post, copia este título, y aquí
tenemos la fuerza real. Yo sólo lo copio como esta llave. Ahora, aquí, HTML, HTML
personalizado, péguelo, haga clic en Vista previa, se ve bien, y aquí tenemos que agregar
el estrés como familia. Generemos nuestra fuerza. Veamos Entonces hagamos clic aquí para establecer
la imagen destacada, y continuaré y crearé el post y
volveremos a
111. Cómo usar el carrusel en bucle: parte 02: Hola a todos. Entonces
ahora tenemos el post, y comencemos a aprender
sobre los autos loop. Entonces lo que tenemos que hacer
es crear una nueva página, ir a las páginas de ER y hacer clic en AdnwPage y aquí en
Adtitle agregar un título Vamos a llamarlo como Blog. Entonces esto es solo para probar. Tal vez podamos usar esta página
para el sitio web real. Así que vamos a publicarlo y bien ahora hago clic en Editar
con elemento de todo derecho, voy a dar click aquí y dar
clic en cuadro Complejo, luego agregar este contenedor de
columna directa y aquí
buscaré Loop Carsel Aquí tenemos loop Carsel, solo lo
voy a agregar
y cuando agrego esto, puedo ver este tipo de diseño Aquí tenemos opción de crear plantilla o si
ya tenemos una plantilla, podemos buscarla desde
aquí pero en este caso, tenemos que crear nueva plantilla. Nuestro objetivo es mostrar esa
publicación en esta página de bloque. Simplemente voy a hacer clic en crear
plantilla y dar clic en guardar aquí está nuestra plantilla
y si pasamos el cursor por aquí, podemos ver el nombre de la plantilla Ahora lo que puedo hacer es agregar
elementos a esta sección. Primero, vamos a crear un contenedor tipo
columna de dirección, y hago clic aquí,
luego de antemano, tengo que quitar el margen
y pad luego en layout, voy a dar click aquí, luego
aquí podemos agregar elemento. Por ejemplo, agreguemos una imagen y
agreguémosla así. Entonces aquí tenemos una imagen
y en elemento de pro, tenemos etiquetas dinámicas. Usando estas etiquetas dinámicas, podemos agregar datos personalizados. Como ejemplo, si solo agregamos imagen
directamente desde aquí, agreguemos esta imagen de nuestro media box y
seguirá siendo la misma. Pero si hacemos clic aquí en etiqueta
dinámica y aquí dentro, podemos decir imágenes. Como ejemplo, vamos a establecer la característica Dimage y cuando
establecemos la característica Dimage, será dinámica Si lo explico más, puedo dar click en Guardar
y volver y aquí tenemos el post destacado Dimage ¿Te acordaste que ya
creamos el post y tenemos todo
ese post hasta aquí? Doy clic en Editar plantilla y
ahora hago clic en Editar plantilla. Entonces aquí, da clic en Editar y vamos a eliminar esta etiqueta de
imagen destacada y solo agrega este tic esta imagen desde la sección de medios y da
clic en Guardar y volver aquí, solo
vemos esta imagen estática. Este es el poder de la etiqueta
dinámica y en consulta, podemos establecer a qué tipo de datos
queremos llegar aquí. Entonces en el futuro,
vamos a crear nuestra sección de proveedores
y sección de revisión usando este loop cars
para crearlos, usaremos campos
personalizados avanzados. Cuando creamos tipos de pose
usando campos personalizados avanzados, podemos seleccionar la fuente
como ese tipo de pose. Actualmente, la
fuente es post y aquí podemos establecer la fecha
que queremos agregar, pero lo haré como y
podemos establecer orden por detalles y aquí voy a establecer orden por
fecha y orden será DESC, y tenemos dos tipos de pedido DESC significa corto
plazo de descendente, lo que significa que si lo
ordenamos por fecha, podemos ver la última
publicación a la publicación más antigua Si lo configuramos como ASC, podemos ver primero en el más antiguo
y el último como el último post Hagámoslo como DESC y agradable. Ahora, lo que tenemos que hacer
es crear la plantilla. Ahora hago clic en Editar plantilla
y doy clic en San Bien. Ahora aquí, hago clic en
este icono de lápiz, y creo que entiendes
y ahora
conoces las etiquetas dinámicas y vamos a eliminar esta
imagen así. Ahora lo que tenemos que añadir es post. Aquí tenemos muchos elementos. Si queremos, podemos
personalizar elementos. Entonces agreguemos titular y
en titular vaya a Estilo, haga clic en el titular como subdin
y el color será negro Y ahora en el contenido, voy a dar click en
esta etiqueta dinámica, y aquí puedo ver las etiquetas de Earl
que agregamos en el post Entonces, si hago clic en el título de la publicación, obtendremos el título
de la publicación de la publicación que creamos. Ahora lo que podemos hacer
es hacer clic en agregar elemento y agreguemos
la imagen destacada. Aquí, voy a añadir la imagen aquí. Entonces como hice antes, click en aquí y en post, selecciona la
imagen destacada, y por ahora, voy a mantener el estilo predeterminado aquí si hago clic aquí y
agrego otro titular, aquí podemos agregar post expert
post date como esta, entonces aquí cambiemos
esto a botón y el color volverá a estar
y voy a dar click en. En realidad, hago clic en la estructura
y aquí en contenedor, agregaré Roger pass.
Vamos a agregarle. Ahora veamos si
queremos agregar enlace,
buscaré aquí
Enlace y tal vez botón. Vamos a agregar botón como este
en botón al texto, buscaré como
leer más y en Link, hago clic en etiqueta dinámica, y aquí podemos
seleccionar la URL del post. Y en la opción Enlace, puedo dar click en Abrir
en Nueva Ventana. Y ahora si hago clic
en Guardar y volver atrás, podemos ver nuestro post así. Si hago clic en la página de Estados Unidos, y aquí está nuestro post. Entonces, si hago clic en este botón
Leer más, se redirigirá
a la página del post. Entonces actualmente no
creamos la página de post, pero si ves la URL, solo
redireccionamos
a la página de post. Así que ahora voy a hacer clic en
Editar plantilla de nuevo. Aquí lo haré en contenedor, voy a quitar titular de imagen
y el botón así. Ahora lo que podemos hacer es
un elemento preconstruido. Si busco aquí
post call to action, podemos obtener este tipo
de widget y aquí, pongamos el skin
como clásico y la posición a la izquierda y aquí
podemos establecer la posición. Pero por ahora, mantengámoslo
así y usando etiquetas dinámicas, podemos agregar contenido dinámico. Si hago clic aquí y hago
clic en la etiqueta dinámica, establezca la imagen
destacada La imagen destacada se
verá así. En el contenido, podemos agregar el título como título de pausa y
descripción será. En realidad, no
necesitamos la descripción, así que la eliminaré
y el enlace será post URL así y
haga clic en abrir Nueva ventana. Ahora lo que podemos hacer
es en este estilo, tal vez cambiemos la
piel para cubrir y
se verá mucho mejor
y en este estilo, podemos establecer el padding
así que agreguemos padding como 2020 un poco más grande, tal vez. Diez serán trabajo y sobre contenido, cambiemos la
tipografía a su pad in y el color del título
será blanco, y además tenemos el botón Vamos a agregar el botón 12 como
el izquierdo y derecho, y el
color del texto del botón será blanco. En la tipografía, establece la tipografía del
botón, establece el color de fondo
como este color azul Y en caja, podemos agregar
altura como queramos. Tal vez agreguemos la altura como 450. En su efecto, podemos
agregar color de superposición. Así que agreguemos el
color de superposición como negro. Aquí cambia la
opacidad para que me guste esto. Bien. Hasta ahora tan bien
ahora voy a dar click en Guardar y Negro Cuando
haga clic en Guardar y Atrás, aquí podemos ver nuestro
post así. Y solo hago clic
en el bucle casel y aquí podemos cambiar
el número de diapositivas Entonces si lo hacemos como cuatro, solo
tendremos cuatro
deslizadores y lado para página Hagámoslo para que sea dos, sólo se verá así. Y navegación, podemos ocultar la flecha
si queremos así, pero quiero mostrar
las flechas en estilo, podemos ir a navegación y
podemos cambiar el tamaño del icono así y cambiemos color a color azul
y posición, hagámoslo afuera. En paginación, podemos agregar
paginación como esta y el color será de color azul y
aquí está el poder de bca usel y Si voy a ver páginas, la página se verá así y podemos
personalizarlo como queramos. Pero por ahora, este será un buen ejemplo
de
entender el bucle carsel en el
futuro en futuras lecciones, aprenderemos y
usaremos mucho más etiquetas dinámicas de loop
cars y campos personalizados usando plug
avanzado de campo personalizado
112. Diseña nuestra sección de proveedores: parte 02: Bien. Ahora cuando comparamos este botón con nuestro botón
original, el icono es un poco más grande. Como hicimos aquí, tenemos que usar CSS para
hacer que el icono sea más grande. Pero el tema está
en esta plantilla, tenemos botones repetidos. Aquí,
sólo tenemos este botón, pero ahora tenemos una
situación diferente. Vamos a encargarnos de esto. Primero, voy a dar click
en este botón, y como ya dije antes, nosotros de un botón, así podremos crear un solo código CSS y ponerlo a disposición
para A de este botón. Para ello, podemos
usar la clase CSS. Aquí agregaré CSS class name as view profile
view profile,
TN, y luego haré clic en
Publicar para guardarlo. Y ahora tenemos el dashboard
de WordPress. Para agregar este código CSS, puedo ir a apariencia
y dar clic en Personalizar en personalizar puedo
hacer clic en CSS adicional. Y aquí puedo agregar el código CSS. Entonces aquí podemos ver el diseño. A pesar de que
no lo
completamos, podemos verlo desde aquí. Bien, ahora tenemos que
hacer este botón más grande, así que para hacerlo,
voy a pegar el código
CSS, el código de clase CSS y agrego punto
porque usamos punto para guardar en caché las clases CSS y no
voy a ir
demasiado profundo sobre CSS. Por ahora, solo voy a agregar este código para hacer que
este icono sea más grande. Si vamos a esta página de inicio, vamos a la
página principal y aquí, clic en Editar con elemento
y desplácese hacia abajo hasta aquí, luego haga clic en este Editar y si vamos a Avanzar con Avance, tenemos ESS personalizado
y aquí tenemos el código que usamos para
hacer este botón más grande. Yo sólo lo voy a copiar. Vamos a copiar el contenido e ir a la personalización y editar aquí. A partir de aquí,
solo necesito esta sección porque
este ID, no lo necesitamos, solo
voy a hacer
esta clase CSS así y hacer clic en la página
dos agregue ese contenido, y cuando hagamos eso, nuestro icono se hace más grande. Si lo quito, es pequeño. Si lo agrego, es más grande. Ahora hago clic en publicar y
aquí voy a dar clic en Refrescar. Tengo que refrescarlo de
nuevo porque el diseño no se cargó del todo
bien. ¿Qué pasa? El sitio web no está
conectado como queremos. Ahora hago clic en editarlo elemento o creo que es problema de caché, pero vamos a ver, es caché. Ahora aquí, de nuevo, hago
clic en Editar plantilla para editarla y aquí
podemos editarla desde aquí. Cuando haga edición a esto, afectará a la sección. Si vamos a WP Admin y vamos a dashboard
y aquí en plantillas, hago clic en Guardar plantillas
en guardar Plantillas, hago clic en publicadas, y aquí tenemos esta plantilla
que estamos editando. Actualmente, su nombre es elemento de bucle
elemental. Hagamos clic en Editar y cambiemos este nombre
a algo así como nuestros proveedores dedicados
como este y hagamos clic en Actualizar y podemos hacer clic aquí para editarlo y
editarlo desde aquí. Así o podemos dar click aquí para reprimir éste
y editarlo desde aquí Editar desde
el sitio web real es la mejor manera
porque entonces
podemos entender claramente cómo se verá
el diseño
en la sección de héroes. Nuevamente, tenemos ese problema, así que vamos a actualizarlo y hacer clic en Editar con elemento
o desplazarnos hacia abajo, y nuevamente, dar clic en Editar. Derecha. Ahora aquí lo que
tenemos que añadir es yo espaciado. Si comprobamos el espaciado
en el cerdo Mateen Brad, son dos L. Agreguemos
el espaciado como dos Si hago clic aquí, pueden
ver que es un contenedor. Si hacemos clic aquí y agregamos raw as, debería verse
así y veamos, son dos y es ítem como dos. Bien. Ahora lo que
tenemos que hacer es sumar en esta esquina radios y la
sombra. Vamos a agregarlos. Para agregarlos, aislar el
contenedor y en contenedor, voy a Estyle on Estyle Haga clic en Obarder y caja de sombra. Vamos a añadir la sombra de la caja. Así que vamos a copiar los detalles de la
sombra de la caja desde aquí. Da click aquí el color es este, así que da click aquí para obtener los colores
CSSORGBA. Haga clic aquí. El color RGBA es esto
y agrégalo así. Ahora, los borrosos son
15 y X e Y cero. Vamos a hacer clic aquí. Blurrinus es 15 y
otros son cero. Bien. Ahora tenemos que
añadir esquinas de radio. En realidad, se
debe agregar la esquina del radio para hacer eso, aquí tenemos radio de borde. Si hago clic en esta sección y reviso el
radio del borde aquí son 20. Entonces hagamos esta radio como 20, veremos los cambios. Yo agregué, sin embargo, no lo
conseguimos a la imagen para
llegar a la imagen, hago clic en editar en la imagen
y voy a Estyle En Estyle, podemos agregar radios fronterizas como el,
pero solo 20, no 20, pero solo tenemos
radio de borde de la parte superior como el Entonces vamos a agregarlo. Entonces no tenemos radios de
bod como 20 en la
parte inferior de la imagen Entonces vamos a dar click aquí y arriba, hazlo 20 y arriba 20 a la derecha, qué pasa con la izquierda será
20 y no en la parte inferior, solo
necesitamos agregar top ten, derecha como 20 y agradable, entonces tenemos que agregar el
espacio para aquí, es 220. Agreguemos espacio inferior o agreguemos este relleno de
contenedor. ¿Clet el contenedor es de 20? Sí, es Clet el contenedor
en el fondo acolchado a 20. Bien. Ahora tenemos que encontrar
el tamaño intermedio. El tamaño intermedio es 20. Para agregarlo, tenemos que
ir al loop carasel lo
publicaré desde aquí
y dar clic en Guardar y Ahora se verá así, pero no se ve
bien aunque. Tenemos que hacer la sombra de caída. Pero por ahora, centrémonos
en entre el tamaño para hacer eso, ir al estilo y la brecha entre el tamaño debería ser
tanto, debería ser. Bien. Y antes de arreglar
el problema de las sombras, agreguemos estilo a la
navegación y otras cosas. Entonces en la navegación, haga clic aquí. Bien, es con altura ts 220, así que hagamos con prueba de altura, 20, para hacer eso. Vamos a la navegación
y en realidad, no
tenemos navegaciones de izquierda y
derecha, vamos a eliminarla primero Para eliminarlos, iré al
contenido y en la navegación, no
necesitamos mostrar flechas
y en generación de páginas, tenemos puntos y vamos a
ir a Estils en Estes, tenemos que ir a generación de
páginas, no navegación y espacio
entre será como recuerdo, es 20 años y el
tamaño es 20 por 20, el tamaño
también será 20 para 2021, es 20 y el color
es este color primario no
necesitamos mostrar flechas
y en generación de páginas,
tenemos puntos y vamos a
ir a Estils en Estes,
tenemos que ir a generación de
páginas,
no navegación y espacio
entre será como recuerdo,
es 20 años y el
tamaño es 20 por 20,
el tamaño
también será 20 para 2021,
es 20 y el color
es este color primario y
obtenemos automáticamente el color por defecto como
este color azul claro. En el color O, lo
haré como acento
porque en realidad no necesitamos agregar el
color primario como el color hover Aquí tenemos problema. Tenemos este color azul claro, pero no necesitamos que
sea azul claro, pero no hay
opción para arreglarlo, pero mantengamos ese color así por ahora y y
agreguemos
esto entre el
espaciado de este deslizador
y la paginación, son 30, así que
hagámoslo como 30 Bien. Ahora voy a dar click en
publicar y hasta el momento tan bueno. Pero aquí tenemos
muchos temas. Vamos a arreglarlos uno por uno.
113. Diseña nuestra sección de proveedores: parte 03: Hola a todos.
Arreglemos los problemas que tenemos con esta sección dedicada
de proveedores. Entonces para hacer eso, voy a dar
click en Editar plantilla, y cuando vayamos aquí, podemos ver claramente que esta
imagen no encaja bien. Entonces primero, hago clic aquí
y selecciono la imagen, después voy a Avanzar avanzar, voy a establecer el tamaño como crecer
y ahora justo así. Entonces ahora puedo publicarlo y vamos a verlo en el
diseño y en el diseño, se verá así. Entonces como el segundo número, podemos ver aquí tenemos
un padding como cero, pero necesitamos algo de padding
a lado izquierdo y derecho. Entonces veamos voy al archivo
Figma y en Figma, veamos el pad en tamaño Selecciono uno de
este texto y presiono todo el relleno es así que
agreguemos seis como relleno. Ahora bien si solo agregamos relleno
a este contenedor, voy a avanzar y agrego Padin
derecho como seis
y padna izquierdo seis, se
puede ver la imagen también
está No podemos agregar patrón como este. En lugar de agregar
un patrón como este, tenemos que agregar relleno para
los campos individuales. Entonces aquí selecciona el campo, ve a avanzar y sumar
Padin seis, dejó un seis Hagamos lo mismo a la derecha seis, la izquierda seis y para el botón. Ahora hago clic en publicar
y veamos el diseño. Reprime el diseño y
ahora se ve perfecto. Ahora aquí tenemos problema de
alineación, arreglemos ese problema de alineación. Acabo de encontrar el problema. Si vamos a la plantilla y damos
clic en Imagen en imagen, dijimos tamaño como crecer. Yo sólo lo quito. Cuando lo quito,
solo está arreglado, y aquí solo necesitamos
agregar align self stretch. Después hago clic en guardar
una bolsa y dar clic aquí, establecer la altura igual en. Y ahora si comprobamos el diseño, quedará perfecto así.
114. Diseña nuestra sección de proveedores: parte 04: Y ahora tenemos otro tema. Si revisas cuidadosamente por
el lado izquierdo y derecho, no
vemos la sombra oscura, así que tenemos que arreglarla. Encontré solución a
este problema revisando foros y buscando en
Google sobre el tema. En Google, solo
busco sombra paralela o no mostrar en elemento
o resultado de Luka Y aquí están los resultados que
encontré en este foro de Gita, obtuve la solución Entonces vamos a aplicar esta solución. Y como dije antes, tendrás que hacer alguna búsqueda en Google o si
tienes alguna duda, solo búsquelo en Google. Si obtienes esto ahora mismo, probablemente alguien más lo
obtendrá antes que tú. Ahora comencemos el trabajo. Primero, tengo que quitar
la sombra actual, sombra
paralela y
la radio de esquina. Selecciono el contenedor
y en contenedor, tenemos que ir a E troqueles en E
troqueles borde hacer el borde como cero y cambiar la
sombra de caja para volver a default. Bien, ahora hago clic en Publicar y ahora si vemos el diseño, no
va a tener
ninguna sombra paralela. En nuestra imagen, aún tenemos
las radios de esquina de imagen. Si vamos aquí y en estilo de
imagen aquí, tenemos radios Border
como en la imagen. Por ahora,
mantengámoslo así. Y ahora tengo que
copiar este código. Simplemente cópiala aquí y
en realidad puedes leer esto, pero no voy a
leer ya esto y este
trabajo con el diseño. Ahora voy a ir a adelantar
avance de este contenedor. El contenedor va a Advance
y aquí en ESS personalizado, en el CSS así. Ahora hago clic en publicar por ahora y vamos a
verlo en el diseño. Si comprobamos el diseño, ahora podemos ver claramente la sombra
izquierda y derecha. Ahora arreglemos esto de
acuerdo a nuestro diseño. Primero, tenemos que eliminar
este espaciado. Vayamos aquí. Si vemos el CSS, tenemos este relleno
y no lo necesitamos. Yo sólo lo quito así. Ahora bien, si lo publicamos
y vemos en el diseño, se verá así. En realidad, tenemos
que añadir el relleno. Voy a añadir el relleno como 20
por 20 y presionar en publicar. Y aquí, si comprobamos el
diseño, se verá así. En realidad, no
necesitamos el acolchado superior, así que voy a quitar
el acolchado superior y aquí arriba a la izquierda, abajo, a la derecha. Creo que el valor así que
volvamos a ver el diseño, y ahora se verá así. Entonces aquí tenemos que
cambiar la sombra paralela. Para cambiar la sombra paralela, tenemos que encontrar nuestra sombra paralela. Entonces iré a nuestro diseño de
rigma y seleccionaré esta sección de
proveedor único Y aquí tenemos
la sombra paralela. Y si hago clic en este Dev moot, puedo ver el estilo CSS, y aquí tenemos el estilo
box shadow Yo sólo lo copio. Reemplacemos esta
sombra de caja con nuestra sombra de caja. Esta especificación mantiene
esta importante etiqueta aquí y publiquemos
y veamos el diseño. Bien. Ahora lo que tenemos que
hacer en realidad es aquí, tenemos que agregar top collins
20 y abajo B 2015. 50. Y
publiquémoslo y diseñemos. Bien, la izquierda y la derecha son 15 imitadores ninguno aquí, arriba, derecha, abajo, izquierda, todavía demasiado débil, tal vez diez serán
los bienes 2010 Y ojalá que
el tiempo sea bueno para ir. Bien, hasta ahora tan bien. Y ahora tenemos que
añadir esquinas redondeadas. Agregar esquinas redondeadas
es demasiado fácil porque ya
conseguimos el
estilo de aquí, copia esta etiqueta de estilo
reduce 20 barco y luego ponla aquí así. Vamos a esto. Bien, ahora está bien y ven
aquí a reprimir el diseño. Cuando reprima el diseño, se verá así y es bastante similar
a nuestro diseño Pero el tema es
que tenemos esta brecha. Entonces intentemos arreglar esta brecha. Según el diseño
anterior, solo
agregamos 20 como margen, lo
eliminamos porque agregamos 20
como relleno en la aduana y voy a refrescar así y ahora perfectamente decir, Bien. Aquí tenemos un problema con
este botón de ver perfil porque aquí es más bajo
y aquí es un poco superior. Entonces lo voy a mantener
así
porque puede requerir CSS para arreglarlo. Bien, ahora lo que tendremos que
hacer es ir aquí y dar click Ponce andb entonces tenemos que
ajustar el aquí y en consulta no
consulta sobre maquetación, tenemos que ajustar el
número de diapositivas Actualmente, creo que tenemos cinco
tenemos uno, 25 de ellos, cinco
y haga clic en publicar. Y aquí tenemos mucha generación
de páginas. Bien, para arreglar la inación de la página, podemos ir a maquetación y desplazarnos sobre las diapositivas en scroll.
Actualmente, tenemos uno. Si lo configuramos en dos, podemos arreglarlo así, y ahora desplazaremos dos
diapositivas a la vez así. Bien, ahora haga clic en C publicar y vayamos al sitio web
y veamos el diseño. Bien, se verá así. Aquí tenemos un problema. Si revisamos cuidadosamente
este paquete, veremos el mismo
resultado una y otra vez. Ver ahora este doctores está aquí y aún si
revisamos ahora mismo, los doctores todavía están aquí. Entonces para arreglarlo, voy aquí lamer en
editar Carsel y el problema es actualmente solo
tenemos cinco proveedores, pero nos fijamos lado
para desplazarnos como dos Hagamos esto como tres, y cuando lo pongamos como tres, funcionará bien. ¿Ves? La razón es que no tenemos suficientes
detalles de proveedores para adherir. Ahora Earl se ve bien, y ahora si me refresco aquí, todo va a funcionar
bien sin ninguna Bien, juega con esas opciones
y consigue el mejor resultado Si vamos a consultas, podemos establecer orden por como
fecha y si lo configuramos
como una A es organizar los artículos
de menor a mayor, lo
que significa que les mostrará
primero que agregamos primero. Ahora pl publico y
ahora si me refresco, agregamos esta doctora
Sarah Thompson como el primer valor en nuestro proveedor
ya que en el FIC Maple, y se mostrará
correctamente porque lo
cambiamos en el aztino Ahora acabamos de completar nuestra sección
dedicada de proveedores, y aquí podemos agregar más médicos o más
proveedores y mejorarla. Entonces tenemos que crear esto
ponernos en contacto con la sección. También aquí tenemos que agregar la
facia pop up a este enlace de ver perfil En el futuro, nosotros también los haremos.
115. Sección de contacto del diseño: parte 01: Hola a todos. Ahora tenemos que diseñar esta sección.
Empecemos. Primero, daré click
en la sección y verificaré la altura. Son 600. Vamos aquí y
haga clic en icono más, seleccione Flexbox y flexbox apretado será dirección columna, y aquí la altura media
será seis no 300, debería ser 600 y podemos cambiarlo después mientras diseñamos Bien, y la dirección
será cruda horizontal, y aquí, tenemos que
agregar esta sección. Primero, tenemos que
agregar el encabezado, y antes de agregar el encabezado, tenemos que dividir esta sola sección en
dos como lo hicimos aquí. Entonces, si revisamos el contenedor, tendremos contenedor diferente en esta sección.
Hagamos lo mismo. Entonces aquí primero, voy a
tener que dar click aquí para agregar elemento y dar click en contenedor y rastrear y soltar el
contenedor así. Y luego voy a agregar Dance y quitar la izquierda y
derecha de ese contenedor. Entonces lo que tengo que
hacer es en maquetación, la dirección será columna, y ahora hago clic aquí para
agregar un titular como este. El copiar el
texto del titular de aquí, más allá del texto aquí, y agregar para romper la línea, luego ir a
Etyle y la tipografía será encabezado, luego el color del texto
será este color Ahora tenemos que agregar
este cuadro de iconos, podemos usar cuadro de imagen. Creo que la caja de imagen
funcionará, tal vez no. Agreguemos el cuadro de imagen, busquemos el cuadro de imagen y agreguemos
el cuadro de imagen dentro este contenedor en Etyle configuremos
la posición de la imagen como izquierda Pero el tema está en cuadro de imagen, no
tenemos mucha característica
para agregar las tres líneas, así que tenemos que hacerlo de forma manual. Vengamos aquí y
primero cambiemos este icono. Para cambiar el icono, iré al icono de Google. En símbolos e iconos materiales, puedo encontrar los íconos. Buscar en el icono de hon. Tenemos este ícono de llamada, y veamos los
detalles desde aquí. En realidad, es de aquí. Vamos a ajustar el ancho
será delgado así. Bien, ahora hago clic en este PNG y veamos el
color antes de descargarlo. El color es este color azul, copia el código de color y
pega el código de color. Creo que es el
mismo código de color. Bien, ahora hago clic en PNG, en realidad, tenemos que
establecer el tamaño. Entonces aquí el tamaño es de 60. Intentemos sumar 60,
60 será trabajo. Después da clic en PNG y
vaya a fig Musign y desplácese aquí y haga clic en este icono y elimine
este icono vectorial, y aquí, seleccione el diseño del icono y haga clic aquí y ponga
el icono así Después tenemos que ajustar el icono
select only y
ajustarlo así. Bien. Ahora también tenemos que obtener
el icono de ubicación. Este icono será trabajo, descárguelo, vaya aquí, elimine este drop in y seleccione el diseño del icono en los videos de imagen, seleccione el icono drop pn
y suéltelo así. Después al seleccionar el icono y
reducir su tamaño así. Bien. Entonces tenemos que al
reporte. Sí, o ésta. Seleccionemos este
perfil de laboratorio así. Retirarlo. No, no este icono. Entonces, con razón,
desmarco el ícono, y este será el ícono Bien. Ponlo así. Entonces y Bien, hasta el momento tan bueno. Y ahora podemos
descargar esos iconos, seleccionar el icono y dar
clic en Exportar icono. Bien, vamos a crearlo. Primero, necesitamos tener
un contenedor como este. Entonces de antemano, hagamos margen de relleno de
contenedor
como cero, luego aquí, agreguemos cuadro de imagen primero y en el cuadro de imagen esto luego haga clic aquí y una
línea estará aquí, una línea será dirección
fila horizontal, línea será inicio y ahora
tenemos que crear otro
contenedor dentro este contenedor porque este
es este contenedor es fila horizontal pero estas secciones
están en forma vertical. Veamos aquí está el
contenedor que agregamos. Pongámoslo dentro
así y luego otra vez, tenemos que ir a
sumar y así. Aquí vamos a maquetación y
establecemos la dirección como columna o línea de
pedido vertical se iniciará, y ahora podemos agregar titular. Veamos qué tenemos titular. Agreguemos tres titulares o simplemente podemos
duplicar éste. Primero, vamos a crear los
detalles haciendo clic aquí, cara aquí en Esty la
tipografía estará subbediendo sub ding
es la tipografía,
luego el color será este color negro Entonces lo duplicaré
para tres corbatas así. Entonces tenemos este
texto copiar el texto y espaciar el texto
así en cada empate, cambiarlo a párrafo
y aquí el número, creo que será de tamaño personalizado, por lo que este último regular 35. Cambiemos esta
familia de fuentes a at 3535 regular. Ahora veamos el tamaño inbten, selecciona uno de El tamaño Ibteen es diez, seleccionemos el contenedor
y fijemos la fila como diez Bien, vayamos al
contenedor principal en contenedor principal, haga clic en el
centro de líneas de pedido así. Ahora veamos el tamaño inbtten. También son diez. Entonces aquí la columna será de 100 y haga clic en el contenedor
que tiene titular. Vamos aquí y
comprobemos el tamaño inbten. Son 30, aquí podemos
establecer la fila como 30. Bien. Ahora lo que tenemos que hacer es duplicar esto tres veces, voy a dar click derecho y
duplicar, duplicar. Ahora si lo vemos 30. Ahora vamos a copiar
esos otros detalles como este primero el titl y tiene la misma redacción y la dirección también tiene
la misma redacción, y luego tenemos que
leer tres preso, quitar este y
agregar el botón y el botón aquí en realidad, podemos usar este mismo Creo que podemos usar
este mismo botón. Entonces para hacer eso, voy a dar clic
en Editar plantilla y dar clic en Guardar y salir y podemos simplemente copiar esa
propiedad de botón desde aquí. Haga clic aquí y
haga clic derecho y haga clic en Copiar. Después haga clic en Guardar y volver para volver porque se
trata de una plantilla, y aquí, podemos fácilmente
hacer clic derecho sobre el botón y
hacer clic en más allá de este mosaico. Cuando paso este dado, el estilo del botón simplemente
pega y da clic aquí, después tenemos que agregar el icono, así el icono será flecha. Y no es este tipo de flecha, vamos a averiguar la flecha. Aquí le damos clic,
haga clic en Insertar. Bien, hasta ahora tan bien. Ahora lo que tenemos que hacer es copiar el texto y darle un paso al texto aquí, y aquí tenemos un problema. Tenemos sumando derecha
e izquierda como seis. Hagámoslo cero
para aquí porque
no necesitamos actuar de izquierda
a derecha, sino aquí dentro. Entonces haré
clic derecho a duplicar esto y ponerlo
aquí y aquí también, no
necesitamos esto
lo siento, no esa. El control se establece u optione
y borra este. Entonces aquí tendremos el icono del programador Vs y lo pegaremos así Entonces cambiemos el contenido. Ahora tenemos que cambiar el icono, hacer clic en este icono y venir aquí. Después da click en el icono de in
y haz clic en Exportar JPG, no
necesitamos PNG. Slet el ícono JPG, da clic aquí, sube el ícono, da clic en CLEC y ahora tenemos este ícono y damos clic en exportar, JavGoIcon y cree y pasea este ícono
así Ahora tenemos el diseño del lado izquierdo acuerdo con este diseño, y ahora tenemos que crear
este diseño del lado derecho. Hagámoslo en la siguiente lección.
116. Sección de contacto del diseño: parte 02: Bien, ahora tenemos que
diseñar esta sección. Así que comencemos. Primero, seleccionaré
esta imagen y daré clic en Exportar y configuraré el tipo pasar
JPG y dar clic en Exportar. Y aquí voy a ir a
Tiny PNG y dragón soga esa imagen
para que podamos optimizarla. Después hago clic en el
botón JPEG para descargarlo. Bien, ahora tenemos que
agregarlo en el contenedor principal. Entonces busquemos el
contenedor principal. Así que haz clic aquí. Aquí tenemos nuestro contenedor principal, y solo hago clic en el
icono más y la imagen de búsqueda y vamos a poner imagen como esta Sint agregó ver,
vamos a ver. No, no lo es. Vamos a agregarlo de nuevo. Tenemos que agregarlo aquí. Bien. Todo bien. Ahora
voy a dar click sobre la imagen. La imagen descargada, entonces
aquí vamos a copiar este texto. Agreguemos esto como texto. Bien, hago clic en Seleccionar
y se agregó la imagen. Ahora lo que tenemos que hacer es
seleccionar en este contenedor, y vamos a averiguar el valor por defecto con el predeterminado con este 550. Agreguemos con este 550, da clic aquí para seleccionar Px y 550. Bien. Y entonces lo que tenemos que
añadir es espacio intermedio, así que da click aquí y también tenemos que hacer
la resolución de la imagen completa en EtyleeGod y
en este contenedor principal, agreguemos columna como 90 el tamaño de
inviten era 90 Ahora lo que tenemos que
hacer es hacer clic en el espacio entre y
en ventana más grande, se verá así, y luego tenemos
que hacerlo centro. Haz clic en Alinear centro así. Ahora tenemos que agregar esos
dos elementos, hagámoslo.
117. Sección de contacto del diseño: parte 03: Ahora tenemos que crear
esos dos elementos, así que empecemos con aquí. Primero, descubramos el ancho, el ancho es 213
y el alto es 152. Vayamos aquí y hagamos clic en nuestro contenedor principal y
dentro del contenedor principal, vamos a crear un subcontenedor como este y
pongámoslo después de la imagen Y ahora se cambió el diseño, pero sigamos adelante
y podemos arreglarlos. Da clic aquí y ve a Avanzar y establecer margen y
agregar en un cero. Entonces en maquetación, podemos establecer con click aquí y click configre
entonces el ancho era 213 Hagamos ancho 213
y alto como 152. La estatura del hombre será de 152. En realidad, podemos ajustar la altura lo único con lo que
necesitamos establecer. Entonces ya lo hicimos aquí. Entonces si lo comprobamos
así, para que podamos ver
agregamos esos detalles. Bien. Ahora lo que tenemos que hacer
es hacer clic en el contenedor y foto avanzar sobre la posición
establecida de avance como absoluta. Bien, entonces podemos
establecer el conjunto de Op
así por ahora vamos a mantenerlo aquí. Y ahora lo que tenemos que
hacer es agregar esos textos clic aquí y dar clic en
titular y aquí en estilo, tipografía será cabeza, color del
texto será
este color negro y texto 247 así, entonces
lo duplicaré y copiaré este, luego lo pegaré así
y su tamaño
será sub creo que el
tamaño es pad in, es cama 25, veamos Sí, es una adición
y haga clic aquí, luego agregue
color de fondo a este diseño Ir al estilo sobre fondo de estilo, el color será de color
blanco así. Ahora tenemos que agregar frontera
en realidad agregar radios fronterizas. Si verificamos el radio del borde, dará clic en este
diseño y es 20, hagamos que sea 20 en el diseño, hagamos que sea centro para centrar el valor y
descubramos el tamaño atractivo. El tamaño acogedor es de diez. Vamos a establecerlo tarea
diez, no columna. En realidad, debería ser fila. Bien. Ahora tenemos que
añadir el relleno, vamos a comprobar el relleno. El relleno es de 20, en contenedor, vaya a agrega y en
relleno lo establece como 20. Bien. Ahora tenemos que agregar esta
sombra de fondo para hacer eso, puedo ir a style and
style box shadow,
the box shadow, vamos a copiar
los detalles de la sombra de caja. Aquí, da clic en la sombra de
caja y copia los colores RGBA y ven aquí, el
ritmo de los colores RGBA, y el desenfoque es 15
y otros son cero Hagamos este
desenfoque como 15. Bien. Ahora, digamos que está aquí, así que hagamos la posición. inmediato el desplazamiento
será así y el desplazamiento vertical
será en realidad fue aquí. Sí. Y nos olvidamos de agregar
relleno al contenedor principal, nuestro relleno debe ser de 120. Sí, son 120. Vas a agregar en la
parte superior de margen para relleno 1220. Nuevamente, selecciona este
y top set así. Sí, hasta el momento tan bueno y
ahora tenemos éste, entonces tenemos que sumar
el segundo Continuemos de la misma manera primero haga clic aquí
para agregar contenedor. Pongamos contenedor así y pongamos debajo de
la imagen así. Bien. Después al
adelantarlo último cero, y vamos a averiguar el ancho, el ancho es 213 fixel 213 Y luego vamos al estilo y agreguemos el
color de fondo así. Entonces copiemos el texto y agreguemos el texto aquí para agregar texto
dentro de ese contenedor. Entonces aquí para agregar el texto
real, y aquí, digamos el tamaño mismo
día que el tamaño del párrafo, pero no es el lado
del párrafo, no. Sí, es un 40
como el tamaño de la fuente. Entonces hagamos que este tamaño de fuente
sea 40 por manual así. Bien, entonces vamos a duplicar
esto y copiar éste, poner ese texto aquí. Y en estilo, la tipografía
será subtítulo. Bien, ahora, conviértalo en el centro, haz que este texto se centre también
y haz clic en el
contenedor, contenedor en diseño,
conviértalo en un centro de alineación, y
descubramos el tamaño intermedio. El entre el tamaño
es de diez, en la fila, lo
hacen como diez y en el
relleno el relleno será de dos. A hacer acolchados. ¿Qué pasa con el acolchado izquierdo
y derecho? Los
acolchados izquierdo y derecho están demasiado bien, demasiado bien, izquierda va a estar demasiado
bien. Algo mal. Victoria, regular 40. Tenemos que aumentar el Hagamos la izquierda
y la derecha, pero cero. No, no trabajo. Tenemos que aumentar esto con
no tanto. 215-22-0220 funcionará. Bien, hasta ahora tan bien. Y ahora tenemos que
sumar la esquina. Entonces mira el radio de
esquina, radio de esquina como
Veamos el radio de esquina,
el radio de esquina es dos estilo en el borde
radio de esquina es dos vacíos, tenemos que agregar la sombra de caja, el código de color de sombra de caja, tenemos que copiarlo de aquí. Establece el CSS y copia el color RGPA aquí
deberíamos hacer este 15 Ahora se ve bien. Ahora lo que tenemos que hacer
es ir a avanzar y la posición será absoluta y la
podemos poner aquí mismo. Y ahora cambiemos el
offset y aquí está. Está en el medio. Entonces vamos agregarlo a la horizontal media. Hagamos esta orientación
horizontal como para llegar a aquí así,
esto debería estar justo
en el medio. Bien. Y nos olvidamos de
cambiar el color del texto. Cambiemos el color del texto. Bien, hasta ahora tan bien. Y ahora tenemos esos dos elementos, y ahora tenemos que agregar la animación a este
ítem. Entonces hagámoslo.
118. Sección de contacto del diseño: parte 04: Bien. Cuando me desplace hacia abajo, quiero hacer que esta sección anime hacia arriba y cuando suba, debería ser subir y el mismo contenedor de día, sección del
mismo día Cuando nos desplazamos hacia arriba y hacia abajo, debe ir a la izquierda y a
la derecha en horizontal. Entonces agreguemos esas animaciones. Así que haga clic aquí y
luego cuando avance, vaya al efecto de movimiento y efecto de
movimiento, al efecto de
desplazamiento En el efecto de desplazamiento,
necesitamos esta vertical, así que da clic aquí la vertical
y veamos que está en acción En realidad, debería
estar abajo así. Bien. Ahora, fijemos
el punto de vista. Bien. Ahora vamos a crear una
nueva sección para que
podamos entender claramente
la animación, haga clic aquí y agregue Maxt como 600 min de altura como 600 y
ahora funcionará así Está bajando, haga clic aquí y hagamos parar
cuando le guste aquí. Entonces en movimiento aquí y
vamos a detenerlo bien. Justo aquí, no, no, ¿verdad? Bien. Bonito. Ahora tenemos que añadir el mismo
efecto a éste. Haga clic aquí y en efecto de movimiento
avanzado, haga clic en efecto de desplazamiento Y aquí tenemos que añadir
el pergamino horizontal. Y cuando lo desplace, debería ir así. Entonces aquí, va
así y sigue abajo, cuando golpee así
debería ser parar aquí mismo. Entonces vamos a ver. Bien.
Bonito. Ahora lo hemos completado
completamente ponte en contacto con la sección JB Family
Clinic Bien, aquí, acabo de
encontrar un problema. Entonces, si aumento el
tamaño del sitio web, esta sección irá aquí. Así que simplemente podemos arreglarlo, así que da clic aquí e
ir a avanzar de
antemano establece la
orientación horizontal como derecha, y ahora podemos configurarla aquí. ¿Es como aquí? A ver. Bien. Bonito. Haga clic en publicar
119. Arreglar el problema de la sombra de caja: Cuando reviso el sitio web, puedo ver este tipo de sombra de fondo y
el radio de esquina, así que no lo necesitamos aquí, y sé el
motivo de esto, vamos a arreglarlo. Si vamos al proveedor R,
valoraré la plantilla de proveedor R en el carrusel Loop y hago
clic en el contenedor Entonces si voy a Advance
y CSS personalizado, aquí tenemos el CSS, así abrimos el
sitio web en Nueva Pestaña. Veamos, y aquí voy eliminar este CSS
presionando Comando,
un comando para cortarlo y dar clic con Pablish ahora si
reviso el sitio web, el problema se solucionará A cuando lo eliminemos de aquí, podemos ver el fondo de los
elementos del proveedor dedicado también irán. Para arreglarlo, primero, solo
voy a poner
esto así y aquí puedo ir a
maquetación y en maquetación, voy a agregar una clase CSS. Agreguemos nuestro panel de proveedores. Este nombre puede ser cualquier cosa, pero voy a añadir
este tipo de nombre. Entonces voy a copiar esto e ir
a CSS personalizado y aquí, solo
agregaré nuestro panel de
proveedores así. Vamos a hacer diez, agregarlo
así, agregar diez, agregarlo así y
esperemos esta plata y veamos, está arreglado aquí, pero
aquí tenemos el problema. En realidad, tenemos que
agregar esta clase CSS dos, no en este contenedor. Creo que deberíamos agregarlo en el Carsel así que voy a quitar
aquí e ir a publicar, perdón, tenemos que dit hasta aquí Yo sólo los quito. Vamos a agregarlos así. Y esperemos que esto
funcione, por favor, luego haga clic en convento de nuevo
aquí, haga clic aquí Y después intentemos
editar la clase CSS aquí. Creo que funciona. Parece que funciona
y da clic en publicar. Entonces otra vez, vamos
a Editar plantilla, el contenedor en CS aquí
otra vez, tenemos problema. Sólo tenemos un CSSU. No agregamos el espacio
a aquí ahora Allgood, así que ahora hago clic en publicar y ahora cuando lo reviso,
debería ser trabajo Bien, ahora está funcionando.
120. Sección de revisión del diseño: parte 01: Todos ahora tenemos que crear esta familia Y de confianza
como la sección Q. Esta es la sección de vista previa. Para crear esto, podemos
usar las mismas técnicas que utilizamos para crear nuestra sección
dedicada a proveedores. Empecemos como lo hicimos antes iré al tablero de
Votress y aquí podemos crear un
grupo avanzado de campos personalizados para agregar las reseñas Así que aquí, actualmente tenemos nuestro campo de proveedores
y hago click en Nuevo. Y aquí voy a decir el nombre
como campo de revisión de clientes. Y luego hago clic
en Guardar cambios. En realidad, antes de
crear el grupo de campo, tenemos que crear
los tipos de pose. Entonces hago clic en tipos de fuerza, y aquí tenemos a nuestros
proveedores tipos de pose, y aquí tenemos que
opiniones de clientes, tipo de publicación, agregar nombre rural como
revisión de cliente y nombre singular será revisión de cliente y pose tipo e
será revisión de cliente, y no necesitamos ninguna nomonía de
texto y la visibilidad es pública
y haga clic en guardar cambios Ahora en configuración avanzada, podemos cambiar de laboratorio en realidad podemos agregar iconos a
este campo personalizado. Por lo que actualmente cuenta con
opiniones de clientes como este ícono de pin. Entonces si voy a visibilidad aquí, puedo ver icono aquí, agreguemos como estrella. Bien. Con qué estrella de revisión
funcionará con eso, seleccione la estrella y
haga clic en Guardar cambios. Bien, es Secky ahora
voy a grupos de campo y aquí voy a editar nuestras ruedas de revisión de clientes
que ya creamos, y en campo,
haré clic en Editar y primero tenemos que agregar nombre, en realidad, podemos agregar
este nombre como título Si vamos a nuestros proveedores,
proveedores y aquí
tenemos nuestros proveedores, así que hago clic en Editar
y cuando edite, podemos agregar esta doctora Lisa o el título como
revievername, como aquí en MR es el nombre del revisor y
en la descripción, podemos agregar la reseña y
necesitamos el campo personalizado
para en el headshot En realidad, agreguemos un campo de
descripción como este campo de imagen al
disparo en la cabeza. Hagámoslo. En aquí, agregaré campo de
descripción, lo que significa que el área de texto y la
etiqueta serán texto de revisión. Vamos a repasar. No hay necesidad de agregar texto solo revisar y el
nombre del campo será revisado. No necesitamos ningún valor predeterminado, luego hago clic en en campo. Y aquí tenemos que seleccionar
esto como imagen. Tal imagen. Bien. Y la
mesa de campo será de tiro a la cabeza, y el regreso será matriz de
imagen y buena. Ahora voy a ir a la
configuración en set in location rule post type will
be equal to client review, and now I click on save changes. Un buen. Ahora bien, si voy a sección de revisión del
cliente y hago
clic en en nuevo cliente Revisar, aquí tenemos lugar para agregar
título como nombre y revisión, luego la imagen de disparo en la cabeza Si voy al contenido del sitio web, podemos ver el nombre del cliente. Copie el nombre del cliente y
colóquelo como título. Entonces aquí, tenemos
la descripción, y luego tenemos que
obtener la imagen. Actualmente no tenemos imágenes. Tenemos esas pocas imágenes. A lo mejor en carpeta de imágenes, podemos ver las imágenes. Tenemos esta revisión avatas
en nuestra carpeta de imágenes. Aquí tenemos la carpeta de imágenes y en primera
revisión de proyecto Avatas Simplemente voy a resaltarlos
todos y vamos a agregar
la Imagen y simplemente
voy a pegar todo lo que
significa que podemos usar esos cuando
agreguemos la imagen real. Entonces aquí tenemos el
primer Avatar y
pulsamos en Seleccionar y dar click
en publicar, publicarlo. Bien, voy a agregar el
resto de opiniones de clientes. Entonces para hacer eso, hago clic en
agregar nueva reseña de cliente y aquí copia el nombre
y la descripción. Copia el nombre basado con una descripción y
colóquelo como revisión, después encuentra el David
y aquí está el David, ocultamos publicar
publicar la reseña Yo haré el resto y nos
vemos en la siguiente lección.
121. Revisa la sección con elemento de revisión: Me gusta crear la
sección de revisión de la manera sencilla, también te
mostraré el camino. Podemos simplemente usar elementos
de revisión de elemento y usarlo. Esta lección será la lección antes de crear
el carrusel anterior, así que no te preocupes en
la siguiente lección, verás cómo crear
el carrusel encendido Bien, ahora hago clic en el
icono más y aquí buscar reseña. Bien, aquí tenemos una caja de revisión, dragonrop así Y aquí tenemos que agregar artículos. Entonces agrega primero los artículos, tenemos que encontrar el artículo. Bien, en el contenido del sitio web, tenemos los detalles, así que
agreguemos voy a agregar uno por uno, pero vamos a tener el nombre
y no tenemos un título, lo
eliminamos y tenemos
la reseña así, así que no necesitamos el icono, quitar el icono a en imagen. Agreguemos una imagen así. Bien. Ahora hagamos lo
mismo para la carrera. Voy a añadir esas cinco
críticas y hasta pronto. Bien, agrega las diapositivas
o las reseñas, y ahora lo que tenemos que hacer
es poner el lado para la vista. Este será de tres lados para ver en
opción adicional, actualmente, voy a mantener la
opción por defecto y en el estilo, tenemos que cambiar las opciones. lado entre será 20 y el color del borde debe ser
ninguno y el radio del borde es 20, Borde con debe ser cero, el color del borde también debería ser non y el padding estaba demasiado bien, el padding estaba demasiado bien,
así que si lo
comprobamos desde aquí, podemos ver aquí el
relleno está demasiado bien. Entonces ahora en header, no
necesitamos un
color de fondo para el separador, no
necesitamos
color de fondo para el separador. Lo único que necesitamos es
la sombra paralela. Intentemos agregar la
sombra de caja después de completar este diseño y
tenemos que ir al texto, y en texto, el color
del nombre será negro y la tipografía
es subedición Sí, es tipo sub eding, y ahora en el título, no
tenemos título, así que no tenemos sobre eso Y el color de revisión
será texto y la tipografía
será párrafo En la imagen, veamos
el tamaño de la imagen. Figma design, el
tamaño de imagen 64 por 64, lo convierten en 64. Ahora aquí, tenemos que
encontrar la brecha, la brecha no
es, son dos L y el
radio será de 60. Hagámoslo 60. No necesitamos íconos. No vamos a editar ningún detalle de icono y aquí
tenemos un ícono de revisión. Veamos el tamaño del icono de revisión. Es de 23 por 23. Obtenemos 23 espaciado es
lo que es esto es seis, y el color es
vamos a ver el color, copiar el código de color y
pegar el código de color aquí. El caso es que
aún no vemos las críticas, vamos
a averiguar cómo mostrar las reseñas. En opción adicional,
¿tenemos una revisión? No. Bien, aquí tenemos que
agregar la calificación. Agreguemos calificación
como cinco así. ¿Bien? Bien.
Te tengo. Te tengo. Cinco. Sí, la calificación es cinco siempre porque
para el sitio web, agregamos la mejor
calificación para el Bien, ahora hasta ahora tan bueno y obtuvimos el resultado similar y
todavía tenemos mucho que hacer. Entonces, si vamos a Etyle y ahora
tenemos que poner la
parte de navegación en la navegación, pondré la flecha como cero porque
no necesitamos flechas A ver si hay una
manera de quitar las flechas. No. No veo una manera de
quitar la flecha, un estilo, podemos hacer eso. Bien, y la paginación
debería ser dos. Creo que está espaciando el espacio de paginación en medio
es 20 y el tamaño es 20 Entonces hagamos la talla 20. El color es color primario, color
activo será este color. Lo siento, el color es el color de acento, y el color activo
será este color. Bien. Ahora bien, ¿qué falta?
Entonces veamos, veamos. Aquí, nos falta los antecedentes. Entonces vamos a las diapositivas
y ¿tenemos? Sí, tenemos colores de borde. Tenemos una manera de agregar
el borde pero no en la sombra paralela. Entonces
veamos, veamos. Debería haber una manera o
debería haber lugar para
agregar la sombra de caja. De antemano veamos frontera, hagamos el radio fronterizo
como 20 y sombra paralela. No, se agrega a todas
las secciones o no hagamos eso solo
necesitamos agregar a la diapositiva. Así que me deslice, el
color de fondo está bien, bordes bordean con dos, y el radio del cuerpo, el color de la boda no
será de color blanco negro En realidad, no tenemos
forma de agregar sombra paralela, pero ya creamos el CSS tal vez agregando ese
código CSS aquí va a ser trabajo. Entonces seleccionaré el cuidador de bucle. Este, vamos a seleccionar
este bucle Carsel. ¿Recuerdas que
añadimos CSS cast así? Y bajemos por aquí. Vamos a Avanzar y en CSS, vamos, es trabajo. Guau agradable. Ahora ve al contenido y no
pensé que eso
funcionara, pero funciona. Entonces aquí credo
el borde con un Cuervo y el
color del borde no será Bien. Ese es el poder de CSS entonces tenemos que quitar
el separador, claro, y la brecha será k
Creo que la brecha está
extinguida está demasiado bien,
no seis demasiado bien. Creo que la brecha está
extinguida está demasiado bien, no seis demasiado bien Bien. Y aquí tenemos
la calificación como la siguiente. Creo que no hay manera de
agregar la ratin como abajo. Sí, tenemos que
crear ESS personalizado, pero podemos usar plantilla como
esta usando el loop carasel Esas son las limitaciones que también van a las
diapositivas en diapositivas, tenemos que poner la almohadilla. Ya fijamos la boda. Oh, no, tenemos que poner
lo alto al fondo. Oh, tal vez hagamos clic aquí y agreguemos abajo como 30, para que podamos obtener los mismos resultados. 81 es un poco más grande. Agreguemos el fondo como seis. Bien, ahora es bueno. Y en el de la navegación, los
elementos de paginación de navegación están demasiado cerca, así que intentemos arreglarlo Sé cómo arreglarlo.
Tenemos que 60 será. Sí, ya veremos qué podemos hacer. Pero por ahora, vamos a
mantenerlo así, y ahora tenemos que
agregar este mismo efecto. Para ello,
veamos qué podemos hacer. Primero, voy a publicar
esto y además no
tenemos opción de
crear este efecto anterior, así que tenemos
que ignorar ese también. Y ahora voy a refrescarme
y tenemos que encontrar la manera de agregar sombra
paralela aquí. Entonces este es el inconveniente que
utilizan los elementos preconstruidos, pero con el poder del
elemento orp podemos crear cosas
personalizadas para nuestro sitio web y
crear un sitio web totalmente personalizado usando
plantillas Ahora al menos intenta solucionar
este problema de paginación. Yo adicional establecido en. Bien, aquí, tengo una manera de ocultar las flechas y
la vegación
debería ser punteada en diapositivas Bien, aquí tenemos una
manera de agregar el mié, pero no necesitamos
agregar el con. Vamos a hacer diapositivas
se llama como tres. Hagámoslo como cuatro. No, deberían ser tres aquí
y las diapositivas estar bien. Ahora que arreglamos una cosa y aquí tenemos que
añadir todavía el top acolchado, aquí bien en estilo tenemos un no way tamaño 20 espacio beteen
¿Qué pasa con el avance A ver por adelantado. No creo que
tengamos una manera porque sucedió cuando
agregamos esta clase CSS, así que tenemos que arreglar esto con CSS. De todas formas, no vamos a
usar esta revisión de caja de revisión, así que simplemente la eliminaré. Esto es solo para
enseñarte a hacer eso y tenemos que agregar CSS, así no estamos
enfocados en CSS en este curso. Acabo de quitar esta parte y te veo
en la siguiente lección, que es crear el pie de página
122. Sección de revisión del diseño: parte 02: Bien, ahora agregamos reseñas. Entonces comencemos a diseñar. Entonces aquí, primero, vamos a comprobar
el tamaño de este contenedor. Entonces es 492. La altura es 492, así que hagámoslo como 500. Entonces primero, voy a eliminar este contenedor
innecesario y hago clic aquí iPlexBX da
clic en Bien, aquí, vayamos
a adelantar con anticipación. Vamos a quitar todo esto está
atascado y vamos a hacer 140, 140, y derecha e izquierda. No, no, no margen.
Debe ser acolchado. El relleno es 140 y el
relleno también es 140, y el margen superior será 120. Bien. Ahora, vamos
a la maquetación en maquetación. La estatura del hombre será de 500 pix. Ahora como primer paso, tenemos que añadir este encabezado. Vayamos aquí, escojamos el elemento y agreguemos el encabezado, luego copiemos este texto, pasemos el texto y hagamos que se
centre la alineación central. La tipografía es encabezado y el color del texto
será este texto Bien Ahora lo que tenemos que hacer
es agregar este carrusel. Consigamos carrusel de bucle. Voy a rápido este icono de elemento de
anuncio y bucle de
búsqueda y aquí
tenemos carrusel de bucle, lo
agrego y ahora selecciono el contenedor
principal y en raw, voy a hacer esto
como 60 porque aquí tenemos el
tamaño de invitación como 600 Ahora, vamos ahora vamos a hacer clic en este bucle casel y primero
tenemos que crear una plantilla Simplemente voy a hacer clic en crear una plantilla y dar clic
en Sato crearla. Bien, fui creado, y tengo que guardar uno de vuelta. Bien, ahora vuelve a seleccionar el
contenedor. En realidad, vamos a seleccionar
el bucle casel y aquí nuestra plantilla agregó
automáticamente Y no nos preocupemos por
el número de diapositivas por ahora. Y vamos a ir a consulta en consulta. Voy a establecer la fuente como reseñas de
clientes y vamos a arrastrarnos los datos predeterminados y luego lo que tenemos que hacer es hacer
clic en Editar plantilla Bien. Ahora voy a hacer clic en este más y dar clic en cuadro
Plex y dar clic en esta columna de dirección y voy a Avanzar y eliminar el
margen y relleno. Ahora como primer paso, tenemos que agregar la
imagen y el nombre para hacer esa frase agregar elemento
y buscar imagen y simplemente agregar la
imagen así. Aquí en aquí, voy a
hacer clic en la etiqueta dinámica, y en el campo de imagen ACF, voy a establecer la clave como cliente
opinión cabeza tiro así, la imagen agregada y la
resolución de la imagen será completa Y para mostrar el resultado, puedo hacer clic en Loop
item set in and on
query on review
setting on Query, configuraré la configuración de
vista previa de origen configuraré la vista previa de un ítem post específico para revisión del cliente y haga clic
en Aplicar y previsualizar. Todo bien. Ahora
agreguemos el resto de los detalles y luego
hagamos el diseño. Entonces ahora tengo que añadir el nombre,
así voy a añadir el
titular dentro de este y desde aquí voy a establecer el título del post ya que recuerdo que el título del post es el o
podemos dar click en Editar y verlo. Bien, aquí, el título de la publicación
es el nombre del revisor. Bien. Ahora solo lo voy a
cambiar de color y vamos ver la fuente ocho regular
25,
lo que significa aquí, debería ser sub ding, está subtitulado deja entrar el sub d,
y ahora voy a
duplicar este texto y
vamos a aquí seleccionar
el tipo de pose aquí,
quitar el
título de pose y dar clic en etiqueta
dinámica y
campo ACF, dar clic en
él y ahora voy a
duplicar este texto y vamos a aquí seleccionar
el tipo de pose aquí,
quitar el título de pose y dar clic en etiqueta
dinámica y
campo ACF, dar clic en La clave será la revisión. Sí, la reseña acaba de agregarse y su tamaño debe
ser de párrafo. Entonces vamos a establecer aquí, vamos a configurarlo como párrafo
y en contenedor, agreguemos el tamaño intermedio,
el tamaño de inviten es
el tamaño de invitación es, así que iré a layout y
el tamaño de fila será Ahora tenemos problema. Actualmente tenemos el
conjunto de iconos todos esos iconos son cinco, pero si alguien en revue de
cuatro estrellas, tenemos un lugar para, tenemos que hacerlo
personalizado porque si
solo agregamos cuatro estrellas
o cinco estrellas aquí, no
podremos
personalizarlo Tratemos de hacer lo siguiente. Ahora agregamos reseñas. Entonces comencemos a diseñar. Entonces aquí, primero, vamos a comprobar
el tamaño de este contenedor. Es 492, la altura es 492, así que hagámoslo como 500. Primero voy a quitar este contenedor innecesario
y doy clic aquí lex box, da clic en Columna cansada. Bien, aquí, vayamos
a adelantar con anticipación. Vamos a quitar todo esto está
atascado y vamos a hacer 140, 140, y derecha e izquierda. No, no, no margen.
Debe ser acolchado. El relleno es 140,
y el relleno
también es 140 y el
margen superior será 120. Bien. Ahora vamos
a la maquetación en maquetación. La altura del hombre será de 500 píxeles. Ahora como primer paso, tenemos que añadir este encabezado. Vayamos aquí, elemento p, y agreguemos el encabezado, luego copiemos este texto, el
texto y conviértanlo en el
centro de alineación central. La tipografía es encabezado y el color del texto
será este texto Bien Ahora, lo que tenemos que hacer
es agregar este carrusel. Consigamos carrusel de bucle. Voy a rápido este icono de elemento de
anuncio y bucle de
búsqueda y aquí
tenemos carrusel de bucle, lo
agrego y ahora selecciono el contenedor
principal y en raw, voy a hacer esto como
60 porque aquí
tenemos el
tamaño de invitación como 60, Bien Ahora vamos ahora vamos a hacer clic en este bucle casel y primero
tenemos que crear una plantilla Simplemente voy a hacer clic en crear una plantilla y dar clic
en Sato crearla. Bien, fui creado, y tengo que guardar uno de vuelta. Bien, ahora vuelve a seleccionar el
contenedor. En realidad, vamos a seleccionar
el bucle casel y aquí nuestra plantilla agregó
automáticamente Y no nos preocupemos por
el número de diapositivas por ahora. Y vamos a ir a consulta en consulta. Voy a establecer la fuente como reseñas de
clientes y vamos a arrastrarnos los datos predeterminados y luego lo que tenemos que hacer es hacer
clic en Editar plantilla Bien. Ahora voy a hacer clic en este más y dar clic en cuadro
Plex y dar clic en esta columna de dirección y voy a Avanzar y eliminar el
margen y relleno. Ahora como primer paso, tenemos que agregar la imagen
y el nombre para hacer eso me frase agregar elemento
y buscar imagen y simplemente agregar la imagen
así y si, aquí dentro, voy a dar click
en etiqueta dinámica, y en campo de imagen ACF, voy a configurar la clave como cliente
review head show así, la imagen agregada y
la resolución de la imagen será completa y para
mostrar el resultado Puedo hacer clic en Loop item
set in y on Query. No en la configuración de revisión en Query, estableceré la configuración de
vista previa de origen,
configuraré el elemento de publicación
específico de vista previa para revisión del cliente y haré clic
en Aplicar y vista previa. Ahora agreguemos el resto de los detalles y luego
hagamos el diseño. Ahora tengo que añadir el nombre,
voy a añadir el titular
dentro de este y desde aquí, voy a decir
el título del post ya que recuerdo el título del post es el nombre para que podamos dar click
en Editar y verlo. Bien, aquí, el título de la publicación es el nombre del
revisor. Bien. Ahora solo
lo cambiaré de color y vamos a ver la fuente regular 25,
lo
que significa aquí, debería ser sub ding, en
caso de que esté subtitulado
dejar entrar el sub d, y ahora voy a
duplicar este texto y vamos a seleccionar aquí
el tipo de pose aquí, quitar el
título de pose y dar clic en etiqueta
dinámica y
campo ACF, dar clic en La clave será la revisión. Sí, la reseña acaba de agregarse y su tamaño debe
ser de párrafo. Entonces vamos a poner en, y aquí, pongámoslo como párrafo y en contenedor vamos al
tamaño de invitación, el invertir en tamaño es dos. El tamaño atractivo es dos, así que iré al diseño y
el tamaño de la fila será dos. Ahora tenemos problema. Actualmente tenemos los íconos
todos esos íconos son cinco, pero si alguien agrega
revista de cuatro estrellas tenemos un lugar para, tenemos que hacerlo
personalizado porque si
solo agregamos cuatro estrellas
o cinco estrellas aquí, no
podremos
personalizarlo Intentemos hacerlo
en la siguiente lección. Bien, ahora agregamos reseñas. Entonces comencemos a diseñar. Entonces aquí, primero, vamos a comprobar
el tamaño de este contenedor. Entonces es 492. La altura es 492. Entonces hagámoslo como 500. Entonces primero, voy a quitar este contenedor
innecesario y
doy clic aquí Vlexbx da
clic en Bien, aquí, vayamos
a adelantar con anticipación. Quitemos todo esto
pegado y hagamos 140,
uno, 40, y derecha e izquierda. No, no, no margen.
Debe ser acolchado. El relleno es 140 y el relleno
izquierdo también es 140, y el margen superior será 120. Bien. Ahora, vamos
a la maquetación en maquetación. La estatura del hombre será de 500 pix. Bien. Ahora como primer paso, tenemos que añadir este encabezado. Vayamos aquí, escojamos el elemento y agreguemos el encabezado, luego copiemos este texto, desfasemos el texto y hagamos que se centre
la alineación en el centro. La tipografía es encabezado y el color del texto
será este Bien. Ahora lo que tenemos que
hacer es agregar este carrusel Consigamos carrusel de bucle. Voy a acelerar este icono de elemento de
anuncio y bucle de
búsqueda y aquí
tenemos carrusel de bucle, agregarlo. Y ahora selecciono el
contenedor principal, y en crudo, voy a hacer esto
como 60 porque aquí tenemos el tamaño
intermedio como 60. Bien. Ahora vamos ahora vamos a
hacer clic en este bucle casel y primero
tenemos que crear una plantilla Simplemente voy a hacer clic en crear una plantilla y dar clic
en Sato crearla. Bien, fui creado, y tengo que guardar uno de vuelta. Bien, ahora vuelve a seleccionar el
contenedor. En realidad, vamos a seleccionar
el bucle casel y aquí nuestra plantilla agregó
automáticamente Y no nos preocupemos por
el número de diapositivas por ahora. Y vamos a ir a consulta en consulta. Voy a establecer la fuente como reseñas de
clientes y vamos a arrastrarnos los datos predeterminados y luego lo que tenemos que hacer es hacer
clic en Editar plantilla Ahora voy a hacer clic en este más y dar clic en cuadro
Plex y dar clic en esta columna de dirección y voy a Avanzar y eliminar el
margen y relleno. Ahora como primer paso, tenemos que agregar la imagen
y el nombre para hacer esa frase, agregar elemento y buscar imagen y simplemente agregar la
imagen así. Aquí en aquí, voy a
hacer clic en etiqueta dinámica, y en el campo de imagen ACF, voy a establecer la clave como cliente de
revisión de tiro de cabeza así Bien, la imagen agregada y la resolución de la imagen
estará llena. Y para mostrar el resultado, puedo dar click en Loop item
set in and on Query. No en la configuración de revisión en Query, estableceré la configuración de
vista previa de origen,
configuraré la vista previa de un elemento de publicación
específico para la revisión del cliente y haré clic
en Aplicar y vista previa. Ahora agreguemos el resto de los detalles y luego
hagamos el diseño. Ahora tengo que añadir el nombre,
voy a añadir el titular
dentro de este y desde aquí, voy a decir
el título del post ya que recuerdo el título del post es el nombre para que podamos dar click
en Editar y verlo. Bien, aquí, el título de la publicación
es el nombre del revisor. Bien. Ahora
solo lo voy a cambiar de color y vamos a ver la
fuente regular 25, lo que significa aquí,
debería ser sub ding. Sí, entonces es sub pizarra
el sub d en y ahora voy duplicar este texto
y vamos a aquí seleccionar el
tipo de pose aquí y aquí, quitar el
título de la pose y dar clic en etiqueta
dinámica y
campo ACF, dar clic en él La clave será la revisión. Sí, la reseña acaba de agregarse y su tamaño debe
ser de párrafo. Entonces vamos a entrar aquí,
pongámoslo como párrafo
y en contenedor, agreguemos el tamaño intermedio, el tamaño atractivo es dos. El tamaño de inviten es dos, así que iré al diseño y
el tamaño de la fila será de dos Ahora tenemos problema. Actualmente tenemos los íconos
todos esos íconos son cinco, pero si alguien agrega
revista de cuatro estrellas tenemos un lugar para, tenemos que hacerlo
personalizado porque si
solo agregamos cuatro estrellas
o cinco estrellas aquí, no
podremos
personalizarlo Intentemos hacerlo
en la siguiente lección. Bien, ahora agregamos las reseñas. Entonces comencemos a diseñar. Entonces aquí, primero, vamos a comprobar
el tamaño de este contenedor. Entonces es 492, la altura es 492, hagámoslo como 500. Entonces primero, voy a quitar este contenedor innecesario
y hago clic aquí Plex box, da clic en Columna cansada. Bien, aquí, vayamos
a adelantar con anticipación. Eliminemos todas estas cosas, y hagamos 140,
uno, 40, y derecha e izquierda. No, no, no margen.
Debe ser acolchado. El relleno es 140 y el relleno
izquierdo también es 140, y el margen superior será 120. Bien. Ahora vamos
a la maquetación en maquetación. La altura del hombre será de 500 píxeles. Ahora como primer paso, tenemos que añadir este encabezado. Vayamos aquí, escojamos el elemento y agreguemos el encabezado, luego copiemos este texto, desfasemos el texto y hagamos que se centre
la alineación en el centro. La tipografía es encabezado y el color del texto
será este Bien. Ahora lo que tenemos que
hacer es agregar este carrusel Consigamos carrusel de bucle. Voy a rápido este icono de elemento de
anuncio y bucle de
búsqueda y aquí
tenemos carrusel de bucle, lo agregaré, y ahora selecciono el
contenedor principal y en raw, voy a hacer esto
como 60 porque aquí tenemos el tamaño de invitación como 60 Bien. Ahora vamos ahora vamos a
hacer clic en este bucle casel y primero
tenemos que crear una plantilla Simplemente voy a hacer clic en crear una plantilla y dar clic
en Sato crearla. Bien, fui creado, y tengo que guardar uno de vuelta. Bien, ahora vuelve a seleccionar el
contenedor. En realidad, vamos a seleccionar
el bucle casel y aquí nuestra plantilla agregó
automáticamente Y no nos preocupemos por
el número de diapositivas por ahora. Y vamos a ir a consulta en consulta. Voy a establecer la fuente como reseñas de
clientes y vamos a arrastrarnos los datos predeterminados y luego lo que tenemos que hacer es hacer
clic en Editar plantilla Ahora voy a hacer clic en esto más
puedo hacer clic en cuadro Plex y dar clic esta columna de dirección e ir a Avanzar y eliminar el
margen y relleno. Ahora como primer paso, tenemos que agregar la
imagen y el nombre para hacer eso me frase agregar elemento y buscar imagen y simplemente agregar la
imagen así. Aquí en aquí, voy a hacer clic en etiqueta
dinámica y en el campo de imagen
ACF, voy a establecer la clave como cliente
review head shot así la imagen agregada y la resolución de
la imagen será completa y para
mostrar el resultado, puedo hacer clic en Loop
item set in and on
query on review
setting on Query, voy a establecer la configuración de
vista previa de origen establecer la vista previa de un elemento post específico a la revisión del cliente y haga
clic en Aplicar y vista previa. Todo bien. Ahora
agreguemos el resto de los detalles y luego
hagamos el diseño. Ahora tengo que añadir el nombre,
así voy a añadir el
titular dentro de este y desde aquí voy a establecer el título del post ya que recuerdo que el título del post es el para que
podamos dar click en Editar y verlo. Bien, aquí, el título del post
es el nombre del reviever. Bien, ahora
solo lo voy a cambiar de color y veamos la
fuente regular 25, lo que significa aquí,
debería ser sub ding. Sí, si es sub establecer
el subtitulado en y ahora voy duplicar este texto
y vamos a aquí
seleccionar el tipo de pose aquí ,
quitar el título de la pose y dar clic en etiqueta
dinámica y
campo af, haga clic en La clave será la revisión. Sí, la reseña acaba de agregarse y su tamaño debe
ser de párrafo. Entonces vamos a entrar aquí,
pongámoslo como párrafo
y en contenedor, agreguemos el tamaño intermedio, el tamaño atractivo es dos. El tamaño de inviten es dos, así que iré al diseño y
el tamaño de la fila también morderá Ahora tenemos problema. Actualmente tenemos el
conjunto de iconos todos esos iconos son cinco, pero si alguien agrega revista de
cuatro estrellas, tenemos un lugar para, tenemos que hacerlo
personalizado porque si
solo agregamos cuatro estrellas
o cinco estrellas aquí, no
podremos
personalizarlo Intentemos hacerlo
en la siguiente lección. Bien, ahora agregamos las reseñas. Entonces comencemos a diseñar. Entonces aquí, primero, vamos a comprobar
el tamaño de este contenedor. Entonces es 492, la altura es 492. Entonces hagámoslo como 500. Entonces primero, voy a quitar este contenedor innecesario
y hago clic aquí Plex box, da clic en Columna cansada. Bien, aquí, vayamos
a adelantar con anticipación. Eliminemos todas estas cosas, y hagamos 140,
140 , y derecha e izquierda. No, no, no margen.
Debe ser acolchado. El relleno es 140 y el relleno
izquierdo también es 140, y el margen superior será 120. Bien. Ahora, vamos
a la maquetación en maquetación. La altura del hombre será de 500 fix. Ahora como primer paso, tenemos que añadir este encabezado. Vayamos aquí, escojamos el elemento y agreguemos el encabezado, luego copiemos este texto, desfasemos el texto y hagamos que se centre
la alineación en el centro. La tipografía es encabezado y el color del texto
será este texto Bien Ahora lo que tenemos que hacer
es agregar este carrusel. Consigamos carrusel de bucle. Voy a hacer clic en este icono de elemento de
anuncio y buscaré Loop y aquí
tenemos loop carrusel, lo
agrego y ahora selecciono el contenedor
principal y en raw, voy a hacer esto
como 60 porque aquí tenemos el tamaño de invitación como 60 Bien. Ahora vamos ahora vamos a
hacer clic en este bucle casel y primero
tenemos que crear una plantilla Simplemente voy a hacer clic en crear una plantilla y dar clic
en Sato crearla. Bien, fui creado, y tengo que guardar uno de vuelta. Bien, ahora vuelve a seleccionar el
contenedor. En realidad, vamos a seleccionar
el bucle casel y aquí nuestra plantilla agregó
automáticamente Y no nos preocupemos por
el número de diapositivas por ahora. Y vamos a ir a consulta en consulta. Voy a establecer la fuente como reseñas de
clientes y vamos a arrastrarnos los datos predeterminados y luego lo que tenemos que hacer es hacer
clic en Editar plantilla Ahora voy a hacer clic en este más y dar clic en cuadro
Plex y dar clic en esta columna de dirección y voy a Avanzar y eliminar el
margen y relleno. Ahora como primer paso, tenemos que agregar la imagen y el
nombre para hacer eso fraseo, agregar elemento y buscar imagen y simplemente agregar la
imagen así. Aquí en aquí, voy a
hacer clic en etiqueta dinámica, y en el campo de imagen ACF, voy a establecer la clave como cliente
review head show así, la imagen agregada y la
resolución de la imagen será completa Y para mostrar el resultado, puedo dar click en Loop item
set in and on Query. No en la configuración de revisión en Query, estableceré la configuración de
vista previa de origen,
configuraré el elemento de publicación
específico de vista previa para revisión del cliente y haré clic
en Aplicar y vista previa. Ahora agreguemos el resto de los detalles y luego
hagamos el diseño. Ahora tengo que añadir el nombre,
voy a añadir el titular
dentro de este y desde aquí, voy a decir
el título del post ya que recuerdo el título del post es el nombre para que podamos dar click
en Editar y verlo. Bien, aquí, el título de la publicación
es el nombre del revisor. Bien. Ahora voy a
cambiar su color y veamos la
fuente regular 25, lo que significa aquí,
debería ser sub ding. Sí, entonces es sub tarde el
subtitulado en y ahora voy duplicar este texto
y vamos aquí, seleccione el tipo de pose aquí,
quite el título de pose y haga clic en etiqueta
dinámica y
campo ACF, haga clic en La clave será la revisión. Sí, la reseña acaba de agregarse y su tamaño debe
ser de párrafo. Entonces vamos a entrar aquí,
pongámoslo como párrafo
y en contenedor, agreguemos el tamaño intermedio, el tamaño atractivo es. El tamaño de inviten es dos, así que iré al diseño y el tamaño de la fila se morderá
ahora tenemos un problema Actualmente tenemos los íconos
todos esos íconos son cinco, pero si alguien agrega
cuatro estrellas rev, tenemos un lugar para, tenemos que hacerlo
personalizado porque si
solo agregamos cuatro estrellas
o cinco estrellas aquí, no podremos
personalizarlo. Intentemos hacerlo
en la siguiente lección.
123. Sección de revisión del diseño: parte 03: Uno, mira esto.
Tenemos calificación IA widget, si lo agregamos aquí
y aquí podemos establecer la escala de calificación vamos a
establecerla como cinco y en rating, podemos agregar t dinámica, lo que significa que tenemos que crear campos personalizados
avanzados que podamos tener capacidad de agregar punto de
calificación como número Hagámoslo. Antes de eso, si buscamos revisión, también
podemos ver este
cuadro de revisión y agregar reseñas
individuales
a este cuadro de revisión y personalizar el diseño. Este caso, sigamos con el loop carsel y
veamos qué podemos hacer Ahora voy a
campo personalizado avanzado y grupo de campos. En grupo de campo, tenemos que
seleccionar el campo de revisión de clientes. Vamos a editarlo. Entonces aquí
tenemos que agregar nuevo campo. Este tipo de campo será número. Agreguemos la etiqueta de campo
ya que la revisión es co así. Ahora hago clic en Guardar
cambios y ahora si vamos a revisión de clientes y
revisión de portada, podemos ver nuevos campos de revisión, así que haré cinco y lo guardaré. Bien, hagámoslo por el resto. En realidad aquí, no necesitamos agregarlos manualmente porque ya
creamos esto. Podemos agregar
valor por defecto a este campo. Vamos a
campo personalizado avanzado y grupo de campos
en grupo de campo editar
el campo de revisión cien. Y aquí tenemos que editar esta reviewc aquí como el valor por defecto,
voy a ingresar cinco No, no necesitamos
agregar nuevo campo. Entonces aquí agregamos cinco como valor predeterminado y damos
clic en guardar cambios. Y ahora vamos
a las opiniones de clientes. Y si vamos a
éste de esta revisión, tenemos que ver el puntaje de
revisión como cinco. Acabamos de agregar campo vacío porque creo que cuando
eliminamos ese campo, no
se quitó así que
volvamos y aquí eliminado no necesitamos simplemente
eliminar y dar clic en Guardar cambios. Bien. Ahora en reseñas y vamos a MI y su valor
predeterminado es de cinco. Bien, hasta ahora tan bien. Y ahora tenemos que
añadir el diseño. Vamos a nuestro artículo elemental, y aquí tenemos estas reseñas, vamos a calificación y en
estaño avance personalizado. Um vamos a agregar el as. En realidad, tenemos que repetírtelo. Bien, ya salvamos
y eso es algo bueno. Entonces si agregamos como dos, esto se mostrará como
dos, pero en este caso, podemos establecer la etiqueta dinámica, dar
clic en el campo avanzado de
etiqueta dinámica
y dar clic en
Rueda Advancnumber tenemos revisión Muy bien, hasta el momento tan bueno y ahora puedo
publicarlo y si
queremos, podemos verlo en
el diseño. Bien.
124. Sección de revisión del diseño: parte 04: Bien, editemos la plantilla
y hagamos mejor el diseño. Doy clic en Editar plantilla,
y aquí vamos. Veamos, primero tenemos que hacer esta imagen en el lado izquierdo y el nombre en el lado derecho, y la imagen que veo es 64 por 64. Como tenemos que sumar el radio de esquina
redondeada. Hagámoslo, primero
selecciono la imagen. Un estilo, hagamos centro de
alineación y luego cambiemos la celda pico
a 64 y el radio será 30,
30 no es bueno, pero alrededor de 60, 60 funcionarán perfectamente. Se ve bien, entonces lo que tengo que
hacer es crear nuevo contenedor, vamos a crear un
contenedor como este e ir a avanzar, no aquí. Seleccionamos el contenedor que
acabamos de crear y de antemano, eliminarlo margin y
padding y agregar la imagen dentro del nombre del contenedor
dentro del contenedor. Después seleccionamos el
contenedor y en el diseño, cambiarlo dirección
a fila así, luego hacer que se alinee al centro
aquí tenemos un pequeño problema. Si comprobamos que esta imagen
no esté perfectamente alineada, tal vez la tengamos podemos establecer esta imagen de tamaño mediano
porque en Advance, podemos agregar padding
top pass menos, no padding, el margin top, vamos a hacer margin
top pass menos. Sí, ahora va a ser perfecto y hago clic en el
segundo contenedor, y aquí tenemos que
agregar el hueco de columna. Si revisamos aquí y vemos
la columna está demasiado bien, hagámosla también. Y ahora tenemos que
encargarnos de estos EA. Copia el color de las estrellas y
haz clic en el estilo r one. Cambiemos este
color así. Y ¿qué pasa con el tamaño? El tamaño de la estrella es de 23 por
23 y el espacio es de seis. Hagamos el espaciado como seis
y el tamaño es 23 por 23. Bien. Ahora bien, ¿qué
tenemos que editar? Bien, hasta ahora tan bueno todo va a estar
perfectamente alineado, y entre las tallas 12 aquí. Creo que ya
agrego eso en el medio. Si no, sí,
ya lo agregamos. Bien. Ahora lo
que tenemos que hacer es agregar el efecto de fondo
como lo hicimos aquí. Ya creamos el código CSS y la clase CSS. Vamos a agregarlo. Antes de agregarlo, agreguemos
los paddings alrededor de esta caja. Veamos los patrones aquí. Son dos y aquí,
bueno, y este tamaño de caja es de 300. Hagamos esos detalles, seart el contenedor y antemano hay un
paddinastl Entonces el ancho será de 300. No, la altura será de 300. Vamos a hacerlo. Bien, ¿qué
pasa con el radio de la esquina? Veamos que el
radio de la esquina es 20, así que en estilo, el radio del borde 20. Bien, creo que
todo está bien, así que haz clic en publicar o
haz clic en siete gafete. Y ahora sólo tenemos que
añadir esa clase CSS. Así que vamos a tratar de encontrar esta clase, y así sucesivamente aquí, tenemos que seleccionar
el bucle carel In loop carsel de antemano aquí
tenemos la clase CSS, así que vamos a copiar la clase
y vamos a seleccionar este bucle carusELO avance vamos a agregar el CSS plus aquí y
verlo simplemente Ahora lo que tenemos que hacer es
encontrar en el tamaño atractivo. El tamaño atractivo es de 20, aquí, tenemos que ir a Etyle en la
brecha de estilo entre deberían ser 20 Bien. Ahora, lo publicaré y hasta el momento es tan bueno
y solo lo agregamos. Pero sin embargo, cuando
comprobamos el diseño, podemos ver en la tercera revisión, solo
vemos la mitad
de esa revisión. Vamos a crear este
efecto para hacer eso, aquí tenemos que ir
al contenido. En cuanto al contenido sobre maquetación, primero tenemos que averiguar
el número de diapositivas. Entonces veamos actualmente sólo
tenemos cinco diapositivas. Entonces hagamos esto como cinco, y deslizar en exhibición
serán dos. Entonces ahora solo verás
dos, pero no te preocupes. Voy a mostrar cómo solucionarlo, y deslizar en Icroll será uno Entonces si vamos a establecer, aquí tenemos diapositiva offset. Agregaré diapositiva de desplazamiento como izquierda. Cuando lo agrego como a la izquierda, apenas
vemos diapositiva desde aquí. En realidad, debería
estar así. Ahora bien, ¿y si aumentamos
este ancho de desplazamiento? Cuando agregamos el ancho de desplazamiento, simplemente aparece así, pero lo necesitamos para mostrar más. Haz eso, simplemente podemos
agregar el offset con 200. Digamos que 200
serán del tamaño. Debería ser un poco más grande. Hagámoslo al 20 al 30 al 52 50 será el mejor
tamaño hasta el momento hasta el momento bueno. Y ahora en navegación, no
necesito mostrar las
flechas así que esconden las flechas. En la paginación, quiero ver
el punto como la paginación. Agreguemos estilo a esos puntos. Vayamos a le con
estilo sobre la paginación. Los puntos intermedios serán 220 y los
lados de punto serán 20. espacio entre puntos será 20, tamaño será 20, y el color será
este color primario. Ahora el espaciado debería ser, creo que son 30, son 20. Hagámoslo 20. Y ahora tenemos un problema tenemos aquí muchos puntos sobre encima. Hagamos el color
como color azul. Bien. Ahora para reducir
este conteo de puntos, tenemos que cambiar
la diapositiva en Scroll. Hagámoslo como dos. Entonces, dos serán los perfectos. Por lo que ahora dos diapositivas
serán cambiadas así. Bien, ahora hago clic en Publicar y aquí tenemos una sección de
revisión como
125. Diseñar sección de pie de página: Hola a todos. Ahora
tenemos que diseñar este pie de página. Entonces hagámoslo. Primero, voy a nuestra plantilla
de elemento y no necesitamos esta sección, así que vamos a eliminarla
y dar clic en publicar, después tenemos que crear
la plantilla de pie de página, así iré a WP admin, y en WP Admin, iré a plantillas
y guardaré plantilla. Y si hacemos clic en Publicar, podemos ver la plantilla, y ya creamos
la plantilla principal, pero no agregamos ningún contenido. Sin embargo, crear la
sección Puta es realmente fácil. Simplemente haz clic en esta plantilla para
agregar nueva y aquí puedes seleccionar
el tipo de plantilla. Aquí, en este caso,
aísla el pie y agrega el nombre y luego da clic
en Crear Plantilla. Ya lo hice y aquí voy a dar click en
Editar con elemento. Creo que
ya lo harás también. Y aquí no
pienses en esos dos, empecemos a diseñar. Voy a cerrar el contenedor
que ya creé, luego hago clic en pasar
y dar clic aquí y dar clic en dirección
columna tipo contenedor. Vamonos aquí. Después haga clic aquí para encontrar la altura es de 42, cuatro. Agreguemos la altura mínima como
42, lo siento, 42, cuatro. Bien, y primero tenemos que
crear esta sección. Para crear esta sección, podemos crear un nuevo contenedor. Entonces hagamos esta
dirección como cruda y luego hagamos clic más segundo y
agreguemos un contenedor como este. Y en este contenedor por adelantado retirar todos los rellenos
y el margen. Bien. Primero tenemos que agregar este logo, seleccionar el logo y dar clic en Exportar y dar clic en Exportar logo, y aquí ir aquí y buscar imagen y agregar
la imagen así, clic aquí y simplemente arrastrar y
robar ese logo que acabamos crear y dar clic en
Seleccionar y aquí en Enlace, clic aquí y dar clic
en URL personalizada, y aquí tenemos que agregar
el título de la página principal. Aquí solo podemos seleccionar las etiquetas dinámicas y
hacer clic en la URL del sitio, por lo que será la URL de la
página principal y tenemos que hacer este color
en este color negro. Voy a copiar el
código de color de Figma design y dar clic en el
contenedor principal en Etyle, dar clic en el tipo de fondo y
en agregar el color así Hasta el momento tan bueno. Entonces en el estilo de imagen
configuramos la alineación como a la izquierda y ahora
tenemos que agregar este texto, así que simplemente voy a
copiar el texto más segundo titular en
el título aquí, pegarlo aquí y los
tamaños de texto párrafo y
alineación a la izquierda, luego el color será de color blanco. No necesitamos
pensar en el ancho de este contenido porque podemos
arreglarlo después de completar el diseño, luego qué tenemos que agregar
estos enlaces de redes sociales. Por qué aquí buscar icono
social social y aquí tenemos icono social. Yo solo los arrastre y
robo así y aquí podemos agregar los íconos. Veamos qué tipo
de icono tenemos. Tenemos Facebook, Twitter
o X vinculados en Instagram. Vamos a agregar esos sistemas Twitter Este es el
ícono que deseas. Facebook, Twitter, vinculado en, esto debería estar vinculado en y aquí tenemos que agregar
la URL del enlace por ahora, no
voy a agregar ninguna URL, luego dar clic en agregar elemento y agregar el siguiente elemento,
que es Instagram. Da click aquí buscar en estrella
aquí tenemos el ícono de Instagram. Ahora la alineación debe ser vuelta
y la forma debe ser redondeada y un estilo cambia de color
oficial a personalizado. En color primario,
hagamos este color de relleno ya este color azul como este y el color secundario
será blanco así. Hasta el momento tan bueno.
Averiguemos el tamaño de este icono. Es 56 por 56. Hagamos este tamaño ya que 56 56
es demasiado porque agregamos el espacio vamos a disminuir el tamaño y vamos a
hacerlo como 28,
28 va a ser peor. Y acolchado, el acolchado
debe ser pequeño. Entonces veamos el relleno
entre esos íconos. Vamos a conseguir el icono áspero. Vamos a obtener una estimación aproximada
que debería ser de seis. Hagámoslo como
seis a píxel y seis. Bien, ahora podemos cambiar
esto a 56 así. ¿Bien? Y
espaciado espaciado es dos, vamos a hacer esto no tiene relleno, relleno es seis
espaciado es así. Ahora veamos el radio de esquina, haga clic aquí y el radio de esquina es nueve y vayamos aquí, luego en radio de borde, no radio de esquina como nueve. Bien. Y en IconHo el color
primario será primario, color
secundario
será secundario, será así y ahora tenemos que agregar
el tamaño intermedio Si verificamos el tamaño entre, es 20, agregue el
espacio de fila a los contenedores. Deje que el contenedor en la fila de
diseño se separe como 20. Esta sección está bien. Ahora tenemos esta
sección de enlaces rápidos. Vamos a crear. Simplemente puede duplicar este
contenedor así, hacer clic
derecho y duplicar. Ahora aquí, lo que tenemos que añadir es enlace texto seleccionado y
aquí eliminar esta imagen y aquí cambiar esto a enlace
débil y cambiar
el tipo de gravital d así y luego tenemos que
añadir el así en el menú es fácil También eliminaré esta
sección y aquí menú de búsqueda. Consigamos esta palabra presione menú y ponla así
y seleccione el menú. Por ahora, vamos a seleccionar el menú
principal ya que el menú y la disposición será la
alineación vertical se iniciará. Creo que es inicio. Es y aquí tenemos que
cambiar el diseño. Entonces, antes de hacer algo, cambiemos el diseño. Entonces la tipografía será
botones y el color del texto
será este color blanco como
este también entre tamaños, hagamos puntero No no, no necesitamos un puntero,
así que
vayamos al contenido
y alineación vertical Puntero no es animación, indicadores
no su.
No lo necesitamos. Y el punto de interrupción móvil no será
ninguno porque no necesitamos agregar el menú desplegable móvil o el menú Hamburguesa
a este menú de Putter Y ahora vamos a Etyle en
eTyleOh hagamos el color del texto
a primario y al activo, hagamos el color del texto
a primario y Algod ahora tenemos que cambiar Aquí tenemos
peaje de prueba ¿y si
agregamos esta S? Funcionó bien. Todo bien. ¿Qué pasa
con el tamaño intermedio? I entre talla es 30. Hagamos el tamaño
intermedio como 30. Aquí, no, no aquí en contenedor, entre el
lado de la fila debe ser 30. Bien, vamos a duplicar
este contenedor y crear el tercer menú antes
de hacer eso tenemos un problema, así que este menú no está a la izquierda, así que vamos a hacerlo a la izquierda Agrega padina horizontal cero y quedará
perfecto así Bien. Ahora en aquí lo que tenemos que hacer tenemos que agregar
los datos de contacto, copiar los datos de contacto. Cambiar el título así, entonces lo que tenemos que hacer
es agregar esa información. Voy a quitar este menú y aquí voy a añadir un titular a este contenedor recién creado
y en este estilo cambiar tipografía a párrafo y el color del
texto será blanco ¿Es párrafo? Sí,
es párrafo. Sí, me párrafo.
Copia el teléfono. Contenido solo un teléfono como este, luego agrega el PR así y vamos a duplicar esto y
aquí tenemos el correo electrónico, copia el correo electrónico y
pégalo así. Entonces tenemos dirección,
copia la dirección, y duplicamos esta con la dirección y la
BR para romper la línea. Entonces tenemos horas
duplicamos esto. En ns en el Bo. Ahora lo que tenemos que hacer
es encontrar el tamaño inbten. El tamaño inbten es dos. No obstante, entre aquí la información de contacto
y el texto es de 30. El contenedor principal en el
medio o el tamaño debe ser 30 y haré clic aquí para agregar nuevo contenedor
en este contenedor. Quitar el perdón, voy a dar clic aquí y eliminar el
margen y los rellenos, después pondré esos contenidos
dentro de ese contenedor, seleccionaré el contenido y
lo pondré dentro de este
contenedor así Creo que este debería
ser el correo electrónico superior, bueno y seleccionar
ese contenedor y fila de diseño de fila debe ser peaje. Y aquí tenemos otro problema, así que no necesitamos
este relleno de arriba, ¿y si quitamos esto? Cuando eliminamos esto, está arreglado, pero necesitamos el relleno, podemos agregar el espacio entre
los dos así. Son dos. Sí, son dos. Muy bien, hasta el momento
tan bueno y ahora
tenemos el contenido, y ahora lo que
tenemos que hacer es hacer clic en el pie de página principal y aquí
tenemos espacio como 30 en la parte superior. Hagamos los 30. Lamer el relleno y en la parte superior, hazlo 30, 140, y la izquierda debe
ser 140 así. Ahora en el diseño,
tenemos que agregar el espacio manera uniforme o el espacio entre
ellos debería ser el camino. Nuevamente, si lo comprobamos, nuevamente, si lo comprobamos, tenemos 88
como la talla intermedia. Vamos a agregar 88 como
el tamaño intermedio. Aquí, el tamaño de la columna
debería ser 88 así. Ahora se verá
así y es bastante bueno aquí
tenemos un problema. Esta imagen debe
ser así que solo nosotros podemos hacer es hacer clic en la
imagen y en el margen, sólo hay que añadir margen negativo
a la parte superior así. Bien, esto se basará. Así que ahora pincha en publicar y
ahora tenemos un pie de página perfecto, y luego tenemos que crear
esta parte de copyright. Ahora si comprobamos
esto en el diseño, vamos a abrir esta nueva ventana y desplazarnos hacia abajo el pie de página
se verá así y aquí tenemos que agregar
espaciado para que simplemente podamos click aquí y en
Avance y en margen, agregar Margen top 20. Publica y
veamos el diseño. Ahora tenemos que agregar
el crédito de la foto, así que editemos la siguiente lección.
126. Diseñar la sección de derechos de autor del pie de página: Ahora vamos a crear esta
sección de copyright. Empecemos. Primero, voy al pie de página y vamos a crear
un nuevo contenedor, y en este contenedor, tenemos que cambiar el color. El color es el
color que tenemos la sección anterior por lo que podemos fácilmente lo que estilo en color, dejar que el color usando
nuestros colores globales. Y aquí, vamos a
averiguar el tamaño, la altura es 64. En realidad, tenemos la altura
usando este texto, y por ahora, agreguemos
este borde blanco. Averiguemos los detalles de la
frontera. El trazo es de un pixel, así que vamos aquí y
podemos buscar fácilmente en HR, tenemos divisor, así que solo
ponlo así y un tyle el color debe ser color
blanco y gap
debe ser cero Bien. Solo agregamos el divisor
y ahora tenemos que agregar esta toma copia la t y vamos a Mantequilla Principal y da click
aquí para agregar el titular, agregar titular así. Lo hizo. Agreguemos el titular, texto aquí y gota de dragón en
este contenedor así. Bien. Y en estilo, cámbialo a creo que el tamaño es tamaño de
botón y
secundario. A ver. A ver. Sí, el
tamaño es el tamaño del botón. Sí, debería
ser medio, ¿verdad? Sí, mediano 20, medio. Bien. Bueno. Ahora lo que tenemos que
hacer es agregar algo de espaciado. El espaciado es de 20 por 20 ¿verdad? Sí, son 20 por 20. Entonces en el titular, ve a avanzar en avance, acolchado
superior debe ser y el acolchado inferior
debe ser 20 así. Bien. Entonces lo que tenemos que
hacer es agregar el texto. Entonces aquí tenemos que
agregar la corriente aquí. Para agregarlo, solo podemos ir a
aquí y en la etiqueta dinámica, podemos obtener la fecha actual. Veamos la fecha actual aquí. Tenemos fecha y hora actual, seleccionarla y el formato de fecha será veamos
el formato de fecha. El formato de fecha está bien, pero solo necesitamos la fecha. No necesitamos
solo necesitamos el aquí. Veamos que nos hemos configurado
para ponernos solo en costumbre. En personalizado, solo podemos agregar esta Y y eliminar el resto
de detalles como este. Bien. Ahora adelantando antes, podemos agregar esta parte de copyright. Solo agregue los derechos de autor
en ese momento después será el resto del After será el resto de
los detalles así. Bien. Deberíamos tener un espacio. Bien, bien. Y ahora glicon publica
para publicar el diseño, y ahora si vemos
en el diseño real, se verá así Y aquí tenemos un problema. Los íconos son demasiado grandes, así que arreglemos eso haga clic aquí. Y en tamaño, vamos a
hacerlos poco pequeños como 45 hacer arrozales cuatro y el espaciado istelo y ahora se vea
bien y haga clic en publicar Simplemente diseñamos
toda la sección de la página principal. Ahora lo que tenemos que hacer es
agregar la animación y hacer que este diseño sea amigable para móviles y luego tenemos que hacer
la siguiente lección.
127. Añade efecto de movimiento: Bien, ahora agreguemos
efecto de movimiento a nuestro sitio web. Entonces ya estamos en
algún efecto de movimiento. A modo de ejemplo, si hago clic en este titular y de antemano, voy al efecto de movimiento, podemos ver desvanecerse en la animación de
entrada normal. Entonces a partir de la segunda sección, no
voy a agregar para
artículos individuales en lugar de eso, voy a agregar para
toda la sección. Entonces hago clic en la sección
y voy a avanzar de
antemano sobre el efecto de movimiento
en la animación de entrada, hacer que se desvanezca, así. Entonces hagamos
la siguiente sección y
la siguiente sección. Así que todas y cada una de
las veces que diseñas un sitio web, siempre piensa en el usuario. El usuario no necesita ninguna cosa elegante. Necesita tener una manera
sencilla de obtener
solución a su problema. Entonces tenemos
que abordar eso en lugar de agregar muchas animaciones y complicar
nuestro sitio web. Por lo que agregar este tipo de efecto de movimiento
simple nos
conseguirá el mejor resultado. Bien, ahora hago clic en
Publicar y para el pie de página, no
voy a agregar ningún tipo Imagine. Bien, ahora si
reviso el diseño, abramos el diseño en nueva pestaña y se
verá así. Bien. Ahora en el siguiente video, arreglemos el problema de la capacidad de
respuesta o hagamos que el sitio web sea receptivo
para dispositivos móviles
128. Arreglar el problema responsivo: parte 01: Bien, hagamos que nuestro
sitio web sea receptivo para dispositivos móviles. Antes de entrar en el
móvil y la tableta, veamos nuestro sitio web mira
en la versión de escritorio. Para hacer eso, podemos usar la herramienta de prueba
receptiva del sitio web. O simplemente puedes verificar la capacidad de respuesta
de Google
Mobile y
verás muchos resultados, así que voy a obtener este resultado Y aquí, actualmente, si
agrego la URL de nuestro sitio web, solo nos mostrará la página de modo
mantenedores, y también se conoce
mobile responsive de todos modos, no
necesitamos
preocuparnos por la página de inicio Sin embargo, tenemos que
hacer que el sitio web en vivo para verificar la capacidad de respuesta
móvil Entonces hagámoslo. Vaya a la página web, dashboard, aquí y aquí, haga clic en
el modo de mantenimiento. Y aquí, vamos a
elegir el modo para desactivar y dar clic
en Guardar cambios. Bien, ahora hago clic en Comprobar. En realidad, tengo que
borrar el caché. Todavía no
hablamos del cache in, pero si ves este
tipo de cache, plug in o este tipo de, simplemente
puedo hacer click en perch
e ir aquí, dar click en Check Bien, aquí, nuestro
sitio web se verá en el escritorio de tamaño 1024 y no
se ve muy bien en absoluto, pero podemos
abordarte esto en la tableta. Averiguemos diferente
tamaño y haga clic en este tamaño y luego
haga clic en el tercer tamaño, y aquí esto se verá esto
así que solo voy a nuestro editor, y aquí tenemos
la versión tablet, y tablet fortet mostrará
hasta diez a 24 fixel, lo que significa que podemos
ignorar el 1024, pero a partir de aquí, tenemos que
considerar sobre el diseño En realidad, en el 12 18, creo que esto también se
aplicará para la tableta. Veamos, y después tenemos que ir
a esta talla y bien, aquí tenemos un problema
con estos botones. Así que vamos a arreglarlo. Vaya al diseño y haga clic aquí y veamos
cuál es el problema. Primero, veamos la configuración del
contenedor, haga clic en el contenedor y el contenedor estará lleno con. Bien, no hay nada que arreglar. Y aquí, veamos la
imagen en la imagen que no
tenemos nada que
arreglar y veamos
este contenedor. Bien, aquí tenemos 90 como el relleno
izquierdo y el margen, así que lo voy a quitar. Después iré al
contenedor principal y disposición. Hagámoslo espacio entre ellos. No obstante, aquí
tenemos un problema porque esta parte experta de confianza
está en el derecho de solucionarlo. Y si añadimos
columna gaass 90 60. Agreguemos este GaAs 60, y cuando agreguemos el Gapass 60, todo va a estar
perfectamente bien y aquí,
tenemos que hacer que el contenido justifique que comience Ahora se arregló y vamos a publicarlo y dar clic en el
carajo para comprobar el diseño Aquí decimos este
problema para solucionarlo, voy a ir al
diseño y dar click en este botón y
lado derecho, tenemos espacio. Si retiramos ese lado derecho, desacelerando podremos
ganar algo de espacio como Y aquí vamos a hacer este
sitio web hay dos porque en el diseño aquí tenemos el SS 20 y aquí tenemos
entre tallas 20. Bien. Ahora bien, si publicamos
y verificamos el diseño, esto debería ser
arreglado. Podemos comprobarlo. Bien, arreglé así, y bien ahora vamos
a la siguiente sección. Aquí, tenemos algunos
alineados en temas, así que no hay mucho que
podamos hacer al respecto, pero revisaré la página y lo único que podemos hacer es quitar la altura igual y aún así se ajustará
según el texto, pero vamos aquí, pero no va a ser un gran tema Entonces voy a dar click en carrusel y aquí voy a quitar
la altura igual, y ya ves cuando hacemos eso, no
se veía del todo bien, pero lo publicaré Y ahora si reviso el diseño, se ajustará solo de acuerdo
al texto lo que significa que el icono se
alineará con el texto, solo el cuadro de servicios no
estará alineado correctamente, pero esto es mucho
mejor que antes. Ahora vamos a la siguiente
sección y aquí se ve bien, y ahora vamos a
la siguiente sección y aquí todo se ve
bien y en el pie de página, se ve bien, vamos al
siguiente tamaño en el escritorio. Actualmente estamos en 13 66 vamos a ir a esta talla
en esta talla se ve bien, y aquí tenemos ese mismo
tema que ya teníamos, pero es mucho
mejor que antes. Ahora vamos al
siguiente tamaño aquí, veamos hasta Earl bueno Ahora esta parte se
verá bien y ahora aquí tenemos un gran espacio
en la ventana más grande, se verá así, pero creo que está bien
porque está en la ventana más grande, no en la ventana pequeña. Entonces, mantengámoslo así. Bien. Pasemos a
la versión tablet. En el diseño, vamos a hacer clic en Tablet Prod crear desde aquí. Aquí tenemos un montón
de cosas que arreglar. Empecemos uno por uno. Primero, tenemos que
arreglar el encabezado. Da click en el encabezado
para editar y aquí creo que tenemos el problema
con la configuración del sitio. Si voy a sentarme configurando
y en el layout, añadimos el
padding por defecto, en realidad, puedo hacer este concepto al cambia y en content padding, realidad agregamos el padding, pero no podemos
cambiarlo desde aquí, así que volvamos y recon
header para editar el header y aquí slat el contenedor
e ir a avanzar en avance, quitemos el padding así Cuando eliminemos el pading, se verá así Entonces agreguemos
patena derecha como 30, ma 20 y los paddins izquierdos Bien, selecciono este segundo
contenedor y vamos a hacer dirección como vertical y justificar contenido será
inicio y desde aquí, nuestro logo está bien. Si voy a adelantar, tenemos pase superior de margen 20. No, son 20, bien. Cuando cambiemos las opciones
o los valores de aquí, solo
se aplica para tablet Potrit no te preocupes, no va a pasar
nada Entonces aquí por aquí, tenemos el pase superior de margen 24. Hagámoslo cero.
En realidad, tenemos dos. Entonces aquí tenemos margen superior pase 24 y el inferior como siete, así que voy a dar click aquí y
vamos a agregar menos margen de nuevo. Bien, voy a mantener ese set adentro. Aquí tenemos sumando para pasar 30, vamos a cambiarlo
a 220 y a la derecha, solo da clic aquí una cadena
y la derecha será cero, abajo también será
cero, izquierda será cero. Ahora está centrado y ahora
tenemos que pensar en
menú en menú,
voy a cambiar este punto de
horneado a móvil y cuando cambiemos punto de
ruptura a móvil, podemos ver el menú completo, y luego tenemos esta caja de imagen. La caja de imagen tiene una costumbre con, haré llena así. Bien, hasta ahora tan bien. Ahora hagamos esta
entrada de tamaño gemelo. Por lo que el tamaño de Ibuttwin debe ser ir a contenedor y diseño Hagamos Pros 20, 22 semana, 15. Sí, 15 estará bien. Entonces, cuando revisemos
este ícono de Claus 24, será más grande. Y debido a este icono, este menú será más grande. Entonces cuando el menú sea más grande, esta imagen de fondo no
se mostrará correctamente, así que voy a ocultar este icono de Claus
247 en la tableta. Para ello, selecciono el cuadro de imagen y voy
a avanzar en Avance. Da click en RSF Sis, después voy a hacer click
en Hight en tablet Bien. Y ahora hago clic en publicar y veamos
la previsualización real, pero tenemos que ajustar más. Pero por ahora, veamos la vista previa
de la tableta. Cheque. La vista previa de la tableta
se verá así, pero aquí tenemos más para editar. Entonces como primer paso, hago clic aquí y agreguemos
pad bottom como 20 así, luego hago clic en publicar
y dar clic aquí, Margin top será 20. ¿Eso va a estar bien?
Sí, eso está bien. Ahora hago clic en publicar
vamos a comprobarlo de nuevo. Ahora es mucho mejor
y me gusta este diseño. Si esto no nos gusta en absoluto, podemos simplemente ocultar toda
esta sección en la tableta y crear
una nueva sección. Pero por ahora, esto es
mucho mejor y ahora pasemos a
la sección de héroes y al resto del diseño.
129. Arreglar un problema responsivo: parte 02: Bien, ahora tenemos que crear este diseño de página principal que sea
adecuado para la tableta. Doy clic en Editar página y
esto me redirigirá a la página principal y aquí
tenemos la sección de héroe, así escribo contenedor y hago
clic en Editar contenedor. Y aquí, lo que tenemos que hacer es primero voy a
Avanzar en Avance, voy a cambiar el pad de escritura en 60 relleno izquierdo
será 60 a 60 es más grande. Hagámoslo 30
30 así y el fondo será
30 y en la parte superior, tenemos que hacerlo
más grande que 150. ¿Qué pasa con 160? 160 es demasiado corto y esto
debería ser así. Es 230. Bien, se ve bien y
el tamaño de la fuente está bien, creo que ¿cuál es el tamaño de fuente? Su tamaño de fuente es de 60, tal vez podamos reducirlo, pero por ahora, creo
que se ve bien. Da click en publicar y si queremos reducir
esos tamaños de fuente, solo
podemos hacer click en configuración
lateral y aquí
tenemos fuentes globales y click en este icono de edición y aquí tenemos la
tablet versión Ptrit, así puedo hacer esto como 50 50 estará bien. Hagámoslo 52 y
subdin hagámoslo 20, 21, Bien, el párrafo será
18 y el botón será 21 Bien, ahora haga clic en Const cambia, cambiamos la
fuente global por lo que se aplicará al resto del diseño
o diseño así Ahora otra vez, estamos aquí, guapos bien y
en botón, si queremos, podemos reducir el
tamaño del botón un poco más pequeño como 20, 30, 20, 30, así. Ahora tenemos la siguiente sección y el encabezado es o aquí
lo que tenemos que hacer. Primero, es un gran desastre, primero pincha en contenedor y avanzar desde el relleno y
agregamos el relleno como 30. Creo que lo agregamos como 30. Veamos, el
relleno derecho e izquierdo debe ser de 30. Hagámoslo 30
es 30, la izquierda es 30. Ahora tenemos que cambiar
esta posición, así que da click aquí y al avanzar
aquí, tenemos offset. Pongámoslo aquí
y va a funcionar así y tenemos que
arreglar esta caja de imagen, la caja de imagen y de antemano, hacer el offset así. Y aquí tenemos un problema. En la versión tablet, no
tenemos espacio para
ambas de esas dos secciones, así que puedo dar click en el
contenedor y en el diseño, cambiar la dirección
a fila y esto va a subir y esto
bajará así. Después en fila, voy a añadir
el Gap pase 20 así. Entonces aquí da click en aquí, todo se ve bien, y ahora tengo que
cambiar esto otra vez. Vamos a cambiarlo a offset
será así. Entonces aquí se ve bien y los botones se ve bien
aquí lo que tenemos que hacer, click en esto y avanzar, quitar el relleno, hacer el acolchado derecho como
30, paddinus izquierdo Bien. Aquí esos
íconos se ven bien. Si queremos más
espacio en Carsel
podemos hacer esto a un lado
en exhibición como uno solo El diseño se verá así
y esto es mucho
mejor que antes, y otros espaciados están
bien, pero si queremos, podemos cambiar esta
fila 60 a 30 o 2020 y no necesitamos
preocuparnos por la columna. Bien, hasta ahora tan bien. A continuación contamos con nuestros proveedores
dedicados. Aquí, tenemos un enorme espacio
para eliminar el espacio, solo
puedo quitar
el margen a cero. Ahora se ve bien
y da clic aquí, luego quita el relleno
aquí va a ser 30, 30.Esta bastante bien,
podemos agregar dos proveedores a la
vez y se ve bien, así que lo voy a mantener así Hasta el momento tan bueno entonces lo que
tenemos que hacer aquí. Aquí tenemos, nuevamente, un gran desastre, da clic aquí, luego en Advance quitamos los acolchados y hacemos patrón
derecho como 30, relleno
izquierdo como 30, como hicimos antes, podemos ir a maquetación y
cambiar dirección a columna y todo va a estar
bien y si queremos, podemos hacer esta imagen arriba
y el texto en la parte inferior Hagámoslo. Para hacerlo, podemos ir fácilmente a avanzar. Tenemos que anotar
por adelantado hay que hacer clic en el contenedor así que haga clic en el
contenedor y al anticipo, podemos cambiar el pedido. Hagámoslo N y
saldrá así. Pero
ahí no es trabajo, así que pongámoslo. Ahora tenemos un problema aquí, este va a funcionar bien, pero el de abajo no
está funcionando. Doy click en este contenedor
y en margin top, en margin top 70 y aqui, hago click en este y en avance cambio
offset para
así, hasta ahora tan bueno. Todo bien. Ahora no
tenemos nada que arreglar aquí. Entonces volvamos y
aquí tenemos un gran lío, clic aquí y
en cambio de avance los dos márgenes superiores deberían ser uno a 20 y el relleno a la
izquierda debe ser 30. La derecha es 30 y
la izquierda es 30. Entonces aquí tenemos este carrusel de
bucle y aquí podemos simplemente cambiar este
lado en este juega uno Ahora se ve bien. Sí, esto es muy
fácil y hago clic aquí y aquí tenemos
está paseando como 30 Hagámoslo así. Hasta el momento tan bueno aquí, tenemos que cambiar 62 20. Si queremos, podemos
hacer este centro, pero no necesitamos
hacerlo ahora o simplemente
podemos alinearnos como stretch. Podemos hacer alinear
uno mismo como estiramiento. Y ahora tenemos que
editar el Pie de Página. Creo que la página de inicio se ve bien. Entonces vamos a Footer y otra vez, es un lío débil Antes de ir a él, hago clic en publicar para
publicar los cambios. Y si vamos a la versión de
escritorio, cualquier cosa no va a
cambiar porque
cambiamos todo en la versión móvil
o la tablet. Bien. Ahora baje abajo abajo
y aquí, haga clic en Pie de página, luego haga clic en Guardar y deje
aquí lo que tenemos primero, hago clic aquí en Avanzar relleno
derecho es 30, y el relleno izquierdo es así 30. Ahora lo que tenemos que hacer es que la brecha de
columna debería ser menor. Hagámoslo así 30. Bien. Y para un mejor uso, podemos hacer este centro para
que no se
acerque demasiado al texto del lado izquierdo
y aquí tenemos un gran problema, ir al estilo y cambiar
el tamaño así. El espaciado debe ser seis, vamos a un seis y hagamos relleno
así. Se ve bien. Aquí todo se
verá bien. No tenemos mucho que
editar ahí, así que hago clic en par live. Y aquí tenemos un
tema en la parte superior, tengo que añadir un relleno. Es parte de 20 publicaciones de recon. Ahora vamos a
comprobarlo en el diseño. Ahora se verá así. Aquí tenemos problema
y el resto
del diseño va a funcionar bien, pero tenemos un problema con esto. Cajas, en realidad, las
podemos quitar. Si los
eliminamos, no tendremos este tipo de problema en la
tableta y el móvil. La mejor manera es ocultarlos
en el móvil y la tablet y
solo los mantengamos en
la versión de escritorio. Pero si quieres, puedes simplemente ajustarlos
según el sitio web A, pero es una gran molestia. Para que puedas platicar con tu
cliente y eliminarlo. En este caso, voy
a quitarlos a todos. Entonces mo significa esconderse. Doy clic en Editar la página
para editar la página de inicio. Y aquí, mira, veamos, aquí, da clic en todo este contenedor
y en Advance podemos ir a Responsive y esconder Mobile
portt y escondernos en tablet Ahora ya no se verá en
el móvil y la tableta y podemos hacer lo mismo con
esto en responsive ID, solo mostrar en el escritorio. Nuevamente, aquí, da clic en aquí
en Advance hide, aquí, respuesta puede
publicar y se ve bien, entonces si lo
probamos
en la página web, ya no
tendremos ese problema Ahora solo tenemos los artículos
que solo queremos ver. Podemos arreglar esto si
agregamos el bucle carausel pero
creo diferente
plantilla y agrego esos detalles usando el templo cust
avanzado, pero no sé que
va a funcionar o no, vamos a mantenerlo así
130. Arreglar el problema responsivo: parte 03: Bien, ahora tenemos que tomar la capacidad de respuesta móvil o hacer que nuestro sitio web sea amigable
para dispositivos móviles Entonces, según Google o Jamini alrededor del 55 al 65% de los visitantes visitan sitios web
usando el teléfono móvil Por lo tanto, hacer que nuestro sitio web receptivo
para dispositivos móviles es
realmente importante. Entonces comencemos. Primero, como hicimos antes, podemos hacer esto desde el encabezado. Ir al encabezado y en encabezado, actualmente se ve así. Primero y pasado, voy a dar click en el contenedor y en contenedor, hagamos relleno como 15 por 15, izquierda y derecha serán 15 por
15 y aquí tenemos un problema. Necesitamos que este menú de
Hamburguesas esté en el lado derecho. Vamos a arreglarlo. Hago clic en el contenedor
y en el diseño, vamos a hacerlo dirección Bien, agreguemos ancho a esto. Doy clic en este elemento del
menú Hamburguesa y aquí, configuro el toggle alinear a la izquierda
y luego el diseño será, ¿qué pasa con la vertical ahí No, esto debería ser horizontal. Y un estilo, veamos el botón de alternar en el
botón de alternar, vamos a establecer un tamaño. Vamos a establecer este tamaño
como 35 ancho de borde, no
necesitamos un borde. Y cambiemos de color
a este color primario. El color de fondo será acento o hagamos
el color de fondo
como color primario y el color será de color
blanco como este. Entonces tenemos que poner esto aquí. Intentemos hacerlo por adelantado, cambiemos con dos
en línea sin defecto, sin ancho completo, no. Hagámoslo como personalizado
y agreguemos el personalizado. Cuando añadimos la costumbre con
, quedará perfectamente alineada. Agreguemos personalizado con un 50. Veamos qué va a pasar. Cuando hacemos esto,
simplemente se ve así. Para arreglarlo, iré aquí. Hagámoslo de ancho completo. Cuando lo ponemos de ancho completo, simplemente
se vuelve
así y se ve bien. Bien, aquí, aquí,
esto está demasiado cerca, para arreglarlo para el contenedor, vamos a relleno derecho e izquierdo. El top será de 20, está bien estar 20 en la parte superior, y la derecha será de seis y
la izquierda también de seis. Entonces en la maquetación, el hueco de columna
será de 15 y el hueco de columna también será de seis y ahora da clic aquí en Avance, vamos a cambiarlo con esto. Aquí todavía tenemos el tema. El icono es demasiado grande
por lo que onTittal botón, el tamaño debe ser pequeño El tamaño va a ser
algo así, y ahora queremos hacer esta
lign centros para hacer eso, podemos quitar este fondo 20
y ahora es bastante bueno Ahora lo que podemos hacer
es cambiar el ancho de esta imagen o
el ancho de este logotipo. Hagamos logo con
80, será trabajo, y ahora podemos quitar
el tamaño intermedio y otras cosas para luego
ganar más espacio. Aquí debería haber seis. Y en fila, la columna debe ser cero o seis t debe ser cero. Y ahora este botón tiene
más ancho para ser aliento, así que vamos a aumentarlo. Bien. Ahora en este estilo, se debe
aumentar el tamaño del botón de alternar. Así. Ahora es bastante bueno, y ahora tenemos que encargarnos
de este menú desplegable. Bien, para hacer eso, tenemos que ir al
desplegable y al desplegable. Hagamos
relleno vertical en cuanto a, y la distancia será cero. La tipografía será botón. El color de fondo
será este color, color del
texto será texto y el color del
texto está en activo, color de
prueba es este. En Ha no necesitamos color
de fondo. Mantengamos el
color de fondo como blanco y en activo, será el mismo. Ahora se ve bien. Bien, ahora nuestro menú
se verá así, y nosotros bien, lo publicaré y vamos a verlo en
el diseño responsive. Aquí está el móvil y vamos a
comprobar el punto de interrupción móvil. En realidad, tenemos
que rotarlo
así y vamos a subir
y hacer clic en cheque. O aquí tenemos que esconder este. Entonces para ocultarlo, voy a dar click
en él y en responsive, debería ser ocultar en puerto
móvil y dar click en publicar y ahora l check y
todo va a ser trabajo. En realidad, tenemos que agregar
relleno al fondo. Vamos a agregarlo aquí el contenedor, patrón
inferior debería
ser 20 así, luego publicamos y vamos a
comprobarlo en el móvil. Se ve así. Vamos a agregar esta lista
de menú desde aquí para hacer eso, podemos hacer clic fácilmente aquí
y un menú desplegable de estilo, la distancia será esta y haga clic en publicar
y ver el diseño. Es bastante bueno y tal vez hagamos un
golpe de punto y vamos a comprobarlo. Ahora se ve bien. Ahora lo que tenemos que hacer es verificar
esto en el otro móvil. Voy a quedar así en
el Apple iPhone ocho. Aquí, ¿qué pasa con el Samsung Galaxy? Se verá así. Y aquí tenemos Apple iPhone X, y es bastante bueno. Entonces ahora tenemos que
cambiar el encabezado porque el texto del encabezado
no se ve nada bien. Así que hagamos clic aquí
para editar la página principal. Bien, en la página de inicio, primero, voy a dar click aquí y después en
Ti o Graffy este titular Tipografía, hagamos clic aquí
y vayamos a los teléfonos globales. En los teléfonos globales,
veamos el encabezado, el tamaño del botón de cabeza o
el tamaño del texto serán 44, tal vez 40 funcionen y el subdin será 18.
¿Qué pasa con 20. 20 estará bien. El párrafo será 18 y
los botones serán 18. Ahora haga clic en guardar
cambios y hagamos clic en volver a Editor y aquí vamos
al titular. Entonces en titular,
tenemos muchos temas, así que tenemos que seleccionar
la tipografía No sé la razón por la
que no se vea bien, pero veamos veamos. Bien, entonces tenemos que ir a contenedor y actualmente
tenemos derecha e izquierda como 30, así que vamos a hacerlo como 15,
15, la parte inferior también debería ser 15 como y esta fuente no
se ve bien, 40, vamos a reducir la fuente
con 35 será 37 38. 36 será la mejor talla. Hagámoslo 36 y también
se
debe reducir el tamaño del texto del botón. Hagamos esos cambios. Primero, publicaré la configuración
actual y aquí, haga clic en configuración lateral, luego iré a Gambas Goble
y encabezado en encabezado Esto debería ser 36
y el sub ding vamos a reducir esto para 18
y el párrafo es 18. No, no, f den debería ser
20 si el párrafo es 18, el botón es 18. El tamaño del botón está bien. El tamaño del botón está
bien, haga clic en ahora. Guarda enojas y haz clic en volver a Editor y
ve a contenedor. Bien. Ahora tenemos que encargarnos de este botón porque el botón no
se ve bien, así que vamos a avanzar. Pasemos al estilo y al estilo. Deberíamos tener que
reducir el acolchado, por lo que el acolchado superior
será de 12, será de 50. ¿Qué pasa con las 15:15, 50. Uh, ninguna parte superior será 20, derecha, 15, abajo, 20. Bien, será mejor. Entonces, si alineamos
esos centros de texto, se verá mucho más claro, pero cuando lo hacemos centro de
alineación, es
difícil de leer. Entonces pongámoslos así. Sí, bueno aquí. Entonces lo publicaré. Y ahora vamos al diseño
responsive y veamos el diseño en el teléfono
y es Apple iPhone X. Bien, no está mal. Rotarlo. Bien,
se ve bien. Ahora tenemos que continuar. Entonces aquí, esta imagen está bien. Y aquí tenemos
esto vamos a ir aquí. Y bien, escondemos esta parte de cuidado
al 100% en el móvil, así que no tenemos
que preocuparnos por ello. Entonces vayamos al contenedor, y hagamos a la derecha como
15 y la izquierda en como 15. Bien, aquí tenemos un
problema con el botón, así que hagamos esos
dos botones
así y el hueco de fila será de 15. Bien. Y aquí está este
botón está en la parte superior. El motivo es que estamos en margen
superior como 20, así que voy a hacer que sea cero. Ahora se ve bien. Bien, eso se ve bien. Entonces vamos aquí y aquí de
avance derecha , 15, izquierda 15. Fácil. Entonces aquí, esas
partes están buscando. Bien. Las partes se ven bien y espero que esto
funcione, está funcionando. Podemos reducir esta brecha. Así que vamos a Estilo
en paginación. Hagamos esta brecha como 15. Sí, 15 funcionarán. Entonces aquí tenemos nuestra sección de
proveedores, y aquí tenemos que
agregar algún margen superior. Entonces 12120 va a estar bien, tal vez podamos llegar a ser 90, pero ya agregamos
120 a esas cosas. Así que mantengámoslo como uno a 20. Bien, no tenemos
nada que editar. En realidad, tenemos este
enlace no se ve bien. Entonces sí vamos a editarlo
antes de editarlo. ¿Cambiamos la grasa
derecha e izquierda? No, hagamos esto de 15 por 15. Ahora, publiquemos esos cambios y vayamos a editar
plantilla y aquí, seleccionemos el botón. No se está cargando ahora mismo, pero está bien en
este botón, lo siento, hagamos el margen como cero en realidad aquí
tenemos fondo como diez. Vamos a mantenerlo como diez y
tenemos que cambiar el
top top a cero, abajo será menos diez. Creo que lo hará Bien, ahora, da clic en Publicar. En realidad, podemos
hacer clic en Guardar y volver atrás. Y veamos el diseño. Bien, me tomaré algún tiempo. Bien, cargué. Y aquí, está demasiado abajo. Quizá tengamos que añadir
algo como 50. Así que vamos a hacer clic en
Editar contenedor y aquí en realidad,
todavía se está cargando. Entonces esperemos a cargarlo. Bien, volvamos a hacer
clic en la plantilla de edición y aquí vamos a hacerlo al
móvil y aquí, seleccione el botón
y al avanzar, hagamos que este pase superior
menos -15 será trabajo. Ahora publícalo y bueno. Ahora vamos a la página. Nuevamente, vayamos a
vista móvil y aquí bien. Bien, pasemos a la siguiente sección y
esta imagen se ve bien. Y aquí lo que tenemos que hacer. Bien, vamos a hacer clic en este
contenedor y en realidad. Hagamos esos íconos en
el medio para hacer eso, haga clic en el contenedor. Alinear elementos ya está en el medio, así que hagamos clic en esta
imagen y hagamos que se centre. Todavía no fui al centro. No obstante, hagamos
este centro así, podemos hacerlo fácilmente centro,
pero tenemos que hacer que este
botón también se alinee al centro, pero no a un botón. Es una imagen vamos cambiar esto a columna
y va a ser centro, entonces tendremos que agregar algo de espaciado aquí
tal vez una fila como diez. Bien. Ahora se ve bien
y hagamos lo mismo aquí. Da click en el contenedor y hazlo centrar
así, da click aquí, hazlo centrar y da click
en el icono o el enlace, entonces el enlace debe
ser -15 o 15. Y haz que se alinee
al centro así. También podemos hacer que este
artículo se centre, sí, sí. Aquí de nuevo, tenemos que
hacer esta columna uno a dirección
será diez aquí, hacerla centro que tome d centro y este
botón debería ser -15. Entonces hazlo alinear centro
aquí tenemos que bueno bueno. Ahora acabamos de crear esa sección en realidad ¿
eliminamos la izquierda y la derecha? No, aquí tenemos que hacer esta adición como 15 de la
izquierda y derecha. Todo bien. Ahora
tenemos que arreglar esto. Primero, voy a dar click en el
contenedor y al anticipo, hagamos a la derecha como 15
y a la izquierda como 15. Entonces aquí tenemos el carrusel. Entonces aquí tenemos
este carrusel de bucle. Este carrusel de bucle,
lo que tenemos que
hacer es hacer que el lado
en exhibición sea uno Y en offset con
vamos a convertirlo en un cero. Cuando lo hacemos como cero, simplemente
se ve bien. Si queremos,
solo podemos agregar como diez. Vamos a sumar diez porque
cuando sumamos diez, ambos lados se vuelven iguales. Bien, ahí no tenemos nada
que editar. Bien, ahora voy a
hacer clic en C publicar, y ahora lo que tenemos que
hacer es editar el pie de página. Se ve muy mal, pero fácilmente podemos
mejorar esto. Así que haz clic en CFoter y aquí el superior está bien y
tenemos problema con Hagamos esto a derecha
e izquierda como 15. Aquí, arriba será 20, la izquierda será 15 y
también la derecha será 15. Y aquí el contenedor, será 2020, 20 estará bien. Y aquí en el menú, haga clic en alinear elementos y esto se
alineará así. Ahora vamos a hacer que empiece. No es bueno. Aquí, se ve bien. Estiramiento. Cuando lo
hagamos estirar, se verá bien. Entonces aquí, tenemos que en realidad, tenemos que hacer nada aquí, solo alinearnos correctamente y
en la sección de copyright, tenemos mucho que hacer y
aquí el derecho va a ser 15. En realidad, tampoco hay nada que hacer en la
sección de derechos de autor. Y en este estilo,
todo parece estar bien. Todo bien. Ahora haz clic en
Publicar y veamos el diseño en el iPhone X. Apple
iPhone X, haz clic en verificar. Bien, aquí está nuestra sección de héroes, y aquí está nuestro menú Hamburguesa, la sección de héroes, la sección A. Podemos hacer este botón a la izquierda. Entonces, si lo hacemos a la izquierda, va a ser mucho mejor. Así que haz clic aquí para
editarlo actualmente en el pie de página principal ahora
estamos en la página de inicio. Y aquí, hagamos una línea de pedido a la izquierda y
también hagamos lo mismo. No, no, tenemos que
hacer esto a la izquierda. Podemos hacer esto. Veamos,
veamos, posición izquierda. Bien. Todo bien. Ahora también está a la izquierda y en estilo, podemos quitar la izquierda como o. y aquí podemos agregar
la parte superior como 2010, abajo como también 20. Sin embargo, no es necesario agregar fondo. Bien, ahora haz clic en publicar, y otra vez, ahora vamos a
comprobarlo en el diseño real. Bien. Ahora aquí está
nuestra sección sobre, y aquí está nuestra sección de
categoría, y nuestro proveedor obtiene diez
toques, reseñas y pie de página. En pie de página, podemos agregar algo de
espacio a esta etiqueta HR. Además, si comprobamos esto, la primera parte está
en el lado izquierdo, pero de aquí, va
al medio, pero está bien. Si queremos, podemos
simplemente hacerlos a la izquierda, pero lo voy a mantener así y hagamos este
HR o el divisor, pase
superior, tal vez funcione. Haga clic aquí para editar el
pie de página y lo que sucedió. En este contenedor, vamos a avanzar sobre Avance
fondo será 220. Si algo pasara ahí. Todo bien, da clic
en publicar agradable. Ahora podemos comprobarlo también. Bien, se ve bien. Bonito. Vamos a verte
en la siguiente lección, que estará creando
la siguiente página.
131. Diseño de una página: parte 01: Hola a todos. Ahora
diseñemos esto una página en Wordpress
elemento de pro. Bien. Aquí nuestro diseño Figma, así que voy al panel de
WordPress, y ahora vamos
a ir a las páginas R página Bien, aquí, hagamos clic en Nueva página y el
nombre de la página estará arriba. Copiemos este
titular como título. Y aquí, vamos a pegarlo y dar clic en Editar con
elemento de todo derecho. Ahora lo que tenemos que hacer
es diseñar el sitio web, y si revisamos el
elemento o sitio web, tenemos una sección similar
como esta sección de héroe,
esta sección de página principal es
similar a la sección about, lo que significa que podemos usar esta sección de página principal
para crear una sección. Me refiero a la sección de
héroe de la página principal. Entonces hagámoslo. También esta sección de héroe de la página acerca de la página del blog y la página contacto siempre se repiten. Vamos a crear esto como una plantilla, lo que significa que podemos usarlo
repetidamente en nuestras páginas de Earl Ahora por ahora, solo
publicaré esto sobre la página y aquí voy a abrir el
panel de WordPress en Nueva Ventana, y desde aquí iré
a plantilla y guardaré plantilla aquí iré a
sección y en sección, haga clic en agregar nueva sección aquí, seleccionemos
tipo de plantilla pasar sección y agreguemos el nombre. Voy a añadir el nombre
como sección héroe para subpáginas y dar clic
en crear plantilla Simplemente voy a quitar esta biblioteca porque
no la necesitamos. Ahora bien, si revisamos la sección
acerca de la página héroe y la
sesión principal de héroe de la página principal es bastante similar. Sólo podemos copiar esta sección desde la
página principal. Hagámoslo. Nuevamente, abriré
el sitio web en Nueva Ventana y aquí
haga clic en Editar con elemento de y simplemente haga clic
derecho y haga clic en Copiar y vayamos a
la sección de plantilla, sección héroe para plantilla de
subpágina y haga clic derecho y haga
clic en pegar Y simplemente pega así. Ahora lo que tenemos que hacer es
eliminar cosas innecesarias. En primer lugar, si vamos aquí, no, aquí
no, si vamos
al diseño de Figma, podemos ver la altura La altura es de 600, así que vamos a seleccionar el contenedor
y aquí tiene 800. Yo solo lo hago como 600 y luego
aquí no tenemos botón, así que vamos a quitar el
botón, borrarlo. Ahora la imagen de fondo. Aquí tenemos esta imagen
de fondo. Haré clic en la
imagen de fondo y en Exportar, cambiaré a JPEG, y haré clic en el botón Exportar. Ahora vayamos a tiny png.com y
disminuyamos el tamaño de este tamaño de archivo
de esta imagen de portada Ahora hago clic en
el botón JPEG para
descargarlo aquí vamos aquí
en estilo contenedor. Cambiemos esta imagen. Da click en la imagen
y aquí tenemos la imagen y la acaba de
subir y aquí, vamos a agregar el texto ALT o texto antiguo y dar clic en
Conselecciónelo acaba agregar así y no
necesitamos
hacer nada y ahora da
clic en Publicar Ahora tenemos esta
plantilla y si vamos a la página A y hacemos clic
en este icono de carpeta, podemos ver nuestra plantilla
en mi sección de plantilla. Actualmente, no tenemos la sección héroe para plantilla de
subpáginas, así que volveré a pasar repage Cuando aquí tenemos
sección de
héroe Simplemente puedo hacer clic en Insertar
y dar clic en aplicar. Así como eso, solo agrega. Ahora sólo tenemos que
cambiar el texto. Ver, este es el poder
del elemento o plantilla. Pasemos al
diseño Pigma y copiemos el título. Ven aquí, pasea ese título
aquí y descripción, copia la descripción y pasa esa descripción
así. Bonito. No obstante, si revisamos
la descripción, aquí tiene poco
espacio como este. Hagámoslo para hacer eso, podemos agregar R aquí, tenemos que aumentar esto
y agreguemos R aquí. Entonces agreguemos R aquí, luego otra vez, tenemos que
agregar R después de esta toma. Vamos aquí,
agreguemos B así. Bien, bastante bien. Ahora hago clic en C publicar para guardar. Bien. Ahora pasemos
a la siguiente sección. Esta sección también es
similar a esta sección. Simplemente podemos copiar esta sección desde la
página principal y agregarla aquí. Hagámoslo. Aquí nuestra
página de inicio y voy a simplemente dar clic en esta sección y dar clic derecho
y dar clic en Copiar. Después en una página, haga clic aquí y haga clic en Pegar. Haga clic derecho y haga clic en Pegar. Bien. Y para aquí, no
necesitamos esta caja de imagen, así que la
seleccionaré y la eliminaré. No necesitamos este. Sólo tienes que seleccionarlo. Eliminarlo. Bien. Ahora está bastante
bien y puede que tengamos que cambiar algunas cosas
que
comprobamos aquí, no tenemos dos botones. Sólo tenemos un botón. Eliminemos este subbotón, y si comprobamos el tamaño inbten, el tamaño intermedio es 60, y hagamos clic en el
contenedor principal y Columna gap 60, no
necesitamos hacer nada y simplemente copiar el
texto primero así, luego copiar el segundo texto, simplemente copiarlo hasta aquí, luego copiemos este Haré clic en este texto y haré clic en Condo Bigate y
aquí solo agregaré ese texto y aquí
tenemos que agregar el
botón de solicitarte cita vamos a agregarlo aquí Y después de
diseñar completamente este sitio web, crearemos acciones
para esos botones. Por ahora, agreguemos la
etiqueta hash a esos enlaces, y ahora tenemos que
cambiar esta imagen. En estilo de imagen,
no tenemos nada. Así que simplemente voy a hacer
clic en esta imagen y clic en Exportar y
el tipo de archivo es PEG, luego ir a Ti PNG, agregar la imagen y radio el tamaño del archivo
así, luego ven aquí. Con elige imagen en
la imagen así, luego copia el texto antiguo
así y haz clic en Ocultar y solo agregó así y no tenemos
nada que hacer Ahora tenemos que ir a
la siguiente sección y crear la siguiente sección también
es bastante fácil. Esta es la forma en que cuando
creamos la página principal, podemos simplemente copiar el
contenido de ahí. Así que puedo
hacer clic derecho sobre esta
sección acerca de y
dar clic en Condupl ahora lo que
puedo hacer es hacer clic en el
contenedor y hago clic en este contenedor dentro
del contenedor principal y ponerlo así Ahora, cambiemos el texto. Aquí, cambiemos este
texto primero así, luego copiemos este texto
y aquí más allá del texto. Nuevamente, tenemos que agregar
sumin aquí así que copia el título tum y simplemente
duplique esto y pegarlo Ahora una ficha cambiemos
este texto a demandado, así. Entonces tenemos que agregar
la lista de unders. Vamos a hacer clic en Agregar
elemento y lista de búsqueda. La lista de iconos funcionará,
agréguala así. Y aquí voy a quitar los elementos y sólo
conservar el único elemento y luego dar clic en este texto para editarlo y
copiarlo, después pegarlo. Ahora da click sobre este icono
y tenemos este círculo. Da clic en insertar para insertarlo
e ir a estilo en estilo, el color del icono es
color primario y veamos el tamaño del icono. El tamaño del icono es de 16 por 16. Que no sea 60, 16. El gap ver la brecha, aumentarla, presionar
y gap es ocho, hacer la brecha ocho y en el texto, cambiemos de color a
este color de tipografía Veamos que este texto es
tipografía para que podamos mantener los estilos de texto tipografía
o Bien. Ahora lo que tengo que
hacer es simplemente duplicar estos elementos por tiempos
y agregar el contenido. Simplemente copie el contenido, base el contenido aquí
y copie el contenido T aquí, luego copia este contenido y copia
éste, pásalo. Ahora, cambiemos el
tamaño intermedio aquí el espacio entre. Veamos el espacio
entre y son 20. Hagamos espacio entre 20. Bien. Bonito. Ahora tenemos que agregar este copy paste que sabe así y no necesitamos el
botón, borra el botón. Bien ahora, vamos a ver. Ahora tenemos que agregar esta
imagen así nosotros la imagen, exportarla como JB EG, clic en exportar nuestra misión de botón Exportar para exportarla Después en minúsculo PNG, agrega el PNG así. Después haga clic en JPEG para descargar esta imagen
y ahora vamos a acerca y haga clic en esta imagen y haga clic
en elegir imagen aquí, solo
agreguemos la imagen. COVID, pasado así. Ahora haga clic en seleccionar agradable. Ahora lo que tenemos que hacer. Ahora tenemos esta categoría es con la descripción del préstamo.
Entonces hagámoslo. Es bastante fácil porque ya tenemos esa sección
en la página principal, pero hay algunos cambios, pero solo necesitamos este diseño. Entonces simplemente voy a copiar
toda la sección de aquí y vamos a ir a la página y vamos a
pegar el contenido, y aquí no necesitamos este. Eliminarlo porque no
hay ningún botón aquí, Bien. Ahora aquí, vamos a copiar el título. Creo que el título
es igual así. Bien. Bien. Ahora no
necesitamos esta característica de carrusel En realidad, podemos arreglar esto
muy fácilmente con rejilla, no con columnas. Así que vamos a intentarlo. Doy clic en agregar elemento
y agregaré una cuadrícula como esta
en la configuración de cuadrícula, también
estableceré la
masa de columna y la fila
será de dos y los huecos
serán 20 así. Entonces lo que puedo hacer
es agregar esas estrellas. Primero, tenemos el real vamos a
poner esta grilla en la parte superior, así que voy a dar click aquí y
vamos a agregarla así. Entonces a partir de aquí, voy a
ver que el
cuadro de imagen y agregarlo
así en la cuadrícula, voy a quitar el
margen y los tapetes y ahora vamos a agregar
este a aquí Entonces otra vez, tenemos éste, luego éste y ahora tenemos que aumentar
el recuento de filas de la cuadrícula. Haga clic en concreto, vaya al
diseño y cambie la fila a tres filas y
agréguelas así. Ahora creo que agregamos Dt
voy a madre carrusel, clic aquí, da clic en Condolete y además no necesitamos este, así que simplemente lo eliminaré Bien. Ahora bien esto está perfectamente alineado y no
necesitamos hacer nada. Simplemente aparece así y ahora tenemos que
editar los contenidos. Haga clic en el cuadro de imagen y en un estilo cambie la alineación
vertical. Arriba. Y ahora agreguemos
esos detalles extra. Primero, tenemos el
texto sobre descripción, agreguémoslo
así y agreguemos el BR, creo que debería funcionar y
agregar otro BR, Bien, bonito. Y ahora este texto debería aumentar un
poco para hacer eso. Sólo podemos agregar la etiqueta B así. Creo que no está funcionando. B. No está funcionando, no vamos a poder usar el cuadro de imagen porque
tenemos esta línea extra, así que tenemos que crear esto desde
scribe o podemos usar CSS,
pero agregar CSS es la manera más fácil Agreguemos el CSS y
veamos qué podemos hacer. Entonces primero voy a copiar este
texto y reemplazar este texto, y como lo hice antes, voy a añadir dos líneas de
rotura BRO como esta y aquí voy a añadir
nueva etiqueta llamada span. Esta es una etiqueta TML y flash
span para cerrar la etiqueta span, y aquí voy a añadir la clase clase igual
cgory caja sub subtítulo Bien. Bonito. Ahora bien, esto es un SMLC Clase TML que acabo de crear, así que la copiaré
y haré clic en publicar y aquí iré
al diseño web personalizado US o iré al
dashboard de nuestra página web y aquí tenemos apariencia
y da clic en Personalizar En personalizar, podemos
agregar adicionales ESS. Para agregar ESS adicional, puedo
volver a copiar el CSS y venir aquí, ad dot porque es una clase
y un corchetes como este, luego agregaré tamaño de fuente
como veamos, veamos. El tamaño de la fuente es de
20, 20 x. Creo que esto
debería funcionar ahora. Y vayamos a la página acerca y reprimamos esto y
veamos que funcionó o no Bien, está funcionando. Este texto es más grande que el texto de la
ventana para confirmarlo, abriré esta nueva
ventana y revisaré esta, derecha, vaya a Inspec
y esta En Inspec, tenemos span y
aquí tenemos nuestra clase CSS. Si en realidad tengo el mismo tamaño no, es el mismo tamaño, así que
no necesitamos hacerlo. Esos dos ítems se dicen que
este debería ser 21. Por aquí, tengo que hacer 21 así y dar
click en Publicar. Ahora si lo compruebo desde aquí, deberíamos ver Prueba 21, clic aquí y aquí tenemos 21 y ver con la
diferencia, bonito. Ahora podemos hacer lo mismo para
el resto de esta caja de imagen. Da click aquí y
pega este texto y vamos a ir a aquí espaciar
el contenido real, así que para obtener el contenido real, iré a nuestro archivo de texto de
contenido y al texto de ahí.
132. Diseño de una página: parte 02: Tengo las categorías con descripción
pequeña y larga. Entonces primero uno ya creamos, y luego tenemos salud de mujer, copia el texto y
herem interesante Creo que lo echamos de menos. Entonces vamos a la página principal. Y en la página principal, sí, simplemente ignoramos a la mujer, pero podemos hacerlo porque
podemos conseguir la forma perfecta
con esos seis artículos. Así que vamos a ignorarlo. Entonces vayamos a este
tamizaje de salud y atención preventiva. Y en pequeña descripción, agregaré este en descripción del
préstamo aquí
tenemos la descripción del préstamo. Bien, entonces tenemos atención
pediátrica. Entonces a la atención periátrica, tengo que copiar esta descripción
y pegarla así, luego copiar el texto, el texto En realidad, agregamos el mismo
texto al primer ítem, así que tenemos que cambiar el
primer ítem y cambiar los detalles del primer ítem
así, ritmo así. Ahora tenemos este quinto icono. Vamos aquí, ritmo
así, copia el texto. Puede que no veas la
parte que copio en el texto porque la abro en
mi segunda ventana así. Entonces otra vez, copia
todo este texto y ve al subord
mental tenemos
tu descripción Bien. El último. Vamos a copiar el formato
de aquí y pegarlo. Ahora, este así, copia éste,
pegarlo así. Bien. Ahora lo que tenemos que hacer es
poner esta imagen arriba como alineación
vertical superior y
tenemos que hacerlo para un ítem, pero sólo podemos escribir
con y dar click en copiar y escribir escribir y escribir Pegar tipo
pegar este tipo Oh, no es copiar, así que hagamos clic aquí y copiemos. Después da click aquí y pega
este tipo. No pasó nada. Vamos al estilo. Sí, pasé,
pero no parecía. Vayamos aquí y
hagámoslo así. Bien, da clic en publicar y
vamos a comprobarlo en el diseño. Me quedaré
así y lo que significa que creamos con éxito el
diseñador sobre la sección. Ahora tenemos que diseñar
la sección de bloques.
133. Diseño de página de blog: parte 01: Hola a todos.
Ahora es el momento de diseñar esta
página de blog en Elementor Entonces vamos al tablero de
Elementor, y ahora estoy en la sección de páginas de
Earl Y si vamos a
post y Earl post, tenemos un post Entonces comencemos a diseñar. Y nuevamente, voy a las páginas de Earl, y desde aquí,
tenemos la página del blog Entonces, por ahora, eliminemos esta página de blog y
comencemos de cero, clic en la papelera y alguna razón el sitio web se está
cargando muy lento. A lo mejor es por
mi conexión a Internet. De todas formas, ahora voy a la papelera y hago clic en Eliminar de forma permanente. Ahora lo que hago es dar click
en esta nueva página de anuncio. Después agregaré título como blob de
JB Family Clinic. Después hago clic en publicar, solo publico esta página y luego volveré a mover
esta parte e iré
al dashboard y en dashboard en set ins y en
ajustes, vaya a Rojo. Lecturas aquí tenemos un lugar para configurar nuestras pantallas de
inicio. Aquí, lo configuré como una página estática y la
página principal es JB Family Clinic, que es la página principal
y para la página de correos, seleccionaré este golpe de limpieza
familiar JB Ahora aquí dentro, podemos establecer páginas
caninas mostrar como máximo, pero creo que podemos ajustar esas cosas después
de diseñar la página, pero vamos a configurarla
desde aquí de todos modos. Y aquí necesitamos mostrar seis páginas por cada o
seis post por página. Así que hazlo seis y
haz clic en Guardar cambios. Entonces estamos usando
elemento de Pro, así que tenemos características pro
para configurar esta página de blog. Entonces, para acceder a esas, vaya a las plantillas y
haga clic en Guardar plantillas. Lo que vamos a
hacer es que vamos a crear nueva plantilla
para nuestras páginas. I Wordpress Earl data, blog, comentario, y otras
cosas, guardar como archivos Entonces aquí voy a ver
ese archivo y aquí voy a añadir nombre como plantilla
Archiv Hagámoslo así.
La plantilla es incorrecta. Bien, ahora haz clic
en Crear plantilla. Para esta biblioteca, simplemente la
eliminaré o
si voy a mis plantillas, aquí podemos encontrar nuestra
sección de héroes para subpáginas. Vamos a insertarlo y dar
clic en App Bien, aquí tenemos la sección de
héroe que ya
creamos,
y para aquí, hago clic en este
titular y en el título, solo
seleccionaré el título del archiv así
y la pequeña descripción, seleccionaré la descripción del
giv, y es posible que tengamos que agregar
esa información por ahora Publiquemos
éste y hagamos clic en Atcdition e
incluyamos Si dijimos que esto Earl da, podemos ver o podemos toda la información
relacionada con los autores,
fecha, resultados de búsqueda,
post archivo y
categorías y otras cosas
se cargarán en esta plantilla Así que ahora hago clic en Guardar y
Cerrar y se publicó, y ahora ya
configuramos la página de entrada del blog. Así que vayamos a las páginas y
veamos la página de entrada del blog, y veremos la vista previa
actual cuando veamos la página del post. Por lo que actualmente,
no muestra nada. Así que arreglemos eso.
134. Diseño de página de blog: parte 02: Solo intento diferentes
cosas para arreglar el problema, pero aun así no tuve suerte con eso. Entonces probemos un método diferente. Por ahora, vamos a crear el archipage y cuando
tengamos el archipage
se supondrá que cargue autor o
categoría u otras cosas
si alguien lo solicita Aquí le agregamos el título del Archiv, y ahora tenemos que agregar
esta parte de poste de arco Doy click aquí, clic en Cplexbx y doy clic en columna de dirección, y aquí presionaré
el elemento add y solo arrastraré esa sección de
chi post, y aquí tenemos que agregar guión
izquierdo y derecho 41 40
y la izquierda también será 140, y la parte superior debería ser Averiguemos el
espacio superior desde aquí. Son 12. Sí, no son 60, son 1220. Bien, ahora vamos a
ajustar este diseño. Y actualmente, voy a mantener
el mismo ajuste por ahora, luego voy al estilo E
y a partir de aquí, veamos el
hueco de columna es de 220 a 20 y el hueco crudo
también será de 220 y alineación, hagamos alineación a la izquierda en la
imagen, el radio del borde, veamos el radio del borde, el radio del borde es mixto, pero tenemos que
comprobarlo, son 20. Agreguemos radio de cuerpo
como 20 en realidad solo
necesitamos el top 20, no izquierdo, superior y derecho como el 20
y el espaciado está bien, luego vamos al
contenido y en el contenido, veamos que el color del texto
es colores predeterminados Hagámoslo como color del texto, y la tipografía va a estar ¿No es así? Comprobemos
el diseño de Figma. Sí, debería ser sub pedinSi alguna razón este archivo
Figma cambia. No sé qué pasó, pero debería estar subpding
entonces aquí otra vez, para la fecha, tenemos que
cambiar el color primario Tipografía será párrafo, es tamaño de párrafo y En realidad, esta fecha
debería ir por encima, pero dejémosla aquí por
ahora y el espaciado es para. Este espaciamiento va
a estar bien, no 12. Ahora como color será texto, la tipografía de color será párrafo y el espaciado
volverá a serlo Creo que no tenemos
el enlace más liberado,
pero está bien y paginación, tenemos que ajustar
esta denación de página antes
de ajustar la nación de la página,
vamos a esta denación de página antes
de ajustar la nación de la página, ajustar este
parámetro de contenido y para meta, no
necesitamos comentario, solo quitamos el
comando y la fecha, entonces tenemos que verificar
la longitud exer ¿Cuál es la longitud? Copiemos este texto y vayamos
a wordcounter.net y solo enfrentemos el cheque y hay
150 caracteres y 22 Hagamos esto como 22, nada vamos a hacerlo como 150 aquí el meta
debería estar muerto no, no necesitamos separador
y no necesitamos mostrar leer más botón
para la inación de página, hagamos límite de página como
cinco, lo que está mostrando. Los ajustes son buenos
y en realidad tenemos que hacerlo. Vamos a agregar aplicar
mezcla personalizada y vamos a ver, entonces lo que tenemos que
hacer es ir al estilo y de antemano
tenemos que agregar borde. Averiguemos aquí
tenemos la frontera. Piensa, mantengamos esto así. En la paginación, podemos cambiar el color a
este color azul, y veamos esta paginación Y aquí tenemos
int tamaño como seis, pero espaciado, vamos a
comprobar el espaciado. espaciado será de 30 y aquí no tenemos muchas opciones de
personalización, así que mantengámoslo así
y hagamos clic en publicar y esto es mejor
para las páginas de archivo, pero tenemos que crear post post page custom post para
mejorar nuestro sitio web. Hagámoslo en la siguiente lección.
135. Diseño de página de blog: parte 03: Bien, ahora tenemos que probar otro método para
diseñar esta página de bloques. Empecemos. Primero, voy a
nuestro panel de Wordpress. Entonces iré a
establecer y leer. En lecturas, desseleccionaré la página del post y
se verá así, luego hago clic en Guardar cambios Ahora voy a páginas
y páginas de Earl, y aquí tenemos la página de bloque, así que hago clic en Editar y clic en Editar con
elemento bien Ahora lo que puedo hacer es agregar el
encabezado en la plantilla M, y aquí tenemos sección héroe,
subpágina, dar clic en
Insertar, dar clic en Aplicar Bien. Ahora agreguemos
esa información. Primero copia el título, pegarlo aquí, copiar esto. Tienes que pegarlo aquí
y agreguemos BR, BR aquí. Siguiente BR estará aquí.
A ver. A ver. Bien, ahora la parte de cabecera está hecha. Ahora lo que voy
a hacer es dar clic en en nuevo contenedor y agregar el contenedor de columna de
dirección. Y aquí como margen
y relleno y añadir acolchados
izquierda y derecha
son como 140, así Entonces también tenemos que agregar margen
superior como uno, dos, ahora lo que tenemos que
agregar es fuerza, clic en agregar elemento
y buscar fuerza. Aquí tenemos elemento de fuerza. Yo solo lo voy a androp así. Bien, ahora nuestra fuerza
ha aparecido, y ahora lo que tenemos que
hacer es hacer los cambios. Si comprobamos este diseño,
se verá
así, así que cambiemos las pieles
y veamos el estreno, así que solo lo cambio a tarjeta y el aspecto de la tarjeta se
emparejará mejor con nuestro diseño. Y ¿qué es el contenido completo? No, el contenido completo no es interesante. Las tarjetas son la manera de mostrarlo. Entonces lo que tenemos que mostrar
es título y el exerp. El tamaño del extracto será de 100. Creo que son 150 así, sí, son 150 personajes. Bien. Ahora no necesitamos
mostrar los comentarios, solo
necesitamos mostrar la fecha, y no necesitamos mostrar el leer
más y tampoco necesitamos tejones
y no necesita Avada Ahora solo tema es que esta vez
debería estar en lo anterior, pero desafortunadamente no
podemos hacer eso Entonces indagación, la fuente será forzada y no necesitamos
agregar ninguna inclusión por condición, y ordenémosla por
fecha y formato DESC Después en paginación, hacer la inación de página como números
más anterior y siguiente Si lo comprobamos en el diseño, se verá así o podemos agregar la función de
desplazamiento infinito, pero esto va a ser bueno. Para lo anterior y siguiente, tenemos que usar este diseño
en lugar de este diseño. Ahora tenemos que añadir
o editar el estilo E. Pasemos al estilo E en estilo E. Veamos el
hueco de columna, era 20, era 20 y aquí
entre tamaño es 30. Hagamos inteen tamaño como 40. La brecha de columna será de dos, la brecha de fila será de 40 man lay. Y en el carrito, el color de fondo
será de color blanco y borde para el borde. En realidad, no
necesitamos una frontera. El radio fronterizo, veamos que
el radio fronterizo obtiene dos. Sí, el radio está en 20
como el radio del borde, y será así
y la almohadilla
horizontal el PadeMIac horizontal,
veamos el relleno
vertical veamos el 830. Hagámoslo
como en va a estar bien, y como efecto, no
agreguemos ningún efecto para
la sombra de caja, agreguemos shells de sombra de caja, pero por alguna razón, no
tenemos opción para cambiar la sombra de caja, así que mantengámosla como
esta devolve una y ahora vamos a
Imagen, Espacio de imagen Por ahora, podemos ser página
en un cero y en el contenido, el color del título
será el color del texto. La tipografía
será de subtítulo. El espacio que vemos, veamos este
espacio, es espacio. ¿Qué es este meta? Creo que meta es esta fecha. Cambiemos el color a este color azul y
no necesitamos un separador. La tipografía
será párrafo. Entonces, el color excepto
será esta tipografía de color, la fase de
párrafo debería ser
veamos el espacio, son dos Excepto es demasiado largo, así que vamos a contenido y
una longitud de 20, 20 aún más grande, 15, diez personalizados, no pasa nada. Por qué no es vamos a ver, veamos en el espacio de la imagen, bien, pero en la imagen, tenemos un problema
porque no está alineada la parte superior.
136. Diseño de página de blog: parte 04: Bien, encontré el problema. Entonces en esta imagen
un estilo en tarjeta, agregamos relleno vertical como 20. Si lo quitamos, la
imagen se fijó perfectamente. Y para este texto sobre contenido, agregamos longitud como 20. En este caso, tenemos que sumar 22 porque los exerps se muestran
en el recuento de palabras Entonces si agregamos 24 y
publicamos agregamos el 22 entonces
voy a previsualizar
se verá así. Y ahora, si solo
copiamos este contenido, se mostrará como 22 palabras. Bien, ahora ese problema se solucionó y tenemos que agregar
espacio a este fondo. Entonces intentemos hacer
eso y también el tamaño
intermedio de este titular
y la imagen es demasiado grande, así que intentemos arreglarlo también. Imagen, el espaciado,
hagámoslo como cero y publiquemos y veamos
en el diseño real. Ahora se ve así, y parece que hicimos todo lo posible para
crear esta sección de bloques, así que ahora puedo dar click en publicar y tenemos que hacer cambios a paginación. Pasemos al set de
paginación y
veamos qué podemos hacer Primero, estableceré el texto
como tipografía y en normal, el color será
este color y sobre cómo el color será color
primario en activo, el color será color primario y el espacio entre el espacio será hagámoslo como 20
y veamos desde aquí, entre tamaño,
el espaciado será 20 y el espaciado
será 40 así Desafortunadamente,
hicimos este diseño así y tenemos que usar CSS
personalizado para hacerlo,
pero no lo voy a
hacer en esta clase, aquí, tal vez
en el futuro, voy a crear un
video lecciones para el CSS y Wordpress y ahora hago clic en publicarlo
y vamos a verlo en el diseño real y
se verá así, y si hacemos clic en él, redireccionaremos a la única página de entrada de blog y tenemos que crear esta página. Por ahora, tratemos con página del
blog, bien. Si hacemos clic en la segunda, irá a la
segunda página y mostrará el
resto del diseño. Y también, podemos agregar
el scroll infinito, pero creo que agregar
scroll infinito será mejor. Entonces en paginación, aquí
tenemos scroll infinito, lo que significa que agreguemos
spinning spinning está bien. Entonces haré clic en C
publicar porque esto es mucho
más moderno que la paginación Ahora si me llaman, el post se
mostrará así. Voy a reprimir
esto de nuevo y ver el post cargando
y el post se cargará así y
esto es mucho mejor Yo estilo en paginación, podemos cambiarlo de color
a este color azul El color giratorio será azul, esta tipografía, no más páginas, no más mensaje post será negro y
estará en titular,
no titular, subtítulo Entonces el espaciado será de 40. Y ahora veamos el diseño. Aquí vamos a ver que esto es
mucho mejor que antes. Y ahora vamos a crear la
única página de entrada de blog.
137. Diseño de página de blog: parte 05: Hola a todos.
Ahora vamos a crear esta única página de entrada de blog. No tenemos un diseño de figma para la única página de entrada de blog Básicamente, necesitamos
mostrar la imagen de la publicación del blog, luego el título, luego la entrada del blog
real. Hagámoslo, lo que
significa que en otro caso, si alguien hace clic o llega
a la única entrada del blog, se mostrará en
el mejor diseño. Entonces para hacer eso, iré a dashboard
en dashboard, iré a guardar plantilla o
podemos ir a ellos Builder. Vamos a Team Builder. Creo que no usamos
la parte de Team Builder, pero ambos
son bastante iguales. Así que aquí están nuestras plantillas
actuales. Ahora aquí tenemos que
añadir un solo post. Actualmente no tenemos ninguno, así que ahora hago clic en
esto en Nuevo botón. Entonces aquí hemos recomendado bibliotecas de correos en
bloque. No vamos a usar estas
cosas porque
vamos a diseñar
esto desde cero. Entonces primero, necesitamos agregar
el encabezado en mis plantillas, tenemos sección de héroe
para nuestras páginas, clic en Insertar y dar
clic en Aplicar y aquí necesitamos mostrar
el título de la publicación del bloque. Da click aquí y haz clic en etiquetas
dinámicas en etiquetas dinámicas, aquí tenemos título forzado. Sólo agrégalo así. Entonces para esta, no
voy a
usar la línea Safed, así que solo intentaré
hacer click y eliminarla Para esta imagen de fondo, tenemos que usar la miniatura de
Post Voy a hacer clic derecho y dar
clic en Editar contenedor, y una ficha aquí, tenemos la imagen. Así que aquí, haz clic en etiqueta dinámica, y en post, hemos
destacado imagen. Vamos a establecer la imagen destacada
y se verá así. Establezca la resolución de la imagen como imagen
completa y los centros de
posición en la repetición noc y
la pantalla será automática Auto no es bueno por defecto. Cubierta. Hagamos las
pantallas como portada, lo que significa que se
mostrará así. Luego en la superposición de fondo, agreguemos el Olay, solo añadimos el color del texto
así y aumentemos el
poco opacito así
y ahora tenemos el título y la Si publicamos esto
y hacemos clic en agregar condición, agregamos un singular, pero si queremos mostrar el post, solo
podemos agregar post, lo que significa que solo
esta plantilla se aplicará para el post
de este sitio web. Después hago clic en Guardar y Cerrar. Y ahora vamos a ir a la página del
blog de nuestro sitio web. Entonces si entramos en
uno de este post, se verá así, pero aún así hemos hecho
esto mucho mejor. Voy a quedar
así y ahora otra vez, ir a nuestra plantilla y ahora
tenemos que añadir los contenidos. Vamos a crear un cuadro de
texto como este y en el elemento aquí
tenemos contenido forzado. Tenemos que agregar el
contenido forzado así, luego se dejará la alineación y texto será el color del texto y la tipografía será párrafo antemano, no
tenemos nada que hacer y clic en el contenedor,
y al anticipo, tenemos que agregar margin
top pass uno a 20, y derecha será 140, izquierda será 140, así. Para este, 120
es un poco más grande. Hagámoslo como 60. Bien. Aquí tenemos
un montón de artículos. Aquí tenemos muchos
artículos para agregar. Agreguemos información forzada y no necesitamos el
comando
agreguemos navegación forzada para navegar por otra fuerza así que
agreguemos tabla de contenido. Pero creo que la tabla de contenido no
va a funcionar en este caso, pero vamos a agregarlo de todos modos. Aquí, no tengo mucha idea, así que hago clic en esto en plantilla, y en bloques, podemos ver
otro diseño de plantilla. Entonces consigamos este
, y aquí dentro, podemos agregar esta parte de publicación
afiliada, y agregémosla a aquí,
vamos a relacionarnos por satélite. Vamos a hacer clic en Insertar y
aquí se insertó, y quiero ver esta sección de parte
relacionada. Entonces, antes de ir más allá, editemos esos estilos primero, tenemos aquí post info, y no necesitamos mostrar
al autor. Solo necesitamos mostrar
la fecha sin comentarios, solo fecha y aquí
en estilo sobre icono, el color del icono será color primario y el tamaño del
icono está bien. Hagámoslo como
16 y en el texto, ese color del texto también será decolorado y la tipografía
será párrafo Hagamos el
entre tallas 12. Si queremos, podemos
agregar un divisor, pero no necesitamos ningún divisor. Y aquí, agreguemos o un pase 20 para estos dos grandes 15
para toda esta sección, y aquí tenemos
tabla de contenido. Agreguemos tabla de contenido aquí y para la
tabla de contenido, vayamos al estilo. El color de fondo será el color de
acento no está funcionando. Agreguemos color ceniza así. Borde borde borde negro no
va a funcionar, así que agreguemos no ningún borde. Radio de borde, hagamos radio de
borde como en encabezado, el color del texto será este color y el tipo
gram será subtítulo Para el color del texto, no
agreguemos subrayado el color del marcador
será así Bien, ahora en la caja, hagamos que este
icono sea de color azul. Creo que son buenos y en contenido. Mantengámoslo así y ahora el contenido del post está
bien porque solo aquí tenemos que
añadir el color del texto y la tipografía y
todos ellos son perfectos. Entonces para el post anterior
y siguiente, vamos al estilo y el
color será este color, la tipografía será, hagámoslo en el
título, ¿qué es este título No necesitamos un título. Entonces aquí, eliminemos
el título de la fuerza, mostremos la flecha para flecha, hagamos que el color sea este color
azul y en la etiqueta, el tipografía será
párrafo así Bien. Creo que esto es mejor. ¿Y si cambiamos
el color a azul? Sí, cambiar de color
a azul será lo mejor. Bien. Ahora aquí tenemos
el contenido del post. Y si queremos, podemos agregar relatd post part Entonces, para hacer eso en el elemento del anuncio, vayamos a titular y peguemos el titular como anfitriones relacionados. Y un estilo, la tipografía
será subtítulo, color del texto será
texto y luego haga clic en
icono más para Aquí tenemos post
justo en el post, y solo necesitamos hacerlo
para los dos anfitriones así y copiemos este
estilo post desde la página post. Aquí tenemos la primera página, clic
derecho en copiar, luego hacer clic
derecho y pegar
este tipo así. Y aquí nuevamente
necesitamos dos de ellos, y post page serán dos
y para aquí, hay en HR. Agreguemos aquí un divisor para
dividir esas dos secciones, y creo que no necesitamos
hacer nada sobre el estilo. Cambiemos este
color divisor a color ceniza así. Bien. Ahora, hagamos clic en Publicar y veamos
la vista previa real. Ahora vamos a este
post y ¿qué pasó? Vayamos a FostPage y
veamos si a fs les gusta esto
algo mal Bien, ahora se
verá así, y esto no es apuesto. Tenemos que cambiar la sección forzada
afiliada. Entonces para hacer eso, ve
aquí, da clic en Editar, y aquí en
el contenido, el color del título debe ser negro, y debería estar en subdin y no
necesitamos mostrar
excepto este Y además no hace falta
mostrar el meta, solo necesitamos mostrar el texto con botón
leer más y ordenar Bile, hagamos orden al
azar así, luego ontile hagamos hueco de fila Hagamos
hueco de columna 20 está bien. Y la caja, la imagen
orientada al 20 está bien, o el radio será
20, pero en la parte inferior, debería ser cero y la
izquierda también debería ser cero. Y en el contenido, leer
moo se decolorará. La tipografía será botón. Está bien.
Hagámoslo frente a un 20. Ahora vamos a la maquetación, alineamos
automáticamente los botones. Ahora en este separador tenemos que cambiar
esta piel a tarjeta. Esa fue la parte faltante. Nuevamente, tenemos que editar
todos los detalles y forzar dos y no hay necesidad de
mostrar el esfuerzo y el
título debe ser visto, leer más debe ser sierra, no hace falta mostrar el
banquillo nometao y sobre contenido de estilo y leer más botón color
con este color ¿Y qué es este gran espacio? Bien, ahora da clic en publicar, y esto es lo que podemos cambiar. Y vamos a verlo en
el diseño real, se verá así, y aquí tenemos otro tema. Tenemos que mostrar claramente sólo
el texto de fuerza para hacer eso. Podemos simplemente duplicar este
divisor y agregarlo así. Entonces otra vez,
duplicarlo y ponerlo aquí. Entonces estará
separado del resto del diseño y
se verá así. Esto es mucho mejor, y vamos a verlo en
el diseño real. Entonces abramos cinco
de ellos así, y se verá así. En realidad, este texto va a
ser mucho mejor que esto porque en anterior
solo agregamos texto ficticio, pero necesitamos agregar
mejor texto para ver el mejor resultado y
si, veo un problema Vemos que se repite la
imagen de fondo. Vamos a arreglarlo editar contenedor, y la imagen de fondo no
debe repetirse. En realidad, no es ninguna repetición, pero por alguna razón,
se repitió. Bien, aquí vamos. Para esta pose relacionada, esto es un poco más grande. Entonces lo que podemos hacer es agregar relleno
derecho e izquierdo 990, así será más pequeño, tal vez uno por uno. Sip. 90 por 90 será perfecto. Y aquí tenemos un problema. La altura de la línea es tan pequeña, así que vamos a la altura de la línea, no demasiado grande 1.1 0.21 0.4 Sí, 1.4 va a ser mejor. A lo mejor 1.5 va a ser mucho mejor. Sí. Bien. Ahora aquí, editemos este post
y ahora mismo aquí tenemos la
página de entrada del blog y funciona bien. Pero cuando veamos la URL, veremos la fecha. Para solucionar esto, podemos ir al panel de
WordPress y
establecer en la lectura. No, no en la lectura
en los olinks de permanente, podemos establecer esta estructura de
enlace permanente como día y nombre para publicar
cambios de nombre y Ahora vamos a publicar, y ahora si revisamos uno
de estos posts así, la URL se mostrará
así y se
verá mucho mejor.
138. Diseño del formulario de contacto: parte 01: Hola a todos. Ahora
tenemos que diseñar este formulario de contacto
o página de contacto. Así que vayamos hacia
Panel de prensa en las páginas, haga clic en en Nueva página, y el nombre de esta página
será contacto y haga clic en Editar Tielemento para
abrir el Editor de Elementor Bien como primer paso, hago clic en este
ícono de carpeta en mi plantilla, voy a ver esta sección de héroe para plantilla de subpágina
solo insértela Todo bien. Y
copiemos el texto. Nosotros esto, luego tomamos este texto. Después agrega B como estos dos en los
puntos de ruptura así. Bien. Ahora lo que
tenemos que hacer es agregar en esta forma y esto llegar a coloración
clínica
y abrir nuestros iconos. Y hagámoslo. Para hacerlo hago clic en el icono
pas y Plex Box, después seleccionaré este
tipo de estructura, y aquí K C también aquí, solo haz el margen
y relleno como cero. Y si comprobamos este diseño, tenemos tamaño más grande aquí
y tamaño pequeño allá. Entonces vayamos al interior de
este contenedor. Ahora aquí, cambiemos
estas dos columnas así y bien ahora
como primer paso, tenemos que sumar la
margen superior y el trabm wtf
será de 140 por 140 Y aquí tenemos que
agregar este texto por copiará el texto
y haga clic aquí en
titular en el titular
ya que este texto sobre tipografía de
estilo
será titular y el color del texto
será este color de texto Bien, la alineación quedará, y luego tenemos que
crear la forma. Así que haz clic aquí formulario de búsqueda. Entonces el elemento de cuatro tiene
esta forma la cual vamos a agregar el formulario y hacer clic aquí y veamos el
tamaño intermedio. Creo que es 220. Es 220. Entonces aquí, vamos a O como 20. Bien. Ahora, agreguemos el nombre del
formulario como contacto. Forma. Y ahora tenemos que
añadir esos detalles. Primero, necesitamos agregar el nombre completo, copiar la parte del nombre completo
y aquí vamos a agregar marcadores de posición en realidad
el marcador debería ser como nombre completo requerido Así que hagamos marcador de posición como nombre
completo requerido y marquemos
la casilla requerida
y la columna serán 100 y el tipo apostará
y para la etiqueta, no
necesitamos la etiqueta Y luego tenemos que agregar Emas tenemos emages no
etiqueta, marcador de posición, la etiqueta será nueve y luego lo que tenemos que hacer es que tenemos que
agregar este número de teléfono, eliminar esto y dar click aquí, luego cambiar este
tipo a tail tail Sí, aquí tenemos la cola
y el lugar así que habrá. En realidad, deberíamos agregar etiqueta, y aquí podemos alturar
las etiquetas así. Por lo que debemos agregar etiquetas como esta. Bien, etiquetas. Copia etiquetada como correo electrónico
y aquí teléfono. Ahora el siguiente campo es el
tema, es opcional. Agregado como subjet y aquí
en este día etiquetar texto como subjet y este tipo será texto y
el requerido es no, y aquí se requiere el
número de teléfono Se requiere correo electrónico. Bien. Ahora podemos cambiar
el tamaño de entrada aquí, pero podemos cambiarlo
desde la etiqueta de estilo. Entonces, por ahora, agreguemos
esos detalles y ahora tenemos área de texto de mensajes. Entonces el tipo será área de texto. Bien, la fila será de cinco.
A ver, a ver. Cuatro es mejor que
cinco así y sí requiere entonces vamos
al siguiente aquí tenemos método de contacto
preferido
y debería ser lista. Así que vamos a marcador de posición
y es opcional. La etiqueta será el método de contacto
preferido, y aquí tenemos que
cambiar esto a CL y aquí tenemos que
agregar las opciones. Entonces agreguemos opciones como correo electrónico, digamos ingrese cada opción en una línea separada a diferente
entre etiqueta y valor. Sepáralos con la tubería. Por ejemplo, primer nombre si Bien, lo
conseguimos y luego aquí tenemos un pipeline y agregamos a Emil Y aquí está el cielo es cielo delgado en como a Es un Zoom. No, Zoom no
va a funcionar aquí. Entonces, mantengamos esas
tres opciones. Y si queremos, podemos
agregar opción multileon, pero aquí no
necesitamos multileation Solo necesitamos tarde uno
no si comprobamos el diseño, no
vemos el marcador Entonces, para agregar el marcador de posición, presentaré y agregaré el
método de contacto preferido como este Es un método de
contacto preferido por sil. Y funcionará como soldadura de
juego y
no es campo obligatorio, y pasemos
al siguiente elemento. El siguiente punto es Clecoption. ¿Cómo te enteraste de nosotros? Cleco hay mucho tipo de campo jugar alrededor con esos tipos de campo
y aprenderlos todos. Y voy a copiar este
texto aquí así. Entonces la etiqueta será, ¿cómo te enteraste de nosotros? Y aquí, vamos a enloquecernos, quedemos solo esos artículos Y creo que aquí
no necesitamos agregar la línea ppe porque solo
necesitamos
agregar las cinco líneas si usamos texto
separado o intentamos representar
textos diferentes de este texto. Como ejemplo en el correo electrónico, si tratamos de obtener uno, lo que significa si el correo de
alguien y si queremos obtener uno
al enviar el formulario, podemos agregar este
pipeline así. O aquí dentro, en este caso, el cielo será dos y el
teléfono será tres. Entonces si alguien envía el formulario, obtendremos este texto
como uno, dos, tres. Bien, no necesitamos eso, así que vamos a eliminarlo. Y ahora lo que tenemos que añadir. Aquí tenemos subir
el campo humano. Entonces agreguemos nuevo artículo, y aquí, digamos el tipo
como archivo subir y la etiqueta
será documento de carga. Y aquí podemos definir
el tamaño máximo del archivo. Hagamos el correo electrónico con opción de
adjunto y no
es obligatorio. Podemos agregar tipos de archivos permitidos, así que aquí hemos permitido el tipo de
archivo como PDF, JPG, PNG, JPG PNG. PDF, así. Bien, ahora solo el visitante puede subir el documento tipo JPG PNG o
PDF, y tamaño Maxfle,
hagámoslo como tres El tamaño máximo del archivo debe ser
inferior a megabyte tres. Bien. Ahora creo que nuestro
formulario está cumplimentado, pero cuando revisamos aquí, no tiene nombre.
139. Añadir código css para mostrar la etiqueta en el campo de archivo: Bien, ahora tenemos este tema. Ocultamos etiquetas. Entonces, cuando ocultamos etiquetas, no vemos esta etiqueta de
subir documento, así que simplemente
elegirá el botón archivo. Entonces para arreglarlo, tenemos que
agregar el código CSS. Entonces solo voy a publicar esto
y aquí va a estar su aspecto, pero necesitamos subir el texto
del archivo aquí. Entonces primero, copiaré el texto y colocaré
el texto así, luego publicaré esto y
ahora voy al tablero. En el tablero, tengo que
agregar este código, así iré a
apariencia y personalizaré. Puedes encontrar este código en
la sección de recursos. Después voy a CSS adicional y
agrego el código CSS así
y hago clic en Publicar. Ahora vengamos aquí
y revisemos los cambios. Ahora podemos ver la etiqueta. Encuentra este código en la sección de
recursos. Tenemos que añadir el código CSS. Antes de hacer eso, siento que
este tamaño es un poco más grande, así que vengamos aquí y
hagamos este ancho como 60 y este segundo ancho de
contenedor será 40. Entonces tenemos 100
tamaño del ancho. Bien, ahora lo que
tenemos que hacer es addt
140. Diseño de la página de contacto: parte 02: También necesitamos cambiar este título de
botón para enviarlo, así que hagámoslo aquí. Averiguemos el botón, y cambiemos enviar
a enviar así. Bien. Ahora vamos
a Etyle en Etyle Hagamos que la columna Gap sea
cero y dos huecos de fila. Veamos los huecos de fila, los huecos de
fila son dos. Micro huecos 20, espaciado de etiquetas, hagamos espaciado de etiquetas, cero por ahora, y el
color será el color del texto, y el texto será tipografía No tenemos campo DML, así que no tenemos que
preocuparnos por eso Entonces aquí tenemos el campo. Por lo que el color de prueba de campo será negro y la tipografía
será párrafo Entonces aquí, damos click en el campo, el color de relleno es ninguno, lo que significa que su
color de fondo es blanco, y en el borde, tenemos
color de trazo como este color ceniza, y el ancho será uno. Entonces agreguemos la acuarela
como esta y ancho esta. En realidad, el color del agua
debería ser este color. Bien, entonces tenemos que
encontrar el radio fronterizo. El radio del borde es seis, y vamos a encontrar el color del
texto color del texto
Este color en realidad
es el color del marcador Y vamos al botón. Entonces en el botón, el
color de fondo del botón será este color, y el botón no está
lleno con botón, por lo que la tipografía
será botón y posición de los estilos de
alineación se dejará, texto color
prueba color blanco Sí, el color del texto es blanco, y averiguaremos los bordes. El radio fronterizo es de 15 y aproximadamente el
tamaño intermedio 2020 por 30, 30 Entonces el radio del cuerpo es 15, el patrón de texto será superior
20, derecha, 30, abajo 20 a la izquierda 30, así. Bien. El tipo de agua no será ninguno. Oh, vamos a la página principal y
revisemos el escenario on hover. Todavía no añadimos
los detalles on hover, pero hagamos en nuestro fondo mismo el color del texto
se cambiará a negro Entonces, no es bueno. Hagámoslo
así mucho mejor. A lo mejor vamos a
mantenerlo como por defecto. No necesitamos hacer ninguna. Deberíamos agregar este tipo
de animación así. B en el contenido, creo que el lado de
entrada debería ser medio, y ahora va a ser
mucho mejor así. Ahora publica esto y
veamos el diseño en me voy, así se verá así. Bien. El formulario está cumplimentado, y ahora tenemos que
crear esta sección. Y agregar acción al formulario será otro paso imprescindible saber. Entonces hagámoslo después de completar
el diseño completo del sitio web.
141. Diseño de la página de contacto: parte 03: Ahora tenemos que
diseñar esta sección. Es bastante sencillo porque ya lo
diseñamos. Si vamos a la página principal de nuestro sitio web y nos
desplazamos hacia abajo aquí, tenemos esa sección similar. Vamos a editar con
Elementor para editar esa sección y editar la
página y copiar la sección Desplácese hacia abajo. Todo bien. Copiemos uno por uno, copia
correcta, ven aquí. No aquí, aquí,
pegarlo así y aquí, copiarlo es bastante sencillo. No. Creo que no
necesitamos esta. Podemos hacer el trabajo
con esos dos rubros. Entonces primero, voy a
copiar seleccionaré el contenedor principal y enviaré el contenido justificado al centro. Y también en el contenedor principal, iré a disposición
y en disposición, la columna será 220, así tendremos este espacio
y en el subcontenedor, también la fila hielo
será 20 así Creo que son 20, ¿no? Son 30. La rosa es de 30. Bien. Ahora primero,
la S es la misma, y luego tenemos la ubicación de la
clínica, y aquí no necesitamos esta, así que elimínala, y luego
tenemos horario de atención
a en las horas de apertura , solo
duplique éste, luego descargue este
icono así, luego venga aquí y
haga clic así, luego haga clic en icono y
agregue el icono así, luego aquí seleccione y se
agregará así, entonces lo que tenemos
que añadir este texto. Copia la pasta openn así, luego aquí, copia el texto, da click aquí y pasea
el texto así Ahora tenemos esas
tres secciones, y ahora lo que tenemos que añadir
a este mapa. Para ello, voy a hacer
clic en el icono más. Columna de dirección del cuadro de texto, y aquí el tamaño de invitación
será superior será uno, dos, y, y la derecha
será 140 por 140 Ahora buscaré aquí mapa. Aquí tenemos Google Map, agrégalo. Y ahora vamos a copiar esto. Vamos a copiar esta ubicación del mapa y simplemente pegarlo así
y se mostrará así. Entonces, si queremos, podemos acercarlo un poco más y podemos
ajustar la altura. Entonces veamos la altura aquí. La altura es 500, así que
hagamos no 400, 500 como la altura, y es bastante buena. Bien. Bonito. Ahora puedo publicar esto, y aquí tenemos
nuestra página de contacto. Esto se verá mejor en
este tipo de dispositivos.
142. Fijar el encabezado: Hola a todos. Ahora
solo diseñamos las páginas de Earl, pero tenemos mucho trabajo Todavía no hicimos que
esas páginas respondieran. No obstante, vayamos
paso a paso otra vez. Primero, en la página principal,
tenemos mucho trabajo por hacer. Entonces comencemos desde la página principal y hagamos que el
sitio web sea funcional. El primer paso, si reviso
el enlace en la página de inicio, el enlace de inicio está
trabajando sobre bloquear nuestro proveedor por lo que contactar cualquiera de esos enlaces no
están funcionando. Entonces si hago clic en este ícono de llamada, no
funciona dos y este ícono de llamada no está
alineado correctamente, así que arreglemos esas
cosas primero para hacer eso tenemos que
editar el encabezado principal. Entonces hago clic en el
encabezado principal para
editarlo en Elemental y aquí vamos. Entonces antes que nada, tenemos que cambiar este menú
y para cambiar el menú, podemos dar click sobre este, ir a la
pantalla del menú para administrarlo. Y aquí está el menú actual, pero esos enlaces
son enlaces personalizados, así que tenemos que cambiarlos. Entonces en artículos de Admeno,
tenemos páginas. Entonces si hago clic en O ver, podemos ver las
páginas que tenemos. Entonces tenemos que reemplazar
esta página sobre, página blog, página de contacto, y nuestro jinete será sección. Entonces por ahora, agreguemos esos
elementos al sitio web, y aquí voy a cambiar
esta etiqueta de navegación a aproximadamente luego ponerla aquí mismo, luego eliminar este enlace personalizado
y luego tenemos contacto. Voy a quitar este enlace
personalizado y etiqueta y sólo mantener el contacto, entonces tenemos la página de bloqueo, así que vamos a cambiar es capaz bloquear y eliminar
el enlace personalizado. Ahora esos artículos
deberían ser trabajados, así que ahora hago clic en Savino Entonces lo que tenemos que hacer es cuando alguien haga clic en
este enlace de proveedores, esa persona debe
redirigir a la página principal. Yo lo reviso redirigir
a la página principal, nuestra sección de proveedores
a esta sección. Hagamos esa
funcionalidad para hacer eso, haré clic en Editar
con elemento a la derecha, luego me desplazaré hacia abajo hasta nuestro proveedor dedicado
y haré clic aquí, luego iré a Avanzar. De antemano, agregaré CSS ID. Solo aquí agregaré nuestro
proporcionar Deres y copiarlo, luego publicaré los
cambios y ahora iré a Menú y en Menú en hashtag a
nuestros proveedores como este. Así que ahora hago clic en Guardar Menú y luego veamos
la funcionalidad. Entonces, como primer paso, si hacemos clic en A, realmente
reaccionará a la página A como esta y volvamos
a ir a la página de inicio nuevamente. Y si hago clic en nuestros proveedores, se relacionará con la sección
de proveedores. ¿Qué páginas hizo esto? Acabamos de agregar el ID o
simplemente asignamos CSS ID
a esta sección, y en Menú, simplemente lo agregamos
como hash tag a nuestros proveedores. Entonces cuando hacemos
clic en nuestros proveedores, puedes ver aquí tenemos un hashtag OR proveedor O
proveedor, etiqueta así. Veamos aquí y
comprobemos de nuevo. Así que vamos a la página principal
y vamos a comprobarlo de nuevo, ver Cuando lo hago, aparece
nuestra etiqueta de proveedor
y esta sección redirecciona a la página de proveedores o la página redirecciona a la sección de proveedores
OR, y si hago clic en Con tag, redirigirá a
la página de Contacto. De alguna manera desde aquí, si hago
clic en nuestros proveedores, no pasará nada porque
esta URL no es correcta. Actualmente, si hago clic
en Nuestro Proveedor, se agregó después de esta URL de la página de
contacto, pero esta ID de proveedor OR
se encuentra en la página principal. Entonces, si queremos redirigir, tenemos apuntando esta URL
a la página de inicio así. Ahora bien, si trato reprimir la página o
intento ir a la página, se redirigirá a nuestra sección
dedicada de proveedores Entonces para arreglarlo, lo que puedo hacer es simplemente copiar
el contenido e ir a Menú y aquí en vez de simplemente
agregar el parámetro URL, puedo agregar la URL del sitio web, luego Ashtag y el parámetro Después haré clic en Guardar Menú
y ahora veamos acción. Entonces primero, solo ve a la página principal
y ahora estoy en la página principal. Ahora si hago clic en nuestro proveedor, se volverá a dirigir
al Nuestro proveedor, y si hago clic en Contag y
luego hago clic en nuestro proveedor, volverá a dirigirse a
la sección Nuestro Ver, ahora está funcionando perfectamente. Por lo que ahora nuestro menú está funcionando. Y así este
menú de pie de página está funcionando, pero tendremos que
cambiar el menú de pie de página. Pero por ahora, esto es perfecto. Y si comprobamos en
esto llámanos 247, puedo si alguien pincha sobre este icono debería
leer o podemos agregar funcionalidad para abrir dialem
del móvil o el PC y
actualmente no está funcionando Si lo comprobamos con claridad, podemos ver claramente que hay
un problema en la alineación. Así que arreglemos esos problemas. Entonces ahora estoy de nuevo
en la cabeza principal primero arreglemos este problema de
alineación para hacer eso, hago clic en el elemento cuadro de
imagen, luego voy a Eyle en
Eyle en contenido Si comprobamos en la
corbata para la grafía, agregamos la altura de la línea dash Otto, pero lo haré pixel
y vamos a agregarlo como uno. Ahora va arriba y
luego lo que voy a hacer es clic aquí cambiar este
auto a uno como este. Ahora solo arreglamos, y ahora lo que puedo hacer
es contener espaciado. Vamos a agregarlo así. Ahora es bastante bueno. A lo mejor nueve será la base. Sí, nueve se basarán. Por lo que ahora publícalo, y como siguiente paso, tenemos en la llamada Enlace. Así que ve a Google y busca la etiqueta de enlace de
llamada en HTML. Y aquí tenemos la etiqueta HTML, así que solo necesitamos
obtener esta parte tell, copiar esa parte tell
y venir aquí. Después sobre el contenido, aquí tenemos
un lugar para agregar el enlace. Entonces aquí solo agrego decir y ahora lo que tengo que hacer
es agregar este número. Entonces agreguemos este
número así. Este es un número falso, pero agrégalo con
el código de país. Publica. Y ahora vamos a ir a la página de inicio del sitio web y Bien aquí
tenemos un problema pri. Pero cuando hacemos clic
en este icono de llamada, se abrirá el
pop up que dicen, Abrir kip lo que significa que si
hacemos esto en el móvil, se abrirá el dial pad. Bien. Ahora aquí tenemos un problema. El problema es que
eliminamos la altura de línea
aquí en el contenido, hagamos esta descripción
tipografía altura de línea a 30 y en título, vamos a hacerla
altura de línea es la línea ight Cero, publícalo y
descansa en el diseño. Bien, funcioné perfectamente
así. Bien. Todo bien. Ahora nuestro menú está
funcionando a la perfección, y ahora tenemos que ir
a la sección Héroe.
143. Cita para solicitar el diseño: parte 01: Hola a todos. Ahora
tenemos que diseñar esta solicitud tu
página de cita. Entonces hagámoslo. Voy al
panel de WordPress o podemos pasar el cursor por aquí
y hacer clic en la página, y ahora voy a copiar esto En realidad, copiemos este título y hagamos clic en editar con el artículo. Bien, como hicimos
antes, da clic aquí, da clic en mis plantillas
y aquí tenemos sección de
héroe Wasa da clic
en ella, da clic en aplicar Todo bien. Ahora agreguemos el encabezado y digamos
primero copiar el titular, más allá del titular así, entonces tal vez tengamos que agregar BR aquí. Pero sin R
también se ve bien, y vamos a copiar esta
parte primero, y aquí, tenemos que
añadir BR o línea de rotura
aquí. Así. Bien. Ahora necesitamos
agregar este formulario. En realidad, en el último video de Figma, me olvidé de actualizar esta sección, así que lo actualizaré
y volveremos
144. Cita para solicitar el diseño: parte 02: Aquí en Figma design, tenemos los campos del formulario de contacto Entonces en GPT, podemos ver el campo de formulario de solicitud de
cita. Entonces agreguemos esos Sp primero, necesitamos tener un nombre completo, y actualmente aquí tenemos un nombre completo, luego dirección de correo electrónico. Y aquí tenemos la
dirección de correo electrónico, luego el número de teléfono. Número de teléfono, entonces
deberíamos tener un menú desplegable de servicio de selección. Así que vamos a copiarlo y aquí, vamos a usar este cuadro escotado como selector de solicitud de servicio de
selector así y tenemos que
no que tengamos que hacer clic en éste y
ponerlo así Bien. Entonces necesitamos tener
una fecha y hora preferida, así que copiémosla y
vamos a anunciarla así Entonces deberíamos tener mensaje
o notas adicionales, así que copiemos esto. Entonces vamos a hacer un anuncio así. En realidad, es opcional. Entonces agreguemos esos
detalles como este, y luego tenemos consentimiento. En realidad, no necesitamos consentimiento, y el botón de enviar debe ser solicitar cita y aquí voy a eliminar esas dos opciones. Entonces éste luego cambia botón de
enviar para
solicitar cita. Bien. Ahora podemos utilizar este formulario para diseñar nuestro
elemento o formulario de Wordpress.
145. Cita para solicitar el diseño: parte 03: Derecha. Ahora aquí
tenemos la forma. Vayamos aquí. En realidad, podemos copiar esos contenidos
desde la página de Contacto. Abriré este sitio web en
Nueva Ventana e iré a Contacto, y en Contacto, haré clic en Editar con Elementor y aquí
tenemos este formulario de contacto En realidad, sólo voy a
copiar toda la sección correctamente copiar C justo pasado. Ahora no necesitamos esos artículos. En cambio, necesitamos este, así que lo voy a poner así. En realidad debería
estar aquí dentro. No, no ahí dentro de este
contenedor así. Ahora no necesitamos esos tres, así que solo los seleccionaré
y los eliminaré así. Ahora aquí tenemos primero el formulario, editemos el formulario. Aquí, primero necesitamos nombre completo. Creo que ya tenemos
el nombre completo aquí, y aquí tenemos que
cambiar esto para solicitar cita
cita ortografía canción, y ahora es solicitar formulario de
cita y aquí debemos
tener nombre completo. Voy a cerrar este y luego dirección de
correo electrónico, nombre completo, aquí tenemos dirección de correo electrónico
y luego número de teléfono, creo que ya
tenemos el número de teléfono, luego seleccionamos un servicio. Vamos a copiar la parte de servicio
selector y no necesitamos este tema, por lo que voy a cambiar la etiqueta de asunto a servicio
selector y colocado será servicio selector y el tipo será Select. Nuevamente, agregaré la etiqueta. Ahora, como hicimos antes, agreguemos
primero la información solo agrega la opción vacía y ahora tenemos que agregar
nuestros servicios de Earl Podemos encontrar nuestros servicios
desde la página de contenido, vamos al contenido Bien, aquí tenemos el contenido o
aquí tenemos los servicios. Entonces aquí tenemos ocho servicios. Vamos a copiar uno por
uno y paginarlos. Voy a hacer esto
más pequeño así. Ahora puedes
ver fácilmente a qué hora copia. Entonces aquí primero,
tenemos atención pediátrica, y solo agregamos todos ellos. Ahora tenemos los servicios. Pasemos al siguiente campo y al siguiente campo se
prefiere fecha y hora, cópielo y aquí voy a quitar
estas cosas innecesarias. Agregar la nueva etiqueta se
preparará fecha y hora. Vamos a mover la solicitud. En lugar soldadura, en realidad, tenemos que hacer este campo de
fecha y hora. Aquí tenemos campo de fecha
debe ser requerido. Sin embargo, no tenemos
un campo de fecha y hora. Hagámoslo así primero. Tenemos una fecha preferida, la fecha preferida
es campo obligatorio, y aquí como marcador de posición, hagamos solo
fecha preferida como esta, luego dupliquemos
este campo de fecha y cambiemos la etiqueta a hora, y la hora no es obligatoria, como esta hora es opcional Eliminemos
bien esta etiqueta y agreguemos
el marcador de posición El marcador de posición
será este opcional. Las palabras opcionales son.
El tiempo es opcional. En realidad, tenemos que hacer este campo de
tiempo, no
así, para que podamos seleccionar la hora
aquí y la fecha aquí así. Bien, ahora tenemos campo de fecha y hora y luego
necesitamos tener mensaje y adicional no
copiarlo y vamos a editar el área de texto
actual, no
es un campo obligatorio y
este campo de tiempo no es un campo
obligatorio para Bien, bien. Entonces ahora tenemos que cambiar
la etiqueta del botón. Así que vamos a cambiarlo copiar solicitar cita y presionar
la etiqueta del botón así, y es bastante bueno. Por lo que ahora hago clic en publicar. Y aquí tenemos que cambiar
el titular y en el texto. Entonces vamos a hacer aquí, copiar el titular,
pasar el titular, luego Dubligar y copiar el párrafo así
y cambiar esta tipografía Bien. Y veamos que el tamaño inbten entre
talla es 30, hazlo 20. Piensa que debería ser 2020. Entonces tenemos que agregar esta imagen. Es bastante simple. Podemos simplemente copiar el contenido de la imagen desde aquí, o vamos a crear uno nuevo. Da clic en Agregar elemento
y buscar imagen. Y aquí, coloca la
imagen así. Da click aquí, y
solo podemos descargar esta imagen. Da click en exportar y
vamos a Tiny PNG en, reduce el tamaño del archivo
así y descárgalo. Entonces agreguemos la imagen
así y en el
título para todo el texto, agregaré solicitar cita
y dar clic en Ocultar bien. Ahora voy a hacer clic aquí y hacer que este dispositivo se
centre así. Bien, yo bien, y ahora tenemos la solicitud de
cita página dos. Vamos a comprobarlo en la vista trasera. Bien, me quedaré así, y creo que agregar esos dos artículos aquí
será mucho mejor. Entonces hagámoslo. Tratemos de agregar este de aquí, y este también de aquí. Vamos a comprobarlo. Esto es
mucho mejor que antes.
146. Enlace a la página de inicio: Ahora vamos a vincular nuestro sitio web
de WordPress. Voy a ir a la página de
inicio y
ya estamos listos enlace y
problemas fijos en el menú, y ahora tenemos que ir a la sección de
héroes y el resto. Haré click en Editar
con elemento de Bien, ahora tenemos este botón de solicitar
tu cita, así que doy click aquí para editar y voy
a Etyle en Etyle on hover,
agreguemos animación hover como Crecer Entonces crecerá así cuando el visitante pase el cursor
sobre el botón, y este es un diseño simple, así que esto es suficiente Pero si quieres cambiar
el color del texto así, puedes hacerlo, pero no lo vamos a hacer
en esta web. Bien, ahora voy a ir al contenido, y sobre el contenido, tenemos que
vincular este botón. Entonces para hacer eso, solo podemos copiar la URL de la página y pegarla aquí, así que para hacerlo, iré al
dashboard de la página web, abriré el dashboard aquí. Después voy a ir a páginas en páginas, copiar
solicitar cita, además solo copiar enlace dirección
de esta u y aquí, vamos a agregarlo en
esta opción de enlace, lo
agregaré como
abierto en Nueva Ventana. Ahora el visitante haga
clic en este botón, se abrirá Nueva Ventana, y solicitará una
cita hoy página. Bien. Ahora aquí necesitamos
tener tenemos que agregar el aprende más UR aquí
está el resumen A. Entonces esto debería ir a la página A. Hay en la página, copiemos un
enlace de página como este. Entonces ven aquí, URL de la
página así, y se abrirá en Nueva
Ventana y aquí en estilo, tenemos que agregar la animación H, así la animación crecerá
y se verá así. Yo proveedores de MTO, estamos listos agregamos aquí la URL de
nuestros proveedores, así que cuando alguien haga clic aquí, esto debe ser rojo a nuestra sección
dedicada de proveedores Fácilmente lo que podemos hacer es ir
al sitio web y aquí solo copio esta URL y luego venir
y pegarla así. Bien. Ahora, también un estilo, podemos agregar nuestra animación
como crecer así. Bien. Ahora la siguiente sección y aquí tenemos que sumar pop up. Entonces, cuando alguien hace
clic en ver perfil, necesitamos tener que agregar una ventana emergente y hagámoslo en
la siguiente lección. Y antes de hacer eso, agreguemos otros enlaces. Entonces aquí tenemos que
agregar la URL de la llamada, así voy a copiar este número de teléfono y dar click en click en la imagen, y si alguien da
clic en la imagen, vamos a esta URL personalizada, y si alguien da
clic en la imagen, estará abierto el dial
pad del dispositivo. Entonces ahora tenemos que agregar esta URL. Entonces esta será página de contacto en páginas copiándonos
y aquí agregarla, abrirla en nueva ventana
y agendar una visita, ir a la solicitud
cita hoy página facturación y pega el enlace así y
ábrela en nueva ventana. Y para esos enlaces, si queremos, podemos agregar
la animación grow. Puede afectar el diseño, pero se agrega y puede que no afecte enormemente al Entonces Ahora, lo que tenemos que hacer
está en la página principal, Earl Good. Ahora pensamos Earl, así que si hacemos clic en esos enlaces, podemos verlo en la acción Entonces voy a publicar esto. Déjame publicarlo, y luego vamos a comprobarlo. Entonces, si hacemos clic en
este botón de Héroe, irá a solicitar
cita hoy mismo. Y si hacemos clic en esto, debería redirigir a
nuestra sección de proveedores y deberíamos tener acción
a este perfil de visualización. Y aquí, si hacemos clic en éste, lo leyó a la página de contacto
y todo funciona bien. Así que ahora agreguemos pop up a
este enlace de ver perfil, y te veremos
en la siguiente lección.
147. Crear ventana emergente: Para avanzar solo a planes expertos, podemos tener pop up Builder, pero en esencial, no
obtenemos la función Pop Builder. Entonces, en nuestro plan, obtuvimos la función Pop builder, y ahora vamos a
agregar este constructor de Popup Cuando alguien haga clic en
este perfil de visualización, obtendrá pop
up y en ese pop up, tendremos más
detalles sobre proveedor. Entonces hagámoslo. Primero voy al panel de
WordPress y en el
panel de WordPress en plantillas, verás pop ups. Así que haz clic en pop ups. Y actualmente no
tenemos ningún pop ups, así que simplemente hago clic en
Agregar nuevo pop up, y aquí el tipo es pop up
y voy a agregar el nombre. Por lo que este nombre
será nuestro proveedor. Vamos a agregarlo como pop up. Nuestro proveedor pop up y
haga clic en Crear tem play. Bien, aquí tenemos
algunos diseños Pop art, pero diseñemos
uno desde cero. Voy a quitar esta. Y aquí tenemos que editarlo, así que doy click en Agregar Plex Box y dar
click en columna de dirección. Y aquí, si voy
al layout advance en
layout y paddings, voy a quitar todos esos
detalles, y para el padding, vamos a agregarlo como
top 20, derecha, 20, y el inferior 20 izquierda 20, agreguemos padding como 20, entonces tenemos que agregar los detalles Entonces hagámoslo. En este caso, primero
necesitamos la imagen. Entonces hagamos clic aquí y busquemos imagen y agreguemos la
imagen así, luego por ahora,
agreguemos imagen tonta Entonces agreguemos esta imagen. Entonces, si recuerdas, creamos esta sección de nuestros
proveedores utilizando el campo personalizado avanzado
como un tipo de pose diferente. Si vamos al tablero
y en el tablero, tendremos esta sección de nuestros
proveedores como tipo de pose dedicada. Entonces, antes de agregar
esa información, solo
vamos a crear el diseño. Entonces primero, tenemos esta imagen
y la voy a agregar así, luego necesitamos tener titular. Entonces en este caso, el titular será así que
abriré el diseño Figma Bien, podemos copiar esa
información desde aquí. Entonces aquí vamos a tener este
título como primer titular, luego ir al estilo en estilo, cambiar a párrafo así, y en el contenedor, agreguemos pro as. Creo que va a funcionar. Y por ahora,
solo agreguemos diseño básico. Entonces otra vez, creo titular
diferente. Y si recuerdas, siempre
agrego etiqueta HTML a las dos, pero esa no es una buena práctica. En la parte de SEO,
voy a explicar más, pero por ahora,
agreguemos detalles predeterminados. Entonces aquí, agreguemos el
nombre editar así, entonces el nombre será subtítulo y el color del texto
será este color negro Entonces aquí tenemos una
pequeña descripción, pero necesitamos agregar descripción del
préstamo. Entonces, si acudimos a nuestros proveedores y clic en Editar, vamos a
disminuir esto. Así que aquí tenemos n descripción. Por ahora, sólo voy a copiar este texto porque
sólo necesitamos el texto. Entonces ahora doblaré
esta sección y agregaré la
descripción así, y aquí la
cambiaremos a Bien, ahora se ve bien, y luego agregaré botón
como solicitar cita. Así que vamos a botón, en realidad, podemos copiar botón de aquí porque no necesitamos
crearlo desde cero no. Entonces editemos la página de inicio y solo copiemos este botón,
copiemos el botón ,
venga aquí, presione el
botón así, entonces se verá así. Y hagamos que el botón esté
tan lleno con botón. Así que haz la posición tan
estirada así. A continuación, cambie este texto para solicitar
solicitud y cita. O vamos a
pedir cita, y se ve bien. Y ahora lo que hago es ir a contenedor y ahora vamos a
ajustar el diseño, así que voy a hacer esto
como todavía demasiado bajo, tal vez seis no 60, los seis funcionarán. Y si queremos, podemos agregar más diseños, pero por ahora,
lo voy a mantener así y aquí, haga clic en la imagen y
hagamos alineación centro
y radio del borde, hagámoslo como 220. Y cambiemos esta
alineación para centrar así. Y aquí,
hagámoslo a toma dos, y ahora va a ser mucho mejor. Nuevamente, el espacio la fila
será de tres va a ser bueno. Y bien, si queremos, podemos agregar los ons de redes sociales, pero no creo
que eso vaya bien. Pero si queremos, podemos
agregar los ons de redes sociales, pero actualmente no tenemos ninguno, así que si quieres, también
podemos agregar la breve
descripción, pero creo que aquí no necesitamos una
breve descripción. Ahora, este será
el aspecto del diseño y vamos a ajustar
los detalles pop up. Para editar el
tamaño del pop up y otras cosas, basta con hacer clic en este conjunto en icono. Voy a ir a la configuración del pop up, y aquí podemos cambiar
el ancho como nos guste, pero voy a dar el
ancho como 600 tal vez 680, esto va a quedar perfecto y podemos agregar la
ubicación pop up así, pero el centro horizontal y
vertical será el mejor lugar y hagamos que la
altura sea al contenido, lo que significa que la
altura se ajustará según el
contenido y si queremos, podemos hacer ajuste a la pantalla, por lo que será más grande pop up. Pero en nuestro caso, lo
haré lo más adecuado al contenido y aquí si queremos, podemos ocultar el overlay, pero creo que la superposición de cabina
estará bien aquí, tenemos un botón de cerrar, y vamos a mostrar el
botón de cerrar y no
necesitamos ninguna animación de entrada
o animación de salida. Si lo desea, puede
agregar en configuración general, no
hay mucho y en la vista previa
podemos verificar la vista previa, pero por ahora, solo
agregamos datos predeterminados, pero en la siguiente lección, agregaremos etiqueta dinámica
a todos esos elementos. Tenemos un problema en este botón. Iremos a este botón. Veremos este tipo de temas. Hagámoslo desaparecer. Para que desaparezca, solo
podemos hacer este centro y el contenido será centro y el botón será más pequeño. Ahora otra vez, vamos a pop up
setting y un estilo, hacemos más cosas. Entonces, por ahora, hagamos que el tipo de
borde pase monja y el radio del
borde serán dos y no hay necesidad de
sombra de caja y superposición Me gusta este color de superposición, pero si queremos, solo podemos
cambiar el color de superposición. Pero creo que el
color predeterminado es mejor, y en el botón de cerrar,
hagamos que el botón de cierre
sea un poco más grande. Entonces en el tamaño, vamos a
hacerla talla como 22, y el color
será de color azul. Y ONH no hace falta hacer nada. Y si queremos, podemos
cambiar la posición, pero creo que esta
posición es mucho mejor. Bien. Ahora en Advance, podemos agregar tiempos, pero me saltaré esos tiempos. Y aquí tenemos
muchas opciones,
pero las voy a mantener
por defecto y aquí podemos agregar margin y padding y
además podemos agregar código personalizado. Bien. Ahora tenemos este pop up, así que solo lo publicaré y cuando se publique aquí
tenemos tres tabulaciones. Vamos uno por uno. El primero es la condición. Yo digo, aplique las
plantillas actuales a esas páginas. A partir de aquí, podemos agregar
esas condiciones. Por lo que solo hago
clic en agregar condición, y aquí podemos
incluir o excluir. Como ejemplo, si no quieres mostrar el pop up
en una página específica, obtengamos
páginas específicas para la página. Podemos dar click en Excluir y
cambiar todo este sitio a singular y aquí
podemos seleccionar la
portada. Así. Además, si queremos mostrar
este pop up solo homepage, podemos configurar Incluir
en portada. En este caso, necesitamos configurar este pop
up a la primera página. Incluir singular y portada. Si agregamos esto como sitio completo, este pop up se
abrirá en cualquier página. En este caso, no funcionará
porque el botón emergente
será el botón de ver perfil solo ubicado
en la página principal. Entonces ahora tenemos estos disparadores. Yo digo, qué acción
necesita hacer el usuario para que se abra el
pop up. Entonces aquí dentro, tenemos
diferentes opciones. Entonces, si queremos mostrar el
pop up cuando visitemos una carga, podemos simplemente activar esto en carga de la
página y aquí
podemos agregar segundos. Entonces si quiero mostrar este pop up después de 5 segundos ese usuario
venga a nuestro sitio web, puedo agregarlo así, pero lo haré saber, y aquí tenemos otra opción. Entonces si esto en isCall, podemos agregar el pop up cuando Iscall vierta en el sitio web Entonces tenemos en
scroll a elemento. Entonces, si abrimos esto, solo
podemos definir una
sección usando la clase CSS. Y cuando el visitante se desplace
a esa sección, aparecerá
el pop up. Entonces lo voy a dar a conocer y al hacer
clic significa si el visitante
hace clic en el sitio web, podemos abrir el pop up. Entonces si hacemos esto como tres, así que cuando el usuario haga clic
tres veces como una, dos, tres, este pop up
aparecerá en la tercera vez. Entonces aquí tenemos
muchas más opciones. Aquí tenemos detección de bloques de anuncios. Entonces los usuarios usan bloqueadores de anuncios para
bloquear anuncios en nuestro sitio web, especialmente usted ejecuta un sitio de blog de
WordPress que tiene pecados publicitarios u otros anuncios. Puedes identificar si
el usuario usa el Bloqueador de Anuncios, y si no quieres que
usen el Bloqueador de Anuncios, puedes simplemente activarlo. Bien, ahora tenemos pestaña de regla
anticipada. Aquí, se trata de unos requisitos
que hay que hacer para que se abra
el pop up. Este caso, mostrar
después de X páginas teje. Si somos dueños de esto, podemos agregar el recuento de páginas que
comprueban al usuario. A modo de ejemplo, si agrego este cinco y el usuario
visita cinco páginas, aparecerá
el pop up. Hay muchos más disparadores, pero no voy a pasar por todos ellos,
jugar con esto. Hay
artículos súper geniales que podemos usar para activar pop ups y llamar la
atención del visitante. Bien, ahora voy a ir a la página
principal de nuestro sitio web, y asignemos
esto a un botón. Por lo que actualmente, no
tenemos ningún botón aquí. Entonces para hacer eso, solo voy a
crear un botón para probar esto, así agregaré el botón aquí, y voy a cambiar el texto del
botón para
que
me haga pop no sé así sobre el estilo, cambiemos el
color primario a esto y agreguemos Padin 22 para mejor tú y aquí tenemos que usar este enlace para
hacer este pop up En el enlace, haga clic en etiquetas dinámicas, y en etiquetas dinámicas, verá en
acción pop up. Ahora, entonces puedes hacer clic aquí y la acción es abrir pop up. Aquí podemos buscar
nuestro nombre pop up, nuestro proveedor pop up. Da click en él, y ahora
voy a publicar esto, lo que significa que cuando
haga clic en este botón, deberíamos tener ese pop up. Intentemos desplazarnos hacia abajo, desplazarnos hacia abajo así.
Después haga clic en él. Cuando hago clic en él, el pop
up acaba de aparecer y puedo cerrar el pop y cuando hago
clic en solicitar cita, realidad no configuramos este
botón de solicitud de cita, así que vamos a configurar. Aquí, esto debería ser redirigido a solicitar página de
cita, así que solo obtendré el título
como solicitar cita. Aquí está el título de la página solicitar
cita hoy, pegarlo y vamos a
abrirlo nueva ventana y dar
clic en publicar. Bien, ahora intentemos esto otra vez. Y aquí vamos. Entonces aquí apareció
el pop up, y si haces clic en
solicitar cita, se redirigirá a la página de solicitar
cita hoy, y podemos cerrar
el pop up Bien, el pop up está funcionando bien y
voy a quitar este pop me. Y ahora tenemos que asignar la acción del botón a
este perfil de visualización. Vamos a configurar con pop
up y ver la acción. Por ahora, voy a publicar esto y los veo
en la siguiente lección.
148. Añadir ventanas emergentes dinámicas con carrusel en bucle: Aquí tenemos un problema. Solo configuro el campo
personalizado avanzado para esta ventana emergente y luego voy a la configuración
emergente y en la vista previa, configuro nuestros proveedores y hago clic
en Aplicar y Vista previa. Funcionó bien. Pero
entonces lo que hice es, solo
voy al carrusel y
solo configuro ese pop up en este perfil de vista y el resultado es cuando hacemos
clic en el enlace, solo
mostramos este
tipo de pop up El contenido no se
carga en el pop up, y esto es un problema con elemento y todavía
no abordaron este tema. Pero cuando reviso
solución para este problema, encontré un video del canal de YouTube
webqudn, y él
abordó con éxito este problema Así que apliquemos esto a nuestra sección
dedicada de proveedores. Entonces, para solucionar este problema, tenemos que agregar un nuevo
campo de tipo URL a nuestros proveedores, y luego tenemos que
agregar el enlace Popa ahí. Entonces hagámoslo. Primero, iré al campo personalizado
Avanzado, y en grupo de campo, contaremos con nuestros proveedores. Simplemente hago clic en Editar y
aquí tenemos los campos, y ahora necesitamos un nuevo campo, así que hago clic en en campo, y este
tipo de campo será Enlace. Entonces agregaré etiqueta de campo
como tinta pop up así. Después haré clic
en Guardar cambios y pasemos
a la siguiente parte. Entonces ahora volveré aquí ahora aquí
solo tenemos un pop up, pero para que esto funcione, necesitamos crear pop ups
individuales para
todos nuestros proveedores. En este caso, tenemos que
crear cinco de ellos. Voy a cambiar el nombre de esos pop
up como nombres de proveedores. Primero, voy a copiar este nombre de proveedor y luego dar
clic en Editar detalles, y aquí voy a dar
clic en Editar y desde aquí, voy a cambiar esto al nombre del
proveedor y simplemente dar
clic en actualizar y ahora doy
clic en Editar con elemento aquí, lo que podemos hacer es eliminar los
detalles avanzados del campo personalizado y como primer paso, tenemos que agregar
esa información. Actualmente, aquí está el tiro a la cabeza, elige esa imagen de tiro en la cabeza
de nuestra mediateca Aquí está, da clic en Consilar
entonces tenemos este titular, da clic aquí y
eliminemos la dinámica Y agrega el rollo así. Agreguemos rollo, y
luego el siguiente, creo que es nombre,
quita este. Entonces agreguemos el nombre del médico o el
nombre del proveedor así, y luego el
siguiente en el siguiente, tenemos la descripción del préstamo. Entonces aquí tenemos descripción del
préstamo, solo cópielo y
pégalo así. Bien. Ahora tenemos primero pop up, ahora hago clic en publicar. Bien, ahora nuestro primer
pop up está terminado, así que volveré y luego
iré a la ventana pop ups. Y a partir de aquí,
voy a duplicar esto. Para duplicarlo, simplemente voy hacer clic en Exportar
plantilla, y aquí, clic en Implod plantilla y simplemente poner el archivo
Jason así, luego dar clic en Importar
y dar clic en Continuar Después hago clic en
Habilitar e importar. Bien, ahora voy a pops y
en pop ups se acaba de importar, y aquí está el original. Aquí está el importado. Así que vamos a hacer clic en
Editar con elemento. Aquí, cambiemos
esos detalles. Entonces en nuestro proveedor, consigamos este
segundo y copiemos el nombre. Aquí está el nombre.
Cambiar el nombre. Ahora es fácil el
ritmo de rol el rol así. Entonces tenemos descripción del préstamo, copia la descripción del préstamo. Pase aquí la descripción del préstamo. Entonces revisa el disparo en la cabeza
y vamos aquí. Cambiar el tiro en la cabeza
al doctor Carlos. Creo que es el doctor Carlos. Sí, selecciónala así. Bien. Ahora voy a dar click en
publicar y en condiciones, agreguemos singular
y aquí portada. Haga clic en Guardar y Cerrar. Bien, ahora está publicado. Y ahora aquí
tenemos dos pop ups. A ver, sí. Aquí
tenemos dos pop ups. En realidad, tenemos que
cambiar el título. Olvidé cambiar el título. Vamos a hacer clic en Editar y
pegarlo así. Después haga clic en Actualizar. Bien, ahora tenemos
dos pop up separados. Ahora lo que tenemos que hacer es
sumar esos Pow up to button. Vamos a la página principal. Ahora haga clic en Editar con 112. Ahora lo que tenemos que
hacer es agregar un botón. Simplemente voy a hacer un botón como este y hay algo de diseño
al botón, da clic aquí. Hagámoslo click
click aquí y en link, tenemos que
configurarlo como pop up, seleccionar el pop up
y luego ear pop up, tenemos que buscar el nombre del doctor. Entonces creo que tenemos a
la doctora Lisa. Así que vamos a escribir DR hacer aquí
tenemos el pop up de la doctora Lisa. Entonces ahora voy a cambiar
este texto a DR Lisa. Y nuevamente, duplicaré
este botón vamos a crear un contenedor y
agregar esos artículos al contenedor sin solo
meterse con nuestro sitio web Voy a crear nuevo
contenedor así, y después vamos a agregar botón, y aquí voy a quitar, ya No, aquí, voy a quitar este botón, y bien aquí agregamos el pop up, funciona así que ahora lo que tengo que
hacer es duplicar este
botón por segunda vez y podemos hacerlo fácilmente
si el contenedor es dirección como un gap
ciruela más dos. Lo podemos ver claramente. Entonces ahora tenemos que conseguir el segundo para pally
aquí y en la tierra cambiar esto a DR Garlos y luego cambiar el
nombre a uh Bien, ahora tengo que
publicar esto publicarlo y dar click en Ahora voy a bajar y
ahora si hago clic aquí, aparecerá
el de la doctora Lisa, y si hago clic aquí, el doctor Carlos Propille
aparecerá así Entonces ahora lo que tenemos que
hacer es hacer
clic derecho y dar clic en
copiar Dirección de enlace. Entonces si pongo esa
dirección de enlace en la URL, veremos este
tipo de Dirección de enlace En realidad vamos a abrir editor de texto, editor texto
en línea así, entonces y después voy a poner texto. Entonces en este texto, solo
obtenemos este texto de
este elemento hash tag. Copia esa parte y ve
a nuestros proveedores aquí, nuestros proveedores y proveedores. Simplemente lo seleccionamos
de la doctora Lisa, así que vamos a editarlo y desplazarnos
hacia abajo en el enlace emergente. Voy a pasar
la URL así. Bien. Ahora hago clic en Csave
y volvamos. Esto debería
salvarse. Es ahorro. Bien, está guardado, y
luego voy y aquí
vamos al
perfil del doctor Carlos y de aquí, con razón copiar el vestido de enlace, el enlace
espacial en el editor de texto y copiar el enlace en este enlace Pop, solo agrega la URA así. Bien, ahora vamos a
guardar esta también. Entonces, por ahora, agreguemos
sólo a esos dos elementos. Bien, ahora lo que
tenemos que hacer es ir
al ciclo de lectura de nuestros proveedores dedicados
y hacer clic en Editar Temp Bien. Ahora en este perfil de vista, elimino esta
parte emergente de enlace y en etiqueta dinámica, agregaré código corto. Entonces podemos agregar un código
corto aquí. Entonces este código corto debería ser la etiqueta
de código corto de nuestro enlace emergente. Entonces si vamos a la
así vamos a ir al panel de control y aquí avanzado campo
personalizado grupo de campo, y aquí tenemos nuestros campos de
proveedores, haga clic en y aquí
tenemos el enlace emergente. Entonces este es el nombre
de este campo, cópialo y vuelve a nuestra plantilla dedicada y
agrega corchetes aquí campo ACF, igual código doble
y el enlace emergente Entonces aquí lo que pasó es cuando esos datos se llenan
con nuestro hijo proveedor, esta URL también se llenará
con el enlace pop up, y cuando hagamos clic en él, aparecerá
el pop up que relacionado con
este proveedor. Entonces probémoslo,
haga clic en Publicar y ahora vayamos a nuestra página de inicio y vayamos a nuestra sección de proveedores. Bien, cuando hago clic en él, no pasa nada y echamos de menos una parte o
no hicimos una parte correctamente. Así que vamos a nuestro grupo de campo
avanzado y aquí vamos a nuestros
campos de proveedores y haga clic en Editar. Entonces en este enlace emergente, lo
cambiaré al valor de
retorno está en matriz de tinta, pero debería estar
en LinkRL lo
configuraré con LinkRL y ahora
haga clic en Y ahora vamos a reprimir esta página. A ver. A ver. Sigo pasando nada. Bien, intentémoslo de nuevo, pero esta vez, no pasa nada. Entonces lo que podemos hacer es poder previsualizar el ítem que
agregamos a este lugar. Entonces para hacer eso, iré a nuestra sección dedicada
de proveedores. Entonces agreguemos un nuevo
titular como este y onti hagámoslo párrafo y vamos a cambiarlo de color
a este color negro Bien. Ahora aquí, lo que
voy a hacer es justo en el código corto y
el código corto será el código corto
que agregamos aquí. Entonces copiemos ese código corto. Éste, pegarlo así. Bien. Ahora da click en publicar
y ver qué va a pasar. Reprimir la página.
No, ésta no. Reprime este.
Y aquí vamos, el shortcde ACF está
deshabilitado en el lateral Bien, ahora tenemos este problema, así que tenemos que habilitar
el shortcde ACF Lo haré solo para habilitar
el código corto, solo
podemos usar este código PHP y te
mostraré cómo hacerlo. Iré al panel de WordPress así y en los complementos, hagamos clic en Agregar nuevo complemento. Vamos a
añadir un nuevo plugin, por lo que este nombre de plugin
será código WP. Este es el plugin es
compatible con nuestra versión, haz clic en Instalar ahora, Instalar en
y haz clic en Activar Niza. Aquí está el plugin,
así que voy a hacer clic en Code is NB y actualmente, no
tenemos ningún
nibbt enable así que comprobaremos en PHP y solo tenemos PHP
uno, pero es deshabilitado Así que vamos a hacer clic en Agregar Nuevo. Bien, aquí, tenemos muchos Nibbt construidos
gratis pero
no necesitamos esos Entonces en este caso,
vamos a crear nuestro propio Snibit click
on en CustomNBT Y aquí tenemos que
seleccionar el tipo, así nuestro tipo será script PH y aquí
solo voy a pasar el código que lo copiamos de
aquí y puedes consultar la
sección de recursos para obtener este código, y aquí voy a agregar un título. Por lo que este título se
habilitará el código corto ACF. Entonces aquí, hazlo en cualquier dispositivo
y mantén todos los detalles por defecto y haz clic en guardar Snibit y
aún está inactivo, solo haz clic en activo Es actualización, y luego
vamos a sitios web. Así que asegúrate de agregar este código correctamente porque si
agregas este código incorrectamente, romperá el s. Bien, ahora veamos la página principal
y veamos qué pasa.
149. Arreglar las ventanas emergentes dinámicas que no muestran problemas: Parece que el código proporcionado por documento
ACF no está
funcionando por alguna razón, y tenemos nuevo código, solo
voy a agregar el
código y simplemente hacer clic en actualizar y verá este código en la sección de
recursos Ahora veamos el
sitio web en acción. Bien, da clic en nuestros proveedores y aquí tenemos los detalles. Si haces clic en el icono, aparecerá así porque
esta URL agregó un código corto. Ahora vamos a editar con Elementor y no
necesitamos esta parte de URL, así que vamos a eliminarla Da clic en Editar plantilla, y aquí no
necesitamos este texto, así que solo
lo seleccionaré desde aquí y daré clic en eliminar y dar clic aquí. Después acabamos de agregar el código
corto y funciona. Entonces ahora hago clic en publicar, y luego tenemos que crear Popa para el resto
de nuestros proveedores. Aquí tenemos algo mal. Así que vamos a hacerlo bien. Entonces la doctora Carla
dijo la doctora Lisa. Sólo tiene que copiar la dirección de la doctora Lisa e ir
aquí y luego pegarla. No. Simplemente pegarlo así
y luego copiar esta parte. Y en el tablero,
vayamos a nuestros proveedores, nuestros proveedores, y
en la doctora Lisa agrego accidentalmente la URL del
doctor Carlos. Creo que ese fue el
problema que pasó, así que eliminemos este
y hagamos clic en Concilateink,
en el Enlace, y haga clic
en en Enlace y Entonces vayamos al diseño
y veamos en la acción. Aquí vamos aquí y
aquí, está funcionando ahora. Bien, ahora hagámoslo para el resto de los perfiles de nuestros
proveedores. Entonces primero, tenemos que crear los pop ups y vamos a
crear pop ups. Voy a quitar estas pestañas
innecesarias porque ya no las necesitamos. Y bien, aquí, solo
haz clic en Exportar plantilla. En realidad, ya
exportamos la plantilla. De todas formas, da clic en
Importar plantillas y agrega la plantilla así. Continúa, y tenemos que
hacerlo una y otra vez
por dos veces más. Una vez más, por favor continúe. Y ahora vamos a ir a pop
ups en pop ups aquí, tenemos a la doctora Lisa, al doctor Carlos, y luego
editemos esta. Esta será Emma. Y abramos tres de ellos. Y aquí tenemos los detalles de la
doctora Emma, y hay pop up. Bien, aquí dentro, voy a copiar el nombre y dar clic en
Editar con elemento. En realidad, tenemos que actualizar
después de cambiar el nombre, luego hacer clic en Editar
con elemento, y está en los detalles de la doctora
Emma. Cargado aquí, se
cambiará el nombre y el rol y la
descripción del préstamo Bien, ahora la imagen. Comprobemos la imagen. Bien. Bien. Ahora haz clic en
Consilar haz clic en Publicar
y solo guarda y cierra, luego volvamos
y veamos el siguiente En pop up aquí vamos, da clic en Editar, y luego tenemos al doctor
Michel es actualización. Podemos editar con elemento
o cambiar el nombre primero y
descripción del préstamo rodante. Violonchelo, Michael. Creo que es Michael,
no Michel de todos modos. Vamos a agregar la imagen. Bien, bien. Haga clic en Publicar y
haga clic en Guardar y Cerrar. Regresa. Y la
última es Sara Sara Sara. Entonces agrega los nombres, actualízalo, luego haz clic en
Editar con elemento y luego
agreguemos esos detalles primero cambiemos nombre este préstamo descripción
luego la imagen. Si tenemos 20 proveedores, tenemos que actualizar
esto por 20 veces. Esta no es la mejor
manera de hacerlo,
pero tenemos que hacerlo porque los
campos personalizados avanzados no funcionan con loop carrusel en realidad
Loop Carsel etiquetas dinámicas, y campo personalizado avanzado, pop ups no funcionarán Junto con el elemento o en
realidad pop ups en loop prosel que tiene contenido
dinámico no
funcionará automáticamente, tenemos que agregarlos manualmente Bien. Ahora tenemos proveedores
pop ups para los proveedores. Entonces vayamos a la página principal. Ahora es el momento de copiar
la URL para copiar la URL, da clic en editar con Elementor y aquí solo
cambia a la doctora Lisa En realidad, ya no necesitamos
título aquí, busquemos,
veamos a nuestra proveedora Emma. Entonces aquí clic derecho, en realidad, tenemos que cambiar el título
a ma y agregar el título, después tenemos que agregar
el segundo, el Mich. Entonces otra vez, duplique éste
por dos veces, creo, dos veces o una vez. Entonces tenemos este
último proveedor, y aquí hay
un nombre como este. Bien, ahora hago clic en publicar y es el momento de obtener la URL. Entonces el primero, tenemos malik, copiar dirección de enlace, dirección
fasink aquí, y copiarlo así Después el Ema edita
el archivo de Emma. Aquí en el enlace emergente
en la URL así, haga clic en una URL y haga clic
en Guardar. Bien. Regresa. Y luego tenemos al doctor
Mike aquí está Michaels URL, copia la dirección del Enlace, y a tinta así, luego haz clic en Guardar Entonces tenemos la dirección de la doctora
Sara Oink, ve aquí y copia la URL, luego vuelve y vamos a la
última en link guardar, entonces no necesitamos esta sección, solo la
eliminaré y
haré clic en publicar y
visitemos el sitio web Entonces nuestros proveedores, veamos
el pop up. Tenemos un problema. Entonces cuando intentamos
abrir el pop up, no
se abre, y
sé la razón. Así que vamos a invertir plantilla de
tablero bajo plantilla, tenemos pop ups. Entonces aquí, vamos a hacer aparezca
esta Sara Thompson
y abramos todas ellas. Tenemos que abrirlos todos, y como alguna configuración, Bien, guardo opciones, podemos ver el estado de
visualización. En condición de visualización, simplemente lo
hacemos vacío, pero tenemos que agregar una
condición como esta, así tenemos que
incluir todo el sitio, o podemos agregarlo para
singular o singular, pero lo haré todo el sitio
y haga clic en Guardar cambios. Bien, entonces lo haré para el resto de los
pop ups así. Bien, ahora lo que tenemos que
hacer es consultar el sitio web. Así que vamos a comprobarlo
solicita la página, y ahora debería funcionar. Sí, ahora está funcionando. ¿Ves? Entonces este es un pequeño tema
que tenemos que resolver. Ahora se ve bien.
150. Haz que los pies de página sean funcionales: Bien, la página de inicio ya está lista, y en pie de página, necesitamos
hacer algunos cambios. Los botones o esos íconos de redes
sociales no están funcionando y también tenemos que
agregar más enlaces rápidos, y aquí tenemos que
agregar acción a esos números de
teléfono y correo electrónico. Hagámoslo. Para hacerlo, tenemos que editar el pie de página. Entonces, si pongo el cursor sobre
esta edición con elemento o aquí tenemos
encabezado principal y pie de página principal, así seleccionaré
pie de página principal. Todo bien. Entonces aquí tenemos que agregar enlace a este
ícono de redes sociales. Doy click aquí. Y aquí carga la lista de iconos de redes
sociales y actualmente no tenemos ningún perfil de redes sociales
para JB family Clinic, así que solo voy a agregar
URL del sitio web como aquí, Facebook, URL y hacer clic en Opción de enlace y asegurarme de que se abra en nueva
ventana y aquí Twitter Simplemente agregaré HTTP, scall
y slashlashx.com, y luego aquí tenemos
linkEDI solo
agregaré llamada HTTP
y slashlas linkedin.com.com luego aquí tenemos
linkEDI solo
agregaré llamada HTTP
y slashlas linkedin.com.com. En realidad, esto debería
ser punto, así. Y por último, tenemos Instagram. Instagram, aquí vamos. Entonces, bien. Ahora solo agregamos enlace
a redes sociales y en Quickink acabamos de
agregar el menú principal,
pero vamos a crear un menú diferente
para la comida y agreguemos el enlace Puta Entonces para hacer eso, haré
clic en esta pantalla de menú, y abrirá el
menú en nueva ventana. Y aquí voy a dar click
en crear un nuevo menú, y desde aquí,
agregaré como menú Puta. Después haga clic en Crear Meno y no establezca ninguna
ubicación de visualización ni nada. Entonces en páginas, haré clic en
ver EL y aquí necesitamos portada sobre contacto,
bloqueo, solicitud, cita. Vamos a agregar todos esos elementos y aquí tenemos que
cambiar el título. En etiqueta de navegación,
haré primero es casa, el segundo es sobre, y el tercero contacto, y aquí este será bloque y el tercero será
solicitar cita así. Ahora doy click en
Samno y aquí, voy a publicar estos cambios
actuales y tendré que actualizar esta
página para cargar este menú Vamos a refrescar la página. Bien. Vamos a dar click
en el menú para editarlo y aquí ahora tenemos opción de menú a tiempo
completo, seleccionarlo y el
menú completo aparecerá así y además
tenemos que agregar término y condición y política de
privacidad URL a esta sección semanal y lo
haré en futuros videos Ahora en el teléfono, como hicimos antes, si alguien hace clic en
este texto telefónico, debería abrir la moda de marcación
telefónica Para hacer eso primero
copio el número, y luego solo agrego tell fallen y agreguemos el
número así. Este es un número falso. Deberías agregar un número real en tu caso así. Bien. Simplemente agregue tell y llame
al primer texto en el enlace. Bien, ahora tenemos que ir
al correo electrónico, copiar el correo electrónico. Ahora en Google, solo
buscaré el código HDL de correo electrónico, y ningún enlace de correo electrónico El enlace de correo electrónico, el
código dM también será correo. Entonces solo lo copio y vengo aquí, lo
pego así, luego pasa el correo electrónico. Bien. Abrirlo Nueva ventana, ahora hago clic en publicarlo y
para dirección y horario de atención, es bueno, y ahora
tenemos que cambiar la sección de
copyright. En la
sección de copyright, aquí en adelante, voy a solo en ancha tag go link AHF HREF igual y
cerraré el paréntesis, luego en Hf voy a en nuestra página
web homepage URL así, pegarla, y luego al final, simplemente
cerraré
la etiqueta A como Bien, ahora solo se convierte en URS, así que cuando alguien haga clic aquí, redirigirá
a la Ahora haga clic en publicar. Y si quieres,
podemos agregar slash Design by our company website url two, pero en este caso, solo voy a
agregarlo así y bonito, el pie de página está listo para ver Entonces veamos aquí vamos. Entonces, cuando hagamos clic en esos enlaces, redireccionará a la cuenta de
redes sociales y Niza. Entonces pasemos
a la página siguiente.
151. Hacer que el sitio web sea responsivo: Ahora aquí tenemos
que arreglar la página A. Voy a dar click en editar con Elementor y ahora si
comprobamos el diseño aquí, tenemos un botón, así voy a dar click en Editar y
debería ir a solicitar
tu página de cita Voy a abrir la palabra press
dash pages, L pages aquí, copiar la URL en la solicitud
para afirmar la página de hoy y simplemente el ritmo de la URL y en la opción
enlazada adt como
abierta en Nueva Ventana,
y eso es todo, entonces lo que
tenemos que hacer es hacer que el
sitio web sea receptivo móvil Entonces comencemos desde arriba. Entonces aquí, se ve
bien en la versión tablet. La razón es que ya usamos la sección de página principal
para diseñar esto. Sin embargo, aquí dentro, podemos agregar
algo de espacio a este botón. Entonces seleccionemos el
botón y de antemano, voy a quitar este menos arriba. Sí. Cuando quite
el menos top, se ve bien, tal vez
agregue menos diez. Bien, ahora es mucho
mejor, y aquí está bien. Y aquí voy a dar click en esta
Cuadrícula y en Cuadrícula Hagamos esto como una columna en móvil
así y no móvil, una columna en la vista de tablet, y ahora se ve bien, derecho. Y en pie de página, todo está bien, pero tenemos algunas cosas
para editar en el pie de página. Entonces publiquemos
esto y vayamos a Mainfooter y
en el pie de página principal, haga clic en tablet y aquí, hagamos este centro de
alineación de URL A aquí, alinearlo al centro. Por alguna razón, este texto no
está alineado correctamente, pero creo que es mejor
hacer que comience la alineación. Y a partir de aquí,
cambiemos la tipografía. La tipografía del botón
debería ser un poco más pequeña en la versión
tablet, así que hagamos clic aquí para ir
a Global phone y en
Globalfon el tamaño del botón
vamos a agregarlo Guardar cambios. Bien, da clic aquí para volver, cierra esta ventana para guardar e ir ahora es mucho
mejor que antes. Y aquí, lo que
tenemos que hacer es quitar el relleno y el margen
y ahora queda bien. Tal vez agreguemos el relleno derecho como 30 por el relleno izquierdo como 30. Bien. Ahora se ve
bien en la tableta, y ahora volvamos a ir a la página acerca de la que tendremos que
ir y aquí sobre, luego dar clic en editar
con Elementor Entonces la
vista de la tableta se ve mejor. Entonces vayamos a la vista móvil. En vista móvil, el encabezado
está bien. Ve, vuelve. En vista móvil, el
encabezado se ve bien, y aquí tenemos el
texto del encabezado y el texto de fondo. Si queremos, podemos
agregar imagen diferente, imagen fondo
diferente porque esta imagen no la
muestra correctamente, pero creo que la voy a mantener así
porque es correctamente visible
y aquí se ve aquí, así que se ve bien. En pie de página, se ve bien. Entonces nada que editar
en la vista móvil, así que lo haré en realidad se publica. Entonces ahora pasemos a
la siguiente sección. Entonces primero, ve a la página de inicio, y luego ahora tenemos Bloquear página. En la página Bloquear, haga clic en
Editar con elemento luego veamos si necesitamos hacer
algún cambio hasta ahora tan bueno. Entonces ahora voy a ir a
tablet en tablet, necesitamos hacer algunos cambios. Así que da click aquí y en este relleno
derecho e izquierdo, deberíamos cambiarlo a
como 30 por 30 es demasiado grande. A lo mejor hagamos 20 por 20. Sí 20 por 20 se ve bien. Creo que debería ser
30 por 30, 30 por 30. Sí. Cuando lo hago 30 por 30, la alineación era correcta, y el resto está bien, así que ahora puedo comprobarlo
en el móvil. Así que vamos a comprobar la vista móvil, y en el móvil, se ve genial. No necesitamos nada que hacer. En realidad, podemos cambiar
el tamaño del relleno. El relleno será de 15 por 15. Sí el patrón es de 15 por 15. Bien. Ahora da clic en publicar, y después tenemos que editar
la publicación de un solo bloque. Vamos a uno de este
bloque así y tenemos que editar el diseño
de esta página de bloque. Entonces para hacer eso, aquí
tenemos elemento de single post o simplemente
podemos ir a plantillas o al
team builder dentro la plantilla y luego aquí
revisar el post único, y este es el post. Así que ahora haz clic en agregarlo. Todo bien. Ahora veamos la
vista previa de tablet en tablet. Tenemos que cambiar los dos. El encabezado se ve bien. Ahora cambia esto a 30 por 30, y el resto se ve bien. Y también aquí, tenemos que
hacer esto 30 por 30 así. En realidad, no
necesitamos hacer que sea de 30 por 30 en el móvil
en la tableta, y ahora se ve bien. Entonces ahora vamos al móvil. El móvil se verá así. Y aquí tenemos que
cambiar esto a 15 por 15. El contenedor debe ser ajustado los paddins 15, derecha, 15 izquierda Bien. Ahora, haga clic en publicar. Bien, ahora pasemos
a la página siguiente. La siguiente página es Evitar. En realidad, nuestro id no es una página. Es esta sección
y en la página principal, estamos listos para que sea
móvil responsive, y ahora tenemos que ir
al contacto. On Contacto, haz clic en Elemento
editado Bien, ahora vamos al diseño aquí. Tenemos todos los detalles, y ahora lo que podemos hacer es hacer clic en esta imagen
y en la imagen, podemos agregar URL personalizada
y agregar este número. Copia el número aquí. Esto será cola, código y así. Bien. Más. Entonces como dije antes, este
es un número de página. Entonces no pienses en eso. O cuando añades el número, agrégalo con código de país. En mi caso,
debería ser más 94. Y aquí, ahora tengo que ir a la tableta PortraTV y
vamos a cambiarlo El encabezado se ve bien, y aquí tenemos que
cambiar esta altura será 30 y la izquierda será 30. En realidad, no se ve bien. Lo que podemos hacer es que aquí podemos
hacer que la toma sea más pequeña. Entonces hagámoslo como 21. Sí, 25, 25 va a estar bien. Ahora se ve bien. Entonces en el mapa, haremos esto como 30 por 30. Bien. Ahora el retrato de
la tableta se ve bien. Ahora cambiemos al móvil. En móvil, aquí podemos
hacer esto de 15 por 15 y después aquí podemos agregar algo de espacio en así que
agreguemos margin top pass 30. Sí, necesitamos espacio
ahí así. Bien. Ahora, si queremos, podemos hacer que este botón se
centre. Vamos a hacer botón. Vamos al estilo de botón en
estilo de botón. Aquí tenemos centro de posición. Bien, ahora es mucho mejor, y aquí lo que podemos hacer es cambiar la derecha a
15 y la izquierda a 15. Bien. Se ve bien. Ahora hago clic en publicar
y luego lo que
tenemos que hacer es editar
esta apertura nueva sí, editar la solicitud a
una página de cita. Da clic en la página
y vamos a hacer
clic en Editar con elemento o bien. Todo se ve
bien y da click en Tablet port rea y
aquí Agod y aquí adentro, hagamos esto a la derecha
como 30, a la izquierda como 30 Bien, se ve bien. Entonces sí, sólo
tenemos una sección. Después en el móvil, hagamos a la derecha como 15 y la izquierda en como 15. Bien. Publica. Y en el móvil, el menú no está buscando. Bien. Así que vamos a hacer clic en el
pie de página y aquí en el móvil. No, vamos a convertirlo en el centro. Se enviará la alineación. Bien. Cuando lo hacemos
Centro de Alineación, eso se ve bien. Así que ahora publica.
Bien, publíquelo y
152. Configurar formulario de contacto: Hola a todos. Ahora es el momento de agregar acción a
este formulario de contacto. Entonces actualmente si
solo hacemos clic en enviar, realidad, tenemos que rellenar el formulario,
no va
a pasar nada porque no
configuramos esto, así que ahora hago clic en
editar con Elementor En elemento pro, tenemos la función de formulario de
contacto. Entonces, si esto era un
elemento de libre, tenemos que usar
diferentes plugins como formulario de
contacto siete o formulario W. Así que ahora hago clic en Editar formulario de
contacto para editar esto. Bien, aquí están los campos de formulario y
configuramos correctamente esos campos de formulario, y ahora tenemos la
acción después de submid Así que vamos uno por uno. Entonces el botón, ya
configuramos el botón, y luego tenemos esta
acción después de enviar. Entonces aquí tenemos paso
que podemos hacer. Entonces, si solo los quito a todos, vamos a todos. Entonces al agregar la acción, hago clic en este ícono más. En el icono más, tenemos la opción
llamada colectar envío. Si solo seleccionamos
este y cuando alguien agregue sus
datos a este formulario de contacto, podremos recopilar
esos envíos. Para recogerlos,
puedo ir al tablero. En elementor, aquí tenemos una sección de envíos y desde aquí podemos
ver el envío Actualmente tenemos uno de ellos. Parece que es un spam Así, podemos grabar o podemos recopilar un envío de esta
tabla y para más información, podemos ver de dónde viene. Y podemos dar click para
ver el contenido. Esto es solo un código falso. Esto es solo una
presentación del IPAM y te
voy a mostrar cómo
prevenir esos dos IPAM Ahora vino de este correo electrónico. Ahora voy a volver y
aquí tenemos más opciones. Tenemos correo electrónico y correo
electrónico a la opción. Si seleccionamos esta opción de correo electrónico, podemos obtener los detalles del formulario. Si alguien rellena
estos datos del formulario, podemos recibir un correo electrónico
a nuestro buzón de correo electrónico, y también en el correo electrónico, también
podemos enviar correo electrónico a la persona o visitante
que llenó este formulario. Entonces agreguemos esa información. En el envío por cobrar, también
podemos obtener la IP del usuario y el agente de usuario. Consulta aquí, podemos
ver aquí el usuario IV y el agente de usuario
es este dato. Vamos a completar todo el proceso de
correo electrónico y probarlo. Primero tenemos la sección de correo electrónico. Si seleccionamos aquí correo electrónico, podemos ver esta
sección de correo electrónico y aquí, simplemente
eliminaré esto y aquí podemos mencionar
los dos correos electrónicos, lo que significa que podemos
mencionar el correo electrónico que
necesitamos para recibir esos
correos electrónicos del sitio web, y aquí podemos agregar asunto. Por lo que voy a mantener
este mismo tema. Entonces es como nuevo mensaje de JB Family Clinic y
aquí agregamos los campos de Earl, lo que significa que l de
esos campos se
agregará al mensaje del correo electrónico Y luego aquí
podemos configurar desde el correo electrónico. Te mostraré cómo crear correos electrónicos con nuestra cuenta de correo electrónico. Desde el correo electrónico significa el
correo electrónico que envía
el correo electrónico a los visitantes o nuestro buzón de correo electrónico
aquí podemos agregar de nombre, así que solo mantén los
detalles predeterminados y puedes cambiar cualquiera de estos datos y aquí podemos agregar respuesta al correo electrónico. Actualmente no tenemos
ninguna respuesta al correo electrónico. A la respuesta al correo electrónico, seleccionaré el
campo de correo electrónico y si queremos, podemos agregar carbon
copy OCC y BCC No necesitamos ninguno de ellos. Y sobre los meta datos, también
podemos agregar esos detalles. Voy a añadir todos ellos. Ahora nuestro correo electrónico uno está completo. Entonces tenemos el correo electrónico dos. Correo electrónico dos hombres piensan
Los visitantes nos envían un correo electrónico. Como propietario del sitio web,
obtendremos ese correo electrónico. Así tendremos toda esa
información y podremos
enviar mensaje de respuesta automática cuando el visitante haga clic en
el botón enviar, automáticamente
podremos
responder el correo electrónico a su casilla de correo electrónico porque
ya tenemos aquí
su dirección de correo electrónico. Entonces aquí voy a cambiar el
tema y los mensajes. Usemos IA para generar. Bien, aquí estoy en JAG PT, así que venderé JAG
PT para generar correo electrónico de
respuesta a los visitantes
que llenen el contacto Veamos qué tipo de mensaje
generamos por JGbT. Es demasiado largo.
Digamos, que sea breve. Yo sólo voy a añadir este
tipo de mensaje, así que sólo voy a copiar el
mensaje y venir aquí, no aquí, ven aquí. De hecho voy a eliminar
este porque
no lo necesitamos y solo agregamos esto y eliminemos esto si es urgente parte y solo
agregamos este tipo de imagen. Y aquí dentro, podemos seleccionar el primer nombre porque si vamos a campos de formulario
en campos de formulario, realidad, tenemos
nombre completo en nombre completo. De antemano, podemos
ver el nombre del campo. Yo solo copio el nombre del campo así y luego pasado
creo que esto va a funcionar. Si esto no funciona,
veamos qué podemos hacer. Sólo pegarlo
así y bonito. Ahora tenemos este correo electrónico y aquí tenemos que agregar el
de correo electrónico y de nombre va a estar bien y
aquí la respuesta a debe ser el correo electrónico que ingresaron
los visitantes van al formulario. De antemano, podemos llenar
y agreguemos 32 como esto. Ahora tenemos ajuste de pasos. En realidad, no
tenemos ningún paso, y en opción adicional, estamos bien para ir, y ya con los diseños, y veamos los resultados. Ahora solo voy a publicar
esto y luego tenemos que crear el buzón de correo porque
si tratamos de enviar esto,
este correo nunca lo hará
o el correo electrónico
no irá a nuestro
buzón de correo electrónico o este correo electrónico uno o correo electrónico 2% porque no
teníamos de
correo electrónico y dos correos electrónicos. Hagámoslo. Para hacerlo, iré a mi cuenta de chip de
nombre. Debes ir al proveedor de
hosting y acceder al panel C. Así que aquí solo hago clic en aquí
y da clic en Ir al panel C. Bien, redirijo al panel
C y al panel C, así que si no usaste jeep,
no importa el panel C es el mismo en todos los proveedores de HoStem Puede que tenga algunos cambios, pero es bastante similar. Y si no tienes cuenta de
correo electrónico si tu proveedor de servicios
no envía una cuenta de correo electrónico, tienes que contactarlos
y obtenerla de ellos. En chip de nombre,
ya estamos recibiendo los correos electrónicos. Si me desplazo hacia abajo, podemos aquí
cuenta de correo electrónico o
simplemente podemos buscar aquí
correo electrónico. Aquí vamos. Desde aquí, sólo voy a
hacer clic en la cuenta de correo electrónico. Bien, aquí, tengo
mis viejos correos electrónicos. Desde aquí, solo hago clic
en Cre y aquí
solo selecciono la
URL de nuestro sitio web y para nombre de usuario, agregaré en cuatro y
vamos a generar una contraseña Voy a generar una contraseña
y volveremos. Todo bien. Ahora hago clic en Concrear el
correo electrónico será info en diseño de sitio web
personalizado
punto para que puedas agregar cualquier nombre o cualquier nombre
aquí como ejemplo, si eres Joan, puedes agregar
Joan en la URL de tu sitio web, y ahora hago clic en C Crear Bien, necesitamos otro correo
para agregar como dos correos electrónicos. De correo electrónico será info, y vamos a crear dos email
como Vamos a seleccionar el dominio, y voy a añadir mi nombre. Bien. Después configuraré
la contraseña así, después hago clic en Crear. Ahora tenemos esos dos correos electrónicos. Vamos a establecer esa información. Simplemente copie el correo electrónico y vayamos al formulario de contacto y en el correo electrónico, agregaré de correos electrónicos esta aplicación de información
sitio web personalizado design.us, y luego copiaré este correo electrónico, lo
copiaré y agregaré
esto como dos correos electrónicos Entonces como correo electrónico a, agregaré al correo electrónico como la dirección de correo electrónico
que el usuario ingrese aquí. Ir por ps y on
compila en correo electrónico, anticipo, copiar el déficit, correo electrónico uno es bueno, correo electrónico dos serán dos, dos es la persona o
destinatario o la persona que llenó este formulario y
el formulario será info Vamos a copiar el correo de información. Todavía aquí, y la
respuesta a será, antes
me equivoqué. La respuesta a será info
en diseño de sitios web personalizados. Los dos deberían ser los dos correos electrónicos deberían ser el correo electrónico que el usuario comió ahora cíclico publicar y todavía no
configuramos SMTP, pero vamos a probar si este correo electrónico pasa por o no y con vista previa, y ahora voy a rellenar
este formulario de contacto Bien, aquí vamos. Yo solo agrego la información, y aquí no
agregué ningún documento, así que ahora hago clic en enviar, y veamos qué pasará. Bien. Se dice que tu
envío fue exitoso, y veamos si
realmente recibimos el correo electrónico. Para revisar el correo, voy a ir aquí y cual es
el correo electrónico que se configura como el y los dos es una red vamos aquí y
haga clic en jet email. Y aquí tenemos el
software de webmail solo haz clic en Abrir. Veamos si este correo electrónico
pasa o no. Sí, en realidad pasó, pero no me lo esperaba. Entonces cuando pase, lo
veremos así. Sí, en realidad es pasar. Esa es una señal causal. obstante, si no recibiste el correo electrónico a tu
casilla de correo electrónico, cuando pruebes esto, te
mostraré cómo solucionarlo y te voy a mostrar
cómo configurar SMTP aquí tenemos estas
comillas en el encabezado así que vamos aquí los temas deben eliminar
esta cotización se sabe No lo necesitamos. Y
veamos también en el correo electrónico. También está en el correo electrónico. En realidad, se debe cambiar el correo electrónico al
asunto. El sujeto debería recibir
mensaje vamos aquí,
solo pruébalo así, y espero que lo entiendas. Si no entiendes
nada de esta parte,
solo avísame. Voy a crear diferentes videos. Bien. Ahora veamos nuestro correo
probado como usuario, agrego este GMs veamos si recibimos el
correo electrónico a G Bien, aquí está mi casilla de correo electrónico,
y se recibe Entonces aquí está nuestro mensaje. Hola Gian Gian significa, el nombre completo al que entro, gracias por contactarme. Y aquí tenemos el correo electrónico. En realidad, el correo electrónico
está en una sola línea. Tenemos que mejorarlo. Para hacerlo mejor,
creo que podemos agregar STMA Intentemos agregar STM la BR es romper
VR y publicar Así que los correos electrónicos están funcionando
perfectamente aquí. Como dije, esa es una buena señal. obstante, si no recibes
el correo electrónico en la siguiente lección, te
mostraré cómo solucionarlo. Antes de hacer eso, vayamos a presentación y hagamos clic
en el envío, y en el envío aquí, tenemos el correo electrónico. Podemos hacer clic aquí
para ver y verificar los detalles del correo electrónico
como este y agradable.
153. Solucionar el problema de envío del correo electrónico | configurar el complemento SMTP: Hola a todos. Si no estás recibiendo correos electrónicos de
tu sitio web de WordPress, aquí te explicamos cómo solucionarlo. Entonces, antes que nada, vayamos a los plugins y hagamos clic
en en Nuevo plugin. Y aquí, busquemos WP
mail SMTP. No hay correo principal. Correo. Todo bien.
Aquí está el plugin y es compatible con
nuestra versión de Wordpress. Haga clic en Instalar ahora. Todo bien. Ahora, da clic en Activar. Simplemente voy a hacer clic en
volver al tablero de instrumentos. Bien. Ahora aquí
tenemos el escenario. Además, podemos probar si nuestro correo electrónico
funciona correctamente o no. Si vamos a herramientas sobre herramientas, aquí tenemos prueba de correo electrónico, y aquí podemos agregar nuestra dirección de correo electrónico y
hacer clic en enviar correo electrónico, entonces se dice que hay
un emisor detectado Sin embargo, este
correo electrónico del sitio funciona antes. Veamos si recibimos
correo electrónico esta vez. Bien, acabo de iniciar sesión en mi cuenta de Gmail y no
estoy viendo el correo electrónico lo que significa que este plugin
rompe la funcionalidad
de correo electrónico de mi sitio web. Vamos a arreglarlo. Primero iré a establecer
en ambientación aquí,
tendré que configurar
el correo electrónico del baile de graduación. Nuestro correo de baile de graduación será este copiarlo y
el ritmo del Primmil aquí El correo de baile significa correo electrónico que enviamos correos electrónicos
desde este sitio web y luego aquí forzar el correo electrónico de baile hacerlo y aquí
podemos establecer el nombre. Conservaré el nombre por defecto y conservaré los datos predeterminados. Después en mailer Iwa el SMTP. Bien, aquí tenemos que
agregar el host SMTP. Entonces, consigamos esa información. Para obtener esa información, solo
puedo ir al panel C, y aquí está nuestro correo electrónico, y simplemente hago clic en
Conectar Dispositivos. Bien, aquí tenemos
toda la información. Primero, necesitamos host como host, usaré esta dirección de correo electrónico. Vayamos aquí y agreguemos host como
nuestra dirección de correo electrónico actual. Entonces para el cifrado, seleccione SSL y aquí el puerto
SMTP es 465 Bien, y el host SMTP debería
ser este servidor saliente. Cópielo y pegarlo aquí, no la dirección de correo electrónico y nombre de usuario
SMTP
serán la dirección de correo electrónico. El uso y aquí la contraseña
a la cuenta de correo electrónico. ¿Recordaste que cuando
creamos cuenta de correo electrónico, simplemente
creamos la contraseña
para ello a esa contraseña, paso la contraseña, bien, autenticación hacer on, luego
hago clic en Savesetting Si usas Google Workspace
u otro proveedor de correo electrónico, simplemente selecciona el correo que usas y configura los detalles En este caso, estamos
usando SMTP del servidor, así que configuré esa información Bien, vamos a las herramientas, y aquí tenemos algún
problema. Refrescarlo. Bien, aquí en el enviar al correo electrónico y haga clic en Enviar Correo y
veamos qué pasará. Por alguna razón, el
sitio web no se está cargando, pero esperemos que esto funcione. Bien, dice éxito y
aquí hay mensaje de advertencia. Y por ahora, vamos a ignorarlo. Entonces ahora aquí tenemos el correo electrónico. Entonces, si sigues el
mismo paso que utilizo, podrás
solucionar con éxito el problema del correo electrónico que no envía. Así que ahora probemos nuestro correo electrónico
o probemos nuestro formulario de contacto. Simplemente haga clic en el
formulario de contacto y aquí, solo vaya al formulario de contacto y agreguemos esa información. Y esta vez,
subamos el archivo. Haz clic en ConchoSFLE y
subamos esta imagen y luego haz clic en C enviar y veamos qué tipo de correo electrónico tenemos Bien, digamos que la sumisión
fue exitosa. Así que vayamos a nuestro
correo electrónico y lo actualicemos. Aquí tenemos el correo electrónico y aquí también tenemos el archivo adjunto. Aquí tenemos información. Entonces es bastante bueno los
correos electrónicos están funcionando, y aquí debería recibirse. Recibimos tu mensaje de correo electrónico. Bien, bien. A on elemento o envíos, tendremos registro
de este correo electrónico. Aquí está ese correo electrónico, tan agradable. Ahora tenemos que pasar a
la solicitud de cita, solicitar su formulario de cita. Solicito su cita, aquí tenemos el formulario. Tenemos que hacer que
este formulario funcione. Vamos a hacer clic en Editar con Eli Mondo para
editarlo y que funcione Da click en este ícono de lápiz para
editar el formulario y ya
tenemos los campos del formulario y
el botón está funcionando. Ahora tenemos que ir a
acción después de enviar y aquí tendremos recoger
envío y correo electrónico. Agreguemos Email también. Luego en el envío por cobrar, agreguemos UserIB y agente de usuario En el correo electrónico, vamos a configurar los mismos detalles que
configuramos aquí. El correo electrónico estará aquí
serán los dos correos aquí. Aquí estarán los dos correos electrónicos. Entonces copiemos
este texto y pongamos el asunto como solicitud
y cita. Entonces veremos los campos, y ahora tenemos que
configurar el from email. Aquí vamos del correo electrónico, pegamos del correo electrónico aquí, luego del nombre será esto y la respuesta será campo de correo electrónico. Sin copia al carbón o sin CC. Entonces aquí recogeremos los
metadatos y ahora en el correo electrónico, los dos serán dirección de correo electrónico. Vamos a los campos y aquí, vamos a avanzar y copiar
el código corto de correo electrónico. Entonces como te dije antes, cuando alguien en su correo electrónico, recibirá el
mensaje de confirmación de la página web. Agrega esto como desde el correo electrónico
y para el nombre del baile, copia este avance, luego
pasarlo así, entonces la respuesta
será este correo electrónico. Copiarlo responder a, y aquí tenemos que
añadir el mensaje. Entonces aquí, solo agreguemos
este mensaje así. Puedes mejorar esos
mensajes. Yo solo lo creo así, agrego el BR y elimino esta parte. No necesitamos este, agregamos de nuevo
el BR para romper las líneas, y aquí tenemos que cambiar
de campo a este campo. Y primero así, después bien. Bien, bien. publicar y veamos
que es trabajo o no. Piensa si queremos cambiar
el mensaje de éxito, solo
podemos ir a Opciones
adicionales y
hacer clic en mensaje personalizado en. Y aquí tenemos los mensajes. Entonces aquí podemos cambiar. Vamos a dar
éxito Correo enviar mensaje cuando intentes
solicitar cita. Agreguemos esto su
solicitud de cita ha sido enviada. Así que sosténgalo aquí y haga clic en publicar y
luego probemos esto. Entonces desde aquí, hago clic en solicitar
su botón de cita, y aquí tenemos el formulario. Entonces agreguemos esos detalles. Bien, aquí lleno
la información. Ahora hago clic en el botón de solicitar
cita, y veamos qué va a pasar. Bien, aquí vamos su solicitud de cita
ha sido enviada mensaje. Entonces al momento del envío, si actualizamos
aquí tenemos el correo electrónico, así que si queremos
filtrarlo de formularios, solo
podemos seleccionar aquí, solicitar cita
y hacer clic en él filtrará automáticamente los correos electrónicos del formulario de solicitud de
cita. Entonces si queremos exportar, solo
podemos hacer clic en Exportar
filtro a CHV y si, esto es bastante genial y
veamos nuestras direcciones de correo electrónico Aquí tenemos el correo electrónico. En realidad, este es el correo electrónico. Por alguna razón este
correo electrónico no se ve bien. Entonces veamos e intentemos arreglarlo. También tenemos que cambiar el tema aquí así que vamos a
cambiar el tema a solicitud de
cita gchanges V family clinic
request like then here we already
at the BR break tag Por qué no está funcionando,
debería funcionar. De todas formas, da clic en publicar y
si vemos los detalles aquí, recibimos el correo electrónico con
los detalles como este y también obtenemos los
meta detalles. Ahora nuestros correos están funcionando
bien y si queremos, podemos simplemente escribir de nuevo, pero por ahora, no
voy a escribir de nuevo. Si vamos al estilo
y a los mensajes, podemos cambiar los
colores del mensaje en mensaje de éxito, hagamos de este color
verde así, y podemos hacer cosas
como esta, también. Al igual que este mensaje de error
estará en rojo así, así que da clic en publicar. Bien, te veo
en la siguiente lección.
154. Cómo configurar un complemento SEO matemático para clasificar la posición: Hola a todos. Ahora
tenemos que hacer el SEO
técnico y en la página. Para en la página SCO, podemos
configurarlo fácilmente siguiendo el
paso de configuración Rank Math. Entonces hagámoslo. Primero, voy a plugins y hago
clic en Nuevo o agrego Plugin. Y aquí tenemos siete
plugin para actualizar. Ya te muestro cómo actualizar el sitio web sin
tener ningún problema. Y ahora
buscaré el plug in. Entonces tendencia de búsqueda. Presentador de matemáticas. Bien, aquí tenemos el SEO
Rank Math y es compatible con
nuestra versión de WordPress, así que hago clic en Instalar ahora
y en Activar. Bien, como primer paso, tengo que conectar esta cuenta de Rank Math
con mi cuenta de Gmail. O cuentas de Google. Aquí, voy a hacer clic en
Conectar tu cuenta, y aquí tenemos
opción de iniciar sesión, así que simplemente hago clic en
esta opción de Google. En este caso, tengo una cuenta, pero si no tienes una
cuenta cuenta de Rang Math, simplemente
puedes hacer clic en
Regístrate ahora y crear una cuenta gratuita con Google
Facebook gowordfx.com, o puedes usar
tu dirección de correo electrónico que utilices obtener correos electrónicos
de este sitio En mi caso, ya
tengo cuenta, así que iniciaré sesión en ella, haga clic en Google para
registrarme con Gmail. Ahora sigo el paso, solo haz clic en continuar
aquí haz clic en activo ahora. El plugin está configurado y ahora
tenemos que completar
este asistente de conjunto. Aquí, seleccionaré fácil porque el SEO es un tema profundo
diferente. Entonces, cuando seleccionemos
esta opción fácil como los diseñadores web como nosotros, nos ayudará a usar los conocimientos
que ya tenemos, y el resto de cosas se
configurarán por el plugin. Entonces hago clic en la configuración está bien, aquí tengo que agregar los detalles. En este caso, mi sitio web
es un sitio de pequeñas empresas, por lo que el tipo de negocio es. Entonces aquí dentro, tengo que
seleccionar el tipo de negocio. En este caso,
debería ser salud. Entonces buscaré
salud real aquí, tenemos búsqueda hospitalaria salud. No, tenemos hospital. Sí, tenemos hospital, así que selecciona el tipo de negocio, y aquí está el nombre del sitio web, y luego tenemos el logotipo de Do. Entonces aquí el en tamaño
es de 100 bien por 100 bien y esta imagen
debe ser cuadrada Entonces mi imagen actual no
es cuadrada, así que hagamos imagen cuadrada Para ello, solo voy a nuestra Figma y doy click
en nuestro proyecto Y si revisamos
la hoja de pegatinas, podemos ver nuestro logo aquí. Vamos a crear un nuevo marco y
vamos a crearlo así. Entonces hagamos esto
cinco bien por 552 bien. Ahora está al cuadrado y ahora
voy a añadir el logo. En Bibliotecas de Activos,
tendré el logo,
seleccionaré el logo. Selecciona insertar instancia
y ponerla aquí. Hagámoslo más grande. Aquí sólo voy a
separar instancia para editar este logo porque
quiero aumentar el tamaño Esto es logo de texto, lo que significa que he aumentado
el tamaño de la tipografía Si usas la imagen como tu logo, solo
puedes aumentarla. En este caso, lo haré entonces hagamos esta parte
familiar más grande, hazla como 100 es demasiado. Creó el logotipo, y ahora
vamos a cambiarle el nombre a un logotipo. Google así y ahora
seleccionarlo y dar clic en Exportar, voy a hacer este logo como JPG y dar clic en el
botón Exportar, Exportar. Entonces voy a tinypng.com y hagamos que este logo
minimice así,
luego haga clic en este botón JPG descárguelo y ahora
vayamos aquí y eliminemos
este y haga clic
en agregar Y aquí,
solo agreguemos este logo, y agreguemos
texto ALT como este, luego haga clic en usar este archivo, y ahora tenemos
logo como este y ahora fallamos en
compartir imagen social. Por lo que esta imagen aparecerá
cuando alguien comparta URL de
nuestro sitio web en
redes sociales como Facebook, LinkedIn Twitter
o Twitter Minix o cualquier otra plataforma de Facebook, el tamaño de la imagen debe
ser de 1,200 y 630 Así que vamos a crear otro marco. Hagamos así
y pongámoslo aquí. Vamos a terminarlo como social sí, social social y va a ser 1,200 y la altura será 630 así y
tenemos que agregar alguna imagen. En este caso, solo voy a
agregar esta sección de héroe, seleccionar la sección de héroe, copiarla y aquí está nuestro marco. Aquí solo pegarlo así y ahora voy a disminuir
su tamaño así. Entonces agreguemos también este texto. Copia este texto y este
texto y pegarlo, seleccionarlo y pegarlo aquí, después hagámoslo así. Tenemos que quitar esta. Hagamos esto 90. Entonces otra vez, voy a copiar este globo de aquí
y ponerlo así, entonces el color del texto debería
cambiar a color blanco. Bien. A lo mejor vamos a
disminuir este tamaño a 50, aquí, como 36. Bien. En realidad, podemos simplemente
copiar el encabezado, esta parte, simplemente copiarlo y volver aquí, quitar este, luego
pegarlo así. Entonces voy a quitar estas
dos partes y aquí, hagamos este
tamaño así y pongámoslo así.
Esto es mucho mejor. Ahora selecciono este marco
y voy a exportar, configurarlo como JPG, exportando y en minúsculo PNG, podemos reducir el tamaño de cinco. Bien. Descárgalo. Entonces si tienes otro
tipo de imagen, también
puedes agregarla, pero en este caso, ya
tenemos el archivo Figma Por eso podemos simplemente crear nuestro diseño usando el archivo Figma Y agreguemos
texto ALT como este, haga clic en usar este archivo. Bien, ahora da clic en
Guardar y continuar. Bien, ahora tenemos que conectarnos
con nuestra cuenta de Google. Entonces futuras lecciones,
crearemos el
perfil de Google Analytics y Google Search Console y lo configuraremos con nuestro sitio web para obtener una mejor visibilidad en el ranking de búsqueda de
Google. Entonces tenemos que seleccionar la cuenta de
Gmail que
vamos a utilizar para
el servicio de Google que vamos a utilizar. Por lo que haré clic en
Conectar Servicios de Google, y desde aquí, solo
seleccionaré cuenta de
Gmail que voy
a usar para el sitio web. Haga clic en continuar
y haga clic en Seleccionar, luego haga clic en Continuar. Bien, actualmente, no tenemos
ninguna de esas informaciones, y en el futuro o en las
próximas lecciones, las crearemos. Por ahora, da clic en
Guardar y continuar. Después haga clic en regresar
al tablero. Bien, solo configuramos el Rank Math SO
con nuestro sitio web. Entonces aquí estamos en Rank
Math SO y título y meta. Desde aquí, podemos ver cómo se
verá
nuestro sitio web en Google. Y aquí tenemos pestañas. Entonces con esas pestañas, podemos agregar más detalles. Entonces, como ejemplo, si quieres agregar
tu dirección de correo electrónico, simplemente
puedes agregar dirección de correo electrónico, y si quieres agregar tu dirección o tu dirección
comercial, puedes agregarla aquí, después puedes agregar
horarios de atención, números de teléfono, y en aquí, puedes seleccionar
la página A buscar A. Luego en la página de contacto
buscar contacto. Esta es la página que ya
creamos, y aquí no voy a agregar horas de
apertura si
quieres, puedes agregarla. Tipo de negocio que ya
seleccionamos para la dirección, no
voy a agregar la dirección y puedes crear el perfil de Google
My Business, y de esa manera, podrás agregar toda
esa información en tu cuenta de Google My Business y podrás configurar este sitio web o agregar
este sitio web a tu perfil de Google
My Business. Entonces vayamos a ho Helmetta. Aquí, puedes agregar
tu página de Facebook, y si tienes otros
perfiles como X, LinkEDI o cualquier otro simplemente
agrégalos en perfil adicional Después
de hacer todos esos cambios, puedes hacer clic en Guardar cambios, y aquí tenemos más cosas. Pero si no
sabes mucho sobre SEO, solo manténgalos como predeterminados. Y en esta sección de página principal, tenemos que editar nuestra
página principal para que inicio de
nuestro sitio web aparezca en Google cuando alguien
busque como JV Family Clinic Entonces para hacer eso, da clic en Editar página y el
nombre de la página que verá aquí, simplemente haga clic en y
cuando vaya aquí, verá este tipo de lugar. Este es el editor del blog, y aquí verás este ícono de matemáticas de rango
solo haz clic en él. Al hacer clic en él, verá la Vista previa de Google. Da click en Editar Snip y
aquí podrás añadir título. Entonces agreguemos el título. Voy a añadir JB familia Clini. Hagámoslo entonces
en la descripción, tenemos que añadir la descripción. Entonces cuando creas esos
detalles como ejemplo, si alguien dice JV
Family Clinic en Google, quiero ver este sitio web Por eso incluyo
este texto en el título. También tengo que incluir este
texto en la descripción. Entonces en este caso, este texto es la palabra clave focus. Entonces a la descripción,
agregaré este tipo de texto y ahora cuando alguien
busque en Google, el sitio web se mostrará así y para obtenerlo en la primera página de
Google, tardará unos días y
si tienes una palabra clave altamente
competitiva,
es si tienes una palabra clave altamente
competitiva, posible
que necesites hacer
más cosas de SEO. En esta palabra clave de enfoque, puedes agregar la
palabra clave focus en este caso, solo agrego JB fami
Clinic y aquí podemos ver la información
que necesitamos hacer Ahora Earl Good, así que ahora hago clic
en ST guardar esta vista previa. Ahora vuelvo de nuevo al
tablero y en las páginas de ER, podemos agregar esos
detalles a las páginas de Earl Da click en Editar y lo
abriré en Nueva Ventana. Entonces aquí, da clic en
este tapete de rango y agrega el teclado de enfoque
agreguemos sobre JV family Clinic y en
Edit is pipped
solo podemos agregar sobre JV Family
Clinic y solo copiar,
copiar y agregar así Entonces aquí, también podemos
agregar descripción. Siempre intenta agregar esos textos de previsualización
manual y de esa manera, tendrás un gran resultado. No obstante, si tienes
muchas páginas, puedes simplemente configurar
la vista previa
que debería aparecer
en cada página. Para ello, ve a Frank
Map and Title y meta. Aquí en las páginas, puedes establecer la forma en
que debería aparecer. En este caso, no necesito este sit ename así que simplemente lo
voy a quitar. Yo título de página y separador, entonces si hago clic aquí, puedo ver más cosas
que podemos agregar. Entonces en este caso, no tenemos. Entonces en este caso, solo agregaré título como este y
en descripción, puedes agregar y dar clic en
Concebir cambios Por lo que este formato se aplicará
para páginas en el sitio web, y en post, podemos hacer lo mismo. Bien. En la siguiente lección, vamos a configurar
el mapa del sitio y
configurar Google Search Console
y Google Analytics.
155. Configurar la consola de búsqueda y GA4: Arriba Google Search Console. Entonces, cuando configuramos nuestro sitio web con
Google Search Console, podemos monitorear y mantener presencia del
sitio web
en la búsqueda de Google. Así podemos entender o podemos
hacernos una idea sobre el
rendimiento de las palabras clave como qué palabras clave están
clasificadas en Google y muchas visitas que obtenemos de la Búsqueda de Google
y cosas así. Como podemos enviar nuestro mapa del sitio web a
Google Search Console, y esto ayudará a clasificar nuestro
sitio web más rápido en Google. Entonces comencemos. Primero, vamos a Rank Map SEO y general S sobre configuración
general, aquí tenemos herramientas para webmaster y
aquí primero tenemos
Google Search Console, así que simplemente hago clic en la página de verificación de Search
Console. Cuando lo hago, puedo ver paso que debo seguir para configurar la Consola de Búsqueda de
Google. Hagamos paso a paso primero. Tenemos que ir a la página web de Google
Search Console. Entonces verás
este tipo de ventana. Aquí solo haz clic en
Empezar ahora y aquí tienes que agregar detalle de
cuenta de correo electrónico. Lo agregaré y nos
veremos en el siguiente paso. Cuando hagas eso,
verás este tipo de ventana. Entonces si ya tienes sitio web, se puede mostrar aquí. Aquí, tenemos este sitio web
personalizado design.us. La razón es que configuramos esta cuenta de correo electrónico o
creamos el recuento de rangos en nuestra cuenta de Gmail y luego configuramos
automáticamente la Consola de Búsqueda de
Google. Entonces, si vas a Analytic, puedes verlo aquí Bien. Ahora, si no
ve este sitio web, simplemente haga clic en en la propiedad y
agregue la URL de su sitio web aquí. Entonces solo agrego la URL de mi
sitio web así, luego hago clic en Continuar. Y recibí este mensaje
de verificación. Y si no configuraste el rank math SO y lo
configuraste cuenta GML, tendrás que agregar
esto agregar una etiqueta TML,
copiar esa etiqueta DML
y ponerla aquí El aspecto de SdmlTag
será así. Ahora hago clic en ir a la
propiedad y desde aquí, primero
puedo agregar Mapa del sitio. Haga clic en mapa del sitio y aquí
tenemos que agregar el mapa del sitio. Vamos a clasificar las matemáticas
y la configuración del mapa del sitio. En sitemaps, podemos
ajustar la información. Entonces aquí lo voy a mantener
como predeterminado a la fuerza, hacerlo por defecto y las páginas lo
hacen por defecto y elementos
flotantes, no
necesitamos clasificar
esos elementos en Google,
así que voy a envejecer eso porque esos son parte del diseño
del sitio web, no una página completa o post. Entonces, si recuerdas las opiniones de los
clientes que creamos usando ruedas
personalizadas avanzadas y no
necesitamos clasificarlas
a nuestros proveedores
no será necesario clasificarlas porque esos artículos son parte
de una página completa. Ejemplo, los nuestros proveedores
se cargan en la página de inicio, cuando se clasifique la página de inicio,
automáticamente se clasificará debajo de la página principal. Ahora hago clic en Guardar cambios, no
necesitamos categorías,
solo eliminamos categorías. Pero si te enfocas en el blog
y tienes categorías, no desates esos dos elementos Haga clic en guardar sí y
luego vaya a General. En general, aquí
tenemos la URL del mapa del sitio. Entonces, si hago clic en,
se verá así. Entonces lo que tenemos que hacer es
simplemente copiar esta parte de EML. Aquí tenemos la URL y barra diagonal de nuestro
sitio web. Copio el texto después de la barra y voy aquí
y lo pego así Después haga clic en enviar. Bien, el mapa del sitio se agrega
con éxito y
tiene información. Entonces ahora si voy a por aquí, veo un problema, así que simplemente haz clic en Reportar
y ver el número. Bien, digamos que Google ha detectado contenido
dañino en algunas
de las páginas de tu sitio. Este es un sitio web de demostración, y si ves este
tipo de mensaje de error, solo tienes que arreglarlo y
hacer clic en solicitar revisión. En este caso, no
voy a hacer nada de eso. Y con el tiempo, voy a ver los
datos de rendimiento e indexación en esta consola de búsqueda Bien. Ahora lo que tenemos que hacer
es configurar Google Analytics. Google Analytics proporcionará información sobre cómo los usuarios
interactúan con nuestro sitio web. Entonces esto es realmente importante. De esta manera, podemos
ver qué están
haciendo los usuarios en nuestro sitio web
y cuánto tiempo
pasarán en nuestro sitio web
y qué países de los usuarios vienen de
nuestro a nuestro sitio web. Bien, ahora vamos a configurarlo. Entonces en analítica aquí
tenemos parte de Analytics, pero aquí no
tenemos una propiedad. Entonces hagamos esto desde cero. Si hago clic en click aquí para KH, podemos ver más información
sobre el Google Analytics. No obstante, busquemos en Google. Google Analytics para iniciar sesión y hacer clic en este enlace de
Google Analytics. Bien, desde aquí,
selecciono la cuenta GML. Entonces aquí ya
tengo cuenta de Analytics, pero vamos a crear
una desde cero. Para crear, haga clic en este botón Crear
y haga clic en cuenta. Aquí, sólo voy a
añadir un nombre de usuario. Simplemente agregaré mis analíticas. Entonces aquí, da clic en Siguiente, y aquí tenemos que
agregar el nombre de la propiedad. Para el nombre de la propiedad,
agregaré JB Family Clinic, el nombre del sitio web JB
Family Clinic, así Entonces Estados Unidos, si
eres de un país diferente, solo selecciónalo, yo
seleccionaré los Estados Unidos y así
podrás cambiar el Estado. Simplemente mantendré
el default activado y moneda será
dólares estadounidenses, haga clic en Siguiente. Aquí podemos seleccionar la categoría
de industria. Buscaré como salud. No, tengo que
buscarlo uno por uno. Veamos aquí tenemos
salud y en Google, la categoría salud
tiene restricciones de carga, así que continuemos y
agregaré tamaño de negocio como pequeño, uno a diez, y click s y puedo seleccionar objetivos de
negocio. En este caso, selecciono de manera ver participación y retención
del usuario y selecciono entender el tráfico de la
aplicación del sitio web y hago clic en. Crea aquí, doy clic
en Aceptar y doy clic en esta casilla de verificación y
doy clic en Acepto. Bien. Aquí tengo que
elegir la plataforma en mi guess web y aquí
tenemos que agregar el sitio web,
Lou, URL, solo voy a agregar diseño de sitio web
personalizado. US y seleccione HTTPS. Aquí tenemos que añadir
el nombre del sitio web. Lo agregaré como JB Family
Clinic y marcaré esto, luego haga clic en,
cree y continúe Bien, luego haga clic en Siguiente. Y aquí, da clic en
Instalar manualmente. En realidad, podemos usar el plugin Rank Math
para instalar esto. Reprimiré esta
página en Analytics, veamos en Analytics, clic en
reconectar y
seleccionaré la dirección de correo electrónico, haga clic en
Continuar, continuar Bien. Ahora la
consola de búsqueda está bien, y aquí tenemos la cuenta My Analytics,
y en la propiedad,
tenemos propiedad de JB family
Clinic y datastrem
será JB Aquí voy a hacer clic en
Instalar código de Analytics. Yo digo que habilite esta
opción solo si
no está utilizando ningún otro plug in streams para instalar el código de
Google Analytics, así que no lo estoy usando y ahora bien, da clic en Guardar cambios. Ahora Search Console se muestra en verde y Analytic Analytics se muestra en verde
y está conectada Ahora bien, si voy a Analytics y solo transmito esto y
veamos, simplemente haga clic aquí. Sólo voy a refrescarme. Ahora aquí
seleccionaré mi Analytics. ABM. Ahora demuestra
que conectó. Ahora visitemos nuestro sitio web. Vamos a solo que acabo de abrir una nueva ventana de incógnito y solo
diseño web personalizado nuevas formas y aquí visitamos nuestro
sitio web y
veamos este deberíamos
tener usuarios activos como uno, pero no está actualizado Vamos a darle por unos minutos. Bien, ahora muestra un usuario activo y es de
Sri Lanka así que ese soy yo. Bien. Todo bien. Si no lo ves, también dice que puede tardar hasta 24 horas
en aparecer en tu cuenta de Analytics, y no tomará tanto tiempo,
y verás
que este tipo
de usuarios activos cuentan. Bien, ahora configuramos tanto Search Console
como Google Analytics.
156. Utilizar el analizador SEO de página: Rank Math SO tiene una
característica genial llamada SCO Analyzer. Usemos esta función para
analizar el SEO de nuestro sitio web. Entonces está en Rang
Matso& SO Analyzer. Verás este
tipo de diseño aquí, simplemente haz clic en Iniciar SO
Analyzer y
escaneará todo nuestro sitio web y nos
dará el
resultado actual de SCO. Bien, actualmente, su
SCO ISCO es de 7,400. Entonces, si revisamos aquí, podemos ver los temas. Y primero de alta prioridad uno
es actualizar automáticamente. Así que vamos a habilitar la
actualización automática de este plugin. Y ahora aquí tenemos
muchos problemas, y arreglemos uno por
uno para arreglar el problema de El. Entonces aquí tenemos advertencia. Es un encabezado H uno. No se encontró ninguna etiqueta H one
en su página de inicio. Entonces agreguemos la etiqueta H one para hacer que clicon visite el
sitio desde aquí, CliconeEdit con
elemento o aquí, si revisamos este texto,
este es el
texto principal de nuestro sitio web y aquí hay una etiqueta HTML Hagámoslo H uno
y haga clic en publicar. Entonces este llegar será arreglado. También en H dos titulares, más de 20 H se
encontraron dos etiquetas en tu página de inicio. Así que mantengamos solo
los subtítulos como H dos, y arreglemos todos
esos Entonces para hacer eso,
primero voy a copiar este texto y veamos en realidad
es este. Entonces ya lo hacemos como H uno, y aquí hemos dedicado tu celular familiar así que
tenemos que ir uno por uno. Así que mantengamos estos
dos porque esto es una sublínea y aquí
tenemos al 100% como H dos, Bien, aquí está el 100%. Vamos a hacer clic en él, y
vamos a hacerlo como H tres. Entonces en la etiqueta SDM, podemos tener H tres, H cuatro, H cinco, H seis, y etiqueta de párrafo Dpantag y
PO Tenemos que hacer que esta estructura de página
HTML amigable para el
SEO siguiendo
las pautas de SEO. Ayudará a
clasificar nuestro sitio web en Google y hagamos clic aquí. Entonces hagamos H tres. En realidad, creo que
agregamos mucho H dos. Hagámoslos
a todos como H tres. Aquí no tenemos ningún problema. Por aquí, tenemos mucho H dos, así que hago clic en San Li y aquí
podemos editar la plantilla. Así que vamos a editarlo primero. Tenemos a H dos aquí, que sea H tres, y
hagamos esto en tres. Párrafo tres.
Bien, ahora hago clic en publicar y dar clic
en guardar y volver. Bien, bien. Ahora bien, si me desplazo hacia abajo , de
nuevo, tenemos muchas
Ts, hazlas tres. Y si lo hacemos en
el diseño en parte, esto va a ser fácil, pero ahora tenemos que
hacerlo manualmente. Entonces voy a hacer
esto como párrafo. Este debería ser párrafo, y este es tres está bien. Y aquí, haz
esto como párrafo. No aquí, esto debería hacer
como párrafo y aquí, esto debería ser H tres o H
cuatro, tres va a estar bien. Creo que también tenemos que editar
esta plantilla, así que vamos a editarla. Bien. Ahora primero, este nombre
debería ser H dos y H tres, y este debería ser
HP o etiqueta de párrafo, después hago clic en siete baño y aquí también tendremos a este H tres y H cuatro, C cuatro. Ahora hago clic en publicar y
veamos que soluciona esos problemas o no. Ahora aquí, hago clic en
reiniciar analizador SO. Bien, se convierte en 82 y tratar de hacer que este
SoCore sea más del 80% Entonces ahora tenemos que agregar
todas las etiquetas a las imágenes. Podemos copiar esta etiqueta SRT y pegarla así
y ver el icono Entonces aquí, es este ícono. Entonces está en el encabezado. Haga clic en él para editar el encabezado. Bien, ahora da clic aquí
en la etiqueta antigua, solo copia el título y pon la etiqueta Vieja así
y haz clic en publicar. Después hago clic en Editar página
para editar la página principal. Bien, ahora estoy de vuelta. Entonces la manera más fácil es, vamos al tablero, y en el tablero,
podemos encontrar Media, hacer clic en Mediateca. Y aquí vamos a
tener las imágenes. Lo único que tenemos que hacer
es hacer clic en Editar, y aquí podemos agregar la etiqueta ALT. Vamos a agregarlo como banner social, dar clic en actualizar, volver de nuevo. En realidad, es más
fácil cuando hacemos clic en este ícono de galería y las
imágenes se mostrarán así, y ahora podemos agregar así. Así. Este es el método
fácil dit así, cita de
Bickst
y icono de reloj Entonces agregaré todos esos
íconos y nos vemos pronto. Bien. Ahora bien, si lo revisamos de nuevo, tendremos mejor resultado. Así que da click en Rs
iniciamos S analizador. Todavía tenemos
muchas etiquetas H dos,
y ella, también tenemos que
editar este pie de página. En el pie de página, también
tenemos un montón de H dos etiquetas. Haga clic en CFoter conservar ahora
vamos a editarlos todos. Este debería ser
párrafo, y aquí, éste debería ser párrafo
o podemos agregar H dos, pero agreguemos párrafo. Ya veo, tenemos mucho. Y aquí, hagamos
esto como un tres. Y aquí, hagamos
esto como un tres y la sección de copyright
será párrafo, haga clic en publicar y ahora
vamos a comprobarlo de nuevo. Bien, ahora son 91, y esto es bastante bueno. Entonces aquí tenemos ratio de enlaces, así que tenemos que agregar
más enlaces externos, pero por ahora,
no voy a agregarlos, y por ahora, el 91 es
mucho mejor que antes.
157. Velocidad de carga de página con el complemento de caché LiteSpeed: Bien, ahora tenemos un paso más, completa nuestro diseño completo de
sitio web. Es decir, optimizar nuestro sitio web y cargar el sitio web
más rápido en dispositivos móviles, computadoras de escritorio o tabletas.
Entonces hagámoslo. En primer lugar, si voy a enchufar
e instalar enchufes, puedo escuchar aquí, tenemos mucho plug
in a través de actualización, y aquí tenemos caché
Light Speed. Lo voy a desactivar. Y la razón por la que está aquí, el proveedor de hosting
que uso es chip de
nombre y chip de nombre agregará automáticamente el caso
Light Speed. Lo eliminaré, y luego copiaré URL
del sitio web y
dejaré el código de la página. Buscaré en Google, la velocidad de la página de
Google, y podemos ver
información sobre la velocidad de la página, simplemente haga clic en ella. Entonces es pagespeed
punto web dot Dv, así que solo pagaré el sitio web RL y haré
clic en Analizar. Bien. En el móvil, su
rendimiento es de 64, y esto es mejor. No obstante, podemos hacer
esto mejor que esto, y en el escritorio, son 89. Entonces aumentemos la velocidad
de nuestro sitio web WordPress. Para ello, podemos usar
Light Speed, plugin de caché, así hago clic en agregar plugin. Entonces buscaré caché de Velocidad de la
Luz. Bien, aquí tenemos el plugin de caso Light
Speed y actualmente no está probado
con nuestra versión de WordPress. Así que cuando instalamos plugins
no probados, siempre tratamos de obtener copias En lecciones anteriores,
te muestro cómo obtener copias de seguridad. Ya tenemos la copia de seguridad, así que hago clic en Instalar ahora. Después da click en Activar Bien, ahora tendremos aquí Plugin de caché
Lightspeed Entonces hago clic en el tablero
para ir a Da por ahora, se verá así. Entonces agreguemos la configuración. Primero, tenemos presets
y en presets, no
necesitamos hacerlo porque vamos
a hacerlo manualmente Porque si usamos estos presets, puede romper nuestro sitio web, y si algo
rompe nuestro sitio web, entonces no podremos
identificar qué parte
rompe nuestro sitio web Entonces, si te encuentras cómodo, puedes simplemente hacer clic en Presets de
App y seguir adelante Pero en nuestro caso, vamos uno por uno. Primero, vayamos a
general sobre general, simplemente haga clic en este habilitar IC Cloudserve y
verá este tipo de ventana Entonces aquí tienes que registrarte. Entonces me registraré con Google. Haga clic en Acepto y
haga clic en Google. Continuar. Y aquí solo
hago clic en Finalizar conjunto de enlace y
en configuración general, el modo de conjetura, y la optimización de invitados
estará apagada. Y aquí, da clic en verificar mi IP
pública y copiar esa IP. Bien, aquí tenemos la IP. Simplemente lo copio y pego aquí
en la IP del servidor, y lo haré de la notificación. Después haga clic en Guardar cambios. Y todas y cada una de las veces que
hagas ediciones utilices en caché
Light Speed, simplemente haz clic en esta percha
Earl y abre tu sitio web en ventana de incógnito y
comprueba que todo Y cuando hacemos esto, podemos entender si se
rompe o si funciona bien. Bien. Entonces tenemos
la pestaña de caché. Haga clic en él. En caché, desmarcaré esta
caché iniciada en los usuarios y marcaré el caché móvil, luego otras cosas
serán predeterminadas y haré clic en
guardar cambios y revisar el sitio web en la ventana de
Incognitor Luego en TTL, mantén
la configuración predeterminada. En la página, puede mantener
la configuración predeterminada, y luego tenemos
exclusiones en exclusiones Si quieres tener una página o publicación en la que no
quieres usar el caché, solo
puedes agregar esa ruta de
página en este formato. Entonces no tenemos
ese tipo de temas. Entonces vamos a ir a SIO ESI, mantendremos la configuración por defecto, y luego tenemos
object on object, mantengamos la configuración predeterminada. Después en el navegador, habilite la caché del navegador y
haga clic en Guardar cambios. Entonces por adelantado, mantén
el avance como devolved. Sin embargo, si tiene un gran
almacenamiento y un servidor enorme, y un servidor dedicado,
puede usar este clic instantáneo, lo que significa que cuando el visitante pasa el cursor sobre un enlace de página o enlace de publicación, ese contenido se cargará previamente antes de que el usuario visite esa página Esto requerirá
mucha energía del servidor. Así que siempre solo usa este Instant click on si
tienes ese poder de servidor. Entonces, si haces esto
encendido y si no
tienes mucha energía en tu servidor, afectará la
velocidad de tu sitio web,
y tu sitio web no
acelerará debido a
la sobrecarga de tu servidor. Entonces tenemos
CDN. Haga clic en él. Entonces si quieres CDN tiene
este giveic dot Cloud, puedes habilitarlo desde aquí, pero no voy a usarlo Entonces, si tienes Cloudfare configurado con tu
sitio web, puedes habilitarlo. Voy a configurar Cloudfare
en futuras lecciones, pero por ahora, lo voy a
mantener así Ahora tenemos optimización de imagen. Da click en él, y aquí, podemos hacer clic en Enviar solicitud de
optimización y el plugin
optimizará automáticamente nuestras imágenes. Quizá tengamos que hacer esto 45 veces. Entonces ahora decimos que tienes imágenes, esperando ser engañado,
por favor espera a que
el tonto
automático las complete o
las llene manualmente ahora Entonces, por ahora, esperemos y dejemos
que optimice las imágenes. Entonces, cuando inicies sesión en
tu sitio web la próxima vez, verifica el estado de tus imágenes, y si esto no es
100 no fue optimizado, simplemente haz clic en enviar
solicitud de optimización y con el tiempo, completará 100. Bien, ahora tenemos optimización de
páginas. Antes de hacer optimización de página, como te dije antes, consigue una copia de seguridad, luego haz la optimización y
revisa el sitio web indicado. Entonces en la optimización de página, voy a hacer clic en
Voy a en CSS Minifi y en CSS combinar y
de esto generar Css, luego ve en línea, luego CSS combinado externo e interno será luego cargar CSS sincrónicamente estará encendido
y CCSS para URL estará en CSS en línea
estará CSS en línea
estará y la
optimización de visualización de fuentes será predeterminada Haga clic en Guardar cambios y
luego haga clic en Purgar ERL luego vaya a Ventana de incógnito y verifique si RL funciona bien Entonces el sitio web está funcionando
en mi caso. Bien. A veces esto puede
romper el sitio web. Entonces, si eso sucede justo estos artículos uno por uno y
mira cuál es el problema. Y cuando encuentres el problema, solo haz que se apague. Entonces tenemos configuración JS. En la configuración de JS, JS
minify estará en JS combinado estará en JS combinado externo y
en línea estará activado Entonces od JS diver
será officet cambios y purga ir a ventana de
Incognitor y Bien, funciona bien. Entonces tenemos SDM
setting on SDM setting, make DML minify on DNS,
free page control will be on, and remove WordPress
Imog will be on and remove WordPress
Imog Después haz clic en Guardar cambios
y pruébalo de nuevo. Entonces en la configuración de medios, si quieres agregar lazy
loadimage, solo hazlo encendido, pero yo estoy hazlo y aquí solo
agrega soldadura responsPlace, que significa que si la imagen
tarda tiempo en cargarse, mostrará un marcador y podemos cambiar el color del
paylder Simplemente voy a mantener el
color por defecto y hacer que este generador de
nube LQIP y Lazy load I frame estará en Admion los
tamaños estarán Y aquí, la
calidad de imagen será de 82, y aquí también lo haré en
las imágenes de carga perezosa, a veces esto puede
romper el sitio web, clic en Guardar
cambios y dar clic en perca ahora pruébalo
aquí y yo trabajo bien, pasemos al siguiente paso Voy a mantener el VPI como fuera y imagen de punto de
vista Crone
también estará apagada y los medios excluirán Si quieres algunas imágenes
que no quieres agregar efecto de carga
perezosa o si quieres
que priorice el proceso de
carga, puedes agregar la URL aquí, pero en este caso, no
voy a agregar nada de eso Entonces ahora tenemos localización, hacemos Gavita case vata cache C estará encendido y mantendremos
otras cosas por defecto,
entonces tenemos tuning, pulsamos concebir
cambios y luego mantener la afinación como predeterminada y no
hagamos ningún
cambio Ahora tenemos base de datos. En base de datos, hay
revisiones y otra lista arriba que ya no estamos
usando solo marque una por una, y si cree que hay
cosas que no necesita, simplemente haga clic en borrar o simplemente
puede hacer clic una por una. En este caso, si
quiero borrar esto, basta con hacer clic en él y
se eliminarán todos ellos. Entonces, si no necesitas autógrafo, simplemente
puedes hacer clic en él
y borrar la base Entonces tenemos a CroLero Croler no voy a
hacer Voy a configurarlo como predeterminado, entonces tenemos caja de herramientas y no
voy a usar ninguna
opción en el oh. Ahora si visito el tablero, vamos a tener este tipo de ventana y aquí puedo dar click en Reps y consultar la página speed disco en este plugin y podremos ver
la carga de la página a tiempo Hagamos clic en reprimir para verificar la carga de la página a tiempo antes de que fuera 3.76 segundos y
ahora 1.22 Ahora lo que podemos hacer es
copiar la URL del sitio web, ir a la velocidad de la página dentro, pasar la URL, y
ver el resultado. Ahora, ¿lo viste aumentar el
rendimiento hasta 82% y en
escritorio, es 79, y aquí tenemos problemas
que estamos acelerando, pero esto es mejor que nosotros sin embargo, en optimización de
imagen, no recordaba que
convertimos imagen normal
a web P, veamos,
vamos a optimización de imagen y optimización imagen ambientada aquí, tenemos que hacer
esto encendido y aquí hacer el siguiente formato de imagen de generación como web P. Entonces hacer esto fuera la preservación EXI XMP datos de imagen optimizada va a estar bien Ahora haga clic en Guardar cambios
y vaya al tablero, haga clic en Enviar optimización. Solicita, haz clic en
auto request tron, y vamos a activarlo, así
optimizará automáticamente las imágenes. Bien, ahora volvamos a ver el texto tuyo y a ver
si algo cambia. Bien, ahora se ha convertido en 90, así que ahora es mejor que antes. Bien, entonces después de
optimizar tu sitio web, y si luego haces cambios
o creas nuevas páginas,
actualizas las páginas actuales
o cambias imágenes, siempre usa las mejores prácticas
como si agregas nueva imagen, pones en el
sitio web de tinyng.com y la radio el
tamaño del archivo y haces cosas así Y aquí tenemos una ficha COSCO. No necesitamos esto porque más funciones
disponibles solo para P, así que hago clic en este
cerrar y dar clic en. Bien. Ahora podemos ver el
sitio web así. Bien.
158. La mejor anchura de contenido para Elementor Pro: Hola a todos. Ahora
estoy en nuestro diseño Figma. Y aquí, el
diseño Figma con este 1,440. Y a lo largo del diseño del
sitio web, también
agregamos este 1,440 y en el
diseño de sitios web, se hace más grande Pero si vamos a
la configuración del sitio y aquí vamos a
layout on layout, es decir
contenido predeterminado con este 1140 Eliminemos este
valor predeterminado se
agregará aquí o
simplemente podemos agregarlo así. Entonces hagamos relleno
derecho como 30, y el relleno izquierdo
será también 30. Luego haga clic en concebir cambios, y para su referencia, solo uso el diseño como 1440
como el contenido para diseñar todo
este sitio web, pero me doy cuenta de que no es algo
bueno para la capacidad de
respuesta del sitio web Así que no sumes 1,440
como contender con solo sumar 1,140 y
continuar Eso es lo que quiero que sigas siempre al valor predeterminado. Y si tienes alguna
duda, solo avísame.
159. reglas cruciales de optimización de velocidad y alojamiento: En esta lección,
vamos a abordar una de las mayores quejas absolutas gente tiene sobre
WordPress y Elementor La carga lenta se derrama. Ahora, vamos a sacar de la puerta un mito
importante. La mayoría de los sitios web de Elementor no son lentos debido al propio
Elementor Son lentos por la
forma en que la gente los construye. Demasiados complementos, archivos de diseño
no optimizados, animación pesada y alojamiento de baja calidad Al final de esta lección, conocerás el sistema paso a
paso exacto para transformar cualquier Elementor retrasado hinchado en máquinas convertidoras de colmena
rápida nin Empecemos a optimizar. Aquí está nuestro diseño Figma y creo que quiero
agregar esta imagen Para agregarlo, puedo seleccionar la imagen y
exportarla así. Nuestra imagen exportada. Y lo que hacen la mayoría de los principiantes y los constructores de sitios web de
bricolaje es subir
directamente esta
imagen al sitio web. Este es el
asesino número uno del campo del sitio web. Tienes que optimizar las imágenes
antes de usarlas. Entonces aquí está exactamente flujo de trabajo de imagen
profesional que
debe seguir. Primero, podemos ejecutarlo a través una
herramienta de compresión gratuita como un pequeño PNG. Estoy en minúsculo PNG. Yo sólo voy a abanderar y cuerda esa imagen así
. ¿Viste? El tamaño original de la imagen
era de 557 kilobytes. Pero nuestra versión optimizada
es de solo 87 kilobyte, y si descargamos esto
y verificamos la calidad, aquí está la optimizada, y además obtengamos la
imagen no optimizada, y aquí vamos Puedes ver que tenemos la misma
calidad de nuestra imagen. El segundo problema que hacen la mayoría de
los principiantes es que simplemente suben imágenes sin ver
las dimensiones del diseño. Si tu contenedor es solo 200 fix no subas la imagen blanca de
4,000 píxeles. Mantenga su
escala de imágenes
de escritorio estándar 1200-1600 píxeles máx Lo que
hacen la mayoría de los principiantes es simplemente descargar la imagen aquí y usarla
directamente. Pero si revisas el tamaño del archivo y las dimensiones de esta imagen, es demasiado alto. Lo que hay que hacer es que
hay que cambiar las dimensiones. Lo siguiente que tenemos
que considerar es convertir nuestras imágenes
a formato webb, pero no necesitamos convertir
nuestro activo uno por uno Podemos usar
plugin sin palabras para hacer esto. Entonces lo que podemos hacer es
subir nuestra imagen predeterminada como JPG o PNG y podemos instalar
un optimizador de imágenes confiable Así que vayamos al plugin
y hagamos clic en At plugin. Y aquí, busquemos
el plugin llamado Ewww optimizador de imágenes y este plugin
convertirá automáticamente nuestras imágenes
en formato web Voy a instalar esto. Además, puedes usar plugin
como convertidor para medios. En este caso, voy a
utilizar este plugin. Después de instalarlo,
iré a establecer adentro, y aquí podemos seguir esto. Aquí, digamos que
acelera nuestro sitio web y me quedaré
con gratis aquí, haré que el remove meta data check y lazy load
unchecked and check the web P conversions and check the web P conversions
and then our files will convert
automáticamentea web P. También para aquí, agregaré 1920 y
también Max as 1920 Entonces lo que pasó aquí
es si alguien o si tu cliente sube una imagen
como 4,000 fixel image, se reducirá a este tamaño por
este plugin y la
copia de seguridad de la imagen será local, y luego podrás hacer click
en guardar configuración Bien, ya terminaste. A continuación,
hablemos del almacenamiento en caché. En lugar de enfocar WordPress
para construir tus páginas completamente desde cero
cada vez que un visitante
hace clic en un enlace, el servidor toma una instantánea
estática de tu página y muestra esa versión
guardada instantáneamente. Este
tiempo de carga de radios significativamente. Si está alojando
infraestructura Safa acid, le
recomiendo encarecidamente usar el complemento gratuito de almacenamiento en
caché de velocidad de la luz Si estás en un servidor
Apache o ingeniero estándar, complementos
premium como WV
Rocket son fantásticos Para los principiantes, no es necesario
complicar demasiado esto o alternar
cada Simplemente habilite los conceptos básicos, caché de
páginas y el almacenamiento en caché
del navegador Simplemente encienda esas dos configuraciones de
co hará que su sitio Elementor
se sienta rápido al instante. Ahora hablemos de algo mayoría de la gente ignora por completo. Plugin en negrita.
Cada plugin que actives agrega un script extra y
lo estiliza al encabezado de tu página. Código significa más solicitud de DTV, que directamente en almacena
su carga a tiempo Aquí tienes una estricta regla de oro
para tu proyecto de diseño web. Si no estás usando activamente un plugin, elimínalo por completo. Aún más importante, si Elementor ya puede
hacerlo negativamente, no instale un complemento
separado para ello No sobrecargue su sitio
con pocos datos de avance de Elementor de
terceros diferentes datos de avance de Elementor de
terceros solo para usar un solo widget Mantenga su configuración mínima. Un backend limpio siempre equivale a una diversión rápida veamos dentro del Elementor
del propio editor Aquí, algunos se ven increíbles, pero son increíblemente
pesados en la renderización del navegador. Estoy hablando de deslizadores
masivos de página de inicio. Me quedo con controles deslizantes cier, y aquí tenemos jinetes de carrusel que proporcionaba el complemento
avanzado premium, esto será
más pesado en el sitio No solo eso, los
videos de fondo y mucha animación de rastreo afectarán mal la carga de
tu sitio web
en velocidad. Recuerda siempre que los fondos de
video pesados envuelven
completamente a los usuarios móviles
en conexiones más lentas. En su lugar, inclínese en las opciones de diseño inteligentes de alto
rendimiento. Cambia ese control deslizante pesado por una sección de héroe estático audaz Reemplace el efecto de
movimiento de ensalzado complejo con los estados de desplazamiento
CSS nativos limpios Recuerda que diseñas para lucir. Pero absolutamente debe cargarse rápido o mantener a los usuarios en la página. Esto nos lleva a los viales de
núcleo web. La matriz de rendimiento real que Google utilizó para clasificar tu
sitio web, no te estreses. Aquí no nos vamos a
empantanar en una
jerga técnica profunda Solo necesitas rastrear
tres cosas principales. Primero es LCP o pintura completa de mayor
contenido. Esto simplemente mide qué tan rápido tu principal por encima de la falla
contiene cargas crema. El segundo es CLS o desplazamiento de capa
acumulativo. Esto rastrea la estabilidad visual. Quieres asegurarte de que tus elementos de
diseño no salten
violentamente
mientras la página se está renderizando Y tercero es INP o
interacción a la siguiente pintura. Esto mide la capacidad de respuesta. ¿Qué tan rápido reacciona el sitio cuando
usas un menú clicker o un botón Aquí está tu atajo. Si sigues los pasos que
estamos cubriendo en este momento, optimizando tus imágenes,
eliminando complementos innecesarios y construyendo diseños limpios, automáticamente
serás como las tres matrices sin
pensar demasiado en los datos técnicos Ahora, seamos totalmente reales. Puedes tener el
Elementor más optimizado, hermoso y limpio del mundo Pero si lo hospedas en chief
loa tier share hosting, todavía
se va a
cargar como tortuga lenta Si te tomas en
serio la construcción sitios web profesionalmente
para tus clientes, necesitas una infraestructura decente. Busque entornos de alojamiento construidos en servidores de velocidad de luz. Además, deben tener
fuertes registros de tiempo de actividad y ubicaciones de centros de
datos cerca de su público objetivo real Para ayudar a tu servidor a salir, WordPress y Elementor usan funciones llamadas
carga lenta de forma predeterminada Esto asegura que las imágenes
más abajo de la página solo carguen la fracción exacta de un
segundo desplazamiento del usuario hacia ellas. Mantener el
lanzamiento inicial de la página increíblemente rápido. Solo asegúrate de dejar
esta función activa. Veamos el impacto en el mundo
real. Antes de la optimización, los
sitios web a menudo se arrastran debido a las
afirmaciones gigantes de los medios y al desorden de scripts Pero después de aplicar
esta lista de verificación, tiempo de
carga se redujo a la mitad. Tu experiencia de usuario se vuelve completamente fluida y tus tasas
de conversión suben. La optimización de la velocidad se trata de
buscar una sola magia. Se trata de combinar un
pequeño hábito intencional, activos de medios
limpios, un complemento
mínimo de uso, reglas de almacenamiento en caché
sólidas y un diseño de diseño de alto
rendimiento Si implementa incluso la mitad de la estrategia que
trazamos hoy, sitios de
sus clientes se
sentirán significativamente más rápidos. Bien, eso es.
Sigue esos pasos para obtener el mejor resultado.
160. Proyecto de clase: Enhorabuena.
Has llegado al final de
la clase de diseño de interfaz de usuario de
sitio web personalizado. Has aprendido
mucho de entender la estructura del sitio web para crear un diseño
único que destaca. Antes de que te vayas, tenemos un reto
emocionante para ti. Tu proyecto de clase. Tu proyecto es crear
un sitio web personalizado, diseño de
interfaz de usuario para un restaurante. Applyin todo lo que has
aprendido en esta clase. No te preocupes. Te guiaré por los
pasos una vez más. En esta sección de
recursos del proyecto de clase, aquí
encontrarás una pregunta
del dueño del restaurante. Copie y péguelo en su proyecto Figma y use la información para
guiar su diseño Elige colores y fuentes que
coincidan con los restaurantes, luego crea un logotipo simple
pero profesional. Marca. Ideas de diseño de color e inspiración que se
ajusten a tu concepto. Esto te ayudará a construir una dirección clara
para tu diseño. Usa
las indicaciones de inteligencia artificial que aprendes en esta clase para generar
contenido para el sitio web Deje que su diseño creativo,
diseñe la interfaz de usuario del sitio web
sección por sección. Una vez que tu diseño esté listo, súbelo a tu
sección de proyectos de esta clase. Esta es tu oportunidad de mostrar tus habilidades y obtener
comentarios de otros. Estoy muy orgullosa del
proceso que has hecho. Completar este proyecto
impulsará su confianza y agregará las valiosas
tarifas a su cartera. Si alguna vez te sientes atascado, vuelve a visitar las lecciones o deja caer una pregunta en la sección de
discusión Estoy aquí para ayudar. Gracias por aprender conmigo. No puedo esperar a ver
tu increíble diseño. Ahora adelante y da rienda suelta a
tu creatividad. Hagamos el mundo
más hermoso. Un sitio web a la vez.
Akalanka Karunarathna, UI/UX Designer & Content Creator
