Transcripciones
1. Introducción: Bienvenido de nuevo a otra clase
impresionante conmigo. Can bursa. Si es tu primera
vez descubriéndome. Bienvenido. Ahora he estado enseñando
cómo usar Elementor aquí
mismo en Skillshare
durante los últimos 1.5 años, te
he mostrado cómo diseñar páginas web
totalmente operativas. Cómo diseñar impresionantes landing pages de
clase mundial usando la versión gratuita
de elementary. Y hoy, quiero
mostrarte cómo diseñar una impresionante página de aterrizaje de e-book de la
que puedas estar orgulloso. Entonces si tienes un e-book o
tienes un amigo que tiene un e-book y quieren
proporcionarlo a los usuarios. Tal vez quieras vender
el e-book o solo
quieres permitir que la gente lo
descargue gratis. Esta es una buena manera de
presentarlo, como se puede ver aquí mismo, mi fondo, esta es la landing page
estará diseñando. Te estaré mostrando cómo se ve en breve para que
sepas qué esperar. Entonces, si eres nuevo en Elementor, esta será una gran
oportunidad para que aprendas el flujo de trabajo
y entiendas
cómo usar las diferentes herramientas
que Elementor te
proporciona para llegar a un
completamente página web de trabajo. Y si has estado
usando Elementor, no
creo que
haya nada nuevo en esta clase para ti. Esta clase está orientada más hacia personas que
apenas están comenzando en Elementor y
personas que simplemente les gusta
entender cómo construir una página web con
Elementor desde cero. Por lo que quiero mostrarte la
landing page rediseñando. Simplemente me desplazaré
de arriba a abajo de la página para que puedas
ver qué esperar. Entonces si estás tan emocionado como yo, sigamos adelante y
empecemos. Muy bien.
2. Instalar el tema de Astra: Entonces aquí estamos en mi tablero. Esta es una
instalación completamente nueva de WordPress, y como se puede ver, es 5.9.3. Entonces tu versión
podría ser diferente, pero lo que estamos a punto de hacer
seguirá siendo relevante. Por lo que sólo voy a
seguir adelante y deshacerme de esta notificación ahí. Y lo primero que queremos
hacer es instalar nuestro tema. Por lo que voy a seguir adelante y
haga clic en apariencia. Por defecto, el tema
activo es 2022, porque en este momento estamos en 2022. También tenemos 20202021, acaso te
gustan y quieres
usar uno de ellos. Pero el tema que me gusta usar en todos mis proyectos
se llama Astra. Y así vamos a seguir adelante
e instalar Astra. Por lo que voy a seguir adelante
y haga clic en Agregar nuevo. Y aquí se
presentará una lista de todos los temas disponibles. Yo elegiré a Astra. Así que haz clic en Instalar. Muy bien, ahora está instalado. Por lo que voy a seguir adelante y haga clic en Activar para convertirlo
en el tema activo. Y como se puede ver ahora, Astra es el tema activo. Entonces vamos a seguir adelante y cerrar
este mensaje aquí mismo. Y ahora en la siguiente lección, vamos a seguir adelante e
instalar elementor. Te veré en breve.
3. Instalar Elementor: Bienvenido de nuevo. Vamos ahora adelante e
instalemos el plugin elemental que usaremos para construir
la página en el front-end. Por lo que voy a seguir adelante y
haga clic en Plugins, Añadir Nuevo. Y dentro de estos directorio de
plugins, seguiremos adelante y
buscaremos Elementor. Y deberían ser los
primeros resultados aquí mismo. Por Elementor.com, cuenta con más de 5 millones de instalaciones
activas, por lo que la instalaré ahora. Adelante y activemos. Muy bien, así será redirigido
a este asistente de configuración. Ahora, si hubieras intentado
usar Elementor hace un
rato antes de que
actualizaran su plugin, notarás que no
teníamos este asistente de configuración, pero ahora lo hacemos. Es una forma fácil de ayudarte
a configurar las partes básicas de tu sitio web. Y vamos a llegar a ver eso a
medida que pasamos por los pasos. Entonces el primer paso aquí es
inscribirse en Elementor, pero no es necesario tener una cuenta elementor
para usar el plugin. Entonces voy a seguir adelante y saltaré eso. Entonces. Aquí puedes seguir
adelante y continuar con el tema Hola
que elemental creó. Tienen su propio equipo que es compatible con un plug-in. Pero debido a que
ya hemos instalado Astra, podemos seguir adelante y hacer clic en Skip. Astra es algo mucho más
poderoso. Y aquí mismo tenemos la oportunidad de darle nombre a
la página web. Y debido a que
ya le había dado un nombre mientras
instalaba WordPress, le
di este nombre, mi demo de la página de eBook. Pero siempre puedes seguir
adelante y
cambiarlo a cualquier otro nombre que quieras. Yo lo guardaré. Lo guardaré como demo de
mi página de eBook
y haga clic en Siguiente. Y luego si tienes
un logotipo de sitio web, puedes agregarlo aquí mismo. Pero no voy a añadir
el logo en este momento, así que voy a seguir adelante y haga clic en Skip. Entonces, aquí mismo
podemos empezar a editar nuestra página desde un lienzo en blanco
con editor Elementor. O podemos navegar desde
cientos de plantillas prefabricadas por Elementor
o importar nuestras propias. Entonces lo que queremos hacer es hacer click en
editar un lienzo en blanco con editor
Elementor porque queremos construir una página desde cero. Y habrá teniendo, ahora
podemos empezar a construir nuestra página web a partir de
esta pizarra en blanco. Y así es como instalar
elementor el plugin. En la siguiente lección, Veamos cómo empezar a construir
la página desde cero. Ahora que estamos aquí.
Te veré en breve.
4. Diseñar la sección de héroe: Bienvenido de nuevo. Ya es hora de empezar a
crear la landing page. Y la primera parte
de la página que vamos a crear es la sección héroe. La parte que viene en la
parte superior de cualquier landing page. La parte que capta la atención del
visitante o del usuario. Y porque fuimos
redirigidos a esta página directamente después de llenar y
terminar el asistente de configuración. Quiero mostrarte cómo construir la página desde dentro del
tablero porque no
quiero suponer que
ya sabes cómo crear o generar una
página web de WordPress desde el tablero. Entonces haré clic en este menú de hamburguesas y haré clic en Salir a Dashboard. Vamos a crear una nueva página y no usaremos esta. Por lo que haga clic en eso. Y al hacer clic en que
hemos sido redirigidos a la pestaña Páginas dentro del panel
de WordPress. Entonces lo que queremos hacer
es hacer clic en Agregar Nuevo. Y por cierto, esta es
la página que estábamos viendo. Déjame simplemente abrirlo para que
puedas echarle un vistazo. Por lo que haré clic en Vista previa y lo
abriré en una nueva pestaña. Y aquí está, mi demo de página de eBook. Ese es el título de la página, pero como se puede
ver, es un borrador. Entonces lo que queremos hacer es crear nuestra propia nueva página que
haremos nuestra landing page. Por lo que haré clic en Agregar nuevo. Y lo llamaré Skillshare. Skillshare e-book landing page. Así que déjame asegurarme de
que eso esté en gorras. Y lo primero que queremos
hacer aquí es ir dentro la configuración de Astro
y querer asegurarnos de que el diseño sea de
ancho completo, slash estirado. Y para la barra lateral, no
queremos la
barra lateral, así que no hay barra lateral. Veamos Estos elementos capaces. Queremos deshabilitar el
encabezado y la carpeta. Y si puedo saltar a
esta página aquí mismo, esta es la carpeta que
acabamos de desactivar. Entonces inhabilita eso y
déjame colapsar eso en eso. Sí, eso es todo. Volvamos dentro de
la configuración de WordPress. Estos son los escenarios astrales. Volvamos dentro de
la configuración de WordPress y vayamos dentro de la plantilla. Queremos decir
Elementor ancho completo. Por lo que haga clic en eso. Y ahora vamos a hacer clic en
Publicar, publicarlo. Ahora. Nuestra página ya está en vivo. Así que vamos a hacer clic en editar
con Elementor. Muy bien, entonces aquí estamos. Como se puede ver, no
tenemos esa carpeta que estuviera leyendo Astra en la otra página que se había generado después del
asistente esta página. Por lo que tenemos una
pizarra limpia con la que trabajar. Entonces lo primero que
tenemos que hacer es seleccionar una sección de doble columna haciendo clic en este
icono más aquí mismo, una sección de doble columna.
Y aquí lo tenemos. Hagamos clic en este signo más
para agregar un elemento de imagen porque el mentor dibuja
su nombre a partir de elementos, simplemente
arrastramos elementos
de este panel aquí a la página y luego
personalizamos esos elementos. Entonces por eso se
llama Elementor. Por lo que ahora que hemos arrastrado
esta imagen aquí,
si hago clic en la imagen, siempre y cuando sea el elemento
activo, serán los elementos
que
podemos personalizar aquí y puede decir por el nombre
de la elemental edición. Por lo que si seguimos adelante y hacemos clic en
este signo más aquí de nuevo, se mostrará estos elementos. Y podemos seguir adelante y arrastrar elementos de
rumbo ahí. Y ahora podemos personalizar esos elementos de
encabezado y antes
de tocar cualquier otra cosa, porque es el elemento activo, se
puede decir con este nombre
del elemento edit encabezado. Aviso si hacemos clic en la imagen, cambia para editar imagen. Eso significa que estos ajustes
son para la imagen. Eso es sólo para los principiantes. Si ya has
usado Elementor, Eso no es nuevo para ti. Entonces por si acaso mientras todavía
estemos aquí, quiere tener acceso
a esos elementos de nuevo. Sólo tienes que seguir adelante
y haz clic en este icono. Y trae los
elementos una vez más y
podemos colapsar todos estos
paneles así para, para revelar más elementos
que podemos utilizar. Contamos con elementos WooCommerce, elementos
de WordPress. Contamos con elementos generales. Pero para empezar, siempre
usaremos
los elementos básicos. Estos son los elementos más
utilizados en cualquier página. Por eso por defecto, siempre
está abierto en una
nueva página de Elementor. Por lo que ahora que hemos
agregado el encabezado, también
necesitamos agregar un editor de texto que
básicamente sea un párrafo. Y tiene algún texto de
placeholder. Ahora si seguimos adelante
y hacemos clic en esta imagen, necesitamos agregar una
imagen del libro. Así que voy a entrar aquí
a nuestra mediateca. Y porque si no
subió ninguna imagen, tenemos que ir dentro de
una carpeta que yo había preparado con
todos los activos que se va utilizar y encontrarás la carpeta assets en
la descripción a continuación este video puede
seguir adelante y descargarlo y utilizar todos esos activos
se proporcionan de forma gratuita. Así que vamos a hacer clic en subir archivos. Y si hago clic en Seleccionar archivos se
redirigirá a
esta carpeta de activos. Activos. Dentro de la carpeta de activos, podemos seguir adelante y
escoger la portada del libro electrónico. Entonces voy a hacer doble clic en
eso. Y aquí está. Por lo que ahora que está seleccionado, haré clic en Insertar,
y tenemos un libro. Déjame arrastrar eso un poco. Y lo que queremos hacer a continuación es agregar ese degradado fondo
colorido viste en la demo de intro. Y cómo hacerlo es, primer lugar, esta
es la sección, toda esta área
que está sosteniendo el libro y que está sosteniendo estas
dos columnas es la sección. Y para hacer cambios
a la sección, hacemos clic en esta parte aquí. Y ahora lee
Editar sección para realizar ediciones a la de
las columnas aquí, hacemos clic en esta parte aquí, cambios a cualquier columna. Si hacemos clic en esta otra parte, sigue siendo columna vacía porque ahora estamos
editando esta columna. Pero para editar la
sección, hacemos clic en eso. Y voy a seguir adelante y
decir estilo. Antecedentes. En lo normal. Necesitamos que el color
sea, digamos gradiente. Así que vamos a hacer clic en gradiente. Y por defecto,
este color rosáceo. Por lo que quiero sumar un segundo
color, que es 1524. Y ahí lo tenemos, un bonito, hermoso fondo de
gradientes coloridos. Puedes seguir adelante, por supuesto, y hacerlo de cualquier color que quieras. Simplemente puedes arrastrar
este color alrededor. Pero sólo quiero
dejarlo a los 24. Y puedes cambiar
este segundo color al color que quieras. Puedo arrastrar esto por ahí. También puedes arrastrar esto para llevarlo a la zona azul
y luego arrastrarlo alrededor. Pero quiero dejarlo en el rosa original
porque creo que se ve bien con la naranja. Haga clic en cualquier parte dentro de esta
sección para deshacerse de eso. Ahora lo siguiente que
queremos hacer es editar este rubro porque
no se ve bien en este momento. Así que vamos a seguir adelante y seleccionarlo y notarás que ha
cambiado para editar encabezado. Así que mientras sigue activo, quiero cambiarlo a uno porque es el encabezado principal
de esta landing page. Cada página web
necesita tener un H1, que es el comunicado que debe captar la atención de
las personas. Y debemos decirle a los motores de
búsqueda que esta página es sobre esto. Entonces, ¿de qué se trata esto? Entonces vamos a darle algunas mareas. Cambia tu vida hoy. Y si bien todavía está seleccionado, vamos dentro de estilo. Vamos a darle un color blanco. Cambiemos la fuente haciendo
clic en la familia de tipografía. Aparecerá el menú desplegable. Y vamos a cambiar eso a
Montserrat o a cualquier fuente que quieras. Montserrat, quiero
darle un peso
de fuente de 900 solo para
que sea muy audaz. Y luego aumentaré su
tamaño hasta tal vez ese punto. Y ahora
notarás que no está equilibrado en comparación con esta imagen. Por lo que necesitamos empujar estos ítems
dentro de esta columna hacia abajo. Así que vamos a seleccionar
esta columna en sí. Ahora se ha cambiado para editar columna. Iré a Avanzado. Y vamos a darle un
margen superior de 50 o tal vez 70. Muy bien, así
es como se ve. Vamos a actualizar eso. Vamos a seguir adelante y seleccionar el párrafo o
el editor de texto. Y ahora, una vez que seleccionamos, notarás que se ha
cambiado a editor de texto. En primer lugar queremos
cambiar el color a blanco. A continuación, por supuesto, necesitamos
cambiarlo para cambiar la tipografía o
font-familia a Montserrat. Entrar. Por supuesto,
necesitarás cambiar lo que dice esta declaración. Por lo que tendrás que ir dentro del
contenido, resaltar esto, y empezar a escribir
lo que quieras, sea cual sea la descripción
que quieras agregar allí. Entonces. Mentalidad, Lorem Ipsum. Vamos a actualizar eso. Y antes de ir a por, vamos a hacer clic en este icono de cambios de
vista previa
aquí para previsualizar los cambios. Se abrirá en una nueva pestaña. Y así es como nuestra sección de
héroes bucles. Y necesitamos agregar un botón para
permitir que la gente
descargue el libro. Así que volvamos aquí. Y mientras todavía estamos aquí, podemos hacer clic en esto para
exponer los elementos. Y bajo el panel básico
tenemos el elemento botón. Arrástrelo y sueltemos
ahí cuando
aparezca aquí la línea azul para indicar
que estamos listos para soltar. Y por supuesto una vez que lo dejamos caer, estos cambios para editar botón, o simplemente puedes seleccionarlo para asegurarte de que sea el botón
Editor. Y vamos dentro
del área de texto aquí
mismo y cambiarlo para descargar un e-book. Ahora, debería estar
abajo bajo, ¿verdad? Y por supuesto, si quieres
agregar un icono al botón, siempre
puedes
hacer clic en la biblioteca de iconos. Y busquemos
descarga. Descargar. Entonces digamos, digamos que ahora tiene ese
ícono ahí mismo. Ir dentro de estilo. Podemos aumentar su relleno. relleno es el espaciado entre el contenido interno y los
bordes del elemento. Entonces vamos a romper ese vínculo. Y luego por la izquierda, vamos a darle un 50. Acolmado. El derecho. A 50. Ahora tenemos un espacio
más grande aquí. Y para arriba y abajo, vamos a darle un 202020. Eso hace que el
botón sea mucho más grande. Lo siguiente que queremos hacer
es añadir una sombra de caja para el botón que debería darle alguna sombra para
darle un efecto 3D. Entonces una vez que hacemos clic en eso, mira el botón, ahora
tiene algún tipo de
sombra detrás de él. Y podemos seguir adelante y editar la borrosidad de la sombra. Creo que me gustó la forma en
que se ve ahora mismo. Y ahora, vamos adentro. lo que estábamos trabajando era el bucle normal
del botón. Ahora, vamos adentro hover y cambiar algunas de esas propiedades. En el hover. este momento, no cambia, pero en el hover, si
decimos, queremos cambiar el
color de la libración del texto a negro. Ahora cuando pasamos el cursor,
se vuelve negro, pero también queremos que cambie el color de
fondo. Entonces digamos que queremos
cambiarlo a blanco, así. Y mientras todavía estamos bajo
flotar sobre la animación, tenemos una variedad de animaciones
que podemos elegir. Sólo quiero elegir crecer. Y eso es lo que hace. Adelante y experimenta
con el resto. Ahora haga clic en actualizar eso. Lo siguiente que
queremos hacer es agregar una breve declaración aquí mismo e informar al usuario de
los formatos en los que el
libro está disponible. Para que podamos seguir adelante y
hacer click por favor elementos, ícono y arrastrar un
nuevo texto a esta área. O déjame simplemente borrar eso. Podemos simplemente seguir adelante y
duplicar este texto aquí mismo. solo puedas
seguir adelante y hacer clic con el botón derecho, haz clic derecho en esto y duplica Entonces podemos poner esto
justo debajo de ahí. Vamos a seguir adelante e ir
dentro de la tipografía de estilo. Y hagamos este texto
un poco más pequeño. Para el estilo de texto,
digamos italiano. Entonces vamos a resaltar. Este libro está disponible en formatos
PDF y Kindle. Vamos a actualizar eso. Y vamos a prever los cambios. Muy bien, y esa es
nuestra sección de héroes. Y antes de
concluir esta lección, solo
quiero agregar algún relleno en la parte inferior y la parte superior de esta sección para aumentar
el espaciado entre el contenido y el borde
superior e inferior. Así que vamos adentro aquí y
seleccionemos la configuración de la sección. Estos cambios a Sección. Vamos adentro avanzado. Rompamos este enlace. Porque si no lo hacemos, lo que sea, déjame
vincular eso juntos. Cualquiera que sea el cambio que
hagamos en una de estas células afectará a
todas las demás células. Pero si rompemos esto, podemos cambiar las células individuales. Por lo que queremos cambiar la parte superior e inferior. Vamos a darle un 50. Por lo que notarás ahora tenemos
un espaciado más grande aquí. Y si, si cambiamos
el top a 50 también, tenemos algún
espaciado agradable en la parte superior. Entonces sigamos adelante
y actualicemos eso. Por supuesto, puedes agregar
tanto relleno como quieras, no necesariamente
tiene que ser 50. Vamos a seguir adelante y
previsualizar los cambios. Y ahora creo que se ve
mucho más presentable. Entonces esa es nuestra sección de héroes. Creo que hasta ahora me está gustando. Puedes seguir adelante y hacerte más
creativo y ver qué más, qué otras propiedades
puedes jugar con
qué otras propiedades
puedes jugarpara que sea mucho
más hermoso. Por supuesto, estos colores
son los que he elegido. Eres libre de elegir
tus propios colores. Y eso nos lleva
al final de esta lección. En la siguiente lección, Veamos cómo crear
la sección de socios. Te veré en breve.
5. Crea la sección de socios: Hola ahi, Bienvenido de nuevo. En esta sección, quiero
mostrarte cómo crear la sección de logotipo de partners usando el elemento
carrusel de imagen. Entonces, sin perder el tiempo, saltemos dentro de nuestro
editor. Aquí estamos. Entonces para agregar una nueva sección, vamos a seguir adelante y hacer click en eso, Añadir icono de nueva sección. Y tenemos diferentes opciones para el tipo de sección que queremos. Queremos una sección de ancho completo. Entonces adelante y haz clic en eso. En otras palabras, solo
tiene una columna. Lo primero que queremos
hacer es por supuesto, separar esta sección
de la sección de héroes. Entonces seleccionando la sección en sí para asegurarse de
que lea la sección Editar. Vamos adentro avanzado. Y vamos a romper este
enlace en el margen. Y vamos a darle
un margen de 50 píxeles. Por lo que en este momento
hay un espaciado entre las dos secciones de 50 píxeles. Lo siguiente que queremos
hacer es hacer clic en el signo más para agregar algunos elementos
dentro de la columna. Y lo que queremos hacer es
arrastrar un rumbo ahí dentro. Llamemos a esto nuestros socios. Y queremos
llevarlo al centro. Entonces mientras todavía estamos
bajo contenido, vamos a Alineación y empujarlo al
centro así. Y esto es ahora un H2, decir, un rubro dos. Y
por si acaso te estás
preguntando qué queremos decir con H1, H2, H3, H4, todo el camino a H6 hace nuestros niveles
HTML de encabezados, y todos ellos sirven a un propósito
diferente. Entonces porque ya
tienes un H1 en esta página y solo deberíamos
tener un H1 en cualquier página web. Podemos tener tantos
elementos H2 como queramos. Los encabezados dan
jerarquía a la página web. Y eso es bueno para SEO o optimización de motores de
búsqueda, pero no quiero
profundizar en eso. Entonces, bueno, Socios
sigue siendo seleccionado. Vayamos dentro de estilo. Y, por supuesto,
cambiemos el color del texto. Y quiero darle un
gris oscuro que es casi negro. No negro puro,
sino casi negro. Por lo que el triple 40 debe darle ese
color negro no tan rico, sino grisáceo. Y luego por supuesto, vamos a hacer clic en cualquier parte dentro de aquí
para deshacernos de eso. Y vamos a hacer clic en Topografía
para cambiar la familia de fuentes a Montserrat o a cualquier fuente que desee. Ahí lo tenemos.
Lo siguiente que quiero hacer es darle un peso de 800. Y creo que me gusta ese tamaño, así que quiero cambiar eso. Lo siguiente que
quiero hacer es hacer clic en este icono para volver a revelar los
elementos. Y dentro aquí, quiero
buscar carrusel, y tenemos carrusel de imagen aquí. Entonces básicamente este es
un slider para imágenes. Lo arrastraré y lo
soltaré tan pronto como aparezca
ese indicador azul. Y ahora notarás
el momentáneo dejarlo caer. La
configuración del carrusel de imagen aquí arriba. Y podemos hacer click en este
signo más aquí para agregar los diferentes logotipos que queremos
tener en el slider. Entonces porque no los
han subido, voy a entrar, subir
archivos, seleccionar archivos, y en la carpeta de activos de la que
acabo de
contarte, encontrarás a estos socios fold, socios Logos, carpeta. Se puede seguir adelante y seleccionar
todos ellos y abrir. Muy bien, así que
todos están subidos. Vamos a crear una nueva galería. Y ahí lo tenemos. Insertar galería. Y ahora nuestro carrusel está
mostrando los logotipos. Pero hay dos espaciados porque en este momento el ajuste es mostrar sólo tres
logotipos a la vez. Entonces si vamos dentro de
diapositivas para mostrar, no
queremos que se muestre el
número por defecto de diapositivas, digamos cinco, porque
tenemos seis de ellas. que se desplaza para mostrar el sexto y continuo
desplazamiento infinitamente. Vamos a actualizar eso. Y vamos a prever los cambios. Muy bien, así que ahí lo tenemos. Entonces asumiría que si
estás vendiendo un libro, podrías tener algunos socios, pueden ser editores
o las empresas con las que
te estás asociando en
ese proyecto en particular. Por lo que tal vez quieras mostrar sus logotipos justo debajo de
la sección de héroes. Por eso tenemos esta sección. Y así es como crear
la sección de socios. En la siguiente lección, veremos cómo crear una sección de
llamada a la acción que tenga una descripción de lo que la gente debe
esperar en su e-book. Entonces veamos cómo
hacer eso en breve.
6. Temas de libros electrónicos y sección CTA: Bienvenido de nuevo. Hasta ahora
hemos podido crear nuestra sección de héroes y
nuestra sección de socios. Y por supuesto,
hasta este punto te das cuenta la nuestra alándola. Simplemente
lo estábamos haciendo por el estilo. Pero pensé que necesitamos hacer
esto de una manera estructurada, de una manera que
sepas qué esperar. Entonces seguí adelante y
saqué la página que había creado de antemano antes de
empezar a grabar esta clase. Solo para que nos pueda
guiar sobre qué
esperar para que sepas lo que estamos
a punto de crear widget. No solo estamos creando la siguiente sección sin que
sepas cómo se verá. Así que saqué esta
página para
poder desplazarse y mirar la sección que estamos a
punto de crear. Y luego seguimos adelante
y lo creamos. Esta es la sección
que estamos creando. Estos son básicamente los temas que la gente
encontrará en el libro. Y por supuesto, recuerda que
esta es una landing page. Tiene que ser convincente. Se necesita convertir a las personas. Ese es el papel de
una landing page. Se necesita convertir usuarios
o visitantes en compradores. Y para ello,
hay que darle a la
gente la mayor parte de la información que
necesitan como sea posible. Una forma de dar información
sobre tu libro es contándole a
la gente sobre los diferentes temas
que cubre en el libro. Por eso es importante esta
sección. Entrando dentro de nuestro editor de libros electrónicos. Tenemos que agregar una nueva sección. Y como se puede ver aquí mismo, esta es una sección que
tiene tres columnas. Pero también tiene esta sección aquí que
es una sola columna. Entonces, ¿cómo incorporamos
eso en nuestra página? Entonces sigamos adelante y
digamos agregar nueva sección. Y necesitamos agregar una sección de ancho
completo que tenga una sola columna. Y podemos seguir adelante
y hacer clic en este icono aquí
mismo y arrastrar un
nuevo encabezado aquí mismo, como lo hemos hecho antes. O simplemente podemos seguir adelante y duplicar esto y arrastrar
el duplicado aquí. Pero antes de que hagamos eso, quiero sacar a la luz
una herramienta muy útil que olvidé
mostrarles cómo sacar al día, que ayudará a
acelerar nuestro trabajo. Así que iré dentro de
este menú de hamburguesas, preferencias de
usuario,
tiradores de edición, click, Sí. Y ahora cuando pasas el cursor
sobre estas columnas, notarás que tenemos configuraciones
adicionales que aparecen
que nos ayudarán a evitar clic derecho para
hacer, para tomar medidas. Así que en lugar de hacer clic con el
botón derecho, hacer clic con el botón derecho en
base para duplicar , solo
puede pasar el cursor sobre
estos y hacer clic allí. Y ahora hemos duplicado eso. Ahora podemos arrastrar
esto ahí dentro. Y tenemos un rumbo. Ahora tenemos que separar
estas dos secciones. Entonces, antes que nada,
déjame hacer clic en eso, ir adentro avanzado, romper ese enlace y luego
darle un margen en la parte superior. Ahora tenemos ese espaciado ahí. Muy bien, por lo que seleccionando
este rubro, seleccionando este encabezado, vamos a cambiarlo a
este libro portadas. Dame esos tres puntos. Por supuesto, siéntete libre de escribir
lo que quieras aquí. Y por supuesto, dejémoslo
como H2 porque es un H2. Y luego vamos a
seguir adelante y hacer clic en este ícono de Elementos y luego
arrastra una frase ahí mismo. Y mientras todavía está seleccionado, vamos dentro del estilo y
alinearlo en el centro. Ahora bien, esta puede ser una
breve descripción de una breve descripción
de esta sección. Entonces la sección contiene cubierto en el libro y
ese tipo de cosas. Permítanme simplemente eliminar
algunos de estos textos. Así que adelante y escribe
lo que quieras ahí. Ahora, observe que
hay demasiado espacio entre los dos y necesitamos que
estén más cerca juntos. Por lo que mientras esto todavía está seleccionado, se puede ir dentro avanzado, romper el enlace de margen ahí, y luego reducimos
el margen superior, tirando de ellos juntos así. Y luego justo debajo de ellos, vamos a actualizar eso. Primero. Vamos a prever los cambios. ¿ Verdad? Creo que se ve genial. Pero volviendo a nuestra muestra, esto es más grande y
es de color naranja. Así que vamos. Que tenemos la libertad personalizarlo
tanto como queramos. Así que mientras aún esté seleccionado, entraré dentro de la tipografía de estilo. Vamos a darle un peso 600. Y aumentemos
el tamaño arrastrando esto. Tal vez hasta 45. Entonces vayamos dentro de
textos, color 1524. Ese es el color que elegí. Y luego justo debajo del
encabezado y descripción, tenemos estas tres columnas. Entonces vamos a traer
las tres columnas. Haciendo clic en ese
icono de elemento justo ahí. Tenemos que arrastrar en
una intersección. Entonces lo arrastraré y
lo soltaré tan pronto como aparezca la línea
azul. Y ahora tenemos dos
columnas por defecto. Entonces lo que tenemos que hacer es hacer
clic más ahí mismo. Y luego necesitamos icono de Tipo. Y lo que necesitamos es un cuadro de iconos. Arrastrémoslo y sueltemos
ahí para ver cómo se ve. Por lo que notarás que
es una caja que tiene un ícono y un encabezado
y alguna descripción. Ahora vamos a
personalizarlo para que luzca así. Entonces primero lo primero, vamos a copiar la gestión del tiempo. Y vamos al
título y descripción. Vamos a pegar la gestión
del tiempo ahí y luego esa es la breve descripción de
ese tema en particular. Y cambiemos el ícono. Aquí adentro. Escribiré reloj para
indicar la gestión del tiempo, que se trata esta
sección, qué se trata esta
pequeña sección. Entonces por supuesto, vamos a cambiar
los estilos de este cuadro de iconos. Así que mientras todavía está seleccionado, vamos dentro de estilo. Si miro, si
colapso el ícono, notarás que tenemos dos
paneles, ícono en contenido. Entonces para el icono color primario, queremos que sea ese color. Ocho Veinticuatro. Se puede
cambiar el color al hover, tal vez digamos triple 40. Así que en el hover,
cambia a ese color. Y luego
colapsemos el ícono. Y vamos dentro del contenido. Por supuesto, tenemos
los diferentes textos o opciones de tipografía que ya
hemos visto antes. Podemos cambiar el color
al triple 40. Y luego podemos ir
dentro de la topografía y cambiar la
familia de fuentes a Montserrat. Y por supuesto podemos aumentar
la forma de fuente a 800. Y eso es todo. Entonces lo que tenemos que
hacer a continuación es en lugar de repetir lo mismo aquí
mismo, vamos a seguir adelante y duplicar
eso al pasar el puntero sobre esa columna y luego hacer clic en
eso para duplicarlo. Duplicarlo una vez más, y luego eliminemos esto. Ahora tenemos tres columnas. Y luego dupliquemos
esta intersección haciendo clic en este icono de
intersección duplicado. Y ahí lo tenemos. Entonces vamos a actualizar eso. Y vamos a prever los cambios. Correcto, impresionante. Por lo que ahora lo único que tenemos que
hacer es copiar estos títulos. Voy a hacer clic en éste. Pega eso ahí dentro. Vuelve aquí. Copia ese liderazgo
Ganar estilo de vida. Entonces vamos a hacer clic en eso. Y ahora vamos a
asegurarnos de que los iconos sean relevantes para los temas
que representan. Comunicación tan efectiva, tal vez podamos
buscar micrófono. Voy a insertar eso
para la dirigencia. Entonces para el estilo de vida ganador, Vamos a seguir adelante y seleccionar dinero. Inserte eso. Actualice ahí. Revisemos los cambios. Ahora desplazándose hacia abajo. Ahí lo tenemos,
este libro cubre, y luego tenemos lo que cubre. Pero ahora nota que tenemos algún fondo grisáceo
justo detrás de esta sección. Entonces concluyamos esta lección mirando cómo hacer eso. Por supuesto, este color está justo
detrás de toda la sección. Y también tenemos este
botón aquí mismo. Entonces seleccionaré
toda la sección, la sección de columna única
que sostiene este encabezado, la descripción, y
las intersecciones. Entonces selecciona eso. Vamos al estilo,
fondo, color. Arrastrémoslo
hasta tal vez punto. Creo que me gusta ese color. Ahora nota que no tenemos relleno en la parte superior
y en la parte inferior. Así que sigamos adelante
y haga clic en Avanzado. Rompe ese enlace justo ahí, y luego relleno superior 50
y relleno inferior 50. Ahora tenemos ese espaciado. Entonces para agregar ese botón que acabas ver en nuestra imagen de referencia. Vamos a duplicar eso
y arrastrémoslo. Vamos a dejarlo ahí. Ahora notarás que está en el lado izquierdo. Entonces, mientras aún bajo contenido, alinearlo con el centro. Y agreguemos algún margen
en la parte superior del botón. Entonces mientras el botón aún
está seleccionado, botón
Editar, avanzado,
margen, superior. Vamos a darle un 50. Actualice eso. Y ahora notarás
que esta sombra paralela o esta sombra de caja es demasiado oscura
sobre el fondo blanco. Aquí mismo. Se
ve bien por el fondo colorido, pero debido a que odia
sobre un fondo blanco, es
necesario reducir la oscuridad. Así que mientras todavía está seleccionado, vamos dentro de estilo. Sombra de caja. Hagamos clic en
este icono de color aquí mismo. Y vamos a reducir la riqueza o la opacidad de
la sombra de caja. Y luego actualizar eso. Vamos a prever los cambios. Y ahí lo tenemos. Hasta ahora, me gusta lo que tenemos. Siguiente. Veamos cómo
agregar esta sección de video. Donde cuando alguien hace clic para ver una breve historia
sobre el e-book, tal vez sea una historia sobre
el autor o el jinete. Al hacer clic yacía, hay esta superposición
y trae un video que se puede ver
sin distracciones. Entonces veamos cómo hacer
eso en la próxima lección. Te veré en breve.
7. Sección de vídeo: Bienvenido de nuevo. Entonces, hasta ahora hemos creado
nuestra sección de héroes,
nuestra sección de socios,
y la sección de temas, que tiene un llamado a la acción. A continuación, queremos
ver cómo crear esta breve historia sobre
la sección de e-book, es
decir un video. Entonces ir dentro de nuestro editor, por
supuesto,
lo siguiente que tenemos que hacer es agregar una nueva sección. Y esta sección tiene que ser una sección de ancho completo una vez más. Y por supuesto que necesitamos
agregar un poco de espaciado entre ella y la sección
anterior. Por lo que al hacer clic en la
propia sección coincide avanzado,
romper ese enlace. Margen de 5050 píxeles en la parte superior. Y puedes decir porque
aquí están pixeles, puedes cambiar eso a porcentaje
EMS de RAM. Vamos a actualizar eso. Y luego hagamos clic
aquí en el letrero Plus para sacar el video. Y antes de sumar
el elemento video, por
supuesto tenemos que
agregar este rubro aquí. Así que déjame sólo copiar
eso. Entra aquí. Y podemos simplemente seguir adelante
y duplicar esto. Nuestros socios duplican eso. Y luego vamos a arrastrarlo. Déjame llegar al fondo. Desplázate la rueda del ratón mientras todavía
estás sosteniendo eso. Y dejémoslo ahí. Y mientras todavía está seleccionado, vamos a entrar aquí y
déjame pegar eso ahí. Por supuesto que no estás degustando
nada porque no
tienes esta página de referencia. Muy bien, así que ahora que
tenemos eso ahí, volvamos a hacer clic en ese icono de
Elementos. Y arrastremos ahí un
elemento de video. Dejémoslo ahí
inmediatamente hacemos eso. Observe que tenemos la configuración de
edición de video. Ahora, aquí es donde pones el enlace tu video en YouTube. Por lo que necesitarás
tener un canal de YouTube, luego subir tu video
a tu canal, y luego agarrar el enlace que YouTube te proporciona
y suéltalo aquí. Por supuesto, tienes
diferentes lugares de los que puedes recuperar el video. No necesariamente
tiene que ser YouTube, pero prefiero YouTube
porque es el
sitio web de video más popular de la tierra. Entonces lo siguiente que tenemos que
hacer es por supuesto
sacar esa superposición. Cuando alguien hace clic en Play, queremos que tenga
esta superposición oscura. Por lo que sólo ven el video, nada más que los distrae. Así que volvamos aquí. Y antes de hacer eso, echemos un vistazo a algunos de los ajustes que tenemos aquí para que
puedas configurarlo para que se reproduzca automáticamente
cuando se cargue la página. Simplemente
comienza a jugar automáticamente, pero no queremos eso. Así que déjame parar eso. Podemos silenciarla para que
cada vez que se cargue la página,
esté silenciada, a
pesar de que esté jugando. Entonces también podemos bucle para
que cada vez que
llegue al final, se inicie de nuevo automáticamente
sin ninguna entrada del usuario. Y tenemos todos estos
otros ajustes diferentes. Puedes seguir adelante y
jugar con ellos para ver cuál te gusta. Entonces si colapsamos este video y entramos en la superposición de imagen, podemos habilitar la superposición de imágenes y eso significa que
me dejen cerrar eso. Por lo que ahora mismo con este
deshabilitado, mostrará la miniatura
que tienes en YouTube. Este video está en YouTube. Y sin embargo se ve en YouTube
es exactamente como aparecerá aquí. Pero si venimos aquí y
decimos habilitar superposición de imagen, podemos seleccionar una imagen para que sea
la miniatura de nuestro video. Entonces porque no tienen esa imagen aquí, la subiré. Yo lo había creado
y lo encontrarás en la carpeta de activos que proporcioné. Así que vayamos dentro de los activos. Libro electrónico, imagen superposición de video. Entonces voy a hacer doble clic en eso. Y voy a insertar medios. Y ahora tenemos esta imagen bonita
y limpia que se presenta y consistente con la marca de tu página. Y luego para traer este efecto
de esta capa oscura aquí, esto se llama efecto
lightbox. Así que vamos a entrar aquí y
luego vamos a marcar la caja de luz. Entonces vamos a actualizar eso. Y vamos a prever los cambios. Muy bien, así que
desplábamos hacia abajo. Y aquí está nuestra sección de videos. Entonces si hacemos clic para jugar, tenemos ese efecto Lightbox. Y así es como crear
esta sección de video. En la siguiente lección, veamos cómo crear
estos contador
aquí mismo que muestra algunas
estadísticas sobre el libro electrónico, como número de miembros de
descargas, cuántas
reseñas de cinco estrellas tiene, y cuántos videos gratuitos que vienen con la compra
del e-book. Entonces nos vemos en breve.
8. Sección de contadores de estadísticas: Bienvenido de nuevo. Entonces a continuación,
queremos ver cómo
crear estos contadores sección que muestre algunas
estadísticas sobre su e-book. Así que vayamos dentro de nuestro editor. Y por supuesto, como ya
has adivinado, lo siguiente que tenemos que
hacer es agregar una sección y tiene que ser una sección de ancho
completo. Entonces vamos a seguir adelante
y hacer clic en eso. Y por supuesto que necesitamos crear algún espacio entre
las dos secciones. Por lo que mientras esto aún esté seleccionado, voy a entrar avanzado. Quita ese enlace y
luego 50 en la parte superior. Y ahora tenemos ese bonito espacio. Como notas aquí, tenemos este color degradado que
teníamos aquí mismo en la parte superior. Entonces eso es muy fácil. Elementor nos
proporciona una forma de copiar efectos de una sección a otra sección o de una
columna a otra columna. Entonces si hago clic con el botón derecho en
esta sección, copia, puedo bajar aquí. Porque esta también es una sección. Puedo hacer clic con el botón derecho,
luego pegar estilo. Y va a pegar el relleno que ponemos en la parte superior y la parte inferior
y el color de fondo. O podríamos haber
hecho eso manualmente, lo que habría
tomado más tiempo. Por lo que ahora que tenemos eso, vamos adelante y
agreguemos una intersección. Esta intersección necesita
tener un contador. Entonces básicamente esto es un contador. Esto de aquí mismo es un
contador multiplicado por cuatro. Por lo que haga clic en ese signo más aquí
para sacar a la luz los elementos. Y luego aquí
vamos a tomar contador. Y aquí está. Arrastrémoslo ahí. Arrastrémoslo ahí. Y ahora, como se puede ver, se cuenta todo el camino hasta
ciento ciento. Aquí están los números de final. Entonces este es el número en el que
quieres que se detenga. Entonces digamos que se ha
descargado 17 mil veces. Por lo que tenemos ese 17 ahí y
se iniciará de 0 a 17. Entonces el número de sufijo es lo que por supuesto viene
después del número. Entonces 17 mil, en
lugar de escribir 17 mil, porque eso
llevaría demasiado tiempo. Vamos a escribir 17, kay? Puedes empezar desde cualquier lugar. También podemos empezar a partir de las diez. Entonces lo siguiente que tenemos que
hacer es editar este texto aquí. Descargas. Y por supuesto vamos a
cambiar el color a blanco. Así que ir dentro de estilo, blanco, Ese es el
número para el título. También es cambiarlo a blanco. Cambiemos la tipografía. Montserrat. Por lo que voy a
hacer clic en la font-familia. Acabo de encantar monstruo envuelto. Vamos a actualizar eso. Y ahora que estamos satisfechos
con cómo se ve,
todo lo que tenemos que hacer es
duplicarlo tres veces más. Entonces flotando sobre esto, voy a hacer clic en eso una,
dos veces y tres veces. Entonces vamos a deshacernos de esto. Pero si quieres añadir más, por
supuesto, siéntete libre de. Por lo que voy a hacer clic dentro de
este segundo. Y entonces cambiaré eso a
qué hicimos los miembros más felices? Opiniones de estrellas, regalo de regalo. Entonces miembros de nuestra
página web o de un club de libros, digamos que son
tres miembros de K. Entonces vamos adentro aquí y digamos críticas de cinco estrellas. Tenemos cerca de 13 mil críticas
de cinco estrellas. Y
digamos digamos lectores
activos. Digamos que los lectores gay de Jove
o algo así. Así que vamos a actualizar eso y
vamos a previsualizar los cambios. Así que desplábamos hacia abajo
y veamos qué tenemos. Ahí vamos. Por
lo que notarás que necesitamos algún espacio entre esta
sección y esta sección. Entonces regresemos aquí
y seleccionemos nuestra sección. Ir decir ese vasto margen, arriba. Mantengámoslo a los 50. Hecho, vamos a darle un 100. Vamos a actualizar eso. Vamos a prever los cambios. Desplazarse hacia abajo. Muy bien. Muy bien, entonces
lo siguiente que vamos a hacer es trabajar en una breve historia
sobre el autor. Para que como se puede ver en
nuestra página de referencia, tenemos una imagen
del autor y una breve historia o
descripción aquí, y la firma del autor con algunos mangos de redes sociales. Entonces veamos cómo crear esta sección en nuestra próxima lección. Te veré en breve.
9. Acerca de la sección Autor: Hasta ahora hemos creado todas estas secciones
hasta el área estadística. Lo siguiente que queremos hacer
es crear la biografía del autor. Así que volviendo al interior de nuestro editor, como ya lo has adivinado de nuevo, necesitamos agregar una sección, pero esta vez estamos agregando una sección de doble columna
porque esta columna
sostenemos la imagen y
esta columna contendrá el contenido del texto
y los iconos. Por supuesto, en primer lugar,
agreguemos algún margen en la parte superior, seleccionando la sección,
entramos avanzado, rompamos el enlace ahí. 50, margen superior. Y luego vamos a hacer clic en
este signo más aquí para agregar un elemento de imagen. Dejándolo caer ahí
y haciendo clic en eso. No tenemos la imagen de los
autores aquí. Así que me encanta cargado desde
nuestra carpeta de activos. Así libro, imagen de autor. Entonces vamos a abrir eso. Y insertemos medios. Ahí lo tenemos. Lo siguiente que queremos hacer es, por
supuesto, agregar el encabezado. Encabezado, quien el autor. Entonces voy a seguir adelante y copiar eso. Y aquí, quiero
seguir adelante y decir, arrastra un rumbo aquí. Pero en lugar de hacer eso, ¿por qué no solo duplicar esto? Y luego arrastra esto hasta
el fondo. Ahora, cuando intentes arrastrar, déjame simplemente deshacer eso. Cuando estás tratando de arrastrar
estos elementos y llega hasta el final aquí y
ya no va a bajar mientras
todavía lo estás sosteniendo. Mientras sigues presionando
el botón del ratón. Desplázate con la rueda
central del ratón. Y luego suelta el botón
del ratón cuando llegues al punto que
quieres soltar. Muy bien, así que ahora que
tenemos eso ahí, voy a hacer clic ahí. Si bien aún está seleccionado. Permítanme copiar eso. Seleccione todo,
y luego pegue. Entonces, ¿quién es el autor? Y ahora
alinémoslo a la izquierda. Y esta es una herramienta de página. Así que lo dejaré en eso. Vamos adentro
aquí, tipografía. Aumentemos el
tamaño hasta ese punto. Ahora también podemos volver
aquí y duplicar esta fuente. Y me he dado cuenta de
que olvidamos cambiar estas descripciones
a Montserrat, así que déjame seleccionar ese contenido. Vamos dentro del estilo para el contenido aquí. Topografía. Sepa que ese es el título. Queremos la descripción. Quería cambiar eso a
Montserrat solo por uniformidad. Y ahora se
parece a Montserrat, así que sólo voy a copiar eso. Entonces. Pegue el estilo ahí. Pegue el estilo ahí. Haga clic con el
botón derecho en el estilo de pegado, haga clic con el
botón derecho en el estilo de pegar, De acuerdo, por lo que esta
también debe ser tipografía
tipo Montserrat. Montserrat o
uniformidad. Aquí adentro. En lugar de duplicar
cualquiera de esos textos, solo
agreguemos un nuevo elemento de editor de
texto. Y vayamos directamente dentro tipografía de
estilo, meses Irak. Dentro del contenido,
ahora puedes escribir la
descripción que quieras. Simplemente seguiré adelante y copiaré eso y lo duplicaré
un par de veces. Y tenemos nuestra descripción
o nuestra biografía del autor. Mezclar querer hacer es
agregar su firma. Solo para que la página sea un
poco más interesante. Realmente no sirve a
ningún otro propósito aparte de simplemente
hacerlo interesante. Así que vamos a hacer clic en ese icono
para sacar los íconos, para sacar a la vista los elementos. Y luego arrastremos aquí un elemento de
imagen. Y por supuesto que notarás que este marcador de posición de
imagen es grande. Vamos a elegir imagen. Vamos a subir archivos
para obtener la firma. Y notarás que
la imagen de la firma es de 100 por 40 píxeles. Eso significa que es una imagen diminuta, así que asegúrate de que tu imagen de
firma sea diminuta. A 100 por 40 0s, agradable. No lo hagas 500 pixeles
porque va a ser grande. Entonces vamos a insertar medios de comunicación,
y ahí lo tenemos. Y por defecto está
en el medio. Entonces empujémoslo hacia la izquierda. Y lo siguiente que
tenemos que hacer es agregar nuestro ícono de las redes sociales. Entonces seleccionando los elementos ahí. Entonces social. Arrastremos los iconos
sociales ahí mismo, por defecto ahí en el medio. Entonces pongámoslos a
la izquierda también. Y agreguemos algún margen
entre ellos y la firma. Así que mientras todavía está seleccionado, vamos adentro avanzado. Rompe ese enlace. A lo mejor 30. Sí, creo que eso me gusta. Hola, saber cómo
conseguimos esto aquí. Déjame simplemente
sacarlo de ahí. Y luego vamos a actualizar eso. Vamos a prever los cambios. Impresionante. Por lo que tenemos al
comprador de nuestro autor. Se ve bien. Espero que hayas
podido crearlo también. En la siguiente lección, Veamos cómo crear esta sección
llamada a la acción. Porque ahora en este
momento la persona está realmente interesada en
descargar el e-book. Y ten en cuenta que tenemos botones de descarga
gratis en esta página porque una landing page necesita tener una llamada a las secciones de acción. Secciones que
les recuerdan tomar una acción. Porque el objetivo de una landing
page es convertir a las personas en compradores o descargar mientras
vieron el video. Mira las estadísticas y
lee sobre el autor. A continuación queremos que
tomen una acción, por lo que concluimos
otro botón ahí. Entonces veamos cómo
crear esta sección. En la siguiente lección.
10. Ayúdame a enseñar a un elemento a 10,000 estudiantes: 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.
11. Sección CTA: Bienvenido de nuevo. Por supuesto que hemos terminado de
crear la sección de autores. Crear esta sección es bastante
fácil y directo. De hecho, creo que ya
sabes lo que tenemos que
hacer para crearlo. Así que sigamos adelante y hagamos eso
sin perder más tiempo. Entonces volviendo al interior de nuestro editor, podemos generar una nueva
sección desde cero, o podemos seguir adelante
y duplicar esto. Y luego arrástrelo
justo debajo de esto. Y ahora lo tiene todo, y ahora tiene la mayoría
de las partes que necesitamos. Así que vamos a deshacernos
de estas secciones. Hecho, vamos a deshacernos de la sección
interior por completo. Y ahora nos quedamos con nuestra columna única
original. Entonces lo que tenemos que hacer es que
podamos duplicar eso. Elementor está creado para
hacer tu vida más fácil, en lugar de recrear
los mismos estilos similares cada vez que
solo podemos duplicarla. Vamos a llevar esto al centro
mientras todavía está seleccionado, editar encabezado, se
empuja hacia el centro. Ahora, ¿qué dice?
Este libro cambiará. Así que vamos a copiar eso. Si bien esto está seleccionado, voy a hacer clic en eso,
pegarlo ahí dentro. Y luego vayamos dentro de
estilo color de texto. Lo necesitamos de color blanco. Y luego tenemos a
este Lorem Ipsum. No necesitamos copiar eso porque solo podemos
conseguirlo desde aquí. Permítanme duplicar eso. Y luego arrastremos
eso ahí dentro. Por supuesto, vamos a
deshacernos del 90% de ella. Ahora nos quedamos con eso. Vamos dentro de estilo y
vamos a ponerlo en el medio. Ahora está en el centro. Cambiemos el color a blanco. Entonces vayamos dentro de la topografía. Y aumentemos un poco el
tamaño. Haz que
parezca una descripción. Y luego por supuesto que
necesitamos ese botón. Así que vayamos aquí y
dupliquemos esto,
sobre eso, y luego haga clic en
ese icono duplicado. Entonces vamos a arrastrar eso. Cuando lleguemos aquí. Utilice la rueda del ratón
para desplazarse hacia abajo. Dejémoslo ahí tan pronto
como aparezca la línea azul. Ahora notarás que tenemos
demasiado espaciado aquí mismo. Así que vamos a reducir ese espaciado. En primer lugar, estos tenían
algún relleno en la parte superior. Como se puede ver en su, desde su esquema editor. Vayamos a Advanced mientras aún
está seleccionado. Vamos a quitar eso. Entonces vamos a seleccionar este texto. Ir dentro de
margen avanzado, abajo. Vamos a reducir el margen inferior. Creo que me gusta ahí. Vamos a actualizar eso. Entonces
vamos a prever los cambios. Y ahí lo tenemos. Nuestro llamado a la acción está listo. La siguiente parte que
queremos crear es área de registro de
este usuario porque cualquier landing page necesita
tener un formulario de suscripción o cualquier forma que
capture los datos de los clientes. Y hay que
darles algo
para que te den sus
contactos, su correo electrónico. Por lo que consiguen los
tres primeros capítulos
del e-book al
inscribirse en su lista de correo. Entonces veamos cómo crearlos en la próxima lección.
Te veré en breve.
12. Sección de Inscripción: Bienvenido de nuevo. Por lo que ahora es el momento de crear
estos formulario de inscripción. Y lo haremos instalando un plugin llamado terminadores. Entonces, sin perder tiempo, saltemos dentro de nuestro tablero. Así que vamos a Plugins, Añadir Nuevo. Y aquí quiero
escribir para mí más tarde. Aquí vamos por WPA mu Dell tiene 300 mil
instalaciones activas en este momento. Entonces Eileen, sólido. Déjame seguir adelante y activarlo. Entonces ahí
lo tenemos para dominadores. Entonces yendo al menú de la izquierda aquí, está casi en la parte inferior. Iré a formular
su sobrepeso. Hecho. Déjame simplemente hacer clic. formulador será llevado al panel
de plugins
dentro de WordPress. Para que como se puede ver, estamos
bajo formulados ahora. Dashboard y tenemos
más áreas que podemos visitar, pero por ahora, sólo nos
interesa crear un formulario. Entonces voy a seguir adelante y como pueden
ver aquí mismo, tenemos formularios. Crea un formulario. Contamos con publicaciones. Se puede crear una encuesta pero
no entrará en detalle sobre esto. Puedes seguir adelante y
comprobarlo en YouTube. Conoce más sobre
por qué para mí es la forma
más impresionante
Plug-in, las matrices. Pero esa es sólo mi opinión. Entonces vamos a crear un formulario y se presentarán con
estas plantillas prefabricadas. Y el que
necesitamos es la
inscripción de boletín podemos crear
a partir de una pizarra en blanco. Vamos con negro. Sólo para poder crear lo que
necesitamos desde cero. Vamos a darle un nombre. Formulario de registro. Muy bien, así que aquí estamos. Muy bien, así que aquí estamos. Todo lo que necesitamos hacer es
insertar el campo que necesitamos. Y el campo que necesitamos
es el campo de correo electrónico. Por lo que aquí, solo quiero hacer clic Insertar campo y
seleccionar el campo de correo electrónico. Tenemos muchos otros campos
diferentes que puedes
insertar en tu formulario, pero por ahora no nos
interesan. Entonces vamos a insertar campo. Y luego, sí, dejémoslo
como dirección de correo electrónico. O digamos tu
e-mail, tu e-mail. Vamos a quitarnos un vestido. Y luego dejemos
al placeholder como John Doe. Aplicar eso. Si lo previsemos. Tu e-mail y
el placeholder es EG John, John en Dot.com. Entonces vamos a cerrar eso
y publicarlo. Una vez que lo publiques, obtenemos el código corto que
podemos pegar en el front-end. Así que déjame copiar eso. Y como se puede ver, se ha copiado con éxito, necesitará estos
código corto, el front-end. Así que volvamos al
frente. Aquí estamos. Justo abajo. Nuestro llamado a la acción es donde
estamos agregando una nueva sección. Y es una sección de doble
columna. Y tenemos que sumar un margen superior. Entonces seleccionando esa
pausa avanzada que 15 enfrenta aquí. Entonces aquí, vamos a hacer clic en
ese signo más y vamos a escribir
código corto, o simplemente corto. Y esto aparecerá. Arrastremos ahí el código corto
en esa columna. Y ahora, una vez que lo
dejemos caer lo presentaremos con estas ediciones configuraciones de código
corto. Y luego podemos pegar
nuestro código corto ahí. Ese es un código corto que
obtuvimos de aquí, este código corto por si
acaso te has dejado esta parte. También lo puedes conseguir desde
aquí mismo desde esta rueda dentada. Copia código corto y
lo has copiado de nuevo. Entonces suéltala ahí
y luego aplica eso. Vamos a previsualizar los cambios. Desplazemos todo el
camino hasta el fondo. Y ahí lo tenemos.
Nuestra forma está lista. Pero ahora regresemos
aquí y añadamos este texto. Consigue los tres primeros
capítulos gratis. Así que déjame copiar eso. Lo que tenemos que hacer es simplemente
duplicar esto o
déjame duplicar esto
en su lugar
porque ya tiene el
color que necesitamos. Arrastrémoslo
hasta el fondo. Vamos a dejarlo ahí. Si bien aún está seleccionado. Voy a pegar el texto
correcto ahí dentro, obtener los tres primeros
capítulos gratis. Muy bien, vamos a actualizar eso y
vamos a previsualizar los cambios. ¿ Verdad? Pero ahora no está equilibrado. Entonces vamos a tirar esto un poco a la izquierda para
que estos salten a la siguiente línea para que
parezca más equilibrado. Entonces así. Actualice eso. Y recuerda también
necesitamos hacer rima
este color con el
resto de los colores de la marca. Debido a que este formulario se
crea con formulador, no
podemos editarlo
usando Elementor. Tenemos que volver al
interior de nuestro tablero. Vuelve al interior del salpicadero. Formularios Terminator. Y luego una vez que estemos
dentro de los formularios, veremos una lista de todos
los formularios que tenemos. Esta es la forma que creamos. Acabamos de crear formulario de registro. Vamos a editar el formulario. Y mientras estamos aquí adentro, vamos al segundo
panel justo aquí. Apariencia. Y
eso nos llevará el lugar donde podamos editar
la apariencia del formulario. Entonces, antes que nada, podemos deshacernos de
estas líneas fronterizas diciendo seleccionando plano. Aquí hay otras opciones
que puedes elegir, pero me gusta el piso. Y cambiemos el
color del botón. Entonces en este momento estamos usando
los colores predeterminados de los colores predeterminados
que vienen con un plug-in. Pero podemos decir disfraz. Y traerá todas las partes de la forma que podemos cambiar. El color de. El último elemento aquí es el botón
Enviar. Este botón. Entonces, debido a que está seleccionado, aparece, es
un menú desplegable. Atrae estas opciones. Por lo que podemos seleccionar el color de
fondo y
cambiarlo a un 24. Eso elimina esos
duplicados, F 1524. Y al hover, queremos que
el botón sea, queremos que el botón sea triple 40. Y desenfocado. También queremos que
sea ese color. Así que vamos, así que
digamos actualización. Muy bien, ahora vamos
al front-end y
apliquemos esos cambios que
acabamos de hacer en el backend. Vamos a prever los
cambios una vez más. Entonces desplazándose hacia abajo. Aquí está nuestro botón en el hover. Los cambios a ese negro que es consistente con este negro. Ahora podemos aumentar
el espaciado entre esta columna y esta columna
volviendo aquí. Desplazarse hacia abajo a esta sección, esta sección que tiene esta
columna y esta columna. Vamos a seleccionar esta sección
en sí dentro del diseño. Brecha de columnas, digamos blanco. Y leamos, vamos a
aumentar este ancho aquí solo para que esto
esté en dos apretados. Vamos a actualizar eso. Y vamos a prever los cambios. Al menos tenemos un buen
espaciado entre los dos. Entonces ahora que estamos satisfechos con todas las secciones que
hemos creado, ya
es hora de
terminar la clase
haciendo que la página responda
en todos los dispositivos, eso significa pantallas móviles, tablets pantallas, y ya se ve bien en escritorio. Entonces trabajemos en tablet
y pantallas móviles. Te veré en la próxima lección.
13. Respuesta de la pantalla del teléfono inteligente: Bienvenido de nuevo. Ahora es hora de hacer que la página
web responda en los diferentes dispositivos
que la gente navega. Y eso son
pantallas móviles y tabletas. Así que sigamos adelante y haga clic en este icono del modo de respuesta aquí
mismo en el
pie de página. Y de inmediato esta
barra aparecerá con diferentes configuraciones para el diseño
receptivo. Por lo que haré clic en este
icono e inmediatamente cambiaré al tamaño
de una pantalla móvil. Y podemos seguir adelante y desplazarse solo para ver cómo se ve. No parece que haya
mucho trabajo por hacer. La página web casi se
ve bien por cierto. Así que a partir de lo más alto, el libro está en el medio y
se ve bien donde está. Entonces pasemos a la
segunda parte, que es la H1. Seleccionando el H1. Vayamos dentro de la tipografía de
estilo. Vamos a reducir el tamaño. Me gusta ese tamaño. Volviendo al interior de los contenidos, alinémoslo al medio. Y notarás que
tenemos el margen en la parte superior que habíamos
establecido en el escritorio. Vamos a seguir adelante y
seleccionar esta columna. Ahora es editar columna avanzada. Y vamos a romper este enlace para eliminar la configuración predeterminada con la
que hemos venido. Por lo que ahora hemos eliminado
los ajustes que configuramos dentro del modo escritorio. Entonces lo siguiente que
notarás aquí es que vamos a reducir el tamaño
un poco más. Ir dentro de la tipografía. Me gusta ese tamaño. Seleccione este editor de texto. Ve dentro de estilo. Alinear, centro. Sólo estamos tratando de alinear
todo con el centro. Para el equilibrio. Seleccione el botón
dentro de la alineación de contenido. Hagamos lo mismo por
estos editor de texto aquí. Ir al interior de
la alineación de estilo, centro. Nuestra sección de socios
ya se ve bien. Entonces pasemos
a la siguiente parte, que es la sección de temas. Creo que me gusta donde está, pero una cosa que podemos hacer
sobre toda esta sección aquí se incrementa el relleno
en la propia columna. Entonces el espaciamiento entre el borde de la pantalla y donde comienza
el contenido. Así que vamos mientras esta
columna está seleccionada, vamos adentro avanzado. Recuerda que esta columna se encuentra dentro de la sección que
era una sección de ancho completo. Así que déjame simplemente cambiar
de escritorio por un segundo. Teníamos una sección de ancho completo
con solo una columna. Entonces, lo que estamos tratando de
hacer en pantallas móviles, Eve aumenta el relleno
alrededor de toda esta columna. Entonces eso significa el relleno, también
pulsaremos este
botón hacia adentro. Volviendo al interior
de la pantalla móvil. Mientras estamos dentro,
avanzó en esta columna. Sin romper este
enlace. Vamos a darle un 20. Y notarás ahora tenemos
algo de espaciado por todas partes, incluyendo donde el botón estaba haciendo un poco
más de espaciado aquí. Vamos a actualizar eso. Eso se ve bien. Creo que me gustan estas áreas de video, así que no tocaré eso. Me gusta esta parte es, bueno, todo se centra
automáticamente. Lo que podríamos querer hacer
es seleccionar esta columna, como lo hemos hecho en
la sección de temas. Selecciona la columna,
ve adentro avanzado. Mantengámoslo un relleno
de 20 por todas partes, correcto, así que hay ese acolchado
uniforme por todas partes. Y podemos empujar
todo al centro. Por lo que seleccionaré esta adición bajo centro de
alineación de contenidos. Seleccione este editor de texto en Centro de alineación de
estilo. Vamos a seleccionar esta
imagen. Elementos. Centro de alineación. El centro de iconos de las redes sociales. La imagen está bien colocada por lo que no
necesitamos tocar eso. Y por cierto, una característica genial
de Elementor es que te
permite revertir
columnas dentro de una sección. Entonces si queríamos que esta imagen
viniera antes de los textos, podemos ir al interior avanzado. En primer lugar, podemos seleccionar la sección que
queremos afectar, que es una sección de doble
columna que está sosteniendo estos bloques de texto y la imagen ir dentro
avanzado responsive. Y podemos revertir
columnas en pantalla móvil. Por lo que ahora la imagen
ha sido empujada a la parte superior y el bloque de texto ha
sido empujado hacia abajo. Pero volviendo a la pantalla, en la versión de escritorio, la imagen sigue a la derecha, volviendo a adentro aquí. Entonces, si no quieres eso, siempre
puedes
simplemente desmarcar eso. Entonces vamos a reducir
este tamaño de rubro. Entonces seleccionando esta tipografía de
estilo, vamos a arrastrar eso hasta que estemos
satisfechos con el tamaño. Creo que me gusta en ese momento. Todo lo demás está
centrado y se ve bien. Vamos a reducir el
tamaño de la mayoría de todo. Vamos a reducir esto
como este tamaño. En primer lugar, vamos a
reducir el tamaño de los autores que agregan. Por lo que seleccionaré estos rubro. Tipografía de estilo. Eso es 39. Hagámoslo un 40. Y bajando todo el camino a esta llamada a la
acción desde la sección, selecciona el encabezado, ve
dentro de la tipografía de estilo. Vamos a teclear 40 aquí mismo. Como ese tamaño. Volviendo al interior del contenido, empujémoslo hacia el centro. Y nuestra forma está intacta. Ahora podemos utilizar estos ajustes de diseño responsivos para presionar este botón
hacia el centro, como lo hemos hecho con el
resto de los botones. Porque recuerda que esta forma
se crea con formulador. Y para presionar este
botón hacia el centro, necesitaríamos
usar algún código CSS. Entonces no vamos a entrar en eso. Y yo rosé la forma sólo
se ve bien como está. Pero si quieres
aprender más sobre cómo presionar este botón
al centro usando CSS. Puedes seguir adelante y
buscar un tutorial en YouTube o cualquier otro en
YouTube o simplemente buscar en Google. Busca la
personalización de CSS nominador. Eso es todo. En pantallas móviles. La página web se ve impresionante. Vamos adentro. Muy bien, así que vamos a actualizar
eso primero antes proceder al modo tablet. Y vamos a prever los cambios. Por supuesto, se
abrirá en modo tablet. Pero quiero
mostrarte cómo imitar una pantalla móvil y ver
cómo se verá. Entonces en el teclado de tu computadora, pulsa Control Shift I
o Command Shift I. Eso abrirá
Google Developer Tools y sigue adelante y toca la barra
de herramientas del dispositivo. Al hacer clic en él. Cuando está activo,
es de color azul. Y aquí tenemos un desplegable o las diferentes pantallas móviles que puedes imitar para ver cómo se verá la
página web. Por lo que actualmente
lo estamos viendo como un pixel cinco, transportado como una, puedes
hacerlo como un iPhone 12s pro. Y así es como se
verá en los iPhones. Muy bien, así que me
gusta cómo se ve. Volvamos y trabajemos
en el modo tablet.
14. Respuesta de la pantalla de la tableta: Entonces volviendo aquí,
quiero hacer click en el ícono de la tableta. Y de inmediato se
desplaza al modo tablet. Desplazemos todo
el camino hasta la parte superior. Por defecto, elementor tiene este bug conocido donde cuando
cambias al modo tablet, necesitas expandir un poco esta
pantalla. Si aplicas ajustes en el modo
tablet sin cambiar un poco
el tamaño de la pantalla, no
verás los cambios y
déjame probarte eso. Entonces en este momento, esta columna, todo el camino hasta este punto. Entonces si selecciono la columna y voy a
la columna y le doy un trigo 100 por ciento para
correr de izquierda a derecha y golpear Enter
y no pasa nada. Pero cuando
lo sacamos un poco, ahora nota que
en realidad está mostrando lo que
acabamos de hacer. Y de eso
estoy hablando. Queremos ver los
ajustes para la configuración. Por lo que en este momento la columna mayor se toma un 100 por
ciento de la pantalla. Pero cuando cambiamos
al modo de escritorio, sigue ocupando el
50% de la pantalla. Y esta otra parte está ocupando el 50 por
ciento de la pantalla. Volviendo al modo tablet, queremos hacer de este un modo tablet propio
100% amplio. Como lo hemos hecho con el libro. Vamos a expandir esto un
poco otra vez. Cierto, así que es un 100%. Entonces seleccionando esta columna aquí
y yendo dentro de diseño, ancho de
columna un 100%. Ahora es un 100%. Quiero romper
el margen que teníamos conjuntos un rato en el escritorio aquí. Y por supuesto, mientras
esto todavía está seleccionado, vayamos adentro avanzado
y eliminemos eso. Por lo que ahora lo restablecemos. Seleccionando este rubro. Ir dentro de la tipografía de estilo. Vamos a reducir un poco el
tamaño. Y vayamos dentro del contenido
y lo empujemos al centro. Vamos a seleccionar esta descripción. Si bien bajo estilo,
empuja hacia el centro. Empujemos de nuevo todo
al centro. Empujemos de nuevo todo
al centro. Seleccione eso. Empuja el centro. Eso me gusta. Estilo. Centro. Departamentos se ve bien. Esto se ve bien. También podemos
darle ese margen 20. Bajo avanzado. Se ve bien. Estas columnas necesitan algún
relleno alrededor de los bordes. Entonces seleccionando estas
columnas, relleno avanzado. Ahora tenemos un buen relleno. Imagen. Se ve bien. Vamos a reducir el tamaño
de este rubro. Tipografía de estilo. Por último, vamos a reducir el tamaño
del relleno aquí mismo. El rosa, me
gusta en ese lugar. Vamos a actualizar eso. Y vamos a prever los cambios. Muy bien, así que en esta pantalla, vamos a este
menú desplegable y seleccionamos el iPad. Y vamos, podemos cambiar
entre paisaje y retrato. Así que haz clic en este icono para rotarlo. Así es como se ve. En el paisaje de la tableta. Y en un retrato de tableta. Así es como se ve. Para traer para hacer
más grande la pantalla y hacer que
llene la página. Simplemente puedes hacerlo un
100 por ciento así. Y así es como se ve desde una
anulación de distancia de primer plano . Por lo que ahora nuestra página de destino es
receptiva en todas las pantallas. Porque ahora si cambiamos
al iPhone, se ve bien. En tableta. Se ve presentable. Vamos a Surface Duo. Y en el escritorio,
se ve impresionante. Entonces déjame cerrar esto
y desplazarme hacia abajo. Básicamente, así es como hacerlo. Y eso marca el
fin de nuestra clase. Espero que hayas aprendido
bastantes cosas si eres nuevo para elementor. Y aunque ya
sepas usar Elementor y estuvieras viendo
esto como un repaso. Espero que hayas podido
aprender una o dos cosas. Por supuesto que no hemos
cubierto todo lo que
hay que cubrir sobre Elementor. Eso será imposible
en una clase. Pero hemos cubierto
lo que necesitábamos para estas landing page específica. Por lo que por si acaso
quieres aprender más sobre cómo usar Elementor,
como por ejemplo, construir la barra de navegación, cómo construir una carpeta y editar
los detalles en la foto. Puedes seguir adelante y ver cualquiera de mis otras
clases de Skillshare donde voy profundo y te enseño a diseñar sitios web que funcionen plenamente. Pero por ahora, creo que hemos cubierto todo lo que
pretendía enseñarte sobre cómo construir una hermosa
página de aterrizaje de e-book usando Elementor.
15. Conclusión: Muy bien, Así que eso marca
el final de esta clase. Espero que lo hayas encontrado
valioso y sobre todo, espero que en realidad creas
tu propia landing page. Si eres nuevo en Elementor, te animo a que veas todas mis otras clases
yendo a mi perfil. Y
ahí encontrarás varias clases donde te enseño a diseñar webs totalmente trabajadoras
o páginas de aterrizaje impresionantes. Y si te gustó esta clase, por favor no olvides
dejar una reseña. Va a recorrer un largo camino en ayudar a que esta clase sea
más descubrible. Aquí mismo en Skillshare. Más que opiniones. Cuantas más críticas recibe
la clase, más se vuelve
descubrible. Y como siempre, mi
nombre es visa Ken. Hasta la próxima vez, mantente
pieza creativa. Nos vemos la próxima vez.
Ken Mbesa, Web Designer | UI/UX Designer
