Módulo 3.

code no code/Creando mi sitio web

Resumen de los temas

Resumen de los temas

1. Introducción – Creando mi sitio web

En este módulo aprendiste a crear y publicar contenido en un sitio web usando el tema Ele-
mentor, aplicaste el contenido visto en los módulos anteriores, diagramaste el contenido en
el sitio web y pudiste ver los diferentes tipos de contenidos, cómo editarlos y cambiar el di-
seño por defecto. A continuación, podrás ver un breve resumen sobre cómo crear tu propio
sitio web.

1.1 Tema Elementor

Los temas en WordPress son plantillas predefinidas que se utilizan para diseñar y personali-
zar un sitio web de manera sencilla, hay muchos temas en WordPress, e incluso con conoci-
mientos de programación HTML y CSS, puedes crear tus propios temas.

Elementor es uno de los temas más utilizados para sitios web por su simplicidad para subir,
editar y diagramar diferentes contenidos, encabezados (header) y hasta pie de página (foo-
ter). Elementor, además, contiene una serie de plantillas para comenzar a diseñar, y muchas
de ellas son gratuitas. Por último, este tema, gracias a su gran uso, posee una comunidad de
developers web que desarrollan contenido, tutoriales y blogs para contestar dudas y resolver
problemas.

A. Instalación del tema Elementor:

Para instalar el tema Elementor tenemos diferentes formas de hacerlo, la primera y más
simple consiste en lo siguiente:

• Dirígete a tu panel de WordPress y ve a la pestaña de “Aspecto – Themes (Temas)”.

• En la parte superior izquierda, haz clic en el botón de “Agregar Nuevo”.
• En el buscador, ingresa el nombre de “Hello Elementor”.
• Haz clic en “Instalar”.
• Espera que finalice la carga y luego presiona “Activar”.

·2·
Resumen de los temas

Otra manera de hacerlo es:

• Dirigirte al sitio web de Elementor.com.

• En el menú ve a “Products – Hello Theme”.
• Haz clic en el botón “Download Now”.
• Una vez finalice la descarga del archivo tipo .zip, dirígete a tu panel de WordPress.
• En tu panel, ve a “Aspecto – Themes (Temas)” y haz clic en el botón superior izquier-
do de “Agregar nuevo”.
• Una vez en esa pestaña, haz clic en “Cargar tema”.
• Presiona el botón de “Seleccionar Archivo” y busca el archivo en tu computador,
selecciónalo, cliquea “Abrir” y luego “Instalar”.
• Cuando haya finalizado la carga, presiona “Activar”.

1.2 Personalizar tu sitio

• Una vez tienes Elementor activado, dirígete, en tu panel de WordPress, a la pestaña

“Aspecto – Themes (Temas)”.
• Dentro del listado de temas disponibles, el primero que te saldrá será el “Hello Ele-
mentor”, haz clic en el botón de “Personalizar” (Si este botón no te aparece, asegú-
rate que el tema esté activado).
• Dentro del menú de personalizar podrás:
⸰ En “Identidad del sitio”, subir el logo de tu web o empresa, poner el nombre de
tu sitio, la descripción corta y el ícono que se verá en la pestaña.
⸰ En “Configuración de Inicio” podrás definir qué es lo que la página muestre
como página inicial o Home, aquí te recomiendo dejar la configuración como
una página estática y que la página principal sea el Home.

1.3 Creando tu página de inicio

Ahora, para comenzar a crear el sitio web, crearemos el Home o página de inicio. Recorde-
mos que el Home es la página más importante del sitio, ya que esta tiene que ser llamativa
para invitar a los usuarios a seguir navegando, y debe ser un resumen del sitio, con accesos
directos y “Call to actions”.

·3·
Resumen de los temas

Para comenzar a crearla, ve al apartado de “Páginas” del menú de WordPress y haz clic en
“Agregar nueva”.

Para editarla, lo primero que harás es ponerle nombre para distinguirla, en este caso la lla-
marás “Home”.

Luego, haz clic en el botón “Editar con Elementor” que aparece en la parte superior del edi-
tor. Se abrirá una página con lo siguiente:

Panel de herramientas de Elementor: en este panel encontrarás todos los elementos que
puedes agregar a tu sitio, tales como imágenes, textos, videos, botones, entre otros.

