El widget de Navegación por Desplazamiento

Por Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.

También hemos Publicado

Tutorial de Esta Semana

El widget de Navegación por Desplazamiento

Navegacion por Desplazamiento

Síguenos en Facebook

Navegacion por Desplazamiento

El widget de Navegación por Desplazamiento o Scroll Navigation ofrecee múltiples configuraciones de estilo y contenido, lo que permite configurar los íconos, usar etiquetas, definir la posición de los elementos, el tipo de fondo, y hay mucho más que puedes personalizar para que el widget se vea tal y como lo deseas. Puedes ajustar la visibilidad o posición de la Navegación para que aparezca a la Derecha -es el predeterminado- o a la izquierda.

Ejemplo del Widget de Navegación por DesplazamientoDesplazamiento. En la imagen de abajo puede ver el ejemplo del Widget de Navegación por Desplazamiento en uso con la visibilidad de la Navegación a la Izquierda.

Hero

Usar este widget, como veremos es sumamente sencillo. Quiero aclarar que estoy usando Kava como tema, Elementor Pro y CrocoBlock en una instalación fresca o nueva de WordPress ya que se trata de la creación de un Sitio Web.

  1. Lo primero que haremos es crear la sección e identificarla en el Navigator» de Elementor -ver a la derecha-. Una vez hemos terminado de configurar la Sección, en el Menú de Elementor buscamos el Widget de Navegación por Desplazamiento -Scroll Navigation -ver a la izquierda- y lo arrastramos a la parte superior de la Sección  -ver recuadro gris en la parte superior de la imagen-. De manera predeterminada nos muestra tres Elementos o Items. Puedes escoger editarlos o como lo hice yo, eliminar dos de ellos y editar el que queda. Vamos al Segundo Paso.

  2. Con nuestra Sección seleccionada vamos a Avanzado y la identificamos en el ID de CSS exactamente a como lo hicimos en el «Navigator»
  3. Una vez hecho esto ahora Oprimimos el Elemento que dejamos de los predeterminados y lo editamos de manera que el Label o Etiqueta y Section Id o ID de Identificación estén identificados tal y como lo identificamos en el ID de CSS.
  4. Ahora únicamente nos resta repetir los pasos anteeriores para cada una de las Secciones que necesitemos. A continuación verás tan sólo imágenes de dos secciones más, a pesar de que el sitio cuenta con más de ellas.

  5. Para ver en uso el Widget puedes ir a jmraccountingpr.com

Compartenos en tus redes sociales

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Share on print

Leave a Reply

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit