Sticky Content Module

Hälsning igång #

Modulen Sticky Content i ElementsKit låter dig göra vilken del av sidan som helst eller inlägget klibbigt till en vald position. I den här handledningen kommer vi att förklara olika funktioner i modulen Sticky Content och hur du kan utnyttja dem för att få ditt innehåll att sticka ut.

Se vår videoguide:

Eller följ instruktionerna steg för steg:

Aktivera Sticky Content Module #

För att börja använda Sticky Content-modulen är det första du bör göra att aktivera detta från listan över ElementsKit-moduler. Utan att aktivera denna modul kan du inte använda den med Elementor. Så här aktiverar du modulen Sticky Content:

  • Gå till ElementsKitModuler. Byt nu modulen Sticky Content och klicka på Spara ändringar.

Sticky på toppen #

Den här funktionen hjälper dig att hålla fast vilken sektion som helst högst upp på sidan.

Se vår videoguide:

Eller följ instruktionerna steg för steg:

  • Navigera till ElementsKit→ Sidhuvud Sidfot→ klick Redigera med Elementor.
  • Klicka på Ikon för inre avsnitt.
  • Gå till Avancerad-> Expandera ElementsKit Sticky.
  • Välj Sticky-alternativ➔ Topp från rullgardinsmenyn.
  • Skapa en ny sida-> Klicka på ElementsKit-ikonen för att infoga valfri färdig sida från våra färdiga mallar.
  • Gå nu till din sida-> Du kan se att din rubrik är klibbig på toppen.

Bakgrundsfärgförändring av Sticky på toppen #

Du kan se problemet att rubrikdelen är klibbig men den är genomskinlig. Så vi måste ändra bakgrundsfärgen. Under funktionen Sticky Till kan du hitta alternativet att ändra bakgrundsfärgen för den klibbiga delen.

  • Välj en klibbig bakgrundsfärg: Vit.
  • Klicka på Uppdatera
  • Gå till hemsidan-> Uppdatera-> Scrolla ned.
  • Du kan se att rubrikens bakgrundsfärg är vit.

Sticky Tills på toppen #

Om du vill göra dina sektioner klibbiga upp till flera sektioner och sluta klibbiga efter en specifik sektion, kan du ställa in det sektions-ID här. Låt oss göra det klibbigt tills avsnittet Om oss.

  • Klicka på Redigera med Elementor.
  • Klicka på om oss Ikon för inre avsnitt.
  • Gå nu till Avancerade inställningar och ställ in CSS ID och kopiera det.
  • Gå till Rubrik Avancerad Elementskit Sticky Sticky Tills.
  • Klistra nu in det om oss avsnitt CSS ID in i Sticky Tills fält.
  • Nu kan du se rubriken är Sticky Tills avsnittet Om oss.

Klass Lägg till funktion #

När du använder en transparent rubrik kan du få problem med bakgrundsfärgen. Om du scrollar nedåt kan du behöva en bakgrundsfärg. Så här inne ger ElementsKit dig ett annat alternativ och det är en funktion för att lägga till klass. Om du scrollar ner till exempel 50px kommer en ny klass att läggas till och det är "ekit-sticky-effects". Med den här klassen kan du göra vilken CSS du vill. Låt oss se hur du kan göra det.

  • Gå till Customizer-> Ytterligare CSS.
  • Använd klassen: "ekit-sticky-effekter" och gör bakgrundsfärgen Grå.
  • Gå till rubrik-> Ta bort Bakgrundsfärg.
  • Lägg till offset. Till exempel: 50px.
  • Du kan se bakgrundsfärgen är Transparent. Men efter att ha rullat upp till 50px läggs en bakgrundsfärg till.

Klibbig offset på toppen #

  • Du kan bestämma hur mycket utrymme som ska lämnas medan ditt innehåll eller din bild ska vara klibbig på toppen. Du kan göra samma sak för andra klibbiga positioner. Ange den klibbiga offset: 100px. Du kan se rubriken visas efter 100px.
  • Det finns tre enhetsalternativ för dig att visa sticky: Alla enheter, endast stationära datorer, stationära och surfplattor. Välj ett alternativ för att bestämma exakt i vilken eller vilka enheter du vill visa innehållet som klibbigt.

Visa Sticky på Scroll Up #

Den här funktionen hjälper dig att hålla fast vid vilken del av sidan som helst när du rullar uppåt.

Se vår videoguide:

Eller följ instruktionerna steg för steg:

  • Klicka på ElementsKit-ikonen för att infoga en rubrik från våra färdiga mallar.
  • Klicka på Ikon för inre avsnitt.
  • Gå till Avancerad-> Expandera ElementsKit Sticky.
  • Välj klibbigt alternativ➔ Visa på Scroll Up från rullgardinsmenyn.

Gå till Element ➔ Dra följande widgets och släpp på det valda området.

  • Rubrik.
  • Kreativ knapp.
  • Bild.
  • Rubrik.
  • Video.
  • Klicka på Uppdatera-> Gå till din sida->Uppdatera-> Scrolla upp.
  • Du kan se att rubriken är klibbig när du rullar uppåt.

Sticky Tills på Scroll Up #

Låt oss göra det klibbigt tills avsnittet Sticky Header.

  • Klicka på den klibbiga rubriken Ikon för inre avsnitt.
  • Gå nu till Avancerade inställningar och ställ in CSS ID och kopiera det.
  • Klicka på den klibbiga navigeringsrubriken Ikon för inre avsnitt.
  • Gå till Avancerad Elementskit Sticky Sticky Tills.
  • Klistra nu in de där klibbiga rubrikerna CSS ID in i Sticky Tills fält.
  • Klicka på Uppdatera-> Gå till hemsidan-> Uppdatera-> Scrolla upp.
  • Nu kan du se att rubriken är Sticky Tills den klibbiga rubriksektionen och när videosektionen kommer in är rubriken inte längre klibbig.

Klibbig på botten #

Den här funktionen hjälper dig att hålla fast vilken sektion som helst längst ner på sidan.

Se vår videoguide:

Eller följ instruktionerna steg för steg:

  • Klicka på ElementsKit-ikonen för att infoga valfri sidfot från våra färdiga mallar.

Gå till Element ➔ Dra följande widgets och släpp på det valda området.

  • Rubrik.
  • Kundlogotyp.
  • Video.
  • Rubrik.
  • Klicka på Sidfot Inner Sektion Ikon.
  • Gå till Avancerad-> Expandera ElementsKit Sticky.
  • Välj klibbigt alternativ➔ Botten från rullgardinsmenyn.
  • Klicka på Uppdatera-> Gå till din sida->Uppdatera-> Scrolla upp.
  • Du kan se att sidfoten är klibbig när du rullar uppåt.

Klibbig tills på botten #

Låt oss göra det klibbigt tills den nedre klibbiga delen.

  • Klicka på Botten Sticky Ikon för inre avsnitt.
  • Gå nu till Avancerade inställningar och ställ in CSS ID och kopiera det.
  • Klicka på sidfoten Ikon för inre avsnitt.
  • Gå till Avancerad Elementskit Sticky Sticky Tills.
  • Klistra nu in den nedre klibbiga delen CSS ID in i Sticky Tills fält.
  • Klicka på Uppdatera-> Gå till hemsidan-> Uppdatera-> Scrolla upp.
  • Nu kan du se att sidhuvudet är Sticky Tills den nedre klibbiga sektionen och när klientlogotypen kommer in är sidfoten inte längre klibbig.

Sticky på kolumn #

Den här funktionen hjälper dig att fästa vilken sektion som helst i kolumnen.

Se vår videoguide:

Eller följ instruktionerna steg för steg:

  • Välj din struktur från det valda området. Här tar jag 3 kolumner.

Gå till Element ➔ Dra följande widgets och släpp på det valda området.

  • Rubrik.
  • Bild.
  • Ikon Box.

Låt oss göra rubriken och bilddelen klibbig.

  • Klicka på Rubrik Inner Sektion Ikon.
  • Gå till Avancerad-> Expandera ElementsKit Sticky.
  • Välj det klibbiga alternativet➔ Kolumn från rullgardinsmenyn.
  • Klicka på Bild Inner Sektion Ikon.
  • Gå till Avancerad-> Expandera ElementsKit Sticky.
  • Välj det klibbiga alternativet➔ Kolumn från rullgardinsmenyn.
  • Klicka på Uppdatera-> Gå till din sida-> Uppdatera-> Scrolla ner.
  • Du kan se rubriken och bilden är klibbiga och innehållet på höger sida av ikonrutan rör sig fortfarande.
Vad är dina känslor
Uppdaterad den 25 januari 2024