INSTALACION WORDPRESS

Instalación de Wordpress
Damos clic en “Base de datos” en esta pestaña escribiremos el nombre de nuestra base de datos y
cliclearemos en “Crear”. El nombre de la base de datos puede ser el que guste, pero es recomendable
colocar como nombre de la base de datos el mismo que el de la pagina web, en este caso le
colocaremos como nombre “wordpress” y podemos apreciar que la base de datos se creo con ese nombre

CREACION BASE DE DATOS

Instalación de Wordpress
Ya tenemos nuestro servidor Apache y nuestra base de datos creada llego el momento de
instalar Wordpress, comenzaremos descargando wordpress ingresando a
https://es.wordpress.org bajaremos hasta el final de la pagina y oprimimos “Consigue
WordPres”

Instalación de Wordpress
Llegaremos a una nueva pagina donde debemos bajar nuevamente hasta que encontraremos
el botón de descargar

Instalación de Wordpress
Nos descargara un archivo comprimido, este archivo lo descomprimiremos y se generara
una carpeta descomprimida, dentro de esta nueva carpeta encontraremos otra llamada
“wprdpress” copiaremos la carpeta “wordpress” y la pegaremos en la siguiente dirección
en nuestra computador C:\xampp\htdocs

Instalación de Wordpress
En este punto ya prácticamente tenemos WordPress, solo nos queda instalar y hacer las
configuraciones necesarias para comenzar a trabajar. Abriremos a
la siguiente dirección localhost/wordpress. Le estamos indicando
nuestra computadora la carpeta wordpress que nos redirigirá
configuración, oprimimos “¡Vamos a ello!”

Instalación de Wordpress
Llegaremos a esta pagina, en la cual llenaremos los datos solicitados, podemos ver que el primer
campo nos solicita el nombre de la base de datos, acá colocaremos el nombre que le colocamos a la
base de datos que creamos anteriormente. Lo campos de nombre de usuario colocaremos root contraseña
la dejaremos vacía. Y cliqueamos en “Enviar”

Instalación de Wordpress
Llegaremos a esta pantalla que nos indica que todo ha ido bien oprimimos “Ejecutar instalación” y
nos llevara a un formulario colocaremos los datos para crear nuestro usuario y contraseña para el
acceso al panel de control de wordpress

Instalación de Wordpress
WordPress ya esta instalado, ahora nos aparecerá la pantalla de ingreso, solo escribimos el usuario
y contraseña que acabamos de crear y ingresaremos al panel de control
Ya estamos en wordpres

Instalación de Wordpress
EL WordPress instalado en local
diferencia es que no lo puede ver
Google no puedes usar herramientas
no hay ningún problema, ya que con
publico es muy fácil.
y el instalado en un hosting web funcionan igual, la única
nadie mas que tu en tu computadora, y al no estar indexado por
gratuitas que Google ofrece como Google analytics, sin embargo,
wordpress realizar una migración de tu hosting local a un hosting

Instalación de Wordpress
CONOCIENDO WORDPRESS
A primera vista podremos sentirnos algo abrumados por toda la
información que vemos en pantalla, pero a lo largo de esta clase
iremos explicando brevemente cada uno de los apartados que se
aprecian en el menú lateral.
Primero que todo observemos la parte superior, a mano izquierda
tendremos cuatro iconos, el primero con el logo de wordpress nos
despliega una pestaña donde podemos donde podemos encontrar
información acerca del CMS.
El segundo icono nos muestra el titulo de la web, si hacemos click en
el nos llevara a nuestra pagina. Cuando realizamos la instalación,
Wordpress nos instala una pagina por defecto, la cual podemos editar
a nuestra preferencia, o simplemente comenzar una nueva pagina desde
cero
El segundo icono nos muestra el titulo de la web, si hacemos click en
el nos llevara a nuestra pagina. Cuando realizamos la instalación,
Wordpress nos instala una pagina por defecto, la cual podemos editar
a nuestra preferencia, o simplemente comenzar una nueva pagina desde
cero. Los otros iconos los explicaremos mas adelante
Observemos que el escritorio cuenta con dos secciones, un meno latera
y el escritorio donde veremos el contenido del apartado que
seleccionemos del menú lateral. En breves explicaremos cada uno de
los apartados que podemos encontrar en el menú.
Escritorio
El primer menú que encontramos es el del propio Escritorio de
WordPress. Allí veremos varias cajas con contenido. Estas cajas son
un resumen rápido del resto de la web
En la caca “De un vistazo” podemos encontrar el número de entradas,
páginas y comentarios que hay en nuestro WordPress, además del número
de versión de tu instalación y el tema que estás usando.
También la caja de “Eventos y noticias de WordPress”, donde podrás
encontrar tanto las meetups como las WordCamps que se van a hacer
cerca de ti. Otra caja a tener en cuenta es “Actividad” donde se
muestra la activada reciente en nuestra web como por ejemplos
comentarios pendientes por moderación. Estas cajas las podemos mover
y posicionar como mejor nos plazca.
En la misma opción de escritorio tenemos la subsección de
actualización en esta sección podemos observar algunos datos como
versión de wordpress que estamos usando, el estado de las
actualizaciones de los pluging, temas y otros, y en este mismo
apartado tenemos la opción de actualizar la versión de wordpress
Entradas
Algunas entradas pueden ser las publicaciones en un foro, en general las entradas son
publicaciones que puedes crear tu pagina web. En el menú Entradas encontramos toda la
lista de entradas. Este listado se puede filtrar por estado, fecha y por categoría.
Además, es posible ver sólo las entradas de un cierto autor, haciendo clic en el
nombre del mismo.
Las entradas en WordPress son similares a una pagina, sin embargo, mas adelante
veremos la diferencia entre ambas.
Observemos que en la parte superior encontramos un botón que escribe “Añadir nueva” si
pulsamos el botón nos llevara a una pagina donde podremos crear la entrada. En esta
pagina tenemos algunas opciones para editar la entrada podríamos cambiar colores,
tamaño de fuente, agregar imágenes maquetado de la entrada entre otras cosas.
Hagamos una prueba simple, le daremos un titulo y un texto y la publicaremos.
Observemos como se ve nuestra pagina antes y después de agregar nuestra entrada.
Debemos tener en cuenta que por ahora solo estamos viendo la apariencia por defecto
tanto de la pagina como de las entradas, wordpress tiene un gran numero de
herramientas que nos permitirán personalizar todos estos elementos a nuestro gusto
En Entradas tenemos la sección de Categorías, como dice su nombre, nos permite crear
categorías para nuestras entradas.
También tenemos la sección de Etiquetas, las etiquetas nos permiten etiquetar nuestras
publicaciones. Tanto Categoría como Etiquetas nos permite realizar una clasificación
de nuestras entradas.
Nuestro siguiente apartado será el de Medios, en esta sección podemos
encontrar la biblioteca de archivos. Esta continente los archivos
hayamos subido, como imágenes, videos, PDF entre otros. EN nuestro
caso esta totalmente vacío ya que aun no hemos subidoningún
material.
EN la sección de Añadir nuevo podemos arrastrar el archivo que
deseamos subir y agregarlo. Subamos una imagen como ejemplo.
Buscamos nuestra imagen, arrastramos, soltamos y listo, ya nuestra
imagen esta cargada en wordpress lista para ser usada donde la
necesitemos. Ahora que tenemos un archivo en nuestra biblioteca se
vera así.
Ahora veremos la sección de Pagina, como mencionamos anteriormente las Paginas y
Entradas son muy parecida, la diferencia entre estas es la forma correcta de usarlas.
Mientras que las paginas se usan para información permanente en la pagina. Las
entradas se usan para información que se va agregando tales como noticias, artículos e
información ligada a una fecha.
Incluso si creamos una nueva pagina es prácticamente igual a crear una entrada,
crearemos una pagina nueva como ejemplo esta vez agregaremos la foto que subimos
anteriormente cabe mencionar que todo lo que hagamos aquí podríamos hacerlo con las
entradas.
Si vamos de nuevo a Paginas veremos que ahora aparece la pagina que acabamos de crear,
si pulsamos en ver podremos ver la pagina que creamos. Como mencionamos con las
entradas, esta es una pagina por defecto la cual al momento de crear o posteriormente
podríamos personalizar a nuestros gustos o al estilo de la pagina web que estamos
creando
Ahora sigue la sección de Comentarios, tan simple como su nombre lo
indica, en esta sección se administran los comentarios, en estos
momentos tenemos un comentario de prueba el cual lo genera WordPress
al momento de la instalación acá podemos rechazar, responder, editar,
marcarlo como span o enviarlo a la papelera.
Podemos pulsar el link que escribe “ver la entrada” e iremos a la
entrada donde se publico el comentario.
Realicemos un comentario en la misma entrada como ejemplo
Al pulsar el botón de publicar, vemos como aparece el comentario que
acabamos de realizar. Si volvemos al escritorio de wordpress y vamos
nuevamente a la sección de comentarios podemos observar que ahora
aparecerá el comentario que acabamos de publicar
Ahora pasemos a la sección de Apariencia. Podemos observar que esta sección tiene
bastante subsecciones por ahora hablaremos de la subsección de Temas.
Los temas son plantillas para un sitio web en el cual podemos trabaja, editándolos a
nuestras necesidades, cambiando el maquetado, colores, imágenes entre otros aspectos
de los temas.
En este caso al realizar la instalación de wordpress se instalaron 3 temas por defecto
Si pulsamos en Detalles del tema, nos aparecerá esta ventana con los detalles del
creador del tema, una descripción de este y una serie de opciones que veremos mas
adelante.
Aunque los 3 temas están instalados, solo tenemos un tema activo podemos ir cambiando
activando y desactivando entre ellos. Si colocamos el cursor del raton sobre uno de
ellos nos aparecerá el botón para Activar, en este ejemplo tenemos activo el tema
“Twenty Twenty” haremos un cambio y activaremos el tema “Twenty Twenty-One”
Una vez Activemos el tema veremos que nuestra pagina principal cambio, ya que se
aplica los estilos del nuevo tema. Si entramos a la Entrada “Hola, mundo” donde
realizamos el comentario anteriormente, veremos que nuestro comentario aun sigue ahí,
el único cambio es el tema del sitio
Estos temas son muy básicos, y es posible que no nos gusten, sin embargo, acá esta una
de las razones por las cuales wordpress es uno de los CMS mas usados en el mundo. La
cantidad de plantillas que existe y que se pueden instalar en wordpress es enorme, hay
plantillas de pago y plantillas gratuitas que podemos descargar e instalar en nuestro
wordpres las cuales permiten modificar y editar a nuestras necesidades
Para buscar temas nuevos oprimamos el botón en la parte superior que dice “Añadir
nuevo” y se nos desplegara la lista de plantilla solo debemos elegir la que se ajuste
mejor a nuestras necesidades y la podremos descargar. Debemos considerar que hay
platillas y gratuitas, sin embargo, existe muchas plantillas gratuitas de muy buena
calidad, optimizadas y bastantes profesionales que podríamos usar.
Si posicionamos el cursor del ratón sobre un tema nos saldrá la opción ver una vista
previa, busquemos un tema que nos llame la atención. Por ejemplo, este llamado
“Foodup”
Y observemos la vista previa, en caso de que este tema nos guste y decidamos
instalarlo solo debemos oprimir el botor de instalar en la parte superior izquierda y
esperar unos segundos mientras se instala.
Una vez instalado podemos ir de nuevo a la sección de Temas y podemos ver que están
todos los temas que hayamos instalado, ahora solo queda activar el nuevo tema
GENERACION DE UNA PAGINA EN WORDPRESS
Si vamos a nuestra pagina podemos ver que nuestra web ahora tiene la apariencia del
tema, y como mencionamos anteriormente podemos modificar este tema a nuestro gusto y
necesidad
Incluso al igual que la ultima vez que realizamos un cambio de tema aun permanece la
misma entra da con el comentario que realizamos anteriormente
En la siguiente subsección de apariencia es Personaliza, acá es donde
podemos personalizar nuestro tema. Cuando seleccionamos esta opción
se nos abre una ventana con nuestra web y un lateral, en este menú
latera encontramos las opciones que podemos editar del Tema. Debemos
puntualizar, que las opciones que aparezca en el menú dependen de
cada tema, ya que hay temas que permiten mas personalización que
otros.
No profundizaremos mucho en esta personalización ya que como
mencionamos esta depende de cada tema y mas adelante en el curso
profundizaremos en la edición.
Como podemos observar hay un icono de lápiz en cada elemento del
tema, si lo pulsamos nos permite personalizar ese elemento, en este
caso oprimimos el icono del titulo de la pagina, y se nos despliega
un menú que nos permite cambien el titulo de la pagina, color,
tamaño.
Otro ejemplo es con el footer, de igual manera estamos cambiando el
color, color de texto y en este caso incluso el numero de columna. Te
invitamos a que explores las opciones de personalización del tema que
hayas elegido
Continuando con la sección de apariencia ahora toca hablar de la
subsección de Widgets. Los widgets son componentes agregados que crea
una funcionalidad en nuestra web, por defecto wordpress instala
algunos widgets, sin embargo, existen una gran cantidad de estos que
podemos descargar y agregar en nuestra web.
Los widgets puede ser agregados en una sección espesifica del sitio,
claro teniendo en cuenta que funcionalidad aporta este. Por ejemplo,
podemos ver que en este caso podemos agregar los widgets en la barra
lateral, sección de contenido de portada, sección de barra lateral de
portada y el área de footer, en este caso agreguemos el widget de
buscar en la sección del footer
Al desplegar las pestaña del widgets nos aparece las secciones donde
se puede agregar, seleccionaremos el área de pie de pagina y lo
agregaremos
Una vez agregado veamos como aparece en la sección del pie de pagina,
le agregaremos un titulo a modo de ejemplo y oprimiremos el botón de
Guardar.
Y si vamos a nuestra web y miramos el footer veremos que nos ha
aparecido una barra de búsqueda con el titulo que especificamos.
Como mencionamos anteriormente la cantidad de widgets que podemos
implementar es inmensa, al igual que con las plantillas hay algunos
pagos y otros gratuitos, solo debemos buscar el que mejor se nos
adapte a nuestras necesidades.
Otro ejemplo, agregaremos un calendario a la barra lateral de la
pagina. En este caso arrastraremos el widget y lo soltaremos en el
área donde queramos que aparezca, y de igual manera que el anterior
le colocaremos un titulo.
Observemos como ahora tenemos un calendario en nuestra pagina web
Ahora toca hablar de la subsección de Menús, como podemos intuir por el nombre, en
esta sección podemos crear los menús de nuestra paginas. El tempate que utilizamos ya
cuenta con un menú, pero creemos uno nosotros mismos
Una vez en la sección de Menús colocamos un nombre al menú y pulsamos el botón de
Crear menú
Una vez creado se nos habilitara la sección de paginas, aquí podemos seleccionar las
paginas que hayamos creado para añadirlas al menú, si observamos también tenemos
entradas, enlaces personalizados y categorías, todas estas pueden ser agregadas al
menú que crearemos. Para este caso seleccionaremos todas las pagians que tenemos y
también una de las entradas y las añadiremos.
Como podemos observar, ya se agregaron los enlaces que elegimos al menú, si deseamos
cambiar el orden de los elementos del menú solo debemos arrastrarlos y soltarlos donde
en el orden que deseemos. En este ejemplo queremos que pagina de entrada que agregamos
sea un sub menú de la Pagina de ejemplo, simplemente debemos arrastrar la pagina que
seseamos que sea un submenú y la colocamos debajo pero un poco a la derecha de la
pagina que deseamos que sea su padre
Una vez realizado esto solo nos queda guardar el menú y precionamos la pestaña que
escribe Gestionar ubicación
En esta pestaña en Menú principal desplegamos la lista, y nos aparecerán todos los
menús que hayamos creado, en este caso solo hemos creado uno por lo tanto solo nos
aparecerá top menú que es el que acabamos de crear, lo seleccionamos y oprimimos el
botón de Guardar cambios. Si vamos a nuestra pagina veremos que aparece el menú que
acabamos de crear.
Las siguientes subsecciones son Cabecera, que nos permite
personalizar la cabecera de la pagina, cambiando la imagen y los
colores, Fondo al igual que cabecera nos permite personalizar el
fondo t Editor de tema que nos da acceso a los archivos de la pagina
Debemos ser muy cuidadosos con el Editor de temas, ya que aquí
tenemos accediendo a los archivos HTML, CSS, JavaScrip y cualquier
otro archivo que utilice el tema, si deseamos modificar estos
archivos ya sea para editar una sección que el tema no permita editar
por medio del editor, hay que ser muy cuidadoso con lo que hagamos en
estos archivos, ya que podríamos “romper la pagina”
La próxima sección es la de Plugind, los plugins son herramientas
añadidas, de estas hay una gran cantidad, entre ellas tenemos algunas
muy populares como Elementor que es una herramienta para la edición
de las plantillas, o Woocommers que nos permite integrar una pasarela
de pagos en nuestra web y así crear una tienda en línea
En esta sección de Plugins, podemos encontrar los pliguin instalados,
en estos momentos solo tenemos dos que wordpress instala por defecto.
Sin embargo, es igual que con las plantillas, podemos descargar los
que necesitemos oprimiendo el botón que dice Añadir nuevo
Al igual que con los Temas, tenemos plugins gratuitos y pagos, e
instalarlos es prácticamente igual a instalar un tema, por ejemplo
Instalaremos Elemento,
Simplemente lo buscamos en la y oprimimos Instalar ahora luego de
instalarlo debemos activarlo y si vamos a la sección de plugins
instalados veremos que ya nos aparece Elementor
Las subsecciones de Añadir nuevo y Editor de plugins son iguales a lo
que hemos visto antes, Añadir nuevo nos llevará a la misma ventana
que el botón “Añadir nuevo” que usamos antes, y Editor de plugin nos
dará acceso a los archivos del código del plugind
La siguiente sección es la de Usuarios WordPress es un sistema de gestión de contenidos multiusuario.
Esto quiere decir que puede haber varios usuarios registrados en nuestro WordPress y estos pueden
acceder al Escritorio con ciertas limitaciones, dependiendo del rol que tengan. En el menú Usuarios de
WordPress se puede ver una lista de los usuarios que tienes registrados en nuestra instalación. Cada
usuario tiene un nombre de usuario, un correo electrónico y un rol.
La siguiente subsección es: Añadir nuevo usuario. Aquí aparecerá un formulario donde
debemos llenar todos los campos para poder generar el nuevo usuario. Dependiendo del
tema y los plugins que tengas activos, es posible que el formulario tenga más campos.
Luego tenemos la subsección de Perfil donde podemos ver los datos de nuestro propio usuario con mas detalle. Desde
aquí podremos cambiar el esquema de colores con el que vemos nuestra pagina de WordPress, además de modificar tus
datos y alguna configuración específica.
Algo muy útil es la posibilidad de seleccionar el idioma con el que quieres ver el Escritorio de WordPress. Muchas veces al
realizar o encontrar diferentes instalaciones, estos vienen en idiomas diferentes, así que poder pasar al español es muy
útil.
Ya casi llegando al final tenemos la sección de Herramientas. El menú de
herramientas de WordPress contiene diversas funciones útiles para administradores
de webs. Lo primero que vemos al entrar es la posibilidad de utilizar el conversor
de etiquetas y categorías.
Importar
Esta opción proporciona varias herramientas para importar contenido de otras
plataformas de blog, como Blogger, LiveJournal, Moveable Type, TypePad y Tumblr.

También puedes importar contenido de blogrolls que usen el Formato OPML, entradas
de un Feed RSS o contenido de otros sitios WordPress.

Para importar contenido de una web construida en WordPress, primero debes instalar el
plugin Importador de WordPress. Y para hacerlo desde otro tipo de sitio diferente de
WordPress, se te pedirá instalar el plugin importador correspondiente, tras seleccionar el
tipo de sitio deseado.

Conversor de etiquetas y categorías

En el submenú Importar podemos encontrar más utilidades para importar contenido a
tu web en WordPress desde otro tipo de webs, como por ejemplo Blogger, Tumblr o
incluso otras webs en WordPress. Si estamos realizando una migración de hosting,
seguramente tengas que acabar utilizando esto.
Eso sí, debemos tener en cuenta que antes de poder utilizarla, debemos instalarla desde la opción del menú Importar.
Wordpress se encarga de mostrar con detalles que podemos hacer con cada opción, solo debemos hacer click en
detalles.
 Exportar
La opción «Exportar» se usa para exportar tus datos en formato XML desde tu web en WordPress.

El formato de exportación se llama «WordPress eXtended RSS» o WXR y contiene todas tus
entradas, páginas, comentarios, campos personalizados, categorías y etiquetas.

Una vez que guardes el archivo descargado, puedes usar la función «Importar« en otra web para
importar el contenido de tu web.

Del mismo modo que podemos importar nuestros datos de otros sitios web, también
podemos exportar nuestro contenido de la instalación WordPress actual. Yendo al
submenú exportar y podremos especificar qué queremos exportar y hacerlo.
Podemos exportar todo el contenido, o podemos seleccionar que información queremos exportar de
nuestro sitio web, incluyendo plantillas o entradas.
Tienes Tenemos la opción para Exportar datos personales de tus
usuarios. Esto es tremendamente útil si alguno de tus usuarios te
pide que le digas qué información sobre él tienes en tu web.
Del mismo modo, el submenú Borrar datos personales sirve para borrar
esos datos que tengas almacenados de un usuario en concreto. Al igual
que antes, de utilidad para cumplir con leyes de privacidad.
Otra Herramienta muy usada es la de Salud del sitio esta herramienta
nos muestra un informe general de la salud del sitio, errores y
recomendaciones de mejora
Y Finalmente llegamos a la última sección de WordPress, el de Ajustes. ojo con lo que
tocamos aquí, ya que podemos romper la instalación si no se está seguro de qué estámos
haciendo.
Al acceder a este menú lo primero que nos encontramos son los ajustes Generales de
nuestra instalación WordPress. Aquí podemos cambiar el título de tu web, su
descripción y la dirección. Cuidado al cambiar la dirección. Si nos equivocas no
podremos entrar y tendremos que arreglarlo accediendo directamente a la base de datos
para cambiar el valor allí.
También podrás cambiar el idioma y la zona horaria del sitio. Esto parece una
tontería, pero si programas tus entradas para que se publiquen a una hora concreta y
no has especificado bien la zona horaria, quizás salgan en horario no deseados
En los ajustes de Escritura podremos cambiar la categoría por defecto de nuestras
entradas. Además, podemos configurar nuestra instalación para que, al enviar un email
a una dirección de correo electrónico concreta, el contenido se convierta en una nueva
entrada de tu blog.
En los ajustes de Lectura de WordPress podemos indicar si la página principal de
nuestra web es una página concreta o bien la lista con nuestras últimas entradas.
Además, podremos indicar cuántas entradas quieren que se muestren en la primera página
de tu blog.
Importante destacar aquí que tenemos la opción de disuadir que los motores de búsqueda
indexen en nuestra web. Si marcamos la opción, los motores de búsqueda no entrarán en
nuestra página hasta que no desmarquemos esa casilla. Evidentemente, esto sólo
deberías activarlo si estamos desarrollando nuestra web y estamos en un hosting
publico; una vez la tengamos lista, es recomendable dejar que los motores de búsqueda
indexen nuestra web o nos arriesgamos a que la gente no encuentre nuestra web.
Tienes Tenemos en la subsección Comentarios un montón de ajustes respecto a los
comentarios de nuestra web. Revísalos para ver si quieres cambiar algo, pero los
ajustes por defecto ya suelen ser suficiente en la mayoría de los casos.
En la subsección Medios tenemos los ajustes del tamaño de las imágenes que conforman
nuestra biblioteca de medios en WordPress. Es recomendable que que no los cambiemos,
ya que estos tamaños los define el tema que tengamos activo. Cambiar los tamaños puede
ocasionar que las imágenes dejen de verse bien.
También tenemos una sección para modificar los Enlaces permanentes de nuestros
contenidos. Esto deberías hacerlo al principio de todo, al instalar WordPress. Decide
si quieres que aparezca la fecha en la URL o si quieres que aparezca sólo el nombre de
la entrada, pero, es recomendable, evita usar el formato simple, ya que es poco
amigable para el usuario y actualmente afecta negativamente el SEO.
Por último, tenemos los ajustes de Privacidad. En este apartado podemos escoger qué
página de nuestro WordPress incluye la información de la política de privacidad de
nuestra web. Si no tenemos ninguna página al respecto, podemos también crear una
página de privacidad desde aquí mismo.
CREACION DE UNA PAGINA BASICA CON ELEMENTOS
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.