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 :
- Käyttämällä mukautettua CSS: ää
- 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.