如何在Weebly中添加照片小部件

如何在Weebly中添加照片小部件

作者

如何在Weebly中添加照片小部件

照片面板用于显示图像以及小描述和号召性用语链接或按钮。 这是一种吸引用户注意力并将他们带到目标页面的简单方法。 除了单独的面板，您还可以将多列中的整页面板用作餐厅菜单或展示旅行社的目的地。 在本文中，我们将解释如何创建单个照片面板小部件并在您的 Weebly建站网站的多个列中使用它。

单个照片面板小部件将如下所示，您可以通过增强单个小部件来创建餐厅或画廊。

如何在Weebly中添加照片小部件
如何在Weebly中添加照片小部件
Weebly 的单张照片面板

推荐：Weebly定价计划和功能比较

创建单个照片面板小部件

单个面板可以作为单独的照片面板小部件独立使用。 如果您想在列中使用它，则需要在您的Weebly建站上使用“嵌入代码”元素将单个照片面板放置在任何其他元素的旁边。 该面板包含图像、标题、描述和号召性用语按钮。 基本上，您需要图像、CSS 和 HTML 来创建一个面板，并且照片面板看起来会像旁边一样，根据您的Weebly建站主题有微小的偏差。

照片面板小部件的特点

  • 添加为单个小部件或多列。
  • 使用简单的 CSS 制作，无需查询。
  • 根据需要自定义颜色和字体。
  • 用于号召性用语或餐厅菜单等整页小部件。
  • 完全响应自动适应移动设备的宽度。

在 Weebly 网站中上传图片

第一步是将所需图像上传到您的Weebly建站网站，位于“主题 > 编辑 HTML / CSS > 资产 > 上传文件…“。 上传的图片会有以下链接：

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

单张照片面板的 CSS

首先，我们创建一个背景颜色为米色的容器面板。 这是面板下方显示的颜色，您可以将其更改为任何颜色以适合您Weebly建站网站的主题。

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

容器顶部有一个图像，底部有一个内容。 让我们将图像高度定义为 200px 以及一些悬停效果。

/* 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;
}

CSS 的最后一部分是为链接、段落和标题定义附加样式。

/* 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;
}

单个面板的完整 CSS 如下所示，并在“页面 > 选择要添加面板的页面 > SEO 设置 > 标题代码”您的 Weebly 页面。

在页面中添加标题代码
在页面中添加标题代码
<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

添加 CSS 后，将以下 HTML 代码添加到“嵌入代码“ 元素。 确保将图像 URL 替换为您自己的。

<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>

推荐：WordPress旅行预订主题Book Your Travel Theme 

创建整页照片面板小部件

让我们以具有四列和多行菜单项的餐厅菜单为例。 上面的单面板小部件将被修改以将面板放入灵活的等高容器中，该容器具有四列 c1、c2、c3 和 c4，所有其他样式保持不变。 下面是示例方式，您可以在单个页面中创建多个面板。

Weebly 照片面板小部件
Weebly 照片面板小部件

以下是您可以粘贴在“标题代码” 您的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>

下面是具有两行包含八个面板的小部件的 HTML。 在“嵌入代码” 元素，将虚拟内容和图像 URL 替换为您自己的。

<!-- 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 -->

推荐：多功能商业和数字技术WordPress主题Utouch

Previous

AdSense广告发布商指南

Next

CSS可视化编辑器YellowPencil v7.6.5

相关文章

如何为您的Weebly网站吸引流量

如何为您的Weebly网站吸引流量

在Weebly网站中添加滚动到顶部按钮

在Weebly网站中添加滚动到顶部按钮

如何在Weebly网站中添加视频流

如何在Weebly网站中添加视频流

通过使用Weebly创建礼品卡

通过使用Weebly创建礼品卡

发表评论