CREAR LA WEB CON WEBNODE

1. Entra en www.webnode.es y haz clic en el botón Crea tu Web.

01

2. Escribe el Nombre de la web, Tu dirección de email y la Contraseña. Haz clic en Registrar y crear.

3. Selecciona el tipo de página web que te gustaría crear.

4. Elige una plantilla.

5. Una vez hayas seleccionado la plantilla que más te gusta, serás redireccionado automáticamente hacia
el editor de tu proyecto para comenzar con tu web.
Página1

EPT Prof. Maribel Pérez Santos

 CÓMO EDITAR LA PÁGINA EN WEBNODE
1. Haz clic en PÁGINAS.

02

2. Haz clic en Añadir una página.

3. Elige un formato de la página y haz clic en Elegir.

4. Escribe el nombre de la página y haz clic en Crear.

5. Haz clic en Publicar Página2

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR TU EMAIL DE ACCESO
03
Cuando lo necesites puedes cambiar el e-mail de acceso a tu cuenta Webnode. De esta forma todos los mensajes
automáticos relacionados con la activación, vencimiento de tus servicios Premium y dominios de tus proyectos serán
enviados a esta nueva cuenta de correo electrónico. Si deseas transferir la gestión del sitio web a otra persona,
envíanos tu solicitud a soporte@webnode.es.

1. Entra en tu cuenta.
2. En la página Mis proyectos, haz clic en el botón Menú en la esquina superior derecha.

3. Haz clic en Mi perfil.

4. Haz clic en Cambiar al lado del email de cuenta de usuario.

Página3

EPT Prof. Maribel Pérez Santos

 5. Introduce la nueva cuenta de correo electrónico. Asegúrate de que la misma está operativa y de que tienes
acceso a ella. Haz clic en Guardar. No es posible usar una dirección de correo electrónico previamente
conectada a una cuenta de Webnode. La dirección de la cuenta de correo electrónico debe ser nueva.

6. IMPORTANTE: No uses ninguna dirección de correo asociada a tu propio dominio como el correo electrónico
de inicio de sesión del propietario del proyecto. Si el dominio expira, la dirección de correo electrónico estará
inactiva, lo que significa que perderás la capacidad de recuperar una contraseña perdida u olvidada u otros
problemas similares. Resolver esta situación puede tomar varios días debido a nuestro protocolo de seguridad
interno. Sugerimos que la dirección de correo electrónico de tu propietario sea una de las siguientes o
similares: @gmail.com, @yahoo.com, etc.

7. El cambio se realizará sólo al hacer clic en el enlace de verificación en un correo electrónico enviado a la nueva

dirección email. Si el correo electrónico no llega, comprueba la carpeta de correo no deseado.

8. En la página Mis proyectos, verás un mensaje de que tu email nuevo ha sido verificado con éxito.

Sugerencia: Si deseas pasar la administración de tu página web a otra persona, es decir, cambiar el propietario del
proyecto, por favor, ponte en contacto con nuestro soporte al cliente. En este caso primero revisaremos si la página
web tiene activada la renovación automática de algún servicio, y luego informaremos al nuevo propietario del
proyecto.
Página4

EPT Prof. Maribel Pérez Santos

 CREAR SUBPÁGINA
• Haz clic en PÁGINAS.
04

• Puedes crear las subpáginas usando el ratón. La creas al mover la página bajo la página existente.

• Publica los cambios.

• CÓMO CAMBIAR ORDEN DE LAS PÁGINAS

• Haz clic en PÁGINAS.
05

• El orden de las páginas lo puedes cambiar con el ratón, moviendo la página arriba o abajo.
Página5

• Publica los cambios.

Sugerencia: puedes fácilmente meter una página bajo otra y así crear subpáginas.
EPT Prof. Maribel Pérez Santos
 06 CÓMO OCULTAR LAS PÁGINAS EN EL MENÚ

Si no deseas que se muestre la página en el menú, puedes ocultarla. La página será aún accesible a través de un enlace
directo, pero los visitantes del sitio no la verán en el menú.
1. Haz clic en PÁGINAS

