Vamos a ver en este post como crear un sitio web de una sola página con WordPress y Divi. Este tipo de páginas web han estado bastante de moda en los últimos tiempos.

El gestor de contenidos que vamos a utilizar es, como no podría ser de otra manera, WordPress.

 

 

¿Es necesario tener una plantilla especial para WordPress para crear una web en una sola página?

Existen plantillas específicas de este tipo, pero no es necesario. Nosotros vamos a utilizar DIVI, mi plantilla preferida para WordPress. Con Divi podremos crear sitios web normales y sitios web de una sola página.

 

Añade más de 90 nuevas funcionalidades a la plantilla Divi con el fabuloso plugin: Divi Booster

 

Estas webs en una sola página se caracterizan por tener diferentes bloques o secciones de contenido en la home. A cada uno de estos bloques o secciones de contenido se accede a través del menú superior.

Pero sea cual sea el ítem de menú que pulsemos no cambiamos de página. Siempre estamos en la home.

 

DESCUENTO DIVI

 

Ahora 20% de descuento

El plan YEARLY ACCESS de Elegant Themes incluye acceso a todas las plantillas y plugins:

  • La Plantilla DIVI
  • 86 plantillas para WordPress
  • El divi builder
  • 5 plugins para WordPress

Si quieres adquirir el plan Yearly Access de Elegant Themes con un 20% de descuento, Hazlo a través de este enlace. Con el descuento de 89$ + IVA pasará costarte 70$ + IVA (soy afiliado, gracias).

 

Los planes Personal y Life time Access:

  • El plan personal permite acceso a todas las plantillas de Elegant Themes pero no a los plugins. El precio de este plan es de 69$
  • El plan Life time access permite el acceso a todas las plantillas y plugins de Elegant Themes para toda la vida. El precio de este plan es de 249$.Ahora a través del siguiente enlace puedes contratar el plan Life time Access con un 10% de descuento. Es decir se te quedaría en 224$ + IVA.

 

curso-wordpress-con-divi-img-post

Curso WordPress online

 

suscripción 10€/mes cursos joaquin barberá horizonweb

VER CURSOS

 

 

 

 

1.- Enlaces con saltos en la misma página

 

¿Has visto algunas entradas de blog o páginas en las cuales hay enlaces en el contenido de texto que te llevan a otra parte de la misma página? Es decir, enlaces con saltos en la misma página.

Seguro que lo has visto alguna vez.

Vamos a ver primero como funcionan este tipo de enlaces para luego entender como hemos de crear un sitio web de una sola página con Divi.

 

Veamos primero como es la estructura de un enlace HTML:


<a href=”http://www.horizonweb.es”>Horizonweb</a>

Donde:

  • <a>: es la etiqueta para crea enlaces
  • href: es un atributo de la etiqueta <a> a través del cual indicamos la url destino del enlace. Es decir, el lugar al que nos llevará el enlace.
  • Horizonweb: en el ejemplo es el anchor text o texto ancla. Es el texto que aparecerá marcado para poder ser accionado al pasar el ratón sobre él.

 

Aun no tienes hosting para tu web o quieres cambiarte a un hositng de calidad. Te recomiendo Webempresa

 

Ahora veamos cómo es la estructura de un ancla

Un ancla nos permite dirigir al usuario a otra parte distinta pero dentro de la misma página en la que estamos. Es decir, no cambiaremos de página al hacer clic sobre el enlace, nos dirigiremos a otra parte de la misma página.

  • Primero colocaremos el ancla en el lugar de destino: el ancla tendrá la forma
    <a id=”ancla”></a>
  • A continuación colocaremos el enlace que nos dirigirá al ancla:
    <a href=”#ancla”>texto</a>
  • Si hacemos clic sobre el “texto” el navegador nos dirigirá al ancla que hemos creado en otra parte de la web.

Esta es la manera de crear enlaces con saltos en la misma página. Pero ahora vamos a ver como aplicamos esta teoría a DIVI para crear una página web en una sola página.

 

 

2.- Crear un sitio web de una sola página con la plantilla Divi para WordPress

 

2.1.- Crear las anclas o zonas de destino

 

Para crear los anclas utilizaremos las secciones del divi builder (contenedores principales del constructor de páginas).

Accede a la configuración de una sección y en la pestaña: “Ajustes generales” verás que al final de la página hay un campo denominado: “IDENTIFICADOR CSS”. Pues bien, vamos a utilizar dicho identificador como ancla.

Para ello escribiremos un nombre para el ancla en dicho campo. Por ejemplo:

IDENTIFICADOR CSS: ancla1

Nota: en la versión 2.6 de DIVI el campo “IDENTIFICADOR CSS” está en la pestaña “CSS Personalizado” de la configuración de la Sección.

 

texto ancla para hacer una web en una sola pagina

Texto ancla en una sección de DIVI

 

2.2.- Crear un menú de navegación en una sola página

 

Ahora vamos a crear un elemento de menú que nos lleve al ancla que antes hemos creado.

Debemos ir al panel de gestión de menús en WordPress. Para ello vamos a: “panel de administración > Apariencia > Menús”

En la barra lateral se muestran los tipos de enlaces que podemos introducir en el menú: páginas, Entradas, Enlaces personalizados,…

 

Para crear un enlace apuntando al ancla utilizaremos un “enlace personalizado”. Para ello desplegamos el panel de personalización de los enlaces personalizados y lo rellenamos:

  • URL: suponiendo que hemos utilizado “ancla1” como ancla en el ejemplo, en este campo pondremos: /#ancla1
  • Texto del enlace: texto que queremos que aparezca en el menú

 

Item de menu para web en una pagina

Enlace a sección de DIVI

 

A continuación pulsamos el botón de añadir al menú, colocamos el elemento de menú en la posición adecuada y guardamos.

 

 

3.- Activar “single page navigation” – Navegación con puntos

 

Al crear la página verás que en el lateral derecho te aparece un bloque específico de DIVI denominado: “Ajustes de página de DIVI”.

Dentro de este bloque verás una opción denominada: “Navegación con puntos”.

Si pones el selector en: “encendido” y pulsas el botón de guardar te aparecerán una serie de puntos en el lateral derecho de la página. Al hacer clic en cada uno de los puntos el navegador te dirigirá a cada una de las secciones de la página.

Al añadir una nueva sección a la página se creará un nuevo punto para la navegación.

 

navegación por puntos con DIVI

Navegación por puntos y botón de volver arriba con la plantilla DIVI para WordPress

 

 

 

4.- Botón de volver arriba con la plantilla DIVI

 

Para completar este tipo de navegación en una sola página la plantilla DIVI también nos ofrece la posibilidad de habilitar un botón que aparecerá situado justo bajo la navegación por puntos y que nos llevará a la parte superior de la página.

Este botón aparecerá conforme vayamos haciendo scroll en la página.

Para activar el botón debemos ir a: “panel de administración > Divi > opciones del tema”. Ahora en la pestaña “Ajustes generales” buscaremos un botón denominado: “Botón de volver arriba”. Una vez localizado solo debemos activarlo.

 

 

5.- Cómo crear páginas interiores de la web en una sola página con DIVI

 

Ahora vamos a ver el caso de querer enlazar varios ítems de menú con diferentes secciones de una página, pero siendo esta una página interior en vez de la página de inicio o home.

 

Creación de Anclas en las secciones de DIVI

Al igual que hicimos en la página de inicio lo primero que debemos hacer es acceder a la página en cuestión y situar las anclas en las secciones.

Para ello accedemos a cada una de las secciones que posteriormente iremos a enlazar desde elementos del menú y buscaremos el campo: “IDENTIFICADOR CSS”.

En DIVI 2.4 y DIVI 2.5 este campo está en la pestaña “Ajustes generales” de la configuración de la sección. En DIVI 2.6 este campo está en la pestaña “CSS Personalizado”.

Vamos a suponer que denominamos al IDENTIFICADOR CSS de una de las secciones “prueba1” y al IDENTIFICADOR CSS de otra de las secciones “prueba2”.

 

URL de la página

Ahora es necesario que veamos cual es la URL de la página en la que estamos trabajando. Vamos a suponer que la url de la página es: “saonavo.com/pagina-de-prueba”

 

Crear los ítems de menú

Ahora accedemos a la configuración del menú. Para ello debemos ir a “panel de administración > Apariencia > menus”

Desplegamos la pestaña “Enlaces personalizados”.

Según el ejemplo que hemos puesto, para la creación del ítem de menú que lleve a la sección que hemos identificado como “prueba1” pondremos:

  • URL: aquí pondremos la URL de la página sin contar el nombre de dominio + #texto ancla. Es decir en nuestro ejemplo pondríamos:
    /pagina-de-prueba/#prueba1
  • Texto del enlace: aquí pondremos el texto que queremos que aparezca en el menú. Por ejemplo: apartado 1

Y luego pulsamos el botón de añadir al menú y guardamos

 

Para crear el elemento de menú que vaya a la otra sección pondremos:

  • URL:
    /pagina-de-prueba/#prueba2
  • Texto del enlace: apartado 2

Pulsamos el botón de añadir al menú y guardamos.

Ya hemos creado una página interior de la web con el mismo efecto de una web de una sola página con WordPress y la plantilla DIVI.

 

 

6.- No funciona correctamente el enlace cuando hago clic desde otra página

 

Es posible que te haya ocurrido con la plantilla Divi, que cuando estás en una página de la web y haces clic en el enlace del menú que te ha de llevar a una determinada parte de otra página de la web, el scroll automático no te deja exactamente en el lugar que debería.

 

¿te ha ocurrido?

La solución es la utilización del plugin Divi Booster y su opción: «Fix Divi anchor link scrolling». El plugin Divi Booster sirve para ampliar las opciones de la plantilla Divi. En el siguiente botón tienes toda la info sobre el plugin Divi Booster

TODA LA INFO SOBRE DIVI BOOSTER

 

arreglar problema enlace scroll con divi

Esta es la opción de Divi Booster, que hay que marcar para que funcione correctamente el desplazamiento al enlace cuando estamos en una página de la misma web pero diferente a la página a la que lleva el enlace (todo dentro del mismo sitio web)

 

 

Compártelo ya!!