TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać schemat organizacyjny w witrynie Weebly?

1

Możesz mieć wiele wymagań, aby wyświetlać ustrukturyzowaną zawartość w formacie drzewa w witrynie Weebly. Może to być schemat organizacyjny lub mapa witryny Twojej witryny, którą chcesz zaprezentować użytkownikom. Chociaż Weebly nie oferuje żadnych domyślnych aplikacji ani elementów, możesz łatwo dodać schemat organizacyjny w witrynie Weebly.

Powiązane: Jak dodawać wykresy w witrynie WordPress?

Dodaj schemat organizacyjny w Weebly

Istnieją dwa sposoby dodania schematu organizacyjnego w witrynie Weebly :

  1. Korzystanie z niestandardowego CSS
  2. Osadź wykres Google

Wyjaśnimy szczegółowo obie opcje.

1 schemat organizacyjny CSS

Poniżej znajduje się przykład prostego schematu organizacyjnego, który możesz dodać do witryny Weebly za pomocą kodu CSS/HTML.

Jak dodać schemat organizacyjny w witrynie Weebly?

Schemat organizacyjny CSS

Cechy schematu organizacyjnego CSS

Niektóre cechy wykresu to:

  • Przesuń mysz nad dowolne pole, aby podświetlić strukturę poniżej tej hierarchii.
  • Możesz dodać dowolną liczbę poziomów hierarchii zarówno poziomo, jak i pionowo.
  • Łączniki zostaną automatycznie dodane dla wszystkich poziomów drzewa.
  • Możesz dostosować kolor i czcionki.
  • Połącz każde pole treści z pojedynczą stroną w swojej witrynie lub łączem do witryny zewnętrznej.

Jak dodać drzewo schematów organizacyjnych CSS w witrynie Weebly?

Ten proces składa się z trzech etapów:

  • Przygotowanie struktury i treści wykresu.
  • Dodanie kodu CSS (odniesienie do kodu bazowego z thecodeplayer.com)
  • Dodawanie kodu HTML

Krok 1 – Przygotowanie treści wykresu

Pierwszym krokiem jest przygotowanie struktury wraz z informacją o tym, ile poziomów hierarchii jest dla Ciebie potrzebnych. Musisz także mieć pojęcie o rozmiarze czcionki, kolorach wymaganych dla twojego wykresu.

Krok 2 – Kod CSS

Jeśli chcesz dodać wykres na jednej lub kilku stronach witryny, dodaj poniższy kod CSS w sekcji „Strony> Wybierz stronę> Ustawienia SEO> Kod nagłówka".

Jak dodać schemat organizacyjny w witrynie Weebly?

Dodaj kod nagłówka na stronie

Jeśli chcesz dodać wykres na wielu stronach, zaleca się dodanie kodu CSS w „Motyw > Edytuj CSS / HTML > Zasoby > main.less”. Dowiedz się więcej o tym, jak edytować źródłowy CSS w witrynie Weebly.

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

Krok 3 – Dodanie HTML

Przeciągnij i upuść element „ Kod osadzania ” na stronie, na której chcesz dodać schemat organizacyjny, i dodaj poniższy kod w elemencie „Kod osadzania”.

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

Wykres może nie być wyświetlany w edytorze Weebly, opublikuj swoją witrynę, a wykres powinien wyglądać tak, jak pokazano w powyższym przykładzie. Zastąp # adresami URL, które chcesz połączyć, lub po prostu usuń tagi kotwicy, jeśli nie chcesz linkować. Możesz również dostosować do swoich potrzeb, dodając więcej poziomów, zmieniając kolory, czcionki itp.

Ostrzeżenie: ze względu na szerokość wykresu może nie pasować do urządzeń mobilnych. Możesz ukryć wykres na urządzeniach mobilnych i zamiast tego wyświetlić wymieniony tekst lub obraz.

2 Dodawanie schematu organizacyjnego Google

Innym prostym sposobem jest osadzenie kodu wykresu Google, aby dodać schemat organizacyjny do swojej witryny Weebly. Możesz dodać dowolną liczbę poziomów oraz dodać linki do poszczególnych tytułów. Poniżej przedstawiamy, jak będzie wyglądał schemat organizacyjny Google.

Jak dodać schemat organizacyjny w witrynie Weebly?

Schemat organizacyjny Google

Przejdź do strony wykresów Google i skopiuj kod schematu organizacyjnego. Proces osadzania na stronie Weebly należy wykonać w dwóch krokach – dodając skrypt i dodając HTML.

Dodaj skrypt do wykresu

Skopiuj poniższy kod skryptu, który jest również dostępny na stronie schematu organizacyjnego Google.

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

Musisz wkleić kod skryptu w sekcji stopki swojej strony Weebly.

  • Zaloguj się do konta Weebly i edytuj stronę, w której chcesz dodać wykres.
  • W edytorze Weebly przejdź do sekcji „Strony” i wybierz stronę.
  • Kliknij opcję „Ustawienia SEO” i wklej kod w sekcji „Kod stopki”.

Dodawanie kodu HTML

Dodaj poniższy kod HTML na stronie za pomocą elementu „Kod do umieszczenia na stronie”.

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

Opublikuj swoją witrynę, aby zobaczyć wykres w akcji.

Uwaga: postępuj zgodnie z instrukcjami na stronie wykresów Google, aby dowiedzieć się, jak dostosować wykres. Zasadniczo każde pole zawiera nazwę, menedżera i podpowiedź, które mają być wyświetlane po najechaniu myszą i możesz dodawać style i tagi HTML za pomocą

element do dowolnego pola.

Ostatnie słowa

Mamy nadzieję, że jedna z powyższych metod pasuje do układu Twojej witryny i pomoże Ci dodać schemat organizacyjny. Pamiętaj, aby dostosować kolor i inne parametry do swoich potrzeb.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów