Transcripciones
1. INTRODUCCIÓN: Y bienvenidos de nuevo a otra clase impresionante
conmigo, visa Ken. Siempre es un placer
tenerte aquí hoy resultado con una nueva
clase impresionante solo para ti. Llevo enseñando
elemental durante los últimos 1.5 años
aquí mismo en Skillshare. Y hoy resultado con una clase muy especial para
cualquiera que quiera construir una tienda de comercio electrónico o una tienda
en línea usando WordPress, tengo varias clases enseñando a
los estudiantes cómo
usar la elemental para construir páginas web y sitios web totalmente
funcionando desde cero. Esta clase es un poco
diferente porque a diferencia de las otras clases donde
te enseño a diseñar páginas web y
sitios web desde cero. Te estaré mostrando
cómo ahorrar tiempo usando plantillas prefabricadas. Eso es correcto. Me oíste. Hermosas plantillas prefabricadas
que ya han sido diseñadas por diseñadores muy
calificados. Y todo lo que necesitas
hacer es reemplazar el contenido
del placeholder por tu propio contenido. que eso te permita
ahorrar tiempo cuando
no quieres empezar a construir
tu sitio web desde cero. Si creas, construyes
o
fabricas productos físicos y
tienes una tienda física, ya
es hora de
mover tu tienda
al espacio online donde
puedas llegar a más clientes. Para que puedas dirigir tu tienda
física mientras que al mismo
tiempo la ejecutas en línea y vendes a personas que aman comprar cosas en línea. Por lo que esta clase
te mostrará cómo hacer eso. Y estoy muy emocionado
de traértelo. Por lo que ese es el sitio web
estará diseñando hoy. Y para cuando
terminemos la clase, tendrás una tienda de comercio electrónico totalmente
operativo construida con WooCommerce. Si estás tan emocionado como
yo, comencemos.
2. Instala el tema Astra: Aquí estamos en el tablero. Como se puede ver, esta es una
instalación completamente nueva de WordPress, WordPress 5.9 a lo primero que necesitamos hacer fácil
instalar el Tema Astra. Entonces vamos a Temas de
Apariencia. Por supuesto, tenemos los equipos
predeterminados que vienen con cada nueva
instalación de WordPress, pero no nos
interesa la lista tres, si queremos ir a agregar nuevo, será redirigido al tema de
WordPress repositorio. Y aquí mismo tenemos
muchos temas de terceros que puedes instalar y
empezar a usar de inmediato. Pero la que nos
interesa como se mencionó, es Astra. Por lo que voy a hacer clic en Instalar. Muy bien, entonces ahora que está
instalado, vamos a activarlo. Ahora se activa el nuevo tema. Es el tema activo
en nuestra página web. Y notarás que
aquí arriba tenemos este pop-up. Tenemos aquí esta notificación que dice gracias por
instalar escritura Astra. Ya sabes, aster viene
con miles de plantillas
iniciadas listas para usar. Y en esta clase
estaremos instalando este plug-in llamado plugin de plantillas de
arranque, porque estaremos explorando
diferentes tipos de plantillas que están disponibles
para facilitar nuestro trabajo. Si eres del tipo de persona que quiere aprender a construir sitios web o páginas web con
Elementor desde cero, desde una pizarra en blanco. Puedes seguir adelante
y ver cualquiera de mis otras clases elementales aquí
mismo en Skillshare. Tengo bastantes de ellas mostrándote cómo
construir una landing page desde cero agregando elemento por elemento hasta que
tengas una página completa. Pero en esta instancia o para
esta clase que estaremos usando, estaremos viendo cómo
hacer nuestro trabajo más fácil mediante el uso de plantillas
prefabricadas gratuitas. Son impresionantes y
verás por qué ahora que tenemos instalado nuestro
Tema Astra. En la siguiente lección, veremos cómo instalar este plugin y cómo
empezar a usar las plantillas. Te veré en breve.
3. Instala el complemento de plantillas de inicio: Estamos de vuelta. Ahora. Astra es el tema activo y
queremos empezar a instalar
plantillas iniciadas enchufando para poder empezar a
usar la plantilla de inicio. Así que vamos a hacer clic en Get Started será redirigido
a un asistente de configuración, que nos ayudará a
configurar todo como queríamos escribir. Para que puedas tomarte un
momento y ver este video para escuchar
de este tipo, del equipo de The Astor. Pero voy a seguir adelante
y haga clic en construir su sitio web ahora para que podamos
empezar de inmediato. Como se puede ver, tenemos tres
tipos diferentes de constructores, tres constructores diferentes de
arrastrar y soltar aquí. Pero el que nos
interesa es elemental. Entonces elegiré Elementor. Al hacer clic en Elementor se
mostrarán las plantillas que
podemos editar con Elementor. Para que como se puede ver, se
agrupan en aquíse
agrupan en
diferentes categorías
dependiendo de lo que quieras construir. Pero por supuesto,
nos interesa una tienda de comercio electrónico o
en tienda de comercio electrónico. Por lo que voy a hacer clic en cualquiera de
estas categorías aquí. Por ejemplo, tienda deportiva se
presentará con diferentes tipos de tiendas de
comercio electrónico. ropa deportiva marcas
tienda, zapatería reciclada. Un buen número de
plantillas que podemos utilizar. Pero en el ejemplo que te
mostré en la
introducción de la clase, uso esta plantilla
aquí mismo, la tienda de cosméticos. Por lo que voy a hacer clic en eso para elegirlo. El siguiente paso que tenemos que
dar aquí es
agregar un logo para nuestra página web. Elige un logotipo para tu sitio web. Puedes actualizarlo
en cualquier momento más tarde y te
mostraré cómo
actualizar el logo más tarde. Así que sigamos adelante y
haga clic en Subir archivo aquí. Vamos a subir archivos. Entonces seleccionaré mi logo
de mi computadora. Como pueden ver, tengo una serie
de logotipos que aparecen, Mi nombre. Por supuesto que usarás el logotipo de
tu propia empresa. Voy a hacer clic en eso y decir Abrir. Diré Select. Y como se puede ver, el logo ya
está apareciendo aquí. Los colores realmente no
coinciden con el fondo. Y eso es muy
deliberado porque
quería mostrarles en
una próxima lección cómo cambiar este logo
a
un logotipo diferente que
coincida con el fondo. Entonces dejemos eso
ahí y digamos Continuar. Aquí, podemos elegir los
colores que queremos que el equipo tenga en general. O, y por supuesto podemos
actualizarlos en cualquier momento después. Entonces por defecto, estos
son los colores elegidos. Los dejaré en defecto
porque como he mencionado, podemos cambiarlos más tarde y
veremos cómo hacerlo. Y nuestra
fuente predeterminada es monitorizar. Lo dejaré en eso
y diré Continuar. Básicamente, este es
un foro de inscribirse por el equipo de asteriscos
donde parece que no puedes estar recibiendo
boletines informativos sobre último que está sucediendo
con el Tema Astra. Desde el Tema Astra. Entonces voy a seguir adelante y
llenar mi nombre. Entonces Ken, mi correo electrónico, soy experta, pero por supuesto te
inscribirás tal vez como principiante o
algo de ese tipo. Diré experto porque soy un experto construyendo un
sitio web para mí. No quiero revisar
esto porque ya me
inscribí en el
boletín en algún momento atrás. Si quieres compartir datos
no confidenciales con el Tema Astra, puedes dejar eso comprobado, pero necesitas importar el contenido demo que
viste en la propia plantilla. Así que dejen a estos otros. Charla. Diré enviar
y construir mi página web. Tardará unos
minutos en construir. Enhorabuena, la plantilla ya
está instalada y lista para ser personalizada para lucir exactamente de la
manera que querías. Puedes seguir adelante
y ver a este tipo y escuchar lo
que tiene que decir. Lo siguiente que tenemos que hacer, podemos hacer clic en ver tu
sitio web y serás redirigido a una nueva pestaña donde podrás ver tu sitio web de
WordPress. Ahí lo tenemos. Así es
como se ve el sitio web. Por supuesto, estaremos
mirando cómo personalizarlo. Para salir de este lugar, hará clic en este botón Salir a Dashboard
aquí arriba a la derecha, en la
esquina superior derecha. Haga clic en eso. Ahora aquí estamos
en el tablero. Los chicos nos están pidiendo que
les demos una calificación, pero ya los he calificado, así que sólo voy a quitar eso. Saltando a la pestaña donde
habíamos abierto la página web. Aquí estamos. Déjame desplazarme y
mostrarte lo que tenemos. Así es como se ve la plantilla. Veremos cómo personalizar
todo para agregar tu propio contenido y
hacerlo tu propio sitio web. En otras palabras, veremos cómo personalizar el sitio web
a su gusto. Abre la página nítida. Nosotros lo estamos. Las otras páginas
están funcionando correctamente. En la siguiente lección, vamos a ver cómo
empezar a personalizar el sitio web para que funcione exactamente de
la manera que lo desea.
4. Instalación de WooCommerce: Bienvenido de nuevo. Ahora que tenemos a nuestro equipo de
WordPress se le dice y ya hemos seleccionado la plantilla con la
que queremos trabajar. Es hora de instalar medios
de pago para nuestra página web. Cada tienda de comercio electrónico
construida con WordPress utiliza un plugin para aceptar
pagos en el sitio web. Y hay varios inicios de sesión de
pago en la plataforma WooCommerce. Y uno de los mejores
del mundo es WooCommerce. Debiste haber oído hablar. Así que sigamos adelante e instalemos WooCommerce en un
sitio web e integremos pagos para que podamos
permitir que los clientes realicen pagos en nuestra
página web y subproductos. Al entrar al tablero de instrumentos, iré a plugins. Ya tenemos instalado
WooCommerce. Es uno de los plugins que se instaló
mientras no estábamos instalando la plantilla
y ya está activa. Entonces si hacemos clic en
WooCommerce sí será redirigido a este asistente de
configuración donde ahora
podemos conectar nuestro
WooCommerce a la página web. Entonces sigamos adelante e ingresemos nuestra dirección y
todos estos detalles. Voy a desmarcar esto
porque no quiero estar recibiendo
esta información. Adelante y selecciona tu
país. Me refiero a Kenia. Nairobi. Condado de Nairobi en Kenia. Entonces voy a seguir adelante
y decir Continuar. No gracias. Y por supuesto, ¿en
qué industria opera la tienda? Salud y belleza. Continuar? Sí, vendo productos
físicos. Diré que continúe. ¿ Cuántos productos
se venden de manera confiable? Tal vez 11,100. ¿ Y mi venta en cualquier
otro lugar actualmente? No. No voy a montar una
tienda para nuestros clientes, así que diré Continuar. Aquí tenemos extensiones
gratuitas adicionales que opcionalmente puedes
elegir instalar. No quiero
elegir ninguno de estos, así que sólo voy a
desmarcarlos y decir Continuar. Ya tenemos instalado este Tema
Astra, así que haré clic en continuar
con mi tema activo. Estos son los temas
vienen con WooCommerce. Son proporcionados
por WooCommerce, pero quería seguir
con el Tema Astra. Por lo que continuum será redirigido a la página de inicio de
WooCommerce dentro de nuestro tablero, como se puede ver
aquí mismo a la izquierda. Y por supuesto, aquí tienes un consejo de herramienta rápida para
decirnos un
poco más sobre qué
esperar de WooCommerce. Simplemente haga clic en Siguiente o
tal vez simplemente cierre eso. Vamos a seguir adelante y
establecer pagos. Pasarelas de pago adicionales. Necesitamos pagos de PayPal
para poder permitir los clientes paguen con la configuración de celdas
PayPal. este momento estamos instalando
el
plugin de pagos de PayPal que la gente es extensión de
pagos. Y no se debate. A continuación, configuremos la cuenta de pagos de
PayPal. Vamos a configurar. Muy bien, así que ahora como puedes ver, bajo WooCommerce,
estamos dentro de los ajustes. Ahí es donde nos
han redirigido. Estábamos aquí, ahora nos
han llevado a este lugar. Y por supuesto por defecto, ya
hemos habilitado
pagos PayPal y ahora podemos aceptar de
forma segura todas las
principales tarjetas de crédito y débito en la solidez
de la Red PayPal. Entonces lo siguiente que tenemos que
hacer es activar PayPal. En otras palabras,
necesitamos conectar estos plugin de PayPal a
nuestra cuenta de PayPal. Por lo que necesitarás tener una cuenta PayPal
a la que conectarte para que el dinero sea
enviado a esa cuenta de PayPal. Y de ahí puedes
hacer crecer tu dinero. Por lo que necesito firmar. Voy a seguir adelante e
ingresar mi contraseña. Permita que PayPal conecte su
cuenta con WooCommerce. Desarrolladores. Acordar y conectar. Gracias por inscribirse. Ahora tienes una
cuenta y has integrado
con éxito PayPal con
desarrolladores de WooCommerce. Por lo que en otras palabras, gente puede hacer el pago en
nuestra tienda de comercio electrónico y el dinero será enviado a papel desde donde
podamos retirarlo. Así que volvamos a los desarrolladores de
WooCommerce. Eso está en nuestro tablero. Como se puede ver, esas
acciones han podido recuperar toda esta
información del papel. En los viejos tiempos, solía
entrar en papel y conseguir estas identificaciones y llaves dentro del papel
y venir a pegarlas aquí. Pero como se puede ver, han
mejorado el proceso. Son solo unos pocos clics y la información
aparece automáticamente aquí mismo. Ahora que eso se hace, sigamos adelante y
digamos Guardar cambios. Ahora digamos habilitar
la puerta de enlace PayPal. Y por supuesto hay
varios otros ajustes aquí
mismo que se pueden editar, pero no los voy
a cambiar. Así que volvamos dentro de
la pestaña General. Aquí mismo podemos establecer nuestras líneas de dirección y detalles de
envío. Vendiendo ubicaciones. Entonces, ¿vendes a todos los
países ubicaciones de envío? ¿ Dónde envías
a tales detalles? Y cuál es tu moneda
ahora mismo está mostrando chelines de
Kenia
porque me refiero a Kenia. Y si cambias
algo aquí, puedes, si quieres habilitar
impuestos y cálculos, puedes seguir adelante y hacerlo, luego haz clic en Guardar cambios. Pero claro que
no he cambiado nada, así que no voy a actualizar eso. Y puedes seguir adelante y echa
un vistazo a más tutoriales sobre
cómo configurar WooCommerce en
cualquier sitio web de WordPress. Hay toneladas de tutoriales en YouTube que te muestra
exactamente cómo hacer eso. Si fuéramos a hacer eso en este momento, haría que esta clase fuera demasiado larga y no queremos
hacer eso porque como se puede ver, tenemos muchos otros ajustes
aquí para configurar. Vamos a seguir adelante y
haga clic en pagos. Ahora como pueden ver, tenemos una lista de diferentes
formas en que podemos aceptar el dinero. Y como terminamos de
configurar la extensión de PayPal, ahora
está habilitada, eso significa que la
has configurado correctamente. Así que adelante y
asegúrate de que esté habilitado. Y si queremos
hacer cambios en la misma, siempre
puedes hacer clic en Administrar. Serás llevado a esta página
que ya miramos. Por lo que ahora que hemos
configurado WooCommerce, es hora de que comiencemos a personalizar la apariencia de los
sitios web utilizando los diversos
personalizados como
tenemos y el constructor de
páginas Elementor.
5. Personaliza el encabezado: Correcto, Así que ahora es el momento de empezar
a personalizar nuestra landing page y
el resto de las páginas. Entonces, para empezar, empecemos
con el Navbar justo aquí. Lo primero que
queremos hacer es cambiar este logo porque como se
puede ver en este momento, esto no es visible. Por lo que voy a seguir adelante y
haga clic en Personalizar. Esta es una de las
áreas donde podemos personalizar la landing page. Así que sigamos adelante
y editemos el encabezado. Este es el encabezado donde se encuentra
el logotipo y la
barra de navegación. Entonces para hacer eso, iremos dentro del constructor de encabezado
o podemos ir directamente y hacer clic en cualquier elemento aquí
cuando aparezca este ícono. Pero voy a ir dentro de los constructores de
cabecera. Te darás cuenta que tenemos
esta representación del diseño aquí abajo. Entonces el
logotipo del título del sitio, aquí hay un logotipo. El menú primario, aquí está. Y el icono del carro o funcionalidad
de la tarjeta, que está aquí mismo. Por lo que notarás que esta
imagen corre todo el camino hasta la cima detrás de la
barra de navegación y el local. Eso significa que este encabezado
es transparente. Si tuviera un color de fondo, no
veríamos esta imagen
ir todo el camino hasta la cima. Por lo que notarás aquí mismo
tenemos opción de cabecera
transparente personalizada. Y si leemos este aviso aquí, el encabezado de esta página se establece desde este encabezado transparente. Porque si solo pudiera
saltar a otra página, notarás que
el encabezado aquí tiene un logotipo oscuro porque
tiene un fondo blanco. Este no es un fondo
transparente. Por lo que algunas partes
del sitio web
necesitarán tener un logotipo oscuro en
parte en la página de destino o en cualquier página donde la imagen
corre hasta la parte superior. Tiene una cabecera transparente. Y eso significa que necesitamos
tener una
vida local brillante, como el logotipo blanco. En este caso. Aquí mismo podemos editar
la imagen en esta página, el logo en estas páginas de
fondo blanco. Y si queríamos
editar el logo sobre el fondo transparente, tenemos que hacer click en esta opción. Entonces volveremos
a esto en breve. Primero quiero entrar por opción de
cabecera transparente
personalizada. Entonces aquí podemos elegir
en qué pantallas
queremos que estos ajustes
tengan efecto. Para que podamos elegir escritorio, móvil o de escritorio y
móvil al mismo tiempo. Para que como se puede ver, tenemos dos opciones del logotipo. Logotipo y escrito un logotipo. Y veamos qué
pasa cuando
cambiamos el logotipo de la retina. Tengo un logo blanco
en algún lugar aquí. Elegir Imagen. Ahora notarás
que el logo sigue siendo el
logotipo oscuro que teníamos. Y esto básicamente nos dice que el logotipo que se
muestra aquí mismo, actualmente en nuestra página web es el local normal
están escritos un logotipo es justo el mismo
logotipo exacto que el logotipo normal, pero es el doble del tamaño
del logotipo normal. Entonces si esto es un, un
100 por un 100 pixeles, esto debería ser de 200
por 200 pixeles, y suele ser el doble
del tamaño del logotipo normal porque
es la opción que muestra en dispositivos de gama alta como como los MacBook
Pros y iPhones. Así es como
WordPress lo ha configurado. Ahora, para cambiar esto a blanco, necesitamos cambiar también el
logotipo normal a blanco. Voy a hacer clic en eso. Pero recuerda que hemos dicho que el logotipo de la retina debe ser el
doble
del tamaño del logotipo normal, pero para fines ilustrativos, usaré el mismo logotipo. Ahí lo tenemos. Podemos seguir adelante y
ajustar el ancho
del logotipo tirando de
esta barra justo aquí. Déjame hacerlo un poco más grande. 384. Y voy a decir Publish. Ahora se ve mucho mejor. Vamos dentro de la pestaña de diseño y veamos qué podemos cambiar. Para que podamos cambiar el
fondo de esta área aquí. Al hacer clic en eso. Como se puede ver, ahora ya
no es transparente, pero queremos
dejarlo como transparente. Entonces no cambiemos
su publicación de eso. Ahora, quiero ir
dentro de esta área y volver a cargar esta página, refrescar. Notarás que el
logo sigue siendo como el logotipo oscuro porque el único logotipo que cambiamos fue el logo dentro del encabezado
transparente. Entonces si hacemos clic en
Título del sitio y logo aquí. Notarás que el logo
aquí sigue siendo este logo. Tenemos nuestro logo normal, pero no hemos cambiado
nuestro logo de retina. Entonces si alguien ve nuestra página web en un Mac Pro o un iPhone, verán estos logotipos de
cosméticos. Por lo que tenemos que cambiar estos a dos veces el tamaño del logotipo
normal que hemos utilizado. Pero para fines ilustrativos, seguiré usando el mismo logotipo. Ahí lo tenemos. Así que
déjame hacer clic en Publicar, y quería mostrarte
algo muy rápido. Si podemos cambiar a esta página, déjame refrescar eso. Nuestro logo funciona. De acuerdo, así es como
cambiar el logotipo del sitio web de la predeterminada a un
nuevo logotipo personalizado. Por supuesto, aquí
podemos editar el ícono del carrito. Si hacemos clic en coche, podemos ir dentro de diseño. También podemos decidir si desea
mostrar el total del carrito. Ahora muestra el total del carrito. También puede mostrar
el título de la tarjeta. Así como eso. También podemos
editar el menú principal, que es nuestro menú. Podemos hacer click aquí para
configurar el menú. Haciendo click en
que podemos elegir qué menú queremos mostrar. Por lo que actualmente tenemos
tres menús diferentes. Pero queríamos
mostrar el menú principal. Por supuesto. Déjame ver cómo se ve este
otro menú. Eso es un Menú de Contacto, menú de enlaces
rápidos. Así que volvamos
al menú principal. Ahora que estamos satisfechos
con nuestros cambios, seguiré adelante y
mantendré publicado. Déjame cerrar el
personalizador para que podamos ver nuestro podemos ver nuestro nuevo encabezado de
landing page. Así es como se ve. Creo que me gusta cómo se ve. Entonces lo siguiente que queremos
hacer es editar el resto de la página con Elementor porque
tenemos dos formas de
editar esta página. Usando el personalizador
y usando Elementor porque se han
creado diferentes partes de
la página de destino utilizando ya sea la Configuración del tema de
Astra o el constructor Elementor. Entonces estábamos editando
el encabezado dentro del personalizador
porque se crea usando la configuración del asterisco PM. Pero las partes internas
del cuerpo principal de la página web se crean
utilizando Elementor. Entonces en la siguiente lección, veremos cómo editar
los elementos de esta
página con Elementor. Entonces te veré en
la próxima lección.
6. Personaliza la sección de héroe: Estamos de vuelta. Ya es hora de editar esta página. Y por supuesto, como mencioné
en la lección anterior, construyen
diferentes partes de
la página utilizando diferentes
herramientas o configuraciones. Y acabamos de ver cómo editar el encabezado usando el personalizador porque eso es lo que
se usó para construir el encabezado. Pero el resto del cuerpo aquí fue creado
usando Elementor. Entonces para editarlo, necesitaremos
editarlo con elemental. Por lo que subiré aquí y
haga clic en editar con Elementor. Muy bien, así que aquí estamos. Me desharé de este navegante. Y empezaremos
mirando aquí la primera sección. ¿ Y si queremos cambiar
la imagen de fondo? Lo que tenemos que hacer es seleccionar la sección que está
sosteniendo la imagen, porque esta imagen se
usa como fondo, podríamos tener un color para
fondo en lugar de una imagen. Una vez que hayas seleccionado
esta sección, esta área cambia para que aparezca la configuración de esta sección
específica. Se puede decir por la palabra
editar sección aquí mismo. Así que yendo al interior de estilo, notarás que tenemos debajo de
la pestaña de fondo aquí. Si lo ampliamos, te darás cuenta bajo
el fondo
tenemos la imagen, tipo de
fondo imagen. Ya había subido
estas dos imágenes como otros posibles fondos. Veamos si podemos
trabajar con esto. Voy a seleccionar eso y
decir Insertar medios. inmediato, cambia a ese nuevo fondo
de así que claro, necesitas preparar
una bonita imagen para tu fondo por si
acaso
quieres usar una imagen diferente. Y te sugiero que
lo hagas 1920 por 1080 pixeles. Así que volvamos
aquí y miremos
el tamaño 1920 por 1080 pixeles. En otras palabras, hazlo HD. ¿ Verdad? Así que ahora eso es que
podemos seguir adelante y colapsar el
fondo y podemos jugar alrededor con el fondo
superpuesto la oscuridad de la superposición que está
encima de la imagen. Y déjame mostrarte
cómo se ve eso. Déjame mostrarte la intensidad. Puedes hacerlo más
oscuro o más ligero. También podemos entrar aquí y
cambiar el color en sí. Entonces si quisieras tener algún color rojizo o mirada
azulada a través de él, en lugar de negro,
siempre podemos darle
esa superposición azul. Eso es eso. Permítanme
derrumbarme el fondo. Y creo que está bien. Así que déjame actualizar. Y luego vamos a prever la página. Entonces así es como se ve la
página en este momento. Por supuesto que no es la página de
mejor aspecto, pero como se puede ver, tenemos mucha
flexibilidad en lo que podemos hacer para mejorar en ella. Notarás que cuando
empecemos a desplazarse, la imagen permanece en un solo lugar. Si quisieras desplazarse junto con todo lo demás
en esa sección, todo lo que tenemos que hacer es entrar aquí en el fondo,
en el fondo. Bajo apego. En este momento había dicho a fijo, podemos cambiarlo a scroll. Cuando nos desplazamos ahora sube junto con el
resto de la sección. Actualice eso. Vamos a
prever los cambios. ¿ Verdad? Entonces lo siguiente que
queremos hacer es editar este botón justo
en caso de que quieras editar el color del botón. Selecciona el botón en sí, y esto cambiará
para editar el botón. Y estos son los
ajustes para el botón. Vamos dentro de estilo. Podemos cambiar el
color de fondo a cualquier color que queramos, o este es el color del texto. Volvamos a cambiarlo a blanco. Queremos cambiar
el tipo de fondo. Como se puede ver, el
fondo ha cambiado. Se le puede dar un, digamos, un color rojo por ejemplo. Al hover, vamos
a darle algo así como dejémoslo
en blancos al hover. Actualice eso. Ahora, ¿qué
seguía editando el botón? Se necesita apuntar
a una página específica. Tenemos que darle un enlace. Por lo que agregamos eso bajo
la pestaña de botones. El enlace puede darle algo así como Ahora cada vez que alguien
haga clic en ese botón, se le llevará a, como se puede ver aquí abajo, cuando pase el cursor sobre eso, se tomarán
a mi website.com, la misma URL que aparece. Si quisiéramos
abrirnos en una nueva pestaña. Permítanme actualizar eso
y mostrarte
cambios muy insignificantes poquito. Aquí vamos. Entonces cuando pasemos el
cursor sobre el botón, notarás que la URL que apunta a aparecer aquí abajo. Si hacemos clic en
eso, empezará a abrirse. Se abrirá el
enlace en la misma página. Déjame volver. ¿ Y si quisiéramos
abrirnos en una nueva pestaña en su lugar? Todavía está seleccionado lo que podemos hacer
botón de bienestar de facilidad. Mx, el enlace
que tenemos esta rueda dentada, clic en eso y decir
abrir en nueva ventana. Entonces actualízalo. Vamos a prever los cambios. Ahora cada vez que alguien
haga clic en este botón, se abrirá en una nueva pestaña
y esta página permanecerá intacta para que puedas seguir
navegando por la página de respiro. Entonces vamos a hacer clic en eso. Y ahora hemos
abierto una nueva pestaña, nuestras páginas siguen ahí. Por supuesto, también podemos
editar este texto aquí seleccionando en cualquier lugar
dentro de este elemento. Vamos dentro de estilo. Vamos a derrumbar eso. Ampliar el contenido. El color del título se puede cambiar a cualquier color que queramos.
Digamos que lees. Por supuesto recuerda que estoy
insistiendo en que este no es el sitio web de mejor aspecto por este es con fines
ilustrativos. Digamos que queremos que
sea azul claro así. Queremos cambiar el color
de la fuente de descripción. Puedes cambiarlo a
cualquier color que queramos. Simplemente déjalo en amarillo, blanco. Vamos a actualizar eso. En cualquier momento queríamos cambiar o editar cualquier elemento en la página web, basta con hacer clic dentro de ella. Entonces si queríamos
cambiar o editar esto, pulsemos dentro de él. Y ahora es lo que
estamos editando aquí. Para cambiar la apariencia en sí, tenemos que ir dentro de
la pestaña de estilo. Ahí, podemos cambiar
el color del texto. Se puede decir, un amarillo. Ahora vamos a prever los cambios. Así. Siempre podemos ajustar la altura
de la sección héroe. Así que mientras todavía está seleccionado, podemos ir dentro del diseño. Bajo layout, permítanme
colapsar que bajo layout, tenemos esta altura mínima. Y notarás que
la barra inferior aquí
sube y baja mientras
mueve estos por ahí. Podemos establecer la altura mínima. Me gusta configurarlo tal vez
a algo así como 60 para que
llene toda la pantalla, aunque tengas una pantalla alta. Pero quiero dejarlo a los 60. Permítanme actualizar eso. Vamos a prever los cambios. Si me desplazo. Observe que parte de la sección de
héroes va todo el camino hacia abajo más allá de nuestro tamaño de pantalla. Y por supuesto, hay
muchos ajustes que puedes ajustar
para ajustar cómo se ve la sección de
héroes. Acabamos de tocar algunos, pero puedes seguir adelante y
jugar con todos estos
otros ajustes para personalizar la sección de héroes y hacer que se vea exactamente
como querías. Por lo que depende de ti
llegar a entender cómo cada ajuste afecta a
la sección de héroes. Como mencioné, si
quieres aprender a profundizar en todos
estos ajustes, puedes ver cualquiera de
mis clases donde te
muestro cómo diseñar
una landing page o
una página web o un sitio web
con Elementor desde cero desde una
pizarra en blanco justo aquí. Recuerda que solo estamos personalizando una plantilla prefabricada para
hacernos las cosas más fáciles. Ya terminamos con la
edición de la sección de héroes. Lo siguiente que queremos hacer es
editar esta área interior del cuerpo. Y eso es lo que vamos a
hacer en la próxima lección. Te veré en breve.
7. Personalización de la sección del cuerpo: Estamos de vuelta. He seguido adelante e
hice algunos cambios en la sección de héroes. He cambiado este color de
fuente a blanco. Y esto también, y cambia la
superposición de fondo a negro solo para mejorar la apariencia general
de la sección héroe. Pero claro, creo que ya
has trabajado qué colores quieres usar y los has aplicado
en tu sección de héroes. Entonces lo siguiente que
queremos hacer es saltar justo dentro de nuestro editor
y echar un vistazo a estos. Como se puede ver, tenemos
dos filas de productos. Y al hacer clic
en el producto, te
lleva a la descripción
del producto o ese producto específico. Saltemos dentro de nuestro editor
Elementor. Te darás cuenta que
no tenemos ningún producto que
aparece aquí. Aún así. En la página real. Los productos están apareciendo. Lo que está pasando. Estamos usando algo llamado código corto. Wordpress utiliza
códigos cortos para extraer datos de diferentes
partes del sitio web. Entonces si hago clic en este cuadro, aunque está vacío,
en realidad tiene contenido. Es solo tirar de ese
contenido dinámicamente
del WooCommerce almacenado que
tenemos en nuestro tablero. Debido a que hemos hecho clic en
este elemento específico, esta área ha cambiado para editar acceso directo
porque es un código corto. Ahora estamos editando
el código corto. Y por dentro aquí dice, Ingresa tu código corto. Así es como se ve el código
corto. Entonces así es como va. Una vez que hayas creado
tus productos usando WooCommerce en el
back-end en el tablero. Woocommerce
te proporciona una forma de
mostrar esos productos
en tu página. Si elimino esto y
solo dejo los productos. Ese es un código corto. Es por eso que ahora los
productos están apareciendo aquí mismo en nuestro editor. Y si actualizo esa
vista previa cambia, los productos están ahí, por
supuesto, Definitivamente. Pero ahora la razón por la que tenemos, tenemos estos
detalles extra aquí, porque WooCommerce proporciona
cosas que llamamos atributos. Estas son solo formas de ser más específicos sobre lo
que quieres mostrar. Entonces aquí lo que estamos haciendo es
básicamente si los elimino, estaban diciendo a
Elementor que muestre los productos
que hemos creado con WooCommerce con
este código corto. Eso es lo que estamos diciendo. Y luego agregando
estos atributos, queremos decir mostrar
ocho productos. Entonces ese es el límite
con un signo igual. Entonces el número de
productos que quieres mostrar. Por eso estamos
mostrando sólo ocho. Y número de columnas es de cuatro. Por eso tenemos cuatro
columnas es así que permítanme cambiar esto a tres columnas para que
podamos ver qué pasa. Ahora está mostrando tres columnas. Eso significa que tendremos
una fila extra con dos productos aquí abajo porque aún
tenemos un producto. Pero si guardamos seis
productos como límite, entonces tendríamos dos
filas de tres columnas. Así pues pues
tenemos exactamente seis productos. Permítanme actualizar eso. Vamos a prever los cambios. Desplazarse hacia abajo. Ahora estamos mostrando tres
columnas de seis productos. Podemos jugar con
estos números como nos plazca. También podemos decir, oye, podemos decir solo un producto y solo
mostraremos un producto. No te preocupes,
te mostraré cómo crear productos
WooCommerce desde
cero en el back-end, en el tablero
en una lección posterior. Entonces en este momento solo estamos
mirando cómo mostrarlos. Aprenderás a
crear tus productos. Porque por supuesto, no
puedes construir tu negocio con estos productos
confeccionados aquí. Ya había ido
adelante y abrí la
documentación oficial de WooCommerce en códigos cortos. Entonces aquí estamos. Cómo usar códigos cortos. Puedes seguir adelante y
leer más sobre cómo usar códigos cortos WooCommerce. Pero lo que quería
mostrarte en este momento es esta parte aquí mismo, los productos código corto. El
código corto de productos es uno de nuestros
códigos cortos más robustos dentro del cual puede reemplazar
varias otras cadenas utilizadas en versiones anteriores
de Google Commerce. Aquí están los atributos de visualización. Horas hablando. En los límites se muestra la cantidad
de productos a mostrar, y eso es lo que
tenemos aquí mismo. Limite busca. Entonces veamos columnas, el número de columnas para
mostrar por defecto a cuatro. Así que ahora mismo estamos
mostrando tres columnas. Y como se puede ver, estos dos no son los únicos
atributos que podemos utilizar para ser muy específicos sobre los productos que queremos
mostrar en nuestra página. Así que tómate algo de tiempo y estudia
cómo usar estos atributos. Si quieres tener
más control sobre lo que aparece en tu página. Pero eso es básicamente
cómo hacerlo. Eso es lo esencial de ello. Lo siguiente, por supuesto, es editar estos textos
seleccionando estos textos. Estos cambios automáticamente para editar encabezado porque se
trata de un encabezado. Y somos capaces de
cambiar lo que dice. Los mejores productos de la ciudad. Y por supuesto, si
queremos que este sea un enlace, podemos agregar URL de enlace aquí mismo. Así que solo agregaré un
placeholder en su lugar. Si quieres que el enlace se
abra en una nueva pestaña, simplemente haz clic en esa rueda dentada
y comprueba abrir en nueva pestaña. Y ahora cuando alguien se
cierne sobre
él, cambia a ese símbolo de enlace. Por supuesto, si queremos
cambiar cómo se ve, vamos dentro del estilo y
podemos hacer los cambios aquí. Entonces digamos que lo cambiamos
a algo como esto, llegamos a color rosáceo, rojizo. Lo mismo se aplica
a este elemento. Al seleccionarlo. Podemos cambiar lo que dice en el título y descripción. Increíble. También puedes seguir adelante
y cambiar eso. Entonces este es el título
y la descripción. Y podemos añadir un enlace también. ir al interior de estilo,
podemos cambiar cómo se ve. Entonces colapsando esa imagen porque no tienen
una imagen para esto, si agregamos una imagen, será encima de estos productos que
no queremos hacer eso, pero tal vez queramos cambiar
el color en este momento. Por el título. Puede cambiarlo tal vez a algún color grisáceo
en lugar de negro oscuro. Cambia la tipografía
si queremos. Por lo que podría querer cambiar estos a REO intercambiados, intercambiar unos dos meses. Ahora está de vuelta a Montserrat. Actualice eso. Así que
desplázate hacia abajo. En primer lugar, guardemos
y previsualice los cambios. Así es como se ve. Lo siguiente que
queremos mirar a gusto, esta sección. Desplazemos hacia abajo. El apartado se
divide en dos columnas. Esta columna con la imagen y esta columna
con el bloque de texto. Y un consejo rápido que olvidé
mostrarte es cuando pasas el cursor sobre estos íconos de edición aquí
mismo en las
esquinas o las columnas. O incluso este ícono de aquí arriba. Se supone que trae
algunos ajustes adicionales sin hacer clic en ninguna parte. Eso entra. Una forma muy práctica de sacar eso es ir dentro de este menú de hamburguesas, ir dentro de las preferencias, preferencias de
usuario, y comprobar los mangos de edición. Ahora, cuando pasemos el cursor sobre
eso, traerá
estos ajustes adicionales interruptor te ayudará a hacer
tu trabajo mucho más rápido. Ahora si queremos duplicar
una columna o tenemos que hacer
es hacer clic en esa columna en
lugar de ellas haciendo clic con el botón derecho. Déjame, y
entrando, duplique. Permítanme simplemente quitar eso. Actualizar que básicamente
editar esta sección
sigue siendo lo mismo
que lo que hemos estado haciendo con estos bloques de
textos aquí arriba. De la sección de héroes
pasando por los textos, sigue siendo el mismo elemento. Es un rumbo. Al igual que estos rumbo. Si quieres replicar lo que ya
hemos hecho
para ahorrarnos tiempo, solo
podemos hacer clic derecho Copiar. Ir al mismo tipo de elemento
que sigue siendo un Encabezado. Haga clic derecho y pegue el estilo. Y copiará todos los
estilos que aplicamos a otros
elementos similares en este nuevo, sobre estos otros elementos
similares. Porque esto es.
8. Personaliza la sección CTA: Entonces aquí estamos a
punto de ver cómo
crear un formulario en el
back-end usando formularios WP, perdiendo cualquier tiempo, vamos a
saltar dentro del tablero. Y por supuesto, notarás
que una de las características que
tenemos aquí son los formularios WP. Este es uno de los
plugins que se
instalaron mientras estábamos instalando las plantillas
prefabricadas. Entonces si hago clic en
formularios WP o en todos los formularios, déjame simplemente hacer clic en formularios WP. Entonces por defecto tenemos
estas dos formas. Notarás que tenemos aquí
una columna de código corto, y cada formulario tiene un código corto. Este es el código corto
que representa esta forma. Así que cada vez que el código corto aparece
en cualquier parte del front-end, este código corto
le está diciendo a WordPress hey, display, el formulario de inscripción. El mismo caso se aplica
a este formulario aquí. Por lo que podemos agregar una nueva forma, se
tomará a través del
proceso de adición de una nueva forma. Pero tengo un solo problema con este plugin de formulario específico. Es decir, la mayoría de las características
que necesitarás para
poder
beneficiarte de un plug-in extranjero, nuestro premium, tienes que pagar por
el plugin para poder
disfrutar de esas características, pero te mostraré un opción. Así que salgamos de aquí y
quiero mostrarte a
qué me refiero exactamente. Entonces editemos el formulario de inscripción. Actualmente se trata de las formas WP idean Ir al front-end
y seleccionando esto. Esa es exactamente esta forma. Es un formulario de inscripción. Muy bien. Vamos a Editar. Puedo mostrarte exactamente lo que quiero decir y luego
darte una solución. Esta es la forma que tenemos. Este es el campo
que tenemos en el formulario e ingresa tu dirección de correo electrónico y
luego el botón suscribir. Eso es exactamente
lo que tenemos aquí. El problema al que estaba
hablando E. Así que por ejemplo, si quieres ir a mercadotecnia, sólo
tenemos la
opción a la que conectarnos,
a herramientas de marketing en esta área. Y para usar estos otros, necesitamos estar en la
versión pagada de este plugin
para conectar este formulario a Mailchimp para que
cuando la gente se inscriba, se envíen a nuestra cuenta de
Mailchimp, MailChimp lista de correo. Necesitamos estar en la versión
pro
para poder aceptar
pagos usando nuestro formulario, necesitamos actualizar
a una versión de pago. Eso es lo que quise decir con la mayoría
de las características que te gustaría tener
para poder beneficiarse de un formulario Plug-in. Nuestra prima aquí. Hay un plugin
gratuito muy agradable que tiene todas esas características
ofrecidas de forma gratuita. Entonces lo que tenemos que hacer
es ir dentro de plugins, plugins
instalados eliminarán formularios
WP, el activar eso. Entonces solo lo eliminaré. Muy bien, así que vamos a Agregar Nuevo. Y ahora dentro del repositorio de
plugins, busquemos formar la naturaleza tiene más de 200 mil instalaciones
activas y si es desarrollada por una
empresa de WordPress muy reconocida llamada WP y MU Dev. Me gustaron estos chicos y me gusta recomendar productos
que he disfrutado usando. No tengo afiliación
a estos tipos. Simplemente me gustan sus productos. Así que instalemos
para mí la naturaleza en este momento. Vamos a activarlo. Muy bien, así que ahora lo
tenemos como uno de los plugins Instalados
y desplazándonos hacia abajo. Para mí, tampoco
debería estar
al final de esta lista aquí. Entonces iremos adentro. Acabo de hacer clic para mí más tarde. Este es nuestro dashboard. Permítanme cerrar
aquí este anuncio porque
no estamos buscando la versión
premium del mismo. Y por supuesto, aquí, aquí te encontrarás un resumen de
todas tus formas de menciones, todo el número de
envíos que la gente ha completado en los foros que
tienes en tu página saca menciones aumentar los
envíos porque tenemos, porque este plugin te
permite crear formularios, encuestas y cuestionarios. Entonces vamos a crear
un formulario y se le
presentará esta lista
de plantillas prefabricadas. Lo que necesitamos es una
suscripción a boletin. Vamos a continuar. Vamos
a darle un nombre. Formulario de suscripción y haga clic en Crear. Aquí estamos. Estos son los campos que tenemos a nuestro
alcance. Nombre una dirección de correo electrónico, y luego tenemos el botón
suscribirse, y tenemos los campos de inserción. En aquí, si hacemos clic en eso, podemos tener la opción de
añadir más campos. Y notarás que tenemos una opción de raya y opción
PayPal aquí. Básicamente somos capaces de agregar el pago a nuestro foro de forma gratuita. Recuerda en el otro plug-in, tuvimos que tener la
membresía premium para poder utilizar para poder tener
pago en nuestro formulario. Esto es solo un ejemplo de lo que es posible
con este plugin. Pero no voy a añadir
ninguno, ningún campo aquí. Porque lo que estamos haciendo
es un formulario de inscripción, no un pago para él. Por lo que quiero quitar
el nombre porque Eso no es
un campo que necesitamos. Sólo necesitamos una dirección de correo
electrónico. Por lo que elimine eso. Y ahora vamos a prever
el formulario en sí. Entonces así es como se ve. Dirección de correo electrónico, botón de suscripción. Cerremos eso y
vamos a publicarlo. Ahora que el formulario está listo, nos da el
código corto para mostrarlo. Así que sigamos adelante y copiemos eso. Ha sido copiado con éxito. Otra forma de copiar este código
corto es ir, déjame cerrar eso es
subir aquí al nombre del formulario. Haga clic en esta rueda dentada y
copie el código corto. Y se ha copiado con éxito
yendo en el front-end. Destacar eso. Retire los códigos cortos WP Forms, y pegue el nuevo formular
un formulario código corto. De inmediato esto cambiará a la nueva forma
que hemos creado. Vamos a actualizar eso y
vamos a previsualizar los cambios. Desplazarse hacia abajo. Ahí lo tenemos. Forma bonita, sencilla creada con un
bonito y potente lugging. Recuerda que mencioné
algunas otras características que tienes que pagar. En la otra forma, plugin se está integrando a servicios de lista de correo de
terceros como Mailchimp. O si quieres hacer tus campañas de
marketing a través una lista de correo
para que ese formulario
presente a las
personas que están configurando tus listas de correo en
un servicio de terceros, tienes que pagar eso. Pero con el formulador,
no es necesario. Ahora que hemos
creado este formulario, si vamos dentro de integraciones, notarás que puedes enviar estos datos de formularios a cualquiera de las aplicaciones de
terceros conectadas, conectarte a más apps en
la página de integraciones. Entonces por ahora no estamos conectados
a ninguna aplicación de terceros. Pero si hacemos clic en página de
integraciones o vamos directamente al área de estas
integraciones porque ahí es donde
seremos liderados. Ahora ahí es donde estamos. Formulado se integra con tus aplicaciones favoritas de terceros. Puedes conectar las aplicaciones
disponibles a través de la API aquí y
activarlas para recopilar datos en el
paso de integración de tus teléfonos. Entonces mira todas estas
opciones que tenemos aquí. Tuvimos que pagar para
poder conectar
nuestro formulario a MailChimp
en el otro plug-in. Pero aquí mismo, puedes
seguir adelante y conectar la API, y todo esto es gratis. Podemos conectarnos a
HubSpot, Slack, Trello, campaña activa, Hojas de cálculo de
Google. Todo esto se nos proporciona
de forma gratuita. Incluso podemos conectarnos
a zap aquí de forma gratuita. Por eso me encanta más tarde. Yo uso este plug-in para
crear mis formularios en todos los sitios web que construyo porque dicen que
si está funcionando, no necesita arreglar. Entonces para mí esto está funcionando. No necesito buscar
otros plugins extranjeros, que necesitaremos que tenga
una membresía premium para
acceder a los servicios que son
muy cruciales para cualquier forma. Así que esa es sólo mi opinión sobre ello. Siéntase libre de pagar por cualquier plug-in que sienta
tiene todo lo que necesita. Pero si buscas algo que sea
libre pero poderoso, este es el camino a seguir. Si quieres aprender
más sobre la formación y lo benéfico que
será para ti, especialmente como principiante. Adelante y busca un
bonito tutorial en YouTube. Te recomiendo ir
al WP MU Dev Channel, el WPA MU dev, los desarrolladores del plugin. Por lo que te recomiendo que vayas ahí
y busques formulado. Por ahora. Así es como crear
un formulario y
mostrarlo en la
sección llamada a la acción de tu landing page. En la siguiente lección, Veamos cómo
editar el pie de página. Te veré en breve.
9. Personaliza el pie de página: Bienvenido de nuevo. Por lo que ahora es el momento de
personalizar el pie de página. Personalizar el pie de página
va a suceder dentro del área Personalizar de nuestra configuración porque el
pie de página se crea usando la configuración de Astra,
no el constructor Elementor. Ese es el mismo caso
con el encabezado. Recuerda que usamos el área
Personalizar para personalizar nuestro encabezado porque fue creado usando la configuración del
asterisco. Entrando a personalizar, desplazándose hacia abajo hasta
el pie de página. Notarás que
uno de los elementos del menú aquí es para el constructor. Entonces vamos a seguir adelante
y hacer clic en eso. Eso inmediatamente trae consigo una representación del pie de página. Por lo que notarás que
tenemos este widget aquí mismo. Ese es este widget,
el widget de logotipo, ese es este de aquí mismo. Y estos widgets de enlaces rápidos, entonces tenemos los iconos
sociales aquí, y luego el área de derechos de autor. Entonces, antes que nada, digamos que no necesitas
los iconos de las redes sociales. Al fondo aquí,
ni siquiera los necesitas en tu foto. Simplemente puedes seguir adelante
y quitarlos. Y luego ahora nos
quedamos con dos columnas. Y queremos tener
sólo una columna y tenerlas en el medio. Podemos seguir adelante y
hacer clic en esta rueda dentada. Entonces elige una columna. Al hacer clic en copyright. Puede seguir adelante y seleccionar
alineación ahí, centro, y eso empuja
todo al medio. Publiquemos eso. Me gustó la forma en que se ve. Y por supuesto,
mientras todavía estábamos editando los textos de copyright, por supuesto
podemos cambiar
eso para dejarme arrastrar eso. Básicamente puedes
escribir lo que quieras si no quieres
usar un código corto. Entonces si yo, por ejemplo, gato que sólo se puede decir
copyright, intente necesitar 25. Eso es lo que aparecerá. O si quieres
usar los códigos cortos. Esto automáticamente
estará tirando del año para ti sin que necesariamente
tengas que cambiarlo manualmente. Y también está tirando automáticamente el título de
tu sitio
de los archivos del sistema. Entonces en caso de que cambies el nombre de tu sitio
web en
el tablero, el nombre del sitio en la foto
cambiará automáticamente, por lo que no tendrás
que hacerlo manualmente o tú mismo. Pero si no te importa
hacer eso tú mismo, siempre
puedes venir aquí
y quitarlos y simplemente escribiendo mi website.com. Y esa no es la
ortografía del sitio web. Muy bien, así que eso es eso. Y por supuesto ahora para
editar cualquier widget aquí, solo
tienes que hacer
clic en el
propio widget y aparecerá su
configuración. Bienvenido a esto. Muy bien, vigilado. Podemos seguir adelante y
cambiar estos detalles. Y las
opciones de menú de selección aquí es este menú específico que
desea
extraer de su lista de menús. Entonces volviendo al interior del
tablero de instrumentos, menús de apariencia. En el área
de menús de nuestro dashboard, tenemos una lista de menús y notarás
que tenemos contacto, menú
principal y menú de enlace
rápido. Esos son los tres menús
que tenemos en este momento. Y podemos crear un nuevo menú. Pero antes de que hagamos eso, si volvemos aquí, notarás que esto
tiene los mismos ítems, contacto, menú principal
y enlace rápido. Este aquí está el menú de Enlaces
Rápidos. Este es el Menú de Contacto. Y aquí arriba tenemos
el menú principal. Porque esos son los
tres menús que tenemos. Digamos que queríamos mostrar aquí
un menú diferente. Todo lo que tenemos que hacer es
crear un nuevo menú. Vamos a darle un nombre. Menú de pie de página.
Hagámoslo un menú secundario. Hagámoslo un menú de pie de página. Vamos a crear menú. Ahora lo tenemos como menú. Y lo que tenemos que hacer es agregar elementos de
menú de la
columna de la izquierda. Aquí podemos añadir cualquier ítem que
queramos a esa columna. Entonces digamos que queremos
agregar un enlace al carrito, un enlace a mi cuenta, y un enlace a la tienda. Vamos a agregarlos al menú. Y ahora tenemos esos
tres elementos de menú. Guardemos el menú. ha
actualizado el menú de pie de página yendo dentro de esta área. En primer lugar,
publiquemos los cambios que habíamos hecho antes de refrescar la página. Ahora está publicado.
Permítanme refrescar esta página. Desplazemos hacia abajo. Ahora, yendo dentro
del constructor de pie de página. Recuerda que tenemos
este widget aquí. Entonces al hacer click en eso, si hago clic en eso y selecciono menú, ahora
tenemos el menú de pie de página
ya que es una de las opciones. Así que haz clic en Menú de pie de página. Ahora que cambia a los
nuevos ítems que acabamos de crear. Y por supuesto podemos cambiar
el título de estos dos, algo así como menú
especial. Eso es todo. Por lo que publicó esa anulación. Para que puedas hacer lo
mismo con este menú. Cuando se trata del logotipo, podemos hacer clic en esa
rueda dentada ahí o simplemente hacer clic en este Editar elemento
que aparece aquí. Puede seguir adelante y cambiar,
reemplace esta imagen. Desplazarse hacia abajo para buscar el logotipo. Agrega dos widget y el logotipo cambiará
al logo que agregó. Y si quieres que este logo
lleve a algún lugar cuando
alguien hace clic en él, siempre
puedes agregar un enlace aquí. Pero solo pondré un placeholder justo ahí y publicaré eso. Así es como editar el pie de página de la landing page y esencialmente el pie
de página de todo el sitio web. Ahora creo que hemos terminado
con la landing page. Lo siguiente que
quería mostrarte es ahora que hemos visto cómo
mostrar los productos. ¿ Cómo creamos un producto usando WooCommerce
en el backend. Veamos cómo hacer eso
en la próxima lección.
10. Crea un nuevo producto con WooCommerce Plugin: Bienvenido de nuevo. Ahora,
comenzó a crear un producto o algunos productos
usando el plugin WooCommerce. Por lo que estamos aquí dentro del
tablero porque
ya instalamos WooCommerce mientras estábamos instalando la plantilla
prefabricada. Lo tenemos aquí. Debajo de
WooCommerce, tenemos productos. Esto es parte del plugin
WooCommerce. Hagamos clic en los productos. Por lo que estos son los productos
que tenemos actualmente. Estos son, por supuesto,
los marcadores de posición que venían con la plantilla prefabricada. Lo que queremos hacer es
agregar un nuevo producto. Así que haz clic en Agregar nuevo. Y vamos a darle un nombre a nuestro
producto. Productos, producto uno. Vamos a darle una descripción. Permítanme simplemente agarrar alguna descripción muy
rápidamente de uno de estos productos, Lorem Ipsum. Por lo tanto, ten en cuenta que la opción de pago de PayPal está apareciendo aquí
porque ya
arreglamos la integración de PayPal
WooCommerce. Vamos a pegar esa
descripción ahí dentro. Ahora, esta descripción aquí
es lo que aparece aquí abajo. Entonces esta descripción es lo que
necesitamos pegar aquí. Así que permítanme simplemente añadir una palabra, resumen para que podamos distinguirlos cuando
tengamos nuestro producto listo. Por lo que muy rápidamente antes de
hacer cualquier otro cambio, quiero publicar eso. Lo que queríamos hacer a continuación
es agregar una imagen de producto. Iré a subir
archivos, seleccionar archivos. Ve dentro de mi página de descargas. Había descargado dos
productos que
podemos utilizar como
productos de muestra. Entonces aquí estamos. Permítanme cambiar ese
nombre por un segundo. Nombre1, nombre2. Permítanme subir esos
dos productos. Correcto, por lo que ahora que
tenemos seleccionada esta imagen, voy a seguir adelante y
sumar a galería. Ahora nuestra imagen del producto está configurada. Vamos a decir Update. Vamos a previsualizar los cambios. Espera, ¿dónde está nuestra imagen de
producto? ¿ Lejos? Dijimos la galería de
productos, que se supone que deben
establecer la imagen del producto. Por lo que esta galería es por si
acaso
tienes diferentes imágenes
del mismo producto. Tal vez si has tomado fotos
del mismo producto desde diferentes ángulos
y quieres
poder mostrar todos esos ángulos
diferentes. Puedes añadir tantas imágenes
como quieras, la galería. Pero queremos establecer la imagen del
producto, ¿verdad? Así que voy a seguir adelante y
recoger eso rápido. Ahí lo tenemos. Entonces
vamos a actualizar eso. Y luego vamos a
prever los cambios. Ahí están nuestros productos. Recuerda, este resumen aquí
es lo que agregamos aquí abajo, descripción corta
del producto, y luego la descripción completa
del producto sube aquí
justo debajo del nombre del producto. Eso es lo que aparece aquí abajo. Por lo que han dejado
mucho espacio aquí, por lo que puedes agregar tanta
información como quieras, aunque signifique cinco párrafos que describen de
qué se trata el producto. Porque hemos agregado
una galería de imágenes, y sólo tenemos una
imagen en la galería. Sólo está mostrando
esa imagen, pero supongamos, por ejemplo. Esta es también una de las
imágenes de la galería. Añádelo a la galería. Ahora tenemos dos imágenes de la
galería de productos. Actualice eso. Vamos a
prever los cambios. ¿ Verdad? Entonces ahí estamos. Podemos ir, podemos desplazarnos
por las imágenes como queramos. Y también podemos ver una versión
aislada de la imagen. Permítanme cerrar esta parte. Y ahora nota que no tenemos ninguna opción de precios ni de
pago aquí. Y eso es porque eso es lo
siguiente que tenemos que hacer. Volviendo al interior de nuestro tablero. En primer lugar, no podemos tener nuestro producto en la categoría
uncategorized. Entonces vamos a darle una categoría. Digamos, por ejemplo, come una crema para la cara. Vamos a darle un precio. El precio regular es tal vez 249, pero ahora tenemos un
precio especial con descuento. Digamos que ahora es ahora es 130. Por supuesto que no es
un producto virtual y no es descargable. Inventario. Por supuesto que el
producto está en stock. Envío. Puedes seguir adelante y establecer tus dimensiones de peso. Productos enlazados. Entonces por si acaso tenemos otros productos que
queremos mostrar aquí, podemos seguir adelante y agregarlos. Entonces, por ejemplo,
déjame ir a la página de la tienda. Y si tenemos productos
que están relacionados con eso, aparecerán cuando ese
producto esté en exhibición. Entonces, por ejemplo,
aceite corporal de cacao y humectante diario
como ejemplo. Por lo que escribiré cacao
y ventas diarias de aplicaciones. Entonces el cacao está buscando. Digamos que queremos a la venta cruzada hidratante
diaria. Permítanme ahorrar eso
por un segundo para que podamos ver lo que realmente está
sucediendo en el frente. Muy bien, así que vamos a
prever los cambios. Ahora tenemos precios. Con un descuento. Tenemos una opción de add to cart. También podemos elegir la cantidad de estos productos que queremos. Digamos que queremos unidades
o estos productos. Ahora, también te puede gustar
el aceite corporal de cacao. Se trata de una venta de aplicaciones
o productos relacionados, que no necesariamente es
lo mismo que estos productos aquí. Podemos cruz-venta eso. Otra cosa que tenemos
que hacer es quitar. Como notas ahora tenemos en la galería tenemos
esta imagen repetida. Entonces porque ya es imagen
destacada, podemos seguir adelante y quitarla para
que no se repita porque la imagen del producto
misma estará en la galería. Entonces si actualizo eso, habiendo quitado aquí estas imágenes
repetidas, previsualizando los cambios. Ahora solo tenemos una instancia de esa imagen y puedes agregar tantas otras
variaciones como quieras. Básicamente así es como
crear un producto. Entonces esto marca el
final de la lección. Hemos aprendido a crear
un producto usando WooCommerce. En
las próximas lecciones simplemente vamos a estar usando Elementor para editar estas páginas porque se
crean
usando Elementor. Entonces te veré en
la próxima lección.
11. Ayúdame a enseñar a los estudiantes a 10,000: Hola mi amigo. En primer lugar, solo quiero decir muchas
gracias por
acompañarme en esta clase y
elegir aprender de mí. Y también quiero
decir felicitaciones por llegar tan lejos
en la clase. El hecho de que hayas
llegado tan lejos en la clase significa que estás
ganando valor de la clase. Y así te agradezco mucho y espero que estés
disfrutando de la clase en sí. Dicho esto,
necesito tu ayuda. Tengo la misión de enseñar al menos a 10 mil
empresarios como tú a usar elementary para construir
sus propios sitios web o landing pages para
vender sus productos. Y aquí te mostramos cómo puedes ayudar. Se ve cuando un nuevo
alumno se une a una clase en Skillshare y luego le gusta esa
clase y deja una reseña. Ayuda a otros alumnos a
saber qué esperar
de la clase. Y cuando una clase está recibiendo muchas críticas de los estudiantes, Skillshare dice:
Oye, ¿sabes qué? Esta clase está recibiendo
mucho compromiso y muchas críticas por parte
de los estudiantes. Por lo que debe ser de ayuda. Por lo que debe ser útil. Y así empujémoslo hacia arriba en la biblioteca para que sea más
descubrible por los nuevos estudiantes. Por lo que el
algoritmo Skillshare empuja esa clase hacia arriba y la
hace más visible, más descubrible
para los nuevos estudiantes. Porque ha estado recibiendo críticas
positivas. Y ahí es donde entran ustedes. Por favor, únete a mí en esta
misión y me ayudó enseñar al menos a 10 mil
estudiantes
cómo usar Elementor, cómo construir hermosas
landing pages, sitios web
funcionando dejando una reseña en esta clase y haciéndoles saber qué esperar
de esta clase. Sólo te tomará unos
dos minutos y ya está. Pero tu reseña contribuirá en gran
medida a ayudar a los
nuevos alumnos, los
futuros estudiantes, a saber
qué esperar de la clase. Clase cumple con tus expectativas. ¿ Superó tus expectativas? Si tienes alguna
pregunta, recuerda, siempre
puedes dejarlas
en el área de discusión debajo de este video y yo
podré ayudarte. Siempre respondo a
cada pregunta o comentario que los alumnos
dejan en cualquiera de mis clases. Y con eso dicho, sólo
quiero decir
disfrutar de la clase y nos vemos en la siguiente lección. Paz.
12. La página de la tienda: Bienvenido de nuevo. En esta lección, quiero
hablar de la página de la tienda. Todos nuestros productos se muestran
aquí para el cliente. Por lo que necesitamos tener una pequeña charla sobre la página. En este momento. Estamos viendo la clasificación
por defecto, pero tenemos un menú desplegable
que tiene algunas opciones. A partir de ordenar
por popularidad. Cuántas veces se ha
comprado el
producto de los más populares
a los menos populares. Entonces el siguiente es ordenar
por calificación promedio. Entonces por supuesto, el, el
producto con mayor calificación vendrá primero. Entonces tenemos ordenar por última vez, y esos son los últimos
productos que has añadido. Y por supuesto, como se puede ver, los dos productos que acabamos crear se han presentado
primero antes del resto. Y te darás cuenta que los hemos
creado primero y luego este fue el
último que creamos. Y por eso se
presenta como el último, como el primer producto. Tenemos tipo por precio de alto, de bajo a alto, y de alto a bajo. Por supuesto, eso se
explica por sí mismo. Entonces eso es todo sobre
la página de la tienda. Por supuesto, en realidad no hay mucho más que decir sobre la página. Lo siguiente que
queremos hacer es
mirar estas tres páginas. Y estas páginas se
crean usando Elementor. Por lo que necesitaremos
editarlas con Elementor. Veamos cómo hacer eso
en la próxima lección.
13. La página de Testimonials: Veamos ahora
estas páginas de Elementor. Por supuesto, aquí estamos. Entonces esta es la página
de testimonios. Por lo que notarás que
debido a que lo hemos abierto, ahora tenemos la opción de
editar con Elementor. Entonces, antes que nada, desplácese hacia abajo hasta el fondo, y así es como se ve. Por lo que notarás aquí
teníamos un formulario de inscripción de llamada a la
acción porque nos deshicimos del otro plug-in. Ahora no está apareciendo. Entonces eso significa que necesitamos reemplazar
esto por el
formulario formulador que creamos. Demos clic en editar con
Elementor. Aquí estamos. Entonces por supuesto esto es como la sección de héroes que editamos
en la landing page. Si seleccionas esta sección, tenemos la misma configuración. Podemos aumentar la altura, dejarla en el tamaño predeterminado. Podemos seleccionar estos testimonial. Este es un rumbo, así que por supuesto podemos añadir un enlace si queríamos
liderar a cualquier otro lado, pero no creo que
quisiéramos que liderara a ningún otro lado porque ya estamos aquí
en la página de testimonios. Y por supuesto podemos
cambiar lo que dice. Bienvenida. Podemos cambiar el color. Básicamente todo lo que hicimos en la sección de héroes y
en la landing page, podemos hacer aquí mismo. Entonces recuerda que esto
es un testimonio y ya vimos
cómo editar un testimonio. Al seleccionar esto, traemos los ajustes de testimonios y podemos sumar un título
al testimonio. Por lo que esta persona está en el departamento de
mercadotecnia. No es así como escribir
eso, pero no hay problema. Podemos añadir un enlace. Podemos abrirlo en una nueva pestaña. Dice abrir en nueva ventana, pero esto realmente significa abrir una nueva pestaña dentro
del mismo navegador. Así que no te preocupes por eso. Y por supuesto,
yendo al interior del estilo, podemos cambiar cada aspecto de los elementos testimoniales,
como el título. Podemos cambiar el
color del texto tal vez a algo así como nicho, color verdoso. Sólo estamos jugando
con los ajustes. No estamos tratando de hacer que
estos sitios web sean increíbles, pero por supuesto cuento con
ustedes para aplicar su creatividad y hacer que su sitio web sea lo más
atractivo posible. Recuerda, siempre podemos cambiar
esta superposición de fondo, seleccionando la sección yendo
dentro de la superposición de fondo, cambiar eso a color negro. Aquí hay varios
otros ajustes con
los que puedes experimentar. La semilla,
lo mejor que puedes conseguir. Y por supuesto olvidé
mencionar que
siempre se puede cambiar el
fondo como lo
hicimos con la sección de héroes. No tengo una imagen
que pueda usar aquí, pero claro, ya sabes, siempre
puedes tener,
claro, ya sabes, siempre
puedes usar
cualquier imagen que tengamos. Así ahora. Se ve mucho mejor. En realidad. Actualice eso. Vamos a prever los cambios. Así es como se ve esta
página huelen. Adelante y ahora que
ya sabes
jugar con el elemento de
testimonios. Si puedes seguir adelante y
hacer los cambios necesarios. Entonces todos tus testimonios. Entonces aquí, claro, lo que tenemos que hacer es
seleccionar este código corto. Ahora que está apareciendo,
eliminemos eso. Volvamos dentro de nuestra
formular los formularios. Recuerda que creamos
el formulario de registro. Por lo que haga clic en este volante
y copie el atajo. El atajo se ha
copiado con éxito. Volvamos aquí. Y vamos a pegarlo aquí. Ahora está apareciendo. Vamos a actualizar eso. Vamos a prever los cambios. Desplázate hacia abajo. Ahora nuestra forma de registro ys
apareciendo, es visible. Ahora te podrías estar preguntando
¿qué pasa si quisiera
cambiar el color de este botón? Eso es algo que olvidé
mencionar cuando
estábamos creando la forma misma. Así que volviendo dentro de
nuestro tablero, formulario
de registro, vamos a editar. Si bien
lo crearemos en este formulario, solo
usamos la pestaña Campos. Aquí hay varias
otras pestañas. Y estas son las pestañas que
tenemos
que pasar cada vez que estamos creando cualquier
formulario hasta el final. Y notarás
que estos campos, luego Apariencia,
entonces
el comportamiento es lo mismo que
vamos a seguir aquí. Entonces una vez que terminemos de
crear el formulario, añadiendo los campos, lo siguiente que hay que hacer es
cambiar la apariencia. Entonces cuando haces clic en eso, ahora estamos en la pestaña Apariencia. Y aquí podemos
decir, por ejemplo, queremos que sea plano
sin las fronteras. Si vamos a los colores, podemos elegir disfraz, y eso trae más opciones. Una de las opciones aquí
es el botón Enviar. Aquí podemos cambiar el color a tal vez algún tipo de
lectura, por ejemplo. Pero por supuesto, siéntete libre elegir cualquier otro color que quieras. Ese conjunto a eso. Vamos a prever antes de ahorrar. Muy bien. Vamos a actualizar eso. También puedes cambiar
los efectos de desplazamiento. Entonces en el botón de enviar y
el botón de envío de colores se desplaza. Queremos que sea quizá negro. En el foco. También queremos que sea negro. Actualice eso. Una vez que hayamos actualizado los cambios, podemos entrar aquí y
recargar esta página. Ahora, cuando pasamos el cursor, es negro. Así es como hacer cambios en la apariencia de todas
tus formas en formulado. Eso es todo acerca de estas páginas
de testimonios. Y por supuesto, si
abrimos la página sobre, es más o menos lo mismo. Usando elemental, puedes repetir los mismos
pasos con usado ahora debes haber aprendido a jugar con
todos estos elementos. Ya vimos cómo trabajar con todos estos diferentes elementos
en la landing page. Así que vayamos dentro de
la página de contacto. Dentro de la página de contacto, se supone que
tenemos un formulario de formularios WP. Recuerda que teníamos dos formularios
antes de eliminar ese plugin. Y el otro ante todo,
un formulario de contacto. Ahora que ya no
tenemos ese plug-in, lo que tenemos que hacer es entrar
dentro de los formularios terminadores. Yo rosado, deberíamos hacer
eso en la próxima lección. Entonces te veré en breve.
14. Página de "Contacto": Bienvenido de nuevo. Entonces aquí estamos dentro los formularios formuladores estaban
en el campo de los foros. Estamos viendo la lista de los formularios que hemos añadido a estas alturas, sólo
tenemos uno. Entonces, si tienes diez formularios que has
creado con formulador, ahí se enumerarán aquí. Lo que queremos hacer es
crear un nuevo formulario para nuestra página de contacto.
Vámonos allí. Déjame cerrar esto abajo. Cuando la página de contacto
y queremos crear un formulario para reemplazar
estos formularios WP ancho. Así que sigamos adelante
y haga clic en Crear. Y ahora esta vez queremos
crear un formulario Contáctenos. Entonces selecciona eso y continúa. Formulario de contacto, digamos Crear. Por defecto, ya está pre-poblado con los
campos que necesitaremos. Entonces por ahora, no creo que
necesitemos el número telefónico, pero si lo haces,
siempre puedes dejarlo ahí. Así que voy a quitar eso. Eliminar. Recuerda si eliminas algún campo y
cambias de opinión, siempre
puedes
insertarlo desde el campo insertado. Déjame cerrar eso.
Entonces aquí estamos. Empezaste el número de teléfono de campo. Aquí está el número de teléfono. Siempre puedes
agregarlo de nuevo, inserta. Por defecto, trae
la configuración para el teléfono, un campo que acabamos de agregar. Lo que voy a cerrar eso. Y aquí hay un teléfono que
puedes arrastrar y
colocarlo donde estaba. También puedes
tenerlos de lado a lado. Cuando esa línea azul aparece justo ahí
en el lado derecho, o en cualquier lugar que pase el cursor. Puedes colocar cualquier campo
en cualquier lugar que quieras. Si no quieres usar esto, también
puedes usar esta
opción en ciertos campos. Malezas igual, pero
quiero deshacerme del número telefónico como ya
lo había hecho. Ahora tenemos la dirección de correo electrónico, nombre, así que vamos a
cambiarlos así. Y luego el área de texto
del campo del mensaje. Vamos a prever eso
antes de publicarlo. Así es como se ve. Si los tenemos apilados uno
encima del otro. Vamos a prever eso. Así es como se ve. Ahora que nos gustaría cómo se
ve, vamos a publicarlo. Ahora está publicado. Vamos a elegir el
formulario formulador código corto, copiado con éxito. Se va decir esa página de
contacto y edita con Elementor porque aún no
habíamos hecho clic en eso. Editar con Elementor. Correcto, así que
desplábamos hacia abajo. Este punto. Vamos a eliminar ese código
corto allí y pega mi nuevo atajo
que acabamos de crear. Aquí estamos un formulario de registro de
aspecto muy agradable. Actualicemos los cambios
y previsualice la página. Desplazarse hacia abajo. Así es como se ve nuestro formulario de
contacto. Volviendo aquí. Déjame cerrar eso hacia abajo y podemos ir a la pestaña Apariencia. Que sea plano. Puedes cambiar el color del botón
enviar a ese rojo. En el hover. Hagámoslo negro, desenfocado. Hagámoslo también negro. Vamos a actualizar eso. Vamos a prever de nuevo los cambios. Desplazarse hacia abajo.
Ahí vamos. Aquí también tenemos un mapa y
podemos acercar y alejar. acaso tenemos una ubicación física a la que
queremos dirigir a la gente. Y la forma de hacerlo
es desplazarnos hacia abajo aquí seleccionando estos elementos que
sostienen el mapa. Vamos a seleccionar este elemento. Basta con hacer clic derecho aquí
y editar Google Maps. Ahora todo lo que necesitas hacer
es proporcionar una ubicación haciendo una
búsqueda rápida en Google de tu lugar. A continuación, puede establecer el nivel de zoom
predeterminado. Y estas otras partes son sencillas y
fáciles de editar para ti. Voy a seguir adelante y haga clic en Actualizar. Se trata de un elemento de redes sociales. Cuando hacemos clic en él para
editarlo, es bastante sencillo. Puedes quitar cualquiera
que no quieras. Puedes ir dentro de la
pestaña de estilo para editar los colores. Si quieres que lo hagan. Es una especie de naranja.
Ahí lo tenemos. También puede optar por tener
sus colores oficiales. Entonces si es Facebook,
Instagram, y Twitter. Pero iremos con disfraz. Mira lo que puedes hacer con
todos estos ajustes. También puedes cambiar
el color del hover. Así que ahora mismo cuando pasas el cursor, es negro, color secundario. Vamos a ver ¿qué pasa con el rojo? Eso es un color de fondo. Así que vamos a hacer clic en estos dos claros. Entonces vamos a cambiar estos
dos, tal vez un rojo. Y ahora el único que el icono
cambiará el color a leer. Escribe, actualiza eso. Vamos a prever los cambios. Desplazarse hacia abajo. Nuestra página de contacto. Ahora completa. Cada parte de nuestra página web está ahora completa y personalizada
a nuestro gusto. Curso. Tómate un tiempo para hacer
todo lo que esté a tu alcance para personalizar tu sitio web hasta que estés satisfecho
con cómo se ve.
15. Reflexiones finales: Esto marca el final de nuestra clase. Realmente espero que hayas aprendido
algo sobre cómo crear sitios web usando
WordPress y más específicamente, aprendiste a construir una tienda o
tienda de comercio electrónico con WordPress. Ahora lo siguiente que te
recomendaría aprender es SEO, optimización de
motores de búsqueda. Y así es básicamente cómo
hacer que tu sitio web sea visible para los motores de
búsqueda y visible
para tus usuarios previstos. Cuando la gente sale a motores de
búsqueda como Google para buscar los
productos que estás vendiendo. Te encantaría que tu
sitio web estuviera entre
los primeros resultados en
las páginas de resultados. Entonces, ¿cómo te vuelves visible
para el buscador para que muestren tu sitio web cuando gente busca los
productos que estás vendiendo. Ya publiqué una clase sobre optimización de motores de búsqueda, específicamente para WordPress
usa cómo optimizar tu sitio web de WordPress para hacerlo más visible
para los motores de búsqueda. Adelante y abre mi
perfil en Skillshare. Una de las clases hay
WordPress SEO simplificado. Observa que solo tienen
16 minutos de duración y aprende a hacer visible
tu sitio web. Aprende a optimizar tu
sitio web para motores de búsqueda. De lo contrario, fue un placer
enseñarte a construir una
tienda de comercio electrónico con WordPress. Y espero verte en la
próxima clase en el futuro. Mi nombre es visa Ken. Nos vemos en la siguiente pieza.
Ken Mbesa, Web Designer | 3D Artist
