Continuando con el contenido de la pagina, se hará uso una nueva sección creándola de la misma forma

que la sección del header. Se debe oprimir el botón rojo con el signo de mas (+) e indicamos que sea
de una sola columna, al igual que con la sección anterior cambiaremos la opción de “Ancho del
contenedor” de “Caja” a “Ancho completo”. Otro cambio que se realizara a esta sección es ir a la
pestaña “Avanzado” y especificar un margen con el motivo de generar un espacio entre esta nueva
sección y el Header.
Debajo del componente “Editor de texto” haremos uso de un elemento de “Sección interna” igualmente a los anteriores
cambiamos de “caja” a la característica “Ancho completo”. Por defecto al agregar una sección interna, se adicionan
solamente dos columnas. Situando el mouse sobre una de las columnas y haciendo clik derecho aparecerá un menú con
la opción de agregar mas columnas en la sección interna.
En estas columnas ingresaremos un componente llamado “Cuadro de imagen” en el cual colocaremos
imágenes de los biomas y una pequeña descripción de estos lugares. En estos cuadros es posible
agregar un enlace que dirija a otra pagina en el sitio donde el usuario visualice todos los viajes
disponibles según el bioma que selecciono, aunque en este ejemplo no crearemos una pagina tan
completa, va a sernos muy útil para la pagina final.
Al igual que los componentes de Imágenes, al cliquear sobre la sección de imágenes se abrirá la
galería donde es se pude seleccionar la imagen deseada.
La siguiente sección que es conocida en el mundo del diseño web como “llamada a la acción”. Se
trata de la forma de llamar la atención del usuario que esta visitando nuestra pagina. Este tiene
como finalidad conseguir que el usuario realice algún tipo de acción pulsando en un botón
determinado.
Para esto comenzaremos agregando nuevamente una sección, al igual que los casos anteriores, haremos
que se extienda a lo ancho y le daremos un tamaño fijo.
Similar a lo realizado con el header de la pagina, se agregará un fondo, con la diferencia que esta vez será solo una imagen
y se realizarán algunos ajustes: Posición: Centro Centro, para que la imagen se centre en los ejes vertical y horizontal.
Adjunto: Fijo, para que la imagen se mantenga fija mientras se escrolea, Repetir: No-repetir, cuando una imagen no tiene el
tamaño suficiente para abarcar todo el fondo, pro defecto la imagen se repite para rellenar todo el espacio que no pudo
cubrir, en esta opción indicaremos que no lo haga, y Tamaño: Abarcar, para que la imagen se estire y abarque todo el
espacio de fondo del contenedor
Luego de las modificaciones quedaría como se muestra en el video, observemos como la imagen queda
en una posición fija mientras se navega a través de la pagina, esto se conoce como el efecto
paralax.
Luego en la sección se insertará un componente “Encabezado” el cual se centrará, y se
le cambiará el color, para complementar la imagen y complementar la tarea de llamar al
usuario a la acción.
Debajo del Encabezado que se agrego anteriormente se insertará un elemento “Editor de
texto” al cual también centraremos y cambiaremos el color
Y por último en esta sección se hará uso de un componente
“botón” al cual se le colocará un texto que incite a pulsarlo. Se
centrará el texto, se le dará un icono de la biblioteca de iconos que
nos brinda Elementor. Le cambiaremos el color y si ya hubiésemos
creado una pagina donde el usuario pudiese elegir y reservar un
viaje le colocaríamos el link hacia esta.
Para la siguiente sección que será informativa, donde se explicará resumidamente los tipos de viajes
que se ofrecen, haremos uso de una sección como las usamos anteriormente, haciendo que la sección se
extienda a lo largo de la pagina, definiremos un margen para que se separe de la sección anterior y
agregando un componente “Pestaña”
Agregaremos dos pestañas mas haciendo click en “Añadir Elemento”. Luego de agregar en la opción de Alineación
podemos indicarle que las pestañas ocupen todo el espacio del contenedor.
Al situarnos sobre una de las pestañas se puede apreciar que esta cuenta con un editor de texto, los editores de texto
no solo permiten agregar texto, también brinda otras posibilidades.
Las pestañas las colocaremos como titulo, por ejemplo, en la primera el titulo será “Turismo de
esparcimiento” y agregaremos un texto explicando de que trata. En la esquina superior izquierda del
editor de texto se encuentra un botón que dice “Añadir medios” al pulsarlo se nos abrirá nuestra
galería y podremos añadir elementos desde la biblioteca, en esta oportunidad solo se agregara una
imagen.
Debemos revisar muy bien, cual seria la imagen adecuada, si la imagen que colocamos es demasiado grande, podemos
editar el tamaño de la imagen o mejorar su aspecto de forma externa a la pagina. Sin embargo nosotros podemos al hacer
click a la imagen en el editor de texto, desplegar varias opciones que nos permitirá hacer una edición simple. El icono que
tiene forma de lápiz abrirá una nueva ventana donde se permite editar el tamaño de la imagen.
Una vez editado el tamaño es posible experimentar con la alineación del contenido:
Realizaremos el mismo procedimiento para los demás. Si vamos a la sección de “HTML” en el editor de texto de cualquiera
de las pestañas, se hace evidente como trabaja el editor de texto, obsérvese que lo que realmente hace el editor es
incrustar etiquetas HTML. Lo que nos abre un gran numero de posibilidades.
 Uso de Elementor - Continuación
Google Maps: Elementor es una herramienta que constantemente está evolucionando y, el hecho de
implementar los mapas de Google para determinar la ubicación, lo hace más completo. Si deseamos
añadirlo, recordemos que debemos indicar la dirección. Podemos permitir el hacer zoom o bloquear las
funciones de lupa, todo depende de nuestros gustos y necesidades.
Icono: Para la ubicación de estos, primero debes colocar un fondo redondo o cuadrado y colocar el tamaño
deseado colocando los colores que más se destacarán y los que no son tan relevantes.

También te permite hacer degradados y colocar emoticones encima. Incluso puedes hacer que giren y darles
un toque especial y diferente o ir variando de diseño cada semana. Modifícalo hasta que quedes conforme.
Cuadro de imagen: Las opciones de cuadro de imagen son bastante sencillas y su uso es especial para
añadir una imagen enmarcada y que tenga un título o párrafo en su parte posterior. Cuando nos referimos
a que es un Page Builder libre para editar, significa que todo lo podemos modificar.
En este caso, hay herramientas de edición que podemos usar antes de subir la imagen. Luego, solo nos
queda ver como se ve en la web y un dispositivo móvil. Normalmente a los cuadros de imagen se les
coloca un encabezado de texto que resalte.
Caja de icono: Similar al anterior, este nos permite colocar un incono enmarcado
con un encabezado y un texto.
galería básica: Es una herramienta que está un poco limitada. Para editarlas solo es
necesario que ir seleccionando las columnas, bordes, los fondos, el color y el
tamaño hasta que lograr que tenga buen aspecto.
Carrusel de i m igenes: Muy similar a la opción anterior, solo que en este caso podemos hacerlos
deslizantes o como muchos los llaman ‘Sliders’. E s una herramienta muy buena en el caso de
comercializar algo o hacer publicidad. Tienes la opción de colocar un enlace interno el cual le permita al
usuario navegar más a fondo.
Podemos modificar y tener control absoluto para hacer que funcione como queramos. Por ejemplo, en
cómo será la transición, en qué momento quieres que exista una pausa y el tiempo que durará. Si
simplemente algo no nos gusta, podemos eliminarlo o reemplazarlo por otro.
Lista de iconos: Tenemos hasta 8 diseños predeterminados con colores del sistema permite subir algún
diseño que nos guste o se adapte mejor a nuestro diseño de web. Además de todo esto, si quieres usar
una viñeta diferente para cada texto lo puedes hacer sin ningún problema, solo debes establecerla y ya.
Algunas pueden funcionar como gif dependiendo si el archivo es muy pesado o no.
Espaciador: Puede que consideres algo innecesario ya que para eso están los márgenes o podemos situar
las cosas donde deseamos. Sin embargo, para aquellos que recién comienzan a diseñar una página web,
el espaciador es un fuerte aliado.
Si tenemos un texto y queremos dejar mayor espacio al predeterminado debemos usar el espaciador.
S u finalidad es que todo el contenido no se vea “aglomerado”. Ten en cuenta que estos son
únicamente espacios en blanco que te ayudarán a correr o posicionar un elemento dentro de la
página que construyes.
Pestañas: Con esta opción puedes añadir la cantidad de pestañas y divisores que deseemos. Puedes
personalizar todas las paginas iguales o hacerlo diferente en cada una de ellas. La idea es que nuestro
contenido esté repartido de forma cómoda tanto para nosotros como los lectores.
Acordeón: En algunos casos las paginas ya están sobrecargadas de contenido, pero hay cosas que
resaltar. Con el acordeón se resaltan partes importantes y se comprime la información para evitar que el
usuario haga mucho scroll. Puedes escoger un diseño o modificarlo. Si el texto que coloques no es
suficiente, puedes hacer que una palabra tenga un enlace interno o colocar uno externo para que mejore
la experiencia.
Alternar: es exactamente lo mismo que un acordeón, solo que s u s símbolos cambian, pero la función es
igual. En este caso el símbolo de “+” va encerrado en un círculo y cambiará por flechas, chulitos, trébol o
cualquier otro símbolo que se te ocurra.
Iconos sociales: Elementor ofrece una enorme variedad de iconos sociales. Si nuestro sitio web tiene redes
sociales relacionadas al mismo tema, es importante enlazarla con este medio. Con ese objetivo claro, es
seguro que nuestras visitas aumenten.
Para esto, debes establecer uno y colocar un enlace interno para poder redirigir a las personas.
Elementor nos da la libertad modificar el color, espaciado, forma, diseño, lugar, etc… Además de eso,
tiene una herramienta de diseño propio; si sabes dibujar y trazar bien, podrás crear nuestros propios
iconos.
Barra de progreso: Este constructor visual te da la posibilidad de añadir una barra para ir aumentando el
progreso de algo. Un ejemplo muy claro es cuando se pide ayuda económica para algo y las personas van
donando, esta barra indica el momento que ya llegó al límite necesario.
A pesar de que no es automático, si ayuda mucho en lo visual. WordPress por defecto no nos permite
realizar nada esto, pero con Elementor es posible. Para poder colocar la opción, debes buscar en la barra
superior el icono y seleccionar uno que te guste para después editarlo y adaptarlo al diseño de la web. No
necesitas tener conocimientos avanzados de edición ya que con solo arrastrar y poner todo estará listo.
SoundCloud: Puedes que nuestra pagina tenga algo que ver con música y esta es una de las formas más
sencillas de agregar una canción en concreto. Este elemento nos permite permite acortar la canción,
modificarla, cambiarle el tono y crear nuevos ficheros de audio para que las personas logren descargar o
escuchar, controlar la cantidad de veces de reproducción y muchas más.
Existen otros elementos, su uso es mas limitado, debido que necesitan algunos
elementos mas específicos. Otros pertenecen a la versión pro, la cual es pago.
Ahora vamos a utilizar parte de los conocimientos adquiridos en el modulo 1. En la ultima pestaña, en la
sección de HTML en el editor de texto, construiremos un formulario de contacto con HTML, y este
aparecerá en su respectiva pestaña, lo que quiere decir que las posibilidades dependerán de nuestro
manejo de HTML.
Este seria el código del formulario:

<form action="#">
<label for="correo">Correo:</label><br>
<input type="text" id="correo" placeholder="[email protected]"><br><br>
<label for="Msj">Mensaje:</label><br>
<textarea id="textarea" rows="10" cols="50">Escriba su mensaje aquí</textarea><br><br>
<input type="submit" value="Enviar"> <br><br>
<input type="reset" value="Borrar">
</form>
Por último, se agregará el footer de la página, haciendo uso de una sección igual a las creadas
anteriormente, donde dentro de ella se agregarán dos elementos “Sección internas” la superior con 5
columnas y la inferior con 1 columna. En las superiores agregaremos componente “HTML” donde
escribiremos código HTML.
Dentro de cada uno de estos elementos HTML habrá una etiqueta h4 para el titulo y una lista
desordenada para el menú, esta lista estará compuestas por enlaces, es decir etiquetas <a> dentro
de las <li>. En total se crearán 4 lista. Se realizó de esta manera con fines didácticos debido a
que otra alternativa seria ir al gestor de menú en el escritorio de Wordpress, crear 4 nuevos
menús, y agregarlos con componentes “menú” al igual que el menú de navegación en el header.
Códigos para cada una de las listas del footer:

<h4>Lugares</h4>
<ul style="list-style:none; font-size:20px; padding:0;">
<li><a href="#">Playas</a></li>
<li><a href="#">Montañasr</a></li>
<li><a href="#">Bosques</a></li>
<li><a href="#">Parques nacionaes</a></li>
<li><a href="#">Deciertos</a></li>
</ul>
Códigos para los productos:

<h4>PRODUCTOS</h4>
<ul style="list-style:none; font-size:20px; padding:0;">
<li><a href="#">Luganes</a></li>
<li><a href="#">Equipo de acampar</a></li>
<li><a href="#">Viajes</a></li>
<li><a href="#">merchandising</a></li>
</ul
 <h4>Destinos</h4>
Códigos para los destinos:
<ul style="list-style:none; font-size:20px; padding:0;">

<h4>Destinos</h4>
>ul style=“list-style:none; font-size:20px; padding:0;">
<li><a href="#">Brasil</a></li>
<li><a href="#">Colombia</a></li>
<li><a href="#">Destinos</a></li>
<li><a href="#">Egipto</a></li>
<li><a href="#">Francia</a></li>
<li><a href="#">Venezuela</a></li>
</ul>
Y por ultimo, códigos para los contactos:

<h4>Contacto</h4>
<ul style="list-style:none; font-size:20px; padding:0;">
<li>Telefono: 555555555</li>
<li>Direccion: Av buena vista</li>
<li>Email: [email protected]</li>
<li>Redes sociales:</li>
</ul>
En la sección interna de contacto debajo del bloque HTML agregamos un elemento Iconos sociales,
agregamos unos iconos mas, ajustaremos el tamaño, la alineación y el margen superior para
posicionarla donde mas cerca de la lista.
Y por último en la segunda sección interna, se agrego un elemento “Copyright”, el cual alineamos
al centro y quedara listo, este componente toma el titulo de la pagina y el año actual.
El resultado final se ve a continuación. Esta es una página bastante básica y con un amplio margen
de mejora. Por lo tanto vamos a poner a prueba los conocimientos y creatividad mejorando esta
pagina web, agregando contenido, adaptarla a diferentes tamaños de dispositivos, cambiado la
distribución, adecuando las imágenes, aplicar paletas de colores para la pagina y todo lo considere
que podría mejorar la experiencia del usuario. Al finalizar la clase vamos a revisar los resultados.
Anteriormente hemos visto las opciones de edición que nos brinda Elementor, y todas las opciones que podemos encontrar en Wordpress. Para
esta ultima sección crearemos una pagina básica totalmente desde cero utilizando este plugin. Para esta actividad crearemos una pagina con
temática de viajes.
La versión gratuita de Elementor es limitada en cuanto los componentes que tenemos disponibles, sin embargo; brinda las herramientas suficientes
para crear una pagina funcional. En esta ocasión se hará uso de un nuevo plugin que potencia Elementor. Para instalarlo debemos dirigirnos al
escritorio de Wordpress a la sección de plugin, en esta sección se debe buscar, instalar y activar: Elementor Header & Footer Builder. Este plugin
potencia Elementor, agregando nuevas herramientas que permiten construir Header y Footer de una manera mas sencilla.
Una vez instalada debemos ir a la sección de paginas en el escritorio de Wordpress,
crear una nueva pagina y la publicarla. Una vez creada aparecerá la opción “Editar con
Elementor”. En caso de estar trabajando en el mismo servidor de clases anteriores, es
posible que pueda apreciar algunas de las configuraciones realizadas anteriormente.
Para dejar la plantilla totalmente en blanco solo se necesitamos seguir dos pasos:

1. Ir a la sección de ajuste de Elementor en el icono con forma de engranaje en la parte inferior

del menú.
2. En la opción “Estructura de la pagina” elegimos la opción “Elementor canvas”.
Una vez realizados los preparativos iniciales es momento de comenzar con la creación de la pagina.

Primero comenzando con el Header. E s necesario crear una nueva sección oprimiendo el botón rojo con el signo: (+), se mostrará una
ventana que permitirá elegir la cantidad de columnas que tendrá la nueva sección. Para el Header en este ejemplo, se elegirá la primera
opción, no obstante, la estructura siempre dependerá de los requerimientos del diseño que se este implementando.
Una vez elejida la cantidad de columnas se creará una sección en la parte superior.

Para seleccionar una sección solo se debe Hacer click el botón con los seis (6) puntos en el borde superior de la sección. Una vez
seleccionada se puede observar que la columna interna de la sección no ocupa el total del ancho de esta, para extender la columna en la
opción “Ancho del contenido” cambiar el valor a “Ancho completo”.
Para editar el alto de la sección, un poco mas abajo se encuentra la opción de “Alto”, para este
ejemplo se seleccionará el valor “Altura mínima”. Una vez seleccionada aparecerá una barra que
permitirá elegir la altura mínima que tendrá el header.
Por defecto la columna de una sección se posiciona en el centro, en este caso es necesario que la columna se posicione
en el extremo superior de la sección.
Debajo de la opción de altura de la sección tenemos la opción de “posición de la columna” elegiremos
la opción “Arriba” y la columna se posicionará como se indico. También se elegirá que elemento HTML
será esta sección. Hay que tener en cuenta que es necesario elegir la etiqueta correcta por motivos
del SEO, acá se elegirá “header”.
En la pestaña de “Estilo” se observa que la primera sección es la de “Fondo”. En este apartado se
encuentra la opción de “Tipo de fondo” que permite elegir entre un fondo de determinado color, un
video, una imagen y un fondo tipo carrusel o slider. En este ejemplo se utilizará un fondo tipo
carrusel.
Al seleccionar esta opción aparecerá una sección de imágenes, si hacemos click en el signo mas: (+) de esta nueva sección
se abrirá la biblioteca de medio donde es posible realizar la selección de las imágenes del carrusel.
Luego de agregar las imágenes, es posible configurar otros aspectos como tipo transición, duración
de la transición, posición de las imágenes de fondo, tamaño de las imágenes de fondo, activar el
efecto “ken burms” el efecto de alejamiento en las imágenes como se puede apreciar en el video en la
presentación. Existen mas opciones como los bordes, capa de fondo, divisor de forma y tipografía,
siéntanse libres de experimentar con estas opciones y personalizar aun mas su propia pagina.
Volvamos con el Header, en la columna de la sección. Vamos a agregar un componente “Sección
interior”, hacemos que esta ocupe la totalidad del ancho de la columna de igual forma que se realizo
con la sección anterior. Esta sección interior ayudará a posicionar los elementos del Header. Por
defecto el elemento sección interior se crea con dos columnas.
Al colocar el mouse sobre una columna aparecerá un recuadro negro en la esquina superior, al hacer
click sobre el, se abrirá un menú con las opciones que se pueden editar de la columna. En este
ejemplo se modificará el ancho de la columna, como se esta modificando una de las columnas del
elemento “Sección interior” indicando que ocupe solo el 10%, la segunda columna ocupara el 90% de
espacio restante.
La columna mas pequeña la utilizaremos para agregar el logo de la página, arrastrando el componente
Imagen.
Una vez agregado este componente al hacer click en “Seleccionar imagen” se abrirá la biblioteca donde se puede indicar la imagen que se
usará como logo de la pagina:
En la pestaña de “Estilo” se pueden realizar varios ajustes, como tamaño del logo y el borde de la
imagen. Para esta página vamos a usar un borde solido, de color azul y un radio del borde de 50px
para que la imagen tome forma circular. Para el componente “Imagen” existen otras opciones. En la
pestaña de avanzado es posible colocarle mascaras, animaciones, ajustes de fondo entre otros.
En la columna que tenemos al lado derecho del logo es donde irá el menú de navegación, sin embargo,
este menú no se puede crear directamente en Elementor, debemos regresar al escritorio de WordPress,
y en la sección de Apariencia se encuentra la subsección Menús, en clases anteriores se mostro el
procedimiento para la creación de un menú, sin embargo, veremos rápidamente como crear uno.
Primero debemos colocar el nombre del menú y hacer click en el botón “Crear menú”. Una vez creado,
es posible seleccionar las paginas que nosotros creáramos anteriormente,
Al seleccionar y agregar estas paginas se crearan enlaces en el menú hacia estas. También Es
posible crear enlaces personalizados, y agregarle una URL. Estos enlaces son de utilidad al momento
de enlazar con sitios externos como por ejemplo una red social o para crear enlaces en el menú de
paginas de nuestro sitio web que aun no han sido generadas. Una vez agregados todos los enlaces
necesarios solo resta guardar los cambios y el menú ya estará creado.
Una vez creado el menú volveremos a la edición de la pagina con Elementor, bajamos hasta la sección
“Elementor Header & Footer” el cual es el plugin instalado anteriormente. De este plugin se hará uso
un componente “Menú de navegación”:
Observemos que en la opción “Menú” aparece el valor “top menú” este es el menú que se creo
recientemente, por defecto al integrar el componente de “menú de navegación”. Vamos a seleccionar el
primer menú se ha creado, en este caso como solo tenemos el menú “top menú” el elemento tomara este,
lo que quiere decir que es posible crear varios menús y seleccionar el que se desea agregar en
determinada posición en la pagina.
Solo nos queda personalizar el menú. En la pestana “Contenido” se encuentra la sección “Diseño”, esta
sección permite especificar la orientación del menú en horizontal o vertical, también la alineación,
los iconos de los submenús y la animación de estos al desplegarse. En este ejemplo solo se cambiará
la alineación del menú y se especificará que se alinee hacia la derecha como normalmente se ve en una
pagina web.
Anteriormente hemos visto las opciones de edición que nos brinda Elementor, y todas las opciones que podemos encontrar en Wordpress. Para
esta ultima sección crearemos una pagina básica totalmente desde cero utilizando este plugin. Para esta actividad crearemos una pagina con
temática de viajes.
La versión gratuita de Elementor es limitada en cuanto los componentes que tenemos disponibles, sin embargo; brinda las herramientas suficientes
para crear una pagina funcional. En esta ocasión se hará uso de un nuevo plugin que potencia Elementor. Para instalarlo debemos dirigirnos al
escritorio de Wordpress a la sección de plugin, en esta sección se debe buscar, instalar y activar: Elementor Header & Footer Builder. Este plugin
potencia Elementor, agregando nuevas herramientas que permiten construir Header y Footer de una manera mas sencilla.
Una vez instalada debemos ir a la sección de paginas en el escritorio de Wordpress,
crear una nueva pagina y la publicarla. Una vez creada aparecerá la opción “Editar con
Elementor”. En caso de estar trabajando en el mismo servidor de clases anteriores, es
posible que pueda apreciar algunas de las configuraciones realizadas anteriormente.
Para dejar la plantilla totalmente en blanco solo se necesitamos seguir dos pasos:

1. Ir a la sección de ajuste de Elementor en el icono con forma de engranaje en la parte inferior

del menú.
2. En la opción “Estructura de la pagina” elegimos la opción “Elementor canvas”.
Una vez realizados los preparativos iniciales es momento de comenzar con la creación de la pagina.

Primero comenzando con el Header. E s necesario crear una nueva sección oprimiendo el botón rojo con el signo: (+), se mostrará una
ventana que permitirá elegir la cantidad de columnas que tendrá la nueva sección. Para el Header en este ejemplo, se elegirá la primera
opción, no obstante, la estructura siempre dependerá de los requerimientos del diseño que se este implementando.
Una vez elejida la cantidad de columnas se creará una sección en la parte superior.

Para seleccionar una sección solo se debe Hacer click el botón con los seis (6) puntos en el borde superior de la sección. Una vez
seleccionada se puede observar que la columna interna de la sección no ocupa el total del ancho de esta, para extender la columna en la
opción “Ancho del contenido” cambiar el valor a “Ancho completo”.
Para editar el alto de la sección, un poco mas abajo se encuentra la opción de “Alto”, para este
ejemplo se seleccionará el valor “Altura mínima”. Una vez seleccionada aparecerá una barra que
permitirá elegir la altura mínima que tendrá el header.
Por defecto la columna de una sección se posiciona en el centro, en este caso es necesario que la columna se posicione
en el extremo superior de la sección.
Debajo de la opción de altura de la sección tenemos la opción de “posición de la columna” elegiremos
la opción “Arriba” y la columna se posicionará como se indico. También se elegirá que elemento HTML
será esta sección. Hay que tener en cuenta que es necesario elegir la etiqueta correcta por motivos
del SEO, acá se elegirá “header”.
En la pestaña de “Estilo” se observa que la primera sección es la de “Fondo”. En este apartado se
encuentra la opción de “Tipo de fondo” que permite elegir entre un fondo de determinado color, un
video, una imagen y un fondo tipo carrusel o slider. En este ejemplo se utilizará un fondo tipo
carrusel.
Al seleccionar esta opción aparecerá una sección de imágenes, si hacemos click en el signo mas: (+) de esta nueva sección
se abrirá la biblioteca de medio donde es posible realizar la selección de las imágenes del carrusel.
Luego de agregar las imágenes, es posible configurar otros aspectos como tipo transición, duración
de la transición, posición de las imágenes de fondo, tamaño de las imágenes de fondo, activar el
efecto “ken burms” el efecto de alejamiento en las imágenes como se puede apreciar en el video en la
presentación. Existen mas opciones como los bordes, capa de fondo, divisor de forma y tipografía,
siéntanse libres de experimentar con estas opciones y personalizar aun mas su propia pagina.
Volvamos con el Header, en la columna de la sección. Vamos a agregar un componente “Sección
interior”, hacemos que esta ocupe la totalidad del ancho de la columna de igual forma que se realizo
con la sección anterior. Esta sección interior ayudará a posicionar los elementos del Header. Por
defecto el elemento sección interior se crea con dos columnas.
Al colocar el mouse sobre una columna aparecerá un recuadro negro en la esquina superior, al hacer
click sobre el, se abrirá un menú con las opciones que se pueden editar de la columna. En este
ejemplo se modificará el ancho de la columna, como se esta modificando una de las columnas del
elemento “Sección interior” indicando que ocupe solo el 10%, la segunda columna ocupara el 90% de
espacio restante.
La columna mas pequeña la utilizaremos para agregar el logo de la página, arrastrando el componente
Imagen.
Una vez agregado este componente al hacer click en “Seleccionar imagen” se abrirá la biblioteca donde se puede indicar la imagen que se
usará como logo de la pagina:
En la pestaña de “Estilo” se pueden realizar varios ajustes, como tamaño del logo y el borde de la
imagen. Para esta página vamos a usar un borde solido, de color azul y un radio del borde de 50px
para que la imagen tome forma circular. Para el componente “Imagen” existen otras opciones. En la
pestaña de avanzado es posible colocarle mascaras, animaciones, ajustes de fondo entre otros.
En la columna que tenemos al lado derecho del logo es donde irá el menú de navegación, sin embargo,
este menú no se puede crear directamente en Elementor, debemos regresar al escritorio de WordPress,
y en la sección de Apariencia se encuentra la subsección Menús, en clases anteriores se mostro el
procedimiento para la creación de un menú, sin embargo, veremos rápidamente como crear uno.
Primero debemos colocar el nombre del menú y hacer click en el botón “Crear menú”. Una vez creado,
es posible seleccionar las paginas que nosotros creáramos anteriormente,
Al seleccionar y agregar estas paginas se crearan enlaces en el menú hacia estas. También Es
posible crear enlaces personalizados, y agregarle una URL. Estos enlaces son de utilidad al momento
de enlazar con sitios externos como por ejemplo una red social o para crear enlaces en el menú de
paginas de nuestro sitio web que aun no han sido generadas. Una vez agregados todos los enlaces
necesarios solo resta guardar los cambios y el menú ya estará creado.
Una vez creado el menú volveremos a la edición de la pagina con Elementor, bajamos hasta la sección
“Elementor Header & Footer” el cual es el plugin instalado anteriormente. De este plugin se hará uso
un componente “Menú de navegación”:
Observemos que en la opción “Menú” aparece el valor “top menú” este es el menú que se creo
recientemente, por defecto al integrar el componente de “menú de navegación”. Vamos a seleccionar el
primer menú se ha creado, en este caso como solo tenemos el menú “top menú” el elemento tomara este,
lo que quiere decir que es posible crear varios menús y seleccionar el que se desea agregar en
determinada posición en la pagina.
Solo nos queda personalizar el menú. En la pestana “Contenido” se encuentra la sección “Diseño”, esta
sección permite especificar la orientación del menú en horizontal o vertical, también la alineación,
los iconos de los submenús y la animación de estos al desplegarse. En este ejemplo solo se cambiará
la alineación del menú y se especificará que se alinee hacia la derecha como normalmente se ve en una
pagina web.
Vamos a continuar con la edición de nuestra pagina
web.

Para mejorar la estructura de la pagina el menú debe estar bien

posicionado, debe tener una buena disposición visual y debe ser
fácil de manejar. Por lo tanto vamos a modificar su estilo para
complementar aun mas la manera en la cual esta estructurado el
menú.

En la pestaña de “Estilos”, se encuentran opciones como el

relleno entre los elementos del menú, efectos al pasar el cursor
sobre un elemento del menú, y opciones en la tipografía,
En este ejemplo solo se hará uso del “Efecto del enlace al pasar el cursor” de “Doble línea”, la
animación “Slide” y un color de tipografía blanco. En este mismo apartado tenemos las opciones “AL
PASAR EL CURSOR”, y podemos cambiar color del texto, color de fondo y efecto del color del enlace. En
este caso cambiaremos los colores del texto y del efecto del enlace
Podemos modificar nuestro menú para asegurar que se adapte correctamente a las exigencias y características de
nuestra pagina principal, en esta practica solo vamos a modificar algunos valores para observar el comportamiento del
menú y como cambia con cada uno. La idea principal es que no se maneje cualquier tipo de estilo o color para hacer
mas fácil el manejo y la lectura del menú.
Al cambiar el color de tipografía a blanco, tendremos un problema, al desplegar los sub menús, su
fondo también será blanco, por lo tanto, los textos del no tienen contraste para leerlos
correctamente. Para corregir ese inconveniente en la misma pestaña de “Estilo” encontramos la sección
de “Desplegable” y podremos modificar el color de fondo.
En estos momentos ya se tiene un menú simple pero funcional, sin embargo, hasta ahora no se ha tenido
en cuenta la vista de la pagina en su formato móvil o tabletas. Si deseemos apreciar como se vera en
estos dispositivos, solo se debe seleccionar una columna y oprimir el botón gris en la esquina
superior izquierda y se desplegará el respectivo menú para la edición de la columna.
Inspeccionando este menú encontraremos un icono de un monitor, si cliqueamos ese icono se nos
desplegara una lista donde podemos seleccionar escritorio, Tablet o móvil, al seleccionar alguno de
estos la pagina completa cambiara de tamaño mostrando como se vera en el dispositivo seleccionado
Como se puede apreciar, la imagen del logo se distorsiona y la distribución del logo y el menú cambia ya que ambas
columnas ocupan el 100% del ancho, para este caso solo se debe modificar el ancho de las columnas y el tamaño de
los elementos para que se ajusten a este dispositivo.
Se modificará el ancho de la columna del logo y le se le asignará un ancho del 4 0 % y la columna del menú ocupará el
6 0 % restante. Sin embargo, aun el logo se ve pequeño y el icono del menú se espera que se posicione a la derecha. Para
esto editaremos ambos elementos como los editamos anteriormente.
Comenzando con la edición del elemento Imagen que contiene el logo, vamos a especificar
el tamaño adecuado para que quede bien con el diseño y que este no se deforme.
También se realizara el mismo procedimiento con el icono del menú. Ingresaremos a la edición del menú en
la pestaña de Estilo y la sección “Activador del menú e icono de cierre” donde se cambiará el color del
icono, el color de fondo del icono, el tamaño del icono, la anchura del borde y el radio del borde.
Al volver al tamaño de escritorio no se pueden apreciar los cambios, debido que los cambios que se
realizan en la vista de móvil solo se aplican en esa vista, de igual manera con los cambios que se
realizan en la vista Tablet.
Continuando con la construcción de header se agregará un componente “Encabezado” justo debajo de la
sección del menú y el logo. Este encabezado se utilizara como título principal de la pagina, por lo
tanto, se debe indicar que sea una etiqueta H1, y su alineación será central.
En la pestaña de “Estilo” vamos a cambiar el color, y en la sección tipografía es posible cambiar el
tamaño, la familia tipográfica, el peso de la tipografía, altura de línea y espacio entre letras para
se adecuen mas fácilmente al diseño de la pagina.
Se agregará otro componente “encabezado” en el cual ira una especie de eslogan, el cual será una
etiqueta H2 y se alineará al margen derecho. Editamos la tipografía igual que el encabezado anterior
para se complementen.
Ahora lo posicionaremos para ubicarlo en el lugar correcto, iremos a la pestaña “Avanzado”, y en la sección de
posicionamiento se encuentra la opción de “Ancho” en esta se especificará el valor “Personalizado” y elegiremos el ancho
indicado para que el texto se ubique correctamente. También es posible usar la opción “posición” y elegir la opción
“Absoluto” esto permitirá arrastrar el elemento y posicionarlo en el lugar deseado, sin embargo, Elementor no recomienda
usar en exceso esta opción ya que para el diseño resposive en Elementor se considera mala practica y solo se debe usar
en todas nuestras paginas.
¡El header de la pagina ya estaría completo! aunque se siente un poco vacío. En la clase vamos a
hacer las modificaciones necesarias para se adecue a la idea que tenemos cada uno de nosotros para la
pagina web. Una vez terminadas las modificaciones vamos a compartir nuestra pagina en clase.
Podemos utilizar el ejemplo de la pagina de National Geographic
para revisar como vamos a manejar los colores y la experiencia
del usuario con la pagina.

En el modulo 1 revisamos los temas relacionados con paletas de

colores, experiencia del usuario, y diseño general.

La pagina contiene la marca, maneja los colores característicos

de la revista, y el logo principal. Y logra adecuarlo a las imágenes
o textos de la pagina para lograr que el usuario logre identificar
fácilmente en que pagina se encuentra navegando, sin tener
mucha información, mas que la representacion visual de la
marca.
Continuando con el contenido de la pagina, se hará uso una nueva sección creándola de la misma forma
que la sección del header. Se debe oprimir el botón rojo con el signo de mas (+) e indicamos que sea
de una sola columna, al igual que con la sección anterior cambiaremos la opción de “Ancho del
contenedor” de “Caja” a “Ancho completo”. Otro cambio que se realizara a esta sección es ir a la
pestaña “Avanzado” y especificar un margen con el motivo de generar un espacio entre esta nueva
sección y el Header.
Esta nueva sección será utilizada para crear un apartado donde se
categorizará los lugares de destino según el bioma. Con las categorías
podemos mejorar la experiencia del usuario facilitando su búsqueda de
destino según una característica especial.

Para comenzar colocaremos un Encabezado, el cual

alinearemos en el centro.

Debajo de ese encabezado se agregará un componente “Editor de

texto”, y escribiremos una descripción, este texto también lo dejaremos
centrado para mejorar la estética en la pagina.
Debajo del componente “Editor de texto” haremos uso de un elemento de “Sección interna” igualmente a los anteriores
cambiamos de “caja” a la característica “Ancho completo”. Por defecto al agregar una sección interna, se adicionan
solamente dos columnas. Situando el mouse sobre una de las columnas y haciendo clik derecho aparecerá un menú con
la opción de agregar mas columnas en la sección interna.
En estas columnas ingresaremos un componente llamado “Cuadro de imagen” en el cual colocaremos
imágenes de los biomas y una pequeña descripción de estos lugares. En estos cuadros es posible
agregar un enlace que dirija a otra pagina en el sitio donde el usuario visualice todos los viajes
disponibles según el bioma que selecciono, aunque en este ejemplo no crearemos una pagina tan
completa, va a sernos muy útil para la pagina final.
Al igual que los componentes de Imágenes, al cliquear sobre la sección de imágenes se abrirá la
galería donde es se pude seleccionar la imagen deseada.
La siguiente sección que es conocida en el mundo del diseño web como “llamada a la acción”. Se
trata de la forma de llamar la atención del usuario que esta visitando nuestra pagina. Este tiene
como finalidad conseguir que el usuario realice algún tipo de acción pulsando en un botón
determinado.
Para esto comenzaremos agregando nuevamente una sección, al igual que los casos anteriores, haremos
que se extienda a lo ancho y le daremos un tamaño fijo.
Similar a lo realizado con el header de la pagina, se agregará un fondo, con la diferencia que esta vez será solo una imagen
y se realizarán algunos ajustes: Posición: Centro Centro, para que la imagen se centre en los ejes vertical y horizontal.
Adjunto: Fijo, para que la imagen se mantenga fija mientras se escrolea, Repetir: No-repetir, cuando una imagen no tiene el
tamaño suficiente para abarcar todo el fondo, pro defecto la imagen se repite para rellenar todo el espacio que no pudo
cubrir, en esta opción indicaremos que no lo haga, y Tamaño: Abarcar, para que la imagen se estire y abarque todo el
espacio de fondo del contenedor
Luego de las modificaciones quedaría como se muestra en el video, observemos como la imagen queda
en una posición fija mientras se navega a través de la pagina, esto se conoce como el efecto
paralax.
Luego en la sección se insertará un componente “Encabezado” el cual se centrará, y se
le cambiará el color, para complementar la imagen y complementar la tarea de llamar al
usuario a la acción.
Debajo del Encabezado que se agrego anteriormente se insertará un elemento “Editor de
texto” al cual también centraremos y cambiaremos el color
Y por último en esta sección se hará uso de un componente “botón” al cual se le colocará un texto
que incite a pulsarlo. Se centrará el texto, se le dará un icono de la biblioteca de iconos que nos brinda
Elementor. Le cambiaremos el color y si ya hubiésemos creado una pagina donde el usuario pudiese
elegir y reservar un viaje le colocaríamos el link hacia esta.
Para la siguiente sección que será informativa, donde se explicará resumidamente los tipos de viajes
que se ofrecen, haremos uso de una sección como las usamos anteriormente, haciendo que la sección se
extienda a lo largo de la pagina, definiremos un margen para que se separe de la sección anterior y
agregando un componente “Pestaña”
Agregaremos dos pestañas mas haciendo click en “Añadir Elemento”. Luego de agregar en la opción de Alineación
podemos indicarle que las pestañas ocupen todo el espacio del contenedor.
Al situarnos sobre una de las pestañas se puede apreciar que esta cuenta con un editor de texto, los editores de texto
no solo permiten agregar texto, también brinda otras posibilidades.
Las pestañas las colocaremos como titulo, por ejemplo, en la primera el titulo será “Turismo de
esparcimiento” y agregaremos un texto explicando de que trata. En la esquina superior izquierda del
editor de texto se encuentra un botón que dice “Añadir medios” al pulsarlo se nos abrirá nuestra
galería y podremos añadir elementos desde la biblioteca, en esta oportunidad solo se agregara una
imagen.
Debemos revisar muy bien, cual seria la imagen adecuada, si la imagen que colocamos es demasiado grande, podemos
editar el tamaño de la imagen o mejorar su aspecto de forma externa a la pagina. Sin embargo nosotros podemos al hacer
click a la imagen en el editor de texto, desplegar varias opciones que nos permitirá hacer una edición simple. El icono que
tiene forma de lápiz abrirá una nueva ventana donde se permite editar el tamaño de la imagen.
Una vez editado el tamaño es posible experimentar con la alineación del contenido:
Realizaremos el mismo procedimiento para los demás. Si vamos a la sección de “HTML” en el editor de texto de cualquiera
de las pestañas, se hace evidente como trabaja el editor de texto, obsérvese que lo que realmente hace el editor es
incrustar etiquetas HTML. Lo que nos abre un gran numero de posibilidades.
 Migración del sitio web a un
hosting

Trabajar en local nos sirve para

crear nuestro sitio web sin la
necesidad de contratar un hosting.
Pero tarde o temprano
necesitaremos alojar nuestro sitio
en un servidor remoto par quede
abierta al publico
Existen muchas empresas que nos brindan servicios de hosting, pero en este caso usaremos como
ejemplo https://www.hostinger.co, la cual cuenta con un servicio de alojamiento gratuito. Este hosting
gratuito es bastante limitado ya que nos restringe la cantidad de emails que puede enviar el servidor, el
ancho de banda de nuestra web y el tamaño de almacenamiento del servidor. Sin embargo, para motivos
didácticos es mas que suficiente.
Si bajamos un poco ma s dentro de la pagina veremos los paquetes que nos ofrece esta
empresa y veremos que tenemos acceso a un paquete gratuito, que si lo comparamos con los
demás es bastante mas limitado. Para el desarrollo del curso obtenemos el hosting gratuito.
Cuando seleccionamos el paquete gratuito, se nos abrirá un formulario de registro, llenamos
los datos solicitados y nos registramos. Una vez tengamos la cuenta lista, nos llegara un
correo de verificación, debemos ingresar al correo con el que nos registramos y verificarlo.
Una vez verificado el correo, llegaremos a
una pagina de bienvenida en donde
debemos hacer click en el link al final si
queremos saltar los tutoriales. Al hacer
click en el enlace nos preguntara si
deseamos instalar Google Chrome y otros
programas complementarios, saltaremos
esos pasos hasta llegar a un formulario
donde debemos nombrar nuestro proyecto
y nos da una contraseña aleatoria Este
nombre debe ser único, así que es posible
que al colocar un nombre, ya este usado.
Debemos guardar muy bien tanto el nombre
como la contraseña ya que son los datos
que nos permitirán entrar al panel de
control de nuestro sitio mas adelante.
Llegaremos a esta pagina donde nos muestra las opciones para utilizar el page builder
que nos ofrece esta empresa, también nos muestra la opción de instalar WordPress y la
opción de subir nuestro sitio. Nosotros elegiremos la opción de subir nuestro sitio,
que nos llevara al gestor de archivos de nuestro hosting.
Ya tenemos nuestro hosting gratuito. Ahora debemos descargar nuestro sitio WordPress de
nuestro servidor local. Para hacerlo entraremos a nuestro escritorio de WordPress e
instalaremos el plugin “Duplicator – WordPress Migration Plugin”.
Una vez instalado y activado iremos a nuestro escritorio WordPress en la sección del
plugin “Duplicator” y la subsección de “Paquetes” en esta sección nos indicara que no
hay aun paquetes por lo tanto debemos oprimir el botón “Crear nuevo”
Al crear un nuevo paquete, se nos mostrara los archivos que contendrán el paquete, el nombre
del archivo, al cual, en este en este caso es una fecha y el nombre de la pagina web.

En esta pantalla no tocaremos nada, solo vamos a hacer click en siguiente.

Luego de darle siguiente, analizara los archivos y nos indicara los archivos validos, podemos
observar que no hubo ningún problema y todos los archivos son validos hora oprimiremos en el
botón “crear”
Una vez creado el paquete nos mostrara dos archivos, uno es el instalador y el otro es el
archivo que contiene nuestra pagina web, ahora debemos descargarlo:
Una vez descargamos los archivos debemos subirlos a nuestro hosting. Por motivos de seguridad es muy
probable que el hosting nos pida ingresar nuevamente a nuestra cuenta. Una vez ingresemos nos aparecerá
esta pantalla, podemos ver que el primer sitio que nos aparece es el sitio que creamos anteriormente, por
ultimo vamos a hacer click a “Administrar sitio web”.
Ahora vamos al administrador de archivos haciendo click en la ventana o en el menú lateral en
administrador de archivos, se nos abrirá una ventana con la opción “Subir archivos” el cual nos llevará al
gestor de archivo donde nos encontrábamos anteriormente.
En este gestor de archivos entraremos en la carpeta “public_html” arrastraremos y soltaremos los archivos
que descargamos de nuestro WordPress, esperaremos a que suban los archivos y luego regresaremos al panel
de control del nuestro hosting e iremos nuevamente a Herramientas  Administrador de bases de datos.
Crearemos una nueva base de datos haciendo click en el boto “crear nueva base de datos” llenaremos los
campos y creamos la nueva base de datos. Podemos observar que a la base de datos creada se le agrego un
identificador, es importante guardar el nombre de usuario, el nombre de la base de datos y la contraseña
que especificamos anteriormente.
Para continuar, regresaremos a “Mis sitios” y observemos que hay un enlace en la parte
inferior de la ventana, el cual es el enlace de sitio. Ingresaremos al enlace y nos
abrirá la pagina por defecto del hosting ya que aun no hemos instalado nuestro
wordpress.
Iremos en barra del navegador y en la url de nuestra pagina agregaremos
“/installer.php” para acceder al archivo installer que cargamos en la carpeta
“public_html” la url será de la siguiente manera:
“pruebademigracionruta1.000webhostapp.com/installer.php”. Recordemos que la url será
diferente para cada uno de nosotros.
Al acceder al instalador nos aparcera esta ventana en el navegador, en el cual nos dirá el estado de nuestros
archivos. En este caso nos generara dos advertencias, esto es debido a que la versión de php en el hosting es
diferente a la versión con la que trabajamos en WordPress, marcamos la opción de que aceptamos los
términos y condiciones y oprimimos “Next”.
En la siguiente ventana nos pedirá que indiquemos los datos necesarios para la conexión con la base de
datos. Estos datos están relacionados con la base de datos que creamos. Un caso particular con este
hosting es que, en algunas ocasiones, aunque diga que el host de la base de datos es “localhost” al
colocarlos y testear no se conecta y no permite avanzar con el siguiente paso, por ahora.
En caso de que nos permita avanzar iremos a la sección de gestión de bases de datos, oprimiremos el
botón que indica “Gestionar” e iremos a PhpMyAdmin y ahí podemos encontrar el servidor donde se aloja la
base de datos junto con el puerto. Debemos aclarar que, aunque el servidor se llama “localhost” no es
nuestro localhost, con coincidencia la base datos se llama “localhost” y usa el puerto “3306”.
En el paso 3 solo nos indicara el nombre de nuestro sitio y la url, en este paso solo
nos limitaremos a oprimir “Next”
El paso 4 y el ultimo, reportara como han ido todos los pasos anteriores y nos pedirá ingresa al
administrador de WordPress para finalizar con la migración. E s posible que aparezca un error de conexión
con la base de datos, pero podemos solucionarlo fácilmente.
Al oprimir el botón nos llevara a la pantalla de ingreso de WordPress para acceder a Wordpress solo
debemos colocar la URL de la pagina seguido de “/wp-login.php”.
E s posible que aparezca un error de conexión con la base de datos, pero podemos solucionarlo fácilmente.
El error generalmente se presenta al realizar el procedimiento del paso 2 de la instalación con Duplicator, y
fue necesario especificar el puerto del host de la base de datos de la siguiente manera “localhost:3306”.
Para poder avanzar al siguiente paso, es posible que debamos cambiar el host de nuevo a como nos
indicaba originalmente “localhost”.
Para cambiar este parámetro, solo debemos ir a nuestro gestor de archivos en el hosting, entrar a la carpeta
“public_html” y buscaremos el archivo “wp-config.php”, entraremos a este archivo y encontraremos los
datos para la conexión con la base de datos. En la sección de “MySǪL hostname” aparecerá
“localhost:3306” solo debemos quitar el puerto y dejar solo “localhost”, guardamos los cambios y salimos.
Ingresaremos al escritorio de WordPress con el usuario y contraseña que usábamos cuando
trabajábamos en local y nuestro escritorio mostrara lo siguiente:
Ingresaremos al escritorio de WordPress como el usuario y contraseña que usábamos cuando trabajábamos
en local y nuestro escritorio es exactamente:
La migración estaría completa, ahora nuestro sitio web es accesible mediante cualquier
navegador y en cualquier parte del mundo. La URL para la pagina del ejemplo es la
siguiente: “https://pruebademigracionruta1.000webhostapp.com”