TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till organisationsschema på Weebly -webbplatsen?

1

Du kan ha mycket krav på att visa strukturerat innehåll i ett trädformat på Weebly -webbplatsen. Det kan vara ett organisationsschema eller en webbplatskarta för din webbplats som du vill visa upp för användarna. Även om Weebly inte erbjuder några standardappar eller element kan du enkelt lägga till organisationsschema på Weebly -webbplatsen.

Relaterat: Hur lägger jag till diagram på WordPress -webbplatsen?

Lägg till organisationsschema i Weebly

Det finns två sätt att lägga till organisationsschema på Weebly -webbplatsen :

  1. Använda anpassad CSS
  2. Bädda in Google -diagram

Vi kommer att förklara båda alternativen i detalj.

1 CSS -organisationsschema

Nedan följer ett exempel på ett enkelt organisationsschema som du kan lägga till på en Weebly -webbplats med CSS / HTML -kod.

Hur lägger jag till organisationsschema på Weebly -webbplatsen?

CSS organisationsschema

Funktioner i CSS -organisationsschemat

Några av diagrammets funktioner är:

  • Flytta musen över valfri ruta för att markera strukturen under den hierarkin.
  • Du kan lägga till valfritt antal hierarkinivåer både horisontellt och vertikalt.
  • Anslutningar läggs till automatiskt för alla nivåer i trädet.
  • Du kan anpassa färg och teckensnitt.
  • Länka varje innehållsruta till enskild sida på din webbplats eller länka till extern webbplats.

Hur lägger jag till CSS -organisationsdiagramträd på Weebly -webbplatsen?

Det finns tre steg i denna process:

  • Förbereder din diagramstruktur och innehåll.
  • Lägga till CSS -kod (baskodreferens från thecodeplayer.com)
  • Lägger till HTML -kod

Steg 1 – Förbereda diagraminnehåll

Det första steget är att förbereda strukturen tillsammans med hur många nivåer av hierarki som behövs för dig. Du måste också ha en uppfattning om teckensnittsstorlek, färger som krävs för ditt diagram.

Steg 2 – CSS -kod

Om du vill lägga till diagrammet på en eller några sidor på din webbplats lägger du till nedanstående CSS -kod under "Sidor> Välj sida> SEO -inställningar> Rubrikkod".

Hur lägger jag till organisationsschema på Weebly -webbplatsen?

Lägg till rubrikkod på sidan

Om du vill lägga till diagrammet på många sidor rekommenderas att du lägger till CSS -koden under "Tema> Redigera CSS / HTML> Tillgångar> main.less". Läs mer om hur du redigerar käll -CSS på Weebly -webbplatsen.

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

Steg 3 – Lägga till HTML

Dra och släpp ett " Bädda in kod " -element på sidan där du vill lägga till organisationsdiagrammet och lägg till koden nedan i elementet "Bädda in kod".

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

Diagrammet kanske inte visas i Weebly -redigeraren, publicera din webbplats och sedan ska diagrammet se ut som visas i exemplet ovan. Ersätt # med webbadresserna som du vill länka eller ta bara bort ankartaggarna om du inte vill länka. Du kan också anpassa efter dina behov genom att lägga till fler nivåer, ändra färger, teckensnitt, etc.

Varning: På grund av diagrammets bredd kanske det inte passar i mobila enheter. Du kan dölja diagrammet på mobila enheter och visa listad text eller en bild istället.

2 Lägga till Google Organisation Chart

Ett annat enkelt sätt är att bädda in Google -diagramkod för att lägga till organisationsdiagram på din Weebly -webbplats. Du kan lägga till valfritt antal nivåer och lägga till länkar till enskilda titlar. Nedan följer hur Google -organisationsschemat kommer att se ut.

Hur lägger jag till organisationsschema på Weebly -webbplatsen?

Googles organisationsschema

Gå till sidan Google -diagram och kopiera koden för organisationsschema. Inbäddningsprocessen på Weebly -webbplatsen måste göras i två steg – lägga till manus och lägga till HTML.

Lägg till skript för diagram

Kopiera nedanstående skriptkod som också är tillgänglig på sidan med Google Organisationsdiagram.

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

Du måste klistra in skriptkoden under sidfotsavsnittet på din Weebly -sida.

  • Logga in på Weebly -kontot och redigera webbplatsen där du vill lägga till diagrammet.
  • När du är i Weebly -redigeraren, gå till avsnittet "Sidor" och välj sidan.
  • Klicka på alternativet "SEO -inställningar" och klistra in koden i avsnittet "Sidkod".

Lägger till HTML -kod

Lägg till nedanstående HTML -kod på sidan med elementet "Bädda in kod".

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

Publicera din webbplats för att se diagrammet i aktion.

Obs! Följ instruktionerna på sidan med Google -diagram för att förstå hur du anpassar diagrammet. I princip innehåller varje ruta namn, chef och verktygstips som ska visas på svävaren och du kan lägga till stilar och HTML -taggar med

element i någon av rutorna.

Slutliga ord

Vi hoppas att en av ovanstående metoder passar din webbplats layout och hjälper dig att lägga till organisationsschema. Kom ihåg att justera färgen och andra parametrar enligt dina behov.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer