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

¿Cómo agregar información sobre herramientas en el sitio de Weebly?

0

Weebly no solo ofrece la posibilidad de crear su sitio en minutos, sino que también ofrece numerosas oportunidades de personalización para agregar las funciones adicionales que desee. Permitir que los usuarios gratuitos editen el código fuente CSS y HTML es la principal razón del éxito de Weebly. Ya hemos escrito muchos consejos y trucos, así como widgets para hacer que su sitio Weebly sea más profesional. Y en este artículo continuaremos nuestra serie de widgets con el widget de información sobre herramientas.

¿Cómo agregar información sobre herramientas en el sitio de Weebly?

La información sobre herramientas es una ventana emergente que aparece cuando se pasa el mouse sobre un término en particular o un ícono de ayuda. En un dispositivo móvil, la aparición y desaparición de la información sobre herramientas son eventos táctiles o pueden desactivarse por completo. La información sobre herramientas se puede utilizar de muchas formas útiles:

  • Agregue una abreviatura, sinónimos y acrónimos.
  • Muestre uno de sus productos y vincule el término de información sobre herramientas a una página de producto.
  • Coloque un anuncio o enlaces de afiliados dentro de la información sobre herramientas.
  • Muestra una imagen relacionada con el término vinculado.
  • Coloque una palabra traducida en un idioma diferente.
  • Brinda más información sobre el término.

La información sobre herramientas es una de las funciones que la mayoría de ustedes querían insertar en su sitio Weebly para brindar información adicional sobre contenido específico. Hay muchas formas de agregar información sobre herramientas a su contenido:

  • Utilizando la etiqueta de título HTML.
  • Usando CSS simple.
  • Usando CSS avanzado.

En este artículo, explicaremos cómo agregar información sobre herramientas al sitio Weebly usando código HTML y CSS simple. También es posible agregar información sobre herramientas usando scripts que no cubriremos en este tutorial.

Adición de información sobre herramientas con etiqueta de título HTML

La forma más sencilla de agregar información sobre herramientas a cualquier término específico en su contenido es usar la etiqueta Título. El cuadro de información sobre herramientas se basará en el estilo predeterminado del navegador y no es necesario que agregue ningún CSS para esto. A continuación se muestra un ejemplo de cómo agregar información sobre herramientas mediante la etiqueta de título, mueva el mouse sobre el contenido resaltado para ver la información sobre herramientas.

mueve tu mouse aquí

En su editor de Weebly, use el elemento "Código incrustado" para agregar el contenido junto con la etiqueta Título para insertar una información sobre herramientas. A continuación, se muestra un ejemplo del uso de la etiqueta Título dentro del elemento Span:

This is a simple tooltip and <span title="Tooltip with Title tag">move your mouse over here </span>to see it in action.

Personalización del cuadro de información sobre herramientas con CSS

El método anterior es muy simple y no lo suficientemente atractivo. Puede agregar un cuadro de información sobre herramientas personalizado utilizando CSS para asegurarse de que se vea más atractivo.

Mueva el mouse para ver esta información sobre herramientas con código CSS personalizado

El HTML de la información sobre herramientas anterior es el siguiente:

<p class="demo" data-tool-tip="Tooltip with custom CSS">Move your mouse over to see this tooltip with custom CSS code</p>

Y el CSS es el siguiente:

<style> .demo, .demo p { margin: 4em 0; text-align: center; } [data-tool-tip] { position: relative; z-index: 2; cursor: pointer; } [data-tool-tip]:before, [data-tool-tip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tool-tip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tool-tip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tool-tip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tool-tip]:hover:before, [data-tool-tip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } </style>

Información sobre herramientas con CSS avanzado

No siempre es necesario agregar información sobre herramientas a un término en particular; la mayor parte del tiempo puede crear un cuadro de ayuda adicional (normalmente un símbolo de interrogación) para proporcionar más explicaciones. Esto necesita un uso de CSS avanzado para personalizar el cuadro de información sobre herramientas y aquí proporcionamos tres formas de crear una información sobre herramientas que contenga texto simple, contenido HTML y una imagen.

Agregar información sobre herramientas con texto simple

A continuación se muestra una información sobre herramientas simple que aparece al pasar el mouse y desaparece cuando el mouse se mueve hacia afuera. Este contiene solo un texto y el cuadro está personalizado con el código CSS.

Información sobre herramientas con contenido HTML

¿Qué sucede si desea agregar enlaces o cualquier contenido HTML dentro de la información sobre herramientas? Vea la demostración a continuación y puede agregar cualquier etiqueta HTML como enlace, negrita, etc. dentro de la información sobre herramientas.

Imagen dentro de una descripción emergente

El tercer caso es agregar una imagen dentro de la información sobre herramientas y ver la siguiente demostración que muestra una imagen dentro del cuadro de información sobre herramientas.

El CSS para las tres descripciones emergentes anteriores es el mismo que se muestra a continuación:

<style> /* content box */ #tool_tip{ background-color: rgba(128, 128, 128, 0.07); border-radius: 4px; padding: 40px 40px 10px 30px; max-width: 600px; position: relative; margin: 0 auto; /* font-size: 18px; - use only if required /* line-height: 28px; - use only if required */ } /* Tooltip */ .help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #4F798E; border-radius: 50%; width: 24px; height: 24px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; /* Change the font size inside tooltip */ line-height: 1.4; } .help-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } } /* Adjust tooltip size on mobile devices */ @media screen and (max-width: 480px) { .help-tip p{ width: 200px; } } </style>

El código HTML de las tres descripciones emergentes se encuentra a continuación:

<!-- HTML Code for Tooltip --> <!-- Text Tooltip--> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip appears on mouse hovering.</p> </div> <p>This is a simple tooltip with just text display on hovering. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with HTML Content --> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip with <b>HTML tags!</b> inside. <a href="https://www.webnots.com/">Here is a link!</a> You can insert any <i>HTML tag!</i></p> </div> <p>This tooltip has HTML tags inside. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with Image inside --> <div id="tool_tip"> <div class="help-tip"> <p>This tooltip has a picture too! < /br>< /br></p><p><img data-src="https://img.webnots.com/2015/06/Weebly-Site-Building.png" width="300" /></p> </div> <p>Also include a showcasing image inside the tooltip. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div>

Puede copiar / pegar el contenido CSS y HTML utilizado para esta demostración y personalizarlo según sus necesidades. Reemplace el enlace y la URL de la imagen con los suyos.

Agregar CSS y HTML en el sitio Weebly

Hay dos formas de agregar CSS en Weebly :

  • Agréguelo en "main.less" para aplicar los estilos en todo su sitio.
  • Agréguelo en la sección " Código de encabezado " de una página en particular para que el CSS sea efectivo solo para esa página.

¿Cómo agregar información sobre herramientas en el sitio de Weebly?

Agregar código de encabezado en la página

Agregar HTML personalizado

La parte HTML de la información sobre herramientas debe colocarse en el área de contenido donde desea insertar una información sobre herramientas mediante el elemento " Código incrustado ".

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