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

¿Cómo agregar un widget de pestañas horizontales en Weebly?

0

El contenido con pestañas es una manera fácil de mostrar una gran cantidad de contenido en un espacio limitado. Weebly con la introducción de su App Center trae muchas aplicaciones nuevas para agregar elementos adicionales. "Tabs" es una de esas aplicaciones que puede conectarse a su sitio de forma gratuita. En este artículo, analizaremos cómo agregar pestañas horizontales en Weebly con la aplicación de pestañas predeterminada y utilizando un código personalizado.

Agregar pestañas horizontales usando la aplicación de pestañas predeterminadas

App Center es un mercado donde puede encontrar todas las aplicaciones de Weebly y de terceros, como la aplicación Tabs.

  • Una vez que esté en el editor del sitio de Weebly, navegue hasta el Centro de aplicaciones a través de "Crear> Aplicaciones".
  • Utilice el cuadro de búsqueda en la esquina superior derecha para escribir "pestañas" y presione enter.
  • Verá la aplicación Tabs en el resultado de la búsqueda y haga clic en ella para ver los detalles.
  • Haga clic en el botón "Agregar" y conecte la aplicación a su sitio Weebly.

¿Cómo agregar un widget de pestañas horizontales en Weebly?

Conexión de la aplicación de pestañas en el sitio de Weebly

Puede ver la aplicación conectada en la sección "Crear" como los elementos predeterminados. Arrastre y suelte el elemento Pestañas para insertar contenido con pestañas en su sitio. Puede personalizar el encabezado de la pestaña y el contenido del editor para crear pestañas horizontales en Weebly.

¿Cómo agregar un widget de pestañas horizontales en Weebly?

Pestañas creadas con la aplicación Weebly Tabs

Características de la aplicación Tabs

Los usuarios pueden personalizar lo siguiente en la aplicación de pestañas:

  • Agregue pestañas ilimitadas: recomendamos restringir a 4 o 5 pestañas como máximo para no tocar el editor. Además, un mayor número de pestañas tendrá problemas de legibilidad en dispositivos móviles.
  • Personalice el color de las pestañas activas e inactivas y el borde.
  • Arrastre y suelte cualquier elemento dentro del área de contenido de las pestañas. Puede mapas, formulario de contacto, presentación de diapositivas, etc. dentro del área de contenido de las pestañas.
  • Seleccione uno de los temas (estándar, de línea, material y simple) para el contenido con pestañas.

Aunque Tabs es una aplicación nativa de Weebly, no es una aplicación fácil de usar. El problema es que cuando ha agregado contenido en una pestaña incorrecta, no hay forma de arrastrar la pestaña y organizar la secuencia. Debe eliminar todo el elemento y agregarlo nuevamente con la secuencia correcta.

Pestañas personalizadas para el sitio Weebly

Hay muchas pestañas CSS y jQuery listas para usar disponibles en Internet que puede agregar con pequeñas modificaciones. Una de esas pestañas personalizadas es de gotas codificadas hechas con CSS. Esto es especialmente adecuado cuando solo tiene un contenido de texto para agregar dentro de las pestañas. A continuación se muestra cómo se verán las pestañas.

¿Cómo agregar un widget de pestañas horizontales en Weebly?

Widget de pestañas horizontales

A continuación se muestra el código CSS completo para el widget de pestañas horizontales. Puede insertar esto en su sitio Weebly en la sección " Código de encabezado " de la página.

¿Cómo agregar un widget de pestañas horizontales en Weebly?

Agregar código de encabezado en la página

<style> .tabs { position: relative; width: 100%; } .tabs input { position: absolute; z-index: 1000; width: 160px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .tabs input#tab-2{ left: 160px; } .tabs input#tab-3{ left: 320px; } .tabs input#tab-4{ left: 480px; } .tabs label { background: skyblue; font-size: 16px; line-height: 40px; position: relative; padding: 0 20px; float: left; display: block; color: #333333; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block; } .tabs input:hover + label { background: #f1f1f1; } .tabs label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1); } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked + label { background: #f8f8f8; z-index: 6; } .clear-shadow { clear: both; } .content { background: rgba(96, 125, 139, 0.16); position: relative; width: 100%; height: 300px; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; } .content div { position: absolute; top: 0; left: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s; } .content div h2, .content div h3{ color: lightslategrey; padding: 20px; } .content div p { font-size: 20px; line-height: 28px; font-style: italic; text-align: left; color: #777; padding-left: 15px; font-family: Cambria, Georgia, serif; border-left: 8px solid rgba(63,148,148, 0.1); } </style>

A continuación se muestra el código HTML para las pestañas que puede insertar utilizando el elemento " Código incrustado ".

<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">This is Tab 1</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">This is Tab 2</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">This is Tab 3</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">This is Tab 4</label> <div class="clear-shadow"></div> <div class="content"> <!-- This is a content for Tab 1 --> <div class="content-1"> <h2>Heading 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 2 --> <div class="content-2"> <h2>Heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 3 --> <div class="content-3"> <h2>Heading 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 4 --> <div class="content-4"> <h2>Heading 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </section>

Hacemos el primer título en la pestaña (Esta es la pestaña 1) como 160px y aumentamos a 320px y 480px para títulos adicionales. Puede ajustarlo en consecuencia para que el área en la que se puede hacer clic se ajuste al título de la pestaña. La ventaja del widget de pestañas personalizadas es que puede preparar el contenido sin conexión y pegarlo en su sitio en pocos minutos. Cuando desee reorganizar las pestañas, puede hacerlo sin conexión y simplemente reemplazar el código antiguo por el nuevo.

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