TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як додати організаційну діаграму на веб -сайт Weebly?

1

Ви можете мати багато вимог для відображення структурованого вмісту у вигляді дерева на веб -сайті Weebly. Це може бути організаційна діаграма або карта сайту вашого сайту, яку ви хочете продемонструвати користувачам. Хоча Weebly не пропонує жодних додатків або елементів за замовчуванням, ви можете легко додати організаційну діаграму на веб -сайт Weebly.

Пов’язані: Як додати діаграми на сайт WordPress?

Додайте організаційну діаграму у Weebly

Додати організаційну діаграму на веб -сайт Weebly можна двома способами :

  1. Використання користувацького CSS
  2. Вставити діаграму Google

Ми детально розповімо про обидва варіанти.

1 Організаційна діаграма CSS

Нижче наведено приклад простої організаційної діаграми, яку можна додати на сайт Weebly за допомогою CSS / HTML -коду.

Як додати організаційну діаграму на веб -сайт Weebly?

Організаційна діаграма CSS

Особливості організаційної діаграми CSS

Деякі з особливостей діаграми:

  • Наведіть курсор миші на будь -яке поле, щоб виділити структуру під цією ієрархією.
  • Ви можете додати будь -яку кількість рівнів ієрархії як по горизонталі, так і по вертикалі.
  • Роз’єми будуть автоматично додані для всіх рівнів дерева.
  • Ви можете налаштувати колір та шрифти.
  • Посилання на кожне поле вмісту з окремою сторінкою вашого сайту або посиланням на зовнішній сайт.

Як додати дерево організаційних діаграм CSS на веб -сайт Weebly?

У цьому процесі є три кроки:

  • Підготовка структури та вмісту діаграми.
  • Додавання коду CSS (посилання на базовий код з сайту codecode player.com)
  • Додавання HTML -коду

Крок 1 – Підготовка вмісту діаграми

Перший крок – підготувати структуру разом із тим, скільки рівнів ієрархії вам потрібно. Ви також повинні мати уявлення про розмір шрифту, кольори, необхідні для діаграми.

Крок 2 – Код CSS

Якщо ви хочете додати діаграму до однієї або кількох сторінок свого сайту, додайте нижченаведений код CSS у розділі «Сторінки> Виберіть сторінку> Налаштування SEO> Код заголовка».

Як додати організаційну діаграму на веб -сайт Weebly?

Додайте код заголовка на сторінку

Якщо ви хочете додати діаграму на багато сторінок, рекомендується додати код CSS у розділі «Тема> Редагувати CSS / HTML> Активи> main.less». Дізнайтеся більше про те, як редагувати вихідний CSS на веб -сайті 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>

Крок 3 – Додавання HTML

Перетягніть елемент " Код для вбудовування " на сторінку, куди потрібно додати організаційну діаграму, та додайте код нижче у елемент "Код для вставлення".

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

Можливо, діаграма не відображається у редакторі Weebly, опублікуйте свій сайт, а потім діаграма має виглядати так, як показано у наведеному вище прикладі. Замініть # на URL -адреси, які потрібно зв’язати, або просто видаліть прив’язні теги, якщо ви не хочете зв’язувати. Ви також можете налаштувати відповідно до своїх потреб, додавши більше рівнів, змінивши кольори, шрифти тощо.

Попередження: Через ширину діаграми вона може не відповідати мобільним пристроям. Ви можете приховати діаграму на мобільних пристроях і замість цього показати текст або зображення зі списком.

2 Додавання організаційної діаграми Google

Інший простий спосіб – вставити код діаграми Google, щоб додати організаційну діаграму до свого сайту Weebly. Ви можете додати будь -яку кількість рівнів і додати посилання на окремі заголовки. Нижче наведено, як буде виглядати організаційна діаграма Google.

Як додати організаційну діаграму на веб -сайт Weebly?

Організаційна діаграма Google

Перейдіть на сторінку діаграм Google і скопіюйте код організаційної діаграми. Процес вбудовування на веб -сайт Weebly потрібно виконати у два етапи – додавання сценарію та додавання HTML.

Додати сценарій для діаграми

Скопіюйте наведений нижче код сценарію, який також доступний на сторінці діаграми організації 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>

Ви повинні вставити код сценарію в нижній колонтитул вашої сторінки Weebly.

  • Увійдіть до облікового запису Weebly і відредагуйте сайт, на якому потрібно додати діаграму.
  • Коли ви перебуваєте у редакторі Weebly, перейдіть до розділу «Сторінки» та виберіть сторінку.
  • Натисніть на опцію «Налаштування SEO» та вставте код у розділ «Код нижнього колонтитула».

Додавання HTML -коду

Додайте нижченаведений HTML -код на сторінку за допомогою елемента "Вставити код".

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

Публікуйте свій сайт, щоб побачити діаграму в дії.

Примітка. Дотримуйтесь інструкцій на сторінці діаграм Google, щоб зрозуміти, як налаштувати діаграму. В основному кожне поле містить ім’я, менеджер та підказку, які відображатимуться при наведенні курсору, і ви можете додавати стилі та HTML -теги за допомогою

елемент до будь -якої коробки.

Заключні слова

Ми сподіваємось, що один із вищезазначених методів відповідає макету вашого сайту та допоможе вам додати організаційну діаграму. Не забудьте налаштувати колір та інші параметри відповідно до ваших потреб.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі