Chola soy dani y en este vídeo tutorial
te explicaré cómo crear tu primera
página web paso a paso sin ningún tipo
de conocimientos sobre programación y en
apenas tres horas si como lo oyes para
crear tu primera página web no necesita
amplios conocimientos sobre informática
y simplemente Con conocimientos básicos
será más que suficiente
lo primero que Necesitaremos será un
hosting o un dominio y después en un
solo clic instalaremos wordpress luego
podrás elegir entre más de 1.880
plantillas 112 conjunto de diseño y 580
secciones cuánta plantilla ha sido
creada por diseñadores web profesionales
y nosotros podemos personalizarla como
queramos seguro que encuentras una
plantilla que se adapte a tu idea de
página web y además lo bueno de estas
plantillas que son adaptables tanto al
formato tableta como al formato
smartphone importar estas plantillas
realmente sencillo y en tan sólo dos
clics podrás hacerlo una vez las
tengamos podremos darle nuestro toque
personal
podrás cambiar la tipografía el tamaño
del texto añadir animación menú vídeos
también podrás añadir enlaces podrá
juntar y separar columna básicamente
podrás hacer y es hacer lo que quiera
simplemente si sabes copiar y pegar y
pinchar y arrastrar está más que
capacitado para crear tu primera página
web en los próximos minutos de vídeo y
explicaré cómo hacer todo esto y más
osea que si está listo vamos a comenzar
seguramente te estés preguntando cómo
puedes crear una página web sin
programación o codificación la respuesta
mágica es wordpress quizás hayas oído
hablar o no de wordpress antes wordpress
es un sistema gestor de contenidos o cms
en sus siglas en inglés
básicamente wordpress es una potente
plataforma que nos permite personalizar
y editar nuestro sitio web usando una
serie de temáticas y configuradores
puedes crear virtualmente cualquier
página web que te imagines sin ningún
tipo de conocimiento sobre programación
wordpress hace que crear tu página web
sea muy fácil e incluso divertido un
dato curioso es que el 30% de las
páginas web existentes en internet han
sido creadas gracias a wordpress algunas
de las empresas o personas que utilizan
wordpress en sus sitios web son adriana
grande usain bolt snoop dogg o el
mismísimo new york times' lo mejor de
todo es que wordpress es completamente
gratis ya que se trata de un software
abierto para todo el mundo
si quieres ahorrar miles de euros o
dólares en contratar a un desarrollador
de páginas webs
este vídeo donde te enseñaré todo paso a
paso si tú estás listo yo estoy listo
allá vamos ahora que estamos preparados
para empezar este será nuestro plan a
seguir
necesitamos un dominio url básicamente
este será el nombre de nuestra página
web
por ejemplo el dominio de facebook en
facebook.com el dominio de google es
google.com y el dominio de mi página web
es actual site punto es conseguir un
dominio es bastante asequible y cuesta
unos 15 dólares anuales la segunda cosa
que necesitaremos es el hosting el
alojamiento web en español es un
servicio que permite que nuestro sitio
web se avistó los sitio web se alojan o
son almacenados en ordenadores
especiales llamados servidores cuando
algún usuario quiera visitar tu web todo
lo que debe hacer es buscar la dirección
de tu dominio url su buscador y su
ordenador entonces se conectará con tu
servidor es decir con tu hosting así que
si no tienes hosting nadie podrá ver o
visitar tu website el hosting también es
bastante barato y suele costar en torno
148 dólares mensuales por último la
tercera cosa que necesitaremos
a wordpress afortunadamente para
nosotros es totalmente gratis
usando wordpress.org es muy importante
que sepáis que hay una diferencia entre
wordpress.org y wordpress.com nosotros
queremos usar wordpress.org ya que es la
versión abierta de este software como
comenté anteriormente la cual nos
permite perfectamente personalizar y
evitar nuestra página web como queramos
wordpress.com es una versión de
wordpress mucho más limitada y por tanto
menos útil y eso es todo con tan solo
estas tres cosas conseguiremos una
página web funcional en muy poco tiempo
y aquí viene lo mejor de todo en el
pasado tenemos que conseguir estos tres
componentes por separado y después
conectarlos entre sí sin embargo ahora
en 2019 o cuando sea ya estés viendo
este vídeo el proceso es mucho más
directo y sencillo todo lo que
necesitamos es el hosting y el resto
automáticamente estará incluido la
verdad es que no podría ser más fácil
por tanto ahora que tenemos claras estas
ideas vamos a adentrarnos en el
verdadero tutorial paso
desde la compra del hosting hasta
instalar wordpress y diseñar nuestro
maravilloso sitio web si necesitáis
ayuda en cualquier paso comentando abajo
cualquier duda a la que sea
intentaré resolver los la con mucho
gusto y ahora vamos a verdaderamente
comenzar nuestro primer paso será clicar
en el primer enlace de la descripción de
este vídeo que nos llevará al artículo y
página de soporte que usaremos junto con
este tutorial para crear nuestro sitio
web aquí estamos de acuerdo vamos ahora
a comprobar si el nombre de nuestra
página web está disponible para ello
vamos a situarnos aquí y por ejemplo ya
buscar el nombre de mi página web
website punto es
como era de esperar website punto es no
está disponible pero no os preocupéis si
a vosotros se sucede esto porque
poniendo un guión por aquí o simplemente
cambiando la extensión por ejemplo a
punto net puede ser que ya esté
disponible vamos a comprobarlo perfecto
haz tu website punto net está disponible
o sea que ya tenemos nombre para nuestra
página web vamos a continuar
el siguiente paso es elegir nuestra
compañía de web hosting no quiero que
esta parte sea muy larga ya ti quizás ya
tengáis un hosting o una compañía en
mente pero sin duda elegir un buen
hosting es fundamental ya que si no
podríais tener ciertos problemas como
por ejemplo servidores lentos poco
tiempo de actividad es decir que nuestro
sitio web no estará disponible o en
línea todo el tiempo por ejemplo tres o
cuatro horas a la semana no estará
disponible nadie podrá visitar lo que
significa que nadie pueda visitarlo pues
que estaremos perdiendo potenciales
ingresos al servicio técnico métodos de
cobro extraños en los que no sabemos ni
cuándo ni por qué los precios varían uso
a nuestro sitio web para colocar
anuncios poca seguridad sus servidores
lo cual podría hacer que nuestra página
web sea hackeada y tampoco ofrecen el
certificado ssl por lo cual google
podría bloquear nuestra página web ya
hablaremos de eso un poco más adelante
yo en los últimos años he probado varias
empresas de hosting y por ahora ha
encontrado una compañía que utilizo en 8
de los 11 trabajos que llevó hacia
adelante se llama site web
si tenéis cualquier otra compañía de
hosting no hay problema simplemente
necesitaréis averiguar cómo instalar
wordpress y podréis seguir viendo este
tutorial sin ningún problema ahora nos
vamos a taiwán vale
como bien por aquí site one es
recomendado por wordpress de hecho vamos
a irnos a wordpress.org y podremos
comprobar que si nos venimos aquí en
hosting
silva aparece como recomendado de
acuerdo o sea que perfecto pero bueno
este vídeo no es una reseña o crítica
sobre site one sino un tutorial sobre
wordpress por lo tanto rápidamente
resumiré sus características más
importantes porque usas site brown
tienen servidores muy rápido y el
servicio al cliente es estupendo siempre
he tenido algún problema me lo han
resuelto en escasos minutos con tan solo
mandarles un mensaje incluso algún
sábado por la noche tiene un tiempo de
actividad genial
esto significa que sus servidores
trabajan el 99,99 por ciento del tiempo
sin problema como podemos ver aquí en
tiempo de actividad otras muchas
compañías rinden muy bien también pero
no quizás al 99,99 por ciento sino a un
99 95 por ciento lo cual parece poco
pero puede marcar la diferencia por otro
lado es side round ofrece una gran
seguridad ya que la empresa tiene un
amplio departamento encargado de
proteger y hacer más seguro los
servidores yo nunca he tenido problemas
con los hackers bueno en definitiva si
queréis aprender más sobre taiwán o
conocer mejor a esta empresa de hosting
simplemente buscando
y veréis miles de reseñas noticias y
características entonces vamos a
recopilar una vez estemos en mi página
web
website en la parte de comienza el lo
más importante será clicar en este botón
que tenemos aquí una vez clicamos en él
aterrizaremos en site brown aquí
podremos ver los distintos planes y
opciones que nos ofrece simon con sus
distintas precios por un lado tenemos
como wic que mi opinión tiene demasiadas
características que probablemente al
principio no necesitemos así que lo
mejor será elegir entre el start up plan
o grove plan la gran diferencia entre
ambos es que el start up tan solo tiene
posibilidad de albergar un sitio web
por otro lado crowley tiene la
posibilidad de alojar varios sitios web
es decir tantos dominios como queramos o
necesitemos
yo personalmente utilizo euro big porque
tengo varias website en site man pero si
no estáis seguros o por ahora tan solo
necesitáis un sitio web lo mejor para
vosotros será el start up plan es cierto
que en el futuro podéis acceder a grow
big go y sin problema o sea que ya os
digo esto no es un problema por ahora
por lo tanto esta decisión dependerá del
número de websites que tengáis en mente
crear ya sea una hoya sean varias yo
para este tutorial elegir el start up
plan
que además ofrece un precio especial a
395 al mes lo cual es bastante barato y
en unos días lo cancelará por cierto es
bueno que sepáis que site web ofrece 30
días de garantía donde si queréis podéis
cancelar vuestra compra y vuestro
hosting bien ahora que conocemos un poco
más sobre cada opción vamos a pinchar en
start up en contratar el paso voy a
cerrar esta ventana que se encuentra
aquí perfecto balear nos toca elegir el
dominio que queramos tenemos dos
opciones o bien registrar un dominio
nuevo o bien si ya tenemos un dominio
deberemos escribirlo y si nos
encontramos en este caso lo que debemos
hacer es conectar el dominio que ya
teníamos con site round en caso de que
no sepáis cómo hacerlo tengo un vídeo
donde explicó cómo hacerlo y podéis
encontrarlo en la parte superior derecha
de este vídeo o bien en mi página web en
la website punto es como hemos
comprobado anteriormente a tu website
punto net será el dominio que utilicemos
para este vídeo
es importante
que elijamos aquí la extensión que
queremos yo recomiendo que utilicéis de
los más populares porque siempre aportan
un poco más de confianza no son más
conocidos y por tanto bueno pues generan
menos rechazo a la gente que visita
nuestro sitio web
hay otros un poco más extrañas y por eso
son más recomendables estos nosotros
como hemos dicho vamos a utilizar punto
net que es uno de los populares
y como dije anteriormente en el primer
paso de este vídeo en caso de que
nuestro sitio web
su nombre no esté disponible pues
podemos introducir un guión cambiar el
nombre hay que ser creativos en esta
parte en caso de que nuestro sitio web
no esté disponible este sí debe de
estarlo así que continuamos
perfecto y ahora vamos a proceder a
completar nuestros datos completamos el
correo electrónico ponemos una
contraseña repetir contraseña todo este
tipo de cositas para crear nuestro
perfil en site ground aparte tendremos
que poner la información del cliente que
puede ser es posible vale que varíe
según en el país en el que nos
encontremos pero debe de ser bastante
similar o sea que no hay que preocuparse
poner nuestra identidad de acuerdo y
llegamos a la información de pago si
queremos pagar con tarjetas no hay
ningún problema vale ya que aquí podemos
rellenar todos los datos de nuestra
tarjeta pero en caso de que queramos
pagar con paypal debemos ponernos en
contacto con site brown y hablar con su
soporte con su ayuda aquí se le puede
clicar en un chat en vivo y podemos
hablar con ellos y rápidamente no se
solucionarán el problema y pronto
podremos pagar con paypal lo siguiente
que debemos revisar es si nuestro plan
está bien seleccionado vale que no nos
equivoquemos que sea el start up plan
vale estar
y luego esto es importante también dónde
va hasta nuestro centro de datos pues
depende del país en el que nos
encontremos
yo en mi caso estoy en españa pero sí
estamos en sudamerica bueno cualquier
otra parte pues elegir el centro de
datos más cercano a nosotros sobre el
periodo en mi caso lo voy a reservar por
un año voy a contratarlo por un año en
caso de encontrar tenemos un mes pues
como expliqué anteriormente zaira nos
ofrece 30 días de garantía
entonces si contratamos un mes durante
esos 30 días pues podemos cancelar
nuestra contratación vale ya seleccionar
12 meses a continuación tenemos los
servicios adicionales y la verdad es que
están bastante bien pero no son del todo
necesario o sea que podemos obviarlo si
en caso de que lo necesite jce pues
podéis clicar aquí y seleccionarlo
confirmamos
las condiciones no queremos recibir
noticias y aplicaríamos en pagar ahora
muy bien ya nuestra cuenta está
creándose y una vez listo clicamos en
proseguir en configurar la cuenta
perfecto
muy bien perfecto veamos la nueva
interfaz de site rumba en caso de que
tengamos alguna duda o que vamos a
aprender un poquito más sobre el cycle
aquí tenemos la posibilidad de coger un
pequeño tour y conocer más sobre el site
no en profundidad pero en caso de que
queramos saltarnos este paso e ir
directos al grano
vamos a aplicar en configurar sitio para
instalar wordpress
muy bien le damos aquí seleccionar crear
un nuevo sitio web que es nuestro caso
tendríamos clicar aquí pero antes de eso
vamos a pasar a terminar porque
necesitamos instalar el ssl certificase
es decir el certificado que nos permite
que google no bloquee nuestra página web
perfecto proseguimos
vamos a aplicar aquí en gestión al sitio
para poder modificar lo que queramos
esperamos a que se cargue y bien nos
encontramos ya
en el tablón principal de site one donde
podremos instalar nuestro certificado
ssl
muy bien vamos ahora a instalar el ssl
certificado para ello clicamos en
seguridad y nos vamos a gestor ssl
a mí por casualidad me aparece
automáticamente instalado pero esto
puede que no suceda a vosotros en ese
caso lo primero que debemos hacer es
seleccionar nuestro dominio yo en mi
caso tan solo tengo una página web
porque elegí el plan más simple y sólo
tengo un dominio entonces elegimos en
nuestro sitio web y lo siguiente que
deberemos hacer será clicar en let's
grip clicamos en obtener y obtendremos
nuestro certificado ssl puede suceder
que al hacerlo seguidamente de haber
contratado el hosting de haberlo
comprado que nos dé error
en ese caso deberemos esperar unas dos o
tres horas y darle ha logado de es decir
salir de nuestra cuenta y volver a
intentar tras esas tres horas y ya
seguramente podamos seguir este
procedimiento y continuar en caso de que
tengamos cualquier tipo de problema
podemos explicar aquí
en ver centro de ayuda
aplicamos en contacta con nosotros y nos
aparecerá una serie de casos en los que
bueno pues si necesitamos ayuda técnica
dependiendo de lo que sea de cuál sea
nuestro problema podemos consultar les a
los técnicos de sayco por ejemplo si
necesitamos ayuda técnica sobre el
dominio clicamos aquí
completamos nuestra solicitud nuestro
problema lo explicamos lo mejor posible
y lo mandamos una vez enviado también
nos ofrecerá la posibilidad de chatear
con ellos en vivo y al momento nos dirán
cuál es la solución a nuestro problema
genial antes de instalar wordpress
debemos hacer una cosita antes vamos a
aplicar de nuevo inseguridad y en forzar
https
vamos a aplicar aquí y activamos el
https pero hacerlo tan sólo cuando
vuestro certificado ssl este activo y
ahora podemos proceder a instalar
wordpress clicando en la parte izquierda
en wordpress ahora instalar y gestionar
seleccionamos wordpress
aquí abajo podemos ver qué dominio
queremos elegir en mi caso como ya ha
comentado antes solo tengo uno decimos a
tu website punto net esto lo dejamos
como está de acuerdo y el lenguaje
elegimos el idioma que queramos en
nuestro caso seguramente será el español
o sea que no lo tocamos esto lo quitamos
vale que no esté marcado porque no lo
necesitaremos y aquí abajo completamos
la información del administrador vale en
el nombre de usuarios recomendaría que
no pusiera a vuestro propio nombre a
vuestros apellidos nada muy obvio
tampoco pongáis admin de acuerdo algo un
poco más complicado y la contraseña
también asegurados de que sea lo
suficientemente segura cuanto más segura
mejor y aquí rellenar cualquier email
que tengáis una vez tengamos estos datos
clicamos en instalar
esta parte podría tomarnos unos minutos
pero no os preocupéis quizás dos o tres
minutos ya que wordpress está instalando
estupendo wordpress ya está instalado si
queremos ir a wordpress debemos clicar
aquí
genial bienvenidos al panel un
escritorio de wordpress de acuerdo puede
ser que os ocurra al igual que con el
certificado ssl en el que tuvimos que
esperar un poco para que estuviera al
cien por cien instalado en ese caso no
os preocupéis esperad de nuevo dos o
tres horitas y podréis acceder a
wordpress sin problema de acuerdo en
caso de que queramos volver a este
escritorio de wordpress que seguramente
cerramos lo único que tenemos que hacer
es escribir en google esto el nombre de
nuestro sitio web barra
wp guión admin barra de acuerdo y
accederemos directamente a nuestro
escritorio de wordpress aunque antes
tendremos que poner nuestros datos para
acceder los cuales rellenamos
anteriormente maravilloso pero sigamos
ahora podemos básicamente cerrar site
one y continuar en wordpress
enhorabuena comencemos en el medio
podréis ver algunas noticias y en el
futuro probablemente alguna que otra
actualización pero realmente no lo vamos
a necesitar o sea que vamos a aplicar
aquí en descartar vamos a minimizar esto
vamos a minimizar esto también esto
también y todo va a quedar mucho más
clarito y ordenado por aquí arriba
tenemos la barra de herramientas que
realmente no la utilizaremos demasiado
tan sólo cuando querramos visitar
nuestro sitio web de acuerdo que podemos
explicar aquí vamos a abrir una nueva
pestaña y vemos nuestro sitio web aquí
llega la parte divertida lo que todos
estábamos esperando la parte en la que
vamos a ser creativos y vamos a diseñar
nuestra página web como queramos si ya
nuestro gusto como podéis ver ahora
nuestra página web la verdad es que no
tiene muy buen aspecto pero por ahora
pronto comenzaremos a trabajar en ella y
editarla como queramos
ahora vamos a volver a nuestro
escritorio
realmente la mayor parte de nuestro
trabajo se centrará en este lado
izquierdo de nuestra pantalla aquí
podremos editar las entradas los medios
nuevas páginas comentarios la apariencia
de nuestro sitio web
los configuradores todo este tipo de
cosas que ahora mismo os parecerá
complicado o demasiado pero realmente ya
veréis lo sencillo que es y lo veremos
todo en profundidad a continuación ahora
vamos a proceder a hacer una serie de
ajustes que todo el mundo que inicia una
página web debería de realizar vamos a
irnos aquí ajustes generales perfecto
aquí podremos cambiar el nombre de
nuestro sitio web es decir su título por
ahora se llama my wordpress pero yo lo
llamaré a tu website por ejemplo y una
breve descripción que puede ser
cómo crear
una página web por ejemplo
bajamos hasta abajo no tocamos nada
y le damos a guardar cambios
perfecto y de aquí pasamos a usuarios y
nos vamos a tu perfil
una vez aquí antes de seguir vamos a
irnos aquí a nuestra página web y como
podéis ver aquí aparece happy ball que
es el nombre de usuario que yo elegía
anteriormente si no queremos que
aparezca este nombre de usuario que no
nos identifica porque no es mi nombre
nos vamos de nuevo aquí a perfil bajamos
hasta abajo y vemos que pone alias el
alias es lo que aparecerá en nuestro
sitio web
yo lo voy a cambiar por danielle
luego clicamos aquí en mostrar este
nombre públicamente daniel y veremos
cómo se actualiza posteriormente en
nuestro sitio web vamos a bajar hasta
abajo y vamos a actualizar el perfil
para guardar los cambios
en este apartado si por casualidad
tuvierais o quisierais podéis cambiar
vuestra contraseña de acuerdo ahora nos
vamos a ajustes y enlaces permanentes
estando aquí vamos a aplicar el nombre
de la entrada que será mejor para
nuestro sitio web y guardamos los
cambios vale
vamos de nuevo a nuestra website y
veremos que tiene un formato blog pero
realmente nosotros no buscamos un
formato de blog sino que buscamos una
página de inicio o una home page como se
diría en inglés para ello vamos a volver
otra vez aquí al escritorio para
modificarlo y después colocarla
y ahora seguimos yéndonos a páginas nos
posicionamos aquí encima nos pasamos a
añadir nueva
y quitamos esto no necesitamos y
añadimos un título yo por ejemplo cómo
es mi página de inicio lo voy a llamar
inicio y para guardar los cambios
clicamos en publicar y de nuevo publicar
perfecto buen trabajo esta es vuestra
primera página ahora simplemente
tendremos que posicionar la o colocarla
como página de inicio para ello nos
vamos a ajustes nos pasamos encima y nos
vamos a lectura
como podemos ver aquí nos indica tus
últimas entradas esto es porque por
ahora se trata de un formato blog pero
como lo queremos cambiar
una homepage clicamos aquí una página
estática pinchamos en portada nos
aparecerá inicio y clicamos el inicio
en caso de que queráis una home page o
portada y aparte un blog lo que deberéis
hacer es añadir una página nueva e iros
a páginas de entrada y elegir las aquí
pero por ahora no voy a hacer eso por
otro lado si nos apareciera la opción
para marcar de una página estáticas
porque probablemente crear seis una
página pero no la pública stage lo cual
es necesario para guardarla y poder
seleccionar esta opción muy bien tras
saber esto bajamos hasta abajo y
guardamos los cambios
vamos a irnos ahora otra vez a nuestro
sitio web y vamos a refrescar y veremos
nuestra home page o nuestra portada aquí
está sigue sin tener muy buen aspecto
pero ya trabajaremos en ello no os
preocupéis perfecto vamos a irnos otra
vez aquí y nos vamos al escritorio
en el siguiente paso lo que haremos será
comenzar con el diseño de nuestra
website para ello vamos a irnos a
apariencia y colocarnos sobre temas
donde instalaremos un tema aquí podemos
ver los temas pre instalados pero
nosotros no vamos a usar estos vamos a
usar uno diferente para ello vamos a
irnos a añadir nuevo
aquí podremos ver decenas de temas
centenares destacados populares
recientes muchos de ellos pero nosotros
vamos a usar uno llamado options wp este
puede ser probablemente uno de los
mejores temas en mi opinión ya que
ofrece la posibilidad de hacer muchos
cambios muchos ajustes y nos permite
grandes posibilidades a la hora de
editar otros no ofrecen esta posibilidad
y sólo un poco más cerrados y ya os digo
son más limitados que usan wp para
continuar siguiendo este tutorial os
recomendaría que os descargadas ausbanc
doubleyou pin de acuerdo
una vez lo busquemos vamos a aplicar en
él y aquí tenemos
wp vamos a aplicar en instalar y ahora
vamos a aplicar en activar
estupendo nuestro tema ya está instalado
con el crearemos nuestra maravillosa
website ahora procederemos a instalar
los plugins o configuradores para que
comprender mejor qué son los plugins
haremos una pequeña analogía los plugins
son como las aplicaciones o las apps de
nuestros teléfonos móviles nuestros
móviles no suelen venir con facebook con
twitter o con instagram son opciones que
estas apps nos ofrecen cuando las
descargamos los plugins son muy
similares en nuestro sitio web no vendrá
con una página de contacto o no vendrá
con la posibilidad de vender productos
todo este tipo de cosas las descargamos
y las desarrollamos gracias a los
plugins a continuación vamos a proceder
a instalar los plugins que queremos y
que nos ayudarán a desarrollar nuestro
sitio web
vamos a aplicar en comenzar a instalar
los planes
ahora vamos a seleccionar elementos y
hoy son extra solo spline que
necesitaremos por ahora
wp forms no lo necesitaremos o sea que
no lo vamos a instalar clicamos aquí
instalar y aplicar de tal forma que se
instalara
es muy importante que instales estos
plugins porque si no no podréis
construir vuestro sitio web genial si
vemos que nos aparece este mensaje no os
preocupéis es normal que hoy sean extra
nos envíe un mensaje de advertencia o
como de error pero no la hagáis caso de
acuerdo seguirá funcionando igualmente
no os preocupéis ahora vamos a ir hacia
el escritorio
fantástico ahora vamos a proceder a
instalar los plugins de forma normal
vale para ello antes nos vamos a ir a
plugins y veremos que tenemos elementos
que lo acabamos de instalar o sean extra
que lo instalamos también hace muy
poquito y esque optimizer que viene
instalado gracias a simon y nos ayuda a
que nuestro sitio web funcione más
rápido y de forma más eficaz para
instalar un nuevo paladín vamos a irnos
a añadir nuevo
y vamos a buscar element elements es un
plugin que nos permitirá añadir
plantillas y diseños predeterminados
como os hemos visto antes en los temas
pues hay una gran variedad de plugins
hay muchos más de acuerdo pero vamos a
proceder a instalar elements y vamos a
buscarlo
muy bien bajamos hasta abajo y veremos
en bateau elements que es el que debemos
instalar este nos ayudará mucho y nos
facilitará a la hora de crear nuestro
sitio web y de diseñarlo vamos a aplicar
en activar
perfecto ya hemos instalado todos los
plugins que necesitábamos ahora vamos a
volver de nuevo al escritorio
nuestro escritorio está un poco
desordenado o sea que vamos a hacer una
pequeña limpieza vamos aquí
minimizamos esto minimizamos esto y
también vamos a cerrar esto a la vez que
minimizamos esto muy bien todo mucho
mejor más ordenado perfecto tras todo
esto vamos a proceder ahora a preparar
nuestro sitio web para trabajar con
elementos pero antes de nada os
explicaré en qué consiste una página web
para ello nos vamos a nuestro sitio web
y os lo explicaré de la siguiente forma
una página web se puede asimilar al
cuerpo humano por un lado tenemos la
cabeza que llamaríamos encabezamiento
más abajo tenemos el cuerpo donde
encontraremos el contenido principal de
nuestra página web y abajo de todo
tenemos los pies en el encabezamiento
podremos poner un menú donde
encontraremos las distintas opciones o
páginas a las que nos lleva nuestra
página web
en el cuerpo como os digo el contenido
principal y abajo del todo en los pies
podemos encontrar información adicional
el copyright y todo este tipo de cosas
que también nos serán muy útiles y que
deberemos de poner el explicaros que
para el encabezamiento para editarlo
vamos a utilizar
josean wp en cambio para el cuerpo y
para los pies utilizaremos elementos por
qué por qué elementos tiene una versión
premium por la cual hay que pagar que
nosotros no vamos a utilizar porque
realmente no es necesario y tan solo nos
permite editar el cuerpo y los pies o
sea que para el encabezamiento o usan wp
y para el cuerpo y los pies elementos
vamos ahora hacia el escritorio
luego nos dirigimos a páginas todas las
páginas
y clicamos en inicio
qué vamos a hacer ahora como podéis ver
aquí pues nuestra página tiene un
aspecto bastante básico aquí tenemos el
título inició una serie de widgets lo
que vamos a hacer ahora nosotros es
quitar todo esto de enmedio dejarlo
mucho más limpio más claro y poder
empezar a trabajar con elementos muy
bien nos encontramos en principal y
vamos a clicar en diseño del contenido
100% ancho completo para ver qué sucede
en nuestra página web vamos a clicar en
actualizar de acuerdo no hace falta que
siempre estéis actualizando esto
simplemente es para que veáis los
cambios que se producen en nuestro sitio
web vamos a refrescar
y veréis que todo el contenido todo el
cuerpo de nuestro sitio web ha
desaparecido estas cosas estos ajustes
tendremos que hacerlos para más adelante
poder trabajar cómodamente con elementos
vamos a bajar un poquito vamos a quitar
el encabezado y vamos a explicar en
deshabilitar y vamos a actualizar de
nuevo para que veáis qué cambios se ha
producido ya os digo no hace falta que
lo hagáis continuamente lo actualizar
veréis que hemos quitado la pequeña
línea que había que activar vale vamos a
proseguir con los ajustes
ahora vamos a título y deshabilitamos
mostrar título de página y actualizamos
veréis qué sucede
refrescamos
y veréis que inicio ha desaparecido ya
os digo esto lo editaremos y
construiremos con elementos que no os
preocupéis lo comprenderéis más adelante
volvemos a editar página
ahora nos vamos al pie
y deshabilitamos aquí y aquí
actualizamos y veréis cómo desaparece la
parte baja
de nuestra website
perfecto volvemos a editar página
estos ajustes son muy importantes y
deberéis hacerlo siempre que creáis una
nueva página
después de haber hecho todos estos
ajustes en nuestra página de inicio de
haber seguido cada modificación vamos a
proceder a editar con elementos va a
llegar el verdadero momento de
creatividad y de diseño que seguramente
todos estabais esperando para ello vamos
a clicar en editar con elementos y se
abrirá el editor de elementos con el que
comenzaremos a trabajar
bienvenidos al editor de elementos aquí
podremos ver cómo se va desarrollando
nuestro sitio web las modificaciones y
cambios que vayamos haciendo y aquí en
nuestro lado izquierdo veremos una serie
de widgets de ajustes que iremos
cambiando a lo largo de este vídeo y que
iremos añadiendo iremos trabajando en
ellos
realmente para conocer elementos lo
mejor es usarlo poco a poco iremos
comprendiendo cómo funciona
yo iré explicando una serie de pasos que
deberéis de seguir y ya veréis lo
intuitivo y lo fácil que puede llegar a
ser antes de que sigamos me gustaría
explicaros en qué se diferencia una
website de una página web realmente
hasta ahora hemos estado hablando
indistintamente de ellas pero cuando nos
referimos a una página web lo que nos
estamos refiriendo es a una su parte oa
una sub página dentro de nuestro sitio
web lo vamos a ver con un ejemplo por
ejemplo si nos vamos a wordpress
veremos que ésta es su home page su
página principal o lo que en nuestro
caso llamamos inicio pero si por ejemplo
publicamos
hosting por ejemplo
veremos una sub página otra página
dentro de el sitio web de wordpress y
clicamos en temas podremos ver otra sub
página de intro del website de wordpress
creo que así habrá quedado todo mucho
más claro y tendremos una idea de lo que
es un sitio web y una página web podemos
continuar muy bien la siguiente parte
para explicaros y que comprendáis qué
son las secciones columnas y widgets voy
a insertar rápidamente una plantilla una
plantilla son modelos predeterminados ya
creados por diseñadores profesionales y
que se pueden insertar fácilmente
clicando aquí
muy bien como podemos ver nuestra
plantilla predeterminada ya está
insertada la vamos a usar para
comprender ya os digo que son las
secciones que son las columnas y qué son
los widgets como podemos ver aquí esto
sería una sección de acuerdo dentro de
cada sección podemos encontrar una
columna por aquí una columna por aquí
otra columna igualmente aquí
esta imagen entera es una sección de
acuerdo y dentro encontramos una columna
dentro de las columnas podemos insertar
imágenes vídeos texto todo lo que se nos
ocurra
creo que así podremos comprender mucho
mejor cómo funciona y cómo se compone
una website usando elementos vamos a
volver atrás para iniciar nuestra página
web totalmente desde cero sin usar de
momento plantillas predeterminadas en el
futuro os enseñaré cómo usar plantillas
predeterminadas y modificarlas a vuestro
antojo para que tengan el aspecto que
vosotros queráis y darle vuestro toque
más personal perfecto vamos a volver
hacia atrás y para ello lo vamos a hacer
aquí así que esto ya lo podéis aprender
y nos podemos volver pintando aquí
de acuerdo volvemos al inicio y vamos a
comenzar a editar nuestra página web
desde cero para aquellas personas que no
quieran utilizar plantilla y quieran
usar todos los recursos que nos ofrece
elementos y poner toda su creatividad e
imaginación en el diseño de su página
web ya digo desde cero totalmente para
que nos vuelvan a aparecer los widgets
en nuestro panel de la izquierda vamos a
aplicar aquí y vuelven a aparecer
estupendo vamos a proceder ahora a
incluir una imagen en el fondo de
nuestro sitio web para ello vamos a
aplicar aquí y veremos una serie de
estructuras donde nos aparecen
estructuras con una columna dos tres
cuatro nosotros de momento vamos a
elegir la más sencilla era de 1 una vez
aquí veremos que hemos añadido una
sección vale con una sola columna y que
nuestro panel de la izquierda ha
cambiado nos aparecen como podemos ver
una serie de ajustes que no teníamos
hasta el momento lo primero que vamos a
modificar es el ancho del contenido
vamos a marcar ancho completo después de
ello vamos a pasar por alto en alto
vamos a darle ajustar a la pantalla para
que nuestra imagen se ajusta a la
pantalla luego vamos a pasar el estilo y
vamos a aplicar en esta brochita de aquí
en clásico y veremos que nos ofrece la
posibilidad de añadir una imagen vamos a
hacer que la imagen aplicamos en subir
archivos seleccionar archivos y yo por
ejemplo en subir esta imagen es uno
abrimos se descarga
y clicamos en insertar medio
una vez insertemos veremos que nuestra
imagen se ha añadido pero como podéis
ver no está muy bien ajustada para ello
vamos a clicar en posición
dentro del centro para llevarla al
centro de nuestra sección y una vez aquí
en tamaño vamos a volver a pinchar en
abarcar para que abarque toda la 7a
y como podemos ver nuestra imagen está
completamente adaptada y añadida en
nuestra website si queréis echarle un
vistazo a vuestra página web y ver cómo
se va desarrollando es buena opción
clicar aquí y retirar el panel y ver
cómo va quedando poco a poco volvemos
aquí
fantástico para guardar vamos a clicar
en actualizar y nuestros cambios
quedarán guardados muy bien y han sido
guardados
volvemos al menú de widgets o menú
principal de nuestro panel y ahora vamos
a proceder a colocar un encabezado o
título para ello lo cogemos pinchamos y
arrastramos hasta la columna en la que
queramos colocar lo soltamos y veréis
cómo se coloca aquí este widget es decir
el título de este encabezado a
continuación para poder editar el título
o bien podemos clicar aquí mismo en el
título y escribir aquí o bien aquí
quizás yo lo recomiendo más porque es
bastante más claro escribir aquí y más
fácil y podemos escribir el título que
queramos algo así como
amamos el surf por ejemplo
como ya hemos podido ver cuando editamos
una columna o widgets podemos ver que se
nos abre un panel distinto a la
izquierda al que teníamos en el siempre
podremos ver tres apartados contenido
estilo y avanzado para casi todas las
secciones el panel es muy similar
yo voy a empezar un poco por contenido
para que veáis qué modificaciones
podemos hacer aquí por ejemplo podemos
cambiar el tamaño si quisiéramos o la
alineación si nos apetece también
ponerlo en el centro vamos a colocarlo
en el centro nuestro título recuerdo
realmente cómo podemos ver contenido nos
ofrece una gran variedad de opciones o
de modificaciones pero en estilo ya
veremos que sí que realmente va a ser
donde más trabajemos y donde más cambios
podamos hacer aquí podemos empezar por
cambiar el color del texto podemos
clicar aquí y veremos qué
nos ofrece varios colores perdidos
terminado podríamos elegir directamente
el blanco o también podemos seleccionar
el color morado y veremos qué tal es el
sabor y toda esta paleta de colores en
la que podemos pinchar arrastrar y
seleccionar vemos cómo va cambiando el
título el color que más queramos yo por
ejemplo voy a seleccionar el blanco en
este caso
aquí a la derecha podemos encontrar la
transparencia si queremos ponerlo más
transparente aunque si lo ponemos del
todo transparente pues no se verá
y aquí arriba podemos encontrar lo que
se llaman los códigos hacks en estos
códigos también tiene un color ya
predeterminado después de copiar y pegar
lo aquí y aparecerá el color que ellos
buscan en concreto en caso de que
queramos salir ya hemos acabado de
elegir nuestro color clicamos en esta
cajita de aquí volvemos a estar fuera a
continuación si queremos modificar el
tipo de letra o un texto nos vamos a
tipografía este realmente sencillo
clicamos en familia' que es fuente hay
una gran variedad de fuentes
yo voy a quedar con por defecto aquí
podemos cambiar el tamaño también es muy
sencillo muy intuitivo yo voy a dejar
por ejemplo en 70 parece bien 71 el peso
es como de gordita queremos nuestra
letra por ejemplo bueno con este tipo de
letra no se aprecia demasiado pero
podemos ver que se pone como en negrita
y para marcar en negrita vamos a dejarlo
así por ejemplo transformación se trata
de si queremos todas las mayúsculas o
minúsculas
el estilo cursiva normal
en cuanto a decoración si queremos
subrayar lo tachar lo poner una línea
por encima y luego la altura de línea
nos sirve para modificar la columna en
la que estamos trabajando con nuestro
widget y luego el espacio de las letras
pues si queremos aumentar el espacio
entre las letras de nuestro título
realmente sencillo
como podemos ver nuestro título
realmente tiene un color blanco sobre un
fondo bastante clarito por lo que vamos
a intentar pronunciar más la sombra
hacerla un poco más oscura para ello
vamos a aplicar aquí y aquí la hacemos
más transparente y lanzamos más oscura
vamos a ponerla al máximo de la
oscuridad y resaltará mucho más nuestro
título para volver atrás clicamos en el
color no olvidéis ahora podemos
modificar como de difuminado queremos
esa sombra veis cómo va cambiando
yo creo que nos interesa un poquito más
compacta o sea que lo vamos a dejar en 9
o 10 por ejemplo y horizontal será desde
qué ángulo se proyecta la sombra y en
qué dirección se proyecta vale a mí me
gusta más pero es que ya poner 0 y
vertical sucede lo mismo donde queremos
que se proyecte nuestra sombra yo creo
que en cero está bastante bien pero si
os gusta otra forma
para cerrar nos vamos aquí está editado
aquí abajo podemos ver una serie de
diseños que si clicamos algunos están
bastante chulos
pero no solamente en ellos a ninguno de
estos vemos que hay una variedad
yo voy a elegir el normal y voy a
proseguir en avanzado de acuerdo en
avanzado tenemos una serie de ajustes
que son un poquito más complejos pero de
momento no vamos a usarlos porque
realmente no nos hacen falta en este
widget solo vamos a usar efectos de
movimiento del que será más interesante
en animación de entrada podremos elegir
un efecto que aparecerá cuando alguien
abra nuestro sitio web por ejemplo vamos
a vernos más
veis
son efectos que están bastante bien le
dan un toque más dinámico a nuestro
sitio web simplemente buscar el que más
os guste yo por ejemplo voy a elegir
este por ejemplo la duración de la
animación como podéis imaginar si
queremos que vaya lento si queremos que
vaya más rápido
y voy a dejar en normal texto que es el
más adecuado y luego el retardo de la
animación es cuando va a aparecer en
cuanto alguien visite nuestra página web
si por ejemplo ponemos 500 tardará 5
segundos entre lo que una persona abre
nuestro sitio web y sigue en ella si por
ejemplo ponemos 300 pues tardará tres
segundos yo lo voy a dejar en cero para
que encuentro habla la página web
aparezca genial como podéis ver hay una
gran variedad de posibilidades y de
cambios que hacer pero realmente yo creo
que estos no van a ser necesarios como
os digo en cada widget se nos abrirá un
gran abanico de oportunidades para
modificar el texto nuestra imagen
vosotros mismos podeis chequear los y
echarles un vistazo son tantos que no
nos daría tiempo en un solo vídeo a
comprobar todas las posibilidades que
elementos nos ofrece poco a poco iremos
descubriendo elementos y conociendo
nuevos cambios y nuevas formas de
edición ahora vamos a proceder a
actualizar para guardar nuestros cambios
y nos vamos a ir al panel principal con
los widgets principales ahora vamos a
añadir un botón
debajo de nuestro título o sea que
pinchamos y arrastramos justo aquí
debajo y se colocará bien aquí lo
tenemos aquí podemos ver que se nos
vuelve a abrir el panel de edición de
este widget
en este botón podemos escribir algo como
aprende más o más o contacta con
nosotros cualquier tipo de mensaje que
se nos ocurra si gritamos en tipo
podremos cambiar pues la forma el color
aquí vamos a cambiar el texto voy a
poner por ejemplo
aprende más
ahora quizás llegue la parte más
importante e interesante de los botones
y es que aquí podemos incluir un link
para que nos lleve al destino que
queramos al clicar este botón
entonces lo primero que debemos hacer es
borrar este hashtag y vemos que nos pone
tu enlace puntocom yo voy a poner por
ejemplo google.com y nos llevaría a
google de este botón en vuestro caso
podéis poner el link que vosotros
queráis una vez colocado nuestro link
podemos clicar en opciones del enlace y
podemos añadir o clicar en abrir una
nueva ventana que yo suelo aplicarlo
porque es bastante más cómodo ahora en
la alineación igual que anteriormente
podemos colocarlo en el centro o en la
derecha yo voy a colocarlo en el centro
que creo que queda mejor y el tamaño
pues variará el tamaño de nuestro botón
lo que medio puede estar bien bajamos un
poquito
esta opción también está muy chula y si
clicamos en más podemos añadir un icono
como podéis ver hay una amplia variedad
que voy a seleccionar por ejemplo este
y clicamos en insertar para ponerlo
veis ya aparece aquí
ya tenemos nuestro icono y aquí podemos
cambiar si lo queremos antes o después
del texto en mi caso lo voy a dejar
después por ejemplo y el espaciado del
icono es la distancia que queremos entre
el texto
y el icono como podéis ver el máximo es
50 y lo que dejan en algo intermedio
quizá
10 por ejemplo
muy bien podemos subir arriba y
proseguir con estilo una vez el estilo
podemos comprobar que tenemos casi los
mismos ajustes que cuando editamos
nuestro título tenemos la tipografía
donde podemos cambiar el tipo de fuente
yo lo dejaré por defecto de nuevo el
tamaño el peso todas estas cositas que
vimos anteriormente al editar el título
también podemos añadirle sombra en caso
de que queramos funciona igual que
cuando añadimos nuestro título podemos
hacerla más borrosa que la sombra ese
proyecto desde la izquierda hacia la
derecha desde arriba o desde abajo en
cuanto al color de texto pues funciona
muy similar que con el título de nuevo y
yo lo voy a dejar igual en blanco y el
color de fondo sí que me gustaría
modificarlo o sea que clico aquí y voy a
buscar a ver si este azul me sirve y yo
creo que puede ser interesante ya poner
un poquito más claro así me gusta más
elegimos el que más guste y clicamos
aquí para salir de nuevo este me gusta
lo voy a dejar
otro efecto que queda muy bien es el de
encima voy a cambiar el color de fondo
una vez seleccionada encima y lo voy a
poner en blanco vale
de tal forma que cuando me ponga encima
se verá en blanco lo que pasa que como
mi texto también está en blanco pues no
se puede ver para hacer esto nos
volvemos anormal
a nuestro color de fondo y yo lo que voy
a hacer es intercambiar los copiamos
este código hex'
copiamos volvemos a encima de la
modificación que estábamos color de
texto borramos el que aparece aquí a
word copiamos pegamos
nos aparecerá a continuación el mismo
color beige qué sucede pero qué efecto
tan guay ponemos encima y cambia el
color a la inversa lo siguiente sería la
animación al pasar el ratón cuando nos
pasamos encima por ejemplo vamos a poner
pues eso grow que sería crecer vamos a
ver qué pasa y ves cómo crece nuestro
botón
veis apreciáis el cambio no creo que
necesitemos ningún tipo de cambio más
encima sea que volvemos a normal lo
siguiente que vamos a ver es el tallo
del borde a mí me gusta trabajar en
porcentajes o sea que utilizamos en
porcentaje y metemos un número aleatorio
y veremos cómo se modifican las esquinas
de nuestro voto veis se vuelven más
circulares si queréis verlo mejor voy a
poner un número más grande para que sea
mejor
ahora se pone ovalado por completo
nuestro botón
luego tenemos sombra de caja en caso de
que queramos añadir una sombra a la caja
vale yo en mi caso no lo voy a añadir o
sea que vamos a pasar a avanzado con
margen y relleno podremos cambiar la
posición de nuestro widget totalmente es
un poco difícil de explicar con palabras
pero en cuanto
veréis qué sencillo es y qué fácil es
modificar la posición de nuestro widget
aquí podemos ver px que son píxeles a mí
me gusta trabajar en píxeles y suelo
hacerlo en porcentajes o sea que si
queréis podéis cambiarlo como yo y como
podéis ver aquí hay un una cadenita que
nos pone vincular juntos los valores eso
quiere decir que cualquiera de los
valores que modifiquemos se modificará
igualmente en el resto la verdad es que
solo necesitamos cambiar la distancia
entre el texto y el botón para ello
vamos a sólo a modificar arriba y vamos
a poner una distancia de por ejemplo 5
perfecto recordad siempre que siempre
que queráis modificar a distancia la
posición de uno de vuestros widgets
jugado un poco con los números también
tenéis que fijaros si está encadenado o
no por si os interesa hacer algún tipo
de modificación en concreto desde la
derecha desde la izquierda desde abajo
desde arriba aquí abajo tenemos más
posibilidades para editar que ya algunas
de ellas hemos llegado a ver realmente
yo intentaría no abusar demasiado de las
ediciones de los cambios que hagáis
ya que puede quedar todo un poco
sobrecargado vamos a volver al panel
principal y vamos a proceder a guardar o
actualizar
genial ahora también me gustaría
enseñaros otro efecto lo vamos a hacer
en el botón y para volver a editar
cambios o bien podemos quitar aquí en la
derecha y darle a editar botón o bien
podemos irnos aquí y darle a editar el
botón vale ya nos encontramos aquí el
panel para ajustar nuestro botón
os voy a enseñar un efecto que realmente
creo que es muy útil y está muy bien nos
vamos a contenido hace unos minutos
pusimos google.com pero ahora vamos a
poner un hashtag y la palabra más es
importante que la pongamos sin tilde o
sin acento porque si no no va a
funcionar retornamos a los widgets nos
vamos a ir aquí vamos a bajar un poquito
y vamos a aplicar en añadir
seleccionamos una estructura con una
única columna nos vamos aquí
seleccionamos ancho completo y sólo
seleccionarlo siempre nos vamos a
widgets añadimos un título rápido
da un poco igual el texto que tengamos
es simplemente para que podáis ver el
efecto que os estoy explicando clicamos
aquí
vamos ha avanzado en nuestro panel de
edición
y aquí donde pone y de css añadimos más
muy bien ahora veréis vamos a actualizar
vamos a volver aquí al panel
de inicio vamos a irnos a la
previsualización de nuestro sitio web
para hacerlo clicamos aquí en el ojito
que hay aquí previsualizar cambios se
abre en nuestra página web
y vamos a ver cómo ha quedado el efecto
ya veréis cálcica en el botón nos
llevará hasta la parte baja donde
pusimos nuestro link demás veis nos
lleva hasta aquí abajo hasta la última
sección que añadimos bueno la verdad es
que no ha quedado muy espectacular pero
cuando tengamos una página web mucho más
grande y con más contenido y nos lleva a
un punto que se encuentra casi abajo del
todo la verdad es que quedará bastante
mejor y será una herramienta muy útil
que seguramente utilicéis muchas veces
cerramos esta pestaña y nos vamos de
nuevo elementos ahora vamos a proceder a
cambiar el título que añadimos aquí para
ello clicamos aquí cambia nuestro panel
de edición como podemos ver voy a ir a
contenido y voy a cambiar el texto voy a
poner
porque poco a poco irás entendiendo por
qué pongo este subtítulo y como nuestra
página web va tomando forma lo voy a
alinear al centro voy a volver a título
voy a elegir un color de texto un poco
más oscuro quizá este esté bien si yo
creo que si aplicamos aquí en el color
para salir la tipografía voy a dejarla
por defecto pero si la voy a hacer un
poquito más
voy a poner aquí en negrita
quita el 900 ajuste mejor
no ningún tipo de transformación
voy a poner esta vez en cursiva
yo creo que ninguna decoración va a
hacer falta ni subrayado ni nada así
y lo que voy a hacer es cambiar el
tamaño creo que sobre 50 debe de estar
bien vale me gusta ese tamaño
y puede salir perfecto tomando forma
si queremos añadirle una sombra clicamos
aquí yo intenté añadirle uno abajo no
bueno
no creo que demasiado bien para volver a
los valores por defecto clicamos aquí se
queda igual que estaba
tras haber hecho esto nos vamos avanzado
y voy a desvincular los valores ponerle
un porcentaje e intentar que se separa
un poquito más entonces qué darle
10 quizás sea demasiado voy a poner
quizás 55 creo que es una buena
separación genial ya podemos dar por
finalizado la edición de este título nos
volvemos a los widgets ahora vamos a
aplicar el separador y lo vamos a mover
debajo de nuestro título que acabamos de
editar
vemos que se ha añadido un separador con
una línea y como podéis ver ocupa el
100% del ancho de nuestra página web yo
le voy a poner un poquito más corta
quizá quizá al 60 60 y la voy a colocar
en el centro totalmente perfecto aquí
podéis ver que podéis usar otros tipos
de estilos
yo voy a usar el sólido normal
tras esto nos vamos a estilo
y por ejemplo yo voy a poner la línea
del mismo color que puse las letras era
este si no me equivoco clic aquí para
salirme a la hora de seleccionar el peso
ponemos el grosor de la línea yo por
ejemplo voy a poner al 3
creo que así está bien y la brecha es el
espacio que queremos en nuestra sección
así de grande o así de pequeño será un
poco más igual modificará la distancia
de la línea respecto del texto perfecto
una vez hayamos acabado podemos
actualizar y guardar los cambios lo
siguiente que haremos será añadir tres
widgets y va a ser caja de iconos para
ello vamos a dejarnos aquí y vamos
primero añadir una sección una sección
esta vez con tres columnas el efecto y
utilizamos aquí en el más y como os digo
vamos a buscar caja de icono y lo vamos
a añadir veis caja de icono es un icono
más texto
en mi caso como estamos hablando de surf
y pregunto primero por qué buscar un
icono que pueda tener cierta relación
con el tema
voy a buscar por ejemplo el sol este
podría funcionar ins empezamos el show y
por ejemplo aquí porque hacemos surf
por el tiempo soleado por ejemplo puede
escribir
como veis es bastante sencillo añadir un
icono y modificarlo podemos modificarlo
o bien aquí o bien como comenté
anteriormente en el encabezamiento aquí
en caso de que queramos cambiar el color
pues ahora mismo el color es azul pero
por ejemplo si ubicamos aquí nos
aparecerá la paleta de colores vamos a
buscar un color cálido por ejemplo el
amarillo el naranja puedes también
es un poquito de intensidad ya lo tengo
modificado en caso de que no os haya
gustado mucho este widget y queramos
repetirlo es muy sencillo simplemente
clicando el botón derecho sobre
el botoncito de editar clicamos en
copiar y pegar de acuerdo es bastante
sencillo y de esta forma ahorraremos
mucho tiempo si queremos repetir widgets
o el icono va a ser similar o el texto
va a ser similar ya depende un poco de
vosotros vamos a copiarlo por última vez
en la tercera columna copiar pegar
perfecto a continuación lo que haremos
será añadir un vídeo de fondo es un
efecto que está muy guay también para
ello vamos a quitar en la estructura de
una sola columna y nos vamos a ir aquí a
editar sección ya salir de nuestro panel
a la izquierda nos vamos a estilo
y veréis que tenemos la opción de añadir
una imagen como hicimos si anteriormente
la del degradado que habíamos hablado de
él pero consiste en elegir los colores
por ejemplo yo elegí el verde y el rojo
predeterminado y podemos ver cómo se
produce el degradado entre los dos
colores con los dos colores tienden a
juntarse a fusionarse y podemos
modificar cuánto espacio invade uno y
cuando espacio invade el otro de acuerdo
simplemente jugar un poco con los
números y buscar lo que es más fuerte si
queremos que parta desde el centro
es un efecto que puede estar bien el
siguiente efecto este sería el del vídeo
que sea que vamos a añadir a
continuación el pase de diapositivas
también está muy bien y consiste en
seleccionar varias diapositivas por
ejemplo ya seleccionar esta esta y ésta
y vamos en crear una nueva galería
insertar galería y las tres diapositivas
irán apareciendo
como vemos aunque no está ajustado las
imágenes van pasando cada cierto tiempo
y dar un efecto bastante dinámico a
nuestro sitio web aquí podemos modificar
el tiempo en el que lo queremos y por
ejemplo para los 4000 pues serán cuatro
segundos el efecto que queramos por
ejemplo que venga de abajo arriba vamos
a verlo
ahí está es un efecto que está muy bien
y que podéis utilizar siempre que
queráis ahora vamos a pasar al vídeo que
yo creo que es uno de los efectos más
interesantes que hay a mi me gusta mucho
la verdad
y consiste como digo en añadir un vídeo
en el fondo de nuestra página web para
ello lo primero que vamos a hacer es
irnos a youtube por ejemplo y buscar un
vídeo que esté relacionado con el tema
de nuestro sitio web
yo por ejemplo
tenía uno buscado de surf ya que es la
temática de mi sitio web copiamos el
enlace será fundamental volvemos al
elemento y clicamos aquí para crear el
enlace una vez tengamos el enlace aquí
podemos ajustar el tiempo en el que
queramos que se inicia nuestro vídeo por
ejemplo a mí me interesa que empiece a
partir del segundo 39 y que termine
sobre el segundo 125 podemos clicar en
reproducir una vez no lo vamos a hacer
ahora mismo y luego tenemos la
posibilidad de reproducir el móvil yo
muchas veces clic haría que no porque un
vídeo consume muchos datos y si uno de
nuestros visualizadores o visitantes de
nuestra página web está viendo nuestra
website en su móvil sin wifi puede ser
que le consuma demasiados datos que la
página web vaya lento por lo tanto
tenemos aquí la posibilidad de un fondo
alternativo sería añadir una imagen
también relacionada con la temática y
funcionar y al igual que el vídeo aunque
obviamente no estaría en movimiento
vamos ahora a ajustar el vídeo vale como
hicimos con la imagen anteriormente para
ello nos vamos aquí ancho completo en el
alto y clicamos en ajustar a la pantalla
y ya lo tendríamos totalmente ajustado
como podéis ver de acuerdo vamos a
retornar ahora los widgets principales
una vez hayamos ajustado el vídeo
clicamos aquí volvemos muy bien vamos a
cerrar la pestaña de youtube que abrir
para buscar el vídeo y el enlace
y a continuación os voy a enseñar cómo
mover una sección de un sitio a otro es
muy sencillo simplemente clicamos en los
seis puntitos aquí en los puntitos de
editar sección y la arrastramos hasta
donde queramos por ejemplo
bajar hasta abajo
y le voy a soltar aquí
veréis que se añade aquí abajo es
realmente sencillo pero es un buen
recurso en caso de que por ejemplo
tengamos una sección de contenido que
estaba muy abajo y ahora queramos
ponerla un poco más arriba porque
pensemos que sea más relevante o sea que
es un recurso bastante útil como os digo
para deshacer un cambio podemos o bien
irnos aquí en el historial de la hoja
hacia atrás o bien clicar en control z
que quizás sea más sencillo clicamos en
control z y vuelve a estar arriba a
nuestra sección vamos a pasar ahora a
guardar nuestros cambios clicamos en
actualizar perfecto ya se han guardado y
vamos a pasar a previsualizar nuestro
sitio web para que veáis cómo va yendo
clicamos aquí vamos a echarle un vistazo
ya se ha cargado y podemos ver cómo está
nuestro sitio web aplicamos el botón
nos lleva hasta abajo nuestros iconos en
estas secciones vemos cómo se reproduce
el vídeo y este es el aspecto que tiene
ahora mismo nuestro sitio web creo que
está bastante bien vamos a volver a
elementos de acuerdo
vamos a quitar la previsualización de
nuestro sitio web
ahora vamos a ver otro recurso que nos
vendrá muy bien y es que cuando añadamos
un nuevo widget no tenemos por qué hacer
todas las modificaciones de nuevo todos
los ajustes simplemente podemos copiar
el estilo vamos a añadir otro título y
clicamos aquí en copiar una vez que
creemos en copiar voy por ejemplo a
añadir un título dentro del vídeo
clicamos y arrastramos encabezado hasta
aquí genial y vemos que aparece añadir
tu texto de cabecera pues por ejemplo a
este texto yo le puedo pegar el estilo
que tenía nuestro título de arriba
y vemos como el texto se adapta y adopta
el mismo tipo de estilo que tenía
nuestro título de arriba es bastante
sencillo y os hará ahorrar mucho tiempo
ahora vamos a proceder a ver cómo se ve
nuestra página desde un móvil o una
tablet la mayoría de vuestro tráfico
vendrá probablemente desde estos
dispositivos es importante que vuestro
sitio web
luzca bien desde un ordenador pero
también es fundamental que aparezca bien
desde una tablet o un teléfono móvil
para ello vamos a irnos aquí y podremos
ver cómo va de momento su aspecto desde
una tablet clicamos aquí y nos hace una
especie de simulación de cómo aparece en
una tablet la verdad es que no está nada
mal pero podemos ajustarlo un poco mejor
y que su aspecto sea mucho mejor
vamos a ver cómo luce en un móvil vale
bueno la verdad es que no tiene
demasiado buen aspecto está todo
demasiado comprimido pero aún así es
aceptable de todas formas vamos a
trabajar en una serie de cambios que
harán que se ajuste mejor al dispositivo
móvil en el que se ha visto por ejemplo
vamos a editar el texto clicamos aquí y
lo primero que vamos a hacer es irnos a
tipografía en la tipografía podremos
cambiar el tamaño la mayoría de los
cambios que hagamos cuando
ajustemos nuestro sitio web a un
ordenador a una tablet consistirá en el
tamaño porque como podéis ver es
demasiado grande para un móvil entonces
yo voy a ponerlo quizás
en torno a 20 creo que está bien o puede
que algo más así creo que puede estar
bien o quizás 35 también es posible que
queráis cambiar la altura de línea que
es la distancia entre una frase arriba y
una frase abajo en nuestro caso sólo
tenemos una frase o ya quien no hay
problema no hay porqué tocarlo
ya hemos hecho esos cambios es
importante que os fijéis que siempre
estamos en móvil vale porque todos estos
cambios se aplicarán a nuestro teléfono
móvil o sea que aseguramos de que estáis
trabajando en formato móvil seguimos
ahora básicamente vamos a hacer lo mismo
con el botón tenemos clicando en el
botón y por eso nuestro móvil se ha ido
hacia abajo volvemos hacia arriba y en
estilo pues igualmente pues podemos
cambiar la tipografía en caso de que la
letra sea demasiado grande
pequeñita
en torno a
14 por ejemplo se ahora por ejemplo
utilizamos en porque en editar veremos
siempre que está abarcado este símbolo
es muy importante porque este símbolo
nos indica en que estamos trabajando
ordenador tableta o teléfono móvil el
estilo aparecen estos tres símbolos que
nos indican si trabajamos en ordenador
en tablet o un smartphone tenerlo muy en
cuenta porque será en donde estáis
trabajando y donde vuestros cambios se
aplicarán a lo siguiente que vamos a
pasar es aquí pinchamos voy a cambiar el
texto de aquí para que entendáis lo
siguiente que voy a explicar por ejemplo
pongo surf clicamos en toda la sección y
nos vamos avanzado muy bien puede darse
el caso que estos widgets no esté en el
orden que buscaba y sólo en el que se
encuentran en el formato de ordenador
entonces elementos nos ofrece la
posibilidad de cambiar el orden si
clicamos aquí veremos cómo se invierte
el orden y el primero que modificamos
pasa a ser el último y el último el
primero
y luego elementos nos ofrece la
posibilidad de que si un widget no
aparece demasiado bien en el teléfono o
no queremos simplemente que aparezca en
alguno de los formatos pues podemos
ocultarlos clickeando aquí esto puede
ser aplicable tanto para secciones
enteras como para widgets sueltos en
este caso no ha desaparecido porque esto
es como una prueba para nosotros pero si
actualizamos y nos metiéramos en nuestro
teléfono móvil podríamos ver cómo esta
sección entera no aparecería estaría
totalmente oculta vamos a quitarlo tras
haber visto las modificaciones posible
en teléfonos móvil vamos a volver a
escritorio a formato ordenador
nos vamos arriba del todo ya el panel
principal de widgets genial después de
haber completado el anterior apartado
vamos a proceder a trabajar con
plantillas creadas por diseñadores
profesionales hasta ahora hemos creado
nuestra página web totalmente desde cero
desde mi punto de vista trabajar con
plantillas es bastante más recomendable
que crear nuestra página totalmente
desde cero porque por mi experiencia
creo que crear una página web desde cero
puede tener varias ventajas pero no es
al cien por cien recomendable ya que es
lo que buscamos es una apariencia lo más
profesional posible para nuestra empresa
para nuestro negocio para nuestra
asociación para nuestra organización por
lo que crearla nosotros mismos puede ser
un poco arriesgado entonces mi propuesta
es utilizar plantillas y modificarlas
como queramos dándoles nuestro toque
personal y adaptándolas lo mejor posible
al contenido de nuestra web para
continuar vamos a borrar todo lo que
hemos hecho hasta el momento para poder
incluir la plantilla podemos hacerlo o
bien clicando aquí
o bien yéndonos al historial hasta el
primer punto y empezar nuestra página
web desde cero yo voy a seguir clicando
aquí para eliminar todo
eliminamos todas estas acciones genial y
nuestra página web vuelva a estar vacía
sin ningún tipo de contenido muy bien
antes de continuar vamos a proceder a
guardar los cambios clicamos en
actualizar y nuestros cambios quedarán
totalmente guardados tras esto nos vamos
al escritorio
y vamos a comenzar un bloque nuevo
trabajando con plantillas antes de
continuar ya que nos aparece la
oportunidad vamos a irnos aquí y vamos a
actualizar los plugins que nos aparecen
vale esto es importante para que nuestra
página esté lo más optimizada posible
como podemos ver en bateau elements y
hoy sean extra necesitan la
actualización sea que explicamos aquí
clicamos aquí nos vamos aquí abajo
también se puede hacer arriba y clicamos
en actualizar aplicar perfecto nuestros
plugins están totalmente actualizados
ahora para poder instalar plantillas
tenemos que irnos a elements y activar
en bad o elements para poder usar en bat
o elements y poder añadir las plantillas
lo primero que nos harán es pedirnos un
email introducido el que queráis no
tiene que ser ni siquiera el personal
vuestro clicamos en aceptar términos y
clicamos en continuar
ahora básicamente nuestras plantillas ya
están instaladas y podemos comenzar a
trabajar con ellas vamos a proceder
añadiendo unas páginas pinchamos en
añadir nueva
esta por ejemplo lo vamos a llamar sobre
nosotros
o conoce también sería una opción da
igual el nombre que queráis clicamos en
publicar y otra vez en publicar
ahora vamos a hacer los mismos ajustes
que hicimos con nuestra página web desde
cero en diseño del contenido vamos a
clicar en 100 en ancho completo luego
vamos a encabezado y quitamos la barra
superior clicando en deshabilitar
después clicamos en título deshabilitar
también y por último nos vamos a pie de
página y deshabilitados ambos
estupendo subimos hacia arriba clicamos
aquí y también clicamos en esta y
clicamos en actualizar
podemos echarle un vistazo rápido a la
página que hemos añadido clicando aquí
como veis no hay nada esta sería nuestra
primera página y para añadir otra más de
forma rápida y coger un atajo podemos
clicar en añadir y clicar en página
añadiremos una nueva página
procedemos a hacer los cambios que
hicimos anteriormente yo esta vez lo voy
a llamar contacto esta página y también
voy a acelerar esta parte del vídeo o
sea que si tenéis alguna pregunta podéis
iros un poquito hacia atrás y consultar
lo que hicimos anteriormente
continuamos puede que en el futuro
añadamos a alguna página más dentro de
nuestro website pero por ahora creo que
es suficiente
fantástico vamos ahora a irnos a editar
con elementos
para añadir plantillas tenemos dos
opciones la primera sería añadir las
plantillas que nos ofrece elementos la
verdad es que no son demasiadas y
tampoco son muy buenas por lo que no
usaremos ninguna además muchas de ellas
solo están disponibles en la versión pro
o sea que nos vamos a ir fuera de aquí
o sea que en lugar de usar las de
elementos usaremos las de mba todo
elements para echarles un vistazo
podemos irnos aquí quitamos esto aquí
podemos ver una gran cantidad de
plantillas y de diseños pero como podéis
ver en esta estrella pertenecen a la
versión premium por lo que
necesitaríamos la versión pro de
elementos y de embate elements pero si
bajamos un poquito más podremos
encontrar las plantillas gratis en las
versiones gratis las cuales están muy
bien podemos ver que hay hasta 108
diseños de los cuales contienen mil 840
páginas que podemos utilizar en este
sitio web veis hay bastantes yo por
ejemplo voy a irme a la primera y clicar
en ésta una vez que estamos aquí dentro
podemos ver la variedad de páginas que
nos ofrece este mismo diseño por ejemplo
esta podría ser una página de inicio
esta otra esta otra
aquí sobre nosotros como colaborar
nuestros animales o sea que nos ofrecen
distintas páginas con distintas
utilidades que podemos utilizar aún así
es importante que tengáis en cuenta que
si aquí pone pro es porque necesitáis la
versión pro de elementos vale volvemos
atrás nos vamos a elementos templates y
subimos hasta arriba otra forma de
buscar el diseño que necesitáis como os
podéis imaginar explicando en el
buscador y os aparecerán una serie de
conceptos de temáticas de diseños
generales en los que podréis encontrar
nuestro nicho o el carácter particular
de vuestra página web por ejemplo
tenemos belleza negocio es creatividad
diseño comida y bebida medicina y salud
tecnología deporte es muy posible que
buscando en una de estas secciones que
quizás no tiene nada que ver con vuestra
página web encontréis una plantilla que
os convenza para vuestro sitio web es
posible a mí me ha ocurrido en alguna
ocasión y no debéis preocuparos y elegir
la plantilla que creáis que mejor se
adapta a vuestro negocio a vuestra
organización a vuestro blog a lo que
necesitéis
por ejemplo voy a buscar la palabra surf
para ver qué aparece ya que ésta ha sido
la temática que hemos seguido en el
vídeo perfecto utilizaremos surf también
para poder hacer una comparación entre
la página web que hicimos desde cero y
las plantillas que nos ofrece en bateau
elements aquí podemos ver las plantillas
y diseños para las páginas de inicio
homepage que no se ofrecen bad o
elements a buscar surf la verdad es que
hay una amplia variedad aunque yo me
haya decantar por la primera aplicamos
en ella y pinchamos en import template
importamos tras que se haya importado en
nuestro sitio web no clicamos aquí no
aplicamos en abrir plantilla en la
librería y nos vamos fuera lo siguiente
que vamos a hacer es refrescar nuestra
página web para ver el resultado
clicamos
y veremos cómo aparece la plantilla que
hemos importado para abrir la plantilla
que hemos importado nos vamos a mis
plantillas y aquí aparecerá la plantilla
de elsur le damos a insertar
y vemos cómo se va cargando
progresivamente
como podemos ver el encabezamiento de
nuestro sitio web ha desaparecido por
completo pero no os preocupéis porque
esto se debe a que la plantilla que
hemos añadido se ha llevado por delante
directamente el encabezamiento que
teníamos pero si queremos recuperarlo es
tan fácil como clicar en ajustes que se
encuentra aquí aunque ya nos aparece
abierto por haber añadido a la plantilla
y clicamos en estructura de página
quitamos en por defecto
se cargará nuestro sitio web y
volveremos a recuperar el encabezamiento
que la plantilla nos quito
aquí está ya lo podemos ver aquí nos
vamos a ir a los widgets principales
vamos a guardar lo que hemos hecho hasta
ahora que ha sido importar la plantilla
y vamos a echarle un vistazo
como podéis ver el aspecto
de nuestro sitio web es muy profesional
muy atractivo y realmente completo
podemos seguir viendo por aquí
como luce
nuestro sitio web y hemos tardado apenas
minutos en hacerlo
a partir de aquí ya todo se basara en
darle nuestro toque personal en
ajustarlo a nuestro negocio en ajustarlo
a nuestra idea de website y completar
los campos o cambiarlos a nuestro antojo
para que todo luzca como teníamos en
mente aparte de esto podemos irnos aquí
en el modo adaptable podemos ver como
luce en una tablet
y como podéis ver y como era de esperar
las plantillas aparecen directamente
ajustadas es decir no tenemos que
trabajar en ellas para que se adapten a
los formatos de móvil oa los formatos
tableta por lo tanto es mucho más cómodo
que tener que realizar nosotros todo el
trabajo de nuevo vamos a verlo en móvil
clicamos en móvil y así sería como
aparecería simuladamente en nuestro
móvil como podéis ver añadir una
plantilla es mucho más cómodo mucho más
seguro y con un resultado mucho más
positivo seguramente que hacerlo por
nosotros mismos
yo como os digo lo recomiendo altamente
aunque también os digo que podéis hacer
lo que vosotros consideréis mejor
que se ha capacitado para realizar el
mismo adelante con ellos
tras esto vamos a volver al formato
escritorio formato ordenador
luego de haber echado un vistazo a esto
yo voy a seguir por quitar el vídeo que
aparece en el fondo de esta plantilla
clicamos en editar sección se abre
disposición pero nos vamos a ir a estilo
y una vez aquí vemos el enlace del vídeo
que se está reproduciendo en el fondo lo
vamos a eliminar y vamos a bajar un poco
hacia abajo porque como podéis ver la
imagen que aparece no es del todo opaca
entonces nos vamos a capa de fondo y
aquí aparece la imagen para convertirla
un poco más opaca una de las
posibilidades que tenemos para explicar
en opacidad y ponerla al máximo que yo
creo que es lo más adecuado perfecto
volvemos a los widgets y ahora voy a
seguir por editar el título como sabemos
clicamos en el título y aquí nos aparece
la posibilidad de cambiar lo voy a poner
como vemos el sur si alguno de vosotros
desea realizar algún cambio más
simplemente puede echarle un vistazo a
los ajustes que hicimos hace unos
minutos y modificarlo como quiera
ponerle otro color mover el título
cambiarle el tamaño
yo voy a continuar modificando el botón
para ello nos vamos al botón y clicamos
aquí en editar se abrirá nuestro panel
de la izquierda
dónde voy a cambiar el título que tiene
un nombre que tiene por conocemos
ahora tras haber rellenado estuviera una
parte muy importante quisiera que este
botón nos lleve a una de las sub páginas
que tenemos dentro de nuestro sitio web
una de las formas que tenemos de hacerlo
y que probablemente sea la más fácil es
simplemente
poniendo la barra hacia delante y
rellenando el nombre al que queramos que
nos lleve este botón si recordáis bien
hace poco creó una página que se llamaba
sobre nosotros pues si quiero que este
botón de conocernos nos lleve a sobre
nosotros tecleo sobre guión nosotros y
nos llevará a esta sub página como
habéis podido ver si a la página que
queremos que nos lleve tiene un título
con dos palabras o más es importante que
las unamos mediante guión es otra forma
de hacer esto es copiando el enlace
https es otra forma de hacerlo quizá un
poco más difícil yo os recomiendo está
si os sabéis el nombre de la sub página
a la que queréis que os lleve el botón
simplemente hacedlo así vamos a ver
rápidamente cómo nos lleva a la sub
página de sobre nosotros primero
actualizamos nos vamos aquí y esperamos
a que se cargue
y significamos en el botón de sobre
nosotros o conoceremos en este caso nos
lleva a esta página en blanco que aún no
hemos editado pero vemos cómo nos lleva
a la sub página que queríamos genial
volvemos a muy bien seguimos con cositas
que podéis modificar vamos a bajar un
poco vamos a ver como a la página
así ampliando
muy bien como podemos ver aquí este
título está curiosamente pues muy junto
esto podemos modificarlo vamos a
modificarlo si queréis para que quede
mejor volvemos atrás clicamos aquí vamos
a estilo en el panel de editar
encabezado luego a tipografía bajamos un
poquito hacia abajo y espaciado de
letras aquí lo tenemos que está bastante
reducido vamos a separar un poco más
para que mejor quizás así sea mucho
así puede quedar bien veis podéis ir
haciendo cambios a lo largo de la
website en cosas que no os convenzan
por el formato que trae la plantilla
quizá también se dé el caso de que
queramos cambiar las imágenes que
aparecen aquí os explicamos en editar
las imágenes como podemos ver se abre la
posibilidad de editar el carrusel de
imágenes pinchamos aquí una vez abierto
vemos que tan sólo tenemos tres imágenes
una vez abierto esto podemos ver que tan
sólo tenemos tres fotos disponibles pero
si nos vamos a añadir galería podemos
añadir alguna más muy bien tenemos
varias más donde elegir y si quisiéramos
añadir alguna más pues simplemente
clicamos en ella y luego en añadir a la
galería pero lo vamos a dejar como está
porque yo creo que es también
y como siempre podemos hacer más cambios
más ediciones yo en mi caso no voy a
hacer ninguno pedro ya sabéis que podéis
hacer lo que queráis para buscar el
aspecto más adecuado que vosotros creáis
y en caso de que no os guste la
modificación que hayáis hecho siempre
podemos irnos hacia atrás o bien clicar
en ctrl + z y deshacer los cambios muy
bien
y bien en el caso que queramos eliminar
una parte de la plantilla o una sección
ya sabemos cómo es simplemente
simplemente nos vamos a la sección que
queramos eliminar y en mi caso voy a
eliminar esta porque no la necesitamos
por ejemplo por cualquier otro motivo o
no nos guste la clicamos aquí en la x y
borramos la sección y desaparece
perfecto realmente creo que ya podemos
decir que conocemos en profundidad
elementos hemos visto la mayoría de
ajustes fundamentales y esenciales para
trabajar con él pero como dije ya hace
unos minutos para conocer mejor
elementos y tener un mejor dominio de
este lo mejor que podemos hacer es
continuar usándolo practicar cuanto más
lo usemos más lo conoceremos y mayor
dominio tendremos como digo en el caso
de que a la hora de utilizar uno de
estos famosos widgets que ya hemos
trabajado tanto no sepáis algo en
internet hay decenas de vídeos y de
artículos que explican cómo utilizarlos
os recomiendo que si tenéis algún
problema o sabrán cais en alguna parte
acudáis a google y busquéis el elemento
encabezado
y os aparecerán como digo muchas
informaciones y seguramente alguna de
ellas resuelva a vuestra duda tras haber
concluido con la edición con elementos
lo siguiente que vamos a hacer es añadir
bloques los bloques son como secciones
con funciones específicas dentro de
nuestro sitio web por ejemplo si
queremos añadir una sección de conoce a
nuestros empleados podemos añadirlo
gracias a los bloques para ello nos
vamos hasta abajo del todo y añadimos
nuestro bloque aquí
y nos vamos a bloques aquí está blogs en
inglés perfecto aquí podemos ver hasta
580 bloques que podemos utilizar por
ejemplo tabla de precios imágenes de
galería entonces estos los podemos
añadir nosotros nos vamos a ir hasta
abajo y vamos a añadir el pie fu está en
inglés genial ya nos aparece en los pies
de páginas y como podemos ver aquí este
pie de página tan sólo está disponible
el elemento pro no lo comenté
anteriormente pero si alguien quisiera a
descargar elementos pro tengo un vídeo
tutorial que dejaré en la descripción de
este vídeo y también aparece en mi
página web donde explico cómo descargar
elementos pruebo para aquella persona
que quiera utilizarlo ya que ofrece como
sabemos más opciones aunque realmente
honestamente pienso que no es del todo
necesario pero si alguien quisiera puede
ver este vídeo y descargarlo vamos a
bajar
vamos a ver un poco más este azul que
podría quedar bien pertenece elemento el
producto
él también pertenece a elemento del
producto vale quizás este me ha gustado
creo yo vamos a añadir este de acuerdo
lo que puede quedar bien
genial ya está instalado podemos ahora
con nuestros conocimientos de elementos
modificarlo como queramos y poner la
información que necesitemos una vez lo
hayamos hecho os voy a enseñar una
característica muy interesante y
fantástica que tiene elementos para que
esta sección la podamos tener en todas
las sub páginas de nuestro sitio web lo
que vamos a hacer ahora es clicar en los
seis puntos que hay aquí con nuestro
botón derecho del ratón clikar los aquí
y guardamos como plantilla es muy
sencillo le ponemos un nombre yo voy a
poner el pie de página general y la
guardamos
estupendo clicamos aquí y nos vamos
fuera esto que acabamos de hacer para
guardar nuestra sección y que nos sea
más fácil en el futuro poder añadirla a
otras páginas podemos hacerlo con toda
la página por completo
para ello nos iríamos aquí
y le daríamos a guardar como plantilla
en este caso voy a llamarlo toda la
página
nos vamos fuera lo que hemos hecho es
guardar por completo toda la página para
poder repetirla en otra página y que nos
sea mucho más rápido poder editarla
luego muy bien vamos a actualizar lo que
acabamos de hacer lo guardamos y ahora
nos vamos a ir al escritorio de
wordpress para ello que digamos en las
tres líneas que aparecen aquí y nos
vamos a salir al escritorio
nosotros por el momento hemos editado en
nuestra página de inicio homepage pero
podemos hacer esto mismo con el resto de
páginas que tenemos en nuestro sitio web
para ello nos vamos a todas las páginas
y una vez aquí por ejemplo vamos a
editar sobre nosotros clicamos aquí
recordad haber hecho todos los cambios
que os expliqué anteriormente aquí abajo
y una vez los tengáis nos vamos a editar
con el elemento
se está guardando
y se abre se ha abierto ya perfecto
ahora imaginemos que por la razón que
sea queremos que la página que hemos
guardado anteriormente por completo
queramos que aparezca en la sub página
de sobre nosotros
para ello nos iríamos aquí a simbolito
del archivo
mis plantillas
y toda la página que es como lo llamamos
y le damos a insertar
genial vemos cómo se va cargando
progresivamente
en el caso de que nos apareciera nuestra
página sin el encabezado que buscábamos
como nos pasó al principio cuando
añadimos por primera vez la plantilla lo
que haríamos sería en los ajustes y en
estructura de página marcar por defecto
y ya está marcada por qué es lo que
clicamos anteriormente vamos a irnos
hasta abajo y aunque el pie de página
seguramente ya está incluido
efectivamente aquí está ya incluido
vamos a incluirlo de nuevo para que
veáis cómo se pueden añadir secciones o
bloques aunque esté doblemente añadido
lo vamos a añadir porque como dije
anteriormente lo queremos entrar a
nuestras páginas le damos a insertar sí
y se inserta la app
automáticamente aquí está muy bien ya
sabemos realmente todo lo básico sobre
elementos y como os he dicho si tenéis
alguna consulta hay millones de personas
que utilizan elementos y seguro que
alguien publica o resuelve vuestras
dudas sino también podéis preguntarme a
mí en los comentarios del vídeo vamos a
guardar
y nos vamos a ir al escritorio de
wordpress
genial vámonos a escritorio
quitamos esto que no nos interesa
muy bien el siguiente paso será añadir
un menú o una navegación a nuestro sitio
web
para ello nos vamos a apariencia menús
clicamos aquí perfecto lo primero que
debemos hacer antes de crear un menú es
darle el nombre yo por ejemplo lo voy a
llamar menú principal
y le damos a crear menú
una vez guardado vamos a añadir las
páginas que queremos que aparezcan en
nuestro menú una las seleccionamos le
damos a añadir al menú y aparecerán en
caso de que tengáis una página web que
su contenido sea un blog y queráis
añadir entradas o noticias o algo así
pues simplemente clica es aquí y tras
haber quedado vuestra entrada pues
añadís y al igual que con las páginas en
enlaces personalizados lo que haremos es
que si yo por ejemplo tengo un cada de
youtube
mi perfil de facebook por ejemplo puedo
poner el enlace aquí y desde el menú nos
llevará a estos sitios oa youtube oa
facebook oa donde queramos es bastante
sencillo y recomendable una vez hecho
todo esto nos vamos a ir al principal
que es donde se verá nuestro menú y
vamos a guardar guardamos menú y para
verlo nos vamos a ir a nuestra página
web de aquí
vamos a refrescar y vemos como aparece
aquí arriba nuestro menú que nos llevará
ao abrirá las páginas que nosotros hemos
creado como podemos ver el orden es
contacto sobre nosotros e inició
probablemente no sea el que buscábamos
ni el adecuado para ello nos vamos a ir
aquí para alterar el orden y ponerlo
correctamente muy bien para cambiar el
orden simplemente pinchamos y
arrastramos a inicio hasta arriba que es
probablemente el único que queramos
cambiar y lo ponemos el primero
guardamos nos vamos a nuestro sitio web
y refrescamos para ver el cambio de
orden
aquí está rápido y sencillo una cosa más
si volvemos a esta ventana
podemos crear submenús por ejemplo si
clicamos y ahora estamos contacto un
poco hacia la derecha lo que estaremos
haciendo es que sea un elemento de
inicio voy a guardar
y es lo voy a enseñar aquí de nuevo
inicio se abre y nos proporciona la
posibilidad de contacto es muy bien
visto esto podemos volver atrás
nos dirigimos al contacto y lo volvemos
a poner como estaba guardamos el menú
y vamos a apariencia
a personalizar
este es el editor de nuestro
encabezamiento que como podéis ver es
bastante similar al de elementos con un
panel de modificaciones aquí y con una
previsualización de nuestro sitio web
aquí es importante que sepáis y
recordéis que todo cambio que hagamos
aquí se modificará en todas nuestras
páginas es decir cualquier cambio en
nuestro encabezamiento se reflejará en
el resto de sus páginas de nuestro sitio
web
vamos a seguir ahora por clicar aquí en
encabezado y en general en estilo
podemos ver que pone mínimo pero vamos a
ver las diferentes opciones tenemos
transparente
veis cómo nuestro encabezado pasa a ser
transparente y la plantilla invade el
encabezado podemos poner menú superior
este tiene un estilo más elegante es
cuestión de que vayáis probando los que
más os interesan y el que más se ajuste
a vuestro sitio web en vertical vemos
cómo se ponen aquí nuestro encabezado
pasa a estar en el lateral en
disposición vertical
básicamente podéis elegir el que más os
guste yo voy a trabajar con mínimo y voy
a continuar
tras esto vamos a quitar el borde
inferior de la cabecera ahora mismo no
lo vemos pero realmente aquí había una
línea que si tuviéramos un encabezado
transparente si podríamos ver no quedó
demasiado bien yo voy a quitar podemos
modificar el alto
o el bajo de nuestro encabezado yo voy a
dejar en torno a 80 82 puede estar bien
y luego como podemos ver aquí podemos
cambiar el color de fondo
simplemente clicando aquí
hay distintos colores yo pues sencillez
lo voy a dejar en blanco vale
y luego de esto yo creo que es
suficiente y podemos volver atrás y
vamos a irnos hacia luego ahora
deberíamos proceder a elegir un logo
para nuestra website yo voy a elegir el
que ya tenía preparado para mi sitio web
que es el que uso habitualmente como
está guardado en mi ordenador nos vamos
a subir archivos seleccionar archivos
perfecto ya lo hemos subido le damos a
elegir lo recortamos como queramos yo
creo que iba bien ajustado más un poco
más y un poquito más por arriba el
cortar m
parece que es demasiado grande pero no
os preocupéis porque podemos ajustar su
tamaño aquí en ancho máximo y altura
máxima simplemente vamos a modificarlo
hasta que encontremos un tamaño un poco
más satisfactorio
muy bien ya lo tenemos a un tamaño más
adecuado por lo menos en mi opinión
podéis elegir otro tamaño si también lo
deseáis en caso de que no tengáis un
logotipo y no sepáis cómo conseguirlo
cómo hacerlo tengo un vídeo en el que
explico cómo conseguir fácilmente un
logo para ello lo podéis encontrar en mi
sitio web en la parte de comienza aquí
justo aquí abajo aquí cómo conseguir un
logo fácil y rápido y es realmente
sencillo yo conseguí este por un precio
muy económico
me costó 7 dólares o 6 euros depende en
mi opinión creo que tiene un look
estupendo y la verdad es que es
realmente profesional que al fin y al
cabo es lo que todos buscamos no bien
tras haber colocado a nuestro luego nos
vamos hacia atrás de nuevo y nos vamos a
menú
nos vamos a ir a posición vamos a
aplicar en izquierda y vemos como se
cambia el menú y se coloca donde
queremos normalmente se suele ver a la
derecha y yo lo voy a dejar ahí por lo
tanto lo siguiente que haremos será
trabajar con los enlaces es decir con
las opciones que tenemos aquí y para
ello vamos a pasar a efectos de enlace
como podéis imaginar lo que haremos es
incluir le un efecto cuando nos pasamos
encima de algunas de las opciones yo por
ejemplo ya elegir subrayado hacia la
izquierda esperamos a que se cargue y
veréis lo que sucede si nos ponemos aquí
veis cómo aparece esta pequeña línea que
aparece por la izquierda vale ir
probando el que más os guste también
podéis cambiarle el color al efecto vale
hay una amplia gama de colores lo
siguiente que vamos a hacer
es ver el espaciado en nuestro menú si
queremos que las opciones estén más
separadas o no yo creo que sobre 15 está
bien yo lo voy a dejar como estaba y
luego tenemos el color del enlace como
podéis ver es un color negro entre negro
y gris podemos cambiarlo si queréis voy
a elegir por ejemplo verde todas
nuestras opciones cambian a verde vale
yo voy a dejar por defecto para que sea
más cómodo
el color de vínculos hover esto
significa que cuando nos pasamos encima
inicio se transformará azul contacto se
transformará azul podemos cambiar si
queréis
como ya sabéis pues elegimos un color
por ejemplo rojo vemos cómo cambiar rojo
de acuerdo
y voy a dejarlo en por defecto de nuevo
el color del vínculo y tema actual del
menú lo que quiere decir es que por
ejemplo ahora mismo nos encontramos en
inicio y el color es negro porque es el
color que tenemos elegido pero por
ejemplo si lo cambiamos a rojo al
encontrarnos en inicio
simplemente inicio se pone en rojo de
acuerdo podéis cambiarlo ir probando y
trabajando con ellos buscando lo que más
os guste el color de fondo de vínculo yo
no lo aconsejo porque a mí realmente no
me gusta pero si alguien le gusta pues
que lo ponga simplemente es cambiar el
color a todo el fondo o simplemente a
una de las opciones ir probando cosas
voy a dejarlo en por defecto
el fondo de vínculo hover force y
funciona igual si nos pasamos encima de
alguno de ellos pues cambiará ese color
vale simplemente igualando y probando
las opciones que más os gusten
realmente todas las opciones aquí son
muy similares y es cuestión de que
vosotros vayáis probando e investigando
vamos a pasar el estilo del icono de
búsqueda dependiendo de qué website
tengáis a que se dedique y cuántas sus
páginas tengáis lo dejaría o no en mi
caso como tengo pocas páginas no lo
dejaría entonces lo voy a aplicar en
deshabilitar y vemos como la lupita aquí
va a desaparecer ya os digo si tenéis
muchas sub páginas es bueno que lo
tengáis pues si alguno de nuestros
usuarios desea buscar algo en concreto
que no aparece en el menú de acuerdo yo
lo voy a dejar el deshabilitado si
bajamos el resto de opciones siguen
siendo similares para cambiar el color y
ajustarlo como queramos genial una vez
que haya creado esto claro vamos a
volvernos hacia atrás
y continuaremos por modificar nuestro
logotipo en el formato smartphone para
ello lo primero que tenemos que hacer es
poner nuestro editor en modo teléfono
perfecto luego nos iríamos a menú en
móvil y aquí realmente es difícil
ajustar nuestro logotipo en formato
smartphone necesitaríamos tener
preparada de antes una imagen con el
tamaño adecuado para nuestro sitio web
cuando se ve en un teléfono móvil ya os
digo es un poco complicado y para ello
lo vamos a hacer de una forma bastante
más sencilla nos vamos atrás y nos vamos
salud una vez aquí y teniendo
seleccionado el formato teléfono móvil
que lo podemos ver allí o aquí vamos a
seleccionar un tamaño que se ajuste a lo
que buscamos yo por ejemplo voy a poner
80 aunque vosotros podéis probar otros
tamaños o quizá 90 queda mejor si 90 y
90 de altura máxima también de esta
forma podemos ver como nuestro logotipo
es mucho más pequeño y queda bastante
mejor que antes que era demasiado grande
es una forma mucho más sencilla de
ajustar nuestro logotipo vamos a irnos
hacia atrás si habéis hecho algún cambio
ya sabéis cómo debéis guardar que es
clicando en publicar es lo mismo que
guardar y quedará publicado nuestro
cambio o guardado genial a continuación
nos vamos a ir a menú en móvil y aquí
haremos una serie de cambios que
realmente ya sabemos cómo funciona pero
me gustaría enseñarlos brevemente aquí
podemos ver el menú que tenemos
actualmente que se abre desde la
izquierda y tiene este formato pero si
quisiéramos cambiarlo podemos aplicar
aquí en lista desplegable y veréis cómo
varía
vamos a darle otra vez y veis cómo se
abre de arriba a abajo luego podemos
poner en pantalla completa será otro
diseño distinto vamos a verlo
clicamos de nuevo en el menú y vemos que
aparece vale ya es cuestión de que
vosotros elijáis el estilo que más os
gusta yo lo voy a dejar en como esta
barra lateral
muy bien lo siguiente que vamos a ver es
el texto en nuestro caso se llama menú
pero podría llamarse información por
ejemplo
y aparecería aquí información vamos a
dejar menú que yo creo que es lo más
común y lo más sencillo
también podemos quitar el texto y que no
aparezca realmente nada simplemente las
líneas yo lo voy a dejar por sencillez
podemos variar el icono en vez de tres
líneas pues otros
yo voy a dejar conectada pero bueno
porque veáis alguno distinto
el formato realmente en casi todos es
muy similar realmente no sé si merece la
pena cambiarlo simplemente el que le
guste otro pues que lo elija la
dirección y que se abre a nuestro menú
podemos elegirlo
antes había de izquierda a derecha ahora
si clicamos habilidad de derecha a
izquierda vale son cosas muy sencillas
que si vamos probando las iremos
descubriendo también son muy intuitivas
probad buscar y elegir la opción que más
os guste y vamos a seguir aquí podemos
cambiar los colores como hicimos
anteriormente por ejemplo color de fondo
y una elegir por ejemplo el verde
simplemente porque veáis el cambio si
clicamos veis cómo se queda todo en
verde vale esto ya es personal elegido
el que vosotros queráis muy bien todos
estos ajustes se refieren a colores ya
sabemos cómo funcionan nos vamos hacia
arriba y vamos a continuar también
podemos quitar la barra de búsqueda hay
un ajuste que nos permite deshabilitar
lo vale en caso de que alguien adquiere
ctar seguimos por tipografía ahora y nos
vamos a menú principal voy a poner el
formato ordenador para que todo sea más
claro vale
muy bien vamos a seguir ahora por
familia de la fuente y aquí podremos
elegir si queremos cambiar el estilo de
letra
en caso de que alguien quiera poner el
mismo estilo de letra que tenemos aquí
en nuestro menú simplemente tendríamos
que irnos aquí a la página que tenemos
aquí abierta con nuestro sitio web
editar con elementos para poder
modificarlo y ver qué fuente teníamos en
el título amamos el surf
vamos a verlo rápidamente clicando en el
título vale estilo tipografía y vemos
que tenemos fuga igual vale pues nos
vamos aquí y vamos a buscar fuga cuán
rápidamente
aquí está perfecto no tenemos ya el
mismo formato yo por su sencillez lo voy
a dejar de nuevo en el que nos venía por
defecto vale pero ya sabéis que si
queréis tener todo vuestro sitio web con
la misma tipografía podéis hacerlo así
aquí podemos cambiar el grosor de la
fuente el estilo el tamaño si queremos
que sea un poco más grande de nuestro
menú por ejemplo ya poner 20 vale ya
depende un poco de vosotros lo dejaré de
nuevo un 13 que creo que es mejor el
espacio de entradas letras va de son
ajustes que ya hemos visto realmente con
elementos y que son muy sencillos y que
cada uno puede modificar como quiera
bien vamos a volver tras haber visto
esto vale lo siguiente que veremos
brevemente será menú en móvil para verlo
más claro vamos a aplicar en formato
móvil y aquí tenemos una serie de
cambios que ya hemos visto realmente que
son el tamaño el estilo de la fuente
tipográfica el espacio entre las letras
vale simplemente ir probando como ya os
he dicho muchas veces y son cambios que
conocemos
volvemos atrás y si queremos podemos
guardar lo que hemos hecho no hemos
hecho mucho pero lo guardamos si queréis
clicamos en publicar
perfecto genial ya hemos llegado al
final de este tutorial en el e intentado
enseñaros lo más básico y fundamental de
elementos
wp tanto elementos como usan wp nos
ofrecen centenares de ajustes
modificaciones y ediciones posibles
quieres descubriendo y probando conforme
vayáis creando vuestro sitio web pero
sin duda ya estáis preparados para
construir vuestro maravilloso sitio web
como os digo hay muchísimos cambios que
hacer que podéis ajustar y una libertad
absoluta para crear el sitio web que
vosotros d6 simplemente espero que
hayáis aprendido y que todo haya quedado
suficientemente claro en caso de no ser
así si tenéis alguna duda o algún
problema por favor hacer que lo saber en
los comentarios y también si realmente
os ha gustado este vídeo dejad un me
gusta a un like y yo sabré que detrás de
todo este esfuerzo hay gente a la que le
ha servido y le ha gustado el vídeo y si
estáis interesados en seguir aprendiendo
sobre marketing online simplemente
suscribiros a mi canal de youtube y
seguiré subiendo vídeos que puedan ser
lo más interesante posible
muchas gracias a dios'
