如何在Weebly中添加按钮技巧
实际上有一个名为“Buttons”的 Weebly 元素。 这绝对是最重要的元素之一。 例如,任何人都可以添加一个按钮,请求访问者下载 Word 文档。 有时,当您喜欢整个主题但该主题上的按钮可能具有丑陋的样式时,这是很常见的。 在这种情况下,可以很容易地将默认的 Weebly 按钮元素的样式替换为您自己的自定义 CSS 或其他主题的按钮样式。 嗯,这篇文章解释了如何在Weebly中添加按钮技巧
推荐:添加更新Weebly商店信息
如何在 Weebly 中添加按钮
Weebly 有一个随时可用的拖放按钮元素,可以自定义为四种不同类型。 按钮元素分组在元素的“结构”类别下。 默认情况下,用户可以添加两种样式的小按钮和两种样式的大按钮。
在所有非响应式主题上,Weebly 使用图像来创建按钮,在所有响应式主题上,按钮的样式由“main.less”文件控制。
拖放后,单击内容区域上的按钮即可查看以下自定义选项:
- 按钮文本 – 要在按钮上显示的文本。
- 按钮样式 – 选择四种可用样式之一。
- 位置 – 按钮居中、右对齐或左对齐。
- 链接 – 添加按钮文本的链接。
- 间距 – 调整顶部和底部边距。
响应式与非响应式
在尝试更改按钮的样式之前,请检查您当前使用的主题类型。 Weebly 主题上使用三种类型的按钮:
- 响应式主题上的 CSS 按钮 – 例如主题 Slick、Cento。
- 非响应式主题上的 CSS 按钮 – 示例主题 Cleancut。
带有图像按钮的非响应式主题 – 这里按钮元素使用图像,CSS 只是调用该图像作为背景,示例主题是城市。
带有 CSS 按钮的非响应式主题 – 像 Cleancut 这样的主题使用完整的 CSS 按钮,没有图像,尽管它是一个非响应式主题。
响应式主题 – 所有最新的主题,如 Slick、Cento、Paper 等都是完全响应式的,按钮元素是从 CSS 代码生成的。
案例 1 – 在非响应式主题上添加自定义按钮图像
Weebly 按钮元素的重要特征是它能够根据文本长度进行调整。 该按钮将根据输入文本的长度自动调整。 这是通过将按钮分成两个图像来实现的。
在进一步操作之前,请按照以下步骤了解按钮图像存储在 Weebly 站点中的位置。
- 登录您的 Weebly 帐户并选择要编辑的站点。
- 导航 ”主题”选项卡并单击“编辑 HTML/CSS“ 按钮。
- 在下面 ”资产”部分您将看到不同的按钮图像,如下所示:
我们注意到所有使用图像作为按钮的非响应式主题都有 9 组图像(总共 18 个)用于较小和较大的按钮,但使用 CSS 中的 2 个特定图像作为按钮的背景。 检查“main_style.css”并找出用于按钮的图像。 下面的城市主题示例显示“button-highlight.png”和“button-highlight-large.png”分别用于较小和较大的按钮。
如果您不喜欢这些按钮,只需将图像更改为 9 组可用图像之一。 您将“button-highlight.png”更改为“button-purple.png”。 如果您不喜欢任何现有的按钮图像,请创建您自己的具有相似尺寸和分割样式的自定义图像,并将其上传到“资产“ 部分。 确保在“中使用图像的名称main_style.css“ 为了 ”背景“ 财产。
案例 2 – 在非响应式主题上自定义 CSS 按钮
如果您在“”下找不到任何按钮图像资产” 非响应主题部分,然后检查“main_style.css”以查看“纽扣“ 部分。 下面是 Cleancut 主题的 CSS 代码,可以根据需要自定义背景、颜色、悬停效果等。
/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover , .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }
现在返回编辑器并将按钮元素拖到内容区域。 您可以看到该按钮将采用您在“中定义的新样式”少主程序”。