Gå till innehållet

Divi-handledning: Hur man använder svävaråtgärder - Del XNUMX

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Varje vecka erbjuder Elegant Theme nya gratis Divi-layoutpaket som du kan använda för ditt nästa projekt. För ett av presentationspaketen delar de också ett användningsfall som hjälper dig att ta din webbplats till nästa nivå. Den här veckan, som en del av det pågående Divi-designinitiativet, kommer vi att visa dig hur du kreativt använder Divis svävaralternativ för att visa upp CTA på dina sidor. Vi använder Divi-tvättpaketet och kommer att täcka tre olika exempel på att lyfta fram din uppmaning till handling.

undersökningen

Innan du dyker in i lektionen, låt oss snabbt undersöka vad vi ska skapa för att få en idé.

realisering animation divi.gif

Lägg till en ny sida med layouten Tvättservice eller Tvättservice

Börja med att lägga till en ny sida på din webbplats och ladda upp tvättservicens hemsida. De tre exemplen vi skapar kommer att baseras på denna layout. När du väl har kommit tillvägagångssättet kan du tillämpa dessa exempel på vilken layout du arbetar med.

tvätt Demo.jpg

Klona textmodulen

Låt oss börja med det första exemplet! Vi förvandlar en befintlig textmod till en svävande stimulans. Detta tillvägagångssätt visas bara på skrivbordet. Det är därför vi klonar den inledande modulen så att den kan visas på mindre skärmar utan svävareffekter.

klona modulen text.jpg

synlighet

Textmodul # 1

Fortsätt genom att dölja den första modulen på surfplatta och telefon.

synlighetselement divi.jpg

Textmodul # 2

Och dölja den andra modulen på skrivbordet.

synlighet desktop divi.jpg

Lägg till en rollover-effekt till skrivbordets textmodul

Lägg till en innehållstitel 3

Vi redigerar bara den första textmodulen, som kommer att visas på skrivbordet. Öppna kursen och lägg till ämne 3-innehåll i innehållsområdet.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

modifiering av den första modulen texte.jpg

Håll muspekaren över textinställningar

Gå sedan till textinställningarna och "dölj" stycketexten i din modul genom att lägga till 0 pixlar i textstorleken på svävaren.

  • Textstorlek: 0px

textparametrar modul divi.jpg

Håll muspekaren över 2 textinställningar

Gör detsamma för textinställningarna för rubrik 2 på svävaren.

  • Titel 2 Textstorlek: 0px

headerkonfiguration 2 divi.jpg

3 standardtexttitel

Gå sedan till textparametrarna för 3-ämnet och gör ändringar.

  • Rubrik 3 typsnitt: Josefin Sans
  • Titel 3 Teckensnitt: Halv fet
  • Titel 3 Textstorlek: 0px

konfigurera header 3 fonts.jpg

Håll muspekaren över rubrik 3 Textinställningar

Ändra textens storlek genom att sväva.

  • Titel 3 Textstorlek: 40px

headerkonfiguration 3 divi.jpg

Standardavståndsinställningar

Gå sedan till avståndsinställningarna och se till att följande anpassade utfyllnadsvärden gäller:

  • Toppad padding: 80px
  • Botten stoppning: 50px
  • Vänster padding: 40px
  • Möjningstryck: 40px

utfyllningsalternativ.jpg

Inställningar för mellanrumsavstånd

Lägg också till en anpassad rollover-marginal.

  • Övre marginal: 50px
  • Vänster marginal: -53.5vw

sväva överflyttningskonfiguration.jpg

Standardgränsinställningar

Vi lägger också till en bottengräns utan gräns.

  • Bredden på den nedre kanten: 0px
  • Nedre kantfärg: # ff947f
  • Nedre kantstil: prickad

gränskonfiguration divi.jpg

Flyover-gränsinställningar

Ändra bredden på svävkanten.

  • Bredden på den nedre kanten: 5px

fokusera på ctas

Standardinställningar för rutskuggor

Lägg sedan till en lådeskärm.

  • Box Shadow Vertikal Position: 50px
  • Box Shadow Blur Force: 54px
  • Boxskuggans utbredningskraft: -32px
  • Skuggfärg: rgba (255,255,255,0)

alternativ dombres divi.jpg

Rollover box skugginställningar

Och ändra skuggfärgen på svävarrutan.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Skuggfärg: rgba (0,0,0,0,2)

gränskonfiguration på flyover divi.jpg

övergångar

För att skapa en smidig övergång, öka övergångstiden i övergångsinställningarna.

  • Övergångsperiod: 750ms

övergång divi builder block text.jpg

Sammanfattning

Slutligen handlade det i denna handledning om att vi skapade en animation som lyfter fram ett avsnitt på vår Divi-sida. Möjligheterna med Divi är nästan oändliga, genom att använda de olika alternativen (kombinationer av flera olika alternativ) kommer du att kunna skapa gränssnitt med dynamisk och attraktiv animering. När vi inte är färdiga kommer vi att täcka den andra delen av den här handledningen senare. Fram till dess, om du har några frågor, är du välkommen att ställa dem i kommentarfältet.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer