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 miembro del equipo en Weebly?

1

El widget de miembro del equipo es más útil para mostrar el resumen de cada miembro de su equipo junto con una foto y una breve introducción. Puede usar esto en el sitio de Weebly para propósitos como mostrar a los miembros del equipo de su sitio, organización o negocio. Puede agregar el widget de miembro del equipo en Weebly utilizando la aplicación gratuita Weebly o con un código personalizado. En este artículo explicaremos los problemas con la aplicación predeterminada y el uso de código personalizado.

Aplicación para miembros del equipo Weebly

Puede conectar una aplicación gratuita "Tarjetas de equipo" a su sitio desde el centro de aplicaciones de Weebly. Esta es una opción fácil ya que la aplicación también es de desarrolladores de Weebly.

¿Cómo agregar un widget de miembro del equipo en Weebly?

Aplicación Weebly Team Cards

Sin embargo, la aplicación tiene muchos errores y crea una mala experiencia de usuario cuando intenta editar el contenido en el editor. La ventana emergente de configuración ocultará el contenido que desea editar y lo molestará todo el tiempo. Han pasado más de 5 años y Weebly no corrigió ni optimizó esta aplicación. Entonces, en lugar de esperar a que Weebly actualice la aplicación, puede probar las siguientes tarjetas de miembros del equipo.

Pensemos en un widget de miembro del equipo típico con perfiles sociales y analicemos más a fondo cómo agregar un widget de miembro del equipo en el sitio de Weebly utilizando el elemento tradicional " Código incrustado ". El widget del que estamos hablando se verá a continuación con dos tarjetas de miembro.

¿Cómo agregar un widget de miembro del equipo en Weebly?

Widget del panel de miembros del equipo

Características del widget para miembros del equipo

  • Cada tarjeta de miembro del equipo consta de los siguientes elementos:
    • Foto de perfil
    • Nombre y designación
    • Breve descripción
    • Iconos sociales a enlaces de perfiles sociales
  • Puede agregar varias tarjetas de miembros del equipo colocando el elemento "Código incrustado" uno al lado del otro.
  • Los colores y las fuentes de cada tarjeta de miembro del equipo son fáciles de personalizar según sus necesidades.
  • El widget utiliza íconos sociales impresionantes de Font, eliminando así la necesidad de imágenes de íconos sociales. Puede agregar Twitter, Facebook, Skype, LinkedIn o cualquier otro ícono social a los miembros del equipo. Básicamente, esto significa que puede agregar diferentes conjuntos de íconos sociales a diferentes miembros del equipo según el perfil que realmente tenga.

Pasos para agregar el widget de miembro del equipo

A continuación se muestran los pasos para agregar el widget de miembro del equipo a su sitio Weebly.

  • Vinculación de iconos CSS
  • Agregar código CSS
  • Subiendo imágenes de perfil
  • Agregar código HTML

Paso # 1 – Vinculación de iconos CSS

El primer paso es vincular el CSS de origen de los iconos impresionantes de fuentes a su sitio. Inicie sesión en su sitio Weebly y agregue el siguiente código en la sección "Configuración> SEO> Código de encabezado".

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

¿Cómo agregar un widget de miembro del equipo en Weebly?

Agregar código de encabezado a nivel de sitio Weebly

Paso # 2 – Agregar código CSS

El siguiente paso es agregar el siguiente código CSS en el archivo "main.less" de su sitio.

.team { position: relative; min-height: 1px; width:330px; } .person-details figure { display: block; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(216, 216, 216, 0.73); border-radius: 5px; margin: 0; } .person-details figure figcaption { padding: 15px; } .margin-bottom-10 { margin-bottom: 10px; } .person-details figure small { font-size: 65%; } .h4 small { font-weight: normal; line-height: 1; color: #b3b3b3; } .person-details-icons { background: #bc5e43; padding: 10px; text-align: center; margin: 0; } .list-inline { padding-left: 0; list-style: none; margin-left: -5px; } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } .person-details-icons [class^="fa-"]:before, .person-details-icons [class=" fa-"]:before { color: #ffffff; padding: 0; } a:hover { opacity: 0.5; }

¿Cómo agregar un widget de miembro del equipo en Weebly?

Edición del archivo CSS principal en Weebly

Si está agregando este CSS en la sección de encabezado del sitio o una página, asegúrese de agregar el código dentro de las etiquetas

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