带有图像、标题和悬停效果的横幅
图像横幅在Magento商店的许多不同地方都很有用。您可以使用简单的标记在任何地方放置横幅。通过附加的实用程序类,您可以轻松地为横幅添加标题和多个悬停效果。
简单的图像横幅
元素将横幅的图像和整个内容包装在元素中禁止
类。图像需要用图像
类。下面是一个创建简单横幅的小例子:
.jpg
横幅的HTML元素
在横幅和标题的例子中,我们将使用通用HTML元素< div >
,但你也可以使用HTML5元素<图>
横幅和< figcaption >
标题。
注意,如果您决定使用这些元素,则< figcaption >
的直接子元素<图>
.此外,< figcaption >
肯定是它的第一个或最后一个子结点。
<图class="ban"> 标题示例
This is a sample text
. < < < <}}
带有超链接的横幅
要创建带有到其他页面(或到同一页面中的位置)的超链接的横幅,请将横幅包装在锚元素中<一>
.在href = " "
属性放置超链接指向的URL。你可以包装整个横幅,或者只包装标题。
横幅与图像悬停效果
要向横幅添加悬停效果,请向横幅添加一个效果类(到带有禁止
类)。以下课程可供选择:ban-effect-1
,ban-effect-2
,ban-effect-3
,ban-effect-fade-out
,ban-effect-grayscale-in
,ban-effect-grayscale-out
,ban-effect-blur-in
,ban-effect-blur-out
.
.jpg
下面你可以看到更多的例子。
带有颜色叠加的横幅
若要为横幅添加颜色覆盖,请添加标题但不添加任何文本。标题将在本页后面介绍,但在本节中我们将只使用空标题元素。
要向横幅添加空标题,只需使用帽
banner内的类:< div class = "帽子" > < / div >
.空标题元素将显示为一个颜色覆盖。举个例子:
叠加的颜色
要改变覆盖的颜色,添加一个内联CSS到标题元素覆盖其默认值背景颜色
财产。你可以添加半透明的颜色使用rgba ()
允许指定颜色不透明度的函数符号。例如:
< / div > < / div >
- 覆盖层的默认颜色可以在管理面板中配置:
主题设计
颜色覆盖与淡入/出效果
默认情况下,颜色覆盖(标题元素)一直覆盖横幅。但是您可以使用两个有用的类来更改它。的ban-caption-fade-out
类将使鼠标悬停在横幅上时覆盖层淡出。和ban-caption-fade-in
类将使覆盖层只在鼠标悬停在横幅上时褪色。
- 将这些类添加到banner元素中,
不到标题元素。
< / div > < / div >
下面你可以看到更多的例子。
自定义颜色和透明度级别
结合悬停效果和颜色覆盖的横幅的例子
带标题的横幅
方法添加元素,即可为横幅创建标题帽
类内部的横幅。在标题中,您可以添加任何文本元素,如标题或文本段落。标题将显示在图像的颜色覆盖(背景色)。举个例子:
标题示例
在您的Magento轻松创建响应横幅。添加图像,标题
和悬停效果。添加任何内容内横幅标题。
- 覆盖层的默认颜色可以在管理面板中配置:
主题设计
标题的例子
创建响应横幅在您的Magento轻松。添加图片,标题
还有悬停效果。添加任何内容内横幅标题。
你可以用额外的特性来扩展这个简单的例子:
- 通过向banner和caption元素添加更多预定义的CSS类
- 在标题中添加更多的HTML(例如图标)
内联样式
如果你想改变标题的风格,例如改变字体大小或颜色,你可以用内联CSS样式.添加风格
属性,并指定所选属性的值,例如字体大小
,字体类型
,颜色
,背景颜色
等。
的默认值颜色
和背景颜色
的标题元素和字体大小
的属性< h2 >
而且< p >
元素。要使背景色变为半透明,请使用rgba ()
功能符号。
标题示例
标题的例子
创建响应横幅在您的Magento轻松。
删除标题背景色
要消除标题的背景色,请添加cap-no-bg
类添加到标题元素。这将使标题元素透明,只有文本将在横幅上可见:
标题示例
创建响应横幅在您的Magento轻松。
标题的例子
创建响应横幅在您的Magento轻松。
带有渐入/渐出效果的标题
默认情况下,标题元素一直覆盖横幅。但是您可以使用两个有用的类来更改它。的ban-caption-fade-out
类将使鼠标悬停在横幅上时标题淡出。和ban-caption-fade-in
类将使鼠标悬停在横幅上时标题渐隐。
- 将这些类添加到banner元素中,
不到标题元素。
下面是一个带有淡出效果的标题代码示例:
下面是两种效果的例子:
中心说明
要使标题水平居中,请添加cap-center-horizontally
类添加到标题元素。要使标题垂直居中,请添加cap-center-vertically
类添加到标题元素。这两个类可以一起使用。
下面是一个标题垂直居中和水平居中的代码示例:
标题示例
在您的Magento中轻松创建响应横幅
默认值(不居中)
中心水平
中心垂直
垂直和水平居中
垂直中心,全面覆盖
当标题垂直居中时,如果你想让标题覆盖整个横幅,你需要使用两个嵌套的标题元素.的内心的标题元素需要有cap-center-vertically
类。额外的cap-no-bg
类将从内部标题元素中删除背景色。
下面是没有背景色的内部标题元素的代码示例:
标题示例
在您的Magento中轻松创建响应横幅
下面您可以看到包含和不包含的内部标题元素的示例cap-no-bg
类:
内标题为cap-no-bg
内标题cap-no-bg
垂直居中的图标
要创建一个图标完全对齐在横幅中心的横幅,使标题元素垂直和水平居中,并在内部标题元素中添加一个图标:
下面你可以看到一些中间有图标的横幅例子:
标题-定位
要设置标题的位置,使用以下类:cap-top
,cap-bottom
,cap-left
,cap-right
,cap-top-left
,cap-top-right
,cap-bottom-left
,cap-bottom-right
.
下面是放置在横幅底部的标题代码示例:
标题示例
以下是所有职位的例子:
标题-精准定位
要更精确地定位标题,可以使用下面提供的类。每个类名后面的数字表示标题将按所选方向移动的值(百分比)。在垂直方向百分比是根据整个横幅的高度计算的。在水平方向百分比是根据整个横幅的宽度计算的。
例如,cap-push-down-10
类将把标题下移10%。下面是所有可用的类的列表:
下推:
cap-push-down-5
cap-push-down-10
cap-push-down-15
cap-push-down-20
cap-push-down-25
cap-push-down-30
推:
cap-push-up-5
cap-push-up-10
cap-push-up-15
cap-push-up-20
cap-push-up-25
cap-push-up-30
左:推
cap-push-left-5
cap-push-left-10
cap-push-left-15
cap-push-left-20
cap-push-left-25
cap-push-left-30
把正确的:
cap-push-right-5
cap-push-right-10
cap-push-right-15
cap-push-right-20
cap-push-right-25
cap-push-right-30
下面你可以看到一个例子,标题被向上推了20%,向右推了15%。
下面你可以看到更多关于定位的例子。
下10%,右10%
标题的例子
向下10%,向左10%
标题的例子
正确的10%
标题的例子
剩下的10%
标题的例子
向上10%,右边10%
标题的例子
向上10%,向左10%
标题的例子
标题的影响
要为标题添加吸引眼球的悬停效果,请将下面列出的类添加到banner元素:
消失:
ban-caption-fade-out
ban-caption-fade-in
幻灯片:
ban-caption-slide-up
ban-caption-slide-down
ban-caption-slide-left
ban-caption-slide-right
推动:
ban-caption-push-up
ban-caption-push-down
铰链:
ban-caption-hinge-up
ban-caption-hinge-down
ban-caption-hinge-left
ban-caption-hinge-right
- 将这些类添加到banner元素中,
不到标题元素。
下面是一个带有标题“hinge up”效果的横幅的代码示例:
标题示例
创建自定义标题横幅
下面你可以看到所有标题效果的例子。
褪色
幻灯片
推
铰链
文字背景标题
要创建每个文本块后面的背景色标题,你需要做以下几个步骤:
1.标记标题元素内的每个文本块文本
类。
2.将这两个类添加到标题元素中:
cap-no-bg
类,它从标题元素中删除背景色
cap-text-bg
类,它向文本块添加背景色
3.向caption元素添加其中一个类来选择文本背景的色调——暗(半透明的黑色)或亮(半透明的白色):
cap-text-bg-dark-1
cap-text-bg-dark-2
cap-text-bg-dark-3
cap-text-bg-light-1
cap-text-bg-light-2
cap-text-bg-light-3
下面是一个黑色文字背景的标题示例:
下面你可以看到不同颜色的文本背景的例子。
标题的例子
创建可定制的标题横幅
响应Magento主题
标题的例子
创建可定制的标题横幅
响应Magento主题
标题的例子
创建可定制的标题横幅
响应Magento主题
标题的例子
创建可定制的标题横幅
响应Magento主题
标题的例子
创建可定制的标题横幅
响应Magento主题
标题的例子
创建可定制的标题横幅
响应Magento主题
链接内的文本背景
内容复杂的标题
在标题中,您可以添加任何文本元素,如标题或文本段落。你也可以通过在标题元素中添加更多的元素来让它更复杂,例如,一个带有图标和悬停效果的文本块: