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 panel de iconos en Weebly?

4

Los paneles de iconos te ayudan a mostrar contenido de una manera muy atractiva. Por lo general, puede usar esto en una página de destino para mostrar diferentes tipos de servicios proporcionados en el sitio. Un solo panel puede funcionar como un cuadro de llamada a la acción y puede mostrar varios paneles colocándolos al lado. Aunque Weebly ofrece un cuadro de llamada como una aplicación, el panel de iconos con el mismo estilo de columna creará un aspecto más atractivo.

A continuación se muestra el widget del panel de iconos de lo que estamos hablando y seguimos leyendo para crear dicho panel para su sitio Weebly.

Características del panel de iconos

  • Puede agregar cualquier número de paneles simplemente agregando un fragmento de código HTML.
  • Úselo como uno o varios paneles.
  • Diseño receptivo y fácil de personalizar.
  • Cada panel contiene un ícono de fuente impresionante, un encabezado, un párrafo y un enlace o botón para leer más.
  • Cada columna tiene la misma altura aunque la altura del contenido sea diferente.

La creación de un panel de iconos es un proceso de dos pasos: primero defina el CSS y luego agregue HTML.

Definición de estilos para el widget del panel de iconos

Paso 1: definición de columnas y contenedor de paneles

Creemos un widget con cuatro columnas c1, c2, c3 y c4 que tengan la misma altura dentro de un contenedor llamado panel_container.

/* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; }

Usamos el atributo flex para mantener fija la altura del contenedor principal independientemente de la altura individual de las cuatro columnas secundarias en el interior. Hemos utilizado un ancho del 20% para cada columna para que se ajuste al ancho del tema de Weebly; puede intentar personalizar el ancho según su tema y la cantidad de columnas que realmente necesita.

Nota: Todos los navegadores modernos admiten el atributo CSS flex. Sin embargo, los navegadores antiguos como Internet Explorer no lo admiten.

Paso 2: definición del fondo de la columna

Ahora que las cuatro columnas de igual altura están definidas, es hora de definir el color de fondo para cada columna. Hemos utilizado algunos colores seguros para la web, puede cambiar a cualquier color que necesite.

/* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; }

Paso 3 – Definición de estilo para iconos de fuentes impresionantes

Usamos una fuente impresionante para los íconos para que sea fácil de usar y usted tendrá muchos íconos para elegir según sus necesidades. El icono se define como un cuadro cuadrado con un tamaño de 80 px x 80 px con cierto efecto de desplazamiento.

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; }

Paso 4 – Estilo de Elementos Adicionales

A continuación se muestra el estilo de elementos adicionales como título (título), párrafo (para) y botón (btn).

/* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; }

Paso 5: agregar capacidad de respuesta al widget

El último paso para definir CSS es agregar capacidad de respuesta mediante consultas de medios como se muestra a continuación:

/* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } }

Ahora la parte CSS está completa y el CSS completo se verá a continuación:

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> /* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; } /* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; } /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; } /* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; } /* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Pegue el CSS completo en la sección "Código de encabezado" de su página de Weebly.

¿Cómo agregar un widget de panel de iconos en Weebly?

Agregar código de encabezado en la página

Definición de HTML para el widget del panel de iconos

Arrastre y suelte un elemento "Código incrustado" y agregue el siguiente código HTML en su interior. Esto es para un solo panel de íconos y el ícono "fa-home" se usa para mostrar un ícono de inicio. Consulte la lista de referencia de iconos impresionantes de fuentes para elegir los iconos requeridos. También reemplace el encabezado, el párrafo y el # con su contenido y enlace reales.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Width is defined as 100% to align within a row */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

A continuación se muestra el código para dos paneles con diferente altura: uno tiene un botón y el otro tiene un enlace para leer más texto.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="para"><a href="#">Read More</a></div> </div> </div>

Nota: Use estilo en línea para ancho = 100% para columnas cuando desee usar uno o dos paneles junto con algunos otros elementos colocados al lado. Esto asegura que el panel esté alineado a todo el ancho y no se encoja al ancho definido de la columna en el estilo. El ancho real del panel y el elemento adyacente se puede ajustar normalmente ajustando el ancho de los elementos en el editor de Weebly.

A continuación se muestra el código HTML completo para el widget del panel de iconos de cuatro columnas:

<div class="panel_container"> <div class="c1"> <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <div class="icon"><span class="fa fa-download"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <div class="icon"><span class="fa fa-shopping-cart"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

El widget de forma predeterminada tiene columnas sin espacio entre ellas, puede proporcionar un margen derecho para crear un espacio entre las columnas.

.c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; margin-right: 20px; /* Add right margin to create space between panels */ }

¿Cómo agregar un widget de panel de iconos en Weebly?

Puede utilizar uno, dos, tres o cuatro paneles con diferentes variaciones.

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