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

<

div itemprop=”articleBody”>

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

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

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

Есть два способа добавить организационную схему на сайт Weebly:

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

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

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

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

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

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

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

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

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

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

  • Подготовка структуры и содержимого вашей диаграммы.
  • Добавление кода CSS (ссылка на базовый код с сайта thecodeplayer.com)
  • Добавление HTML кода

Шаг 1 – Подготовка содержимого диаграммы

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

Шаг 2 – CSS-код

Если вы хотите добавить диаграмму на одну или несколько страниц своего сайта, добавьте приведенный ниже код CSS в раздел «Страницы> Выберите страницу> Настройки SEO> Код заголовка«.

Добавить код заголовка на страницу
Добавить код заголовка на страницу

Если вы хотите добавить диаграмму на множество страниц, рекомендуется добавить код 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="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">General Manager</a>
<ul><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Manager</a>
<ul><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Executive</a>
</li></ul></li><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Manager</a>
<ul><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Executive</a>
</li><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Executive</a>
<ul><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Employee</a>
</li><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Employee</a>
</li><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Employee</a>
</li></ul></li><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Executive</a>
</li></ul><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Manager</a>
<ul><li>
<a href="https://www.webnots.com/how-to-add-organization-chart-in-weebly-site/#">Executive</a>
</li></li></ul></li></ul>
</div>

Диаграмма может не отображаться в редакторе Weebly, опубликуйте свой сайт, и тогда диаграмма должна выглядеть, как показано в приведенном выше примере. Замените # URL-адресами, которые вы хотите связать, или просто удалите теги привязки, если вы не хотите ссылаться. Вы также можете настроить в соответствии с вашими потребностями, добавив больше уровней, изменив цвета, шрифты и т. Д.

Предупреждение: Из-за ширины диаграммы он может не уместиться на мобильных устройствах. Вы можете скрыть диаграмму на мобильных устройствах и вместо нее показать текст или изображение в списке.

2. Добавление организационной структуры Google

Другой простой способ – встроить код диаграммы Google, чтобы добавить организационную диаграмму на свой сайт Weebly. Вы можете добавлять любое количество уровней и добавлять ссылки на отдельные заголовки. Ниже показано, как будет выглядеть организационная структура Google, и вы можете просмотреть ее здесь:

Организационная диаграмма Google
Организационная диаграмма 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-теги с помощью элемента в любое поле.

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

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

    </div>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *