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.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
¿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.
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.
ÍNDICE ENLACES CON SALTOS DE PÁGINA / WEB EN UNA SOLA PÁGINA
- 1.- Enlaces con saltos en la misma página
- 2.- Crear un sitio web de una sola página con la plantilla Divi para Wordpress
- 3.- Activar “single page navigation” – Navegación con puntos
- 4.- Botón de volver arriba con la plantilla DIVI
- 5.- Cómo crear páginas interiores de la web en una sola página con DIVI
- 6.- No funciona correctamente el enlace cuando hago clic desde otra página
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.
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 en una sección de DIVI
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ú
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.
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 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”
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
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)
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquín y gracias por tus tutoriales, son de gran ayuda para los que diseñamos con Divi. Me estoy volviendo loco buscando una solución para unos enlaces que quiero poner en mi web. Me gustaría cuando estoy leyendo una entrada del blog debajo de la misma aparecieran los enlaces a etiquetas y categorías a las que pertenece dicha entrada. Ha buscado plugins, código y no he encontrado nada que funcione. ¿Podrías ayudarme? Gracias de antemano!
Buenas,
En las entradas de blog, por defecto aparece debajo del título las categorías a las que pertenece dicha entrada de blog. Lo puedes ver en cualquier entrada de mi blog
Hola Joaquín.
Excelentes tus aportes en cuanto al manejo de DIVI, me han servido mucho en mis proyectos web.
Tengo una inquietud, o quiero tener algunas páginas tipo «Demo» de lo que hacemos, pero requiero que tengan su propio menú con navegación por anclas.
Me ha tocado hacerlo creando subdominios, pero se vuelve muy dispendioso, ademas que me toca instalar wordpress en cada subdominio. Yo quisiera algo similar a los temas demo de Elgant Themes en su web, que estan en un subdirectorio y cada tema tiene su propio menu, incluso con logo diferente. Por ejemplo https://www.elegantthemes.com/demo/?theme=Nimble.
Quedo atento y de antemano muchas Gracias
Hola Juank,
lo cierto es que, como tu dices, solo se me ocurre poner las demos en un subdominio o una carpeta interior. No sé como estructuran las demos en Elegant Themes, pero sospecho que puede tener algo que ver con los multisites en WordPress (gestionar varios wordpress con una sola instalación).
En este post tienes información sobre los multisites en WordPress
Hola Joaquín!
lo primero mis felicitaciones por tus tutoriales, son de gran ayuda.
Y ahora te planteo un problema que tengo en el menú de mi web hecha con divi ya que tengo tanto elementos con «enlace personalizado» a un #ancla y tambien elementos que van a otra página diferente. Hasta ahí bien, el problema es que en el menú me salen de un color los elementos que están activos en esa misma pagina porque son anclas y los que llevan a otra pagina me salen de otro color. ¿se puede hacer para que solo cambie del color el elemento del menu cuando estoy justo sobre el ancla de esa seccion? Espero haberme explicado bien…. No he puesto el enlace a mi web porque la tengo en construccion… Mil gracias!!
Hola Quique,
Se a que te refieres, porque me ha pasado a mi también y me lo ha consultado más gente. No he encontrado una solución para este tema. Al final, decidí poner el enlace de color activo igual que el de texto normal para que no hubiera cambios.
Joaquin buenos días, super buenos tus tutoriales, casi siempre me guio aquí pero nunca escribo., pero hora tengo un problemita quizás puedas saber que sucede. resulta que inicie en crear una web, la primera de hecho, y cree las paginas necesarias para empezar a rellenar, pero no se porque razón elimine la pagina de inicio que trae por defecto el wordpress y cree una adicional, ya, el punto es que en el menú de la cabecera me aparecen dos «inicio» no se si me explico, como si existieran dos paginas de inicio pero cuando entro a configurar las paginas, solo esta 1, y si la elimino o la pongo provada, ningún inicio me funciona. y los dos enlaces de inicio de la cabecera me llevan al mismo lugar, lo que no se es como eliminar uno de esos enlaces. Me podrias ayudar? te dejo la web donde tengo el problema. http://www.jmcomercial.cl/
Buenas Ricardo,
Lo primero agradecerte tus palabras.
Elimina uno de los items o elementos de menú desde: «Apariencia > menus» (selecciona el menú que quieres editar, en caso de tener varios) y elimina uno de ellos. Aquí tienes más info sobre la gestión de menús en wordpress
Hola Joaquín,
Estoy intentando hacer el texto ancla para la navegación interna dentro de una página (CONTACTO) desde los enlaces del footer que tendrían que ir cada uno a un parráfo…previamente los párrafos los dividí en secciones y les puse un identificador css y luego en el widget del footer escribí en la url el texto ancla con la #delante y no salía porque tenía que añadír /contacto/#textoancla…
Para ajustarlo con el divi booster como era?
Apartado 1.7 del post: Divi Booster parte 2, Opciones generales del diseño
Me gustaria saber si existe algun modo de en la navegacion por puntos del tema divi 3.0.9 hay alguna forma de poner cuando se navega en pc normal, el nombre de la seccion activa. Saludos Jorge.
Hola Jorge,
No existe ningúna opción para personalizar o añadir textos a la navegación por puntos de Divi,
pero existe un plugin que si permite añadir textos y personalizar la barra de navegación por puntos de Divi
Plugin Navegación por puntos Divi
Hola Joaquin
Gracias por sus post son muy buenos, quisiera saber lo siguiente
Tengo Divi y me enviaron una plantilla de una web para editarla
no se como hacerlo.
Ya encontre como subirla, la subi pero no la encuentro para poder
editarla.
Gracias por anticipado
Buenas,
Para poder personalizar o trabajar sobre una plantilla esta debe estar activa además de instalada. Es decir, una vez instalada tienes que ponerla como activa o principal.
Hola Joaquin,
tengo el pequeño inconveniente que el destino que he creado es diapositivas por lo tanto en : ajustes de diapositiva/CSS personalizado no me aparece: identificador CSS para poder poner ; ancla1 o el nombre que quiera en su defecto.
Ahora bien quiero llegar a ellos por medio de unos módulos de anuncios que he creado y los cuales quiero que al pinchar sobre ellos me lleven a las diapositivas que te comento. Mi problema es saber adónde he de crear los enlaces pues las diapositivas no me muestra : identificador CSS por cada una sino por todo el módulo, pero el detalle es que para cada diapositiva tengo un anuncio específico.
un saludo
Hola Carlos,
lo siento pero no entiendo a que te refieres. Por favor, intenta esplicarmelo más detenidamente. Cuando hablas de diapositivas te refieres a el modulo tipo slider ¿verdad?
Un saludo
Hola, estoy haciendo una página con anclas pero en el menú no se como resaltar el link activo de cada apartado, es algún error de Divi? Soy novata, muchas gracias
Hola Eva,
Divi marca los enlaces del menú que se corresponden con la página que está activa. Por lo que si hay varios enlaces del menú que llevan a la misma página (aunque sea a diferentes secciones de la misma) se resaltará su color al mismo tiempo por estar dicha página visualizándose. No hay ninguna opción para hacer que solo se marque el enlace correspondiente a la sección que estás visualizando.
Yo lo que he hecho en estos casos es poner el color del enlace activo igual que el color del texto para que no se destaque ningún enlace activo.
Un saludo
hola Joaquin, aún no he comenzado mi página pero estoy pensando en el diseño. Y he leído que la tendencia es al diseño modular , que queda como los módulos de pinterest y por ejemplo se entra a cada post escrito en el blog como si fuera un portfolio.
es posible hacer esto con Divi? ¿sabes si hay alguna de las plantillas pre-formateadas que lo incluya? te pregunto porque aún no he comprado la plantilla y es un elemento para la definirme o no por ella.
muchas gracias!
Hola Patricia,
por lo que comentas creo que te refieres a lo que en Divi se denomina mostrar las entradas con el módulo tipo blog Masonry,
te dejo un par de enlaces de ejemplo de la plantilla Divi a ver si te refires a eso:
Blog Masonry con Sidebar
Blog Masonry sin Sidebar
Un saludo
Buen día Patricia y Joaquín. Un poco tarde, pero si existe una manera para no resaltar el enlace de la sección. Es muy sencillo, en la url el enlace predeterminado en vez de colocar /#contacto, se debe colocar #contacto sin «/», ahí funciona perfectamente.
Saludos desde Venezuela
Hola!!
He comprado la plantilla Divi a través de tu enlace y estoy encantada.
Tengo el blog casi terminado pero hay un par de cosillas que me gustaría preguntarte, ya que no consigo dar con ell0…
No encuentro el modo de limitar el numero de entradas en la home, he probado en ajustes/ lectura pero al cambiarlo allí no sucede nada, siguen saliendo 9 y yo quiero que se vean sólo 6. Supongo que se debe cambiar en el divi builder pero no consigo verlo.
Y otra cosa que me trae loca es como cambiar el color de la palabra Inicio del menú, por defecto viene en azul y quiero ponerlo en rojo. Cambia a rojo cuando empiezas a bajar pero yo la quiero en rojo siempre, el azul no me pega nada.
Si eres tan amable de indicarme te lo agradeceré enormemente.
Muchas gracias!!
Si eres tan amable de indicarme
Hola Katia,
1.- Para limitar el número de post que salen en la home yo utilizaría el móudulo blog del divi builder que si tiene esa opción en la configuración del módulo. Pero debes crear la página de inicio con el Divi builder y luego decirle a WordPress que esa es la página de incio de la web (Ajustes > Lectura). Si utilizas un sidebar en tu web, tambíen tendrás que añadir el «modulo barra lateral» en la home.
2.- Para personalizar el color de los items de menú del menú principal de Divi debes ir a: «Divi > Personalizador de temas > Cabecera y Navegación > Barra de menú Principal».
Un saludo
Estoy conociendo divi y me encanta!
tus videos me sirven de mucha ayuda.
Tengo una pregunta, si los enlaces del menu los haces internos a secciones de la misma pagina, como puedo poner ese enlace con otro color cuando haces scrooll y llegas a esa sección. O incluso al pulsar en el enlace?
lo que quiero conseguir es lo que hace esta plantilla (se q es en drupal) http://demo.megadrupal.com/?theme=boom-one al hacer scrool se va cambiando los colores del menu.
GRACIAS DE ANTEMANO!!
Hola Francisco Javier,
no hay ninguna opción en Divi para poder realizar lo que comentas.
Tendrías que realizar modificaciones de código.
Un saludo
Muchas gracias! estupenda explicación.
Muy clara la info! Gracias por tu ayuda.
Tengo un problema con este tema de las anclas en Divi 3.
Sucede que la posición resultante de la página llamada a través de un link ancla no es la correcta, pues no veo la sección completa, aparece cortada arriba, ¿Cómo logro a través del uso de un ancla la posición que entrega un punto del menú de navegacion por puntos? Este tipo de navegación si funciona perfectamente, es decir estos links si dan una posición correcta de la página al llamar a cada sección con cada uno de los puntos.
esta es la web con la que tengo el problema:
totalvisionpanama.com/contactologia
Espero haber sido claro. Muchas gracias por tu ayuda.
Saludo!
Hola Julian,
si eso pasa a veces. Tienes que ajustar un poco, para ello puedes jugar con donde pones el destino del ancla (puedes hacerlo en la sección o en algún módulo según te interese) mi recomendación es que lo pongas en la sección.
Luego puedes poner nada más empezar la sección algún «módulo separador» y probar con varias «alturas» para ir ajustando hasta que se vea el contenido adecuado tras hacer clic en el ancla.
Un saludo
Hola! Buenas noches!
Lo he Mirado por todos los sitios pero no lo he encontrado.
Un boton en una seccion para pasar a otra seccio.
Graciaa!!
Hola Lluis,
el concepto es el explicado en el post, lo único que cambia es que tendrás que poner la url del enlace en el botón que vaya hasta la sección que hayas definido.
Un saludo
Joaquín muchísimas gracias, encontré mis respuesta en las preguntas que habéis contestado, lamento no haber comprado Divi con tu enlace de descuento, te felicito muchísimo y seguro optaré por uno de tus cursos.
Saludos Genio!
Hola Norman,
gracias a ti.
Un saludo
Buen día, Joaquín!
gracias por tus aportes en el blog! realmente eres muy claro explicando y se nota que dominas totalmente el tema Divi. Me gustaría tener tu opinión respecto a lo siguiente: he hecho mi página web a través de la plantilla Zerif Pro y ahora quiero pasarme a Divi. Como estoy aún aprendiendo a usar Divi e incluso quiero hacer algunas modificaciones respecto a la página que ya tengo hecha con Zerif Pro, quisiera montar Divi y su tema hijo en un hosting gratuito y luego pasarlo al dominio que tengo donde está Zerif Pro. ¿Es posible esto? lo haría para que en la transición de crear la nueva página la gente no entre y se encuentre que está totalmente en construcción mientras voy aprendiendo a usar Divi.
bueno, Joaquin, desde ya muchas gracias
Patricia
Hola Patricia,
lo que comentas se puede hacer. Crear la web en otro hosting y con otro dominio, pero eso te obligará a realizar una posterior migración de la web. Este proceso tiene sus complicaciones. En cualquier caso mi recomendación es realizar la nueva web dentro del hosting definitivo con otro dominio o en el mismo dominio dentro de una carpeta por ejemplo midominio/provisional.
Otra opción que tienes es empezar la web desde el principio en el dominio definitivo. De esta manera te ahorrás el proceso de migración que no es cosa sencilla y mientras ponerte un plugin de mantenimineto como este: maintenace
Un saludo
muchísimas gracias, Joaquín por tu respuesta! se nota que eres muy profesional tanto en lo que publicas en tu blog como en el tiempo que tomas para responder a quienes te consultamos.
Voy a hacer la opción de la carpeta dentro de mi dominio, que creo que es lo mejor.
Un saludo
Hola Joaquin.
Lo primero felicitarte por el blog. Eres referencia en Divi en castellano.
Uso Divi 3.0.4 y estoy tratando de crear una one page en una pagina interior. Creo menús personalizados. Al ser pagina interior dispongo la url sin dominio mas el tag, tal como se explica /pagina-de-prueba/#prueba1
Lo que ocurre es que no hace scroll hasta el modulo, si no que recarga la pagina en la posición del modulo.
Es un bug o hago algo mal?
Gracias!
Hola Rubén,
muchas gracias por la felicitación. Me alegro que éste sea un blog de referencia para la Plantilla Divi.
Prueba a ponerle el dominio delante. Es decir:
http://midominio.es/pagina-de-prueba/#prueba1Un saludo
Buenas tardes,
Me llamo César y me dedico al mundo del diseño Web; Estoy realizando un encargo en el que se me pide algo similar a lo que aparece en este sitio Web http://www.mariapsicologamadrid.com/especialidades-metodologia/#adultos-ansiedad-y-otros, concretamente lo referente a los 3 puntos al lado derecho de la pantalla.
Siguiendo las instrucciones de este post he logrado simular el efecto scroll y los puntos pero no consigo que al pasar el ratón por encima de los puntos me salga un texto indicativo de adonde voy a dirigirme al hacer click.
¿Es posible personalizar esa zona? (poner textos a los enlaces, cambiar los colores o dimensiones de los puntos etc)
Gracias por adelantado. Un saludo.
Hola Cesar,
Divi nos da la posibilidad de que aparezcan unos puntos para la naveción de las diferentes secciones de una página pero no podemos personalizar esa navegación poniendo títulos. La navegación con textos en una sola página solo se puede hacer desde el menú
Un saludo
Comprendo lo que me dices; ¿Por css tampoco se podría realizar?
Por lo que veo observando el código (0) de cada uno de los elementos que forman la lista de puntos y, con los conocimientos que yo tengo de html y css lo que faltaría sería poder poner un texto entre el signo > y la etiqueta de cierre que con las etiquetas anclas es donde escribes el texto que al pinchar en él te redireciona al destino; Otra cosa ya sería usar un :hover o similar con el que lograrías que el texto apareciese al pasar por encima de los puntos y que no estuviera fijo.
No sé si me entiendes a donde quiero llegar.
Un saludo
Hola Cesar,
No lo se, es posible que con HTML y CSS si puedas hacerlo, pero no lo se. Para eso tendrás que probar a ver…
Un saludo
Hola Joaquin, muy bien explicado, por fin lo he conseguido, llevaba tiempo con ésta idea
muchas gracias
por favor sigue enseñando trucos de estos.
Gracias por compartir tus conocimientos a la comunidad wordpress, me sirven de mucha ayuda. Espero que sigas con lecciones DIVI 🙂
Un saludo
Hola Javier,
muchas gracias. Seguiré ofreciendo post sobre wordpress y divi
Un saludo
Buenos días Joaquín! Muy claro el post, enhorabuena.
Tengo una duda, a ver si me puedes dar una pista. Estoy haciendo una pagina con secciones y cada enlace del menú lleva a una sección de esa pagina pero mi duda es como resaltar la opción del menú que se ha elegido. Todas tienen el mismo color . ¿ Como se puede definir el color del enlace activo ?
Muchas gracias por tus aportes
Hola Tino,
El tema del enlace activo depende de la plantilla Divi y no dejar especificarlo por secciones. Por lo que cuando se me ha planteado lo comentas finalemnte he decidido poner el mismo color para el texto normal y el enlace activo, con la finalidad de que éste no se aprecie.
Un saludo
Gracias por contestar Joaquín. Pero no se si te he entendido bien. ¿ No hay posibilidad de dejar marcado de otro color el menú que este seleccionado ? Me parece un fallo muy grande para una plantilla de tanta calidad. Seguiré investigando a ver si con css se puede resolver. Si encuentro algo lo conaré
Muchas gracias por tus explicaciones
Hola Tino,
No se si hay posibilidad, yo no la conozco. No es un problema de Divi, no conozco ninguna plantilla que incluya esta opción por defecto
Si lo consigues resolver, por favor compártelo
gracias
hola, es justo lo que estaba buscando, me he suscrito a tu canal, por favor sigue con éstos tutoriales de DIVI.
gracias por compartir
Hola Pedro,
gracias a tí.
También te recomiendo que te suscribas a la web.
Un saludo
Hola,
estoy usando la plantilla DIVI para una web y tengo una duda sobre el menu, ya que mi pagina de inicio es una pagina con secciones y cada enlace del menu lleva a una sección de esa pagina de inicio pero también he incluido un enlace el BLOG. El problema lo tengo cuando estás en el BLOG los enlaces a las secciones no funcionan. No sé si puedo crear un menu diferente para el BLOG o DIVI me da alguna solución que no conozco. ¿Conoceis alguna solución?
Gracias y enhorabuena por el post.
Hola Franky,
Prueba a poner los enlaces con url globales. Es decir, añade tambíen el dominio de la web a las urls.
Es decir, en vez de utilizar algo así /#seccion1
utiliza algo así
http://www.midominio.es/#seccion1Un saludo
hola muchas gracias me ha servido muchísimo, eso sí que mi DIVI no tiene la opción de navegar por puntos… tampoco para crear un boton back to top 🙁
al crear las anclas en mi sitio se va muy rápido al lugar y he visto en otros sitios one page que se desplazan más lentos al cambiar de sección. ¿Sabes algo de eso?
saludos!
Buenas Claudio,
ves a panel de adminitración > Divi > Opciones del tema:
1.- Busca la opción: «Botón de volver arriba»-> botón back to top
2.- Busca la opción: «Desplazamiento suave»
Cuando estés creando una página:
En el bloque «Ajustes de página de Divi», tienes la opción navegación con puntos
Un saludo
Hola Joaquín. Cuando te refieres a Opciones del tema ¿es en el apartado general? Es que necesito activar el botón volver arriba y el desplazamiento suave, pero no encuentro la opción.
Gracias!
Buenas,
Si, en el apartado «General», míralo despacio porque las dos opciones están ahí.
Un saludo
saludos. no tendras o sabes de tutoriales por secciónes de Divi, por ejemplo estoy perdido de como crear un menu en la barra lateral izquierda, igual de como ponerlo arriba
Hola Albert,
pues lo cierto es que no tengo ningún tutorial de Divi. Se que hay por internet, pero no se donde porque nunca he buscado ninguno.
Para poner un menú en la barra lateral tendrás que utilizar un widget tipo menú.
Un saludo
Hola de nuevo, Joaquín. Disculpa, pero h
e mirado muchas veces y no consigo verlo, ¿No será algún pluggin que tenga que instalar o algo similar? Estoy segura de que no aparece.
Buenas Mónica,
estás trabajando con la plantilla Divi ¿verdad?
estás en Divi > Opciones del tema ¿verdad?, pestaña «General»
¿que opciones son la tercera y cuarta empezando por la cola que ves en tu pantalla?
deberían ser:
Botón de volver arriba
Desplazamiento suave
Un saludo
Muy buen artículo. Me ha ayudado mucho. Gracias.
Buenas,
Estoy leyendo el blog en estos momentos.
Lo he descubierto porque hablabas sobre divi.
Me he suscrito tras ver que había buena calidad de post en más entradas y muy elaboradas.
Aprovecho este comentario para decirte que te lo has currado.
Voy a seguir leyendo sobre divi.
Gracias. Saludos
Hola,
Me alegro que te interese el tema de la plantilla DIVI.
Un saludo
Gracias, pero que muchas gracias. Justo lo que estaba buscando. A partir de ahora te sigo.
Hola Verónica,
me alegro que hayas encontrado lo que buscabas sobre creación de sitios web en una sola página y que te hayas suscrito al blog.
gracias
Un saludo
¡Muy bueno! Felicidades, me lo apunto para seguir tus consejos, no conocía el truquillo de los anchor.
Hola Diego,
Muchas gracias por tus comentarios, me alegro que te haya gustado.
Un saludo