Sådan tilføjer du en animeret gradientbaggrund til et afsnit i Divi

Når du begynder at lære mere om designmetoden, som WordPress har aktiveret med Divi, vil du opdage, at det er muligt at tilføje en animeret gradientbaggrund på dit websted.

Denne berømte WordPress-skabelon fungerer gennem sektioner eller moduler, mellem hvilke den er i stand til at opdele sideindhold og tilføje design til hver .

Med denne færdighed vil du være i stand til at opdage måden at undgå monotonien ved ensfarvede websidebaggrunde eller med billeder downloadet fra nettet.

Selvom Divi giver dig mulighed for at designe din egen side, kan du downloade de færdige designs, hvis du ønsker det.

Derfor forklarer vi, hvordan du opretter netop dette design i din WordPress-skabelon for at forbedre din sidevisning.

Hvad er sektioner i Divi, og hvordan kan du indsætte dem på din side?

De er intet andet end vandrette blokke, betragtet som de største sektioner af Divi-byggeren.

De har funktionen af ​​at blive stablet for at kategorisere det indhold, der vil blive indtastet i designet af hjemmesiden, så det kan betragtes som " indpakning “.

Blandt de parametre, som disse blokke indeholder, er det muligt manuelt at tilføje en baggrund med en animeret gradient i » Design muligheder “.

Trin til at oprette en sektionsblok og få adgang til dens indstillinger

Når du har sikret dig, at du har aktiveret Divi visuelle builder, skal du klikke på farveknappen " + for at tilføje afsnittet. Så vil det vise dig et vindue, der giver dig mulighed for at tilføje tre typer muligheder: » Standard "," fuld bredde "og" Særlig “.

Når du har valgt en af ​​dem, får du mulighed for at vælge kolonnestrukturen for de rækker, som afsnittet skal indeholde.

Endelig vil du være i stand til at indsætte moduler og muligheden » Sektionsparametre » vises, hvor du vil se listen over ændringer for » Indhold "," Design "og" Fremskreden “.

Hvordan tilføjer man en animeret gradientbaggrund med Divi? Trin for trin

Metoden, der vil blive brugt, er at skabe den ønskede gradientbaggrund ved at justere baggrunden, der indeholder Divi-builderen med CSS-kodestykker. Så start med at oprette en ny side på WordPress-platformen og brug Divi-byggeren til at vælge muligheden » Byg fra bunden “.

Før dig vil du have et tomt lærred. Her vil du tilføje en enkelt kolonnerække som forklaret ovenfor.

I sektionskonfigurationen skal du konfigurere indholdet af " Polstring "i top 12vw og tilføje " Højde: 40vw i det grå felt, der vises under " Vigtigste CSS-elementer ".

Herfra vil du begynde at opsætte gradientbaggrunden, hvor du får adgang til muligheden » Baggrund » for at trykke på knappen » Nedbrudt “.

Nedenfor kan du vælge farverne på gradienterne, den type gradient, du ønsker, og den retning, du skal tage.

Mens du gør dette, skal du ændre størrelsen på din blok til 100 % bredde og højde for at begynde at skabe den animation, du ønsker.

Dette vil blive gjort via tilpasset CSS-redigering, så du skal tilføje en klasse, der er specifik for den sektion, du redigerer; derfor skal du gå ind på fanen » Fremskreden » og placer navnet på animationen under » CSS klasse “.

Kode for at tilføje en animeret baggrund i Divi

Når denne klasse er tilføjet, kan du tilføje kodemodulet og placere følgende i boksen » Kodet inde i

tags.

. cheer up-gradient {

Bundstørrelse: 400% 400%;

Animation: gradient 5s uendelig lethed;

}

@keyframes gradient {

0 % {

Bundposition: 0% 50%;

}

halvtreds % {

Bundposition: 100% 50%;

}

100 % {

Bundposition: 0% 50%;

}

}

På denne måde har du med succes indstillet din gradientbaggrund til 400 % amplitude fra den originale størrelse, og dens animation er bevægelse på begge sider.

Udover de designfordele, som Divi giver dig, har den også mange værktøjer til at gøre din side til internetbrugernes favorit, såsom at kunne bruge BreadCrumbs til at forbedre sidens SEO eller indsætte en rullemenu til brug for den. og håndteringen er lettere.