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

Как добавить организационную схему на сайт Weebly?

36

У вас может быть много требований для отображения структурированного контента в древовидном формате на сайте Weebly. Это может быть организационная диаграмма или карта сайта вашего сайта, которую вы хотите продемонстрировать пользователям. Хотя Weebly не предлагает никаких приложений или элементов по умолчанию, вы можете легко добавить организационную диаграмму на сайт Weebly.

По теме: Как добавить диаграммы на сайт WordPress?

Добавить организационную диаграмму в Weebly

Добавить организационную диаграмму на сайт Weebly можно двумя способами :

  1. Использование собственного CSS
  2. Вставить диаграмму Google

Мы подробно объясним оба варианта.

1 Организационная схема CSS

Ниже приведен пример простой организационной схемы, которую вы можете добавить на сайт Weebly с помощью кода CSS / HTML.

Как добавить организационную схему на сайт Weebly?

Схема организации CSS

Особенности организационной схемы CSS

Некоторые особенности диаграммы:

  • Наведите указатель мыши на любое поле, чтобы выделить структуру под этой иерархией.
  • Вы можете добавить любое количество уровней иерархии как по горизонтали, так и по вертикали.
  • Соединители будут автоматически добавлены для всех уровней дерева.
  • Вы можете настроить цвет и шрифты.
  • Свяжите каждое поле содержимого с отдельной страницей на вашем сайте или сделайте ссылку на внешний сайт.

Как добавить дерево организационной диаграммы CSS на сайт Weebly?

Этот процесс состоит из трех этапов:

  • Подготовка структуры и содержания вашей диаграммы.
  • Добавление кода CSS (ссылка на базовый код с сайта thecodeplayer.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-теги, используя

элемент в любой из боксов.

Заключительные слова

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

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее