homefinance blog
Las barras laterales no son tan populares como en los viejos tiempos. En muchos casos, se distraen más de lo que son útiles. Pero a veces, una barra lateral tiene un significado perfecto, especialmente cuando se trata de contenido largo. Es por eso que me propuse crear una barra lateral que tenga mucho significado. Hoy le muestro cómo puede usar Divi Builder para crear una barra lateral receptiva fija (o pegajosa) con un ancla de carrera suave (o enlaces de salto). Debido a que la barra lateral permanece visible y los enlaces de anclaje se llevan ligeramente a diferentes secciones de la página, la barra lateral permanece casada con el contenido, por lo que es una característica útil de UX. Al igual que un boceto de documentos, esta combinación hace que el contenido de su página web sea más accesible y más fácil de leer. Es una solución refrescante para esas páginas largas.
¡Échale un vistazo! Tire con el ojo aquí hay un pico de lo que construiremos juntos.
El concepto
Para aquellos de ustedes que viven en Google Docs tanto como yo, usted es consciente de esa útil herramienta de boceto, que le permite implementar fácilmente una barra lateral fija, con un contorno que se puede hacer clic, que salta a los diferentes títulos de Su documento me gusta porque me ayuda a encontrar información mucho más rápido. Pensé que sería genial traer la misma función en su sitio web. Lo que necesitas comenzar para este tutorial, ¡todo lo que necesitas es Div! También usaremos la página de recetas en el paquete de recetas de alimentos, que está libre de Divi Builder.
Agregar Look a su página Suscríbase a nuestro canal de YouTube para comenzar, continuar y crear una nueva página e implementar Divi Builder. Seleccione la opción “Elija un aspecto prefabricado”. Desde la ventana de carga emergente en la biblioteca, seleccione el paquete de recetas de alimentos, luego haga clic para usar la página de receta. Después de look, haga clic para construir en el frente. Creando una nueva sección desde el constructor de la división frontal, cree una nueva sección y tírela a la parte superior del look.
Copie el botón en la sección del encabezado de la apariencia y pegue con una columna de la nueva sección que creó.
Abra la configuración del botón y agregue el siguiente CSS personalizado al elemento principal en la pestaña avanzada: Display: Bloque! Importante;
Esto simplemente permite que el botón se expanda durante todo el ancho de la columna vertebral.
Cambie el texto del botón para leer “Introducción”. Y luego agregue lo siguiente para la URL del botón: #Introduction Esta es la forma en que crea un enlace de anclaje. Hashtag (#) le dice al navegador que se conectará a una ID de CSS. El siguiente texto de “introducción” corresponderá al nombre de la ID de CSS que agregaremos a una de nuestras secciones en la apariencia. El nombre de la ID de CSS puede ser lo que desee. Asegúrese de que coincida con la identificación CSS que le da a la sección más adelante.
Duplique el botón y luego repita el proceso para darle al botón un nuevo texto del botón y una nueva URL del botón. Como este será un enlace de anclaje que salta en otra sección de la página, asegúrese de que el ID de CSS (el texto después de “#”) sea único y corresponde al nombre que le dará su sección más adelante. Para este botón, cambie el texto del botón a los “ingredientes” y la URL del botón en “#ingredients”. Cubra el botón nuevamente y luego le dé al nuevo botón el texto del botón “Nutrición” y cambie la URL de El botón a “#Nutrition”.
Duplique el botón nuevamente, luego le dé al nuevo botón el texto del botón “Instrucciones” y cambie la URL del botón en “#Instrucciones”.
Eso es todo lo que tenemos que hacer por el momento. Cirularemos de regreso a esta sección, convirtiéndola en una barra lateral fija en un poco. Agregar ID de CSS a secciones y líneas ahora, que tenemos todos los botones creados con enlaces de anclaje, estamos listos para agregar los nombres de las ID de CSS apropiadas a nuestras secciones y líneas. Los enlaces de anclaje omitirán automáticamente cualquier elemento en la página con la ID CSS apropiada. Se puede aplicar una ID CSS al texto en línea, módulos, filas o secciones. Si desea agregar un CSS de identificación al título con HTML, se vería así:
Introducción
Sin embargo, debido a que queremos pasar a una sección de página, podemos agregar la ID de CSS a la sección de página específica. Esto le dará al usuario suficiente espacio de visualización cómodo para que el visitante pueda reconocer fácilmente dónde está en la página. El salto al texto en línea o un módulo puede causar confusión para el visitante. Como cubrimos anteriormente, cada uno de los botones URL que creamos está destinado a coincidir con las ID de CSS de las secciones a las que deben pasar. Para el botón “Introducción”, debemos agregar la ID de CSS a la sección de la página que contiene el contenido de la introducción. Para esto, abra la configuración de la sección de la tercera sección de la página (sección directamente debajo del encabezado) y agregue el siguiente ID CSS a la pestaña avanzada: CSS ID: Introducción coincidirá con la inserción del enlace de anclaje que creé anteriormente.
Ahora, en la misma sección, encuentre el giro que contiene el título de “ingredientes”. Luego abra la configuración de la fila y agregue el siguiente ID CSS: CSS ID: los ingredientes coincidirán con el botón de conexión de anclaje para los ingredientes que creé anteriormente.
Desplácese hacia abajo en la siguiente sección con el título “Nutrición” y abra la configuración de la sección. Luego agregue la siguiente identificación CSS: CSS ID: Nutrición
Esto cumplirá con el botón de conexión Nutrición Anchor que creé anteriormente.
Finalmente, desplácese hacia abajo en la siguiente sección del aspecto con el título “Instrucciones paso a paso”. Luego abra la configuración de la sección y agregue la siguiente ID de CSS a la pestaña Avanzada:
ID de CSS: Instrucciones Esto coincidirá con las instrucciones de anclaje del botón de enlace que creé anteriormente. Guarde sus cambios. Ahora es un buen momento para ver si sus enlaces de anclaje funcionan. Abra la página en una nueva pestaña y haga clic en los botones en la sección superior para asegurarse de saltar / ejecutar en las ubicaciones de la página apropiadas. Si no funciona, asegúrese de regresar y verificar si las ID de CSS son correctas y que ellos adaptar.
Crear la apariencia fija de la barra lateral Agregar los bordes izquierdos a las secciones para crear espacio para que la barra lateral tenga enlaces de anclaje en la parte superior de la página es bueno para cosas como un contenido. Pero para este caso de uso, queremos mantener esas conexiones de anclaje visibles para el usuario en cualquier momento, para que el usuario no tenga que volver a la parte superior de la página después de hacer clic en uno de los enlaces. Una barra lateral fija resolverá este problema, ya que permanecerá arreglado en el lado de la página mientras el usuario hace clic en los enlaces de anclaje.
Pero antes de colocar la barra lateral, debemos crear un espacio en el lado izquierdo de nuestra página. Para hacer esto, agregaremos un margen izquierdo a cada sección de la apariencia. La cantidad de borde izquierdo que agregamos a cada sección será igual al ancho de la barra lateral, por lo que ahora es el momento de decidir qué tan ancho desea ser la barra lateral. Para este ejemplo, tendrá un ancho del 20%. Abra la configuración de la segunda sección (la directa en nuestros botones de enlace de anclaje) y agregue el siguiente margen personalizado: el margen personalizado: 20% permanece, antes de guardar la configuración, haga clic derecho en el margen personalizado y haga clic en “Copiar el margen personalizado “Y guarde la configuración. En cada una de las secciones que quedan a lo largo de la apariencia de la página, pegue el borde personalizado en la sección haciendo clic derecho en la sección y haciendo clic en “Inserte el margen personalizado”.
Esto proporcionará un margen izquierdo del 20% a todas sus secciones, excepto la sección superior que contiene los botones de conexión de anclaje. Creando la barra lateral fija para crear la barra lateral, tendremos que ofrecer una posición fija a la izquierda de la página. Entonces, prácticamente, convertiremos la sección superior en una barra lateral fija. Para esto, abra la configuración en la sección superior y actualice lo siguiente: debajo de la pestaña de diseño, actualice la altura y el ancho … Ancho: 20% altura: 100% debajo de la pestaña avanzada, actualice la posición … Diff vertical: 80 px Esto le da a la sección una posición fija con un ancho del 20% de la página. Además, coloque la sección a la izquierda de la página y 80 PX en la parte superior de la página para que coincida con la altura del encabezado. La altura del 100% garantiza que la sección se extienda en toda la altura de la página. Ahora ve la página en otra pestaña del navegador para ver la funcionalidad. A medida que ejecuta la página, la barra lateral permanece solucionada y puede hacer clic en los botones de enlace de anclaje para navegar fácilmente a las diferentes secciones.
Remediar la superposición del sótano puede haber notado que la sección se superpone en la barra del sótano en la parte inferior de la página.
Hay algunas maneras de abordar este problema. Por ejemplo, podría obtener “altura: 100%” de la sección o puede agregar CSS a la configuración de la página para ajustar el ancho de la barra del sótano. Pero si desea mantener la altura de la sección al 100%, una solución fácil es eliminar el color de fondo de la sección. Abra la configuración de sección que usamos para la barra lateral y agregue el siguiente color de fondo: Color de fondo: RGBA (255,255,255.0)
Si desea cambiar el color de la barra lateral, puede abrir la configuración de la página y cambiar el área de color de fondo. Como la sección de la sección es transparente, el color de fondo del área de contenido para su página brilla. Y debido a que todas nuestras otras secciones tienen un color de fondo, solo se mostrará a través de la sección de la barra lateral sin superponer la barra inferior. Hacer ajustes móviles Este diseño no tiene sentido para los teléfonos inteligentes, porque no hay espacio para una barra lateral, y los lazos en la parte superior de la página requerirán que el usuario se corra cada vez que quiera hacer clic en un anclaje de enlace. Pero el diseño continuará funcionando para la tableta, pero es posible que deba crear espacio para esos enlaces de anclaje. Para esto, abra la configuración de la fila para el lado de la barra lateral y actualice lo siguiente: Ancho personalizado: 100 trenza personalizada (escritorio): 10% izquierda, 10% de finalización personalizada derecha: 0% izquierda, 0% derecha
Ahora todo lo que tenemos que hacer es ocultar (o desactivar) la sección en el teléfono inteligente. Para hacer esto, abra la configuración de la sección y vaya a la pestaña avanzada y haga clic en la casilla de verificación para apagar su teléfono inteligente.
Eso es todo. ¡Ahora tiene un menú con una barra lateral fija receptiva, con enlaces de anclaje suaves de carrera! El resultado final ahora es verificar el resultado final.
Esto es lo que parece el aspecto de la tableta.
Obtenga más información sobre los elementos fijos y los enlaces de anclaje si le resulta útil este tutorial, consulte a continuación algunos de los tutoriales relacionados:
5 cosas interesantes que puede hacer en Divi con Anchor LinkScum para hacer cualquier elemento de su consejo
Cómo agregar widgets fijos a la barra lateral en WordPress
Cómo hacer que su navegación de la Divica comience desde la parte inferior, luego manténgase arreglado en la parte superior al desplazarse
Cómo resolver su subsuelo Div
Cómo crear un menú emergente flotante en la división
Pensamientos finales La belleza de esta configuración es que puede agregar fácilmente barras laterales fijas a cualquier página con diferentes enlaces de anclaje (o lo que desee). Debido a que la barra lateral es esencialmente una sección de división, puede personalizarla utilizando la configuración Built -in, puede agregar más filas y puede usar cualquier combinación de módulos que desee. Esta configuración sería excelente para cursos de membresía, tutoriales, preguntas frecuentes, carteras o largas publicaciones de blog. Puede usarlo incluso para sitios web de una página. ¿Tienes otros usos para compartir? Estoy interesado en escuchar lo que estoy en los comentarios. ¡Suerte!