Visor del sitio web: en este visor podrás ir viendo cómo va quedando tu sitio e ir diagraman-
do en tiempo real. Para agregar un elemento nuevo deberás arrastrarlo desde el panel de
herramientas de Elementor a este panel.

Como vimos anteriormente, las páginas web están compuestas por Conteiners, Rows (filas) y
Columns (columnas). Si te fijas en el visor del sitio web, verás que hay un rectángulo remar-
cado con líneas semicontinuas, esto muestra el Rows.

·4·
Resumen de los temas

Si haces clic en el botón de +, podrás definir cuántas columnas tendrá la página y la disposi-
ción o el tamaño de estas:

Partirás el Home con un call to actions, para que los clientes o usuarios lleguen rápidamente
al contenido que deseas mostrar, para eso en este caso, crearás una fila con dos columnas
idénticas.

Al crear las filas, enseguida el editor de Elementor cambia para poder personalizar la fila y
las columnas.

En la pestaña de disposición podrás editar si quieres que el contenido ocupe el ancho com-
pleto (recomendable para banners y call to actions), el tamaño y la separación entre colum-
nas, entre otros.

En la pestaña de “Estilos”, podrás agregarle a la fila un color de fondo (plano o degradado) o

que el fondo sea una imagen o un video.

• Puedes sacar, para esta ocasión, imágenes y videos de bancos gratuitos como:
⸰ https://pixabay.com/
⸰ https://www.pexels.com/
⸰ https://www.freepik.es/

Una vez configurados los aspectos básicos de la fila y las columnas, podrás agregar el conte-
nido, para eso debes hacer clic en el + que aparece en cada una de las columnas, para definir
qué contenido aparecerá en cada una.

·5·
Resumen de los temas

Al hacer clic en el botón + se abrirá un menú lateral en donde podrás elegir el contenido o
widget que desees agregar. Como estás realizando un call to action, es recomendable que
en una columna haya un pequeño texto con un botón que invite a dirigirse a donde deseas.

Para lo anterior, en el menú lateral arrastrarás en el cuadro de “Encabezado” a la columna.

Una vez arrastrado, el menú lateral cambiará y dará paso al menú de edición del encabeza-
do, donde, en primer lugar, escribirás una frase llamativa que invite a los visitantes a ver el
contenido de la web, podrás también editar el tamaño y la alineación del texto.

Luego, en la pestaña de “Estilo” editarás el color, la tipografía y otros detalles de estilo. ¡Te
invitamos a probar las diferentes opciones para encontrar la que más te guste y se acomode
a tu estilo gráfico!

Para volver a editar el contenido después, solo debes posicionar tu mouse sobre el elemento
y hacer clic en el ícono del lápiz y se volverá a abrir el menú del elemento.

Luego de que el texto esté listo, realiza el mismo proceso para agregar un botón.

·6·
Resumen de los temas

Una vez que seleccione “agregar botón” le aparecerá un nuevo segmento en su Home como
el que aparece a continuación, en el podrá cambiar el texto que desea para su call to action.

Luego de que el call to action está listo, diseña el resto del home, recuerda que este debe ser
un resumen de lo que mostrará tu sitio web y tiene que ser llamativo, ya que es lo primero
que verán tus visitantes.

Para continuar con el contenido, agrega una nueva sección con el encabezado del título de
la siguiente sección, agrega un separador y, luego, crea la siguiente sección con una imagen
y texto.

Para subir una imagen, basta con que en el menú lateral hagas clic en el botón de “Seleccio-
nar imagen”, lo que te llevará a la sección de multimedia del sitio.

En la pestaña de subir archivo puedes seleccionar o arrastrar archivos (tanto imágenes, vi-
deos, sonidos, como otros, desde tu computador).

Una vez la tengas arriba, selecciónala y haz clic en el botón “Insertar medio” ubicado en la
parte inferior derecha de la página.

Luego de que la segunda sección esté lista, crea las demás secciones del home, como pue-
den ser una galería con tu trabajo, más contenido de texto con imágenes o videos.

Una vez terminado el home, publícalo. Para esto, haz clic en el botón verde de la barra lateral
que dice “Publicar”.

·7·
Resumen de los temas

Luego, vuelve al menú de WordPress crear las demás páginas del sitio.

Para eso, en el menú lateral, haz clic en el menú de hamburguesa:

Luego, presiona el botón “Exit”.

·8·
Resumen de los temas

Creando las demás páginas de tu sitio:

Para crear nuevas páginas, como puede ser la página de productos, quién somos o contác-
tate con nosotros, ve al menú de páginas y presiona en “Agregar nueva”, en la parte superior.

Ponle el nombre correspondiente a la página que quieras realizar y luego edita con Elemen-
tor.

Sigue el mismo proceso de la página del home para ir agregando secciones, columnas y
ele-mentos. Es importante que cada una de las páginas comience con un título que haga
ver a los visitantes dónde se encuentran.

Menú:

Cuando tengas las páginas listas y publicadas, crea un menú que ayudará a que los usuarios
puedan, rápidamente, dirigirse a ellas.

Para eso, en el menú lateral de WordPress, dirígete a “Aspecto” y luego “Menú”.

Al ingresar, verás en una columna todas las páginas que creaste y, en otra columna, la es-
tructura del menú.

·9·
Resumen de los temas

Primero, crea el nombre del menú, que se llamará “Main Menu” o “Menú principal” y selec-
ciona la opción para que se ubique en el header de la página.

Una vez guardado, selecciona todas las páginas que quieres que se encuentren en él. No es
recomendable que sean más de cinco. Para seleccionarlas, presiona la casilla de cada una de
las páginas y, luego, presiona “Agregar al menú”.

Una vez agregados, saldrán los nombres en la “Estructura” del menú, desde ahí puedes re-
organizarlos y poner subsecciones arrastrándolos hacia el lado derecho.

Cuando el menú esté listo, presiona el botón “Guardar menú”, en la parte inferior derecha
de la pantalla.

Recuerda que puedes ir editándolo a medida que creas nuevas páginas para tu sitio.

Para publicar tu sitio web con la página home como la principal en la barra de WordPress,
dirígete a “Opciones” y luego a “Lectura”. En la sección de “Tu página de inicio muestra”, se-
lecciona “Una página estática” y luego, en el despegable, busca la opción de tu página Home.

Dale guardar a los cambios.

Antes de publicitar tu sitio, es importante que revises que todo esté funcionando correcta-
mente. Para eso, entra a tu web como si fueras un visitante o haz clic en la casita en el menú
superior de tu WordPress y, luego, en “Visitar sitio”. Revisa página por página e intenta hacer
el flujo como si fueras un visitante. Rellena los formularios y ve que estén llegando correcta-
mente, intenta responderlos desde tu correo para ver que las respuestas estén llegando de
buena manera a los usuarios.

Una vez que hayas probado el funcionamiento de tu web, habrás finalizado y podrás com-
partirlo con tus conocidos.

·10·
Resumen de los temas

Conclusión

¡Ahora ya sabes cómo crear una página web con WordPress! No es nada difícil, aunque es
necesario pensar mucho al planificarlo, ya que hay mucho que cubrir.

Existe infinidad de plantillas gratuitas para WordPress que podrían satisfacer cualquier ne-
cesidad, pero si quieres una web totalmente personalizada, la experiencia dice que lo mejor
es crearla desde cero.

En la medida de lo posible, intenta siempre utilizar las funciones que te facilita WordPress
en su code reference, que son funciones que ya está optimizadas, testeadas y se supone que
siempre van a funcionar en cualquier versión de WordPress.

·11·
Resumen de los temas

Referencias bibliográficas

Dell`Isolla, S. (s/f). Elementor - La guía definitiva: crea tu página web como un pro-
fesional. Disponible en: Amazon. https://www.amazon.es/ELEMENTOR-Gu%-
C3%ADa-Definitiva-P%C3%A1gina-Profesional-ebook/dp/B09KY57PX1

Elementor Pro Course: Build a Portfolio Website. (23 de junio de 2021). Academy.
Recuperado de https://elementor.com/academy/elementor-pro-cour-
se-build-a-portfolio-website/?playlist=1b8f0414&video=08f9296

Elementor. [@Elementor] (s/f). https://www.youtube.com/@Elementor

·12·