Vil du lage et organisasjonskart i Divi?
Vet hvordan du lager et flytskjemaoppsett i Divi åpner opp for mange muligheter til å formidle prosesser og ideer på en nettstedet Web. I noen tilfeller kan flytskjemaer brukes til å forklare ekstremt komplekse ideer som involverer et stort antall elementer.
På en nettstedet Web, men disse mer komplekse flytskjemaene kan være vanskelige å oppnå, spesielt hvis du vil at de skal være responsive.
I denne opplæringen viser vi deg hvordan du lager et praktisk flytskjemaoppsett som du kan bruke på din nettstedet Web, enkel, effektiv og responsiv.
I tillegg vil vi bare bruke Divis innebygde alternativer for å lage den, så du trenger ikke å bekymre deg for å legge til egendefinert kode eller plugins.
La oss begynne!
undersøkelsen
Her er en rask titt på flytskjemadesignet vi skal lage i denne opplæringen.
Opprett en ny side med Divi Builder
For å komme i gang må du gjøre følgende:
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Hvordan lage et flytskjemaoppsett i Divi
Trinn 1: Lag en rad med sentrert blurb
For å begynne å lage flytskjemaoppsettet i Divi, starter vi med å lage en rad som inneholder sentrert blurb. Dette vil være det første elementet i flytskjemaet.
Seksjonspolstring
Først åpner du seksjonsinnstillingene for standardseksjonen og setter bunnpolstringen til 0px.
- Polstring (bunn): 0px
Linje
Inne i delen legger du til en rad i en kolonne.
Åpne linjeinnstillinger og oppdater følgende designinnstillinger:
- Rennebredde: 1
- Polstring (øverst og bunn): 0px
Blurb Mod Design
For å lage vårt første flytskjemaelement bruker vi en Blurb-modul.
Sett inn en Blurb-modul på linje.
Modulinnstillinger
Åpne Blurb-modulinnstillingene. Under fanen Innhold, kan du beholde standardtittelen og brødteksten.
Oppdater deretter bildet med et lite ikonbilde eller bruk et av de innebygde Divi-ikonene. For denne opplæringen bruker vi ikoner fra Crowdfunding Layout Pack .
Gi deretter modulen en bakgrunnsfarge:
- Bakgrunn: #f8f8f8
Under fanen utforming, oppdater følgende:
- Tekstjustering: Sentrert
- Maks bredde: 400 piksler (stasjonær datamaskin og nettbrett), 90 % (telefon)
- Justeringsmodul: Senter
- Polstring: 6 % (øverst og bunn), 3 % (venstre og høyre)
Deretter gir du Blurb-modulen en kantlinje som følger:
- Kantbredde: 2px
Trinn 2: Lage forbindelseslinjen med en vertikal linje og en pil
For neste del av flytskjemaoppsettet vårt lager vi en rad med koblinger som har en sentrert vertikal linje og pil. Denne linjen vil bli brukt til å koble sammen linjene til innhold av organisasjonskartet som skal fortsette mot bunnen av siden.
I dette tilfellet ønsker vi å starte flytskjemaet ved å legge til en linje og en pil under forrige linje med Blurbn-modulen sentrert.
Lag en ny linje og kopier/lim inn stilene fra forrige linje
For å gjøre dette, legg til en ny rad i en kolonne under forrige rad.
Bruker " Andre modulinnstillinger (eller høyreklikk alternativer), kopier stilene fra forrige rad ovenfor og lim dem inn i den nye raden.
Opprette en vertikal linjeseparator
For å lage den vertikale linjeseparatoren, legg til en ny skillemodul til linjen.
Under skilleinnstillingene oppdaterer du designinnstillingene som følger:
- Linjefarge: #333333
- Linjeposisjon: Bunn
- Divider Vekt: 150px
- Bredde: 2px
- Justeringsmodul: Senter
- Marg: -1px (bunn)
Under fanen Avansert, skjul overløpet som følger:
- Horisontalt overløp: Skjult
- Vertikal overløp: Skjult
Lag en pil med en Blurb-modul
Deretter vil vi lage et pilikon som vil sitte over delelinjen ved hjelp av en presentasjonsmodul.
For å lage pilen, legg til en ny Blurb-modul under skillelinjen.
Blurb Mod-innstillinger
Under modulinnstillinger fjerner du standardtittelen og brødteksten og klikker Bruk ikon, velg deretter pilikonet (se skjermbilde).
Under fanen utforming, oppdater følgende:
- Ikonfarge: #bbbbbb
- Bilde/ikonjustering: senter
- Bruk ikonets skriftstørrelse: JA
- Skriftstørrelse for ikoner: 50 piksler (skrivebord), 40 piksler (nettbrett og telefon)
- Maks bredde: 50 %
- Justeringsmodul: senter
- Høyde: 50 piksler (stasjonær datamaskin), 40 piksler (nettbrett og telefon)
Under fanen Avansert, legg til følgende CSS til Blurb-bilde :
margin-bottom: 0px;
background: #ffffff;
For å plassere pilen over linjen, oppdater følgende:
- Stilling: Absolutt
- Sted: Sentrum
- Z-indeks: 10
Trinn 3: Lage en linje for tilstøtende deler av flytskjemaet
Når raden med koblinger er fullført, vil vi legge til en ny rad med flere tilstøtende Blurb-moduler for å fortsette flytskjemadesignet.
For å legge til linjen, kopier og lim inn den første linjen (linjen med sentrert blurb vi laget øverst i layouten) under koblingslinjen.
Åpne linjeinnstillinger og oppdater følgende:
- Maks bredde: 50 %
- Kantbredde: 2px
Venstre side av flytskjemaet
Nå som kantlinjen vår er lagt til linjen, vil vi plassere Blurb-modulen over venstre kantlinje.
For å gjøre dette, oppdater følgende designparametere:
- Justeringsmodul: venstre
- Marg: 70px (øverst og bunn)
- Transform Translate X-akse: -50 %
Dette er nøkkelen til at Blurb-modulen skal sentreres horisontalt over kantlinjen.
Høyre side av flytskjemaet
For å legge til en annen Blurb-modul på høyre kantlinje, duplisere den eksisterende blurb-en.
For å plassere teksten på høyre kantlinje, gå til fanen Avansert og gi den en absolutt posisjon:
- Stilling: Absolutt
- Sted: Midt til høyre
Deretter oppdaterer du følgende alternativer:
- Marginer: ingen
- Transformer Oversett Y-akse: -50 %
- Transformer Translate X-akse: 50 %
Lagt til piler i hjørnene på hver kantlinje
For å gjøre flytskjemaet tydeligere i hvilken retning linjene går, vil vi legge til flere pilikoner på linjekantlinjene.
Pil øverst til venstre
For å legge til en pil i øvre venstre kantlinje, dupliser pilen Blurb-modulen vi opprettet i koblingsraden og dra den inn i raden som inneholder de tilstøtende Blurb-modulene.
Åpne Duplicate Arrow Blurb-modulen og endre ikonet til en pil som peker mot venstre.
Deretter oppdaterer du plasseringen av modulposisjonen:
- Sted: Øverst til venstre
Til slutt oppdaterer du alternativet for transformering som følger:
- Transformer Oversett Y-akse: -50 %
Pil øverst til høyre
For å lage en pil som sitter på øvre høyre kantlinje, dupliser pilen " øverst til venstre som vi nettopp har laget. Åpne deretter innstillingene og endre plassering:
- Sted: Øverst til høyre
Oppdater også pilikonet med en høyrepekende pil.
Pil ned til venstre
For å lage en pil som sitter på nederste venstre kantlinje, dupliser pilen " øverst til høyre som vi nettopp har laget.
Åpne deretter innstillingene og endre plassering:
- Sted: nederst til venstre
Deretter oppdaterer du Transform Translate-alternativet:
- Transformer Oversett Y-akse: 50 %
Pil ned til høyre
For å lage en pil som sitter på nedre høyre kantlinje, dupliser pilen " nederst til venstre som vi nettopp har laget.
Åpne deretter innstillingene og endre plassering:
- Sted: Nederst til høyre
Oppdater også pilikonet med en pil som peker mot venstre.
Når alle pilene er plassert, kan du oppdatere etikettene for hver ved å bruke lagvisning .
Trinn 4: Legge til en annen koblingslinje
Når vi har fullført linjen med de to tilstøtende delene av flytskjemaet og alle pilene, kan vi fortsette flytskjemaet ved å legge til en annen koblingslinje.
For å gjøre dette, dupliser koblingslinjen vi opprettet ovenfor og lim den inn under linjen som inneholder Blurb-modulene fra den tilstøtende delen av flytskjemaet.
Trinn 5: Tilpass flyten med en rettkantlinjekontakt
I det eksisterende flytskjemadesignet starter flyten med det øverste elementet, forgrener seg deretter til høyre og venstre tilstøtende elementer, går deretter tilbake til midten og går til neste midtelement.
For å tilpasse flyten, dupliserer vi delen slik at vi kan tilpasse flytskjemaet til å stoppe ved tilstøtende presentasjonselement(er) til venstre og fortsette fra presentasjonselementet til høyre.
Duplisert seksjon
For å gjøre dette må du først duplisere hele delen som inneholder flytskjemaet.
Legg til en annen venstre Blurb-modul
I duplikatdelen (nederst), finn venstre Blurb-modul i raden som inneholder de to tilstøtende modulene. Dupliser deretter blurben til venstre for å lage en ny rett under.
Fjern nedre piler og kantlinje
Deretter sletter du den nederste venstre pilen og den nederste høyre pilen.
Åpne linjeinnstillingene for linjen som inneholder flere blurbs og fjern den nederste rammen:
- Nedre kantbredde: 0px
Lag en linje med en rett kantlinjekobling
Nå ønsker vi å tilpasse flytskjemadesignet med en høyre kantlinjekontakt som vil koble den høyre kantlinjen til linjen med koblingslinjen nedenfor.
For å gjøre dette, lager vi en annen linje og legger til en egendefinert skillelinje og en konturpil på høyre side.
Legg til en ny rad én kolonne under den eksisterende raden med de tre oppsettene.
Oppdater radinnstillingene som følger, under fanen utforming :
- Rennebredde: 1
- Maks bredde: 50 %
- Polstring: 0px (øverst og bunn)
Deretter legger du til en rett kant på linjen.
- Høyre kantbredde: 2px
Legg deretter til en skillemodul på linjen.
Oppdater skillelinjens innstillinger som følger:
- Linjefarge: #333333
- Linjeposisjon: Bunn
- Divider Vekt: 2px
- Bredde: 50 %
- Marg: -2px (bunn)
Under Avansert-fanen oppdaterer du posisjonen til skillelinjen:
- Stilling: Absolutt
- Sted: Nederst til høyre
Med skillelinjen på plass kopierer du Blurb-modulen fra pil nederst til høyre på den tredje raden i den første seksjonen og limer den inn i raden med høyre skillelinje.
Åpne Blurb-modulinnstillingene til pilen du nettopp dupliserte og flyttet og oppdater følgende:
- Posisjon: Standard
- Justeringsmodul: høyre
Venstre grenselinje flytstopp
For øyeblikket er en del av den venstre kanten eksponert under blurb nederst til venstre. For å skjule det, fjern ganske enkelt bunnmargen på denne nederste blurben.
Trinn 6: Oppdatering av linjen med en venstrekantlinjekontakt
Flytskjemaet ditt kan også trenge en venstre kantlinjekontakt. For å lage den kan vi oppdatere linjen med høyre kantlinjekontakt som følger:
- Venstre Boprder Bredde: 2px
- Høyre kantbredde: 0
Oppdater skillelinjen inne i linjen med en ny plassering:
- Sted: nederst til venstre
Deretter oppdaterer du piljusteringen:
- Justeringsmodul: venstre
Og endre ikonet til en høyrepil.
Endelig resultat
Sjekk ut sluttresultatet.
Last ned DIVI nå!!!
konklusjonen
I denne opplæringen har vi laget et nyttig flytskjemaoppsett som alle kan bruke til å kommunisere prosesser og ideer til Besøkende med en fantastisk responsiv design.
Bruk den til å vise frem tjenestene eller designprosessen, lage en infografikk eller veilede kunder gjennom innhold på en ny måte.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
