TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä organisaatiokaavio Weebly -sivustoon?

12

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.

Kuinka lisätä organisaatiokaavio Weebly -sivustoon?

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.

Kuinka lisätä organisaatiokaavio Weebly -sivustoon?

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ää.

Kuinka lisätä organisaatiokaavio Weebly -sivustoon?

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.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja