Wilt u een organigram maken in Divi?
Weet hoe u een stroomdiagramlay-out maakt in Divi biedt veel mogelijkheden om processen en ideeën te communiceren over a Site web. In sommige gevallen kunnen stroomdiagrammen worden gebruikt om uiterst complexe ideeën met een groot aantal elementen uit te leggen.
Op een Site web, deze meer complexe stroomdiagrammen kunnen echter moeilijk te realiseren zijn, vooral als u wilt dat het responsief is.
In deze zelfstudie laten we u zien hoe u een handige stroomdiagramindeling maakt die u op uw computer kunt gebruiken Site web, eenvoudig, effectief en responsief.
Bovendien gebruiken we alleen de ingebouwde opties van Divi om het te maken, zodat u zich geen zorgen hoeft te maken over het toevoegen van aangepaste code of plug-ins.
Laten we beginnen!
overzicht
Hier volgt een korte blik op het stroomdiagramontwerp dat we in deze zelfstudie gaan maken.
Maak een nieuwe pagina met Divi Builder
Om te beginnen, moet u het volgende doen:
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Een stroomdiagram maken in Divi
Stap 1: Maak een rij met gecentreerde blurb
Om te beginnen met het maken van de stroomdiagramlay-out in Divi, beginnen we met het maken van een rij met gecentreerde blurb. Dit wordt het eerste element van het stroomdiagram.
Sectie opvulling
Open eerst de sectie-instellingen voor de standaardsectie en stel de onderste opvulling in op 0px.
- Opvulling (onderkant): 0px
Lijn
Voeg in de sectie een rij toe aan een kolom.
Open lijninstellingen en werk de volgende ontwerpinstellingen bij:
- Gootbreedte: 1
- Opvulling (boven en onder): 0px
Blurb Mod-ontwerp
Om ons eerste stroomdiagramelement te maken, gebruiken we een Blurb-module.
Voeg een Blurb-module inline in.
Moduleparameters
Open de instellingen van de Blurb-module. Onder het tabblad Content, kunt u de standaardtitel en hoofdtekst behouden.
Werk vervolgens de afbeelding bij met een kleine icoonafbeelding of gebruik een van de ingebouwde Divi-iconen. Voor deze tutorial gebruiken we iconen uit de Crowdfunding-indelingspakket .
Geef de module dan een achtergrondkleur:
- Achtergrond: #f8f8f8
Onder het tabblad Design, werk het volgende bij:
- Tekstuitlijning: gecentreerd
- Maximale breedte: 400px (desktop en tablet), 90% (telefoon)
- Uitlijningsmodule: Midden
- Vulling: 6% (boven en onder), 3% (links en rechts)
Geef de Blurb-module vervolgens als volgt een rand:
- Randbreedte: 2px
Stap 2: De verbindingslijn maken met een verticale lijn en een pijl
Voor het volgende deel van onze stroomdiagramindeling maken we een rij connectoren met een gecentreerde verticale lijn en pijl. Deze lijn wordt gebruikt om de lijnen van te verbinden inhoud van het organigram, dat onderaan de pagina moet doorlopen.
In dit geval willen we het stroomdiagram starten door een regel en een pijl onder de vorige regel toe te voegen met de Blurbn-module in het midden.
Maak een nieuwe regel en kopieer/plak de stijlen van de vorige regel
Voeg hiervoor een nieuwe rij toe aan een kolom onder de vorige rij.
De ... gebruiken " Overige module-instellingen (of klik met de rechtermuisknop op opties), kopieer de stijlen uit de vorige rij hierboven en plak ze in de nieuwe rij.
Een verticaal lijnscheidingsteken maken
Om het verticale lijnscheidingsteken te maken, voegt u een nieuwe scheidingslijnmodule aan de lijn toe.
Werk de ontwerpinstellingen als volgt bij onder de scheidingslijninstellingen:
- Lijnkleur: #333333
- Lijnpositie: onder
- scheidingsgewicht: 150px
- Breedte: 2px
- Uitlijningsmodule: Midden
- Marge: -1px (onder)
Onder het tabblad Geavanceerd, verberg de overloop als volgt:
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Maak een pijl met een Blurb-module
Vervolgens zullen we een pijlpictogram maken dat boven de scheidslijn zal zitten met behulp van een presentatiemodule.
Om de pijl te maken, voegt u een nieuwe Blurb-module toe onder de scheidingslijn.
Blurb Mod-instellingen
Verwijder onder module-instellingen de standaard titel en hoofdtekst en klik op Gebruik Icoon, kies vervolgens het pijlpictogram (zie screenshot).
Onder het tabblad Design, werk het volgende bij:
- Pictogramkleur: #bbbbbb
- Afbeelding/pictogram uitlijning: midden
- Gebruik pictogram lettergrootte: JA
- Pictogram Lettergrootte: 50px (desktop), 40px (tablet en telefoon)
- Maximale breedte: 50%
- Uitlijningsmodule: midden
- Hoogte: 50px (desktop), 40px (tablet en telefoon)
Onder het tabblad Geavanceerd, voeg de volgende CSS toe aan Blurb-afbeelding :
margin-bottom: 0px;
background: #ffffff;
Update het volgende om de pijl boven de lijn te plaatsen:
- Positie: Absoluut
- Locatie: Centrum
- Z-index: 10
Stap 3: Een lijn maken voor aangrenzende delen van het stroomdiagram
Zodra de rij connectoren is voltooid, voegen we nog een rij van verschillende aangrenzende Blurb-modules toe om het stroomdiagramontwerp voort te zetten.
Om de regel toe te voegen, kopieert en plakt u eenvoudig de eerste regel (de regel met gecentreerde blurb die we bovenaan de lay-out hebben gemaakt) onder de verbindingslijn.
Open Lijninstellingen en werk het volgende bij:
- Maximale breedte: 50%
- Randbreedte: 2px
Linkerkant van het stroomschema
Nu onze rand aan de regel is toegevoegd, plaatsen we de Blurb-module boven de linkerrandlijn.
Werk hiervoor de volgende ontwerpinstellingen bij:
- Uitlijningsmodule: links
- Marge: 70px (boven en onder)
- Transformeren Vertalen X-as: -50%
Dit is essentieel om de Blurb-module horizontaal boven de grenslijn te centreren.
Rechterkant van het stroomschema
Om nog een Blurb-module aan de rechterrand toe te voegen, dupliceert u de bestaande blurb.
Om de blurb op de rechterrandlijn te plaatsen, gaat u naar het tabblad Geavanceerd en geef het een absolute positie:
- Positie: Absoluut
- Locatie: Midden rechts
Werk vervolgens de volgende opties bij:
- Marges: geen
- Transformeren Y-as vertalen: -50%
- Transformeren Vertalen X-as: 50%
Pijlen toegevoegd aan de hoeken van elke grenslijn
Om het stroomdiagram duidelijker te maken in welke richting de lijnen vorderen, zullen we extra pijlpictogrammen toevoegen aan de lijnrandlijnen.
Pijl linksboven
Om een pijl toe te voegen aan de grensrij linksboven, dupliceert u de pijl Blurb-module die we in de verbindingsrij hebben gemaakt en sleept u deze naar de rij met de aangrenzende Blurb-modules.
Open de module Duplicate Arrow Blurb en verander het pictogram in een naar links wijzende pijl.
Werk vervolgens de locatie van de modulepositie bij:
- Locatie: Linksboven
Werk ten slotte de optie voor het vertalen van transformatie als volgt bij:
- Transformeren Y-as vertalen: -50%
Pijl rechtsboven
Om een pijl te maken die zich op de grenslijn rechtsboven bevindt, dupliceert u de pijl " linksboven die we zojuist hebben gemaakt. Open vervolgens de instellingen en wijzig de positielocatie:
- Locatie: Rechtsboven
Werk ook het pijlpictogram bij met een naar rechts wijzende pijl.
Pijl naar links
Om een pijl te maken die zich op de grenslijn linksonder bevindt, dupliceert u de pijl " rechtsboven die we zojuist hebben gemaakt.
Open vervolgens de instellingen en wijzig de positielocatie:
- Locatie: linksonder
Werk vervolgens de Transform Translate-optie bij:
- Transformeren Y-as vertalen: 50%
Pijl omlaag naar rechts
Om een pijl te maken die op de grenslijn rechtsonder staat, dupliceert u de pijl " onderaan links die we zojuist hebben gemaakt.
Open vervolgens de instellingen en wijzig de positielocatie:
- Locatie: Rechtsonder
Werk ook het pijlpictogram bij met een naar links wijzende pijl.
Zodra alle pijlen zijn geplaatst, kunt u de labels voor elk bijwerken met behulp van de laagweergave .
Stap 4: Nog een verbindingslijn toevoegen
Zodra we de lijn met de twee aangrenzende delen van het stroomdiagram en alle pijlen hebben voltooid, kunnen we het stroomdiagram voortzetten door nog een verbindingslijn toe te voegen.
Om dit te doen, dupliceert u de verbindingslijn die we hierboven hebben gemaakt en plakt u deze onder de lijn met de Blurb-modules uit het aangrenzende deel van het stroomdiagram.
Stap 5: De stroom aanpassen met een rechte randlijnconnector
In het bestaande stroomdiagramontwerp begint de stroom met het bovenste element, vertakt zich vervolgens naar de rechter en linker aangrenzende elementen, keert dan terug naar het midden en gaat naar het volgende middelste element.
Om de stroom aan te passen, dupliceren we de sectie zodat we het stroomdiagram kunnen aanpassen om te stoppen bij de aangrenzende presentatie-element(en) aan de linkerkant en verder te gaan vanaf het presentatie-element aan de rechterkant.
Dubbele sectie
Om dit te doen, dupliceert u eerst de hele sectie met het stroomdiagram.
Nog een linker Blurb-module toevoegen
Zoek in het duplicaatgedeelte (onderaan) de linker Blurb-module in de rij met de twee aangrenzende modules. Dupliceer vervolgens de blurb aan de linkerkant om direct eronder een nieuwe te maken.
Onderste pijlen en rand verwijderen
Verwijder vervolgens de pijl linksonder en de pijl rechtsonder.
Open de regelinstellingen voor de regel met de meerdere blurbs en verwijder de onderrand:
- Breedte onderste rand: 0px
Maak een lijn met een rechte grenslijnverbinding
Nu willen we het stroomdiagramontwerp aanpassen met een rechter grenslijnconnector die de rechter grenslijn van de lijn verbindt met de verbindingslijn eronder.
Om dit te doen, maken we nog een lijn en voegen we een aangepaste scheidingslijn en een omtrekpijl aan de rechterkant toe.
Voeg een nieuwe rij toe één kolom onder de bestaande rij met de drie lay-outs.
Werk de rij-instellingen als volgt bij, onder het tabblad Design :
- Gootbreedte: 1
- Maximale breedte: 50%
- Vulling: 0px (boven en onder)
Voeg vervolgens een rechte rand toe aan de lijn.
- Breedte rechterrand: 2px
Voeg vervolgens een Divider-module toe aan de regel.
Werk de scheidingslijninstellingen als volgt bij:
- Lijnkleur: #333333
- Lijnpositie: onder
- scheidingsgewicht: 2px
- Breedte: 50%
- Marge: -2px (onder)
Werk op het tabblad Geavanceerd de positie van het scheidingsteken bij:
- Positie: Absoluut
- Locatie: Rechtsonder
Met de scheidingslijn op zijn plaats kopieert u de Blurb-module van de pijl rechtsonder van de derde rij van de eerste sectie en plakt u deze in de rij met de rechter scheidingslijn.
Open de instellingen van de Blurb-module van de pijl die u zojuist hebt gedupliceerd en verplaatst en werk het volgende bij:
- Positie: Standaard
- Uitlijningsmodule: rechts
Stroomstop linker grenslijn
Momenteel is een deel van de linkerrand zichtbaar onder de blurb linksonder. Om het te verbergen, verwijdert u eenvoudig de ondermarge van deze onderste flaptekst.
Stap 6: De lijn bijwerken met een lijnconnector aan de linkerkant
Uw stroomdiagram heeft mogelijk ook een linkergrenslijnconnector nodig. Om het te maken, kunnen we de lijn met de rechter grenslijnconnector als volgt bijwerken:
- Linker Boprder Breedte: 2px
- Breedte rechterrand: 0
Werk het scheidingsteken binnen de regel bij met een nieuwe locatie:
- Locatie: linksonder
Werk vervolgens de pijluitlijning bij:
- Uitlijningsmodule: links
En verander het pictogram in een pijl naar rechts.
Eindresultaat
Bekijk het eindresultaat.
Download DIVI nu!!!
Conclusie
In deze zelfstudie hebben we een handige stroomdiagramlay-out gemaakt die iedereen kan gebruiken om processen en ideeën aan te communiceren bezoekers met een verbluffend responsief ontwerp.
Gebruik het om de diensten of het ontwerpproces onder de aandacht te brengen, een infographic te maken of klanten door het ontwerpproces te leiden inhoud op een nieuwe manier.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