2. Selecciona la página que deseas ocultar y haz clic en Mostrar la página en el menú. Si el botón está en gris, el
servicio está inactivo. Si el botón está en azul, el servicio está activo.

3. Publica los cambios.

Sugerencia: Si deseas editar la página oculta, haz clic en Editar.

Página6

EPT Prof. Maribel Pérez Santos

 CÓMO BORRAR LA PÁGINA
• Haz clic en PÁGINAS
07

• Elige la página que deseas borrar y haz clic en Eliminar página.

• Confirma que deseas borrar la web.

• Haz publicar los cambios.

Página7

EPT Prof. Maribel Pérez Santos

 CÓMO AÑADIR NUEVA SECCIÓN

• Al pasar por el ratón sobre la sección de contenido de la web visualizarás el botón plus que sirve
08 para añadir nueva sección.

• Elige la sección que deseas añadir. Haciendo clic en la oferta avanzada visualizarás más
posibilidades.

• Haz publicar los cambios.

Página8

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR EL ENCABEZAMIENTO

• En este artículo te enseñamos cómo cambiar el fondo y el diseño del encabezado de tu web.
09 • Para abrir la configuración, haz clic en el ícono de la rueda dentada en la parte superior derecha
del encabezado.

• Tipo de encabezado
• Aquí puedes cambiar el tipo de encabezado. Es posible elegir entre las opciones Solo navline,
Navline y título o Navline y contenido. El encabezado se puede configurar por separado para cada
página del proyecto.
Página9

EPT Prof. Maribel Pérez Santos

 • INFO: No se puede cambiar el tipo de encabezado en las publicaciones de blog porque un blog se
crea en otro tipo de página.
• Solo navline
• Con esta configuración solo se muestra el logo y la barra de menú. Puedes cambiar el fondo y
definir las propiedades de la barra. La configuración de la barra de menú afecta a la configuración
de la barra en todas las páginas de tu web.
• Puedes cambiar el fondo de la barra haciendo clic en Estilo de navline.

• También puedes elegir uno de los fondos recomendados. O bien, puedes usar el botón plus para
elegir una de las imágenes disponibles o subir tu propio fondo.

Página10

EPT Prof. Maribel Pérez Santos

 • Aquí elige un fondo de nuestra galería o sube tu propia imagen.

• Si eliges un fondo de más colores, también puedes aplicar los efectos de fondo,
como superposición de colores o animación.

CONFIGURACIÓN AVANZADA DE LA BARRA DE MENÚ

10

• Tipo de menú
• Aquí puedes cambiar la posición o el diseño de los elementos del menú. Puedes elegir
entre Clásico, Centrado, Debajo (que se diferencian entre sí por la posición) y Hamburguesa con
caja y Hamburguesa (estos dos tipos se diferencian por el ícono).
• Estilo de menú
• Al configurar el estilo de menú eliges cómo se verán los nombres de las páginas en el menú. Por
ejemplo, los elementos del menú pueden estar subrayados o tachados, pueden tener más espacio
entre sí, o bien, comportarse de manera diferente cuando les pasas el ratón por encima. Este
ajuste no se puede realizar en los menús desplegables (Hamburguesa con caja y Hamburguesa).
• Ancho del contenido
• Utiliza esta configuración para determinar la distancia entre el logo y los elementos del menú en
la barra.
• Menú fijo
Página11

• Cuando se activa el menú fijo, la barra de menú permanece en la parte superior incluso cuando te
mueves con el ratón hacia abajo en la página.
EPT Prof. Maribel Pérez Santos
 • Línea de división
• Si activas esta opción, aparecerá una línea separando la barra de menú del resto de la página.
• Navline y títulos
• Este estilo se usa para las páginas de inicio en la mayoría de las plantillas. Puedes agregar hasta
tres títulos (título, subtítulo y título sobre el encabezado), así como un botón. Se puede cambiar
tanto el fondo de la barra de menú como el fondo de la sección.

• Además del fondo de la barra, también puedes cambiar el fondo del encabezado haciendo clic
en Fondo sección.

• Para obtener los mejores resultados, recomendamos utilizar una imagen de encabezado que sea
de 1920x1280 píxeles y con un tamaño del archivo de alrededor de 600 KB. Los archivos de imagen
más grandes pueden afectar a la velocidad de carga de tu sitio web y usar más ancho de banda.
Página12

• Para realizar el cambio, sigue las mismas instrucciones que para la barra de menú (las encontrarás
más arriba en el artículo).

EPT Prof. Maribel Pérez Santos

 • Configuración avanzada
• Alineación de contenido
• Aquí puedes definir cómo se alineará el contenido en el encabezado.
• Ancho del contenido
• Es el ancho del contenido dentro del tipo de encabezado. La barra de menú y los títulos definen
dónde comienza el contenido. Por ejemplo, al alinear el contenido a la izquierda, puedes
establecer dónde comienzan los títulos.
• Altura mínima
• Con esta configuración determinas el tamaño del encabezado, algo que puede resultar útil si
deseas controlar cuánta parte de la imagen de fondo será visible.
• Borde decorativo
• Esta función activa un borde oscuro alrededor del título, del subtítulo y del título sobre
encabezado.
• La configuración avanzada de la barra de menú es la misma que para otros tipos de encabezado.
• Navline y contenido
• Este tipo de encabezado te permite insertar cualquier tipo de contenido de Webnode, como
formularios o galerías de fotos. El fondo de la
barra de menú y del contenido se pueden
configurar por separado.
• Puedes cambiar el fondo de la barra y de la
sección tal como lo harías con el tipo de
encabezado Navline y títulos.
• Configuración avanzada
• Ancho del contenido
• El ancho del contenido determina el tamaño del
contenido que se inserta en el
encabezado (formularios, galerías de fotos).
• Altura mínima
• La altura mínima define el tamaño del encabezado y su espacio para el contenido.
• La configuración avanzada de la barra de menú es la misma que para otros tipos de encabezado.
• ATENCIÓN: Recuerda publicar

Página13

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR EL FONDO DE LA SECCIÓN
1. Pasa el ratón por encima de la sección. El botón que te permite configurar la sección (icono en forma de la rueda
dentada) aparecerá en la parte superior a la derecha. Aquí puedes seleccionar Fondo sección o Configuración
avanzada.
11

2. En Fondo sección puedes elegir uno de los fondos recomendados, o bien, o usar el botón más para elegir otro fondo
o subir tu propia imagen.

• Aquí elige un fondo de nuestra galería o sube tu propia imagen.

• En la configuración avanzada encontrarás las opciones Ancho del contenido y Borde decorativo.

• Ancho del contenido

Página14

• El ancho del contenido determina el tamaño del contenido (formularios, galerías de fotos) que se
inserta en el encabezado.

EPT Prof. Maribel Pérez Santos

 • Borde decorativo
• Esta función activa un borde oscuro alrededor del título, del subtítulo y del título sobre el
encabezado.
• Además de las secciones clásicas, también puedes añadir secciones de encabezado,
como Título o Título con botón. Estas secciones tienen más opciones de configuración, similares
al encabezado de toda la página.

• También puedes añadir hasta tres títulos (Título, Subtítulo y Título sobre el encabezado) y un
botón, o usar configuraciones avanzadas dentro de la sección.

• Configuraciones avanzadas
• Alineación de contenido
• Aquí puedes definir cómo se alineará el contenido en el encabezado.
• Ancho del contenido
• El ancho del contenido dentro del tipo de encabezado define sobre todo dónde comienza el
contenido. Por ejemplo, al alinear el contenido a la izquierda, puedes elegir dónde comenzarán
los títulos.
• Altura mínima
• Con esta configuración determinas el tamaño del encabezado, algo que puede resultar útil si
deseas controlar cuánta parte de la imagen de fondo será visible.
• Borde decorativo
• Esta función activa un borde oscuro alrededor del título, del subtítulo y del título sobre el
encabezado.
Página15

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR EL COLOR COMPLEMENTARIO DE TU WEB
12
Tu proyecto web utiliza un color adicional que puede verse en el color del logotipo, iconos, botones, enlaces
subrayados, encabezados en la lista de precios o en los encabezados del nombre del producto de las tiendas online.
Ese color adicional está preestablecido por la plantilla que seleccionaste para mantener un diseño consistente. Si
deseas cambiar ese color tienes que seguir los siguientes pasos:
1. Ve a CONFIGURACIÓN

2. Selecciona el apartado de Diseño en la columna izquierda y luego ve a Cambiar colores.

3. Se abrirá una ventana para cambiar el color complementario de tu web.

Ten en cuenta que la edición de contenido web no está disponible en esta ventana. Puedes volver a editar la
web haciendo clic en X o Guardar cambios en la esquina superior derecha.
Página16

EPT Prof. Maribel Pérez Santos

 4. En la esquina superior derecha, encontrarás la Configuración avanzada donde puedes seleccionar qué
elementos se verán afectados por el cambio de color complementario. Si dejas el botón apagado para ese

elemento, los elementos tendrán el color base.

5. Junto al cuadro de Color Complementario, puedes expandir el menú de color. El cambio de color se aplicará a
todos los elementos que hayan estado en colores complementarios en tu web y que hayan sido seleccionados
como activos en la configuración avanzada. Si seleccionas el primer color en el menú de la izquierda, las páginas

no tendrán un color complementario.

6. La selección del color complementario debe guardarse en la esquina superior derecha. O puedes cerrar la
ventana de color complementaria sin guardar los cambios haciendo clic en la X junto a Guardar cambios.

SUGERENCIA: para el texto normal, el color se puede cambiar directamente en el campo de edición del texto. Si
cambias el color del encabezado o subtítulo directamente en el campo de texto, cambiar el color complementario no
afecta estos textos. En ese caso tendrías que cambiar el color de nuevo manualmente.
Página17

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR LA FUENTE DE TU WEB
• Selecciona CONFIGURACIÓN
13 • Selecciona el apartado de Diseño en la columna izquierda y luego ve a Cambiar fuentes.

• Abre la ventana para cambiar la fuente de tu web.

Ten en cuenta que la edición del contenido web no está disponible en esta ventana. Puedes volver
a editarlo haciendo clic en Guardar cambios o X en la esquina superior derecha.

• La selección de fuentes está disponible en el lado izquierdo del menú.

Página18

EPT Prof. Maribel Pérez Santos

 • Guarda la nueva fuente seleccionada en la esquina superior derecha, o cierra la ventana de
configuración de fuente con la X sin guardar los cambios.

Sugerencia: Si el cambio no se refleja en la fuente del texto del encabezado de una imagen inicial de la página web, la
fuente puede ser cambiada directamente en el editor del texto. Del mismo modo, puedes cambiar la fuente del
logotipo u otros elementos especiales. La edición y el formato de los texto comunes se realizan siguiendo las
instrucciones de este artículo.

Página19

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR EL PIE DE PÁGINA

• Haz clic en el pie de página en la parte inferior de la página.

14

• Puedes cambiar directamente el texto original y modificar su formato, usando los íconos. Para
poder editar la segunda línea (Creado con Webnode), debes tener un paquete Premium activado.
• Para configurar las propiedades del pie de página, haz clic en el icono de rueda dentada a la
derecha. Puedes elegir entre distintos tipos de pie de página, cambiar el fondo de sección o probar
una de las configuraciones avanzadas.

• Tipo de pie
• Centrado
• Usamos este tipo de pie de página en la mayoría de nuestras plantillas. Tiene dos campos de texto
en el centro.

• Texto en ambos lados

• Este tipo tiene también dos campos de texto, sin embargo, uno se sitúa a la izquierda y el otro a
la derecha.

• Con contenido
• Este pie de página se suele utilizar en las plantillas de tiendas online. Puedes insertar en él
cualquier tipo de contenido, como por ejemplo un formulario de newsletter.

• Con mapa
• Este tipo de pie de página incluye un mapa. Puedes poner la dirección del mapa y editar el
contenido ingresado. La apariencia varía según la disposición de la web que elijas.
Página20

• Fondo sección

EPT Prof. Maribel Pérez Santos

 • Aquí puedes elegir uno de los fondos disponibles o subir tu propia foto, haciendo clic en el
botón más.

• Si eliges un fondo de más colores, también puedes aplicar los efectos de fondo,
como superposición de colores o animación.
• Configuración avanzada
• En la configuración avanzada del pie de página puedes cambiar el ancho del contenido, como por
ejemplo el ancho de los formularios o bloques de texto. El cambio solo afecta a los tipos Con
contenido y Con mapa.

Página21

EPT Prof. Maribel Pérez Santos

 CÓMO AÑADIR LOGO
15 • Haz clic en la parte izquierda de arriba, la parte de logo.

• Añade tu propio texto o logo haciendo clic en Añadir un logotipo.

• Elige el ícono de la oferta o añade tu propia imagen haciendo clic en Subir imagen.

• Haz publicar los cambios.

Página22

EPT Prof. Maribel Pérez Santos

 16
INVITAR A COLABORADORES
Si deseas invitar a otras personas para editar tu página web, por favor, sigue estas instrucciones:
1. En los detalles del proyecto selecciona Administración y Administradores y editores.

2. Otra opción sería invitar a colaboradores a través del editor. Primero, haz clic en Configuración.

3. Haz clic en Editores de la Web y luego en Invita a un usuario.

4. En la siguiente página haz clic en Invitar a usuario nuevo.5. Escribe el email de la persona que deseas invitar y elige
su papel:
• Editor
• Los editores tienen permiso de editar el sitio, pero no podrán acceder la administración del
proyecto.
• Administrador
• Los administradores tienen permiso de editar el sitio y hacer los cambios administrativos. Estos
incluyen: creación de cuentas de correo electrónico, creación de una copia de seguridad, registro
de dominios, compra de servicios Premium, descargar facturas o añadir y borrar nuevos usuarios.

Página23

EPT Prof. Maribel Pérez Santos

 • El nuevo usuario recibirá entonces una invitación a su dirección de correo. El nuevo usuario deberá
aceptar la invitación haciendo clic en el enlace en el mensaje. Si el usuario todavía no tiene una
cuenta de Webnode, podrá de crear una después de hacer clic en el enlace.
• Sugerencia: Si deseas cambiar los derechos de administrador o editor para cualquiera de tus
colaboradores, ve a la pestaña Editores de la web, selecciona el usuario y cambia sus derechos.
También puedes eliminar el usuario.

Página24

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR LA DISPOSICIÓN DE LA PLANTILLA
Una vez publicada tu web, no es posible cambiar la plantilla seleccionada. Sin embargo, puedes modificar algunas
partes de la plantilla para que se adapten a tus necesidades, y en esta guía te explicamos cómo hacerlo.
1. Haz clic en Configuración en el editor.

17

2. Haz clic en Diseño y selecciona Cambiar disposición.

3. Aquí puedes elegir un Estilo.

4. O bien, puedes utilizar la Configuración avanzada.

• Propiedades ajustables
• Estilo de disposición
• Esta herramienta te permite configurar el estilo de diseño de la plantilla; es decir, definir cómo se
verá el sitio web y el encabezado en general.
• Puedes elegir el estilo clásico que está disponible en la mayoría de las plantillas de forma
predeterminada. Aquí puedes ver un ejemplo. El contenido de las páginas está distribuido por
toda la página, y el menú se sitúa en la parte superior.
Página25

EPT Prof. Maribel Pérez Santos

 • En el estilo estrecho, el contenido aparece en una columna en el centro de la página y forma una
