Vill du skapa ett organisationsschema i Divi?
Vet hur man skapar ett flödesschema layout i Divi öppnar upp för många möjligheter att kommunicera processer och idéer på en webbplats. I vissa fall kan flödesscheman användas för att förklara extremt komplexa idéer som involverar ett stort antal element.
På en webbplats, dock kan dessa mer komplexa flödesscheman vara svåra att uppnå, speciellt om du vill att de ska vara lyhörda.
I den här handledningen visar vi dig hur du skapar en praktisk flödesschemalayout som du kan använda på din webbplats, enkel, effektiv och lyhörd.
Dessutom kommer vi bara att använda Divis inbyggda alternativ för att skapa den, så du behöver inte oroa dig för att lägga till anpassad kod eller plugins.
Låt oss börja!
undersökningen
Här är en snabb titt på flödesschemat som vi kommer att skapa i den här handledningen.
Skapa en ny sida med Divi Builder
För att komma igång måste du göra följande:
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använd Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Hur man skapar ett flödesschema i Divi
Steg 1: Skapa en rad med centrerad blurb
För att börja skapa flödesschemalayouten i Divi börjar vi med att skapa en rad som innehåller centrerad blurb. Detta kommer att vara det första elementet i flödesschemat.
Sektionsstoppning
Öppna först sektionsinställningarna för standardsektionen och ställ in bottenstoppningen till 0px.
- Utfyllnad (botten): 0px
Linje
Lägg till en rad i en kolumn inuti avsnittet.
Öppna linjeinställningar och uppdatera följande designinställningar:
- Rännvidd: 1
- Utfyllnad (topp och botten): 0px
Blurb Mod Design
För att skapa vårt första flödesschemaelement använder vi en Blurb-modul.
Sätt in en Blurb-modul inline.
Modulparametrar
Öppna Blurb-modulens inställningar. Under fliken Innehåll, kan du behålla standardrubriken och brödtexten.
Uppdatera sedan bilden med en liten ikonbild eller använd någon av de inbyggda Divi-ikonerna. För den här handledningen använder vi ikoner från Crowdfunding Layout Pack .
Ge sedan modulen en bakgrundsfärg:
- Bakgrund: #f8f8f8
Under fliken Designa, uppdatera följande:
- Textjustering: Centrerad
- Max bredd: 400 px (dator och surfplatta), 90 % (telefon)
- Justeringsmodul: Center
- Vaddering: 6% (överst och neder), 3% (vänster och höger)
Ge sedan Blurb-modulen en ram enligt följande:
- Kantbredd: 2px
Steg 2: Skapa förbindelselinjen med en vertikal linje och en pil
För nästa del av vårt flödesschema, skapar vi en rad med kopplingar som har en centrerad vertikal linje och pil. Denna linje kommer att användas för att ansluta linjerna i innehåll av organisationsschemat som ska fortsätta längst ner på sidan.
I det här fallet vill vi starta flödesschemat genom att lägga till en linje och en pil under föregående rad med Blurbn-modulen centrerad.
Skapa en ny rad och kopiera/klistra in stilarna från föregående rad
För att göra detta, lägg till en ny rad i en kolumn under föregående rad.
Använda " Övriga modulinställningar (eller högerklicka på alternativ), kopiera stilarna från föregående rad ovan och klistra in dem i den nya raden.
Skapa en vertikal linjeavgränsare
För att skapa den vertikala linjeseparatorn, lägg till en ny Divider-modul till linjen.
Under delningsinställningarna uppdaterar du designinställningarna enligt följande:
- Linjefärg: #333333
- Linjeposition: Botten
- Divider Vikt: 150px
- Bredd: 2px
- Justeringsmodul: Center
- Marginal: -1px (botten)
Under fliken Advanced Open water, dölj överflödet enligt följande:
- Horisontellt överflöde: Dold
- Vertikalt överflöde: Dold
Skapa en pil med en Blurb-modul
Därefter skapar vi en pilikon som sitter ovanför skiljelinjen med hjälp av en presentationsmodul.
För att skapa pilen, lägg till en ny Blurb-modul under avdelaren.
Blurb Mod-inställningar
Ta bort standardtiteln och brödtexten under modulinställningar och klicka Använd ikon, välj sedan pilikonen (se skärmdump).
Under fliken Designa, uppdatera följande:
- Ikon Färg: #bbbbbb
- Bild/ikonjustering: mitten
- Använd ikonens teckensnittsstorlek: JA
- Ikonteckensnittsstorlek: 50px (skrivbord), 40px (surfplatta och telefon)
- Max bredd: 50 %
- Uppriktningsmodul: mitt
- Höjd: 50px (dator), 40px (surfplatta och telefon)
Under fliken Advanced Open water, lägg till följande CSS till Blurb bild :
margin-bottom: 0px;
background: #ffffff;
För att placera pilen ovanför linjen, uppdatera följande:
- Position: Absolut
- Plats: Centrum
- Z-index: 10
Steg 3: Skapa en linje för angränsande delar av flödesschemat
När raden med kontakter är klar kommer vi att lägga till ytterligare en rad med flera intilliggande Blurb-moduler för att fortsätta flödesschemats design.
För att lägga till raden, kopiera och klistra helt enkelt in den första raden (raden med centrerad blurb som vi skapade överst i layouten) under kopplingslinjen.
Öppna Linjeinställningar och uppdatera följande:
- Max bredd: 50 %
- Kantbredd: 2px
Vänster sida av flödesschemat
Nu när vår kant har lagts till på raden kommer vi att placera Blurb-modulen ovanför den vänstra kantlinjen.
För att göra detta, uppdatera följande designparametrar:
- Justeringsmodul: vänster
- Marginal: 70px (överst och botten)
- Transformera Translate X-axel: -50 %
Detta är nyckeln för att Blurb-modulen ska centreras horisontellt ovanför gränslinjen.
Höger sida av flödesschemat
För att lägga till ytterligare en Blurb-modul på den högra gränslinjen, duplicera den befintliga blurben.
För att placera texten på den högra kantlinjen, gå till fliken Advanced Open water och ge det en absolut position:
- Position: Absolut
- Plats: Mitten höger
Uppdatera sedan följande alternativ:
- Marginaler: inga
- Transformera Översätt Y-axel: -50 %
- Transform Translate X-axel: 50 %
Lade till pilar i hörnen på varje kantlinje
För att göra flödesschemat tydligare om i vilken riktning raderna fortskrider kommer vi att lägga till ytterligare pilikoner på radkantsraderna.
Pil uppe till vänster
För att lägga till en pil till den övre vänstra kantraden, duplicera pilen Blurb-modulen som vi skapade i kopplingsraden och dra den till raden som innehåller de intilliggande Blurb-modulerna.
Öppna modulen Duplicate Arrow Blurb och ändra ikonen till en vänsterpekande pil.
Uppdatera sedan platsen för modulpositionen:
- Plats: Överst till vänster
Uppdatera slutligen transformationsöversättningsalternativet enligt följande:
- Transformera Översätt Y-axel: -50 %
Pil uppe till höger
För att skapa en pil som sitter på den övre högra gränslinjen, duplicera pilen " i det övre hörnet till vänster som vi just skapat. Öppna sedan inställningarna och ändra positionsplatsen:
- Plats: Överst till höger
Uppdatera också pilikonen med en högerpekande pil.
Pil ner till vänster
För att skapa en pil som sitter på den nedre vänstra kantlinjen, duplicera pilen " överst till höger som vi just skapat.
Öppna sedan inställningarna och ändra positionsplatsen:
- Plats: längst ner till vänster
Uppdatera sedan alternativet Transform Translate:
- Transformera Översätt Y-axel: 50 %
Pil ner till höger
För att skapa en pil som sitter på den nedre högra gränslinjen, duplicera pilen " längst ner till vänster som vi just skapat.
Öppna sedan inställningarna och ändra positionsplatsen:
- Plats: Nederst till höger
Uppdatera också pilikonen med en vänsterpekande pil.
När alla pilar är placerade kan du uppdatera etiketterna för varje med hjälp av lagervy .
Steg 4: Lägga till ytterligare en anslutningslinje
När vi har slutfört linjen med de två intilliggande delarna av flödesschemat och alla pilar, kan vi fortsätta flödesschemat genom att lägga till ytterligare en kopplingslinje.
För att göra detta, duplicera kontaktlinjen vi skapade ovan och klistra in den under raden som innehåller Blurb-modulerna från den intilliggande delen av flödesschemat.
Steg 5: Anpassa flödet med en rak kantlinjekontakt
I den befintliga flödesschemadesignen börjar flödet med det översta elementet, förgrenar sig sedan till höger och vänster intilliggande element, återvänder sedan till mitten och går till nästa mittelement.
För att anpassa flödet duplicerar vi avsnittet så att vi kan anpassa flödesschemat så att det stannar vid det eller de intilliggande presentationselementen till vänster och fortsätter från presentationselementet till höger.
Duplicera avsnitt
För att göra detta, duplicera först hela avsnittet som innehåller flödesschemat.
Lägg till ytterligare en vänstra blurb-modul
I dubblettavsnittet (nederst), lokalisera den vänstra Blurb-modulen i raden som innehåller de två intilliggande modulerna. Duplicera sedan texten till vänster för att skapa en ny direkt nedanför.
Ta bort nedre pilar och kant
Ta sedan bort den nedre vänstra pilen och den nedre högra pilen.
Öppna linjeinställningarna för raden som innehåller flera blurbs och ta bort den nedre kanten:
- Nedre kantbredd: 0px
Skapa en linje med en rak kantlinjekontakt
Nu vill vi anpassa flödesschemats design med en höger gränslinjekontakt som kommer att ansluta den högra gränslinjen på linjen med anslutningslinjen nedan.
För att göra detta skapar vi en annan linje och lägger till en anpassad avdelare och en konturpil på höger sida.
Lägg till en ny rad en kolumn under den befintliga raden med de tre layouterna.
Uppdatera radinställningarna enligt följande, under fliken Designa :
- Rännans bredd: 1
- Max bredd: 50 %
- Utfyllnad: 0px (topp och botten)
Lägg sedan till en rak kant på linjen.
- Höger kantbredd: 2px
Lägg sedan till en Divider-modul till raden.
Uppdatera avdelarens inställningar enligt följande:
- Linjefärg: #333333
- Linjeposition: Botten
- Divider Vikt: 2px
- Bredd: 50 %
- Marginal: -2px (botten)
Under den avancerade fliken uppdaterar du positionen för separatorn:
- Position: Absolut
- Plats: Nederst till höger
Med avdelaren på plats, kopiera Blurb-modulen från den nedre högra pilen på den tredje raden i den första sektionen och klistra in den i raden med den högra avdelaren.
Öppna Blurb-modulinställningarna för pilen du just duplicerade och flyttade och uppdatera följande:
- Position: Standard
- Justeringsmodul: höger
Vänster gränslinje flödesstopp
För närvarande är en del av den vänstra bården exponerad nedanför blurben i nedre vänstra delen. För att dölja det, ta helt enkelt bort den nedre marginalen på denna nedre blurb.
Steg 6: Uppdatera linjen med en vänstra kantlinjekontakt
Ditt flödesschema kan också behöva en kontakt för vänster kantlinje. För att skapa den kan vi uppdatera linjen med den högra gränslinjeanslutningen enligt följande:
- Vänster Boprder Bredd: 2px
- Höger kantbredd: 0
Uppdatera avgränsaren inuti raden med en ny plats:
- Plats: längst ner till vänster
Uppdatera sedan piljusteringen:
- Justeringsmodul: vänster
Och ändra ikonen till en högerpil.
Slutresultat
Kolla in slutresultatet.
Ladda ner DIVI nu!!!
Slutsats
I den här handledningen har vi skapat en användbar flödesschemalayout som alla kan använda för att kommunicera processer och idéer till besökare med en fantastisk responsiv design.
Använd den för att visa upp tjänsterna eller designprocessen, skapa en infografik eller guida kunder genom innehåll på ett nytt sätt.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
