Cómo hacer que cualquier artículo de la página se adjunte

Saber cómo hacer cualquier página Lipic (o fija) es una de esas habilidades útiles que los diseñadores web pueden usar de varias maneras. Si no está familiarizado con el término “pegajoso”, simplemente se refiere a un elemento de una página web que permanece “arreglada” a medida que el usuario ejecuta la página hacia abajo. Un ejemplo popular de un elemento pegajoso es un menú de navegación fijo. DIV tiene una funcionalidad de navegación fija (o pegajosa) disponible de forma predeterminada. Entonces, cuando el usuario ejecuta la página hacia abajo, una versión fija del menú permanece bloqueada en la parte superior de la página a medida que el usuario se ejecuta. Pero los elementos pegajosos se pueden usar para casi cualquier cosa y es una excelente manera de llamar la atención sobre la acción deseada en cualquier página.
En este tutorial, le mostraré una manera fácil de hacer cualquier elemento en su página pegajosa usando el complemento llamado menú adhesivo (¡o cualquier cosa!) En el desplazamiento. Solo se necesitan unos momentos para configurar la configuración del complemento. Entonces, todo lo que tiene que hacer es agregar un CSS de identificación personalizado a su artículo es muy fácil. ¡Entremos en esto! ¿Qué necesitas para este tutorial para este tutorial? Necesitarás lo siguiente:
El tema de Div
Menú pegajoso (¡o cualquier otra cosa!) Desde el complemento de desplazamiento
La aparición de la página del blog de contabilidad (disponible en Divi Builder)
Cómo hacer que cualquier artículo de la página se adjunte
Suscríbase a nuestro canal de YouTube configurando la configuración del complemento Una vez que tenga el menú adhesivo (¡o cualquier cosa!) En el complemento de desplazamiento, vaya al tablero de WordPress y explore el menú adhesivo> Sticky (¡o cualquier cosa!). En la pestaña Configuración básica, actualice las opciones de la siguiente manera: Primero, deberá agregar un identificador único a su elemento pegajoso. Esto puede ser una identificación o clase CSS. Luego agregaremos este identificador a nuestro elemento en la división más adelante. Para recordar fácilmente, agregaré la ID de CSS “#Ticky”. Elemento pegajoso: # Lipicular, debe agregar el valor de los píxeles para el espacio entre la parte superior de la página y el elemento pegajoso. Debido a que la barra de navegación fija de Div tiene una altura de 54 PX por defecto, queremos agregar al menos 54 PX para esta opción, de modo que nuestro elemento adhesivo no se superponga sobre el barco fijo. El espacio entre la parte superior de la página y el elemento pegajoso: 54 píxeles también es una buena idea deshabilitar el elemento pegajoso en el móvil. Para hacer esto, debemos configurar el complemento para no pegar el elemento cuando la pantalla tiene menos de 980 PX.
No pegue el elemento cuando la pantalla es inferior a: 980 píxeles
Guarde la configuración, luego acceda a la configuración avanzada y actualice lo siguiente: para la opción Índice Z, queremos asegurarnos de que nuestro elemento se apile por encima de todos los otros elementos en la página, especialmente si planeamos nuestro elemento superpuesto con otros elementos en el rollo. Para asegurarse de que esto esté sucediendo, establezca el índice Z a 99998. Index Z: 99998 Para tener una idea de cómo los elementos en el Div. Las secciones tienen un índice 2, las columnas tienen un índice de 9 y el encabezado / La barra de navegación tiene un índice Z de 99999. Por lo tanto, prácticamente, queremos que nuestro elemento pegajoso sea 1 número más pequeño que el índice Z para navegar el encabezado. Esto asegurará que el elemento pegajoso esté por encima de todas las demás páginas, excepto NAV. Esto será útil cada vez que desee apagar su artículo y empujarlo hacia arriba para que el elemento pegajoso no se pare por encima del barco mientras se ejecutan (se ven desordenados y rotos). Luego podemos agregar un identificador para “empujar” el elemento. Puedes pensar en ello como una parada para nuestro elemento pegajoso. Este suele ser un elemento en el sótano. Básicamente, esto identifica el elemento que detendrá el elemento pegajoso al desplazar la página hacia abajo, permitiendo que el elemento pegajoso se empuje hacia arriba con el resto de la página. Para este ejemplo, estableceré el identificador con la ID CSS “#stop”. Artículo de flexión: #stop

Guarde la configuración. ¡Ahora estamos equipados con la potencia que necesitamos para crear un elemento pegajoso! Haciendo una página de división pegajosa para mostrarle cómo hacer un elemento de división pegajosa, usaré la página del blog de contabilidad de Divic desde el paquete de contabilidad. Para comenzar, cree una nueva página, dé un título a su página e implementa Visual Builder. Luego seleccione la opción “Elija un aspecto prefabricado”. Desde la ventana de carga emergente en la biblioteca, seleccione el paquete de contabilidad y elija la página del blog. Esta página presenta un formulario de Optine de correo electrónico en la barra lateral derecha de una sección especializada. En un esfuerzo por llamar más atención a este formulario, podemos hacerlo pegajoso una vez que el usuario pase por la página. Luego podemos hacer que el elemento se detenga (o presione) siempre que llegue a la sección de la página siguiente para que no se superponga. Cómo hacer una columna pegajosa en este momento, sin embargo, debemos decidir qué elemento específico queremos hacer pegajoso. Podríamos hacer que el módulo de opción de correo electrónico sea pegajoso, pero esto no representaría el módulo de seguimiento de las redes sociales en el formulario, que queremos hacer pegajoso. Y podemos darle a ambos módulos el mismo identificador, porque ambos se volverían pegajosos en la misma posición, causando superposición. La mejor manera de hacerlo es hacer que toda la columna (columna 2) sea pegajosa.
Para hacer que la columna 2 sea pegajosa, abra la configuración de la fila de la fila que contiene la columna a la que queremos apuntar. Luego, debajo de la pestaña avanzada, agregue la ID CSS “pegajosa”. Corresponde al identificador único del elemento pegajoso que hemos agregado a la configuración de nuestro complemento. ID CSS: Sticky (nota: No ponga el símbolo hashtag (o lira) delante de la ID aquí. También asegúrese de agregarlo a la ID de CSS y no a la clase CSS) Guarde la configuración y una vista previa de la versión en vivo de la página. Si se desplaza hacia abajo, notará que la columna 2 (con ambos módulos) se volverá pegajosa una vez que se conviertan en 54 PX en la parte superior de la ventana y permanezca en esa posición a medida que continúe funcionando.

Detener el elemento pegajoso en una sección como puede ver, el elemento continúa siendo pegajoso, para superponer el contenido de las otras secciones a continuación. Para detener esto, podemos usar nuestro identificador “Push Up” (#stop) que hemos agregado a la configuración del complemento. Para detener el elemento adhesivo en la sección a continuación, debemos abrir la configuración de la sección y agregar la identificación de CSS “parar”. ID CSS: Detente

Ahora vea la versión en vivo de la página. Observe cómo se detiene el elemento pegajoso en la sección que identificó.

Muy bien, ¿verdad? Cómo hacer un modo pegajoso para hacer un solo modo pegajoso, deberá hacer un ajuste en el DIV. Como mencioné anteriormente, Divin atribuye un índice de 2 a todas las secciones. Y el complemento aplica el índice z de 99998 al elemento adhesivo. Pero debido a que un módulo no se puede ordenar (o indexarse) por encima de su elemento principal (sección), el módulo continuará permaneciendo detrás de otros módulos en la página. Para remediar esto, debemos asegurarnos y ofrecer la sección que mantiene a nuestro módulo pegajoso un índice de mano de 99998. Antes de agregar nuestra ID de CSS a un módulo primero, debemos eliminar la ID (adhesiva) que configuramos para la columna 2. y luego eliminamos la ID CSS (detener) que L -I ha configurado para la sección a continuación. Después de eso, abra la configuración del módulo Sigue las redes sociales y agregue la identificación “Sticky” al módulo.

Si ve la página en vivo, notará que el elemento pegajoso está oculto cuando los otros módulos en las secciones a continuación se superponen mientras se ejecuta.

Para remediar esto, abra la configuración de la sección para la sección que contiene el elemento adhesivo del módulo de medios Seguir. Luego agregue los siguientes CSS personalizados al elemento principal: Index Z: 99998;

Ahora revise su página en vivo. Observe cómo los iconos en las redes sociales permanecerán en la parte superior de la página (54 PX en la parte superior) justo debajo del barco fijo y luego se mantengan por encima de los otros módulos mientras se ejecutan. Date cuenta de una sección pegajosa para hacer una sección completa pegajosa, siga El mismo proceso de agregar la identificación CSS “pegajosa” a la sección. No es necesario actualizar el índice Z usando CSS personalizado, porque el complemento lo hace automáticamente por usted. . Si esto sucede, es posible que deba desactivar los efectos flotantes del elemento pegajoso. Solo un elemento pegajoso en el complemento de la página solo permite un elemento pegajoso en la página, por lo que si desea agregar más elementos pegajosos, necesitará una solución más avanzada (u otro complemento para aceptar esto). Pensamientos finales Espero que este artículo haya sido útil para dar una forma refrescante de hacer cualquier artículo pegajoso. Úselo para crear submenús pegajosos, CTA pegajosos, ofertas promocionales pegajosas y casi cualquier otra cosa que se le ocurra. ¡Diviértete explorando las posibilidades! Espero tener noticias suyas en los comentarios a continuación. ¡Suerte!