[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.4.9″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″]
Använda Codepen Code Generator
Vi kommer att använda en ”codepen” som är skapad för Divi Community. Kodgeneratorn sammanställer (kompilerar) koden och exporterar till ett enda kodblock som sen kan användas i Divi med kod-modulen.
Klicka på länken nedan och läs igenom eller kolla på filmen direkt. Testa på din egen sida.
”In this post I will be taking advantage of a codepen generator I created for the Divi Community. What this code generator does is compile the code from a given codepen and export a single block of code that will run properly inside the Divi Code Module.” kortare svensk beskrivning nedanför
https://www.elegantthemes.com/blog/divi-resources/how-to-add-a-floating-action-button-to-your-site-with-the-divi-code-module
Börja här
1) Först, om du inte redan har ett, skapa ett gratis kodkonto. https://codepen.io/accounts/signup/user/free
2) Navigera sedan till “About FAB” -kodepen som redan är skapad. https://codepen.io/andytran/pen/dNPMOB
Under kolumn HTML
1) Leta reda på följande kodrad
<img alt = ”Andy Tran” src = ”https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=200” />
Byt ut src-länken med en länk till din bild. Du kan använda din gravatarlänk eller ladda upp en bild till din WordPress-installation och använda mediebibliotekets länk. Ändra också alt-texten så att den återspeglar den bild du har valt.
2) Leta reda på den här raden
<h2> Andy Tran </h2>
Lägg vilken text du vill ha här. Om du helt enkelt har ändrat bilden till en bild av dig själv, lägg då ditt namn här.
3) Och slutligen, ändra den här raden
<a href=”https://andytran.me/”> https://andytran.me </a>
till önskad länk och beskrivande text, tex till din egen webbsida
När alla dina ändringar har gjorts trycker du på kommando + s (mac) för att spara.
Detta skapar automatiskt en kopia av den ursprungliga koden under ditt konto, men med dina ändringar.
4) Nu kopierar du webbadressen, den redigerade kodepen-koden, till en förskapad generator: https://codepen.io/andytran/pen/jyEPyL
När du har tryckt på den blå ”Generera” -knappen och kopierat koden, gå vidare till din webbplats och till den sida där du vill att din nya flytande åtgärdsknapp ska visas.
Lägg till en kodmodul i det första standardavsnittet på sidan.
Klistra in den kopierade koden i kodmodulen och klicka på spara.
Uppdatera sidan och se resultatet.
Lägg till på alla sidor
Om du vill lägga till den flytande knappen på alla dina Divi-sidor samtidigt gör du så här:
Istället för att klistra in din genererade kod i kod-modulen
1) Navigera till Divi> Temaalternativ> Integrationer> Lägg till kod i bloggens <head> och klistra in koden där.
2) Spara ändringarna och förhandsvisa. Den flytande åtgärdsknappen ska nu visas längst ned till höger på alla dina sidor!
Varför lägga till koden på bara en sida via en kodmodul?
Genom att använda kodmodulen kan du placera anpassade knappar på varje sida – och får då förhoppningsvis högre klickfrekvenser baserat på meddelanden som är skräddarsydda för det inlägget eller sidan.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]