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 fotos en Weebly?

6

El panel de fotos se utiliza para mostrar una imagen junto con una pequeña descripción y un enlace o botón de llamada a la acción. Esta es una manera fácil de atraer la atención del usuario y llevarlo a la página de destino. En lugar de un panel individual, también puede utilizar paneles de página completa en varias columnas como menú de restaurante o para mostrar destinos para una agencia de viajes. En este artículo, explicaremos cómo crear un widget de panel de foto único y usarlo en varias columnas en su sitio Weebly.

Los widgets de un solo panel de fotos se verán como se muestra a continuación y puede crear un restaurante o una galería mejorando el widget único.

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

Panel de una foto para Weebly

Creación de un widget de panel de foto única

El panel único se puede utilizar de forma independiente como un widget de panel de fotos individual. Si desea usarlo en una columna, entonces debe colocar un solo panel de fotos junto a cualquier otro elemento usando el elemento " Código incrustado " en su sitio Weebly. El panel contiene una imagen, título, descripción y un botón de llamada a la acción. Básicamente, necesita imágenes, CSS y HTML para crear un panel y el panel de fotos se verá al lado con pequeñas desviaciones basadas en su tema de Weebly.

Características del widget de panel de fotos

  • Agréguelo como un solo widget o en varias columnas.
  • Hecho con CSS simple sin consulta.
  • Personalice el color y las fuentes según sus necesidades.
  • Úselo para un llamado a la acción o un widget de página completa como el menú de un restaurante.
  • Totalmente receptivo que se ajusta automáticamente al ancho de los dispositivos móviles.

Carga de imágenes en el sitio de Weebly

El primer paso es cargar las imágenes requeridas en su sitio Weebly en "Tema> Editar HTML / CSS> Activos> Cargar archivo (s)…". La imagen cargada tendrá el siguiente enlace:

https://yoursite.com/files/theme/image.jpg

CSS para el panel de una sola foto

Primero creamos un panel contenedor con el color de fondo como beige. Este es el color que se muestra en la parte inferior del panel y puede cambiarlo a cualquier color para que se adapte al tema de su sitio.

/* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; }

El contenedor tendrá una imagen en la parte superior y el contenido en la parte inferior. Definamos la altura de la imagen como 200px junto con algún efecto de desplazamiento.

/* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; }

A continuación, definimos el botón de llamada a la acción con efecto flotante:

/* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; }

La parte final de CSS es definir estilos adicionales para enlaces, párrafos y encabezados.

/* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; }

El CSS completo para un solo panel se verá a continuación y agregará el código en "Páginas> Elija la página a la que desea agregar el panel> Configuración de SEO> Código de encabezado" de su página de Weebly.

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

Agregar código de encabezado en la página

<style> /* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } </style>

HTML para el panel de una sola foto

Una vez que se agrega el CSS, agregue el siguiente código HTML dentro de un elemento "Código incrustado". Asegúrese de reemplazar la URL de la imagen con la suya.

<div class="panel_container"> <div> <img class="photo" src="https://img.webnots.com/2015/10/Weebly-Carbon-Upgrade.gif"> <h3 class="heading">Weebly Carbon Upgrade</h3> <p class="para">Weebly introduced a third generation upgrade and named it as Carbon...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Creación de un widget de panel de fotos de página completa

Tomemos un ejemplo de un menú de restaurante con cuatro columnas y varias filas de elementos de menú. El widget de panel único anterior se modificará para ajustar los paneles en un contenedor flexible de igual altura con cuatro columnas como c1, c2, c3 y c4 y todos los demás estilos siguen siendo los mismos. A continuación se muestra la forma de ejemplo, puede crear varios paneles en una sola página.

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

Widget de panel de fotos de Weebly

A continuación se muestra el CSS completo que puede pegar en la sección "Código de encabezado" de su página de Weebly:

<style> /* Photo Panel Container Definition */ .photo_panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; margin: 10px 10px 80px 10px; } .c1, .c2, .c3, .c4 { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } .c1, .c2, .c3 { margin-right: 15px; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } @media only screen and (max-device-width: 768px) { .photo_panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

A continuación se muestra el HTML para el widget que tiene dos filas y contiene ocho paneles. Agregue el siguiente HTML dentro de un elemento de " Código incrustado " reemplazando el contenido ficticio y la URL de la imagen por el suyo.

<!-- First Row Contains 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img1.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img2.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img3.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img4.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Second Row Contains another 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img5.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img6.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img7.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img8.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Add More Rows Here -->

Fuente de grabación: www.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