✔Cómo Crear Una Página Web Para Mi Negocio (2018) – Tutorial Completo – Paso A Paso Y Desde Cero
Articles Blog

✔Cómo Crear Una Página Web Para Mi Negocio (2018) – Tutorial Completo – Paso A Paso Y Desde Cero

August 9, 2019


En este video aprenderás, cómo crear una
impresionante página web para tu negocio como esta. [ Intro ] Hola chicos, mi nombre es Juan Bonilla, de
voxelartstudio.com Si esta es tu primera vez por aquí, y quieres
aprender un montón de trucos y técnicas sobre WordpPress Así como aprender a crear
espectaculares páginas web como la que vamos a crear hoy Asegúrate de suscribirte ahora,
y de pulsar en la campanita de notificaciones, para que no te pierdas ni un sólo video. En éste video te voy a enseñar cómo crear
una impresionante página web para tu negocio paso a paso y desde cero que podrás poner
completamente a tu gusto, y sin tener que programar ni una línea de código. Tendrás tu página web completamente lista
y funcionando hoy mismo. Lo mejor de este tutorial, es que no tienes
que tener ningún tipo de experiencia previa ni saber programar. Ya que lo harás todo
visualmente pinchando y arrastrando con el ratón viendo en todo momento cómo van
quedando los cambios que vas realizando por pantalla Así de simple. Asegúrate de ver el vídeo hasta el final,
donde además te enseño cómo añadir una tienda online a tu página web para que puedas
vender tus productos o servicios por todo el mundo. COMENZAMOS! Muy bien chicos, esta es la página web que
aprenderéis a crear hoy, a que es preciosa. Tiene un diseño moderno, fresco e innovador. Tendrás una web rápida, amigable a los
buscadores, que se adapta correctamente a los dispositivos móviles y con tienda online,
para que puedas vender tus productos o servicios por todo el mundo. Si eres un Freelance, pequeña o mediana empresa,
fotógrafo, artista, bloger, o simplemente quieres convertirte en un futuro diseñador
web, entonces estás en el sitio adecuado. He investigado entre cientos de diseños web
para encontrar el perfecto para ti, y el resultado es esta preciosa página web que tiene todo
lo que necesitas para ser exitoso en internet, y lo mejor de todo es que te ahorrarás cientos,
o miles de Dólares, al no tener que pagar a alguien para que te la haga, la podrás
crear tú mismo, y ponerla completamente a tu gusto. He hecho este tutorial lo más fácil posible,
para que no tengas que editar nada de código. Todo será tan sencillo como pinchar y arrastrar
las imágenes, textos, o vídeos, al sitio exacto en el que lo quieras poner en tu página
web. Todo de forma muy fácil, y visual. Para ello usaremos una plataforma de diseño
web llamada WordPress. Si nunca habías escuchado este nombre,no
te preocupes, yo te explicaré en qué consiste y cómo usarlo. WordPress es un sistema de gestión de contenidos
o CMS, es una poderosa plataforma que te permite crear y personalizar tu página web con diferentes
temas y plugins, de forma que podrás crear prácticamente cualquier página web que puedas
imaginar sin tener que tocar ni una línea de código. WordPress hace que crear una página web sea
algo fácil, rápido, e incluso divertido, pero que sea fácil no significa que no sea
bueno. Para que te hagas una idea de lo potente que
es WordPress, debes saber que es la plataforma con la que las grandes empresas multinacionales
diseñan sus páginas web. Lo usan empresas como: Mercedes Benz, The
New York Times, Sony Music, katy perry, Jay-Z, Toyota Motors… tan sólo por poner algún
ejemplo. Cuando acabes el vídeo, serás un auténtico
profesional usando WordPress, y además serás tú quien cree tu página web, lo que te permitirá
personalizarla y ponerla completamente a tu gusto. El diseño de la web que harás hoy, está
inspirado en empresas multimillonarias como son Coca-cola, Ford, Apple o Android. Si te fijas, todas estas web tienen un título
atractivo con grandes imágenes evocadoras que captan la atención de sus visitantes,
todas tienen una gran llamada a la acción en su página principal, que te incita a seguir
leyendo, en probar la web, y a tomar algún tipo de acción. Estas empresas se gastan cientos de miles
de Dólares al año en investigación en su departamento de diseño, y nosotros aprovecharemos
todo ese conocimiento para crear una impresionante página web que sabemos que funciona. Tu web también tendrá una preciosa imagen
a pantalla completa con un título llamativo y una gran llamada a la acción. Tal cual hacen las grandes empresas. Es un método que está probado que funciona
y por ello verás que las grandes empresas lo utilizan una y otra vez. Está comprobado que diseñar la web de esta
forma hace que tus clientes continúen explorando tu web, leyendo su contenido, viendo tus vídeos
y comprando los productos o servicios que ofreces en ella. Lo mejor de todo es que al final estarás
súper orgulloso de haberla hecho tú mismo. Quizás ahora mismo te sientas un poco intimidado
y piensas que no eres capaz de conseguirlo , pero por supuesto que puedes !!! Al finalizar el día tendrás una web súper
atractiva y profesional. Yo te voy a llevar de la mano en todo el proceso
para que puedas conseguirlo fácilmente, enseñándote paso a paso y desde cero y sin omitir nada. Así es que no te preocupes. He creado un montón de páginas web así
como he enseñado a mucha gente a crear la suya propia, y te aseguro que la forma que
aprenderás hoy es la manera más fácil y rápida de tener una web profesional hoy en
día. Nunca ha habido una forma tan fácil y rápida
de hacer una web como hoy, y yo te voy a enseñar cómo hacerlo. Para que veas un rápido ejemplo de lo que
estoy hablando, aquí tienes una web ya finalizada. Hace unos años diseñar solamente la parte
de la web que estás viendo por pantalla, te llevaría horas, o días programando en
php, html, y css. Si cometías algún error, corregirlo te tomaría
incontables horas más para arreglarlo. Con WordPress, esto ya no es así. Si quieres editar cualquier parte de la web,
lo puedes hacer con unos simples clics, arrastrando y soltando con el ratón los elementos como
son textos, e imágenes, a la parte exacta de la web en la que quieres que estén colocados. Todo de forma muy visual, y sencilla. En cuestión de unos segundos puedes hacer
cambios que antes te tomarían horas programando código. Para empezar a crear tu nueva web, lo único
que tienes que hacer es sentarte, ponerte cómodo y relajarte, o si prefieres también
puedes tomarte un café o un aperitivo, mientras sigues mis sencillas instrucciones paso a
paso. Mi trabajo ahora es ponértelo lo más fácil
posible de forma que puedas ir aprendiendo lo que vas haciendo sin perderte por el camino. Recuerda que puedes pausar el video en cualquier
momento para tomar notas, un café, o descansar un rato. Después de esta breve introducción, cuando
estés listo… COMENZAMOS!!! Muy bien chicos, para facilitaros la labor
al máximo, he creado este documento en pdf, que es una lista de comprobación con todos
los pasos que vamos a seguir en el video ordenados según vamos avanzando. Podéis encontrar el enlace a este documento,
en la descripción del video. Os recomiendo que lo descarguéis al escritorio
de vuestro ordenador, para así tenerlo a la vista. Para descargarlo, tan sólo tendréis que
pulsar el botón de descargar que aparece en la parte superior derecha de el navegador,
según podéis ver ahora. He creado este documento de forma que podéis
ir marcando cada paso según lo vais completando, así, si tenéis que interrumpir el tutorial
por algún motivo, podéis recordar en qué punto exacto lo habéis dejado. Ahora que ya tienes la lista de comprobación
descargada, puedes marcar esa opción como completada. Cuando completéis cada paso, debéis ir a
archivo, guardar, de forma que cuando volváis a abrir el documento, continuéis desde donde
lo dejasteis. Para que no perdáis tiempo buscando donde
explico cada cosa en la barra de progreso del vídeo, cree el documento de tal forma
que si pincháis en el nombre de cada paso, os llevará al punto exacto del vídeo en
Youtube donde se explica ese apartado, a que es genial? Como podéis ver en la lista de comprobación,
el tutorial está dividido en 7 pasos. Antes de empezar, quiero explicarte brevemente
en qué consiste cada uno, y qué puedes esperar aprender en ellos. PASO NÚMERO 1: DOMINIO Y ALOJAMIENTO. Para que una página web exista en Internet,
tiene que tener un dominio y un alojamiento. El dominio, es el nombre de tu página web,
es lo que la gente escribe en el navegador para poder encontrar tu web en Internet, por
ejemplo, el dominio de Google, es google.com, el dominio de Facebook, es facebook.com, y
el dominio de tu página web, será: elnombredetuempresa.com El alojamiento digamos que es un ordenador
especial en el que se almacena todo el contenido de tu página web, textos, fotos, videos,
audios, etc. Este ordenador especial está todo el día
encendido y tiene una conexión a Internet súper rápida, para que cuando alguien solicite
entrar a tu web, la pueda ver al instante. Si sólo tienes el dominio y no tienes alojamiento,
cuando la gente intente entrar a tu página web, esta aparecería en blanco, o daría
algún error, ya que no habría ningún sitio en el que guardar todo su contenido, e información. Para que puedas entender mejor, el dominio
sería como la dirección de tu casa, y el alojamiento sería tu propia casa como tal. El Dominio y Alojamiento, es lo único que
tiene coste en todo el proceso de creación de una página web, ya que hay que hacerlo
con empresas especiales que ofrezcan esos servicios. Lamentablemente, no hay forma de saltarse
este paso, ya que para que tengas tu propio dominio, es decir, tu propio nombre de página
web, el dominio debe ser comprado, y necesitas un alojamiento para guardar el contenido de
tu página web. Como el alojamiento es un ordenador especial
que está todo el día encendido, pues hay que pagar una pequeña renta para que tu web
esté siempre activa y puedan entrar visitantes en cualquier momento. Pero no te preocupes, el coste de ambas cosas
es ridículamente bajo para los beneficios que te proporcionará tener tu nueva web,
ya que estamos hablando de un coste de entorno a unos 10 $ al mes por todo. Esto es un precio realmente bajo a cambio
de poder tener una audiencia mundial. PASO NÚMERO 2: INSTALAR WORDPRESS. Instalar WordPress es súper fácil, es como
instalar un programa en tu ordenador o una aplicación en tu teléfono móvil. Lo podrás hacer en unos pocos clics. Es rápido, y sencillo. PASO NÚMERO 3: INSTALAR Y PERSONALIZAR NUEVO
TEMA. Este paso te va a encantar, ya que te enseñaré
a instalar un nuevo tema, el cual va a transformar completamente la apariencia de tu página
web. Quizás te estés preguntando, ¿ qué es
un tema ? Te lo explicaré en detalle más adelante, pero si tienes curiosidad, que sepas
que un tema básicamente lo que define es la apariencia de tu web, es por así decirlo,
la ropa que le pones a tu página web para que salga de una forma, u otra, y no te preocupes,
que este paso también es súper rápido. Lo podrás completar en menos de 3 ó 4 clics. PASO NÚMERO 4: INSTALAR PLUGINS. Los plugins, son como pequeños programas
o aplicaciones que le añaden a tu web más funcionalidades de las que traían por defecto.
Por ejemplo: Cuando compraste tu teléfono móvil, éste no te traía el Whatsapp ni
el Facebook instalado. Para poder tener esa funcionalidad, tuviste
que instalarle esas aplicaciones, pues con WordPress sucede lo mismo, sólo que en lugar
de llamarse aplicaciones se les llama Plugins. Por ejemplo, WordPress no te trae por defecto
un formulario de contacto para que la gente te envíe mensajes desde la web, pues lo que
puedes hacer es instalar un plugin que te de esa funcionalidad. No te preocupes, que son muy fáciles de instalar,
y también se hacen en menos de 3 ó 4 clics, tal cual lo harías en el teléfono móvil. PASO NÚMERO 5: CREAR APARTADOS DE LA WEB. Este paso te va a encantar, ya que es en el
que crearás las diferentes secciones de la página web con el editor visual, crearás
apartados como son la página de inicio, los servicios que ofreces, el área de contacto,
el apartado de quienes somos, el blog, etc. PASO NÚMERO 6: CREAR TIENDA ONLINE. Este paso no lo tenía planificado para este
video, y es un regalo que te quiero hacer. Te voy a enseñar a añadirle una tienda online
a tu web para que puedas vender tus productos y servicios por todo el mundo. PASO NÚMERO 7: OPTIMIZAR WEB PARA DISPOSITIVOS
MÓVILES. En la actualidad prácticamente el 70% de
las búsquedas en Internet se hacen desde dispositivos móviles, simplemente no puedes
permitirte que tu página web se vea mal en los móviles, bajo ningún concepto. Por suerte, este paso te enseña lo fácil
y rápido que es preparar tu web para estos dispositivos. COMENZAMOS!!! PASO NÚMERO 1: DOMINIO Y ALOJAMIENTO: Muy bien chicos, para empezar a crear vuestra
página web, lo primero que tenéis que hacer es conseguir el DOMINIO y ALOJAMIENTO. Recordad que el dominio es el nombre de vuestra
página web, y es lo que se escribe en la parte superior del navegador, como podéis
ver en pantalla. Por ejemplo, el dominio de Google, es google.es.
El dominio nuestro es: voxelartstudio.com Para empezar, lo que tenéis que hacer es
pinchar en el enlace que os dejo abajo en la descripción del video. Cuando pinchéis os va a salir una página
como esta. Esta es la página del proveedor del dominio
y alojamiento. Os recomiendo este proveedor ya que es el
que utilizo para mis clientes y para mi propia página web, y os aseguro que funciona muy
bien. Una vez dentro, tenéis que acceder al menú
superior donde pone “WordPress Hosting”. Muy bien, entramos y como veis, hay 3 opciones:
La Starter, la Business y la Enterprise. La Starter es para crear una única página
web. La Business, es para cuando quieres crear
muchas webs, y la Enterprise, es para empresas de diseño que crean un montón de páginas
web y que tienen muchísimas visitas diarias. La Enterprise no la necesitáis, ya que tiene
un precio elevado y se queda grande para lo que necesitáis de momento. Tenemos que elegir entre una de estas 2 opciones: Con la Starter sólo pagas una cuota, pero
sólo puedes tener una única página web. En la mayoría de los casos, esta opción
es más que suficiente. Con la Business, también, sólo pagas una
cuota, pero puedes tener muchas webs distintas, por ejemplo, la web de tu madre, la de tu
padre, la de tu perro, la de tu gato, etc. Sino os ha quedado claro, para que entendáis
mejor, la Starter es como si fuera una casa con una sola habitación, en la cual sólo
puede vivir una persona. Sólo pagas una renta, pero sólo puede vivir
una persona. En este caso, sólo pagas una renta, pero
solamente puedes tener una única página web. La Business es como si fuera una casa con
muchísimas habitaciones, y en cada habitación puede vivir una persona distinta. Sólo pagas una renta, pero pueden vivir muchísimas
personas dentro. En este caso, sólo pagas una renta, pero
puedes tener muchísimas páginas web dentro. La opción que yo utilizo personalmente es
la Business, ya que con esa opción puedo tener guardada mi página web y la de mis
clientes, y además solamente pago una cuota. Para este tutorial, como sólo vamos a crear
una única página web, vamos a elegir la opción Starter, que está muy bien, es económico,
y además tiene las siguientes características: Espacio de almacenamiento ILIMITADO, es decir
podéis ponerle todas las fotos, textos y videos que queráis a vuestra página web
SIN PREOCUPAROS POR EL ESPACIO que ocupen. Aquí os recuerda que el plan Starter es para
cuando sólo necesitáis crear una única web. Tiene el dominio gratuito, es decir el registro
del nombre de vuestra página web te lo dan gratis, debéis saber que otras empresas están
cobrando entorno a unos 10 $ al año por el dominio. Este proveedor te lo da GRATIS. También trae el CERTIFICADO SSL GRATUITO.
Por sino lo sabíais el certificado SSL es lo que hace que la dirección de vuestra página
web empiece por “https” y que aparezca este aviso que pone: “Es seguro”. Lo que esto realmente quiere decir, es que
la información que se transmite entre tu visitante y tu página web, está encriptada
y segura. De esta forma, un hacker no pueda robarla. Esto es especialmente importante, si quieres
tener una tienda online, ya que sino tienes SSL no podrás hacer cobros con tarjeta de
crédito. El tener un certificado SSL, es muy importante
también ya que desde hace un tiempo Google está penalizando a las web que no tienen
certificado de seguridad, las web que no tienen SSL, empiezan por “http”. Las que tienen certificado de seguridad SSL
empiezan por “https”. Para que puedas ver la importancia que tiene
el tener un certificado SSL en tu web, tan sólo pon en google la siguiente frase: ” Web
sin SSL “. Como veréis os van a salir un montón de
noticias hablando de esto, como esta que pone: Google Crome marcará tu web sin SSL como
no segura. Es decir, aquí aparecería un aviso indicando
que la web no es segura, si no tenemos un SSL. Debéis saber que la mayoría de empresas
del alojamiento están cobrando entorno a unos 20 $ al año por darte un certificado
SSL. Esto proveedor que os indico, te lo va a dar,
como veis, sin un certificado SSL, Google te penalizará en 2017, en Octubre de 2017
Google te penalizará, Google penalizará sitios web sin SSL, por tanto es una ventaja
muy grande el tenerlo GRATIS aquí. Otra ventaja que tiene este proveedor, es
que te dan 60 días de garantía de devolución. Si por el motivo que sea, no te gusta tu nueva
web, ya no la quieres, no la necesitas… o simplemente necesitas el dinero de vuelta,
podrás pedir la devolución del dinero sin dar explicaciones. De esta manera, tendrás hasta 60 días para
probarlo. Habiendo dicho esto entonces, elegimos el
plan Starter pinchando en el botón GET STARTED. Muy bien, aquí es donde elegimos el nombre
de dominio, es decir, el nombre de vuestra página web. El nombre de dominio debe ser único, ya que
no puede haber 2 páginas web con el mismo nombre. Esto es como cuando creas una cuenta de correo
electrónico, que si el nombre ya está cogido, os dice que probéis con otro nombre distinto. Para que veáis a lo que me refiero, vamos
a probar poniendo el nuestro, el de voxelartstuidio.com. Como veréis va a saltar un aviso diciendo
que no está disponible. Me va a dar varias sugerencias, como voxelartstudio.net,
voxelartstudio.eu, .info, .org, etc. Recordar que esto del .com también lo podéis
cambiar a la extensión que queráis, por ejemplo: .net, . org, etc. Muy bien, vamos a probar con un dominio distinto. Vamos a poner el nombre de dominio de la web
que vamos a crear en este tutorial, y ponemos: demowebparaminegocio. Muy bien, elegimos el
.com, ya que es el más genérico o más utilizado. Yo os recomiendo que siempre que podáis elijáis
el .com. Bien, nos vamos donde pone ” PROCEED “. Muy
bien, nos dice que ese dominio está libre, y ya podemos cubrir nuestros datos personales. Es importante que donde pone ” correo electrónico
” pongáis un correo que uséis realmente, ya que ahí es donde os van a mandar los datos
de acceso a vuestra página web. Aquí ponéis los datos de pago.
Podéis pagar con tarjeta de crédito, o con PAYPAL. Lo cubro con mis datos, muy bien, cuando lleguéis
al apartado de ” Purchase Information “, os va a decir que elijáis el centro de datos. El Centro de datos es el sitio físico en
el cual está guardada vuestra página web en el mundo, por así decirlo. Hay diferentes centros de datos.
Tenemos: Chicago, Amsterdam, Singapure, Sidney, Londres, y Tokio. Tenéis que elegir el que esté más próximo
a vosotros o a vuestros posibles clientes, para que de esta forma os cargue más rápido
la página web. En el caso de que estéis en Latinoamérica,
debéis elegir Chicago. Si estáis en Europa, puedes elegir: Londes
o Amsterdam, cualquiera de las 2. Como yo estoy en España, voy a elegir Londres,
ya que es el que está más cerca de mí. Aquí tenéis que elegir el periodo de facturación,
si queréis que cobren mes a mes, una vez al año, cada dos años, o cada 3 años. Yo os recomiendo que elijáis cada Año, en
vez de cada mes, ya que os hacen un mayor descuento y así, podéis ahorrar más. Elegimos entonces el de 12 meses. Esta opción que aparece marcada que pone
” Domain Privacy ” lo que quiere decir es que protege tus datos personales para que
nadie los pueda ver. Pues sino lo sabíais, cuando creas una página
web, los datos del dueño de la página web son públicos, así es que la información
que ponéis aquí, la puede ver cualquiera que esté interesado en conocerla. Al ser información pública, lo que suele
suceder es que algunas empresas te comienzan a mandar emails con publicidad a tu correo
electrónico. Como a mí no me importa que me envíen publicidad,
pues le voy a dar a marcar, y así a lo largo me ahorro unos 10 $ al año. Bien, lo desmarco.
Me está preguntando que si estoy seguro de que quiero quitarlo, le doy que sí. Como podéis ver el conjunto de dominio y
alojamiento durante 1 año sale por 47,40 $. Donde pone ” Promo Code “, tenéis que poner
el siguiente código de cupón: VOXELART5 y pinchar donde pone: APPLY para que os hagan
un descuento. Ese código de cupón que acabáis de poner,
es mi código de cupón. Si lo usáis, vosotros pagaréis menos, y
a mí me darán puntos que me ayudarán a seguir creando tutoriales GRATUITOS y de calidad
para todos vosotros. Así es que si lo usáis, os lo voy a agradecer
un montón. Muy bien. Una vez hecho esto, marcamos la
opción de: I AGREE y luego donde pone: CHECK OUT. Esperamos a que acaben, y ¡¡¡ FELICIDADES
!!! ¡¡¡ Ya tenéis vuestro propio dominio y
alojamiento !!! ENHORABUENA !!! Esta página que sale aquí, lo que está haciendo es confirmando
que la compra se ha hecho correctamente, y que os han enviado un correo electrónico
con los datos de acceso. Vamos a acceder al correo electrónico para
que veáis. Perfecto. Y aquí aparece: TMDHosting, entramos, y salen
los datos. Bien. Para entrar a vuestra página web, podéis
hacerlo de 2 maneras, a través de una manera temporal que aparece aquí, o la definitiva
que es esta. Bien, si intentáis entrar ahora mismo a vuestra
página web, como veis aquí, demowebparaminegocio.com, veréis que probablemente no funcione. Bueno sí, ahora ha funcionado, es que a veces
tarda un poquito en cargarse y ahora se ve que lo ha hecho en seguida. Muy bien. En el caso de que vuestra página tarde más
tiempo en cargar, deciros que es normal, esto es debido a un proceso que se llama propagación
de las DNS, que básicamente consiste en que una vez que creáis vuestra página web, ella
va a viajar por todo el mundo y va a estar en todos los servidores del mundo para que
la pueda ver cualquier persona desde cualquier país del mundo. Bien. este proceso suele tardar entorno a
unos minutos, una hora, incluso puede llegar a tardar hasta 72 horas. Para ver exactamente cómo se está propagando
por todo el mundo, puedes entrar a nuestra página web aquí y vais al apartado a la
publicación que pone crea la web de tu negocio hoy, bien, bajáis hasta el apartado que pone
recursos, y veréis que hay una entrada aquí, hay un enlace que pone ver propagación DNS. Pincháis aquí, bien, y aquí ponéis lo
que sería la dirección de vuestra página web, en este caso, en el caso vuestro es:
demowebparaminegocio.com, bien, le damos a ENTER, y veréis por aquí que aparece pues
que está ya disponible por todo el mundo. Cuando esto esté así, es que vuestra página
web ya está lista. Entonces podemos o bien darle aquí donde
pone ” Go to your client area “, o sino, podemos darle aquí donde pone ” Panel de control
“. Bien. vamos a darle aquí, al área de cliente.
Entramos, y nos dice que si queremos unirnos a la beta o maybe later. Eso es que están
actualizando lo que es el portal de clientes. Dar aquí a donde pone ” Maybe later ”
Perfecto. Vamos a ver, aquí le damos, donde pone cPanel
login, pinchamos aquí, en demowebparaminegocio, perfecto. Y ya tenéis vuestro dominio y vuestro alejamiento.
FELICIDADES !. Muy bien chicos, lo primero que vamos a hacer
es poner el panel de control en español. Para ello, tenéis que venir aquí a la parte
de abajo, y donde pone change language, cambiamos, aquí justo a español. Perfecto, le damos a change.
Y ya lo tenemos en español. Para volver al cPpanel le damos aquí: cPanel. Bien.
Como os comentaba, una de las cosas más importantes es tener lo del https en nuestra página web,
vamos a hacerlo ahora mismo. Esto se hace entrando otra vez aquí al panel
de control, buscamos una opción que pone: Aquí, donde pone seguridad, le damos a donde
pone let’s encrypt, le damos, y aquí es donde instalamos el certificado SSL en vuestra página
web. Bien. Para ello, lo primero que tenéis que
hacer es darle aquí pone pone “Issue”, y marcáis esta opción. Bien. vamos a darle aquí a “Issue”, … está cargando,
esperamos a que acabe, bien. Ya tenemos instalado el certificado de seguridad,
perfecto. Ahora nuestra web, la podemos crear utilizando
esto de https, que es muy importante como os indicaba antes. Damos aquí, Go back, vamos a darle a panel… PASO NÚMERO 2: INSTALAR WORDPRESS. Y ahora vamos a instalar WordPress.
Es muy fácil instalar WordPress, se hace como lo harías en cualquier teléfono móvil,
como se haría cualquier instalación. Para ello, tenéis que venir aquí abajo,
y le damos donde pone WordPress, Perfecto. Tenéis que seleccionar aquí, donde pone
install now. Como él ha detectado que ya hemos puesto
el certificado SSL, ya aparece aquí, lo veis: HTTPS.
Perfecto. Sino tuvierais esta opción seleccionada,
la debéis poner. Aquí te aparecen los dominios tuviéramos,
como hemos elegido la opción de que solamente tenemos un dominio, pues ya nos aparece por
defecto. IMPORTANTÍSIMO: Esto que pone aquí de “wp”
tenéis que quitarlo, hay que borrarlo porque sino no podréis acceder correctamente a vuestra
página web, habría que entrar en vuestrapáginaweb.com/wp Para evitar esto, borramos esto de aquí. Bien. Aquí ponemos el nombre de vuestra página
web, pues yo voy a poner Demo Web Negocio. Bien.
Y aquí ponemos una descripción, pues un poquillo de qué va, en qué consiste vuestra
página web. Algo cortito pero que defina vuestra página
web. Web de muestra, voy a poner yo.
Bien. Aquí donde pone el usuario, tenéis que poner
el usuario con el cual vais luego a administrar vuestra página web.
Una vez que ya esté creada la página, de vez en cuando tendréis que entrar para ir
cambiando pues los los textos, las imágenes etc, pues ese es el usuario que vais a tener. Bien. Podéis poner el que queráis, yo voy
a poner pues Voxelart y como contraseña ponemos como por ejemplo, Voxelart-2018, bien. El email de administrador. Aquí tenéis que poner el correo electrónico
con el cual se va a administrar vuestra página web, es importante que pongáis un correo
que utilicéis realmente. Este que lo pone él lo pone por defecto,
poner el correo electrónico con el cual os habéis registrado. Yo tengo uno específico para este tutorial.
Vamos a ver, es este, tutoriales, está bien, vosotros tenéis que poner el que uséis habitualmente. Aquí en lenguaje seleccionamos español…
esto nada más… y le damos a instalar. Veréis que la instalación aquí pone que
tarde unos 3 ó 4 minutos, es mentira, como esto está hecho SSL, veréis que tarda unos
segundos. Ya veréis, 1… 2….3…4… 5… 6… 7…
en menos de 10 segundos ya tenemos instalada nuestra página web. Vuestra página web ya está lista y funcionando,
Enhorabuena ! Ya habéis instalado WordPress correctamente. Habéis visto que sencillo es, muy bien ahora
que WordPress, está instalado correctamente, es importante que entendáis los siguientes
conceptos: Cuando vosotros estáis administrando una
página web en WordPress, existen 2 páginas con la cual vamos a estar trabajando constantemente. Por un lado está vuestra propia página web
que es la que ven los clientes, y por otro lado está el área de administración que
es donde vosotros administráis la página web. Para que veáis lo que quiero decir vamos
a entrar aquí donde pone: https://demowebparaminegocio.com Esto es lo que verían los clientes. Vamos a esperar a que cargue.
Vamos a ver. Esto es lo que es la propia página web como
tal. Lo que van a ver las personas que entren a
vuestra pagina, escribiendo la dirección que vosotros hayáis elegido. Bien. Pero luego tenéis que tener en cuenta que
existe esta siguiente dirección también que es la que pone: igual, https://demowebparaminegocio.com/wp-admin Eso es muy importante. Voy a abrirlo también para que lo veáis.
Esto sería lo que es el administrador desde donde vosotros administráis vuestra página
web. Bien, vamos a ver… si en algún momento…,
voy a cerrar la sesión para que si en algún momento os pide usuario y contraseña, debéis
saber que el usuario es el que habéis puesto inicialmente, y la contraseña la que habíamos
puesto cuando estábamos instalando WordPress. Bien. Voy a acceder, y voy a cerrar estas ventanas
que ahora mismo no las necesitamos. Nos quedamos con estas 2. Esta es recordar, la que administraba la página
web, y está es la que ven los clientes. Si en algún momento quisierais editar vuestra
página web porque queréis añadirle más imágenes, queréis ponerle testo, cambiar
algún vídeo, etc, pues recordar tenéis que poner elnombredevuestrapáginaweb/wp-admin Esto es muy importante. elnombredevuestrapáginaweb.com o .es o .net
o lo que sea /wp-admin, y cuando os pida usuario o contraseña, es el que pusisteis cuando
instalasteis WordPress. Bien. Continuamos. PASO NÚMERO 3: INSTALAR Y PERSONALIZAR NUEVO
TEMA. Para empezar entonces lo primero que tenemos
que hacer es instalar el nuevo tema. El tema es lo que define la apariencia de
la página web. Es decir, cómo se va a ver lo que es la parte
de nuestra página, con qué gráficos, con qué colores, con qué tipo de letra, etc. El tema que vamos a utilizar en este tutorial
es uno que se llama Sydney, y lo podéis instalar de la siguiente manera: Tenéis que entrar
aquí donde pone apariencia, tema. O sino, pincháis en apariencia, y luego en temas.
Bien. Para instalarlo, tenéis que venir aquí arriba
donde pone añadir nuevo, seleccionamos y donde pone buscar tema ponemos el nombre. Aquí ponemos Sidney. Bien.
El que tenéis que instalar es este que tiene como como una chica con un teléfono en la
mano. Le damos a instalar… y como os decía, el
tema es lo que define la apariencia de vuestra página web. Cómo se va a ver, qué tipo de letra va a
tener, qué colores, qué tamaños, etc. Una página web puede tener diferentes temas
instalados, solamente que tiene que tener uno activo cada vez. El contenido va a ser siempre el mismo, solamente
que van a cambiar pues la apariencia. Bien, ya está instalado, ahora damos a activar. Bien, vamos a esperar a que guarde. Ahora que ya está activado, veréis que la
apariencia de la página web va a cambiar, veréis que además el texto seguirá siendo
el mismo. A ver, le damos aquí a actualizar, Demo web
negocio, web de muestra. Como veis, ha cambiado completamente.
Toda la apariencia, los tipos de letra, etc. Perfecto. Muy bien, entonces lo siguiente que tenemos
que hacer es personalizar el tema. Para personalizarlo, tenéis que venir aquí. Tenéis que venir a donde pone apariencia,
temas, buscáis el tema que tenéis instalado, y le damos aquí donde pone personalizar. Perfecto. Entramos, y aquí es donde vamos a definir
los parámetros que os indicaba. Bien pues un segundo…
Vamos a empezar de arriba a abajo. Sin saltarnos nada. Entramos donde pone generales. Aquí en generales, que pone relleno superior,
83 y relleno inferior 100 Esto de relleno significa la distancia que
hay entre la diapositiva, y el contenido de vuestra página web. Para este tutorial vamos a poner 0, en relleno
superior. Como veis esto se ha acercado a la parte superior. Y aquí, donde pone relleno inferior, ponemos
0 en lugar de 100. Y veréis que esto se va a reducir: 0.
Muy bien. Vamos a darle aquí a publicar para que se
guarden los cambios… bien, y retrocedemos un paso. Vamos aquí donde pone título del sitio o
bien, aquí donde pone título del sitio pues pondréis el texto que queráis. Ese seria el título de vuestra página web
o el nombre de vuestro negocio. Yo voy a poner el siguiente texto: Vamos a
ver… nombre de tu empresa, bien, y donde pone descripción pues ponéis una breve descripción
de lo que sería vuestra empresa o un breve resumen de en qué consiste, de qué temas
tratáis. Bien. Vamos a publicar… bien, perfecto. Donde pone sube logo, aquí colocaremos el
logotipo de vuestra empresa. Yo ya he creado una serie de imágenes para
este tutorial, para no tener que estar creándolo y no perder tiempo. Las imágenes que voy a utilizar en este tutorial
las podéis encontrar aquí en nuestra página web, tan sólo tenéis que entrar donde pone
tutoriales, en la entrada o publicación que pone crea la web de tu negocio, entráis aquí,
y bajáis donde pone recursos. Aquí donde pone recursos.
Bien. Estas son las imágenes usadas en este tutorial. pinchamos, se nos abre una ventana, y esto
lo descargáis. Esperar a que descargue…
Estas imágenes son las de este tutorial. Recordad que vosotros podéis poner vuestras
propias imágenes. Bien. Esto ya se ha descargado.
Vamos a minimizar, para que lo veáis, entramos aquí donde lo he descargado, y voy a descomprimirlo. Bien ya está descomprimido, y aquí están
las carpetitas. Perfecto, vamos a continuar. Esto ya lo podemos cerrar.
Continuamos aquí donde estábamos. Donde pone sube tu logo, pues seleccionáis el logotipo
de vuestra empresa. Yo le doy a subir ahora, donde pone seleccionar
archivo, voy a escritorio, web para tu negocio, web para negocio, logotipo. Ese es el logotipo de este tutorial. Lo voy a subir. Es importante que cuando subáis una imagen,
aquí donde pone texto alternativo, pongáis un texto que diga de qué trata esa imagen. Aquí yo voy a poner por ejemplo: Logo web. Pero es importante que lo hagáis por temas
de posicionamiento de Google. A Google le gusta que las imágenes tengan
un texto alternativo por si acaso la página da algún error, y aparezca un texto que describa
esa imagen. Bien.
Elijo la imagen. Como veis, esto ha cambiado. Se ha quitado
un texto que había anteriormente y se ha puesto el logotipo. Perfecto, eso es lo que
estaba yo buscando. Aquí donde pone icono del sitio, se está
refiriendo a este pequeño dibujo que aparece en la parte de arriba en la pestaña, en la
parte superior izquierda. En esta página web son como esos 3 cubos
de colores, pues en la vuestra seria el logotipo de vuestra empresa. Y aquí también lo subís. Tiene que ser
una imagen cuadrada, vamos a darle a seleccionar imagen, yo voy a seleccionar esta misma que
ya la tengo lista. Bien, le doy a elegir, aquí ya nos sale una
pequeña previsualización, perfecto. Le voy a dar a no recortar. Bien. Como veis ya ha cambiado. Le damos a publicar, para que se guarde y
retrocedemos un paso. Vamos aquí donde pone área de la cabecera,
y entramos en el primer apartado, donde pone tipo de cabecera. Bien.
El tipo de cabecera lo podéis dejar aquí por defecto en diapositiva pantalla completa
que básicamente es, que aquí se esté mostrando estas diapositivas que estamos viendo. Bien. Esto lo podéis cambiar si queréis, podéis
poner que sea una imagen fija, o bien que sino que sea un vídeo, o directamente que
no aparezca nada aquí arriba. Bien nosotros lo vamos a dejar en diapositiva
pantalla completa. Este tipo de encabezado de sitio, ahora mismo
vamos a ponerlo en sin encabezado, pero básicamente se está refiriendo a que cuando estemos en
una página que no sea la página de inicio pues si queremos que muestre también diapositivas,
imágenes, o vídeo. Para este tutorial lo vamos a dejar en sin
encabezado. Vamos a guardar. Perfecto… retrocedemos un paso, y seguimos
al siguiente. Diapositivas de la cabecera. Bien.
Aquí donde pone velocidad del pase de diapositivas, se está refiriendo al tiempo que tarda en
pasar de una diapositiva a otra. Está en 4000 mili segundos, yo voy a poner
5000 mili segundos para que sean 5 segundos. Bien. Esta opción que aparece aquí que pone detener
el control deslizante se refiere a este texto que está saliendo en cada diapositiva, si
queremos que se quede como un texto fijo. Voy a pinchar aquí para que veáis, veréis
que se cambia la diapositiva pero el texto sigue siendo el mismo. Esto si queréis tener un único texto. Bien. En este caso nosotros no lo vamos a seleccionar
de esa manera. Yo voy a poner un texto independiente para cada diapositiva. Bien. Aquí donde pone First Slide, pues vamos a
cambiar la diapositiva que trae por defecto. Vamos a darle aquí a cambiar imagen. Y tenemos que venir donde pone “subir archivos”. Perfecto. Seleccionamos el archivo, y buscamos una imagen
que nos interese. Bien. Yo ya tengo una carpeta creada donde
pone slider, con su orden. Elegimos la número 1.
Bien. Y aquí recordad nada más que seleccionamos
una imagen, donde pone texto alternativo, ponemos algo que la describa. Pues yo voy a poner “diapositiva 1”. Bien.
Le damos a elegir, y aquí donde nos pone que ponga el texto, pues yo ya tengo un texto
preparado, vamos a buscarlo… este mismo, a ver si lo selecciono… perfecto. Aquí lo tenemos. Ponemos el texto, crea tu
web ahora y en subtitulo, voy a poner este que ya tengo preparado, a ver … por aquí. Vale, muy bien. Bajamos a la siguiente diapositiva. Bien. Le damos a cambiar imagen, voy a volver
a subir, seleccionar archivo, coloco la número 2 … Open, y ahora no voy a seguir poniendo
lo del texto alternativo para que el tutorial no se haga muy largo, pero recordad que tenéis
que hacerlo siempre. En texto alternativo, poner un texto que describa
la imagen. Bien, vamos a poner también el texto de la
segunda diapositiva… a ver… muy bien. Si os estáis preguntando dónde podemos conseguir
imágenes de calidad como la que estoy utilizando yo aquí en este tutorial, pues que sepáis
que si entráis a nuestra página web, en el apartado…, recordar, de tutoriales, dentro
de donde pone crea la web de tu negocio, en la parte de abajo donde pone recursos, hay
un apartado que he puesto que pone descargar imágenes de calidad: unsplash.com Esta es una página web buenísima que yo
utilizo muchísimo para descargar imágenes de calidad. También tenéis estas otras: pixabay.com
y pexel.com, pero esta es la que yo más utilizo. Aquí tenéis un montón de imágenes creadas
por fotógrafos profesionales, con imágenes de muchísima calidad, que podéis utilizar
para vuestra página web. Por ejemplo voy a probar a descargar esta
para que veáis. Mirad que fácil es descargar una imagen,
le dais aquí, simplemente, y ya la tenéis. Yo voy a descargarla aquí, directamente,
y voy a descargar por ejemplo esta otra también. Podéis entrar en ella y aquí donde pone
Download Free, bien, pues también la voy a guardar por aquí, esto que está diciendo
“Say thanks” es por si queréis agradecer al autor, pero no hace falta realmente. Bien, y aquí, os vais a encontrar con un
problema, un problema bastante serio además. Cuando estáis subiendo imágenes a vuestra
página web, las imágenes deben tener un tamaño y una resolución concreta. Esta imagen de aquí por ejemplo, es una imagen
muy grande. Fijaros: Esta ocupa 7,3mb, eso es muchísimo
para una página web. Si subís esto tal cual, a vuestra página
web, va a ir muy lenta, por que va a tardar muchísimo en cargar esta imagen de 7,3 Mb. Y esta de aquí, fijaros, 4,1 Mb.
Eso es muchísimo, las imágenes deben ocupar entorno a 250, 300 quizás, como mucho 400
kilobytes, que es muchísimo menos de medio mega. Os voy a enseñar ahora cómo hacer para reducir
el tamaño de estas imágenes y poder utilizarla en vuestra página web. Bien, para ello, esto de aquí lo podemos
cerrar ya… Perfecto. Y aquí hay un apartado que pone: editor de
imágenes online. Este es un editor muy parecido al photoshop,
en el cual podéis editar vuestras imágenes de forma gratuita a través de lo que sería
una página web. Yo la utilizo mucho, vamos a entrar en ella
para que la veáis. Bien, una vez que entréis tenéis que acceder
un poquito más abajo donde pone PIXLR EXPRESS, este de aquí. Le dais donde pone LAUNCH WEB APP, bien, esperamos
a que cargue, vamos a ver, y aquí donde pone Browse, elegimos las imaǵenes que queremos
editar. Bien. Como veréis yo me he descargado esta imagen,
bien le doy a open, y aquí la tenemos. Para hacer que esta imagen sea más pequeña,
tenéis que venir aquí donde pone: “adjustment”, y luego seleccionar donde pone “resize”. Bien, y fijaros que aquí pone que el ancho
es de 4000 y el alto de 2667, eso es demasiado. Las imágenes para la web yo os recomiendo
que tengan de ancho como mucho 1920 pixeles y como mucho de alto pues esto: 1280, 1080
… entorno a 1000 aproximadamente. Bien. Una vez que lo tengáis le dais aquí donde
pone Apply, y le dais a guardar. Fijaros. Aquí ya te aparece el nombre que va a tener
la imagen, la calidad, y el peso. Bien. Decimos que ya hemos reducido el tamaño,
antes medía 4000 pixeles de ancho, ahora mide 1920 , pero pesa muchísimo todavía,
pesa 787 kilobytes, esto hay que reducirlo más. Vamos a ponerlo que por ejemplo un 70% de
calidad, para que esta imagen baje a 484 kilobytes. Recordad que os he dicho que tienen que ser
entre 250… 300… bueno que no ocupe más de 500kb, sería lo ideal. Bien, esta imagen para que no perdamos la
original, vamos a ponerle otro nombre: Reescalada, y le vamos a guardar. Bien.
Guardamos en la carpeta… Perfecto. También indicaros que este editor de imágenes
tiene más herramientas a parte de reescalar, se pueden hacer muchísimas más cosas por
ejemplo podéis poner aquí un texto, por ejemplo el texto que os guste para vuestra
empresa… ummm… por ejemplo, nombre. Esto lo podéis ampliar, lo podéis mover,
podéis cambiarle el color, podréis hacer un montón de cosas como esto. Yo os recomiendo que le echéis un vistazo
a todas las opciones que tiene, porque es bastante completo este editor de imágenes
online, está muy bien además. Bueno, habiendo dicho esto, vamos a continuar
con el tutorial. Cerramos por aquí… perfecto. Y seguimos añadiendo imágenes. Estábamos en el Slide número 2, continuamos
hacia el número 3. Bien. Aquí seleccionamos una imagen, subir, seleccionar,
imágenes, slider, esta es la 3. Para no tener que subir una a una, voy a seleccionar aquí
las 3 con la Mayúscula, 3, 4 y 5, y le doy a “Open”. Bien.
Como os decía, yo he puesto un número delante de cada imagen para saber en qué orden lo
iba a poner para este tutorial en concreto, esta es la 3, así es que selecciono esta. Recordad poner lo del texto Alt. Bien.
Donde pone título de cabecera pues ponemos el correspondiente para el tercero que tengo
yo por aquí mis notas, lo pongo por aquí, en el subtítulo es el correspondiente a ver
que lo cogemos y lo pegamos por aquí, perfecto. Yo creo que hay un espacio delante, lo quitamos.
Bien. Vamos al cuarto Slide, a ver… cojo el texto
que tengo por aquí… y lo pegamos, seleccionamos la imagen, selecciono la cuarta, a ver cual
es… esta es la cuarta, ponemos el subtítulo, lo saco de aquí de mis notas… Bien. Vamos a la quinta, selecciono imagen, ponéis
el texto alt, elegir imagen, poner título, perfecto, copiar… pegar…selecciono y ponemos
el subtítulo, a ver… es que ya tengo las notas preparadas para
no tener que estar inventándomela ahora, en el propio tutorial, sino tardaríamos mucho.
Bien. Esto que pone URL para llamar a la acción
lo podéis dejar tal cual, eso es simplemente una notificación que tiene la página para
que cuando pinches aquí, te lleve aquí abajo. Ese lo podéis dejar así. Bien.
Donde pone texto para tu botón de llamada a la acción se refiere a este texto que aparece
aquí, esto de haz clic para empezar pues nada, yo lo voy a cambiar yo le voy a poner:
“Comenzar Ahora” por ejemplo, bien. Y el resto de opciones la podéis dejar. Hay un montón de opciones en la opción de
personalizar que no vamos a tocar. Solamente me voy a dedicar a tocar las que
nos afectan para este tutorial. Vosotros si queréis podéis seguir echándole
un vistazo de vez en cuando. Bien, vamos a entrar aquí donde pone: Cabecera
multimedia. Esto de cabecera multimedia se está refiriendo
a que si en lugar de tener aquí diapositivas, preferís tener un video, pues aquí o bien
subís el video si es un video propio que tenéis vosotros que habéis grabado, o sino
un video de YouTube que os guste. Bien, vamos a buscar un video de YouTube y
ponerlo para que veáis, para que veáis que se van a sustituir estas imágenes de aquí,
por un video. Bien. Perfecto.
Vamos a YouTube, y buscáis cualquier video que os guste para poner de fondo. Por ejemplo
a mí me gusta buscar pues “4k sky” por ejemplo. Para que muestre un cielo en 4k. Bien pues podemos poner cualquiera de estos,
este timelapse a ver qué tal es, bien pues cogemos este, copiamos, lo que es la dirección,
y la pegamos aquí. Y como veis, no hace nada.
Vamos a publicar, y tampoco hace nada. ¿ Por qué no hace nada ?
Pues porque recordar que tenemos marcada la opción de que aquí nos muestre diapositivas,
no que muestre el vídeo. Le damos atrás, donde pone tipo de cabecera,
cambiamos a vídeo. Fijaros que ahora ya sale. Veis, ese sería el vídeo que habría en
la posición donde estaban las diapositivas. Esto es muy chulo si queréis poner un video
en lo que sería, en la cabecera de vuestra página web. Como decíamos, vamos a dejarlo como estaba
antes. Hay un vídeo que me gusta mucho que tengo
por aquí apuntado, que vosotros podréis seleccionar si queréis, ahora os voy a pasar
aquí la dirección, a ver si lo consigo copiar de mis notas, para que veáis, aquí lo de
poner cabecera multimedia, cambiamos esto, y ponemos, este video cuando estaba mirando
para el tutorial lo había visto y me gustó muchísimo. Un vídeo bastante chulo la verdad.
Vamos a ver, os dejaré aquí donde pone recursos, en el apartado de recursos, os dejaré el
enlace a este vídeo. Está muy chulo son como unas tintas así
de colores. Preciosas. Pero nada vamos a seguir con las diapositivas. Diapositivas… Bien, perfecto, publicamos
para cambiar, y continuamos. Donde pone estilo del menú, aquí está haciendo
referencia a si queremos que el menú quede fijo, o sea estático. ¿ Qué quiere decir esto ? Pues que cuando
vosotros bajáis, podéis ver que aquí arriba que pone crea tu menú aquí, que esto está
fijo, aunque yo baje aparece en la parte de arriba sale como pegado a la parte de arriba
de la página, eso significa que esté fijo. Si lo ponemos en estático, cuando descendáis
por la página web hacia abajo, él va a quedar ahí arriba, no se va a desplazar con vosotros.
Fijaros: ¿ Veis la diferencia ? Ahora se queda ahí arriba, sin quedarse pegado,
y aquí se queda pegado en la parte de arriba. Bien. Para este tutorial, pues yo prefiero que esté
en la posición fija. Bien. Continuamos, donde pone estilo del menú,
pone interno o centrado. Interno significa que salga aquí, en la parte
superior derecha, o centrado, pues que salga aquí en el centro, fijaros:
Centrado, veis, sale centrado, y cuando tengáis vuestras páginas creadas la página de inicio,
la página de contacto, etc, aparecerían aquí. Bien. Para este tutorial, como os he dicho, vamos
a dejarlo en interno. Bien. Vamos a ver… vamos a continuar. Esto ya lo hemos completado el área de cabecera,
le damos atrás… Donde pone opciones del Blog, esto de momento
no lo vamos a tratar. Cuando creemos el apartado de blog vamos a
venir aquí, y miramos los parámetros que tiene.
No hace falta que lo entendáis ahora mismo, porque si lo explico no lo vais a entender
en estos momentos. Vamos a continuar hacia donde pone: Fuentes. Bien. Donde pone fuentes, es donde podemos
cambiar el tipo de letra. Perfecto. Aquí salen todos estos parámetros, aquí
podemos cambiar tipo de letra, tamaño, etc. En esta plantilla en concreto, para cambiar
el tipo de letra hay que hacerlo de una forma un poco, la verdad creo que es de lo más
complicado que vamos a hacer en este tutorial. Hay que hacerlo de una manera un poco extraña. Bien. Fijaros que aquí salen unas instrucciones,
y nos está mandando que vayamos a una página, google.com.fonts , vamos a coger esta página. Este enlace también lo tengo aquí.
Lo tengo por aquí, cambiar tipo de letra del tema.
Es lo mismo. Yo le voy a dar aquí porque ya me funciona
el enlace, bien. Y aquí es donde elegís el tipo de letra.
Podéis elegir cualquier tipo de letra de las de google fonts, que son muchísimas.
Fijaros todas las que hay, si retrocedéis y vais hacia abajo, vais a ver todas las que
hay. Son muchísimas. Muchísimas. Bueno, voy a ir directamente a la que vamos
a utilizar. A mí me gusta mucho esta que se llama Open Sans. Para seleccionarla, le
dais aquí donde pone más, y ya te sale ahí abajo seleccionar. Bien. Pinchamos aquí. Veis esto que está en negrita, sale más
oscuro, pues tenéis que seleccionar solamente lo que está en negrita, sin las comillas. Recordad sin las comillas. Copiáis aquí, copiar, y lo lleváis aquí.
En este caso, para este tutorial solamente vamos a modificar la que pone fuentes de cabecera,
que son las que aparecen aquí arriba. No vamos a cambiar nada más, ya que, ya lo
entenderéis un poquito más adelante, porque vamos a utilizar un editor visual. No vamos a hacerlo con este editor de aquí
de la izquierda, sino que vamos a utilizar otra herramienta. De momento sólo tenéis que cambiar esto,
ponéis aquí lo que habíamos cogido en negrita, bien. Por cierto, aquí donde pone Customize podéis
cambiar los parámetros, por ejemplo, él viene por defecto en regular 400, o podéis
ponerlo en bold 700, yo lo voy a dejar en bold 700 y en regular 400 que es para que
esto tenga más grosor por así decirlo, la letra. Como veis esto ha cambiado, ya pone: 400,
700, bien pues lo seleccionamos por aquí, y lo ponemos por aquí, bien. Aquí donde pone familia de la fuente, tenéis
que poner lo siguiente: Esto que viene aquí, y aquí sí que cogéis las comillas, tenéis
que hacerlo tal cual lo estoy haciendo yo. Fijaros que no cojo el punto y coma, sólo
cojo ésto de aquí, pues eso es lo que hay que seleccionar, copiar, y lo traemos aquí
donde pone: familia de la fuente. Ya os digo que esto es lo más complicado
que creo que vamos a hacer en todo el tutorial, así es que no os asustéis, esto no tiene
nada que ver con lo que vamos a hacer después. Esto de aquí lo voy a cerrar, esto de aquí
pues, de momento lo voy a cerrar también, bien. Esto de Google Fonts no lo necesitamos, bien,
y continuamos, perfecto. Dentro de lo que son las opciones de las fuentes
no tenemos que hacer nada más de momento. Vamos a retroceder, bien. Vamos a ver… donde pone pie de página,
veis que pone 1, 2, 3 y 4, se está refiriendo a unos elementos que vamos a colocar en la
parte inferior de vuestra página web. Esto lo voy a cerrar, bien. Ahora mismo no lo estáis viendo, lo podéis
ver en el página web de muestra, voy a abrirla para que veáis, uy… donde está…, aquí. Esa es la página de muestra que vamos a seguir. En la parte de abajo, van a aparecer 4 elementos,
ya veréis. Ah, no perdón, me he equivocado. La página web de muestra es la de… tutoriales…
tititititi…, esta es la web de muestra. Esta web que pongo aquí es la que estamos
creando en estos momentos, para que la podéis ver en un futuro. Vale, vamos a continuar mientras tanto, vamos
a seleccionar aquí donde pone 4, bien, y como os decía, aunque aquí no estamos viendo
nada ahora mismo, son 4 elementos que van a aparecer aquí abajo. Esta es la página que estaba diciendo, esta
es la que vamos a construir. Bien. Vamos a retroceder, hacia abajo, hacia abajo,
hacia abajo… y aquí donde pone: Síguenos en Facebook, Novedades, aquí va a haber un
elemento que luego lo vamos a mostrar, y aquí donde pone Carrito. Se está refiriendo a esto. Bien, elegimos 4 y la vamos a publicar.
Vale, perfecto. Vamos a ver… retrocedemos un paso… vamos
aquí donde pone Colores, y aquí, sólo tenéis que cambiar los colores en 2 apartados, los
colores los podéis poner por supuesto como queráis vosotros. Podéis entrar por aquí en todas las opciones,
e ir cambiando y ponerlos a vuestro gusto, pero para seguir el tutorial, tenemos que
entrar en: Generales, donde pone color primario, pegar el siguiente código: yo voy a elegir
este, que es el que me gusta a mi, un momento que estoy buscándolo aquí en mis notas. Copiar…
Pegar… Esto lo podéis mover como queráis, y ponerle
el color que más os guste. Yo, como os decía voy a poner uno específico
que ya tengo seleccionado, que es este. Que habéis visto aquí, este azul, ese azul,
un azul clarito. Bien. Retrocedemos, a ver… el otro apartado es
donde pone encabezado, donde pone color de los elementos cuando se está encima, pues
este también lo voy a cambiar y le voy a poner el mismo código de antes. Como os decía, vosotros podéis ir mirando
esas opciones y mirar a ver cual os gusta, para cambiar todas las cosas. Bien. Publicar… vamos atrás. Aquí donde pone pie de página podéis cambiar
estos colores de aquí. Ya os digo, yo lo voy a dejar así de momento, vosotros ir probando
si queréis. Bien. Ya acabamos en el apartado donde pone colores. Vamos a continuar, a ver… en imagen de fondo,
de momento no vamos a hacer nada…en menús tampoco… widgets tampoco, ajustes de portada
tampoco, e información de tema nada, y css adicional, nada. Por ahora, aquí ya no tenemos que hacer nada
más. Ya hemos definido los parámetros generales
de la página. Bien. Esto lo podemos cerrar, cerramos por aquí,
Bien. Recordar que este es el administrador desde
donde nosotros gestionamos nuestra página web, esto no lo ve nadie más, solamente nosotros,
y para ver lo que están viendo vuestros clientes os colocáis aquí encima en este icono de
una casita y encima de donde pone visitar sitio, clics derecho, abrir en una pestaña
nueva. Lo que veis vosotros… lo que ven vuestros
clientes. Vosotros, vuestros clientes. Esta página de aquí, es la página de muestra,
no le hagáis caso de momento, es la que estamos usando como referencia. Bien, vale muy bien. Ahora que ya está instalado el nuevo tema
y personalizado… PASO NÚMERO 4, INSTALAR PLUGINS. Vamos a pasar a instalar lo que son los plugins.
Los plugins, como os decía inicialmente, son como programas que se instalan en WordPress
y le dan funcionalidades que él no tenía por defecto. Por ejemplo: WordPress no tiene un formulario
de contacto como tal, hay que instalarlo. WordPress no tiene la opción de compartir
en Facebook, eso hay que instalarlo. Bien. Aquí es donde se instalan todas esas
cosas, y es muy sencillo. Lo primero, esto que viene aquí por defecto,
como no lo vamos a utilizar lo vamos a borrar. Podéis borrar pinchando aquí, le damos a
aceptar. También existe otra opción de borrar seleccionando
aquí, acciones en lote, primero hay que desactivar, bien.
Y luego borrar. Me pregunta si quiero borrarlo, por supuesto
que sí, o bien podéis seleccionar aquí, que se seleccione todo y esto marcado y le
dais a borrar. Para que veáis que hay varias formas de hacer
las cosas. En WordPress para como todo, que hay muchas
cosas…, bueno que primero hay que desactivar, y luego borrar perdón, primero se desactiva,
y luego se borra. En WordPress hay muchas maneras de hacer las
cosas. Vale, perfecto, damos a aceptar, y ya está. Esos eran los plugins que traía por defecto,
como no los necesitamos, los borramos. Y ahora, os voy a decir los que vamos a utilizar
nosotros. Bien, venimos aquí, a nuestra página de
recursos y buscamos los plugins que vamos a utilizar. En este caso tengo aquí un listado, este
que pone Really Simple SSL. Primero lo buscamos, y ahora os digo para
qué vale. Vamos a ver, selecciono aquí el texto, …este
texto por aqui… perfecto, selecciono texto, y donde pone añadir nuevo, bien, voy a esperar
que me va a salir un buscador, esto es muy parecido a lo que seria el Play Store de lo
que es Android. Bien, donde podéis buscar aplicaciones, hay
algunas que son gratis, otras que no lo son, pues eso como si fueran aplicaciones. Esto de Really Simple SSL, lo que hace es
que cuando alguien entre a vuestra página web, le obliga a acceder a la versión segura.
Que quiero decir yo con ésto. Vuestra página web si os acordáis, al principio
instalamos algo que se llamaba certificado SSL, bien.
El certificado SSL lo que hace es que encripta la información que viaja entre tus clientes
y tu página web para que ningún hacker pueda robar esa información, pero qué pasa, que
por defecto una página web viene de 2 maneras, está la versión segura y la versión no
segura. Como veis aquí, el nombre de la página web
que estamos viendo en estos momentos se llama demowebparaminegocio.com. Si yo pongo solamente
eso, bueno a ver el plugin como está activado ahora, me va a obligar a entrar en la versión
segura. Si la persona intenta acceder solamente poniendo
esto, aquí saldrá un mensaje que pone “no es seguro” y eso es muy malo, muy muy malo,
Google os penaliza si vuestra página web pone que no es segura, y os quita posiciones
en los buscadores. Este plugin obliga a que te muestre esa versión,
la versión segura. Bien, vamos a ver. Vamos a ver, continuamos por aquí.
Para eso es para lo que vale este plugin. Yo lo utilizo en todas mis páginas. Este que pone wp fastest cache, lo que hace
es que vuestra página web vaya más rápido, que cargue más rápido, ya que lo que está
mostrándole a los clientes, está mostrando una página web que esté en cache, que ya
esté guardada en vuestro ordenador, o en el servidor. No está construyéndola constantemente, ahora
mismo no hace falta que lo entendáis, pero sí es importante que lo instaléis. Bien, ya lo entenderéis en el futuro, según
valláis cogiendo más experiencia con WordPress. Le damos a instalar. Básicamente acelera
la carga de vuestra página web para que valla más rápido, y gaste menos megas a vuestros
clientes, etc. Bien. Esperamos a que se instale, le damos a activar,
bien. Y aquí ya nos aparece una nueva opción en
el menú, y aquí en la parte de arriba, eso es lo mismo.
Vamos a ir a configuración, y vamos a activar todas las opciones. Esto lo activáis todo. Lo marcáis todo que
sí, a ver, por aquí, ok, lo activáis todo… todo lo que nos permita lo dejáis tal cual
vienen por defecto, bien. Esto lo ponéis en español, y lo guardamos. Vale, perfecto. Por un lado ya estaría este. Vamos a Elementor. Este es el plugin más importante que vamos
a instalar, bueno todos son importantes pero este es de lo más importante que vamos a
instalar para poder construir nuestra página web como nosotros queremos.
Recordad, venir aquí a plugin, o bien pincháis aquí, o sino vais donde añadir nuevo directamente,
es lo mismo. Bien. Y aquí, buscáis el que pone Elementor.
Perfecto. El que tenéis que seleccionar es este que
pone Elementor Page Builder. Es la herramienta que nos va a permitir crear la página web
de forma visual, sin tener que andar programando ni metiendo código ni nada de esto, es muy
sencillo, con esto se puede crear una página web, la puede hacer hasta un niño.
Es muy muy muy bueno esto de Elementor, ya veréis que os va a gustar muchísimo. Yo estoy encantado. Antes utilizaba uno que
se llamaba Divi, que es un tema que es bastante visual, pero este a mí me gusta muchísimo
más, es bastante más rápido, más intuitivo, es la leche, a mí me encanta.
Vamos a darle a activar. Ahora lo veréis en acción. Bien, y hay un último plugin que os quiero
enseñar a instalar de momento, que es este que pone “Real Time Find and Replace”. ¿ Para qué vale esto ?
Pues esto es algo que la gente lo utiliza mucho, bueno este plugin no sé si lo utilizan
mucho pero esto es algo que la gente demanda muchísimo, que es lo siguiente: Cuando hacéis
una página web en WordPress, siempre aparece una parte con publicidad en la parte inferior,
y esto hace que vuestra página web no sea profesional. Esto de aquí hay que quitarlo, y para quitarlo,
se hace con este plugin: Real Time Find and Replace.
Y… ¿Cómo funciona? Pues nada, simplemente tenéis que hacer lo siguiente: Os colocáis
por aquí cerca de donde pone creado con WordPress, hacéis clic con el botón derecho y le dais
a una opción que pone “ver código fuente de la página”
Pincháis aquí, y va a salir todo este código. No os preocupéis, no os asustéis, aquí
no hay que editar nada, solamente hacer lo siguiente: Le hacéis en vuestro teclado,
pulsáis la tecla Control y la tecla F de Francia.
( Ctrl + F ); Y os sale aquí, un buscador. Pues buscáis
donde pone creado con WordPress. Ya sale por aquí, ¿ lo veis ?
Bien. Pues ahora lo que tenéis que hacer es seleccionar
aquí donde pone, desde donde pone a href, vais seleccionando hasta aquí donde pone
“A Themes”, desde donde pone a href, hasta donde pone “A Themes”. Seleccionáis este
código, y le dais a copiar. Bien, venimos aquí donde pone plugin, y donde
pone ajustes, a ver… ah me he equivocado, perdón. Es que no hemos instalado el plugin. Vamos
a instalarlo perdón. Le damos a añadir nuevo, fallo mío, disculpad.
Primero hay que instalar el plugin, sino no nos va a valer. Bien, buscamos y este que pone como una lupa
con un fondo azul lo vamos a instalar ahora, Real Time find and replace, esto lo que hace
es que busca un texto o un código de la página, y lo sustituye por otra cosa, en este caso
lo que vamos a hacer es cambiar eso de creado con WordPress, y vamos a poner el texto que
os interese, el nombre de vuestra empresa, copyright, etc. Lo que sea, bien. Ya está instalado el Plugin, Real Time Find
and Replace, aquí lo podéis ver. Para acceder a las opciones, hay que venir
aquí, donde pone herramientas, Real Time Find and Replace. Muy bien, entramos y ahora donde pone “Add”,
esto lo que va a hacer es que va a añadir una modificación, ¿ qué modificación?
Pues recordad, queremos quitar esto de creado con WordPress. El código que corresponde a eso de creado
con WordPress, es desde aquí, recordar, desde donde pone a href hasta donde acaba esto de
“a themes”. Seleccionamos este código, copiar, y lo ponemos
aquí, donde pone find, pegar, y le damos a update setting. Perfecto. ¿ Qué va a hacer esto? Pues el va a buscar
este código y dónde esté ese código, va a poner lo que nosotros queramos. Como os he prometido que en este tutorial
no vamos a estar editando código ni haciendo cosas raras, pues aquí donde pone replace
with, habría que poner el código de lo que queramos poner, pero os voy a enseñar un
método más fácil, para no tener que poner ningún código aquí. Bien. Venimos aquí a páginas, todas las páginas,
y le damos a añadir nueva. Esto es una página que vamos a utilizar como
un lienzo por así decirlo. Nada más, aquí ponemos lo que queráis poner
aquí abajo en el pie de página, donde pone creado con WordPress. Bien. Yo quiero quitar esto, y voy a poner pues
por ejemplo, Voxelart Studio, bueno quiero poner también el símbolo de copyright así
es que lo añado aquí al principio, a ver donde estaba esto de los símbolos… era
aquí, caracteres especiales. Bien, el símbolo de copyright, lo añado
aquí, Voxelart Studio – 2017. Bien. Esto lo voy a poner en negrita con color además,
voy a ponerlo en, como decimos que esto es un color así bastante oscuro, voy a ponerle
pues un color, pues un… , podemos ponerle un blanco, o un rojo, vamos a ponerle un rojo
mejor, a ver cómo queda. Seguro que no queda muy bonito pero vamos
a ponerlo. Uy perdón, esto de darle a publicar, lo he
hecho por error, no hace falta darle. No es necesario. Solamente tenéis que venir
aquí donde pone html, seleccionáis esto, copiáis donde pone copiar, y lo lleváis
al plugin. Vamos a decirle que este texto esté centrado
también. Le damos aquí, así queda más chulo. El 2017 voy a decirle que sea, pues que sea
blanco, bueno claro así no se ve, si lo pongo blanco no se va a ver, así es que en lugar
de ser blanco, que sea pues un azul clarito. O verde clarito, no sé qué color es este
… Bien. Recordad, venimos aquí donde pone html,
esto que he dado yo a guardar aquí no hace falta.
Ha sido un error mío, seleccionamos este código, y venimos aquí donde pone herramientas,
Real Time Find and Replace, esto le podéis dar a que sí salir, no necesitáis guardar
esto para nada, yo es que le he dado sin querer. Y le damos a update setting. Veréis aquí, que esto se ha quitado y se
va a poner el texto que hemos puesto, perfecto, a esto me refería, podéis poner lo que queráis. Tanto como os de vuestra imaginación, podéis
poner imágenes, enlaces, lo que sea. Bien. Vamos a continuar. Ahora que ya está establecido esto, ya hemos
instalado los plugins necesarios…. PASO NÚMERO 5: CREAR APARTADOS DE LA WEB. Vamos a crear los diferentes apartados de
la página web. ¿ A qué apartados me refiero ? Pues a los
que aparecen aquí en el menú. Por ejemplo, bueno esto lo voy a cerrar.
Pues me refiero a estos apartados, al menú, al botón de inicio, al de quienes somos,
servicios, blog, tienda, contacto, etc. Para hacerlo, básicamente lo que tenéis que hacer
es venir aquí donde pone páginas, todas las páginas, Bien. Esta es la página que creamos antes por error,
nada, la podéis borrar ya os dije, le damos aquí, esta también la borramos, es una que
trae por defecto, recordad que está aquí en la papelera, luego la papelera la podéis
vaciar si queréis. Yo la voy a vaciar, así no estamos ocupando
espacio. Bien, le damos a añadir nueva, y aquí es
donde ponemos estas páginas. Aquí tengo esto como referencia, pues hay que crear la
página de inicio, que aunque no está listada aquí existe como tal, es la página principal,
es decir la página de inicio recordar que es esta. A ver si me carga, si ahora ya me salen las
diapositivas, esta es la página de inicio. Luego está la de quienes somos, la de servicio,
la de blog, la de tienda, la de contacto, etc. Nada no os preocupéis.
Vamos a ir creándolas. Empezamos con la de Inicio. Inicio, bien.
Le damos a publicar, y buscamos también la de quienes somos. Ponemos aquí, añadir nuevo, y ponemos: Quienes
Somos. Bien. Publicar, ponemos la de Servicio. Para que veáis que eso se puede hacer de
diferentes maneras, puedes venir aquí donde pone páginas, añadir nueva, es lo mismo,
decíamos que hay que poner la de servicios. Servicios, bien. Publicar.
Y hay que poner la de Blog, también se puede hacer desde aquí, aquí eso es como un acceso
directo, más rápido, más, y le damos a página.
Ponemos aquí blog, publicar. Esta de tienda, no la vamos a crear ahora,
¿Por qué? Pues porque vamos a instalar luego un plugin
que lo va crear automáticamente, no hace falta, vamos a pasar directamente a la que
pone contacto. Le damos a añadir nueva, y ponemos Contacto.
Bien. Publicar. Qué bien, ahora tenemos todas estas páginas
creadas. Está blog, contacto, inicio, quienes somos,
y servicios. Si entramos aquí, veréis… que no sale
por ningún sitio, jaja, ¿ cómo hacemos para que estas páginas aparezcan aquí en
el menú? Pues esto es creando un menú, ya lo dice
el nombre. Para crear el menú, pues nada, simplemente
tenéis que venir aquí donde pone: apariencia, menús. Bien, y aquí salen las páginas que hemos
creado. Si os fijáis sale inicio, y además sale
inicio otra vez aquí, nada eso es porque él por defecto crea una de inicio. No os preocupéis, esto que pone enlace personalizado
le dais a eliminar. No lo necesitamos. Bien. Aquí también podemos establecer el orden
en el cual queramos que aparezcan pues lo que son las páginas en el menú de arriba. Como veis aquí está quienes somos, y va
luego, a continuación va servicios, y luego blog, pues podemos replicar esto mismo. Hemos dicho primero quienes somos, y luego
servicios. Bien. Bueno, vamos a poner primero la inicio que
va a estar oculta pero no os preocupéis, ponemos inicio, luego era quienes somos…
¿ veis que se puede mover? Bien. Quienes somos, luego la de blog, luego la
de tienda y contacto. No. Quienes somos, servicios, blog. Quienes somos, servicios…uy… el motivo
por el cual a veces se queda pegado aquí es porque eso sería un submenú, es decir,
que esto saldría cuando pincháramos aquí, de momento no lo vamos a necesitar, luego
más adelante os lo enseño. Inicio… quienes somos… servicios… blog…
quienes somos, servicios, blog, contacto, la de tienda la dejamos para más adelante. Aquí donde pone nombre de menú, podéis
poner el nombre que queráis, solamente es para que sepáis vosotros como referencia,
no hace falta nada más, este nombre no lo va a ver nadie. Bien. Ponemos, pues menú principal. Ya os
digo, este nombre no lo va a ver nadie más. Solamente es para que lo sepáis vosotros.
Vamos a crear menú, y le decimos que queremos ponerlo en el menú principal. Donde se va a ver, pues en el menú principal. Vamos a guardar, y ahora veréis que sí que
va a aparecer. Saldrá inicio, quienes somos, servicios,
blog, contacto, fijaros. Recargamos, inicio, quienes somos, servicios,
blog, contacto. Perfecto. Muy bien. Ya se está pareciendo bastante
a la página de muestra. Muy bien. Qué sucede? vamos a hacer lo siguiente, esto
de inicio lo vamos a quitar, si os fijáis aquí, no sale… ¿por qué ? porque no queremos
hacer redundancia. Ahora mismo todo el mundo, sabe que cuando
se pincha en el logotipo de vuestra empresa es lo mismo que darle al botón de inicio,
y así nos queda una página web más limpia. Esto de aquí podemos quitarlo.
No os preocupéis. Vamos a quitarlo de aquí, le damos… borrar. Guardamos el menú, y veréis que ya no aparece. Quienes somos, servicios, blog, contacto.
Perfecto. Vale, y aquí sucede lo siguiente.
Que hay que decirle a WordPress cual va a ser la página de inicio, no solamente porque
pongamos aquí inicio y la coloquemos aquí en el menú ya él va a saber… él no lo
sabe. Hay que decirle cual queremos que sea la página
de inicio. La página de inicio podría ser la de quienes
somos, o la de servicio, o la de contacto. Así es que para decirle esto, hay que venir
aquí, a donde pone ajustes, lectura. Bien. Y aquí donde pone tu portada muestra, pues
hay que decirle: Una página estática. Bien. Y aquí te dice: ¿ Cual es la página de
portada ? Pues la página de portada queremos que sea la que se llama Inicio.
Bien. Y esto que pone página de entradas, se está
refiriendo cual va a ser nuestro blog, dónde van a ver las noticias, por ejemplo, esta
es la página de muestra. En la página de muestra, las noticias se
van a ver aquí, las cosas que yo voy actualizando se van a ver en el apartado en la página
que se llama blog. Pues tengo que decirle lo mismo, tengo que
decirle que la que se llama blog, es donde van a ir las entradas. Le llaman entradas a las publicaciones. Recordar que un blog es como si fuera una
especie de periódico. Bien. Vamos a guardar los cambios, y esto ya está
establecido. E ya sabe que esta es la página de inicio. Veis aquí, inicio. Perfecto. Donde pone blog, pues aquí estarían las
entradas del blog. El trae una por defecto, aquí estarían. Vale, continuamos. Muy bien, vamos a entrar por aquí, vale…
qué más… , a ver… , ya hay que empezar entonces a crear lo que sería la propia página
de inicio. Vamos aquí donde pone páginas, todas las páginas, y ahora empieza lo bueno,
vamos a entrar aquí donde pone inicio. Bien. Quiero que veáis una cosa. Si venimos
aquí a la página de inicio, que decimos que este icono, bien, fijaros que él nos
pone esto que viene aquí, inicio, y esto es feo que quede aquí, no hace que digas
que estoy en inicio, no es necesario, es redundante, estas barras, tampoco queremos que salga aquí,
no es necesario ahora mismo. Para quitar estas barras, esto de título
y estas barras, hay que hacer lo siguiente. Cuando estéis en la página, ¿ Veis aquí
que pone “Atributos de página” ? pues nada donde pone plantilla, teneis que seleccionar
la que pone página de inicio, le damos a actualizar y veréis que esto va a desaparecer. Perfecto… se ha borrado, ahora solamente
tenemos el slider, y nada más porque aún no hemos puesto nada de contenido, perfecto. Vale vamos a empezar. Muy bien. Aquí viene lo bueno, esto es lo que más
me gusta. Le damos aquí donde pone editar con Elementor…
muy bien, y esta es la herramienta maravillosa que nos va a poder permitir crear esta página
impresionante. Bien, vamos a empezar. Elementor tiene aquí
una serie de elementos, que vamos a pinchar y vamos a arrastrar a la página web y a colocar
donde queramos. Sin tener que programar ningún tipo de código. Aquí podemos poner imágenes, video, botones,
separadores, mapas, iconos, encabezados, etc. Esto es muy sencillo. Bien. Para replicar lo que es la página de
muestra, esta página que os quiero enseñar a hacer, voy a cargarla por aquí, para que
la podáis ver, bien. Vamos a ver… ¿qué queremos poner? Pues
lo primero que queremos poner ( esta de aquí no la necesitamos ahora mismo, voy a cerrarla
). Bien. Lo primero que queremos poner es esto de aquí,
vamos a ir de arriba a abajo. Vamos a crear esta sección, si os fijáis
son 2 columnas, una con un fondo negro y otra con fondo azul clarito. Bien. Pues empezamos. A ver… esto de aquí…
lo primero que hay que hacer es, le damos donde pone agregar nueva sección, que es
como si fuera una especie de fila, y él nos dice: Oye, ¿ la fila cómo la quieres? ¿la
quieres dividida en una única columna, en tres, o en cuatro…? ¿cómo la quieres? Esta en concreto la vamos a… vamos a dividirla
en 2 columnas, más que nada porque si os fijáis es una fila, con, ( si trazáramos
por aquí una línea, esto es como si fuera una fila ), con 2 columnas, una columna con
un fondo negro, y otra con un fondo azul clarito. Bien, aquí está. Como veis: fila, columna,
columna. Perfecto. Vamos a ver. Aquí, lo 1º que tenemos que
hacer es poner el texto: Diseño fresco e innovador. Voy a cogerlo de aquí mismo…
Diseño. Este texto lo puedo poner aquí pinchando
y arrastrando. Bien. Veis que pone: Esto es un encabezado? Pues aquí es donde lo podéis
editar. Como ya tengo copiado el texto pues pongo:
Diseño, bien. ¿Qué más? pues ahora hay que poner esto
que pone: Fresco e innovador. Si os fijáis, está justo debajo. Para ello, tenéis que pinchar aquí, para
que pueda poner otra vez el título. Pinchamos Donde pone encabezado, pinchamos y arrastramos.
Podemos colocarlo encima, o debajo. En este caso lo vamos a poner por debajo. Y aquí, recordar, bueno, voy a copiar aquí
el texto que no sé si me lo cogí… bien, y ponemos el texto: Fresco e innovador. Muy
bien. Vale, fijaros que esto ya no es un título,
esto son como un cuadro de texto, por así decirlo. Pues para ello recordar, venimos
aquí, pin, y donde pone editor de texto, pinchamos y arrastramos. Perfecto, vamos a ver.
Vamos a ver… tikitinnn… vale, pues este texto de aquí, pues ya pongo este mismo. Creo que ya lo trae él por defecto.
Un cuadro de texto, un cuadro de texto, sí… no, no hace falta ya te trae aquí el texto
de ejemplo. Vale. Pues… ¿qué sucede? que esto no se
parece en nada a lo que tengo aquí, vale, por qué? Ahora le vamos a empezar a dar forma. Primero pinchamos en este y le decimos, alineación,
pues a la derecha. Aquí, alineación, también a la derecha. Tu, pues alineado…, o bien le podemos decir
aquí que se alinee, o podemos venir aquí y decirle que se alinee para aquí, es lo
mismo. Bien. Esto, por un lado, qué pasa esto está demasiado
grande, fijaros. Esto está más pequeñito, esto en mediano
y este ya pequeño. Pues aquí le decimos, uy perdón. Seleccionamos y donde pone etiqueta HTML,
veis que pone h2, , h1, h2, h3, h4 ? ¿Qué significan esas h? “H” significa Heading en
inglés, que es como título, o encabezado. Pues H1 es más grande, H2 más pequeño,
más pequeño más pequeño, más pequeño…así de mayor a menor. En este caso, sino recuerdo mal creo que había
puesto aquí H4, y aquí me parece que H3, sino recuerdo mal. H3, bien. Y este creo que estába tal cual, sin…aquí
no hice ningún cambio, perfecto. ¿Qué mas? Pues nada, el color. Esto, ese color no es el que habíamos seleccionado.
Pinchamos aquí, seleccionamos, y venimos donde pone estilo, y le damos a color, color
blanco. Vale, no se nos ve. Ahora lo arreglamos no
os preocupéis. De hecho voy a arreglarlo ahora mismo. Porque si empiezo a poner aquí texto, no
se va a ver nada. ¿Cómo pongo aquí el fondo negro?
Pues simplemente, ¿veis aquí donde pone columna? Editar columna, pinchamos en él,
y aquí venimos donde pone estilo, que pone fondo, normal, donde pone clásico, seleccionamos
donde pone color, y elegimos negro. ¿Habéis visto? Genial. Aquí donde pone fresco e innovador, pinchamos
y hacemos lo mismo. Estilo, uy perdón, a ver… donde pone fresco,
estilo, color, blanco. sí blanco, me había equivocado. Perfecto.
¿Cómo hacemos el de la derecha? Pues lo mismo.
Seleccionamos la columna, le decimos color de fondo, aquí fondo, tipo de fondo, clásico,
color, y era este azul de aquí, ese es el azul que me gusta, que ya viene por defecto. Vale. Como veis no sale nada… ¿por qué? Porque
aun no hay ningun…, solamente hay un color de fondo pero no hay un contenido dentro. Hay que meterle algo para que se vea. Bien. Vamos a meterle pues el texto que corresponda,
este, el que pone elegancia. Elegancia… vale. Y para ello recordar, vamos aquí, encabezado,
lo colocamos ahí, claro sale en color azul, azul y azul pues… malo. No se va a ver.
Nada no os preocupéis. Voy a ponerle ya ahora mismo, el color. Vale, vuelvo aquí, este texto vamos a ponerlo
el correcto, hemos dicho elegancia. Vale. Elegancia. Seleccionamos, aquí ponemos elegancia, y
aquí, en moderna y atractiva, bien, para colocar lo de moderna y atractiva recordad,
damos aquí, encabezado, lo ponemos debajo, pegamos el texto, uy… vale. Hay que definir el color, selecciono aquí,
estilo… color de texto, ponemos blanco, vale. Y ahora para poner el texto que va hay aquí,
recordar, vamos aquí, editor de texto, arrastramos debajo de donde pone moderna y atractiva,
y… nada, ahora ponemos el tamaño. Este decimos que era H4, este decimos que
era H3… y esto ya va cogiendo forma como ya veis. Perfecto. Pero si os fijáis no es el mismo
tipo de letra. Vale. Aquí hay varias formas de hacer esto. O bien pinchamos aquí y por cada elemento
que vamos poniendo o vamos definiendo el tipo de letra… aquí donde pone, tenéis que
venir a estilo, activar esto que pone tipografía, aquí podéis poner el tamaño, podéis definir
un montón de cosas desde aquí, la familia, etc. Como veis se puede cambiar el tipo de letra,
verdana, la que corresponda, la que más os guste. Bien.
O bien puedes hacerlo así, o una a una, que no os lo recomiendo porque tardaríais muchísimo
tiempo. Esto lo voy a desactivar para volver a como
estábamos antes, o bien podemos venir aquí a las opciones globales.
Aquí arriba a la izquierda, están las opciones globales de elementor. Los colores por defecto, bien, estos son los
que trae por defecto, vale muy bien, genial…y fuentes predeterminadas. Las fuentes es el tipo de letra. Aquí donde pone encabezado primario pues
la que estamos utilizando decimos que es Open Sans, bien. Donde pone encabezado secundario, recordad,
Open sans. Esa es la que utilizo yo, recordad que vosotros
podéis utilizar la que queráis. Bien. Open Sans, esto al centro, Open Sans.
Bien. Una vez hecho esto, cuando editéis alguna configuración global teneis que darle
aquí, donde pone aplicar, y luego le dais a guardar, porque ya me ha pasado a mí haberle
dado directamente a guardar sin aplicar y que luego no se cambie. No se guarden los
cambios, vale. Eso en lo correspondiente a las fuentes predeterminadas. Vamos a ver en selector de color, estos son
los colores, vale, esto en selector de color de momento yo no le voy a cambiar nada. Aquí donde pone colores por defecto, se está
refiriendo a los colores, donde pone primario, aquí, pues se refiere a los títulos, aquí
se refiere a los títulos secundarios, aquí al texto normal, y aquí a los textos de acento,
le llama. Esto, yo voy a elegir una paleta de estas.
Veis aquí hay montón de paletas que él ya trae por defecto, que podéis poner la
que más os guste, esta es la que voy a utilizar yo. En el cual los títulos van a estar en negro.
Y… los acentos en rojo. Le doy a aplicar, y le doy a guardar. Vale, bien. Pero fijaros que aquí tenemos un pequeño
problema, ¿qué problema? pues que esto de aquí, hay que subirlo para aquí, y… ¿cómo
lo subimos? Fijaros esta es web de muestra. Esto está
arremetido en lo que sería el Slider. ¿Cómo hago esto? Nada, es sencillo no os
preocupéis. Fijaros, lo único que hay que hacer es venir
aquí, seleccionamos la fila, veis que la fila es todo este recuadro azul? lo veis?
Bien. Seleccionamos la fila, y aquí donde pone avanzado hay 2 cosas que quiero que entendáis
que son muy importantes: donde pone margen, y donde pone relleno. El margen es la posición dentro de la página
web en la que se encuentra este elemento. Podéis decirle que esté más arriba o que
esté más abajo, más a la izquierda… o más a la derecha. Bien como lo que queremos hacer es desplazarlo
hacia arriba, fijaros lo que va a suceder. Esto de aquí es para si quiero que cuando
haga un cambio se cambie tanto a la derecha, a la izquierda, arriba y abajo, o no. Pues desactivo esto para que solamente sea
donde yo le diga. Fijaros.
Si yo donde pone aquí arriba le pongo por ejemplo 50, el se ha movido hacia abajo. Pero
yo lo que quiero es que valla para arriba, ¿cómo hago eso? Pues pongo un menos, “-50”,
vamos a ver si me deja, a veces tienes que poner primero el número y luego el -.
-50, fijaros que ha subido, es lo que queríamos. Vamos a guardar. Muy bien. Y ya lo veis, estamos avanzando bastante. Como veis es muy gráfico y muy fácil todo. Bien, esto que he hecho aquí es para que
podáis ver cómo está quedando vuestra página. Bien, sin tener que andar recargándola. Perfecto. Vamos a ver… ¿qué mas?
Vale. Hay que crear estas opciones. La de por qué elegirnos… bien, esto si
os paráis a fijaros un poquito, como veréis esto de aquí básicamente es una fila, que
debajo tiene un divisor y luego tiene 3 columnas. ¿Cómo creamos esto? Pues fácil, mira, fijaros. Vamos aquí, bajamos un poquito… veis donde
pone agregar nueva sección? Yo entiendo por sección lo mismo que fila. Le doy a agregar nueva sección o nueva fila,
una única, vale, perfecto. Y ahí voy a colocar lo de por qué elegirnos. Bien. Fijaros. Cojo este encabezado, lo arrastro para aquí,
y ya me lo coloca justo debajo. Bien, le damos a centrar. Tengo que seleccionar, centrar. Vale.
Y el texto es…, pues: Por qué elegirnos, lo cojo de aquí mismo… vale muy bien, por
qué elegirnos. Ponemos la rayita esta, esta rayita es un
separador, ¿veis que es aquí? pues pinchamos y arrastramos, justo debajo.
Genial, ¿veis? Lo que pasa es que está muy largo y muy fino, nada pues esto lo arreglamos
pues poniéndolo un poquito más gordo aquí donde pone peso, y donde pone ancho, reducimos
el ancho, y lo ponemos para el medio. Vale, a ver, vamos a replicarlo, es un poquito
más estrecho… Vale, ahí está. Vale muy bien, y ahora ¿qué más? pues hay
que añadir estos iconos de aquí. Icono, eso es icono, título texto.
Icono título y texto, vale. Pues esto se hace muy sencillo, venimos aquí
otra vez. Para añadir un nuevo elemento, y hay que
elegir este de aquí, el que pone caja de icono. Ummm, si lo ponemos directamente vamos a tener
un problema, porque se va a colocar justo debajo de esto ya que esto está como una
única columna. Como aquí son 3 columnas, 1, 2 y 3 en vertical,
veis, 1, 2, 3… vale. Pues hay que hacerlo de esta manera. Dentro de esta sección vamos a meter pues
unas columnas. ¿Cómo lo hago? Pincho aquí, debajo de la rayita, pongo columnas, y como
veis él por defecto pone 2. Pero es que es fácil, porque podéis venir
aquí, y donde pone duplicar, añadís una nueva, y tenéis 3. Genial. Vale. Ahora sí puedo venir aquí y poner la caja
de icono. Como veis la ponemos por aquí, vale, y…
por aquí voy a poner otra, genial. Y vamos a ir sustituyendo. Pues este es el icono de Youtube. Pues nada, venimos aquí, seleccionamos, y
donde pone selecciona un icono, pues nada, ponemos Youtube, escribimos youtube. “Youtube”, bien. Tutorial gratuito, pues nada, perdón, vamos
a seleccionarlo para no tener que escribir… a ver. Pues esto, pues lo pongo por aquí, tutorial
gratuito, y el texto de abajo, esto lo podéis cambiar por el que queráis, yo no voy a hacer
nada para ahorrar tiempo. Pero bueno, genial. ¿Cómo cambiamos el color de esto únicamente?
pues nada, es fácil, venimos aquí, vamos donde pone estilo, y donde pone contenido,
aquí abajo. Bien. donde pone título, vamos a color, y
seleccionamos el color. Por cierto, fijaros que estamos usando siempre
los mismos colores. Blanco, negro, azul,. Blanco, negro, azul.
No os recomiendo por favor, por favor, hacer lo que queráis pero no os recomiendo que
llenéis vuestra página web de 500 colores, como mucho 3, como mucho… como mucho. Eso hace que vuestra página web tenga una
mayor consistencia y sea más bonita, más clara y más sencilla. Es mejor. Menos es más, recordad. Bien. No llenéis, por Dios, no llenéis la página
web de 500 colores. Al final se hace una página web horrible. Bien. Esa es mi opinión. Continuamos. Aquí pues para colocar este
código pues este, seleccionamos, aquí donde pone seleccionar un icono, ponemos el que
pone code. Code… bien. Vale,
Recordar el texto se cambia, viniendo aquí a estilo, contenido, donde pone color, en
el área de título, donde pone color, seleccionamos el azul, guardamos… vale, muy bien. ¿Qué más nos queda? y esto de con tienda
online. Yo podría hacer lo siguiente, podría venir
aquí, y pinchar y arrastrar, eso lo podría hacer, pero para ahorrar tiempo, es fácil,
cómo ésto ya lo tenemos más o menos hecho, yo puedo o bien duplicar toda la columna,
que me va a venir aquí, y borrar esta, bien… o bien, voy a borrarla para que volváis a
ver, o bien lo que podría hacer es duplicar este elemento, que me lo va colocar debajo,
pinchar, y arrastrarlo para aquí Es lo mismo. Podéis hacerlo de esa manera. Esa es una belleza que tiene este constructor
visual: Elementor. La verdad a mí me encanta. Es una maravilla. Bien, continuamos. Aquí donde pone pues con tienda online, voy
a coger el texto, vale, pincho aquí, bien, pinpin, con tienda online, se me ha olvidado
cambiar esto de aquí, sin programar, ahora mismo lo solucionamos, tintitin… fijaros
qué rápido es editar una página web. No os imagináis el tiempo que se tardaba
antes en crear una página web como esta, podías estar horas, o días para hacer esto
que acabamos de hacer nosotros ahora en minutos. Bien. Continuamos, aquí, va pues el icono del carrito. Vale, el carrito es, me parece que era shop,
o algo así, algo similar, shopping car. Si… shopping car, genial. Le damos, muy bien. Ya vamos avanzando…,
bien. Y ahora lo que tenemos que hacer es poner
este pequeño botón de aquí que es como el de continuar, y además fijaros que se
mueve, es una pasada. Vale, ¿cómo ponemos ese botón? pues hay que hacerlo de la siguiente
manera. Venimos aquí, o bien cogemos un icono y lo
arrastramos y lo ponemos aquí debajo… es una opción… voy a quitarlo. O bien añadimos una nueva sección, de una
columna, y ponemos aquí el icono. Bien, el icono, ese icono en concreto, pues
es el que apunta hacia abajo. A ver, aquí está. Hacia abajo, genial. Muy bien, guardo… vale, muy bien. Esto por un lado ya está. vale, genial. Continuamos. Ahora mismo solamente estamos dando lo que
es la estructura, luego vamos a poner estas animaciones tan chulas, y todo esto, no os
preocupéis. Bien. Continuamos. Para crear esta parte de aquí, simplemente
hay que crear una nueva sección, fijaros, nueva sección, de una columna, vale, y esta
sección, como veis tiene una imagen de fondo que además va de un lado a otro. ¿Cómo hacemos esto? Pues nada, fijaros.
Nos colocamos aquí, venimos aquí donde pone las propiedades de la sección, editar sección,
bien, y donde pone estilo, que pone fondo, ¿veis que pone clásico? Pues le damos aquí
a clásico, y donde pone imagen, pues seleccionamos la imagen. ¿Qué imagen? Pues nada, ahora buscamos no
os preocupéis. Venimos aquí, yo ya las tengo listas, imágenes web, Inicio… esta de aquí,
vale bien. Selecciono, recordad poner el texto ALT, yo
no lo estoy poniendo por temas de tiempo. Bien. Y aquí, pues como veis no se ve nada, se
ve una raya azul de nada, ahora lo modificamos, esto sino recuerdo mal tenía… aquí en
posición hay que decirle, centro centro para que muestre el centro de la imagen hacia arriba
y en laterales, bien. Donde pone adjunto, elegimos fijo, ¿qué
significa esto de fijo o por defecto? Pues fijo significa que aunque yo deslice la página,
la imagen queda fija, y queda este efecto que se llama Parallax, es un efecto muy chulo,
que está muy demandado últimamente. Efecto parallax, recordad, bien. Aquí donde pone repetir, nada, esto lo dejamos
tal cual, no ponemos nada. Y donde pone tamaño, pues ponemos abarcar. Vale, para que ocupe, para que se vea la imagen
entera y no se recorte. Le damos a guardar, y como veis aquí hay
un problema, esto es demasiado estrecho… ¿cómo pongo yo aquí esto más ancho, dios
mio ? Nada, no os preocupéis, venimos aquí, editar
sección. Aquí donde pone disposición en la parte superior izquierda, pinchamos y veis
que pone alto, pues donde pone alto elegimos altura mínima, y aquí ya podemos definir
qué altura queremos que tenga esto. Fijaros. Es una maravilla esto. Bien, altura yo le voy a poner… creo que
600 le había puesto, sino recuerdo mal. No os preocupéis. Vale, aquí solamente estamos poniendo el
fondo, pero cómo ponemos, cómo diantres ponemos este efecto tan chulo, lo veis, que
se ven aquí como esas lineas inclinadas que son semitransparente… nada eso es una propiedad
muy chula que tiene el Elementor, venís aquí, seleccionáis la sección, y donde pone estilo,
hay un apartado que pone forma del divisor. Seleccionáis, ¿veis que pone arriba y abajo?
Pues el de arriba define las propiedades del de aquí arriba, y el de abajo pues el de
abajo, ya lo dice el nombre. Bien. Donde pone tipo, aquí, sino recuerdo
mal, creo que era opacidad de inclinación, ahí lo tenéis. Opacidad de inclinación. Y ahora seleccionamos
esta pestañita que pone abajo… pin… tipo, opacidad de inclinación. Y ahí la tenemos, veis que chulo?
Genial, guardamos. Muy bien. Qué más? vamos a ir mirando… titititititi…
aquí metemos el texto, el límite está en tu imaginación. ¿Qué pensáis que es esto? Nada, esto es
un título, un H1, o un H2, o el que H sea. Bien, vamos a buscarlo. Vamos aquí, encabezado, desplegamos, seleccionamos…
y definimos el color aquí donde pone estilo… pin, donde pone color de texto, pin… blanco. Vale, está muy pequeño, nada, no os preocupéis. Venimos aquí a contenido, ponemos al centro,
donde pone etiqueta, pues ponemos H1, genial. Ahora está mejor. El límite está en tu imaginación. Voy a copiar este texto, y lo ponemos aquí…
genial. El límite está en tu imaginación… Muy
bien, guardar. Y… esta raya divisora, podemos salir por
aquí, separador, ahí está. Vale, en grosor, vamos a darle 2, ancho pues
el que corresponda, aquí al centro, esto está pues un poquito más estrecho, ahí…
y ahora, pues donde pone color, blanco. Genial. Guardamos… vale. Aquí ponemos un cuadro de texto, venimos
aquí, elemento, editor de texto, justo debajo, ponemos el texto, le decimos, aquí donde
pone estilo le decimos que sea centrado, y además que sea de color blanco, claro.
Genial. Guardamos.
Y aquí hay un botón, muy chulo además, con un efecto. Ahora lo ponemos no os preocupéis.
Venimos aquí, elementos, botón, lo ponemos debajo, esto se va para la izquierda, no os
preocupéis, para el centro… vale. ¿Y ahora cómo diantres le damos este color
así, transparente y tal? es un poco raro, ah… no os preocupéis. Arora os lo digo. Vale. Lo seleccionamos, donde pone estilo…
bien. Aquí viene lo delicado entre comillas, vamos
a ir poco a poco. Color de texto, blanco, vale.
Color de fondo… pues en lugar de poner ningún color de fondo, como queremos que sea transparente
el fondo, pues aquí se define el color y aquí la transparencia, pues ponemos transparente
a tope… pin… lo veis? Genial. Y aquí donde pone tipo de borde, seleccionamos
sólido, ¿veis que chulo? y en ancho, pues ponemos 1 o 2, el que más os guste, yo no
sé. Yo ya no recuerdo ni cual puse, si era el
1 o el 2… ahh…, no lo sé… da igual. Vamos a ver… como os decía, ahora en un
ratito os digo cómo se ponen las animaciones, de momento vamos a hacerlo así. Bien. Vamos a ver… esto está bien, ah,
fijaros que aquí hay como unas flechas que apuntan hacia abajo.
Vamos a ponerlas. Seleccionamos el botón, a ver… esto era
aquí en contenido, ¿veis que pone icono? venimos aquí y buscamos el icono de flecha
abajo, a ver dónde está esto… Titirititiii… aquí está. Vale, está muy cerca de donde pone haz click,
vamos a darle un poquito más de separación, y a cambiar este texto de color, vamos a poner
continuar mejor. Que esto de haz click no dice mucho. Continuar.
Continuar. Genial. Guardamos… muy bien, por aquí.
Vale. Aquí donde pone galería, vamos a crear esto.
¿Cómo creamos esto? Pues nada, creo que ya os lo debéis imaginar, esto es simplemente,
es una nueva sección, uy esto de aquí, está como… tiene muy poca altura, vamos, no está
tal alto como este si os fijáis, ¿o sí? no sé. Da igual, vamos a darle un poquito más de
altura. Tiene 600, vamos a poner 700. Ahí está, ahí está mejor, yo creo que
está mejor. Guardamos.
Vale vamos a crear la siguiente sección, que es la sección de galería.
Le damos a añadir, agregar nueva sección, esta sección, eh… sí, tiene una única
columna, perfecto. Pues le ponemos sección de una única columna,
que tendrá un título, pues se llama galería, a cogerla de aquí, vamos a ver… y aquí
ponemos, aquí en Elementor se puede editar, tanto aquí en la barra de la izquierda, como
directamente en el propio, en la propia ventana, a mí me gusta más hacerlo aquí. Para no, porque esto a veces no va bien el
ratón y tal, Yo voy a hacerlo aquí, pero que sepáis que se puede cambiar directamente,
podéis, veis, aquí podéis poner Galería. Galería, voy a pegar el texto… ahí está.
Uf… aquí fijaros, tengo aquí un montón de código, que por eso no me gusta a mí
ponerlo directamente. Yo pongo galería y ya está. Bien.
Le damos a que centre… ahí está… y que…, ehh, poner la raya esta.
Vale, Para poner la raya venimos aquí a los elementos,
separador… justo debajo… le damos grosor 2, le damos menos anchura, lo centramos…
así está bien, más o menos. Y ahora metemos la galería. ¿Cómo ponemos
aquí una galería? pues nada, fácil, venimos aquí, y buscamos… aquí…, Galería de
imagenes. Genial. Uy…, Aquí debajo. Guardamos por si acaso… recordar ir guardando
de vez en cuando, porque si se os apaga la computadora, o el ordenador, así, ya tenéis
vuestros cambios guardados. Bien, vamos a darle aquí a subir archivos,
seleccionar archivos, y ya tengo preparada una carpetita que se llama galería, con las
imágenes, open, vale, recordad a cada imagen, por favor, por favor, por favor, ponerle el
texto ALT, para que Google no os penalice y haga que vuestra página esté mejor posicionada
en Google. Bien, cuando ya estén seleccionadas las imágenes,
le damos a crear galería. Y estas imágenes las puedes ordenar, podeis
poner una delante de la otra…ponerle un texto, etc. El texto de la imagen, etc.
Yo las voy a dejar así. Aceptar… y… fijaros cómo la pone, jeje,
vale, no os preocupéis Vamos a ponerlo aquí en mediano, o medium,
o vamos a ponerlo en… completo… no completo no.
Eso es el tamaño de las imágenes, a ver… vamos a ponerle… yo creo que le había puesto,
sino recuerdo mal, eso es ir probando, creo que le había puesto 300 x 300 y además,
ehmm, 3 imágenes, o lo había puesto en grande, en la Large, creo que era en Large. No recuerdo la verdad, eso es ir probando,
la verdad como más os guste. uhmmm, le damos a aceptar, pero fijaros aquí,
aquí hay una cosa que quiero que notéis. Fijaros que aquí, la galería, no llega al
extremo, y en la página de muestra sí llega al extremo. Cómo hacemos esto? Pues eso es fácil, fijaros,
tenéis que venir aquí a donde pone editar sección, veis que en la parte de arriba pone
extender la sección, aquí pues lo activamos. Vale, y esto lo que ha hecho es que la sección
valla de un extremo a otro de la web. Pero aún no ha hecho nada, fijaros, es que
hay que decirle que tanto la sección como el contenido, sean de ancho completo. ¿Veis el cambio? Genial.
Le damos a guardar. Muy bien, continuamos entonces, esto de aquí,
como os decía, aquí podemos o bien crear una nueva sección y poner el icono, o ponerlo
directamente debajo de la galería. Esta web que estoy haciendo yo, se puede hacer
de muchas maneras, yo estoy enseñando pues ahora en directo por así decirlo, cómo lo
estoy haciendo yo, pero hay muchas formas de hacerla. No es solamente como digo yo. Bien. Vamos a ver… pinchamos por aquí, perfecto…
y vamos a seguir para aquí. Muy bien. Voy a guardar.
Aquí, básicamente es una sección de una columna, con un vídeo de fondo. Y unos textos. Bien, Ahora os lo enseño. Creamos una nueva sección, de una columna,
vale, y en esa sección de una columna, tiene un vídeo de fondo. Bien. Vamos aquí, sección, aquí donde pone
estilo, ¿veis que pone tipo de fondo? Pues nada, le damos donde pone vídeo. Y aquí, donde pone enlace de vídeo os voy
a pasar yo a vosotros, el enlace que tengo en la web de muestra. Vamos a ver, me parece…, lo estoy buscando
aquí en mis notas, y ahora os lo paso. Es lo mismo de antes, buscáis en Youtube,
el video que os guste, y lo ponéis ahí, no tiene más misterio. Genial. Vamos a ver. Guardamos por aquí, y ahora… titirititiii…
vale. Hay que ponerle el texto. Era, un encabezado
por aquí…, Uy, esto está muy estrecho, vamos a ponerlo más alto. Sino, aquí no hay quien trabaje… Esto sino
recuerdo mal estaba estirado, bien, y aquí donde pone altura, recordar, altura mínima,
creo que le había dado 800, sino recuerdo mal. Lo estoy diciendo de memoria, ummm, 800 … vale,
genial. Guardamos, vale, ahora lo que vamos a hacer
es poner la parte de arriba, este divisor tan chulo que yo os enseñé antes, ¿Cómo se hace eso? Yo creo que ya deberíais
saberlo, sino lo sabéis, recordad: Estilo, forma del divisor, la parte de arriba, en
este caso vamos a usar el que se llama cepillo de olas, genial, y en la parte de abajo vamos
a usar, pues igual, cepillo de olas. Vale, aquí el texto habíamos puesto… vamos
a mirar a ver, ¿qué texto había puesto yo aquí? Creo que era ” El límite está
en tu imaginación ” o algo similar. Vamos a ver… no, crea una web inspiradora, vale.
Pues ponemos aquí también. Crea una web inspiradora, lo ponemos en blanco,
es blanco, divisor, ponemos el divisor, con un mayor grosor, una anchura menor, un poquito
menos, para el centro, color blanco, este texto también va blanco, vale. Y aquí el texto, cuadro de texto, vale…
Este cuadro de texto va centrado. Hay unos coches ahí haciendo rallie, jeje,
haciendo carreras, y no invitan… Vale. Y debajo, si os fijáis, hay 2 botones. ¿Cómo
ponemos esos 2 botones? pues fácil, fijaros. Sería crear 2 columnas, justo debajo, y en
la columna de la izquierda, ponemos un botón, y en la columna de la derecha, otro botón,
pero este botón, no voy yo a diseñarlo otra vez, sino que lo voy a traer de aquí, este
botón de aquí, ya está creado, lo duplico, fijaros: Pincho en él y arrastro, y me lo
traigo para aquí. Veis. Y ahora le digo… oye tú, alinéate a la
derecha. Lo duplico, pirimpinpim… lo traigo para
aquí, y le digo: Muchacho, usted, para la izquierda.
Esto lo pongo blanco este texto que se me olvidó antes, genial, guardamos. Este pone continuar, y este pone contactar…
continuar… contactar. Pues cambio el texto, simplemente. Contactar… y fijaros que cambia de color,
pues color del texto, pues le ponemos azul, y color del fondo: azul. Genial. Este video que está puesto de fondo es un
video en 4K. Y como estoy grabando es posible que el audio
o el video se vea un poquito entrecortado. Para no, para que no se vea mal, voy a a mirar
a ver qué podemos hacer. Esto vamos a pasar un poquito más abajo ya,
vale. ¿Aquí como ponemos esto de clientes 100×100?
Vamos a bajar un poquito esto. Si se ve entrecortado o se escucha entrecortado,
os pido disculpas. Puede ser que sea porque se está reproduciendo
este vídeo en 4K, y en esta web tb el vídeo en 4K y además grabando todo esto. Es normal, en las siguientes páginas que
creemos, como no habrá tantos vídeos, se verá mejor. Continuamos entonces. Bien. ¿Esto cómo lo he creado? Pues nada, fijaros.
Eso es una sección que dentro tiene 3 columnas. Bien. Sección, con 3 columnas. Vale, empezamos. ¿Aquí qué pone? … Clientes. Pues ponemos clientes. Un encabezado para aquí, que ponga clientes,
voy a cogerlo de aquí, Clientes, aquí pone 100×100, pero esto es un texto animado, no
sé si os dio tiempo antes a verlo, pero es un texto animado
Aquí donde pone contador, lo traigo para aquí… pin….¿Veis que se mueve? Perfecto. Pues… esto de título y número, nada, eso
no nos interesa, lo quitamos y ya está. Y aquí donde pone más, pues ponemos el símbolo
de porcentaje, clientes 100% satisfechos. Bien. Pegamos por aquí, esto le decimos que venga,
que está alineado a la izquierda, este le decimos alineado a la derecha… aquí ponemos
satisfechos. Vale, y aquí le ponemos una línea divisoria,
un separador, fijaros… pin… un poquito más gordo, no sé si está demasiado gorda.
Vamos a reducirlo y a centrarlo. Fijaros que la parte de clientes, está como
en la parte de arriba, esto está un poquito más abajo, y esto está arriba.
Para que esto esté todo más o menos a la misma altura, ¿cómo lo hacemos? Pues venimos
aquí donde pone editar sección, y veis aquí donde pone alto, no aquí no es, pues
donde pone posición del contenido? Pues medio. Vale, esta fila, o sea esta… disculpad,
esta linea la voy a borrar. Así esto queda alineado al centro. Fijaros, esto de aquí, lo puedo acercar,
voy a ponerlo a un 40%, y este de aquí, lo puedo acercar también. Voy a ponerlo, pues a un 40% también, así
está más cerca. Bien. Voy a cerrar esto mientras tanto porque creo
que puede que se esté entrecortando, ahora lo cargo. A ver… le voy a poner la línea… el separador…
no, esto va a quedar mejor en una fila independiente. Vamos a nueva sección, lo colocamos el separador
justo debajo, lo ponemos al centro, lo reducimos… así, yo creo que está mejor así. Como os decía, hay muchas formas, muchísimas
formas de hacer lo mismo. No solamente hay esta, muchas. Bien.
Esto está demasiado cerca de arriba. Cómo hago para separarlo un poquito de aquí,
de este video? Pues vengo a la sección, donde pone avanzado
¿ Veis que pone margen o relleno ? El margen como os decía es para separarlo de arriba,
o el relleno también vale para separar. Solamente que crea un espacio entre el elemento
de arriba y lo de abajo. Fijaros.
Voy a desbloquear aquí, para que solamente sea la separación de arriba. Veis, lo que es la parte superior de la sección,
queda ahí fija, por así decirlo, este hueco y lo único que está haciendo es añadir
espacio entre esta línea y el contenido. Eso es el relleno.
Contenido de relleno, ya lo dice el nombre. Bien. Pues con 50 creo que está genial. Guardo, vale.
¿ Qué maś ? Pues… a ver… voy a volver a cargar, es
que cuando cargo empieza a ir más lento. Vamos a la parte de abajo, no quiero que se
reproduzca el video, porque luego empieza a ir más lento. Aquí está, aquí tenemos estas imágenes,
esto se llama un carrusel de imágenes. ¿ Cómo lo añadimos ? Pues nada, recordad,
nueva sección, de una columna en este caso, venimos aquí y buscamos el elemento que se
llama carrusel de imágenes. Lo ponemos, genial. Y aquí, tenemos que cargar las imágenes. Las cargamos. Vamos a añadir imagen, subir
archivo, seleccionar archivos, como yo ya las tengo listas, no tenéis que esperar.
Selecciono todas, con el mayúscula, open. Están cargando… esperamos a que acabe…
y ya están cargadas. Le damos a crear una nueva galería.
Esto recordad que podéis alterar el orden como queráis, Vale, insertar galería, y
aquí la tenemos. Vale. Los parámetros que tenemos que poner
aquí, yo en concreto, pues voy a poner medium. En diapositivas a mostrar, voy a poner 5,
vale. Aquí en estirar imagen pues vamos a ver…
vamos a dejarlo que no porque sino se distorsiona, a ver… diapositivas a desplazar, pues voy
a poner 1. Esto que pone navegación, se refiere a si
quiero que aparezcan estos puntos y unas flechas que salen por aquí, ahora no se ven por qué
es blanca, pero yo voy a dejar solamente flechas, en este caso. Bien. Le damos a guardar… Bien.
Y quiero que esto, en lugar de que se quede aquí, quiero que valla de un extremo a otro.
¿ Cómo lo hago ? Pues ya deberíais saberlo. Vengo a la sección, donde pone extender la
sección, le damos a extender… y donde pone ancho del contenido, le damos a ancho completo. ¿Veis que se ha estirado hasta los extremos? Vale, aún no vemos la flecha, por qué? Porque
son blancas. Vamos a darle un poquito de color, vamos a
estilo, bien, donde pone… ¿dónde era? ¿dónde estaba esto? ¿el color de la flecha?
¿Lo tengo seleccionado? Ah, es que no lo tengo seleccionado, tengo que tener seleccionado
el carrusel. Claro. Ahora una vez seleccionado, voy a estilo,
color de las flechas, azul, ya la veis, pero son un poquito pequeñas. Vamos a darle un
poquito más de tamaño. Por aquí…, más grandes… guardar.
Perfecto. Vale, por un lado, esto ya está. Ya está cogiendo forma eh, ya casi tenemos
acabada la primera página, la página de inicio.
Vale. Vamos a continuar, ahora tenemos que crear
esta sección de aquí, que es la sección de testimonios. Son clientes que han entrado a tu página
o han probado tus servicios y han quedado encantados. ¿Cómo creamos esto? Pues venimos aquí,
añadimos una nueva sección, y esta sección tendrá 3 columnas. Como veis aquí, salen 1, 2 y 3.
Vale, genial. Vale, pues para crearlo, venimos aquí, ¿veis
donde pone recomendación? pues pinchamos y arrastramos, ponemos una aquí, vale, y
como aquí también quiero que vaya de un extremo a otro, el contenido, pues voy a venir
a la sección y le voy a decir: Oye, quiero que estés estirada.
Y que estés de ancho completo. ¿ Veis, que se ha estirado? Genial. Vale, voy a poner el mismo texto que tenemos
en la página de muestra, ahora yo puedo elegir esto, pin… fijaros que está centrado, esto
de aquí, pongo el texto, pin… está centrado igual, donde pone imagen subo el archivo,
vengo por aquí, busco la imagen del testimonio, ya los tengo ordenados, esa la 1, recordad
poner el texto ALT. Al final me vais a odiar cada vez que escuchéis
esto. Vale, esto está muy pequeño, vamos a ponerlo
un poquito más grande. Bueno, vamos a… primeramente vamos a poner todo lo que tiene
ir… Esto de Ana Diaz, seleccionamos… Tirititiii…
y cambiamos el nombre. Vale. Esta supuestamente es su página web, vale.
Posición de la imagen, pues simplemente hace referencia a esto. Aquí lo podéis poner como prefiráis, yo
para que no sea muy alargada la web la dejo así. Vale, donde pone estilo, aquí, y donde pone
imagen, pues nada, vamos a darle un poquito más de tamaño a esta imagen, yo creo que
la había puesto 100, sino recuerdo mal. Vamos a dejarlo en 100. Genial. Ana Diaz, 100… genial. Vale, me parece que estaba así, ahora vamos
a pasar aquí al siguiente. Para no tener que hacer esto una y otra vez,
pues recordad, o bien podéis duplicar la columna, o bien podéis duplicar el elemento
y traerlo para aquí. Voy a hacerlo primero con la columna, para
que veáis, que no os estoy engañando, y borro esta que sobra, veis, y ahora voy a
traer, ahora voy a duplicar este aquí, y lo voy a traer para aquí. es lo mismo, funciona
el que más os guste. Una vez que tengáis creado algo, lo duplicáis
y ya está, vale. Vamos a poner aquí el contenido, uy, el contenido
este… de aquí… y pegamos. Contenido este de aquí…, y pegamos. Vale, ahora sustituimos las imágenes. Esta de aquí, al final sólo seleccioné
1, pues ahora subo las 2 que quedan. Vale, aquí, pues era el chico. Y aquí, era la otra chica. Vale. Genial. Vale. ¿Qué sucede? Que aquí, habéis visto este
efecto tan chulo, que es un efecto de degradado, que empieza como un azul clarito, y va hacia
el blanco, pues esto se consigue de esta manera. Tenéis que ir a la sección, y donde pone
estilo, vais aquí, donde pone tipo de fondo, pues hay uno que pone degradado. Vale, a ver… aquí tenéis que empezar…
el color… este me parece que era el de arriba, sí, el color de arriba lo ponemos blanco,
y el color de abajo, ponemos el azul clarito. Vale, fijaros que aquí, donde pone ángulo,
esto lo podéis cambiar, como queráis. Yo lo voy a dejar como viene por defecto. Esto creo que estaba en 180, sino recuerdo
mal, 180… así, genial. Vale. Y esto pues por aqui… vale muy bien. Fijaros que aquí hay más separación, esto
está más separado. ¿Cómo le doy más separación? Venimos aquí
a la sección, avanzado, donde pone relleno, en la parte de abajo, pues vamos a ponerle
de relleno 50, ¿veis que ha bajado? uy, aquí nos ha puesto 50 en todos los sitios, eso
es porque estaba activada esta opción. Vamos a ponerlo, a quitarlo, desactivamos
esto, y decimos que solamente abajo queremos 50.
Bien. Guardamos… y aquí lo mismo, si veis que
hay algo que está muy junto con lo de arriba, por ejemplo si queréis dejar algún tipo
de separación respecto a este pase de diapositivas, venís aquí, sección, donde pone relleno
le dais en la parte de arriba, pues le podéis añadir pues 20 por ejemplo, o no sé, 50,
lo que dais con la mente, aquí cada uno se sirve a su gusto, bien, perfecto, esto de
aquí, pues lo mismo, vosotros ya sabéis podéis ponerlo como mejor os venga. Vale. Vamos a empezar con lo de las animaciones
que os decía. Bien, vamos a ver… voy hasta arriba, a ver,
aquí, sino recuerdo mal, os voy a decir de memoria, esto lo voy a cerrar porque está
consumiendo un montón de recursos, y quiero que el video se grabe bien, no quiero que
se vea entrecortado. El tener las 2 webs cargadas con videos en
4K, hace que se ralentice mi computadora u ordenador y no quiero. Os voy a ir diciendo de memoria. Vale, esto de aquí, por ejemplo vamos a darle
pues… uhhmmm… vamos a ver… voy a ponerle un fondo que tenga como una especie de sombra. Que tenga una especie de sombra, esto a ver
si puedo ponérsela si me deja, este creo que no me dejaba sino recuerdo mal, borde…
sombra de caja, fijaros. Claro, le está aplicando el borde a toda
la sección, esto no nos interesa. Nada, este, eso os lo enseño más adelante. Fijaros aquí donde pone ¿ Por qué elegirnos
? Está muy cerca de esto, vamos a ponerlo más arriba, o sea vamos a poner un poquito
más de separación, esto no puede ser… eh, bien, para ello seleccionamos la sección,
vamos a avanzado… donde pone relleno desactivamos esto, y le decimos que solamente arriba queremos
que tenga, pues 100 al menos, no sé, 100… 80, vamos a ponerle 80, que sino, tenéis
que dejar…, yo os recomiendo que dejéis bastante espacio de separación entre los
elementos no amontonéis todo, por favor, eso es algo muy feo. Vale, vamos a guardar, genial,
Vamos a ver… ¿qué más? Voy a cerrar esta página también, para asegurarme
que se está grabando todo correctamente, y no consumir más recursos de los necesarios. Vale, esto que pone ¿Por qué elegirnos?
Pues voy a ponerle un… a mí me gusta darle un efecto aquí como de sombra, no sé si
lo veis aquí, sale como una sombra así un poquito oscura, vamos a poner el color negro…
a mí me gusta ese efecto. Aquí donde pone tutorial gratuito, pues…
no sé si me lo dejará aplicar, eh… donde pone… no, aquí en concreto no me deja,
vale. Eh, lo que voy a hacer es, vamos a ponerle
animación a esto, ¿qué animación era la que tenía por defecto, la que tenía yo?
a ver si consigo comprobarlo… era en tutoriales… Lo que voy a hacer es que voy a poner esta
página en favoritos, y así la puedo cargar en cualquier momento. Y que no se me ralentice. Vale, los efectos que tenía, ves, esto entra
por la izquierda, esto entra por la derecha, y este se mueve. Creo que era este, el efecto, entra por la
izquierda, entra por la derecha, y el del centro se mueve. Vale, pues esto era: Venimos aquí, y seleccionamos
esta columna, columna, y donde pone avanzado, le damos a donde pone animación de entrada. Este entra por la izquierda, este de aquí,
avanzado, animación, este entra por la derecha, y este… hace aquí un movimiento extraño,
avanzado, animación de entrada, no sé cual, ¿cual de estos era?, la verdad ahora no lo
recuerdo, a ver… ¿será el de flash? no. ¿Bounce?… no. ¿Cual será? Este tampoco. Bueno, creo que era este. Vale, lo guardo…
Esto de aquí lo voy a cerrar, bueno no, vamos a dejarlo, ¿qué más efecto? Este de aquí. Fijaros que cuando me coloco encima, empieza
a parpadear. Vale, esto se hace de esta manera: Lo selecciono,
donde pone estilo, ¿veis que pone icono en hover? Hover significa cuando colocas el ratón
encima. Vale, donde pone animación, seleccionamos…,
aquí creo que había elegido ya la de Pulse Grow me parece, genial. ¿Veis? y le voy a decir que cuando nos coloquemos
encima, pues que aparte de moverse, pues que cambie de color, y que se ponga el azul clarito
que nos gusta. Vale, guardar. Lo veis?
Genial, justo lo que estábamos buscando. ¿Veis esto que pone el límite está en tu
imaginación? Pues aquí, si no recuerdo mal, a mí, como me gusta mucho este efecto, yo
le había puesto en sombra de texto, le había puesto en color blanco, así tiene así como
un efecto “Halo”, muy bonito. Vale, y además, sino recuerdo mal, esto le
había dicho que bajara. O sea que nada más que apareciera por pantalla
como que bajara. Sino recuerdo mal, vamos a mirar, lo vuelvo
a cargar… no. Aparece de repente, en plan aparición. Vale. Pues selecciono la columna, donde pone avanzado,
animación, Zoom In. Lo veis? Genial.
Vale, si os fijáis aquí, este icono se mueve, bien. Y este de aquí también. Cuando yo pincho en este icono, él me trae
aquí. ¿Lo veis? Esto es lo que se llama un “Ancla”
en lo que es el mundo de diseño de páginas web. Un ancla significa que cuando pinchas en un
botón o en un elemento, él te lleva a una zona de la página, que puede ser esta misma
página o de otra página. Cuando tú pinchas aquí en blog el te lleva
a un blog. Pero te lleva a la página principal del blog. Cuando pinchas en tienda, te lleva a la página
principal de la tienda. Pero cuando pinchas en un ancla, él te lleva a una zona en concreto
de una página, a un apartado de una página. ¿Cómo se consigue esto? Pues ahora os lo
enseño. Bien, voy a cerrar aquí, fijaros. Selecciono el elemento, y le digo, oye! Cuando
yo pinche encima tuyo, quiero que me lleves aquí. ¿ Cómo le digo esto ? Pues creo un ancla. El ancla se crea poniendo # y un nombre. Voy a poner por ejemplo, imaginación.
#imaginación, perfecto. Guardo. ¿ Qué significa eso ? Pues que me va a llevar
a la zona de la página que se llame imaginación. Vale,
Pero es que no hay ninguna que se llame imaginación, aquí pone, esto es un título que he puesto
yo, pero no se llama así, no es una zona de la página que se llame así. Para decirle que me lleve ahí, voy a decirle
que cuando estemos aquí, donde pone el límite está en tu imaginación, que sea esta la
zona que se llame así. ¿ Cómo lo hago ? Selecciono la columna,
o el elemento que yo quiera, no tiene por qué ser una columna, en este caso yo he elegido
columna, pues porque me interesa, voy donde pone avanzado, y ¿veis aquí que pone id
de css? Pues aquí ponéis el nombre, en este caso recordar, imaginación, sin la almohadilla.
Sin la almohadilla, recordar. Imaginacion…
Y ¿ Qué significa eso de hecho ? Significa que cuando yo pulse en este botón, él me
va a desplazar un poquito más hacia abajo, hasta aquí, hasta donde pone imaginación. Fijaros. Voy a reproducirlo para que veáis. Voy a minimizar esto… fijaros. Vale, no me ha funcionado, eso es porque quizá
no he guardado. Vamos a comprobar, voy a comprobar que esté
bien, imaginacion, vale. Cuando vengo aquí, id de css, imaginacion.
Ahora voy a guardar, voy a cerrar esta para que no ralentice, y voy a darle a ver página. A ver si funciona. ¿ Veis, veis que funciona? pero si os fijáis
me lleva demasiado debajo, no quiero, no llego a ver esto de imaginación, porque queda justo
aquí, detrás de lo que es el menú. Para corregir esto, lo que voy a hacer es
que en lugar de que sea la columna la que se llame imaginación, pues le voy a decir
que sea, veis, encima de la columna, le digo no no, no quiero que sea la columna, le voy
a decir quiero que esta etiqueta de imaginación quiero que venga aquí mejor, quiero que me
muestre lo que es el principio de la sección. Pues para eso selecciono la sección, voy
a avanzado, voy a donde pone id de css, y pego lo de imaginación. Cuando yo haga click aquí, me va a llevar
a esta zona, voy a recargar la página para ver si es verdad, vale. Genial, justo lo que estabamos buscando. Voy a repetirlo aquí donde pone continuar,
para que sino lo habéis entendido al principio, lo podáis entender mejor ahora.
Esto mismo lo voy a repetir ahora. Fiaros. Yo lo que quiero con esto, es que cuando la
gente según va bajando por la web, la estoy invitando a que continúe. Vale, pincho aquí.
Vale, pues ahora, lo que voy a hacer es que cuando la gente llega a este apartado, que
cuando pinchen en continuar, pues nos lleve aquí, a la zona de la galería. vale, ¿cómo hago esto?
Recordad, selecciono el elemento, en este caso es un botón, y aquí donde pone enlace,
pues le pongo un nombre, me lo invento, puede ser el nombre que quiera. Le voy a poner Galería,
por ejemplo. Da igual, no tiene por qué coincidir con
esto. Voy a poner Galería. Cuando yo pinche aquí, me va a llevar al
apartado que pone galería. Vale. Para yo saber exactamente donde empieza la
galería, pues le digo aquí a la sección: Oye, esta sección se va a llamar Galeria.
ID de css, pues le pongo galeria. Sin la almohadilla recordad, sin el símbolo de almohadilla. Genial. Vale, ahora voy a probarlo para que
veáis que funciona. Reinicio, está cargando… voy a bajar…
cuando yo pinche aquí me debería llevar a la galería. ¿ Lo veis ? Genial, justo lo que estaba buscando. Galería, perfecto. Lo que pasa es que como veis, yo le doy y
él pone la galería, la pone justo debajo del menú. Pues eso ajustáis vosotros un
poco. Podéis decirle que venga pues a alguna zona
por aquí, algún elemento que pongáis, etc, da igual. Vale. A ver… ¿ qué más ? uhhmm… eso es como
se definen las animaciones… fijaros que cuando en la página web de muestra, cuando
nos colocamos encima de donde pone continuar, esto como que se rotaba. ¿ Cómo consigo este efecto ? Pues selecciono
el icono de continuar, donde pone estilo, ¿veis que pone aquí, botón, que pone normal
y encima ? Pues donde pone encima, le decimos: Animación, y le decimos, yo voy a elegir
esta que me gusta: Grow Rotate. Fijaros, coloco encima, y se mueve. Coloco
encima… y se mueve. Genial. Guardo. Muy bien, voy a cerrar esta,
vale. Le doy a continuar y, bueno ahora no funciona
porque estamos en el editor. Vale, genial. Vamos a ver… voy a darle aquí para que
veáis la propia página, esto funciona, lo veis, y cuando entramos a la galería, fijaros
que funciona la galería perfectamente, que no os lo había enseñado antes. Vale. Muy bien. ¿Qué más? Aquí, repetiríamos lo mismo,
pinchar aquí, te llevaría, etc, ya sabes cómo se hace todo esto. Vale, os quiero enseñar como cambiar lo que
es el… estos iconos para que también se muevan. ¿ Cómo hacemos que se muevan ? Pues pinchamos
aquí, esto lo voy a cerrar. Pinchamos aquí, estilo, donde pone botón,
le damos aquí, donde pone encima, le decimos, donde pone animación le decimos, Grow Rotate,
veis, y aquí donde pone este botón, lo seleccionamos, le decimos el estilo, uy, donde pone botón,
es que esto estaba desplegado, vale. Donde pone botón le damos a encima, y le
decimos animación, Grow Rotate. ¿Veis que están iguales? Vale, Queremos
que cuando… Pues aquí pone coontactar, con 2 óes, voy a corregirlo… Vale. Esto carece de importancia pero así lo dejo
listo. Contactar. Genial. Vale, lo que vamos a hacer que cuando alguien
pinche aquí, donde pone contactar, te lleve a la página de contacto vuestra. ¿ Cómo se hace eso ? ¿Veis aquí que pone, ee… ? donde pone…
seleccionamos el botón, ¿veis que aquí pone enlace? Pues… quitamos esa almohadilla,
y ponemos , /contacto. Genial, ¿qué significa eso? Pues significa que cuando alguien pinche
aquí, te va a llevar a la parte de la parte que se llama contacto dentro de tu página
web. Si quisiérais que os llevara a donde pone
servicios, pues aquí pondríais, /servicios. Si quisiérais que os llevara a blog, sería
/blog. Si quisiérais que os llevara a Google, o
a una página que no sea vuestra, sería pues: http://google.com o google.es, etc, lo que
sea. Aquí podéis definir si queréis que se abra
en la misma ventana, o que se abra una ventana nueva. Si es un enlace a una página que no es la
vuestra, lo recomendable sería decirle que se abra en una ventana nueva. Bien. Voy a continuar. Esto hasta aquí ya estaría
definido entonces… bien. Pues ahora ya tenemos claro lo más difícil. Lo más difícil era
crear la página de inicio, las animaciones, y todo, está tal cual os he explicado. Si os queda alguna duda, recordad que en los
comentarios podéis plantearme todas las dudas que queráis, yo los respondo todos.
Genial, ahora entonces ya estaría hecha la página de inicio, lo último que nos queda
por establecer, es que, bueno esto no pertenece exactamente a la página de inicio, pero es
lo que son los Widgets de la parte inferior de la página. Widgets son esos elementos
que iban aquí abajo, que yo os decía. Bien. Vamos a cerrar esto para aquí, vamos al inicio,
o sea al escritorio, perdón. Voy a cargar la página de muestra, para que
la veáis, para que tengamos una idea de lo que vamos a hacer, a ver… vamos a ir por
aquí… y venimos a la parte de abajo. Ahora vamos a definir esta área de aquí,
que son nuestros widgets, estos iconos o anuncios que ponemos en nuestra página. Primeramente hay que entrar donde pone síguenos,
o sea perdón, hay que crear aquí un apartado para que ponga síguenos en el facebook, vale,
para ello hay que ir a Apariencia, Widgets, bien. Y estos son los Widgets que aparecen en la
barra lateral, estos son los Widgets que aparecen en el pie de página. Cuando digo Widgets, me refiero a estos iconos,
recordar, esos anuncios que hacen diferentes cosas. Estos son los del pie de página, y los de
la barra lateral serian estos. Esto es la página web de muestras, recordad. Estos son los de la barra lateral, que muestra
pues categorías, archivos, entradas recientes, buscador, etc. Vale. Para definir los del pie de páginas,
para poder poner esto de Facebook, hay que instalar un plugin ya que WordPress no lo
trae por defecto. Recordad que los plugin se instalaban aquí:
Plugin, añadir nuevo. Bien. El plugin que vamos a utiliizar lo voy a buscar
en la página web nuestra. Recordar que hay que entrar aquí en: voxelartstudio,
en tutoriales, donde la entrada que pone crea la web de tu negocio, y en la parte de abajo,
uy… en la parte de abajo donde pone recursos, pues tenemos que buscar aquí en la lista
de plugins, elegimos el que se llama Easy Facebook LikeBox.
Copiamos, vale, y pegamos el nombre el nombre del plugin. Vale, el que tenéis que elegir es este el
que tiene como el dedo hacia arriba con el fondo azul, que está elaborado por Sajid
Javed . Bien, le damos a instalar… Es el que utilizo yo. No tenéis por qué instalar
este, yo os recomiendo que cuando instaléis un plugin que tenga muchísimas instalaciones
activas, y que se haya actualizado hace poco. Eso es importante, no instaléis plugins,
que llevan meses o años sin actualizar, porque es un coladero de virus. Os puede entrar un virus a vuestra página,
vamos a activar… vale. Y ahora, recordad que lo que estamos haciendo
es configurar los Widgets, venimos a apariencia, Widgets, y ahora ya nos va a aparecer aquí,
el Widget de Easy Facebook LikeBox, y lo queremos colocar aquí, donde pone pie de página 1. Lo traemos, pinchamos y arrastramos. Vale,
donde pone Title, ponemos el título. ¿ Qué título ? Pues yo voy a poner este
mismo, síguenos en Facebook. Vale. Aquí tenéis que poner vuestra página de
Facebook. Yo voy a poner la nuestra, la de Voxelart
Studio. Voxelart Studio, vale. Uy, esto lo he cerrado sin querer, y allí
donde pone locate, lo ca te o como queráis decir, ponéis, seleccionáis español. a
ver, la s… spanish… dónde está… aquí está. Spanish de Spain. Vale, guardamos. Y veréis cómo ahora ya
aparece. Esta es la de muestra, aquí os colocáis
encima, visitar sitio, esta es la que estamos creando, vale. Aquí lo tenemos, síguenos en Facebook, genial. Vamos a ir con la siguiente, ¿cual era? Novedades. Vale vamos a poner la de novedades. Esta de novedades, es realmente, se está
haciendo referencia, en la web de muestra, está haciendo referencia a cuando tenemos
una publicación en el blog, las últimas publicaciones del blog. Yo le he llamado novedades, pues le podéis
poner el nombre que queráis. Publicaciones, o blog, o lo que queráis. Eh… esto realmente, es el apartado que pone
entradas recientes. Es el Widget de entradas recientes. Y aquí ponéis, podéis ponerle o bien novedades,
o entradas recientes también, como queráis… o últimas publicaciones.
Últimas publicaciones. … Publicaciones.
Vale. Le doy a guardar, y vereis aquí que va a
aparecer ahora. Tachan… últimas publicaciones, ¿ Lo veis
? Hello World. Como sólo tenemos una publicación
que es la que trae de muestra, solo muestra esta. En la página web de muestra, aquí sale un
Widget que aún no lo estamos viendo, y aquí, otro que pone Carrito. No os preocupéis que
eso cuando instalemos la tienda, os lo voy a enseñar cómo poner aquí el Widget de
últimos productos vistos y el del carrito. No os preocupéis. Ahora voy a hacer un pequeño descanso, y
pasamos a la siguiente página, que es la de quienes somos. Pues nada…hasta ahora!
Muy bien chicos, ahora vamos a continuar entonces con el siguiente apartado que vamos a crear,
es el de quienes somos, bien. Para ello, pues nada vamos a ir cerrando esto
de aquí, y esto de… bueno esta es la de muestra, y esta es la que estamos creando…
vale. Vamos a crear el apartado de quienes somos. Vale, perfecto. Para ello, lo que tenemos que hacer es ir
aquí a páginas, todas las páginas, y buscamos el apartado que pone quienes somos. Bien. Vamos a ver…le damos aquí donde pone
editar con Elementor, y vais a ver que vamos a tener un problemilla. ¿ Qué problemilla
? ¿ Qué hace esta barra aquí a la derecha ? ¿ Qué es esto ? jeje Esta barra, pues va a venir por defecto en
vuestra plantilla, y para quitarla, he entrado aquí a propósito para que os salga este
error y lo podáis ver. Vamos a darle a la X, ir al escritorio. Para quitar esa barra, tenéis que ir aquí,
donde pone plantilla, y elegís página de inicio, actualizar. De esta manera quitamos tanto lo que es las
barras laterales, como lo que es el propio nombre de la página, que pondrá quienes
somos. Vale, actualizamos, y volvemos a entrar aquí
donde pone editar con Elementor. Veréis que ya no sale. Genial, ya no sale nada. Solamente sale lo que es el pie de página,
que es normal que aparezca siempre. Bien, vale, para empezar entonces, con el
apartado de quienes somos, vemos aquí, que tenemos una imagen de fondo, con un título. Esto es muy sencillo, recordad, le damos a
agregar nueva sección, una columna, vale, venimos aquí a estilo, donde pone fondo,
clásico, elegimos imagen, y buscamos una imagen. Seleccionar archivos, yo voy a subir una imagen
que tengo lista. Quienes somos, era esta de aquí… genial. Recordar poner el texto alternativo…
Vale. Insertar medio. Vale. Aquí, pues ponemos posición centro centro,
donde pone adjunto ponemos fijo, no repetir nada, aquí, abarcar. Genial, vale, pero aun no se ve nada. ¿ Por qué ? Recordad, hay que meterle más
altura a esto. Y esto se hacía desde aquí donde pone disposición. Altura, altura mínima, no sé cuánto le
había puesto yo, creo que 400 estaba bien, no sé, o 600, no lo sé… no me acuerdo.
Aquí ponéis el que más os guste. 600. Guardamos, venimos aquí, y donde pone
encabezado, ponemos el encabezado, genial. Ponemos el texto, quienes somos…
Muy bien. Le damos para el centro, lo ponemos aquí,
uy. No sé qué hice por aquí mal. Quienes somos, genial.
Vamos a ponerle un H1, y un poquito más grande, esto hay que darle más, más al tamaño para
que se vea bien. Venimos aquí, donde pone tipografía, tamaño,
podemos darle… ¿ qué tamaño queréis ? ¿ 70 ? El 7 me gusta mucho, pues 70. Vamos
a poner el color de texto, blanco…y ¿ qué más ? Donde pone sombra de texto, a mí me gusta
mucho este efecto, le ponemos blanco. Este hace como el efecto ese halo, está como
iluminado, parece una luz de neón, o algo así. Me gusta mucho. Vale. Veis el efecto parallax, es precioso. Vale,
perfecto. Aquí, tenemos que crear esto. Esto son como veis, 2 columnas, con un texto
dentro y una imagen a la derecha, vale. ¿Cómo creamos esto? Venimos aquí, creamos
una sección, que tiene 2 columnas, vale, aquí tiene pues 1, 2, tiene el texto, un
divisor y texto y un botón. Vale. Texto, esto es un texto normal, sí. Texto normal, ponemos texto normal por aquí,
que no tiene prácticamente nada, A ver,… ¿qué es lo que dice aquí? Vale, creamos
páginas webs preciosas. Vale, perfecto, no me cuentes, tu vida, jeje Así, me gusta que crees cosas preciosas. Esto que… ay… vale, creamos páginas web
preciosas. Vale, perfecto, no me cuentes tu vida. jeje Equipo multidisciplinar, esto es un título
como veis, se ve más grande. Vamos aquí, tirititi… Arrastramos debajo,
pegamos el texto, ahí está… vale. Ponemos el divisor, color negro… separador,
por aquí, lo ponemos alineado hacia la derecha, que no sea tan ancho… Le damos más grosor… Esto lo alineamos hacia la derecha, este de
aquí hacia la derecha también, que tenga algún sentido, ponemos un texto debajo, vale. Y le decimos que también alineado hacia la
derecha. Genial, vale. Esto está un poquito más cerca si os fijáis,
está más junto. Vale, pues lo que puedo hacer es decirle aquí:
Oye, quiero que tú, donde pone margen, quiero que vallas para arriba. Es negativo, recordad. Vale, ¿esto de aquí está cerca? ¿o no?
Bueno, más o menos. Bah, lo dejo así, genial. Esto nada, tiene un fondo blanco, así es
que nada. ¿Cómo hago para que se pegue hacia la izquierda?
Que si veis va de extremo a extremo. Pues nada, recordad, vengo aquí a la sección,
y le digo: Oye, extiéndete, y también quiero que extiendas el contenido muchacho. Genial, uy… perfecto. Tiene un botón debajo, se me olvidaba ponerlo. Ponemos el botón, tirititi, y lo llevamos
a la derecha. Vale, fijaros este botón, aquí sí que me
voy a esmerar un poquito con las animaciones. Al colocarte encima, cambia de color, se mueve…
etc. Vale, pues le digo: aquí pone “haz click”,
vale. Le digo al colocarte encima, es decir, lo selecciono, voy a estilo, al colocarte
encima, quiero que cambies de color. ¿ A qué color ? Él está en negro, pues quiero
que cambie a azul… vale. Primeramente, voy a definir el color normal. Color normal… el texto blanco, fondo negro,
y al colocarte encima, quiero que cambies a color de fondo azul, y que además, en animación,
como que te muevas. A ver… vale. Push grow, Push In… bueno aquí realmente
es elegir el que más os guste. Pop. Creo que había elegido el pop. Vale, pop. Y además, este botón tiene animación de
entrada. Me recuerdo que entraba por de derecha a Izq,
de derecha a izquierda sino recuerdo mal. A ver… recargamos… de derecha a izquierda.
¿ Veis que aparece de repente ? Nada eso recordar, venimos aquí, avanzado,
animación de entrada, derecha, fade in right, derecha a izquierda. Genial, vale. Aquí vamos a colocar esta imagen y como veis
está la imagen sin nada. Vale, aquí os voy a enseñar un pequeño
truco porque vais a tener un pequeño problema. Que ahora os lo voy a comentar. Bueno antes de nada, voy a decirle que tengamos
un poquito de separación, esto está demasiado cerca, ¿lo veis? Está demasiado al borde. Vamos a darle un poquito más de separación,
seleccionamos la sección, vamos a avanzado, y ¿veis aquí donde pone relleno? vamos a
rellenar aquí pues de espacio en blanco. Desde arriba le decimos que se separe un poquito,
veis, por ejemplo, uy lo siento, 20, 20 está bien. 20, genial, me gusta 20. Creo que abajo también le di separación,
si, vamos a darle 20 también de separación abajo. ¿ Veis, que está ensanchando? 20, vale 20
arriba, 20 abajo. Y aquí metemos la imagen. ¿ Cómo metemos esta imagen? Nada, no os
preocupéis, perfecto. Esto ahora se consigue. Venimos aquí, y esta
columna le decimos: Oye, tú, vas a tener un fondo que va a ser este fondo, que yo voy
a elegir ahora. Este de aquí. Recordad poner el texto ALT. Ya lo digo así en bajito, y como veis no
se ve nada. ¿ Por qué no se ve nada ? Pues porque no hay ningún contenido. Aquí hay que hacer un pequeño truco, es
que es poner algo, un elemento, y borrar el contenido. Yo voy a poner pues un encabezado, veis. Pero lo que voy a hacer a este encabezado,
voy a borrar lo que hay dentro. Es un elemento vacío. Como veis no hay nada. Vale, pero no se ve la imagen… ¿ Por qué
? Pues porque hay que decirle, hay que venir aquí a las propiedades, y decirle posición,
centro centro, adjunto pues no, lo dejamos en normal, donde pone repetir no, donde pone
tamaño pues ponemos abarcar. ¿Veis, que bien? Vale ¿Qué pasa? que aquí, ¿veis que hay como
una separación blanca?, eso es por lo que habíamos hecho antes del padding, o sea del
relleno. Vale, vamos a quitarle el relleno. Elegimos aquí, avanzado, ¿veis ahí donde
pone arriba? Quitamos el de arriba. Vale, y lo que voy a hacer es que solamente
a esta columna, solo, a esta columna, le voy a dar relleno. Vengo aquí, avanzado, quito esto para que
sea solo arriba, y donde pone aquí el relleno lo voy a poner pues relleno de arriba, 20.
Vamos a poner 20 en todos. 20 en todos, está bien, ahí está bien. Vale, vale. ¿Cómo ponemos estas barras de progreso?
Estas barras de progreso, es un elemento, bueno primeramente vamos a crear esta sección
de aquí. Me estoy liando yo antes de tiempo. Vale. Creamos otra sección, con 2 columnas, titititi…
vale… y lo que voy a hacer es que esta columna de aquí si os fijáis es igual que la de
arriba. Pues la voy a duplicar.
La duplicamos… y me la ha traído para aquí, pirimpimpinpimpin.
A ver si puedo, vale y esta de aquí, me sobra. Veis, así me ahorro tiempo. Vale, esta la
quiero, lo único que tengo que cambiar es el alineado. Le digo: Oye, tú para la izquierda,
y tú… para la izquierda, y tú… para la izquierda. Y usted de aquí… izquierda. Y usted… izquierda… veis qué bien? Genial. Vale, aquí, como veis hay otra imagen, pues
nada, aquí hago lo mismo. Esta columna la duplico, y me la traigo para
aquí, ese es el truco. Este truco es muy bueno, vale. Esta de aquí, me sobra. Vale, a esta columna, osea, a esta sección
le voy a decir, tu también vas a estar estirada. Y también vas a tener ancho completo. Veis, solamente que aquí, en lugar de tener
esta imagen de fondo, va a tener otra. Selecciono la columna, y le digo oye, imagen
de fondo, pues va a ser otra. Aquí ya no recuerdo ni cual puse, este hombre de aquí
que estaba glorificando a Dios. Vale. Cual es… este hombre de aquí. Muy bien. Aceptamos, metemos al hombrecillo, y ponemos
las barras de progreso. ¿ Cómo se ponen estas barras de progreso
? Pues venimos aquí, ummumm… Vale, aquí,
donde pone barra de progreso. Arrastramos, veis, y, pues nada, una vez que
esté definido el color que nos gusta, veis que aquí es fondo blanco barra negra, pues
venimos, fondo blanco barra negra, esto ya está. Si venís aquí, podéis definir el color
de las barras, el color, el fondo, el texto, lo que queráis, yo lo voy a dejar así, para
no complicar más esto. Vale.
Donde pone mis habilidades, yo voy a poner diseño, Vale, diseño… diseño. Donde pone aquí… pues modernos voy a poner,
modernos, diseños modernos. ¿ Cuánto ? un 82%, pues le digo, 82%, 83,
está bien. Funcionalidad… pues eso es otro elemento.
¿ Cómo lo hago ? Duplicar. ¿ Cuántas barras hay ? 3, pues… duplicar. Vale. Funcionalidad, ponemos aquí funcionalidad,
diseños adaptativos… vale, porcentaje…70, 75% está bien así.
Vale, Guardo. Genial, voy a ver cómo van los progresos,
vengo aquí, le doy al de salir, ver página. ¿ Veis qué bien ? Vale, vamos avanzando. Como veis, esto no se ve del todo la imagen,
podéis, para que se vea más la imagen podéis añadirle más relleno. Venis aquí a la columna, donde pone avanzado,
en la parte de abajo, donde pone abajo le dais más relleno. ¿Veis? a ver si me deja, vale… aquí no
me deja. ¿ Por qué no me deja ? O sino le dais a
este elemento, le dais relleno por abajo y ya está. A ver… eso como queráis, se puede hacer
de muchas maneras. Ya os digo, no hay una manera exacta de hacer
una página web. Hay muchísimas varias formas de hacer una
página. A ver, ¿qué más? este… se me olvidaba,
esto de quienes somos tiene una animación, vamos a ponérsela, para que no digáis que
os he estafado, jaja venimos aquí, avanzado, animación de entrada, Zoom In… esta es
muy bonita. Guardar. Y no sé si hay alguna animación más…
a ver… creo que de momento, aquí en quienes somos es esta, este viene por aquí, esto
se aparece por aquí, vale. Amamos lo que hacemos.
Vamos a esta sección. Amamos lo que hacemos, esto es una sección
nueva, abrimos por aquí en una columna, vale, seleccionamos, donde pone estilo, normal,
clásico, imagen, subir archivos, seleccionamos el archivo, elegimos la imagen, es esta chica,
recordad ponerle el texto ALT, vale. Y aquí, recordad, posición, centro centro.
Adjunto… Fijo. Tamaño, Abarcar, guardamos. Vale, genial.
¿ Esto qué altura le había dado ? No lo recuerdo muy bien, creo que le había dado
pues creo que 400 o 600, vamos a darle 600 a ver, venimos, seleccionamos la sección,
disposición, alto, altura mínima, ya os digo creo que eran 600… a ver… 600. Igual
600 sí. Yo creo que 600 está bien, vale. Como veis, tiene aquí un text, es un título,
raya, y 3 columnas, vale. Pues ponemos: Título, raya, y 3 columnas. Aquí, para añadir una columna más, le doy
aquí, genial. Esto empiezo a darle forma, lo llevo al centro,
lo pongo blanco, me parece que era blanco, blanco… vale. Y el tamaño creo que era H1 me parece, me
parece. Amamos lo que hacemos. Vale. Aquí cambiamos el texto, vale. Y esto de aquí es un contador, vale, pone
mil, mil no sé qué clientes, vale, vamos a poner entonces, bueno vamos a hacer la raya
horizontal, que se me olvidaba. Color… blanco.
Grosor… 2. Ancho… este, aquí al centro… genial…
vale. Ahora, ponemos estas, estos 3, muy bien, vale.
Eran, estos eran contadores. Vale, 1 contador por aquí, muy bien, esto
es color blanco, texto blanco, vale. Color blanco, estilo, color, blanco, genial. Y este texto blanco también. Venimos aquí,
y aquí ¿qué valor habíamos puesto? 1532, pues ponemos número de fin: 1532, vale. Ehhh… ¿ 1532 qué? Clientes, vale, pues
ponemos aquí, título: Clientes. Genial. ¿ Qué más ? Pues aquí podeis definir
la duración de la animación, lo que dura esta animación de aquí, podéis cambiar
el número de inicio que en lugar de empezar en 0, que empiece en 500 y hasta 1500, lo
que queráis, vale. Ehhh.
Esto vamos a ponerlo en blanco. Esto no está en blanco, ¿cómo lo ponemos
en blanco? Pues venimos aquí a título, y le decimos: Oye muchacho, en blanco… Vale.
Como esto ya está definido, para no tener que estar haciendo una y otra vez todo, pues
ya sabéis, o bien duplicamos la columna, o bien duplicamos el elemento. Yo voy a duplicar el elemento, y lo voy a
traer para aquí, genial. Ponemos 753 webs realizadas. 753, 753 webs
realizadas, Vale. Vale.
Webs realizadas. Esto de clientes estaba en mayúscula…
Ay… vale, clientes… vale, y aquí, ponemos 2354 tazas de café, joder, vamos a ver, vas
a acabar bien tú! Vale. 2354, 2354. Tazas de café. Genial. Vale, aquí creo que había una animación
me parece, si no recuerdo mal. Esto creo que estaba animado, no aquí no
había, estaba tal cual. Ehh, Vale.
Vamos a poner estas olas de aquí, este divisor. Como os imaginaréis, esto es seleccionando
la sección, estilo, forma del divisor, en la parte de abajo, porque arriba no nos interesa,
en la parte de abajo le decimos… hummm este me parece que… ¿este qué era? ¿ Qué
había elegido yo ? este creo que era nubes, me parece, no, nubes no… ¿ Qué era este
? Opacidad de inclinación, curva, este… es que ahora no me acuerdo la verdad, cepillo
de olas, patrón de olas… no, patrón de olas no era.
¿ Cual era ? Gotas… no. Montañas, era montañas.
Vale, perfecto. Ahora vamos al apartado de nuestro equipo. Genial, vamos a guardar.
Esto, nada, facilísimo recordar. Esto es una sección, con la parte de abajo 3 columnas,
y otras 3 columnas. Vale, esto lo voy a poner en una sección
a parte, y esto van a ser otra sección. Vale, genial, eh… es que se puede hacer
de muchas maneras. Como sabéis.
Una sección, donde voy a poner esto de nuestro equipo, vale, traigo para aquí, esto para
el centro… titirititiii, ponemos nuestro equipo, vale, pongo
el divisor, vale, le damos para aquí, centramos, modificamos el ancho… y aquí donde pone
liderazgo, y que salgo yo, jeje, vale pues esto es una sección de 3 columnas, genial. Fijaros.
Creo una nueva sección, le pongo 3 columnas, y aquí empiezo a meter elementos. Esto es
lo mismo que habíamos dicho de antes que habíamos utilizado es una caja de icono. Traemos para aquí. Este icono es el icono
que se llama Wallet, Google wallet, vale. Que aquí donde pone icono, pues tiene el
color azul, este que me gusta a mí, donde pone texto, pues ponemos liderazgo, contenido…
aquí ponemos liderazgo… ese texto lo dejamos ahí podéis poner lo que queráis, ya sabéis,
vale. Ahora os voy a enseñar cómo poner en lugar
de un icono, una imagen. Es tan sencillo como venir aquí y elegir
este que pone cuadro de imagen, lo ponemos por aquí, vale.
Elegimos la imagen, pues buscamos mi foto, a ver dónde está… Aquí estoy yo. Vale. Seleccionamos… eehh… Juan Bonilla
CEO. Ponemos por aquí, eeehhh… este es el texto, pues Juan Bonilla CEO, vale. Nacido en República Dominicana, vamos a coger
este texto… vale, tirititititi…. Muy bien. Y esta imagen pues la ponemos un poquito más
grande. ¿ Por qué no ? Venimos aquí a estilo, espacio
de la imagen, el espacio de la imagen lo vamos a reducir, el tamaño vamos a darle más grande,
el que corresponda, vale. Bien, estáis viendo que se está llendo esto
demasiado para abajo, y esto demasiado para arriba ? Para centrarlo le dais aquí… pin,
y donde pone posición del contenido, le dais medio, y ya está centrado, lo veis, genial. Vale, eh… esto de emprendimiento, es lo
mismo que esto. De hecho lo voy a duplicar, lo muevo para
aquí… vale. Y aquí pongo Emprendimiento. Vale, este texto creo que es el texto que
viene por defecto, vale, recordar, lo podéis centrar a la izquierda, a la derecha, a la
que queráis. ¿ Vale ? Bien, ahora vamos a poner este icono
de lo que son las redes sociales. Esto es un elemento que hay por aquí, ¿dónde
está? Aquí, que pone iconos sociales, lo coloco, aquí debajo justo, y recordar que
podéis cambiar el tamaño, la forma, si queréis que sean redondos, cuadrados, circulares…
yo lo dejo en… así, creo que este está bien.
¿Cual había elegido yo ? Este está bien, pero más pequeñito. A ver… es… sí, más pequeño, ¿qué
tamaño le había dado? Ya ni recuerdo, 14 está bien. Vale. Por cierto, una vez que los teneis seleccionados,
pues podéis entrar aquí, y elegir el icono de lo que queráis, no tiene por qué este
ni mucho menos, y podéis poner en enlace a vuestro perfil de Facebook o el que corresponda. Bien en twiter, o el que queráis. Podéis
agregar más elementos, etc. Esto lo podéis personalizar a vuestro gusto. Recordar.
Vale, y ahora creamos estos 3 elementos que hay aquí. Vale.
Estos sí que son unos elementos. Vale, perfecto. Pues esto es lo mismo, recordad. Venimos aquí, nueva sección, 3 columnas,
este me parece… esto va de extremo a extremo como os fijáis, y este también, que se me
olvidó aquí hacerlo. Vengo aquí, sección… estirar… ancho
completo. ¿Veis? ahora va de extremo a extremo.
Y aquí lo mismo, sección, estirar… ancho completo. Vale, muy bien. Pues ahora, cuando me coloco
encima de aquí mía, pues como que me agrando, pues selecciono, voy a estilo, aquí donde
pone animación, pues le doy a Grow, veis, genial. Guardar. Vale ahora voy aquí, donde los chicos, y
selecciono estos. Esto era… vale. Esto era con el de imagen.
Por aquí… choose image, está, no lo voy a repetir, creo que esta era una… con la
imagen me parece que era más grande, sino recuerdo mal, sí. Sin espaciado, imagen más grande, a tope,
vale. A la imagen que me apetezca, y ahora copio
este texto, lo pongo aquí, vale, y este texto lo dejo tal cual. Vale, genial. Esto lo voy a duplicar, recordad, uy, lo traigo
para aquí, duplico, traigo para aquí, cambio foto, este ahora es el morenaje, este de aquí,
es la otra chica. Con sus nombres.
Jeje. Vale, este es el chico, y esta es la chica. Este es el programador, y esta es la diseñadora. Voy muy rápido, pero porque veis que esto
es básicamente es coser y cantar. Es repetir lo mismo una y otra vez, no tiene
más ciencia que lo que estáis viendo ahora. Eh, para poner estas animaciones tan chulas,
nada simplemente seleccionáis, vais a estilo, donde pone animación, pues a mí una que
me gusta es esta donde pone Grow rotate, y aquí la repetimos.
Grow rotate, y aquí lo mismo. Estilo, animación, grow rotate… veis, genial. Vale me faltan los perfiles, lo que voy a
hacer, no voy a diseñarlos uno a uno, para avanzar en este tutorial que ya se está alargando,
y lo voy a duplicar, y lo voy a traer por aquí, duplico, y traigo por aquí. Genial. Vamos a ver cómo está quedando. ¿ Os gusta
? Es una pasada. Aquí hay que darle un poquito más de espacio, recordad, venís a la sección,
venis a la sección, donde pone avanzado, aquí donde pone relleno, le dais en la parte
de abajo un poquito más de espacio. ¿Cuánto? El que preciséis. 50 está bien, vale. Guardamos… muy bien. Ya tenemos hecha la
página de quienes somos. Vamos a crear la página de servicios.
Y esta página, es una página de muestra, que os voy a enseñar, no tenéis por qué
diseñar todo desde cero como estamos haciendo ahora. Yo lo estoy haciendo para que aprendáis,
pero esto hay plantillas dentro de lo que es Elementor, que os van a ayudar a hacer
las cosas más rápido. Voy a enseñaros qué plantilla podemos usar,
vamos a salir de aquí, ya hemos acabado con la parte de quienes somos. Vamos a pasar al apartado que se llama servicios. Vale, dentro de servicios recordad, aquí
hay que darle donde pone plantilla, le dais donde pone página de inicio para que no nos
ponga esas barras laterales ni esos títulos etc, vale.
¿ Qué más ? Titirititi, editar con Elementor. Vale, aquí está, ya estamos en la página
de servicios, recordad. Y aquí, en lugar de crear todo desde cero,
fijaros lo que tengo yo creado en la página web de muestra. Esta es la web de muestra,
servicios, ¿veis que tengo esto? Esto es una plantilla. Una de las tantas plantillas que te trae Elementor.
Son páginas que ya están creadas, en la cual tú solamente tienes que sustituir las
cosas, si te gusta el diseño pues solamente tienes que cambiar el texto, y las imágenes,
etc, no tienes que rediseñar todo con las secciones, etc. Está muy bien para ahorrar tiempo. Vale, continuamos. ¿Cómo se hace esto? Pues
le dais aquí donde pone añadir plantilla. Vale, y… la plantilla que estamos usando
nosotros en este tutorial en concreto, está por aquí abajo, a ver si la encontramos…
umm, umm, a ver dónde está… creo que me pasé, aquí está. Esta es la plantilla que estamos utilizando. Fijaros. Está cargando ahora mismo. Veis, ya hemos creado la sección de servicios.
¿A que ha sido rápido? Le damos a guardar… Es una pasada, me encanta este diseñador
de… esta herramienta para diseñar las páginas web visualmente, es increíble. Claro, esto como es una plantilla, pues solamente
tenéis que cambiar el texto y poner lo que queráis, join us… pues no, join us no,
únete. Únete, con acento. Ahí está, Únete. Vale, ya está creada,
ya tenemos hecha la página web de servicios. ¿A que ha sido genial? Genial, vale, perfecto.
Salimos de aquí, al escritorio… como veis, voy a cargarla para que veáis que ya está
actualizado, servicios, pues ya está, ya hemos creado servicios. Ha sido muy rápido. Vale, ahora vamos a ir al apartado de blog,
recordad, blog es donde aparecen las noticias que ponéis en vuestra página web. Cada vez que hagáis una actualización, un
anuncio nuevo, algún servicio nuevo, o cualquier cosa que os interese enseñarle a vuestros
clientes, lo ponéis en el blog. Vale. Para configurar el blog, recordaD que
al principio, yo os había dicho que teníamos que entrar aquí a apariencia, personalizar,
y había un apartado que no habíamos tocado en su momento. Ahora, vamos a tocarlo.
Venís aquí, ¿veis que pone opciones del blog? Vale. Vamos a comprobar. Pues aquí, hay que hacer lo siguiente: Donde
pone disposición de blog, ¿veis que pone clásico? Eso es como viene por defecto. Es decir, como lo está mostrando ahora.
Ese es el estilo clásico que el le llama. Es este mismo que veis aquí, esta es la web
de muestra, Vale, es este estilo, vale. Hay más estilos.
Hay el de ancho completo, que significa que desaparezca esta barra lateral y se muestre
solamente ,ehh, la publicación. No, esa no me interesa, creo que no es buena
porque perdéis esta funcionalidad dentro del blog, que es bastante interesante. Luego tenéis la opción que pone Masonry,
que es como cuadrícula, la cuadrícula es esta, haber si puedo entrar para que la veáis,
claro aquí no, no puedo enseñárosla ahora mismo, cuadrícula es que muestra un cuadrito
aquí, otro cuadrito aquí, otro cuadrito aquí, está bastante chulo. Vamos a dejarlo de momento en clásico. Y vamos también a, donde pone… a ver…
dentro de diseño de pantalla lo dejamos en clásico, a ver… y donde pone imágenes
destacadas, aquí abajo, tenemos que marcar esta opción, marca esta casilla para ocultar
las imágenes promocionadas del índice de archivos. No, esto no, esto lo dejamos sin
activar. Marca esta casilla para esconder las imágenes promocionadas en las publicaciones.
Esta la marcamos… a ver… diseño de pantalla, dentro de diseño de pantalla… entradas
con anchura completa, sí… esto también lo dejamos marcado. Luego ya os digo. La plantilla, tiene un montón
de opciones que no estamos tocando. Podéis ir mirándola poco a poco. Yo os estoy enseñando a hacer una página
igual que esta. Pero hay miles de posibilidades, tan sólo
hay que cambiar todo esto según lo que queráis. Yo voy a ir al grano, porque sino se alarga
muchísimo el tutorial. Vamos a darle a publicar, estas son las opciones
que yo quería que marcarais, para que sea igual que la página de muestra. Vale, esta de aquí, esta de aquí, y esta
de aquí, vale. Perfecto. Aquí ya podemos salir, cerramos,
y como… si os acordáis, al principio, creamos varias páginas. La página de inicio, la
página de quienes somos, la de servicios, la de blog, la de contacto. Bien, pero, para hacer una publicación en
el blog, no tenemos que crear una nueva página, hay que crear una nueva entrada. Es como crear un nuevo anuncio. ¿Veis aquí un apartado que pone entrada?
Pues le damos aquí donde pone todas las entradas. Genial, él ya trae una por defecto. Vale, esta la voy a dejar, no pasa nada, vamos
a dejarlo ahí, pero se puede borrar si quisiérais. Es una que él te trae, para que veas que
tiene algo ya. En la página web de muestra, las entradas
que yo he puesto son estas: Bienvenido a nuestro blog, vale, vamos a crearla. Se crean igual que si fueran una página,
le dais aquí, donde pone entradas le dais a añadir nueva, vale y ponéis el título. Pues yo voy a poner: bienvenido a nuestro
blog. Genial. Lo ponemos por aquí, bienvenido a
nuestro blog, le damos a publicar, y… ojo! Tenéis que poner una, no es obligatorio pero
yo os recomiendo que pongáis, aquí donde pone imagen destacada, podéis poner una imagen
que queráis. Esto lo podéis subir para arriba así, si
estáis más cómodos. Para que no tengáis que estar siempre dando
hacia abajo. Lo voy a poner por aquí, imagen destacada. Donde pone imagen destacada, pincháis, y
podéis colocar la imagen que se va a ver como quien dice en el titular, es como si
fuera el titular de nuestra noticia. La imagen del titular. Pues vamos a subirla, yo ya las tengo preparadas,
a ver… vamos al blog, bienvenido, creo que era esta, ¿cual había elegido yo? sé que
era, creo que era esta la imagen de portada me parece. Sí, era esta la imagen de portada. Vale, seleccionamos, ¿veis que esa es la
imagen de portada, destacada? Y ahora ponemos el contenido, pinchamos aquí para que veáis,
esta es la imagen que hay dentro de la publicación. Voy a entrar para que veáis, ¿veis que pone
editar con Elementor? Vamos a darle a editar con Elementor. Vale, está cargando… y ahora, pues ponemos
aquí una imagen, selecciono la imagen, subo la imagen, seleccionar archivo, y esta es
la imagen que voy a poner de dentro. Vale, recordad ponerle el texto ALT, vale,
perfecto. Muy bien, y aquí, vamos a poner pues un texto,
un texto debajo, porque sino esto va a estar muy soso… Para poner el texto, venimos aquí, a ver…
¿cómo lo había hecho yo? Acompáñanos en esta nueva aventura, pues nada, ponemos
un título. Ay, a ver… el título aquí debajo, lo centro…
y añado el texto. Para, cuando estéis diseñando vuestra página
web, no tenéis por qué inventaros el texto y perder el tiempo, hay páginas que te crean
textos automáticamente, en la página web nuestra, en el apartado de recursos, hay un
enlace a una web que yo utilizo mucho, que te crea, te genera textos, esto te genera
textos de estos que son tipo lorem ipsum, etc que son textos para maquetación, vale. Esto lo podéis encontrar, a ver… ¿dónde
está? ¿Dónde lo había puesto yo?… Aquí, generador de textos automáticos. Y veis, aquí tenéis un, pues el tipo de
texto que queráis, el número de letras, o líneas, o lo que sea, y el número de párrafos,
pues yo lo que hago es eso, vengo aquí, selecciono, copio, pongo un texto, uy… a ver… y pego. Ahí tenéis un montón de texto. Recordad, podéis, si hay alguna letra en
concreto que queréis remarcarla, pues en negrita, en cursiva, eh… y la queréis poner
otra por ejemplo de un color, recordad que se hace de esta manera, es que hay tantas
cosas… por ejemplo aquí podéis poner un enlace a una página porque os gusta, le dais
aquí, seleccionáis la imagen, seleccionáis el texto, ponéis el enlace, por ejemplo:
google.es, no sé si lo estoy poniendo bien, a ver, esto lo podéis estirar, recordar,
google.es, podeis decirle que queréis que se abra en una pestaña nueva, y os llevará
a la página de Google. Bien. A ver, esto lo he estirado, lo volvemos
a poner así… Ahí está. Guardar, y ya tenemos nuestra
primera entrada, nuestra primera publicación. Vamos a ver qué tal está.
Le damos aquí al blog, recordar, tenemos la que venía por defecto, que era una de
ejemplo, y la que hemos creado nosotros, Bienvenido a nuestro blog. ¿Veis que pone aquí, uncategorized? Bien,
las entradas o publicaciones, están divididas en sec… ay… cómo era… a ver si me acuerdo…
en categorías, vosotros podéis tener la categoría viajes, categoría noticias, la
categoría que queráis. Esto en inglés significa sin categorizar. Pero lo podéis cambiar. Yo voy a poner por
ejemplo, venimos aquí, y le damos a donde pone entradas, ¿veis que pone categorías?
Pues le damos, y esta que pone uncategorized, pues podemos editarla, vamos a editar.
Y decimos no, no quiero que te llames así, quiero que te llames variada.
Variado por ejemplo. Vale. Esto de slug, es lo que aparece aquí en la
barra de direcciones. Pues, ponéis variado. Vale, Actualizar. Veréis que ahora, ya desaparecerá esto de
uncategorized. Variado… genial. Cualquier cosa que pongáis en la categoría
de variado, cuando la gente pinche ahí, lo va a ver, todo. Veis, categoría, variado. Es una forma de organizar vuestro blog, porque
cuando, ahora que tenéis 3 entradas no pasa nada, pero cuando tengáis 500, a ver cómo
organizáis eso. Vale, bien. Otra cosa que os quería comentar, cuando
entráis a una entrada, nunca mejor dicho, cuando entráis a una publicación o entrada,
fijaros. ¿Veis esta dirección que aparece aquí? es horrible, ¿por qué es horrible?
¿ Qué es esto de 2017/11/26/bienvenido-a-nuestro-blog ? A Google no le gusta esto.
No le gusta, a Google no le gusta que aparezcan números, de, que no tienen nada que ver con
la publicación, eh… Google quiere que aparezca el nombre de lo que es la entrada, de qué
trata esa publicación que tú has hecho. Para cambiar esto, tenéis que venir aquí,
donde pone editar categoría, no perdón, tenéis que venir aquí al escritorio, ¿veis
que pone… ajustes? Que pone, enlaces permanentes… Pues venimos aquí, y seleccionamos la opción
que pone: Nombre de entrada. Vale, guardar cambios. Ahora veréis que cuando accedamos
al blog, y entremos en la publicación, van a desaparecer todos esos números, y ahora
os queda una página mucho más bonita, y mucho más amigable a Google. Genial. Google o a los buscadores, siempre estoy diciendo
Google pero me refiero a los buscadores. Vale, genial.
Vamos a crear la segunda entrada, uy, voy a la página de muestra, la segunda entrada
es esta: Mi primera entrada del blog. Esto es bienvenido al blog, y esta es pues
mi primera entrada del blog. Vale, a ver… nada mi primera entrada del
blog. Entradas… podemos darle a añadir nueva,
o todas las entradas, y añadir nueva, es lo mismo. Recordar.
¿Vale? Mi primera entrada del blog. Voy a copiarlo para no perder tiempo, recordad. Mi primera entrada de blog… imagen destacada,
esto recordar que estaba abajo, y lo he puesto arriba. Subir… seleccionar archivos… tin, primera
entrada, selecciono esta, poner el texto ALT, recordad, establecer imagen, publicar… vale. Voy a entrar a ver qué hay dentro. Buf, no me digas que tengo que dar todo esto,
no, no hace falta, ahora os voy a enseñar un truquito, muy bueno. Recordad que aquí tenemos nuestro maravilloso
Elementor. Elementor, esta herramienta es maravillosa,
aquí, podemos añadir una plantilla, recordad. ¿ Qué plantilla vamos a poner? Pues ahora
os digo, es una que se llama Blog post, está en la parte de abajo… por aquí… a ver
si la encontramos… esta de aquí. Esto son plantillas, hay muchísimas , algunas
son de pago, otras no. Recordad, Elementor estamos usando la versión
gratuita. Aunque hay una versión de pago, pero esta
es la gratuita. Vamos a insertar esta plantilla gratuita.
Bien. Aquí la tenemos. Esta es la entrada, vale genial. Le damos a guardar, y ya tenemos nuestra primera
entrada de blog. No tenemos que diseñarla entera.
Si os gusta esta, y queréis utilizar esta plantilla, pues perfecto. Vale, ya está. Salimos, escritorio, muy bien. ¿Qué más? A ver… ¿Qué más nos queda
por aquí? A ver… ahora os voy a enseñar también
cómo poner un comentario. Eh… bueno eso no tiene, no tiene mayor duda.
Hola, muy buena entrada, muy buena publicación. Eso de entrada… buena publicación. Y veréis que aquí en el escritorio, va a
salir un aviso ahora, de que alguien ha publicado algo. A ver si me sale.
Bueno sale en comentarios, aquí está: Hola, muy buena publicación. Vale, genial. Podéis regular los comentarios, y todo eso. Todo se puede configurizar…, configurar.
Eso. Vamos a ver.
Por donde vamos… blog, creamos nuestra última entrada que es esta de aquí, mi último viaje…
vale. Mi último viaje, fijaros, voy a hacer una
nueva categoría que se llame viajes. Para que sepáis cómo crearla. Para ello entramos a entradas, categorías. O pinchamos en entradas, y le damos a categorías.
Es lo mismo. Vale. Aquí donde pone añadir nueva categoría,
pues ponemos: a, ¿cual era? viajes. Viajes. Y donde pone Slug, sino ponéis nada,
el va a añadir viajes. ¿Veis que ya tenemos una que se llama variado?
Pues dejamos la de viajes, añadir categoría, y en Slug él ya añadió, variado, ¿ehh?
… ya añadió viajes… genial. Vale. Ahora creamos una nueva entrada, añadir nueva,
fijaros. Aquí yo puedo decirle, oye, esta entrada,
esta publicación que voy a hacer, va a pertenecer a la categoría viajes, y ya la selecciono. Bien, voy a elegir la imagen de portada, que
es esta, este chico mirando para abajo en la montaña. Vale, pues si le doy a imagen destacada, subir
archivo, selecciono archivo, ¿donde está?, último viaje… era esta de aquí. Muy bien. Establecer, publicar… y ahora vamos a editar
con Elementor, para poder verla. Uy, aquí algo ha pasado, creo que le he dado
muy rápido a abrir, antes de publicar me parece a mí, ah, es que no le he puesto nombre,
jej. Vale, vamos a ponerle el nombre… mi último viaje. Esto se ha editado, cuidado con esto que es
la dirección que aparece. Vamos a poner aquí, mi último viaje. Vale, muy bien.
La imagen destacada, ¿la he puesto? o no la he puesto. Ya no sé si la he puesto, voy a volverla
a establecer. Ahí está, es que como antes se guardó mal,
voy a entrar, a ver qué es lo que hay… liberado por las montañas. Vale, pues ponemos esto.
Editar con Elementor… donde pone imagen, ponemos una imagen, a ver cual era el que
estaba usando yo… esta la cierro. Esta del chico mirando hacía las nubes. Vale. Busco la imagen del chico mirando hacia
las nubes, esta de aquí… muy bien, poner el texto ALT, espero que cargue… insertar…
perfecto. Aquí podéis poner una leyenda, que básicamente
es como este pequeño texto que aparece en la parte de abajo… ponemos una leyenda,
y podéis poner un enlace a una dirección en concreto… o a que esta imagen se agrande,
etc. Bien. A ver… esto de aquí, liberado por las montañas. Vamos a poner aquí un título, liberado por
las montañas, centramos… y un texto, pues este mismo, lorem ipsum, que hemos cogido,
lo ponemos aquí, editor de texto, debajo, a ver. Editor de texto, vale, muy bien. Pegamos, ya lo tenemos, perfecto. ¿Qué pasa? en esta entrada para enseñaros
cómo poner un video, pues a ver, no tiene más complicación, pero os lo enseño. Venimos aquí, video. Debajo, vale. Y ponemos el enlace al vídeo. Ahora voy a cogerlo aquí de mis notas, ponemos
un enlace a un video, este de Perú, lo estuve viendo, está muy bien está muy chulo, parece
muy bonito, nunca estuve en Perú pero me gustan mucho esas montañas, deben ser preciosas. Vale, bien. Esto ya está. Ya hemos creado lo del blog, ahora que ya
tenemos contenido, que ya tenemos algunas entradas o publicaciones hechas, en nuestra
página de muestra, a ver, voy a cargarla por aquí… visitar el sitio, para que veáis,
aquí donde pone blog, os voy a enseñar cómo poner el estilo Masonry, que quizás os guste. También os voy a enseñar a modificar esto
de aquí, qué es lo que se va a ver, y qué es lo que no, las categorías, ordenarlo,
etc. Bien, primeramente, para editar lo que es
el estilo del blog, recordad, hay que ir a apariencia, temas, personalizar, es lo mismo,
bien. Donde pone opciones del blog, ¿veis que pone clásico?
Elegimos Masonry para que veáis. Voy a entrar aquí, esto es el Masonry, es
como una cuadrícula, se va mostrando de esta manera, nosotros lo tenemos puesto así, pero
sino os gusta, podeis elegirlo así. Podéis poner el que queráis. Va a ser una cuadrícula, vale, lo dejamos
como estaba, salgo de aquí. No guardo, porque no he hecho ningún cambio,
vale. Y ahora os voy a enseñar a poner, los widgets
que queráis en la barra lateral. Bien. Fijaros que antes, habíamos creado la categoría
variada, ¿la veis aquí ? Y esta es la categoría también variada… a este le habíamos dado
categoría viajes, no se ha cambiado, voy a cambiarla. Aquí ha habido un error… entro en mi último
viaje, y recordad esto hay que decirle que sea categoría, viajes. Bien. Veréis que ahora cambia. Categoría, viajes. Todo lo que vaya para la categoría viajes,
si vuestros clientes entran aquí, lo van a ver. Aquí sólo tenemos uno, pues por eso
solamente sale esta. Pero como veis, si le doy aquí a variado,
me salen varios. Las que hemos puesto, genial. Vale. Os voy a enseñar, cómo organizar esto de
aquí. Qué queréis que aparezca, arriba, abajo,
etc. Para ello, venimos a, al escritorio de WordPress,
venimos a apariencia, Widgets. Muy bien. Donde pone Widgets, tenemos, la de buscar,
entradas, comentarios, etc. Yo lo tengo puesto de esta manera. Tengo buscar, entradas recientes, tengo puesto
categoría, bien, luego tengo archivos, y ya está. Los comentarios no los muestro ahí, porque
no, no tiene sentido encontrar los comentarios ahí, creo yo, desde mi punto de vista. Eso ya queda a vuestro gusto. Yo lo tengo
puesto de esa manera. Eso es lo que tengo puesto yo en la página
de muestra. Pero recordad que podéis poner cualquier
Widget de aquí, y sino os gusta el que aparezca aquí, pues mira, podéis poner también el
de calendario, este no lo tengo puesto yo en la página de muestra pero lo podéis poner. Calendario. Calendario. ¿Veis? ¿A que está chulo? Cuando hagáis una publicación,
pues aparecerá por aquí el día… aparecerá un enlace, ahora mismo no sé por qué no
sale, o si sale… no sé, bueno. Saldrá por aquí un enlace a cuando hagáis
alguna publicación. Hoy a qué día estamos? a 26, claro, pues
la gente puede pinchar en el día, y ver la publicación que se ha puesto en ese día,
¿qué más? A ver… ya está… pues vamos a pasar a la página de contacto, es esta
página de aquí, que aún no tenemos nada, bien. Vamos a ir a la página de muestra para
ver cómo es, perfecto… Esta es la página de contacto que vamos a crear. Vale. Vamos a recordad: páginas, contacto,
muy bien. Recordad que tenemos que darle aquí donde
pone plantilla, página de inicio. Actualizar, muy bien. Y le damos a editar con Elementor. Bien. ¿Cómo la hemos creado? pues esto si
os fijáis, es una sección con una columna, y un texto en el medio. Sección, con columna, y un texto en el medio.
El texto, aquí está… contacto. Muy bien. Pegar… le damos a centrar… vale. Uy, esto está más grande, vamos a ponerlo
más grande, esto está estilo H1, y además está bastante exagerado, vamos a darle más
caña a esto. Ahí, contacto, venga un 100%.
Un 100, genial. Eh… una imagen de fondo, vamos a estirarlo,
a estirar esto también, por aquí, aunque realmente no hace falta… estilo… clásico,
imagen… buscamos una imagen, ehh… vamos a elegir por ejemplo, ¿os acordáis esa primera
imagen que os enseñé a modificar? ¿Esta de aquí? Vamos a elegir esta, que seguro
que está muy chula. Vale, recordad que hay que elegir la reescalada,
fijaros qué diferencia, de 7 Mb, a 195 Kb, es increíble, lo que se puede reducir la
imagen. Vale, bien, seleccionamos, y… vamos a darle
pues más altura, alto, altura mínima, bajamos… a esto le decimos, a esta imagen vamos a decirle
que esté centro centro, adjunto, ehh, fijo… tamaño abarcar. Vamos a mirar a ver, quizá sea mejor centro
abajo, o abajo centro… abajo centro. Así está mejor. Que se vea más la parte de abajo. Bien, guardar. Y aquí donde pone contacto, pues este texto
vamos a ponerlo en blanco, texto blanco, vale, con la sombra esta que me gusta mucho, sombra
blanca, guardar. Muy bien. Aquí no recuerdo si había algún tipo de
animación, vamos a mirar a ver… al entrar… sí, esta animación como que baja. Recordad cómo se pone la animación, seleccionamos,
uy, seleccionamos el elemento, vamos a avanzado, animación de entrada… fade in down. Que
es este efecto en concreto. Vale, muy bien. ¿Cómo creamos esto de aquí? Bien, comunicaros
que esto es una sección con una columna en el medio al cual se le ha añadido un padding,
o un relleno. Superior, e inferior.
Ahora os voy a enseñar cómo hacerlo, vale. Vale, muy bien, creamos la sección, decimos
que es una sección de una columna, vale. Con un video de fondo. Vale, ¿cómo hacemos esto? Vamos aquí, estilo,
tipo de fondo, vídeo. ¿Qué vídeo? Pues aquí tengo la nota, vamos
a buscar. Ese video, ya os digo, os lo voy a dejar aquí
en la página web nuestra, donde pone recursos, os dejaré el enlace a estos videos por si
queréis usar esos. Son videos que están en Youtube. Voy a desactivar de momento chicos, lo que
es el fondo de video, de momento, lo voy a desactivar para que no me vaya lento. Vamos a meterle texto, contacta con nosotros…
centramos… ya. Vale, ahora tenemos que definir lo de contacta
con nosotros, la raya esta de aquí… del medio, el separador, vale.
Eee… vamos a darle anchura, menos anchura, la ponemos al centro… vale, así está bien.
Así está bien. Vale, muy bien ponemos este texto, no seas
tímido, envíanos un mensaje, vale. Muy bien, texto por aquí… bajamos para
aquí, centramos… el texto era este el que queríamos poner, no seas tímido. Esto si no recuerdo mal, creo que eran 3 columnas,
eran 3 columnas, sí, dentro… ponemos aquí, 3 columnitas… hay no, esta columna… aquí
está… genial. Y ahora, para poner esto de aquí, esto es
un elemento nuevo, bueno nuevo, es un elemento nuevo para vosotros. Un elemento de lista de iconos. Venimos por aquí, lo ponemos, y nos sale,
a ver… este lo quitamos, este lo quitamos… a ver por qué no se actualiza…
Vuelvo a ponerlo… ah… ahí está, no sé por qué no se actualizaba. Bien. Aquí, pues le ponemos pues nada, la
casita esta. La casa… Pues como… Creo que es House. house, buah, hou… Home, en lugar de house
es home. Vale, bien, Home, pues pongo… esta dirección,
y el color, pues le cambio el color del icono, le ponemos el azulito que decimos, vamos a
ponerlo un poquito más grande… ¿cuánto? Pues 20 por ejemplo. El color del texto, está bien así, vamos
a darle un poquito al texto otro color… más oscurito… vale. Aquí vamos a decirle que esté aquí en el
centro, y este de aquí, pues lo que vamos a hacer es repe… bueno lo vamos a repetir. Para no tener que estar creándolo una y otra
vez, lo repetimos, este de aquí también, a ver… este… lo repetimos, y este pone,
pues el correo electrónico. info, abrimos por aquí… mail… envelope…
creo que era envelope me parece, envelope, sí, envelope, y aquí, ¿qué habíamos puesto?
Pues un número de teléfono, vale, número de teléfono… y ponemos phone. Vale, cambiamos
los colores, aquí, este era un naranja Bueno, el color que os guste.
Aquí, y esto era un verde, icono… color… verde. Vale.
¿Cómo ponemos este formulario? Pues ahora os enseño, vamos a guardar… bien.
Para poner el formulario, como os decía, WordPress de por sí, el no trae un formulario
de contacto, hay que instalarlo a través de un plugin. El plugin que yo os recomiendo
que utilicéis es el que tenemos aquí en la página web, vamos a ver… volvemos a
entrar, a ver, recordad: tutoriales, crea la web de tu negocio, venimos al apartado
de recursos, aquí abajo, el plugin se llama pirate forms.
Hay muchos plugin para poner formularios de contacto, pero el que vamos a usar aquí es
este, el que a mí me gusta, podéis elegir el que queráis, pero este es el que funciona
bien con esta plantilla. Bien. Vamos al plugin, añadir nuevo, buscamos,
el que se llama Pirate forms. Bien. es este que pone Contact form and SMTP
plugin, pues nada este de aquí. Le damos a instalar, tiene 200.000 instalaciones,
ahora mismo en estos momento. Bien. Instalamos, activamos. Bien, y ahora para acceder a él, lo que tenemos
que hacer es venir aquí donde pone Pirate Forms, y nos sale esto. ¿Veis este código que sale aquí? Usa el
atajo… ¿y sale aquí un código? Seleccionamos este código. Bien. Y ahora, darle a copiar… bien, vamos
otra vez a todas las páginas, buscamos la página de contacto, editar con Elementor,
bien, y aquí, tenemos que ingresar el siguiente código. ¿Cómo se hace esto? Bien, veis aquí que
pone short code? Este de aquí, pinchamos, y arrastramos aquí, y ponemos el código. ¿Lo veis? aplicar. Ya tenemos el formulario, ¿lo veis?, sale
así un poco borroso, pero ya está puesto ahí. Muy bien, fijaros que voy a entrar en la página
de muestra. Para que veáis lo que hemos hecho. Vale, aún no nos sale, a ver por qué no
nos sale… aquí está, ¿lo veis? Aún nos queda por poner ciertos parámetros,
separarlo aquí un poquito, eh, poner el fondo, etc, pero ya estamos avanzando, ya nos sale
el formulario de contacto. Aún no funciona porque hay que configurar
ciertos parámetros pero ya casi está. Bien.
Vamos a ver. Lo primero vamos a darle un poquito de seraración,
esto está demasiado cerca. Vamos a decirle aquí, pues decimos, pinchamos
aquí… le decimos: Oye, le decimos: Oye… Eso que acabo de hacer no hacía falta. Le damos a avanzado, donde pone margen vamos
a darle un margen pues de… vamos a darle… pues no sé… ¿cuánto consideráis… ¿20?
El 20 me gusta. Ponemos el 20, genial. Ya está un poquito separado, muy bien. Ahora sí, ahora vamos a poner lo que es el
fondo de la sección, venimos aquí, o bueno, aún no, mejor no. Vamos a darle un poquito, veis que esto está
justo pegado aquí arriba, vamos a darle algo de separación.
Esta columna la seleccionamos: avanzado, donde pone relleno de arriba, no, relleno no, vamos
a darle sin relleno. Un 0, vamos a darle margen de arriba: 50.
Vale. Margen de abajo: 50. Muy bien. Vamos a venir aquí a donde pone estilo. No, perdón, vamos a la sección, estilo,
tipo de fondo, video de fondo, y activamos el fondo que decíamos. ¿Lo veis?
Ahora sí que aparece. Pero esto está demasiado cerca de arriba,
para darle un poquillo de margen, a lo de contacta con nosotros, pues seleccionamos
la columna, avanzado, y en relleno, en la parte de arriba, le decimos pues… 20. O 20 no, 50 por ejemplo. 50… margen de abajo, vamos a darle también
50, o 50 quizá sea mucho. 20… eso lo consideráis vosotros, ya vais
mirando. Bien, y en los laterales, pues podemos darle,
20… 20… o 50, 50. Eso ya lo vais maquetando, según más os
guste a vosotros. A esta columna, también quiero darle un efecto
de sombra, respecto a lo que son las nubes. Para esto, venís aquí a estilo, mm, vamos
a ver, ¿este dónde era? Era en borde, sino recuerdo mal, aquí. Seleccionar donde pone borde, sombra de caja,
y se crea este pequeño borde que veis aquí. Estos parámetros los podéis cambiar, el
borroso este lo podéis poner por ejemplo, eh… más borroso… yo lo voy a dejar por
ejemplo en 50. Que queda… me gusta cómo queda en 50. Bien, queda así como un efecto como de relieve,
respecto al fondo. Y además, lo que voy ha hacer es que, al
color de fondo, que decimos que es blanco, le vamos a dar un poquito de transparencia,
para que se vea el interior, ¿lo veis? ¿Veis que ahora se ve? Es un poquito de transparencia.
Aquí, la que consideréis vosotros. Queda así un diseño mucho más bonito. ¿Lo veis? Ya está cogiendo forma. ¿Veis el efecto que os decía del borde?
Bien, genial. Pues ahora, esta separación que hay aquí,
la podéis aumentar, yo por ejemplo me parece que le había puesto 50, ó 100, no lo sé
exactamente, voy a comprobar, voy a cerrar todo esto… para que no se ponga más lento…
Vale… esto de aquí lo cierro, vale. Y ahora, voy a darle más separación, esta
columna hay que separarla un poco más de arriba. Podemos darle 80, 80, ¿os parece bien 80?
¿o 50 está bien?. Nada, vamos a dejar 50, 50 está bien, o 70…
60, 60 arriba… ¿60 abajo…? genial, 60 abajo. Eso es ir maquetándolo, y poniéndolo como
mejor os guste. Aquí no, aquí no hay un ciencia cierta. Vale, vamos a mirar. ¿Qué sucede? Aquí va a haber un problema,
cuando se está cargando un vídeo de fondo, los móviles, los teléfonos móviles, o las
tablets, no reproducen este video de fondo, y hay que mostrar una imagen alternativa. Aquí donde pone fondo alternativo, seleccionamos
una imagen, y podemos elegir esta misma de antes. Si os gusta, seleccionamos aquí… esa será
la imagen que se verá cuando no se pueda ver este video, es decir, en los teléfonos
móviles. Le damos a guardar… reducimos…, bueno
esto no, no le hagáis caso, que se verá bien.
Bien. Perfecto, ya está diseñada lo que es la
parte de, contacto. Contacta con nosotros. Ahora, lo que tenemos que hacer es que este
formulario funcione, es decir, que cuando la gente escriba aquí, te llegue un correo
electrónico. Para ello tenemos que crear la cuenta de correo
electrónico. Os voy a enseñar cómo crear una cuenta de
correo electrónico corporativa, para vosotros. Bien, voy a cerrar aquí, salimos… y tenemos
que entrar al cPanel. Recordad, tenéis que poner cpanel.demowebparaminegocio.com,
en este caso tendréis que poner la vuestra, con vuestro usuario y contraseña, yo le tengo
puesto en recordar, y tenéis que venir aquí, hay que buscar un apartado que pone correo
electrónico, lo veis, cuentas de correo electrónico, y creáis una cuenta de correo. Yo voy a crear una cuenta de ejemplo. La típica cuenta la de info.
[email protected]…. y aquí saldrá el negocio vuestro. Y contraseña, pues me voy a inventar una
voy a poner… Voxelart-2018. Voxelart-2018 Si se me olvida me la recordáis. Vale, aquí, le dais a crear cuenta, y ya
está creada, ya tenéis vuestra cuenta de [email protected], genial. Aquí, podéis entrar a vuestro correo cuando
queráis escribiendo: webmail.demowebparaminegocio.com y os va a pedir que pongáis la dirección
de correo electrónico para la que queráis entrar y la contraseña, podéis crear tantas
cuentas de correo electrónico como queráis, son ilimitadas. Podéis ponerle, limitarle el espacio, o que
sean ilimitado, yo le había puesto ilimitado me parece sino recuerdo mal. Voy a entrar para que veáis cómo es.
Pongo [email protected], y la contraseña que habíamos puesto, Voxelart-2018.
a ver si funciona. Genial. Nada más que entréis, él os va a dar como
un pequeño tour, no hace falta… esto es la herramienta con la que queráis entrar,
hay 3, a mí me gusta mucho esta, podéis establecerla por defecto si queréis, y entrar
en esta. Y aquí, es donde vais a recibir y a enviar
vuestros correos corporativos de vuestra empresa. Podéis configurar el teléfono móvil, etc. Si queréis configurarlo tan sólo tenéis
que venir aquí, al gestor de cPanel, y le dais aquí, donde pone instalar cliente de
correo electrónico. Tenéis que seguir las instrucciones que aparecen
aquí, y ya está, yo voy a usar estos pasos porque los necesitamos ahora. Bien, habiendo dicho esto, y habiendo creado
las cuentas de correo electrónico, vamos a ver… vamos a venir aquí, y tenemos que
instalar un plugin, para que nos gestione lo que son los correos electrónicos, de manera
segura. Bien, el plugin se instala aquí, dando a
plugins, añadir nuevo, bien, tenéis que entrar a nuestra página web para mirar a
ver cual es el que usamos, recordad, voxelart, tutoriales, vamos a recursos, bien. El plugin se llama así: wp mail smtp. este
plugin va a hacer que los correos se envíen de manera segura, porque hay una forma de
enviarlos que no es segura, pero este es, yo es el que utilizo personalmente en mi página
web. Bien, tenéis que instalar este, el que tiene
700.000 instalaciones que sale aquí como un pájaro o un pollo raro, eh… le dais
a instalar, está creado por la empresa, wpforms. Lo instalamos… y lo activamos. Bien. Vamos a ver… Genial. Ahora para configurarlo, sino recuerdo mal,
esto estaba en ajustes, sí, en ajustes, veis que pone aquí wp mail smtp, pues aquí tenéis
que poner los siguientes datos: Ponéis, la dirección de correo electrónico que habéis
creado antes, en este caso nosotros creamos la de [email protected], pero
la que creéis vosotros es la que tenéis que poner ahí. Aquí donde pone el nombre del remitente pues
ponéis el nombre de tu empresa: Nombre de tu empresa. Bien, donde pone… esta opción la dejáis
marcada así, esto lo dejáis tal cual, aquí donde pone servidor smtp, pues ponéis lo
siguiente: que son los datos que os aparecen aquí, yo lo que pasa que yo os lo estoy dando
ya, ya hechos, estos datos son los que tenéis que poner, pero bueno.
Ponéis aquí: mail.demowebparaminegocio. Donde pone puerto SMTP, es este el que tenéis
que poner, el 465, bien. Donde pone encriptación, pues usamos SSL,
que es la segura, por eso estamos utilizando este plugin. Donde pone identificación sí, utilizar identificación
SMTP, nombre de usuario, recordad que hemos puesto, el usuario, el es correo electrónico
realmente, eh… tenéis que poner en este caso: [email protected]…, bueno eso ya sabéis, [email protected],
y contraseña pues la que hubierais puesto, creo que habíamos puesto Voxelart-2018, habíamos
puesto nosotros. Vale, le doy a guardar cambios. Y ahora vamos a enviar un correo de prueba. Enviar correo de prueba.
Vamos a enviarlo a [email protected]; Creo que está bien, vale. Si os pone esto de bool true, bool true,es
que está bien, vamos a ver sinos llegó el correo electrónico, es un correo electrónico
de prueba, el que nos tiene que llegar. Nada, aquí se está cargando el correo que
no es… vamos a darle a tutoriales, a ver si carga gmail, este es el correo de prueba,
se ha enviado correctamente. Vale, genial, perfecto, eso está funcionando.
Ahora, vamos, ya que tenemos configurado lo que es el gestor de correo, vamos a, a entrar
aquí donde pone pirate forms, y aquí vamos a mirar a ver… estos son los campos que,
que… aparecen aquí… en vuestra página web, vamos a entrar para que veáis, contacto,
bien. Estos campos que pone nombre, correo electrónico,
asunto, mensaje, aquí podéis definir si queréis que sea obligatorio, o no, nombre,
correo electrónico, asunto, mensaje, si queréis que tenga un captcha o que no tenga un captcha.
El captcha es lo de que te entre un robot y te empiecen a mandar mensajes span, eso
se puede configurar. Ya haré un tutorial en el cual os explique
cómo activar el google recapcha. De momento voy a poner que no, para poder
avanzar en el tutorial. Esto podéis cambiarlo aquí donde pone nombre,
correo electrónico, esto lo podéis cambiar… perfectamente, nombre, correo electrónico,
etc, eh… mensajes de alerta, eso son mensajes que aparecen si alguien no escribe bien por
ejemplo una dirección de correo electrónico, o algo… bien, perfecto, vamos a ver continuamos. Esto por un lado ya estaría.
Vamos a enviar un correo de prueba, a ver dónde nos llega, eh… aquí donde pone opciones,
aquí es donde os van a llegar los correos electrónicos. Bien, dirección de correo electrónico que
enviará las notificaciones de contacto. A ver… para usar el na…. aquí tenéis
que poner vuestra dirección. La que hemos creado antes la de info. Eso es para cuando enviéis un correo, pues
desde donde supuestamente se van a enviar. Vale, destinatarios, ¿dónde queréis recibir
los avisos? O bien los podéis recibir en vuestra dirección
de correo empresarial, o sino una dirección de correo electrónico de gmail. Yo lo voy a dejar en la de gmail.
Perfecto. Y este es el mensaje que le aparecerá a la
persona cuando recibáis el correo electrónico. Le va a llegar un mensaje diciendo: Perfecto,
hemos recibido tu mensaje. Yo voy a poner aquí, muchas gracias, hemos
recibido tu mensaje correctamente. Correctamente, bien. Página de envío, esto nada, lo dejamos así…
Vale, vamos a probar entonces el formulario de correo. A ver si funciona, vamos a ver… Juan Bonilla,
correo, pues… vamos a ver, mi correo, vamos a poner: [email protected]… me iba a inventar uno, voxelartstudio.com,
ese es el correo electrónico mío, como cliente, y asunto, pues, correo de prueba. Y aquí, pues este es un mensaje que te envío
desde el formulario de tu web. Enviar.
Gracias, tu mensaje fue enviado con éxito. Aquí, ahora nos debería llegar un mensaje
a nosotros, informando de que alguien nos há, aquí está, aquí está el mensaje que
nos han enviado desde el formulario, el formulario de contacto enviado desde nombre de tu empresa.
Bueno eso fue porque le pusimos nombre de tu empresa, no hagáis caso. Aquí está, Juan Bonilla, correo de prueba,
este es un mensaje que te envío desde el formulario de tu web. Además dice desde qué drección ip, y desde
qué página, desde la página de contacto. Fijaros. Muy bien.
Entonces, el formulario de contacto ya estaría listo. PASO NÚMERO 6: CREAR TIENDA ONLINE. Ahora os voy a expilcar cómo configurar lo
que sería, vamos a mirar, cómo configurar lo que sería la tienda online, permíteme…
vamos a cargar entonces la página de muestra, vamos a ver… la página de muestra estaba
por aquí. Ahora mismo os voy a enseñar cómo crear
una tienda online como esta, para que podáis vender todos los productos vuestros a todo
el mundo. Perfecto. Muy bien chicos, entonces continuamos, ahora
para crear lo que es una preciosa tienda online como esta, para añadirle la posibilidad de
vender productos por todo el mundo desde vuestra página web, simplemente lo que tenemos que
hacer es instalar un plugin que se llama Woocomerce, que es el que le va a dar la posibilidad de
poder vender productos desde vuestra página. Para ello recordar, tenéis que venir aquí
a donde pone plugins, añadir nuevo, recordad el plugin sino sabéis cómo se escribe lo
tengo aquí en la lista de plugin en lo que sería el apartado de recursos. Venimos aquí, en donde pone Woocomerce, lo
seleccionamos, y es este el que tenéis que añadir. Woocomerce. Es un plugin super famoso, veis aquí que
tiene más de 1 millón de instalaciones activas, le damos a instalar, y es lo que se utiliza
para vender desde internet, desde la página web hecha en WordPress. Básicamente es este. Es super popular, es muy intuitivo, y muy
fácil de usar, y ahora os voy a enseñar rápidamente cómo instalarlo. Vamos a esperar a que acabe, es un poquito
pesado, porque trae muchísimos archivos, y le da muchísimas posibilidades a vuestra
página, esperamos a que acabe, y ya veréis qué chulo. Ehhmm… mientras se está instalando, voy
a explicaros un poquito lo que vamos a tratar, básicamente vamos a crear una serie de productos,
que podéis ver que se pueden añadir al carrito, se le pueden añadir comentarios, se pueden
poner estrellas… se pueden poner descuentos… etc. Vamos a ver si ya ha finalizado, aquí, ya
está. Le damos a activar… perfecto. Vamos a ver… y ahora os va a salir un asistente
preguntando cosas, vamos a darle aquí a… aquí tenéis que poner los datos, ¿dónde
está vuestra tienda? Pues ponéis en este caso vuestro país. Yo en mi caso como me encuentro en España,
voy a poner España. Vamos a ver… España… y dentro de lo que
es España, pues me encuentro en una provincia que se llama León. Vamos a buscarlo, León.
La dirección, pues está, por motivos del tutorial pues la voy a inventar… Pero vamos,
podéis poner calle del amor hermoso, ciudad Ponferrada, cp 24400, moneda pues usamos Euros
aquí… ¿qué tipo de productos tienes pensado vender? Tanto productos físicos como digitales. Recoger diagnósticos… esto… no, vamos
a darle… está. Esto de Stripe es para pode hacer pagos con
tarjeta de crédito para que vuestros clientes puedan pagar con tarjeta de crédito. Y esto de Paypal, es para que puedan pagar
con Paypal, claro. Bien, esto es si queremos aceptar pagos sin
conexión, esto, podemos por ejemplo habilitar lo que son pagos por transferencia bancaria,
o contra reembolso, o con cheque… bien. Vamos a darle a continuar, esperamos a que
finalice… Bien, envío. Pues aquí, podemos definir, pues las tarifas,
si va a ser envío gratuito, o con una tarifa fija, pues por ejemplo podemos poner pues
una tarifa de 10€, por ejemplo. Para ubicaciones que no estén dentro de las
zonas habituales, pues que, de 20 por ejemplo para, imaginaros, para envíos internacionales,
pues podemos poner 50€. Bien. Pues en unidades de peso, Kilo y en unidades
de medición, en centimetros, bien. Continuar.
Es un paso a paso simplemente, es bastante fácil de instalar y de utilizar, Woocommerce. ¿Tarifas automáticas desde Woocommerce services
? Esto es algo nuevo, la verdad no tengo yo
mucha información respecto a qué es lo que hace esto, eso es algo que han sacado recientemente,
de momento lo voy a dejar así como viene, tal cual. Conecta tu tienda a Jetpack, esto nada, esto
de momento le voy a decir que no, saltar este paso, listo. Estamos aquí, para ayudarte, esto nada, es
para si queréis que os envíe información, podemos crear nuestros primeros productos,
si ya tienes una tienda importar productos… podemos darle aquí a crear producto, pero
yo os voy a enseñar cómo entrar directamente. Vamos a darle a volver a escritorio, o podéis
darle a crear producto, que es lo mismo, ahora vamos a ir ahí, justo. Vale, os han salido aquí unas nuevas opciones,
una que pone Woocommerce, y otra que pone productos. Para crear los productos, nunca mejor dicho,
pues os sale aquí, productos. Todos los productos. Vale. Aquí es donde creamos los productos. Eehh… en este caso, vamos a darle, crear
tu primer producto. Bien, los productos se crean igual que como
se crean las entradas. O las publicaciones, de hecho, Woocommerce
realmente es como si fuera un blog que se ha adaptado para convertirlo en una tienda
online. Esto no tenéis por qué saberlo pero quiero
decir que es muy parecido, a como se crea una entrada en el blog. Bien, aquí donde pone nombre de producto,
pues yo voy a coger pues la tienda de muestra, a ver, y vamos a empezar.
Pues.. por ejemplo, el nombre del producto, pues apple Airpods voy a poner yo, vamos a
esperar a que cargue… Apple Airpods, para no tener que estar escribiendo y le pongo
el nombre del producto. Vale.
Descripción: Hay 2 tipos de descripción, una corta que es como un resumen, ah, esto
de aquí lo podéis o darle a siguiente, aquí os está enseñando como usar Woocommerce,
yo os voy a enseñar así es que no hace falta que le hagáis caso. Le doy a descartar y ya está, vale. Hay 2 tipos de descripción, la descripción
larga, y la descripción corta. Aquí os explayáis en escribir todo lo que
queráis del producto, todos los detalles pormenorizados, y aquí, donde pone descripción
corta, ponéis un pequeño resumen. Bien. En descripción larga, pues yo me lo voy a
inventar, porque ya sabéis que no me voy a poner ahora a… a eso, voy a coger aquí,
descripción larga, vale, y la voy a pegar aquí. Descripción larga. Vale. Aquí podéis poner imágenes, enlaces,
negritas, párrafos… centrar… ya sabéis igual que si estuvierais en el Microsoft Word.
Vale. Aquí donde pone precio normal, pues ponéis
el precio que tenga vuestro producto. En este caso, este tiene, el precio normal
es 40€. Y reducido, 35.
Ponéis, normal, ehh… ¿cuánto había dicho? 40€ y 35 vale, bien. 40… 35.
Es importantísimo, importantísimo lo repito, que los productos tengan un precio porque
sino va a aparecer como si fuera una entrada del blog. No podéis poner productos sin precio. Si lo ponéis, va a salir mal, se va a publicar
mal. Bien. Aquí donde pone imagen de producto, es la
imagen principal. Decimos, es la imagen principal del producto.
Es como la imagen de portada. Vamos a entrar aquí a las imágenes, yo ya
tengo en tienda, en Airpods, tengo puesta… a ver… Apple…., ¿dónde está? Vale.
Bueno, pues ya no sé ni cual, creo que son estas las que cogí, me parece. Vale. Se sube, está subido, y esa es la imagen
de portada. Vale, pero, aparte de la imagen de portada, yo puedo poner una pequeña galería
de imágenes. Aquí es donde se pondrían las imágenes
adicionales. Donde pone galería del producto. Le doy a añadir, y voy a subir las otras
imágenes. Pues… esta… y esta.
Esta y esta. Las subo las 2. Vale. Y así se va a mostrar la imagen principal,
y esas 2 adicionales. Le doy a añadir a la galería, y aquí puedo
cambiar el orden. Voy a alternarlo, voy a ponerlo aquí, por
ejemplo. Vale genial, le doy a publicar… ah, me falta
la descripción corta, perdón. Ponemos… esa es la descripción corta. Un pequeño resumen de lo que trata vuestro
producto. Vale.
Uy, ¿qué pasa que no se pega? Aquí está. Descripción corta. Vale.
Sino ponéis precio rebajado, pues el precio va a poner como un precio normal, además
podéis establecer horario, inventario, envíos… tiene muchísimas opciones, etiquetas, categorías,
etc. Vale, vamos a ver, esta es la página web
de muestra, vamos a ver si ya aparece, no sé si le he dado a guardar, voy a darle a
actualizar, perfecto. Y veréis que no aparece la tienda. ¿Por qué no sale? Pues porque no la hemos
colocado en el menú. Es normal, sino la hemos puesto aquí no va
a a salir. Vale, vamos a venir aquí ahora, a donde pone,
apariencia, menús, y vamos a decirle que queremos añadir las, las páginas de tienda. Fijaros aquí que aparece donde pone páginas,
las páginas que tenemos. Pues hay que añadir, la que pone tienda,
la que pone carrito, la que pone finalizar compra, y la que pone mi cuenta.
Y le damos a añadir al menú. Y van a salir aquí desperdigadas. Va a salir un menú muy largo. Como no queremos que sea un menú tan largo,
fijaros, voy a guardar para que veáis, como yo no quiero un menú tan largo, esto es horrible,
lo que voy a hacer, es que lo voy a organizar en submenús, bien. ¿Cómo lo organizo? Pues esta la pongo pues
aquí, la voy a poner aquí justo entre contacto y tal… y luego voy a poner mi cuenta dentro
de tienda. Eh… voy a poner luego carrito… Bien, y
luego finalizar compra. A ver… a ver. A veces se queda pegado.
Lo intentáis, ahí está. Tienda, mi cuenta, carrito, y finalizar compra.
Le doy a guardar, y veréis que ahora se crea un submenú. Aquí lo tenemos, con el submenú creado. Tienda, mi cuenta, carrito, finalizar compra,
genial. Voy a darle a tienda, y ahora debería aparecer
mi primer producto. Vale, no sale, ¿por qué no sale? Vamos a
mirar, es raro que no aparezca, con lo que hemos definido ya debería salir. Sino sale, es por algún error, quizá de…
o del navegador, o de la caché… voy a añadir el siguiente producto, y seguimos mirando
a ver, ahora seguro que sacamos por qué no ha funcionado. Vamos a tienda, el Apple Watch, vamos a coger
el Apple Watch, le damos a producto, añadir nuevo producto, Apple Watch, aquí donde pone
descripción corta, ponemos esta descripción… En descripción larga añadimos esta…
Bien… donde pone imagen del producto, buscamos del AppleWatch, establecemos imagen del producto,
ponemos un precio, 430 y 400. Ponemos 430, 400… este no tiene galería. Le damos a publicar… y muy bien, vamos a
ver si ahora se ve. Vamos a darle aquí, y ver visitar tienda,
es muy raro esto. Vamos a crear el siguiente producto, el de
auriculares negros, vamos a ver, le damos a…, vamos a ver, entramos en ellos… auriculares
negros, cojo el título, vamos a productos, añadir nuevo… metemos el nombre, uy. Aquí está. En descripción corta ponemos
esta de aquí, muy bien, ponemos por aquí abajo. En descripción larga, ponemos esta de aquí,
y en precio, ponemos 80… 75, muy bien. 80, 75. Bien, perfecto, en imagen del producto, pues
subimos la imagen, y, decimos que era… ¿dónde está? Vale, a ver si no la incluí. Auriculares
negros… aquí está. Esta es la imagen, ¿a ver cual es la imagen
principal? Bueno como no lo sé ahora mismo, subo las 2. Luego se puede cambiar.
Esta creo que es la imagen principal. Le damos a establecer, y aquí, en galería
del producto, le damos a esta, para que sea una imagen adicional. Ahora, ya está. Recordar que aquí tenéis
para poner categorías, añadir nueva categoría, etiquetas, por ejemplo una etiqueta puede
ser pues productos de color negro, o negro, o una etiqueta puede ser auriculares, o una
categoría puede ser… electrónica. Esto lo podéis organizar, igual que se organizan
lo que son las entradas en el blog. Le damos a publicar, y vamos a ver si ahora
aparece en la tienda. Vamos a tienda, uy, esta no es jeje.
Esa es la web de muestra. Vale, vamos aquí, venimos aquí y le damos a visitar tienda.
Perfecto, sino os aparecen las imágenes en la tienda, o los productos en la tienda, como
me estaba sucediendo a mí antes, es por algo de lo que es la caché. La caché es este plugin que instalamos, si
os acordáis, este que pone wp fastest caché, como a veces él guarda una copia de lo que
es la página web, a veces no actualiza rápidamente. Si os sucede eso que me estaba sucediendo
a mí venís aquí, y le dais a delete caché, y delete caché and minify css, era el motivo
por el cual yo no podía ver los productos que estaba creando.
Ahora ya me salen, por eso. Porque tuve que borrar la caché. Vale, genial, voy a crear un siguiente producto
y ya no voy a crear más. Claro, porque, la mecánica es la misma. Vamos
a ver, voy a crear el siguiente producto, esta es la web de muestra, la cámara Nikon,
bien. Perfecto, vamos a ver… vamos a productos,
añadir nuevo, es este de aquí, cámara Nikon, vale. Cojo el nombre, muy bien, cojo aquí la descripción
corta… la pegamos, aquí abajo, recordar, no sé por qué la ponen abajo, la verdad,
yo creo que la descripción corta debería estar arriba, y la larga debajo pero bueno,
ellos sabrán. Vale, vengo por aquí, pegamos… ponemos
un precio… 726. Este no… este va a ir sin descuento, 726,
bueno sí, 8 con… valía 800, y ahora vale 726. Vale, muy bien. Creo que ya está, la imagen del producto
me queda, la subimos, ¿esto cual era? Cámara… creo que era cámara Nikon me parece, sino
recuerdo mal, cámara Nikon. Vale. Publicar, y ahí tenemos nuestros productos. Ya está. Genial, ahora… vale, ¿qué pasa? Que no
guardamos, no guardé aquí el… esto no llegué a ponerlo… actualizar… aquí lo
tenemos. Están todos de oferta. El que no tenga un descuento, pues no le saldrá
esto de oferta. Genial, aquí se añade al carrito, se puede
ver el carrito, bien, aquí se pueden aplicar cupones, actualizar el carrito, finalizar
la compra… pagar con paypal, etc. Bien. Ahora, voy a volver a entrar a la tienda,
vamos a poner aquí los widgets que había aquí debajo, muy bien, venimos a donde pone
apariencia, widgets, bien… y en la parte inferior, nos quedaba el 3 y el 4 libre, bien. En el 3, yo había puesto sino recuerdo mal,
según la página de muestra, productos vistos recientemente. Vale, pues buscamos aquí. Productos vistos recientemente. Dónde está… aquí, productos vistos recientemente. Este widget lo arrastramos hacia aquí arriba,
vale, esto de números de productos voy a poner 5, porque sino serían muchísimos,
y se extendería pues el pie de página, y ahora también, voy a añadir carrito. ¿Dónde está el carrito? Esto deberían
organizarlo de forma alfabética, bueno creo que organizado de forma alfabética, a ver…
carrito, sí. Vale, lo pongo por aquí, le doy a guardar,
y ahora veréis que va a aparecer. Aquí lo tenemos.
Si empezamos a ver productos, veréis que bueno, esta es la galería, que no os la enseñé
antes, está muy bien, una pasada. Aquí podéis ponerlo a pantalla completa,
minimizarlo, maximizarlo, cerrar, ver la siguiente imagen, la anterior… vale. Voy a salir de aquí, de este producto, voy
a entrar a este. Vengo para aquí, entro a este, vengo para
aquí, entro a este, y ahora esto se va actualizando, productos vistos anteriormente. Son, me muestra los últimos productos que
he estado mirando, que es lo que os decía inicialmente, vale, ahora ¿qué más? Vale, vamos a hacer una compra de muestra
para que veáis. Antes hay que definir aquí unos parámetros,
en lo que es Woocommerce, vamos a ajustes, bien. Y aquí donde pone correos electrónicos,
vamos a decirle que aparezca esta información. Vamos a ver… donde pone nombre de, pues
aquí deberíais poner el nombre de vuestra empresa. En dirección de remitente, pues yo pondria
el correo electrónico de vuestro negocio. Pero no el correo con el que administráis
la página web, sino el correo corporativo. El que hemos creado antes, el de [email protected] Aquí donde pone imagen de cabecera, podéis
poner la dirección a una imagen vuestra. Podéis, aquí podéis poner por ejemplo poner
el logotipo de vuestra empresa, ¿cómo se pone el logotipo de vuestra empresa? Pues
fijaros, venís aquí, hacéis click con el botón derecho, copiar dirección de la imagen.
Lo ponéis aquí, y pegáis esto. Con esto es suficiente, así sale el logotipo de vuestra
empresa. Donde pone texto de pie de página, pues ahí
ponéis pues el nombre de vuestra empresa, o lo que queráis que aparezca en la parte
de abajo. Bien, vamos a darle aquí a guardar, vamos
a darle, donde pone finalizar, perdón, donde pone finalizar compra, vamos a decirle los
métodos de envío que queremos activar. Aquí pone opciones de finalizar compra, transferencia
bancaria, vamos a decirle que transferencia bancaria esté activado. Vamos a…, Guardamos, vamos a decirle también,
que el pago por cheque, pago por cheque no quiero que esté activado, contra reembolso
sí. Habilitar el pago contrareembolso, esto lo
podéis mirar todo… Guardar los cambios, podéis habílitar Paypal, Paypal Express.
El Paypal Epress va mejor que el Paypal normal, es el que viene por defecto, y este de Stripe
es para hacer pagos con tarjeta. Ahora mismo no voy a entrar mucho en detalle
en esto, voy a crear un tutorial especial para vosotros, va a aparecer en la página
web, en la página web nuestra, en la parte de abajo lo voy a incluir, y vosotros podréis
completar lo que es la configuración de Woocommerce para que se puedan hacer pagos con tarjeta,
con Paypal, etc, voy a hacer un tutorial mucho más detallado de todo esto, ya que solamente
Woocommerce de por sí, daría para hacer otro tutorial entero como este que estáis
viendo ahora, es algo muy extenso, y no quiero alargar este tutorial para que dure muchísimo
más. Voy a dejarlo así, Ahora voy a hacer una
compra de muestra para que veáis que funciona, y voy a hacerlo como si fuera el pago con
tarjeta, o sea el pago con transferencia bancaria, perdón. Vamos a ver… voy a hacer como que hago una
compra de esta cámara mismamente, la añado al carrito, bien, voy a ver el carrito, bueno,
estas 2 cosas que ya están aquí, vale, le doy a finalizar la compra, y ya me pide aquí
mis datos. Vale, pues aquí ya me está dando las opciones
de pago, por transferencia bancaria, cheque, contra reembolso, voy a dejar contra reembolso
por ejemplo. Le doy a realizar pedido, y ya está hecho
el pedido, aquí aparece, el pedido es el número 199, contra reembolso, y ese es el
total. A mi correo electrónico me llegará un aviso,
y al vuestro, pues también, vamos a mirar a ver… Entramos aquí al escritorio, a ver
si carga… dentro de Woocommerce vemos que tenemos un pedido, es el 199, de esta persona,
muy bien, y esto es lo que ha pedido esta persona.
En este caso, yo . Así es que ahora ya estaría funcionando,
vamos a mirar a ver si nos quedaba algo pendiente por ahí… en el tutorial que voy a crear
os voy a enseñar también cómo crear cupones, cómo crear categorías, etiquetas, etc, es
un tutorial bastante completo que además os voy a enseñar cómo hacer pagos por Paypal,
con tarjeta de crédito, tenéis que estar atentos, de vez en cuando entrar aquí a lo
que es a la página web de… de nuestra… a nuestra página web, entrar a la parte de
recursos, que lo voy a dejar por aquí abajo, para que podáis ver el tutorial completo,
con Woocommerce. Ahora como veis, esto funciona.
Vamos a ver sinos ha llegado el aviso al correo electrónico, aquí está, este es el aviso
del pedido, ya nos está diciendo, nuevo pedido de un cliente, ¿Qué más nos queda? Me parece
que ya está todo… Vale, muy bien. Ahora, lo último que nos queda, es darle un poquito
de un retoque final, a vuestra página web, un lifting, o como le puedan llamar. Yo, he editado una serie de códigos para
que vuestro formulario tenga un aspecto mucho más bonito, y podáis crear cosas más chulas,
para que por ejemplo este texto esté centrado, esto esté más junto… Y se vea mejor.
Son unos códigos que aparecen aquí en nuestra página web, no tenéis por qué entenderlo,
pero esto va a hacer una serie de… le va a dar una serie de cosas para que vuestra
web se vea más elegante. Lo he creado yo para vosotros, no hace falta
que programéis nada, simplemente venís aquí, y copiáis este código, donde lo tenéis
que pegar es aquí donde pone apariencia, personalizar, recordar, aquí donde pone CSS
adicional, este código, estos códigos que están aquí, yo os recomiendo que lo pongáis,
aquí está explicado en español, lo he escrito yo para vosotros, qué es lo que hace cada
código de esto, y si veis que algo no os interesa lo quitáis. Si os gusta, perfecto, yo estos códigos son
los que he utilizado en la web de muestra. Vamos a ponerlo, lo pegamos aquí, le dais
a publicar, no son imprescindibles para que la página web funcione, pero yo os recomiendo
que lo pongáis. Genial, vamos a comprobar a ver que todo esté
en orden, por aquí, bien, esto está genial. Esto le ha dado forma a… Quizá no notéis
la diferencia, pero esto ha centrado el texto, ha hecho que en la tienda que no sé si os
disteis cuenta, antes lo de ofertas salía en gris, ahora sale en negro, ahora al colocarte
encima del botón de añadir al carrito se pone en negro, hace este efecto, está muy
chulo, son algunas que están muy interesantes que yo la he hecho para vosotros. PASO NÚMERO 7, OPTIMIZAR WEB PARA DISPOSITIVOS
MÓVILES. Vale, ahora , solamente nos queda una última
cosa, que es hacer que vuestra página web se vea bien en los dispositivos móviles,
y ya con esto ya acabamos el tutorial por hoy. Vamos a comprobarlo, os voy a explicar en
la página de inicio cómo se realiaría, voy a cerrar todo esto para que funcione más
rápido, vamos a ver… cerramos por aquí, vamos a entrar por ejemplo a la página de
inicio. De esta manera, como os voy a enseñar ahora,
es como tenéis que hacerlo para que vuestra página web se vea bien en los móviles, tablets,
y en ordenadores. Bien. Ahora está cargando… Perfecto. Esta es la página de inicio, como sabéis,
muy bien, ahora esto es como se vería vuestra página en un ordenador, en una computadora. Pero, sinos fijamos, aquí, si intentamos
poner esto en un teléfono móvil, aquí hay una opción, ¿veis aquí, que pone modo adaptable?
Pincháis aquí, y os sale cómo se vería en la tableta, o en el móvil. Vamos a darle a móvil para que veáis.
Aquí hay ciertas cosas que están mal. Por ejemplo, ¿veis aquí que pone diseño,
que está alineado a la derecha? Esto no debería estar ahí, debería estar en el centro. Si seguimos bajando, esto debería…, esto
está a la izquierda…, debería estar en el centro. Aquí hay una serie de cosas que están mal.
Bien, Ehhmm, hay cosas que se pueden reparar, y se pueden arreglar. No es que sean muchas, pero esto por ejemplo
está mal alineado, si yoesto si yo veo esto en un teléfono móvil salgo corriendo, me
asusto y no vuelvo a esa página web. Pues esto, para resolverlo, es como voy a
explicar ahora, esto está mal por ejemplo. Perfecto, vamos al principio, vamos a, pinchamos
aquí, bien. Yo os recomiendo que empecéis por el escritorio,
bajéis a tableta, y luego a móvil. Empezamos por donde pone escritorio. Y vamos viendo, en escritorio ya sabemos que
todo se ve correctamente, porque fue como lo diseñamos. Bien, empezamos también donde pone tableta,
perfecto. Veis aquí que esto, que en la tableta pues
se ve bien, aquí de momento no veo ningún error. Por qué elegirnos, está correcto… Esto
está bien… Esto está perfecto… Perfecto… Aquí hay un error, fijaros, este 100 se superpone
en… aquí, en esto, pues cómo podemos arreglarlo? Pues estando esto seleccionado, pues venimos
aquí por ejemplo, donde pone estilo, y donde pone número, en el tamaño del número, pues
esto lo cambiáis, ponéis por ejemplo, así, ahora ya se ve bien. ¿Veis qué fácil?
Recordad, estando esto marcado en tableta, lo hacéis así, perfecto. Por aquí, ¿qué más? Bueno, pues esto está
bien, aquí ya no hay, yo no veo ningún error. Ahora comprobamos que se vea bien en el móvil,
vamos aquí donde pone móvil, y claro se ve horrible, ¿Por qué? Pues ahora lo miramos,
a esto que pone diseño, lo tenemos que llevar aquí, seleccionamos, y lo llevamos al centro,
esto, seleccionamos, y al centro. Esto, al centro. Esto, centro, esto… centro… ¿Por qué elegirnos? A ver… el límite
está en tu imaginación, esto está bien… galería, está bien… la mayoría de las
cosas van a estar bien. Porque está esta página web ya está creada
de esta manera, y la plantilla es ideal para esto, ya lo elige él pero hay ciertas cosas
que no se arreglan solas. Bien, esto por ejemplo está alineado para
un lado, esto para otro, pues nada, esto le decimos: Tú, al centro, a ver, al centro.
Tú… al centro. ¿Veis qué fácil? Esto, al centro, tú…
esto creo que está al centro ya, vale, este de aquí, centro, esto está bien… y esto
guardamos… ya estaría. Vale. Vamos a pasar a la siguiente página, os explico
la próxima y la mecánica es la misma, esto lo tenéis que hacer con todas vuestras páginas
hasta que estén listas para los móviles. No hay más misterio en esto. Bien.
Vamos, salimos a la página por ejemplo, ¿cual era la siguiente? La página me parece que
era la de quienes somos. Vale, quienes somos, le damos a editar con
Elementor, le damos aquí, vamos a tableta, y a ver qué pasa. Aquí se ve bien, aquí se ve bien, se ve
bien, bien, perfecto… perfecto, en la tableta no hay…, en la tablet no hay ningún problema. Vamos a mirar el móvil. Aquí seguro que sí, casi siempre los problemas,
los problemas casi siempre los vais a tener en el móvil. Esto de quienes somos , bueno no está mal,
no pasa nada, esto, pues lo mismo. Pinchamos, centro.
Pinchamos, centro. Esto… Centro.
Tu, al centro. Tu de aquí… al centro. Recordad que esto solamente será cuando estéis
en el móvil, nada más. Bien. Al centro, básicamente cuando estéis haciendo,
preparándola para móviles es entrar, y pinchar, y decirle que al centro. Bien, ahora este de aquí, vale, aquí era,
al centro. Hacemos lo que hace… amamos lo que hacemos,
nuestro equipo… liderazgo, esto está bien, si por el motivo que sea, hay alguna parte
que se ve muy mal en el móvil y no queréis que salga por lo que sea, vamos a ver si queréis
ocultar esta imagen o este elemento que sale aquí, por ejemplo lo de Juan Bonilla, que
no salga en el móvil, venís aquí a avanzado, responsive, ocultar en el móvil. Veréis que no va a salir. Fijaros, le doy aquí, y no sale, ¿dónde
estará Juan Bonilla? No aparece. Ha desaparecido, perfecto. Esto tendréis que hacerlo en cada una de
las páginas, no tiene nada de misterio. Si algo no queréis que aparezca en el móvil,
avanzado, responsive, ocultar. Y ya está, nada más. Que sepáis que ya hemos acabado, hemos finalizado,
quiero daros las felicidades por que habéis llegado hasta el final del tutorial, quiero
daros la más sincera enhorabuena, ya que habéis conseguido algo que muy poca gente
es capaz, habéis hecho vuestra propia página web vosotros mismos, está probado que solamente
una de cada 20 personas que empiecen el curso llegarán hasta el final, hasta aquí, y vosotros
habéis demostrado ser unas personas muy trabajadoras, muy emprendedoras, y que sois muy hábiles
para todo lo que os propongáis, os quiero dar una, la más sincera enhorabuena, me gustaría
ver vuestros proyectos finales cómo han quedado, me gustaría que me pusierais en los comentarios
un enlace a vuestras páginas web, estaré muy orgulloso de vosotros, de verla, quiero,
comprobar a ver si tenéis algún tipo de duda, o consulta, si hay algo que no os funcione,
por favor dejádmelo abajo en los comentarios, y quiero que sepáis además que acabáis
de adquirir una habilidad super valiosa, hoy en día que además nunca va a quedar desfasada
ya que esto del diseño de páginas web está a la orden del día, y te va a abrir muchísimas
puertas en el futuro. Muy bien chicos, hasta aquí el tutorial de
hoy, espero que os haya sido útil y os haya gustado, si es así, aseguraros de darle al
me gusta, para que de esta manera Youtube muestre este vídeo a más gente y podamos
llegar a más personas. Si tienes cualquier duda, consulta o dificultad,
a la hora de hacer el tutorial, ya sabes, me lo puedes dejar aquí abajo en los comentarios.
Y recuerda que si quieres aprender un montón de trucos y técnicas sobre WordPress así
como utilizarlo como un auténtico profesional, asegúrate de suscribirte ahora pinchando
en el botón redondo que aparece en pantalla. Nos vemos en el próximo tutorial…. Hasta pronto !!!

Only registered users can comment.

  1. DALE AL LIKE si aprendiste algo nuevo en este video 🙂
    ▼ IR RÁPIDAMENTE A LOS DIFERENTES APARTADOS ▼
    00:00 – Introducción.
    05:44 – Descargar o Imprimir Lista de Comprobación.

    1- DOMINIO Y ALOJAMIENTO
    11:12 – Contratar Dominio y Alojamiento.
    20:22 – Ver Propagación de las DNS.
    22:27 – Poner cPanel en Español.
    22:52 – Instalar Certificado SSL.

    2- INSTALAR WORDPRESS
    24:06 – Instalar WordPress.
    27:34 – Acceder a WordPress.

    3- INSTALAR Y PERSONALIZAR NUEVO TEMA
    29:53 – Instalar Nuevo Tema.
    31:40 – Personalizar Nuevo Tema.
    39:13 – Descargar y Editar Imágenes de Calidad.
    47:07 – Poner Video en Cabecera de la Web.
    51:11 – Cambiar Tipo de Letra del Tema.
    56:08 – Cambiar Colores del Tema.

    4- INSTALAR PLUGINS.
    58:38 – Instalar Plugins.
    01:04:44 – Quitar texto de "Creado con WordPress".

    5- CREAR APARTADOS DE LA WEB.
    01:11:19 – Crear las Diferentes Páginas de la Web.
    01:14:15 – Crear Menú de la Web.
    01:17:21 – Establecer Página de Inicio y Página de Blog.

    5.1- PÁGINA DE "INICIO"
    01:19:01 – Diseñar PÁGINA DE "INICIO"
    01:40:00 – Crear Efecto Paralax.
    01:47:51 – Crear Galería de Imágenes.
    01:52:16 – Poner Video de Fondo.
    01:58:51 – Crear contador numérico Animado.
    02:03:10 – Poner Carrusel de Imágenes.
    02:06:13 – Poner Testimonios de Clientes.
    02:09:57 – Establecer Fondo Degradado.
    02:14:12 – Poner animación a los Elementos.
    02:17:16 – Crear Ancla a zona de la Web.
    02:27:34 – Poner Widgets en Pie de Página.

    5.2- PÁGINA DE "QUIENES SOMOS"
    02:32:47 – Diseñar PÁGINA DE "QUIENES SOMOS"
    02:45:16 – Crear Barras de Progreso.
    02:54:22 – Sección "Nuestro Equipo".
    02:57:56 – Poner Iconos Redes Sociales.

    5.3- PÁGINA DE "SERVICIOS"
    03:03:40 – Diseñar PÁGINA DE "SERVICIOS"
    03:04:05 – Crear Nueva Página desde una Plantilla.

    5.4- PÁGINA DE "BLOG"
    03:06:02 – Diseñar PÁGINA DE "BLOG"
    03:06:19 – Personalizar Blog.
    03:09:15 – Crear Entrada en el Blog.
    03:12:00 – Generar Textos Automáticamente.
    03:14:01 – Crear Categoría del Blog.
    03:15:22 – Enlaces Permanentes.
    03:17:25 – Crear Entrada Blog desde Plantilla.
    03:23:11 – Poner un Video en el Blog.
    03:21:09 – Blog Estilo Masonry.
    03:26:05 – Widgets de la Barra Lateral.

    5.5 – PÁGINA DE "CONTACTO"
    03:27:40 – Diseñar PÁGINA DE "CONTACTO"
    03:33:21 – Listado de Iconos.
    03:36:47 – Añadir Formulario de Contacto.
    03:43:15 – Formulario Contacto Transparente.
    03:44:59 – Fondo Alternativo a Videos en Móviles.
    03:45:54 – Crear E-Mail Empresarial.
    03:48:55 – Configurar E-Mail en WordPress.
    03:52:48 – Configurar Formulario Contacto.
    03:55:29 – Probar Formulario de Contacto.

    6- CREAR TIENDA ONLINE:
    03:57:02 – Añadir la "TIENDA ONLINE" a la web.
    03:57:40 – Instalar Plugin WooCommerce.
    04:01:55 – Crear Producto.
    04:06:40 – Poner Tienda Online en Menú.
    04:12:36 – Ver Productos en la Tienda Online.
    04:15:54 – Poner Widgets de Tienda Online.
    04:17:46 – Configurar Emails de Tienda Online.
    04:19:07 – Configurar Métodos de Envío.
    04:20:31 – Compra de Prueba.

    7- OPTIMIZAR WEB PARA DISPOSITIVOS MÓVILES:
    04:24:21 – Optimizar Web para Móviles y Tablets.
    04:30:12 – Ocultar Elementos en Móviles y Tablets.
    04:31:03 – ¡¡¡ FELICIDADES !!! Ya eres un Profesional Creando Webs.

  2. No puedo creer que haya encontrado esto como una publicidad en otro video justamente de cómo hacer páginas web. Encontré el mejor tutorial por mucho, ya llevo 10 minutos y estoy impresionadísimo. Seguiré todos tus consejos, les iré contando cómo me va jeje. ¿Si tengo alguna duda puedo preguntarla por acá?

  3. Hola como estas? en el tutorial en sydney no me aparece la imágenes en movimiento con diapositivas, puede ser por que elegi configurar la pagina web con el asistente de word prees? y si es asi, como puedo volver para hacerlo manualmente? gracias

  4. Una pregunta antes de comenzar a ver el vídeo. Hay que pagar algo o tiene un costo? Soy menor de edad, no tengo tarjeta de crédito y dudo que mi madre me deje usar la suya.

  5. Hola como estas?. Quería hacerte una consulta. En que parte de la página web se instala el pixel de facebook y Google Ads? y como sería el procedimiento.?. Muchas Gracias, excelente el tutorial hice la pagina web siguiendo paso a paso el video, tal vez no este muy profesional, pues me costo mucho hacerlo ,(debo editarlo y completar el blog) pues soy principiante y sin ningún tipo de conocimientos, pero GRACIAS A TI , logre hacerlo.. Mi otra duda es que me sale este anuncio en escritorio, que debería hacer?. Gracias nuevamente Juan Bonilla.

    ¡Ya casi hemos migrado a SSL!

    Hay algunas cosas que no se pueden hacer automáticamente. Antes de migrar, por favor, revisa esto:

    Referencias http en tu .css y archivos .js: cambia cualquier http:// a //

    Imágenes, hojas de estilo o scripts de un dominio sin certificado ssl: quítalos o muévelos a tu propio servidor.

    Se recomienda hacer una copia de seguridad de tu sitio antes de activar SSL

    También puedes dejar que el escaneo automático de la versión pro arregle esto por ti, ¡y conseguir soporte premium, mejoras en seguridad con HSTS y más! Echa un vistazo a Really Simple SSL Premium
    .

    ACTIVA SSL

    Puede que tengas que acceder de nuevo.

  6. Una consulta , para los que ya la hayan hecho , cuánto les costó ? con cuánto dinero debo contar ya que recién quiero empezar con mi negocio. gracias por sus respuestas.

  7. soy de Argentina , es decir mis clientes son de aquí entonces qué debería elegir pues todos los lugares que alojarian mis datos son de chicago, londres etc … disculpen no sé mucho necesito una expliacación plizz

  8. Hola, estoy atascada aqui:
    Temporary FTP Hostname: 159.65.87.133

    Temporary Webpage URL: http://159.65.87.133/~amanecer/

    And once your domain has propagated you may use the details below:

    FTP Hostname: amanecersaama.com

    Webpage URL: http://www.amanecersaama.com

    Necesito ayuda, solo puedo entrar en donde pone temporal

  9. cliko donde pone panel login y me sale esto:
    La conexión no es privada

    Es posible que los atacantes estén intentando robar tu información de www.amanecersaama.com (por ejemplo, contraseñas, mensajes o tarjetas de crédito). Más información

    NET::ERR_CERT_COMMON_NAME_INVALID

  10. hola espero y puedas ayudarme, me pudieras instruir en cuanto a como le puedo hacer para vincular un botón hecho en elementor a un subelemento que tengo en mi menu. lo que pasa es que explicas como vincular el botón a una pagina pero no a subelemento que esta dentro de una pagina, de antemano te lo agradecería mucho

  11. ¡Cumpliste! Hice mi sitio y vendí mi primer cuso presencial con éxito… Quiero proponer que nos enseñes a usar el plugin gratuito LearnPress para que podamos hacer cursos online en el sitio que hemos creado con este tutorial. Te escribí a tu email agradeciéndote lo mucho que me ayudaste desde mi cuenta de ru…@ru… com.ar ¡GRACIAS JUAN!

  12. Una consulta estimado, saber si tendre algun tipo de problema mas a delante, debido a que durante la creacion de mi pagina, estuve trabajando en el TEMA HIJO, y no asi en el tema Madre o el principal. gracias saludos

  13. Buenas juan, mil gracias por el mega tutorial que te has currado, mi duda voy a llevar 2 empresas ( 2 peluquerias con nombres diferentes) y (son del mismo dueño) entiendo que la mejor opcion es la de coger ( WordPress hosting BUSINESS) verdad?

  14. Hola buenas tardes voxelartstudio, perdona las molestias, tengo un 2 problemas, 1 las paginas, QUIENES SOMOS, SERVICIOS, BLOG, CONTACTO, niguno se carga, cuando pinchas se ve fondo blanco indicando, NO SE HA ENCONTRADO NADA, he echo de todo siguiendo los comentarios donde a muchos les ha pasado parecido, en escritorio de worpress he ido elementor, ajustes, avanzado, activar, cambio carga de editor, después el WPFC como lo indicas, también con delete cache y después cerrar sesión y reiniciar y le di cargar de nuevo y nada.
    y otro problema al entrar CPANEL me sale inicio de sesión no valido, he puesto correcto el usuario y la contraseña, ya llevo mas de un mes y no puedo terminar la pagina por estos problemas, te dejo mi pagina www.grassurjardines.com, espero que me puedas ayudar, gracias de antemano.

  15. Mas de tres días con tus excelentes tutoriales me ayudaron bastante, tengo una consulta, ya intente de varias formas y no puedo configurar la cara de mi tienda (donde va todos mis productos) pareciera como si estuvieran apretados. te paso el link de la pagina también. espero me puedas colaborar gracias. @t
    para que se vea mucho mas presentable.

  16. Excelente y muy completo video. Pero algo pasa con la plantilla Sydney que mencionas, ya que la activo, pero luego al actualizar, no aparece. Raro, no? Probé con otra plantilla y si se activa.

  17. Hola.Juan… has hecho un trabajo notable… querrìas indicarme como cambio el idioma de mi wordpress para que todo salga en español? gracias

  18. amigo buena tarde, saludos, tienes el tuto de la configuracion de woocommerce o un enlace recomendado para terminar la configuracion 😀 por fa

  19. Quiero felicitarlos por el tutorial, bastante practico y sencillo para aprender, muy poco contenido asi. Apenas haga la pagina de mi empresa les enviare el resultado. Saludos.

  20. Hola, excelente video, como se podría agregar un menú desplegable?, en mi caso tengo varios servicios y quiero que cada uno tenga su propia pestaña, podría hacerse?

  21. Hola Juan estoy viendo tu video y me parece genial te felicito por que esta mas claro que el agua tengo una pregunta tengo mi pagina web el dominio y el hosting son diferente quisiera saber si puedo trabajar con los mismo sin cambiarme de hosting y es con word press que estoy haciendo mi web pero estoy parqueada por eso estoy viendo y analizando tu video esta muy interesante

  22. <a href="https://www.sitiosparanegocios.com?ap_id=NegocioSonline2019" target="_blank" ><img src="https://sitiosparanegocios.com/wp-content/uploads/2018/02/120×600.jpg" alt="Como crear una página web para tu negocio" border="0" /></a>

  23. He creado mi pagina web siguiendo este tutorial por completo, ahora ultimo me ha genera un problema que no se como resolver y es que al hacer un cambio, este no se guarda o no se guarda correctamente. Al cerrar la sesion vuelve a como estaba y si agrege texto nuevo este se va hacia la izquierda y cambia de color.
    Por favor me podrian dar alguna solucion para esto.

  24. Woooow el mejor tutoriaal que he visto, te agradezco mucho, he seguido paso apaso y creaod una exclente pagina WEB!, solo tengo una pregunta por que cuando realizo cambios en el movil se cambia igual en la tablet?

  25. Buenas compañero, tengo una duda:

    A la hora de contratar el dominio en TMD, tengo una opción con Linux y otra con Windows. ¿Cuál recomiendas? La que aparece seleccionada en tu tutorial parece que hace referencia a la Linux… ¡Muchas gracias!

  26. Buenas de nuevo y perdón por las molestias: Resulta que, siguiendo tu tutorial, instalo el tema Sydney, y llego al punto de personalizar, pero el tema no se ve como el tuyo, con la imagen de las manos de mujer de fondo y demás, se ve todo el tema en blanco, como a medio hacer… ¿Solución?

    Gracias de nuevo compañero

  27. Hola buenas noches, he visto varios tutoriales vuestros, y son buenisimos, pero tengo un problemilla, que cuando hago la tienda online, no me sale, hago lo que me dices de borrar cache de "Clearcache", pero ni asi funciona, no se estoy desesperado, espero que me puedas contestar gracias.

  28. Hola Juan, me alegra muchísimo saber que estas en activo, vi una respuesta tuya
    con Los Vicios de Bahgon Hace 5 horas, al fin con tu excelente tutorial pude terminar la página, a falta de subirla a la red, pero me gustaría que antes me des tu comentario, como te comento en el mail, espero tu respuesta para subirla y verla en la red a la brevedad, un abrazo Oscar

  29. Me gustó el vídeo pero quiero saber como editar todo lo demás de woocomerce estuve buscando el vídeo donde decías q lo explicaría más detallado puedes ayudarme

  30. hola que tal, al agregar siguenos en facebook , no sale la imagen de la pagina. tengo otras inquietudes que no quisiera ser publicas porque en general el tutorial esta muy bueno.

  31. Hola, muy buen video. Pero me ha surgido una duda. Cuando coloco los iconos se visualizan perfectamentre en la página en la que estoy esditando, pero cuando me meto desde cualquier otro ordenador aparecen desplazados a la izqierda y algunas imágenes no se muestran. ¿A qué podría ser debido? Gracias.

  32. Hola amigo.
    Antes que nada, muchas gracias por tu grandiosa ayuda a nosotros las miles de personas que hemos visto este video, ya que en lo personal he aprendido muchísimo: pero te comento que tengo un problema y no se si puedes ayudarme.
    Solamente quisiera cambiar el color del menú y del submenú para la versión de tableta y móvil, ya que este me aparece en color negro por defecto.
    De antemano te agradezco tu ayuda.

  33. Gracias excelente curso!! Aquí el resultado, un saludo!!

    https://iddesignarchitecture.com/

  34. Felicitaciones por su vídeo, le escribí un correo para hacer unas consultas, tengo 2 preguntas, en Widgets no me aparece el Facebook, realice todos los pasos y nada, y la otra pregunta, como puedo cambiar de idioma, que plugins recomiendas.

  35. Hola buenas tardes, e instalado el plugins WP Mail SMTP, el cual se instalo y activo correctamente pero al momento de digitar la informacion me pide que debo instalar otro plugins WPForms, por que el primero caducara en 6 meses y no me permite realizar todo lo que muestras en el video, espero tu respuesta…gracias

  36. hola voxelart muy bien video
    ya estoy en el ultimo punto para terminar mi pagina web y me doy cuenta que las 3 barras de busqueda no estan
    si me puedes ayudar a como activarlas por favor ( las que aparecen para ver el menu en los moviles y tablets)

  37. Sólo quiero decir que te felicito mucho por este vídeo, está increible, la verdad se nota el empeño que le pusiste, (con nota de comprobación y todo) Tienes un gran talento para enseñar, te mando un abrazo desde México, muchas gracias por este tutorial tan bueno!

  38. Hola, muy buen tutorial, felicitaciones, tengo una pregunta, ¿Cómo puedo corregir el problema de que la pagina no se visualiza bien en Firefox? en los demás navegadores funciona perfecto. Gracias

  39. Hola amigos Saludos desde Guatemala
    Un perfecto tutorial.

    Solo tengo un pequeño problema, serias tan amable de apoyarme.
    Ya tengo la pagina terminada pero a la hora que entro a una computadora diferente sale diferente a como lo edite. Los colores me lo puso en blanco y negro. No es como la edite y ya actualice todas las paginas. No se que pasa en serio.
    Gracias amigo.

  40. Estoy muy agradecido por el tutorial, es muy didáctico. Además me gustaría que me orientes en como insertar o que plugin utilizar, que tenga la función de multiplicar el valor de un cuadrante como algunas paginas de cambio. Ejemplo: https://kambista.com/

  41. Excelente amigo ! Eres el mejor de los mejores ! Audio claro voz clara ! Al grano y eres un maestro ! gracias.. Estoy aprendiendo contigo y lo RECOMIENDO AMIGOS !!! Saludos desde Bucaramanga Colombia .Mil Gracias

  42. Pensaba que no iba a ser capaz de crear mi propia página web y SÍ, si que lo he sido.
    GRACIAS, GRACIAS, GRACIAS.
    Después de un mes ( solo fines de semana y a horas sueltas ) por falta de tiempo, he conseguido llegar al final del tutorial.
    Soy consciente de que no es perfecta, de que tiene fallos pero poco a poco la iré perfeccionando. Volveré a ver este vídeo tantas veces como sea necesario para ello.
    Aquí te la dejo.
    https://milyunaespecias.com.
    Tu generosidad no tiene precio.

  43. Hola, muy buen video y muchas GRACIAS por tu ayuda. Pero me ha surgido una duda. Cuando coloco los iconos se visualizan perfectamentre en la página en la que estoy esditando, pero cuando me meto desde cualquier otro ordenador aparecen desplazados a la izqierda y algunas imágenes no se muestran. ¿A qué podría ser debido? Gracias.

  44. Hola amigo, pude crear mi página web gracias a su tutorial; pero tengo un problema (en las tablet y celulares si se ve bien, en las pc algunos fondos no se ven y algunos titulos salen de otro color) .. cuando estoy editando pongo visualizar en mdo PC y se ve bien. El problema es cuando entro en una pc . Me ayudaría por
    favor?

  45. Hola Juan he seguido todo tu curso… ya tengo mi pagina lista en un 90% desde el hosting que recomiendas… pero tengo un problema.. ojala puedas ayudarme… cuando se entra desde una pc a mi pagina todo ok… pero cuando se entra desde un celular la pagina se ve desordenanda especialmente en los textos y no hay el menu… cuando se entra por tablet se ve ordenada pero tampoco hay menu… Espero que me puedas ayudar en solucionar este problema… gracias de antemano.

  46. hola amigo ..excelente tu video
    tengo una duda
    en cualquier programa de creación de paginas web
    es fijamente pagar pagar una cuota?

  47. Hola,lo que pasa es que cuando quiero poner mi dirección de facebook en la página me dice que hay un error, por favor ayudame a solucionarlo

  48. Hola que tal, antes que nada felicitaciones por tu vídeo, solo tengo un pequeño inconveniente en cuanto a los temas de wordpress, y es que no me cargan como tal las plantillas es decir que los sliders no cargan y ciertas características, me podrías ayudar por favor, muchas gracias.

  49. Hola me encantó el vídeo me sirvió mucho gracias puedes hacer un vídeo como crear un aplicación para grabar la pantalla de Blackberry curve 8520 porfavor

  50. ayudaaaa no puedo acceder al panel de control por medio del link que me mandaron los de tmdhosting se queda cargando tampoco puedo acceder a mi sitio web… y cuando le pongo scalonedesign.com/wp-admin n encuentra la pagina tampoco!

  51. muy buenas , felicitarte por los videos, ha habido una nueva actualización de sydney, por lo tando el método que se ha aplico, ya no brinda el cambio, que se espera, si por favor, podeis dejarme un enlace si existe un método actualizado para este tema. de antemano, cordial Saludo.

  52. hola voxelar que tal, queria saber como poder dar de baja el sitio web, es decir cancelar mis suscripción ya que no tengo ni idea… me ayudarias un monton gracias.

  53. Genial.. Les tengo una solución para los que no tienen tiempo para crear una web. Voy a crear tu pagina web gratis en wordpress, solo pagas el hosting por afiliado. incluye ssl, correo corporativo. Mas información [email protected]@t

  54. Buen dia.
    le agradezco por este gran tutorial me fue de mucha ayuda.

    ya termine la pagina web pero resulta que al hacerlo publico hay muchas cosas que wordpress no guarda como imagenes y algunos diseños. donde modifico y hago los diseños esta bien pero no la pagina como tal, que puedo hacer?
    Grcias

  55. Hola buenos dias Voxelartstudio,
    Tengo un problema con cpanel no me deja entrar ami cuenta, me indica (Esta función está deshabilitada) ya he intentado de todas las maneras no consigo solucionar, espero tu ayuda.
    Un saludo.

  56. Hola buenos dias Voxelartstudio, comentarte de nuevo mi problema, al administrador puedo entrar y verla la web, esta funcionado todo bien, el problema está en la parte contactos el correo corporativo CPANEL.y la página, seguidamente te pide usuario contraseña ahi me da error, pongo usuario contraseña y me da error, he apagado ya montón de veces el router de la casa sigue igual. Para resolver el problema bien como tu indicas quiero abrir un ticket al soporte técnico me podrias decir concretamente a que pagina tengo que entrar? he intentado o sea no acuerdo como se entraba a la área de clientes.
    Mil gracias un saludo.

  57. Muito bom! Parabéns por compartilhar o seu conhecimento. Me ajudou muito. Inclusive usei algumas das sugestões na minha plataforma on-line. Deus o continue abençoando. Grata.

  58. VERDADERAMENTE FELICITACIONES CREO QUE ES EL MEJOR VIDEO DE YOUTUBE SOBRE COMO CREAR UNA WEB

    ES COMPATIBLE CON MOVILES Y TABLETS?

  59. Felicitaciones, genial su tutorial y la manera como explicas paso a paso facilita mucho la curva de aprendizaje, quiero hacerle una consulta : como puedo agregar paginas en HTML y PHP a mi sitio construido con WordPress?? es decir como puedo integrar algo que he construido aparte a mi sitio web en WP. Gracias por su ayuda

  60. Como puedo aumentar las dispositivas en el tema Sidney, es decir necesito mas de cinco diapositivas, necesito como mínimo 10.

  61. hola amigo, yo no tengo tu tema, sino uno premium, pero como tenia mucho contenido, comencé a eliminar los menus que ya traía para empezar a personalizar los mios siguiendo la base de tu buen video.. El problema es que nosé porqué al eliminar esos menus , se eliminó también un banner en movimeinto que traia muy lindo.. nosé como recuperarlo nuevamente ya que en apariencia no sale nada detallado como el tema gratis que usas….
    ¿Hay una manera de restaurar los menus? porque en opciones de pantalla no me figura la opción revisar.. si sabes te pasaste.. Muchas gracias.

  62. Una consulta, al actualizar el thema sydney el loco me queda en una franja negra arriba de las diapositivas no queda como el tutorial transparente, como lo soluciono. Gracias.

  63. una pregunta
    yo segui todos los pasos que se describen en el video
    pero a la hora de abrir la pagina en otro computador, no sale como lo diseñe
    despues habro la pagina para diseñar y a la vez la pagina web, ahi si se acomoda
    pero solo al abrir las dos juntas

  64. HOLA. PRIMERO QUE NADA QUIERO QGRADECERTE POR TU VIDEO HE VISTO MUCHISIMOS Y CREEME ES EL MAS COMPLETO Y FACIL. HE SEGUIDO TODOS TUS PASOS TAL CUAL LO INDICAS PERO EL PLUGING ELEMENTOR NO ME PERMITE INCORPORAR ELEMENTOS, A LA HORA DE ARRASTRARLOS A LA CELDA ME APARECEN COMO BLOQUEADOS CON UN CIRCULO ROJO Y NO ENTIENDO POR QUE SI LO INSTALE CORRECTAMENTE, LO HE REVISADO MUCHISIMO. APARTE DE ESO QUISE DESINSTALARLO Y VOLVERLO A INSTALAR Y NO SE DESINSTALA DE NINGUNA FORMA Y POR ULTIMO LO HE ESTADO EDITANDO POR MEDIO DE LOS BLOQUES PERO EN ALGUNOS PASADO EL RATO LOS QUITA DE LA PAGINA DE LOS CLIENTES PERO EN LA PAGUINA DE ADMIN SIGUEN. ME PODRIAS AYUDAR.

  65. hermano al instalar el lets encrypt ssl me da error hay que tener una direccion ip dedicada para esto

  66. hermano una pregunta que te quiero hacer porque en mi navegador chrome me carga bien la pagina pero en otras maquinas la pagina me carga pero las cosas desorganizadas no como en el original

  67. Hola estimado.
    He comprado el dominio en nicchile.cl por mi localización . quisiera solo alojar el hosting en la pagina recomendada. como es posible?

  68. Buenas tardes , he seguido todos los pasos pero Sydney no me cargo , traté con otro tema y no los carga o no puedo cambiar algunas fotos , que hago , ayuda porfis

  69. Hola, muchas gracias por tu tutoríal muy bueno, deseo preguntarte si hay forma de cambiar el color de fondo negro que aparece hasta arriba donde está el menú y el logotipo. Saludos y nuevamente muchas gracias

  70. hola tengo un problema, cuando abro mi pagian en dispositivos moviles, se demora una eternidad en cargar que debo hacer amigo como me puedes ayudar'

  71. Hola !he estado siguiendo al pie de la letra el video , a la hora de configurar los correos , y dirigirme a cpanel no me permite ingresar y estoy poniendo el usuario y contraseña que me enviaron por correo , además ya no puedo ni ver el sitio ,ni editarlo !!!! Pensé que era problemas de mi red pero desde ningún equipo puedo verlo . Que es lo qué pasa ? Por fis ayuda !!!

  72. Hola, una cosita al ingresar el dominio me aparece "El dominio que ingresaste no es válido. Ingrese solamente la parte después de la www. e incluir el TLD" cambio el nombre y me sale lo mismo. Como hago en este caso?

  73. Muchas gracias por este excelente vídeo. He creado mi sitio web y estoy muy satisfecho con el resultado final. Excelente tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *