TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar un organigrama en el sitio de Weebly?

1

Es posible que tenga muchos requisitos para mostrar contenido estructurado en un formato de árbol en el sitio de Weebly. Podría ser un organigrama o un mapa del sitio de su sitio que desea mostrar a los usuarios. Aunque Weebly no ofrece ninguna aplicación o elemento predeterminado, puede agregar fácilmente un organigrama en el sitio de Weebly.

Relacionado: ¿Cómo agregar gráficos en el sitio de WordPress?

Agregar organigrama en Weebly

Hay dos formas de agregar un organigrama en el sitio de Weebly :

  1. Usando CSS personalizado
  2. Insertar gráfico de Google

Explicaremos ambas opciones en detalle.

1 Organigrama CSS

A continuación se muestra un ejemplo de organigrama simple que puede agregar a un sitio Weebly con código CSS / HTML.

¿Cómo agregar un organigrama en el sitio de Weebly?

Organigrama CSS

Características del organigrama CSS

Algunas de las características del gráfico son:

  • Mueva el mouse sobre cualquier cuadro para resaltar la estructura debajo de esa jerarquía.
  • Puede agregar cualquier número de niveles jerárquicos tanto horizontal como verticalmente.
  • Los conectores se agregarán automáticamente para todos los niveles del árbol.
  • Puede personalizar el color y las fuentes.
  • Vincula cada cuadro de contenido a una página individual de tu sitio o vincula a un sitio externo.

¿Cómo agregar un árbol de organigrama CSS en el sitio de Weebly?

Hay tres pasos en este proceso:

  • Preparar la estructura y el contenido de su gráfico.
  • Agregar código CSS (referencia de código base de thecodeplayer.com)
  • Agregar código HTML

Paso 1: preparación del contenido del gráfico

El primer paso es preparar la estructura junto con cuántos niveles de jerarquía necesita para usted. También debe tener una idea del tamaño de fuente y los colores requeridos para su gráfico.

Paso 2 – Código CSS

Si desea agregar el gráfico en una o pocas páginas de su sitio, agregue el siguiente código CSS en "Páginas> Seleccione la página> Configuración de SEO> Código de encabezado".

¿Cómo agregar un organigrama en el sitio de Weebly?

Agregar código de encabezado en la página

Si desea agregar el gráfico en muchas páginas, se recomienda agregar el código CSS en "Tema> Editar CSS / HTML> Activos> main.less". Obtenga más información sobre cómo editar CSS de origen en el sitio de 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>

Paso 3: agregar HTML

Arrastre y suelte un elemento " Código incrustado " en la página donde desea agregar el organigrama y agregue el siguiente código dentro del elemento "Código incrustado".

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

Es posible que el gráfico no se muestre en el editor de Weebly, publique su sitio y luego el gráfico debería verse como se muestra en el ejemplo anterior. Reemplace # con las URL que desea vincular o simplemente elimine las etiquetas de anclaje si no desea vincular. También puede personalizar según su necesidad agregando más niveles, cambiando los colores, fuentes, etc.

Advertencia: Debido al ancho del gráfico, es posible que no se ajuste a los dispositivos móviles. Puede ocultar el gráfico en dispositivos móviles y mostrar el texto listado o una imagen en su lugar.

2 Agregar organigrama de Google

Otra forma sencilla es incrustar el código del gráfico de Google para agregar un organigrama en su sitio Weebly. Puede agregar cualquier cantidad de niveles y agregar enlaces a títulos individuales. A continuación se muestra cómo se verá el organigrama de Google.

¿Cómo agregar un organigrama en el sitio de Weebly?

Organigrama de Google

Vaya a la página de gráficos de Google y copie el código del organigrama. El proceso de incrustación en el sitio Weebly debe realizarse en dos pasos: agregar un script y agregar HTML.

Agregar secuencia de comandos para gráfico

Copie el siguiente código de secuencia de comandos que también está disponible en la página del organigrama de 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>

Tienes que pegar el código del script en la sección de pie de página de tu página de Weebly.

  • Inicie sesión en la cuenta de Weebly y edite el sitio en el que desea agregar el gráfico.
  • Cuando esté en el editor de Weebly, vaya a la sección "Páginas" y seleccione la página.
  • Haga clic en la opción "Configuración de SEO" y pegue el código en la sección "Código de pie de página".

Agregar código HTML

Agregue el siguiente código HTML en la página utilizando el elemento "Código incrustado".

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

Publique su sitio para ver el gráfico en acción.

Nota: Siga las instrucciones en la página de gráficos de Google para comprender cómo personalizar el gráfico. Básicamente, cada cuadro contiene el nombre, el administrador y la información sobre herramientas que se mostrarán al pasar el mouse y puede agregar estilos y etiquetas HTML usando

elemento a cualquiera de la caja.

Ultimas palabras

Esperamos que uno de los métodos anteriores se ajuste al diseño de su sitio y le ayude a agregar un organigrama. Recuerde ajustar el color y otros parámetros según sus necesidades.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More