Kuinka lisätä organisaatiokaavio Weebly -sivustoon?

Saatat joutua vaatimaan paljon strukturoidun sisällön näyttämistä puumuotona Weebly -sivustossa. Se voisi olla organisaatiokaavion tai sivustokartan sivuston, johon haluat esitellä käyttäjille. Vaikka Weebly ei tarjoa oletussovelluksia tai -elementtejä, voit helposti lisätä organisaatiokaavion Weebly -sivustoon.

Aiheeseen liittyviä: Kuinka lisätä kaavioita WordPress -sivustoon?

Lisää organisaatiokaavio Weeblyssä

Voit lisätä organisaatiokaavion Weebly -sivustoon kahdella tavalla :

1. Käyttämällä mukautettua CSS: ää
2. Upota Google -kaavio

Selitämme molemmat vaihtoehdot yksityiskohtaisesti.

1 CSS -organisaatiokaavio

Alla on esimerkki yksinkertaisesta organisaatiokaaviosta, jonka voit lisätä Weebly -sivustoon CSS / HTML -koodilla.

CSS -organisaatiokaavio

CSS -organisaatiotaulukon ominaisuudet

Jotkut kaavion ominaisuuksista ovat:

• Siirrä hiiri minkä tahansa ruudun päälle korostaaksesi hierarkian alapuolella olevan rakenteen.
• Voit lisätä halutun määrän hierarkiatasoja sekä vaaka- että pystysuunnassa.
• Liittimet lisätään automaattisesti kaikille puun tasoille.
• Voit muokata värejä ja fontteja.
• Linkitä jokainen sisältöruutu sivustosi yksittäiselle sivulle tai linkki ulkoiseen sivustoon.

Kuinka lisätä CSS -organisaatiokaavio Weebly -sivustoon?

Tässä prosessissa on kolme vaihetta:

• Kaavion rakenteen ja sisällön valmistelu.
• CSS -koodin lisääminen (peruskoodiviite osoitteesta thecodeplayer.com)
• HTML -koodin lisääminen

Vaihe 1 – Kaavion sisällön valmistelu

Ensimmäinen askel on valmistella rakenne ja kuinka monta hierarkiatasoa tarvitaan. Sinulla on myös oltava käsitys kaavion kirjasinkokosta ja väreistä.

Vaihe 2 – CSS -koodi

Jos haluat lisätä kaavion yhdelle tai muutamalle sivustosi sivulle, lisää alla oleva CSS -koodi kohtaan Sivut> Valitse sivu> SEO -asetukset> Otsikkokoodi.

Lisää otsikkokoodi sivulle

Jos haluat lisätä kaavion monille sivuille, on suositeltavaa lisätä CSS -koodi kohtaan "Teema> Muokkaa CSS / HTML> Omaisuus> main.less". Lue lisää lähde -CSS: n muokkaamisesta Weebly -sivustossa.

<style type="text/css">
.org-chart ul {
padding-top: 20px; 
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.org-chart li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px; 
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.org-chart li::before, .org-chart li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.org-chart li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
.org-chart li:only-child::after, .org-chart li:only-child::before {
display: none;
}
.org-chart li:only-child{ padding-top: 0;}
.org-chart li:first-child::before, .org-chart li:last-child::after{
border: 0 none;
}
.org-chart li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.org-chart li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.org-chart ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.org-chart li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.org-chart li a:hover, .org-chart li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.org-chart li a:hover+ul li::after, 
.org-chart li a:hover+ul li::before, 
.org-chart li a:hover+ul::before, 
.org-chart li a:hover+ul ul::before{
border-color: #808080;
}
</style>

Vaihe 3 – HTML -koodin lisääminen

Vedä ja pudota Upota koodi -elementti sivulle, jolle haluat lisätä organisaatiokaavion, ja lisää alla oleva koodi Upota koodi -elementtiin.

<div class="org-chart">
<ul><li>
<a href="#">General Manager</a>
<ul><li>
<a href="#">Manager</a>
<ul><li>
<a href="#">Executive</a>
</li></ul></li><li>
<a href="#">Manager</a>
<ul><li>
<a href="#">Executive</a>
</li><li>
<a href="#">Executive</a>
<ul><li>
<a href="#">Employee</a>
</li><li>
<a href="#">Employee</a>
</li><li>
<a href="#">Employee</a>
</li></ul></li><li>
<a href="#">Executive</a>
</li></ul><li>
<a href="#">Manager</a>
<ul><li>
<a href="#">Executive</a>
</li></li></ul></li></ul>
</div>

Kaavio ei ehkä näy Weebly -editorissa, julkaise sivustosi ja kaavion pitäisi näyttää yllä olevan esimerkin mukaisesti. Korvaa # URL -osoitteilla, jotka haluat linkittää, tai poista ankkuritunnisteet, jos et halua linkittää. Voit myös muokata tarpeidesi mukaan lisäämällä tasoja, muuttamalla värejä, fontteja jne.

Varoitus: Kaavion leveyden vuoksi se ei ehkä sovi mobiililaitteisiin. Voit piilottaa kaavion mobiililaitteissa ja näyttää sen sijaan luetteloidun tekstin tai kuvan.

2 Googlen organisaatiokaavion lisääminen

Toinen yksinkertainen tapa on upottaa Google -kaavakoodi ja lisätä organisaatiokaavio Weebly -sivustoosi. Voit lisätä haluamasi määrän tasoja ja linkkejä yksittäisiin otsikoihin. Alla on, miltä Googlen organisaatiokaavio näyttää.

Googlen organisaatiokaavio

Siirry Google -kaaviot -sivulle ja kopioi organisaatiokaavion koodi. Upottaminen Weebly -sivustoon on tehtävä kahdessa vaiheessa – komentosarjan lisääminen ja HTML -koodin lisääminen.

Lisää Script for Chart

Kopioi alla oleva komentosarjakoodi, joka on saatavana myös Google -organisaation kaaviosivulta.

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>

Sinun on liitettävä komentosarjakoodi Weebly -sivusi alatunnisteen alle.

• Kirjaudu Weebly -tilille ja muokkaa sivustoa, johon haluat lisätä kaavion.
• Kun olet Weebly -editorissa, siirry Sivut -osioon ja valitse sivu.
• Napsauta "SEO -asetukset" -vaihtoehtoa ja liitä koodi "Alatunnisteen koodi" -osaan.

HTML -koodin lisääminen

Lisää alla oleva HTML -koodi sivulle käyttämällä Upota koodi -elementtiä.

<div id="chart_div"></div>

Julkaise sivustosi nähdäksesi kaavion toiminnassa.

Huomautus: Noudata Google -kaaviot -sivun ohjeita ymmärtääksesi kaavion mukauttamisen. Pohjimmiltaan jokainen laatikko sisältää nimen, hallinnoijan ja työkaluvihjeen, jotka näytetään hiirellä, ja voit lisätä tyylejä ja HTML -tunnisteita käyttämällä

elementti mihin tahansa laatikkoon.

Lopulliset sanat

Toivomme, että jokin yllä olevista tavoista sopii sivustosi ulkoasuun ja auttaa sinua lisäämään organisaatiokaaviota. Muista säätää väriä ja muita parametreja tarpeen mukaan.