franja larga. El fondo detrás de la columna se puede ajustar y el menú se encuentra en la parte
superior de la página. Puedes verlo en las plantillas predeterminadas.
• El estilo en caja también tiene el contenido en una columna en el centro de la página, pero las
secciones están separadas entre sí por un espacio. El menú está en la parte superior de la página
y el fondo detrás de la columna se puede ajustar. La plantilla tiene mosaicos predeterminados y
puedes verla aquí.
• La barra lateral es un estilo que tiene el menú situado a la izquierda, y el contenido distribuido por
toda la página. Aquí puedes ver un ejemplo.
• Espaciado de sección
• Al seleccionar esta opción, puedes ajustar los márgenes superior e inferior de cada sección. Esto
te permite definir la distancia entre los contenidos de las secciones.
• Ancho del contenido
• Esta configuración te permite ajustar el ancho (márgenes derecho e izquierdo) del contenido de
cada sección. Por ejemplo, modificando los márgenes ajustarás el ancho del texto en las páginas.
• Decoración
• Esta opción solo está disponible en el estilo de diseño básico y te permite poner un elemento
decorativo para el encabezado de la página. Puedes agregar un margen alrededor de la imagen en
el encabezado o las ondas que aparecerán en la parte inferior de la imagen.
• Fondo
• Si eliges los estilos estrecho o en caja, puedes poner un fondo “de atrás” que aparecerá detrás de
la columna con el contenido. En esta guía te mostramos cómo cambiar el fondo de la sección.

5. Recuerda guardar los cambios con el botón en la parte superior a la derecha. Página26

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR EL DISEÑO DE LOS BOTONES
1. Haz clic en Configuración en el editor.

18

2. Haz clic en Diseño y selecciona Configuración de botones.

3. Aquí puedes elegir una de las propiedades y editarla.

• La forma determina la redondez de las esquinas del botón. Puedes elegir entre un botón
rectangular, redondeado o circular.
• La decoración sirve para elegir entre un botón sin sombras, con una sombra oscura o con una
sombra suave.
• El botón puede ser de un tamaño mediano o largo.
• Puedes usar el ancho del borde para elegir el grosor de la línea alrededor del botón.
Página27

EPT Prof. Maribel Pérez Santos

4. En esta página puedes ver cómo será el botón que has creado.

5. Recuerda guardar los cambios con el botón en la parte superior a la derecha

SUGERENCIA: Hay cinco botones en la previsualización ya que el estilo de cada botón en la página se puede
ajustar de manera individual.
6. Puedes cambiar el color de los botones cambiando los colores complementarios del proyecto. El color personalizado
de los botones se muestra en los estilos 3, 4 y 5.

Página28

EPT Prof. Maribel Pérez Santos

 CÓMO CAMBIAR EL DISEÑO DE LOS FORMULARIOS
1. Haz clic en Configuración en el editor.

19

2. En Diseño, haz clic en Ajustar en la sección Formularios.

3. Aquí puedes personalizar el diseño de los formularios.

• Propiedades ajustables
• En Estilo de formularios puedes elegir si el
formulario tendrá esquinas
predeterminadas o redondeadas. Otra
opción es crear un formulario en un estilo
minimalista.
4. En esta página puedes ver cómo será el formulario.
• 5. Recuerda guardar los cambios con el botón en la parte superior a la derecha.

Página29

EPT Prof. Maribel Pérez Santos

 CÓMO PERSONALIZAR LAS IMÁGENES

1. Haz clic en Configuración en el editor.

20

2. En Diseño, haz clic en Ajustar en la sección Formularios.

3. Aquí puedes personalizar el diseño de los formularios.

4. Propiedades ajustables: En Estilo de formularios puedes elegir si el formulario tendrá esquinas
predeterminadas o redondeadas. Otra opción es crear un formulario en un estilo minimalista.

5. En esta página puedes ver cómo será el formulario.

Recuerda guardar los cambios con el botón en la parte superior a la derecha.

Del N° 21 al N° 38 se realizarán preguntas de retroalimentación de este material.

Página30

EPT Prof. Maribel Pérez Santos