Vil du oprette et organisationsdiagram i Divi?
Ved, hvordan man opretter et flowchart-layout i Divi åbner op for mange muligheder for at formidle processer og ideer på en Websted. I nogle tilfælde kan flowcharts bruges til at forklare ekstremt komplekse ideer, der involverer et stort antal elementer.
På en Websted, dog kan disse mere komplekse flowcharts være svære at opnå, især hvis du ønsker, at det skal være responsivt.
I denne vejledning viser vi dig, hvordan du opretter et praktisk flowchart-layout, som du kan bruge på din Websted, enkel, effektiv og lydhør.
Derudover bruger vi kun Divis indbyggede muligheder til at oprette det, så du ikke behøver at bekymre dig om at tilføje brugerdefineret kode eller plugins.
Lad os starte!
undersøgelse
Her er et hurtigt kig på flowchartdesignet, vi vil skabe i denne tutorial.
Opret en ny side med Divi Builder
For at komme i gang skal du gøre følgende:
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Sådan opretter du et flowchart-layout i Divi
Trin 1: Opret en række med centreret blurb
For at begynde at oprette flowchart-layoutet i Divi, starter vi med at oprette en række, der indeholder centreret blurb. Dette vil være det første element i rutediagrammet.
Sektionspolstring
Åbn først sektionsindstillingerne for standardafsnittet og indstil bundpolstringen til 0px.
- Polstring (bund): 0px
Linie
Tilføj en række til en kolonne inde i sektionen.
Åbn linjeindstillinger, og opdater følgende designindstillinger:
- Rendebredde: 1
- Polstring (top og bund): 0px
Blurb Mod Design
For at oprette vores første flowchart-element bruger vi et Blurb-modul.
Indsæt et Blurb-modul inline.
Modul parametre
Åbn Blurb-modulets indstillinger. Under fanen Indhold, kan du beholde standardtitlen og brødteksten.
Opdater derefter billedet med et lille ikonbillede eller brug et af de indbyggede Divi-ikoner. Til denne vejledning bruger vi ikoner fra Crowdfunding Layout Pack .
Giv derefter modulet en baggrundsfarve:
- Baggrund: #f8f8f8
Under fanen Design, opdater følgende:
- Tekstjustering: Centreret
- Maks. bredde: 400px (computer og tablet), 90 % (telefon)
- Justeringsmodul: Center
- Polstring: 6% (top og bund), 3% (venstre og højre)
Giv derefter Blurb-modulet en ramme som følger:
- Kantbredde: 2px
Trin 2: Oprettelse af forbindelseslinjen med en lodret linje og en pil
Til den næste del af vores flowchartlayout opretter vi en række stik, der har en centreret lodret linje og pil. Denne linje vil blive brugt til at forbinde linjerne af indhold af organisationsdiagrammet, som skal fortsætte mod bunden af siden.
I dette tilfælde vil vi starte rutediagrammet ved at tilføje en linje og en pil under den forrige linje med Blurbn-modulet centreret.
Opret en ny linje og kopier/indsæt stilene fra den forrige linje
For at gøre dette skal du tilføje en ny række til en kolonne under den forrige række.
Bruger " Andre modulindstillinger (eller højreklik på muligheder), kopier stilene fra den forrige række ovenfor og indsæt dem i den nye række.
Oprettelse af en lodret linjeseparator
For at oprette den lodrette linjeseparator skal du tilføje et nyt skillemodul til linjen.
Under skillevægsindstillingerne skal du opdatere designindstillingerne som følger:
- Linjefarve: #333333
- Linjeposition: Bund
- Divider Vægt: 150px
- Bredde: 2 pixels
- Justeringsmodul: Center
- Margin: -1px (nederst)
Under fanen Avanceret, skjul overløbet som følger:
- Vandret overløb: Skjult
- Lodret overløb: Skjult
Opret en pil med et Blurb-modul
Dernæst vil vi oprette et pilikon, der vil sidde over skillelinjen ved hjælp af et præsentationsmodul.
For at oprette pilen skal du tilføje et nyt Blurb-modul under skillevæggen.
Indstillinger for Blurb Mod
Fjern standardtitlen og brødteksten under modulindstillinger, og klik Brug ikon, vælg derefter pileikonet (se skærmbillede).
Under fanen Design, opdater følgende:
- Ikonfarve: #bbbbbb
- Billede/ikonjustering: center
- Brug ikonets skriftstørrelse: JA
- Ikon skriftstørrelse: 50px (skrivebord), 40px (tablet og telefon)
- Maks. bredde: 50 %
- Justeringsmodul: center
- Højde: 50px (desktop), 40px (tablet og telefon)
Under fanen Avanceret, tilføj følgende CSS til Blurb billede :
margin-bottom: 0px;
background: #ffffff;
For at placere pilen over linjen skal du opdatere følgende:
- Stilling: Absolut
- Sted: Center
- Z-indeks: 10
Trin 3: Oprettelse af en linje for tilstødende dele af rutediagrammet
Når rækken af stik er færdig, tilføjer vi endnu en række af flere tilstødende Blurb-moduler for at fortsætte flowchartdesignet.
For at tilføje linjen skal du blot kopiere og indsætte den første linje (linjen med centreret blurb, vi oprettede øverst i layoutet) under forbindelseslinjen.
Åbn linjeindstillinger og opdater følgende:
- Maks. bredde: 50 %
- Kantbredde: 2px
Venstre side af rutediagrammet
Nu hvor vores kant er tilføjet til linjen, placerer vi Blurb-modulet over den venstre kantlinje.
For at gøre dette skal du opdatere følgende designindstillinger:
- Justeringsmodul: venstre
- Margin: 70px (top og bund)
- Transformer Oversæt X-akse: -50 %
Dette er nøglen til, at Blurb-modulet skal centreres vandret over grænselinjen.
Højre side af rutediagrammet
For at tilføje endnu et Blurb-modul på højre kantlinje, duplikere den eksisterende Blurb.
Gå til fanen for at placere billedet på den højre kantlinje Avanceret og giv den en absolut position:
- Stilling: Absolut
- Beliggenhed: Center til højre
Opdater derefter følgende muligheder:
- Marginer: ingen
- Transformer Oversæt Y-akse: -50 %
- Transformer Oversæt X-akse: 50 %
Tilføjede pile til hjørnerne af hver kantlinje
For at gøre rutediagrammet tydeligere om den retning, rækkerne skrider frem, tilføjer vi yderligere pileikoner på rækkernes kantlinje.
Pil øverst til venstre
For at tilføje en pil til den øverste venstre kantlinje, duplikere pilen Blurb-modulet, vi oprettede i forbindelsesrækken, og træk det ind i rækken, der indeholder de tilstødende Blurb-moduler.
Åbn Duplicate Arrow Blurb-modulet, og skift ikonet til en venstrepil.
Opdater derefter placeringen af modulpositionen:
- Sted: Øverst til venstre
Til sidst skal du opdatere transformationsoversættelsesindstillingen som følger:
- Transformer Oversæt Y-akse: -50 %
Pil øverst til højre
For at oprette en pil, der sidder på den øverste højre kantlinje, skal du duplikere pilen " i øverste hjørne til venstre som vi lige har skabt. Åbn derefter indstillingerne og skift positionsplaceringen:
- Beliggenhed: Øverst til højre
Opdater også pileikonet med en pil, der peger til højre.
Pil ned til venstre
For at oprette en pil, der sidder på nederste venstre kantlinje, skal du duplikere pilen " øverst til højre som vi lige har skabt.
Åbn derefter indstillingerne og skift positionsplaceringen:
- Placering: nederst til venstre
Opdater derefter indstillingen Transform Translate:
- Transformer Oversæt Y-akse: 50 %
Pil ned til højre
For at oprette en pil, der sidder på den nederste højre kantlinje, skal du duplikere pilen " nederst til venstre som vi lige har skabt.
Åbn derefter indstillingerne og skift positionsplaceringen:
- Beliggenhed: Nederst til højre
Opdater også pileikonet med en pil, der peger mod venstre.
Når alle pilene er placeret, kan du opdatere etiketterne for hver ved hjælp af lagvisning .
Trin 4: Tilføjelse af endnu en forbindelseslinje
Når vi har afsluttet linjen med de to tilstødende dele af rutediagrammet og alle pilene, kan vi fortsætte rutediagrammet ved at tilføje endnu en forbindelseslinje.
For at gøre dette skal du duplikere den forbindelseslinje, vi oprettede ovenfor, og indsætte den under linjen, der indeholder Blurb-modulerne fra den tilstødende del af rutediagrammet.
Trin 5: Tilpasning af flowet med en Straight Edge Line Connector
I det eksisterende flowchartdesign starter flowet med det øverste element, forgrener sig derefter til højre og venstre tilstødende elementer, vender derefter tilbage til midten og går til det næste midterste element.
For at tilpasse flowet dublerer vi sektionen, så vi kan tilpasse flowchartet til at stoppe ved det eller de tilstødende præsentationselementer til venstre og fortsætte fra præsentationselementet til højre.
Dublet afsnit
For at gøre dette skal du først duplikere hele afsnittet, der indeholder rutediagrammet.
Tilføj endnu et venstre Blurb-modul
Find det venstre Blurb-modul i rækken, der indeholder de to tilstødende moduler, i dubletafsnittet (nederst). Dupliker derefter forklaringen til venstre for at oprette en ny direkte nedenfor.
Fjern nederste pile og kant
Derefter skal du slette den nederste venstre pil og den nederste højre pil.
Åbn linjeindstillingerne for linjen, der indeholder de flere blurbs, og fjern den nederste kant:
- Nederste kantbredde: 0px
Opret en linje med en lige kantlinjeforbindelse
Nu vil vi tilpasse flowchart-designet med et højre kantlinjestik, der forbinder linjens højre kantlinje med stiklinjen nedenfor.
For at gøre dette opretter vi en anden linje og tilføjer en brugerdefineret skillelinje og en konturpil på højre side.
Tilføj en ny række én kolonne under den eksisterende række med de tre layouts.
Opdater rækkeindstillingerne som følger under fanen Design :
- Rendebredde: 1
- Maks. bredde: 50 %
- Polstring: 0px (top og bund)
Tilføj derefter en lige kant til linjen.
- Højre kantbredde: 2px
Tilføj derefter et Divider-modul til linjen.
Opdater divider-indstillingerne som følger:
- Linjefarve: #333333
- Linjeposition: Bund
- Divider Vægt: 2px
- Bredde: 50 %
- Margin: -2px (nederst)
Under den avancerede fane skal du opdatere separatorens position:
- Stilling: Absolut
- Beliggenhed: Nederst til højre
Med skillevæggen på plads, kopier Blurb-modulet fra den nederste højre pil i den tredje række i den første sektion og indsæt det i rækken med den højre skillelinje.
Åbn Blurb-modulets indstillinger for den pil, du lige har duplikeret og flyttet, og opdater følgende:
- Position: Standard
- Justeringsmodul: højre
Venstre grænselinje flow stop
I øjeblikket er en del af den venstre kant blotlagt under forklaringen nederst til venstre. For at skjule det, skal du blot fjerne den nederste margen på denne nederste blurb.
Trin 6: Opdatering af linjen med en venstre kantlinjestik
Dit rutediagram skal muligvis også have et stik til venstre kantlinje. For at oprette den kan vi opdatere linjen med den højre kantlinjeforbindelse som følger:
- Venstre Boprder Bredde: 2px
- Højre kantbredde: 0
Opdater separatoren inde i linjen med en ny placering:
- Placering: nederst til venstre
Opdater derefter pilejusteringen:
- Justeringsmodul: venstre
Og skift ikonet til en højrepil.
Endelig resultat
Tjek slutresultatet.
Download DIVI nu!!!
Konklusion
I denne tutorial har vi lavet et nyttigt flowchart-layout, som alle kan bruge til at kommunikere proces og ideer til besøgende med et fantastisk responsivt design.
Brug den til at fremvise tjenesterne eller designprocessen, oprette en infografik eller guide kunder gennem indhold på en ny måde.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
