尝试创建类似于此主题的网站https://www.beefitswhatsfordinner.com/, 在WordPress上可以实现吗?
我正在尝试避免使用代码, 因为我将使用插件, 但以下是我目前正在尝试的方法。
平台是wordpress, 页面构建器是elementor, 此HTML代码段位于elementor块的HTML标签内
<
sectiona>
<
ul>
<
li>
<
a>
Button 1
<
/a>
<
img src="http://www.srcmini.com/wp-content/uploads/2019/11/1.jpg">
<
/li>
<
li>
<
a>
Button 2
<
/a>
<
img src="http://www.srcmini.com/wp-content/uploads/2019/11/2.jpg">
<
/li>
<
li>
<
a>
Button 3
<
/a>
<
img src="http://www.srcmini.com/wp-content/uploads/2019/11/3.jpg">
<
/li>
<
li>
<
a>
Button 4
<
/a>
<
img src="http://www.srcmini.com/wp-content/uploads/2019/11/4.jpg">
<
/li>
<
li>
<
a>
Button 5
<
/a>
<
img src="http://www.srcmini.com/wp-content/uploads/2019/11/5.jpg">
<
/li>
<
li>
<
a>
Button 6
<
/a>
<
img src="http://www.srcmini.com/wp-content/uploads/2019/11/6.jpg">
<
/li>
<
/ul>
<
style>
sectiona{
position: absolute;
width: 100%;
height: 100vh;
}ul{
width: 100%;
background: rgba(0, 0, 0, .2);
box-sizing: border-box;
-moz-column-count: 2;
-moz-column-gap: 2px;
-webkit-column-count: 2;
-webkit-column-gap: 2px;
column-count: 2;
column-gap: 2px;
text-align: center;
} ul li
{
list-style: none;
} ul li a
{
display: block;
top: 0;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: 0.5s
} ul li a:hover
{
background: #ff0;
color: #000;
} sectiona img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
transition: 1s;
opacity: 0;
}ul li a:hover + img
{
opacity: 1;
}
<
/style>
#1WordPress只是一个CMS。
因此, 你可以使用它来构建任何站点, 最困难的部分是前端。
【类似这样的网站在wordpress上可以实现吗()】你可以扩展帖子类型并添加帖子类型, 添加类别以实现更复杂的内容结构。
推荐阅读
- 这样使用”自定义字段”更改WooCommerce中的”添加到卡片文本”是否很好()
- WordPress style.css模板元素的语法在任何地方都可用吗()
- 使用 Nginx 提供 DDNS 服务(前篇)
- 定制个机器人帮你和Ta聊天
- SpringCloud升级之路2020.0.x版-26.OpenFeign的组件
- 交换机的基本原理与配置
- vsftpd使用Mraiadb虚拟用户访问
- The art of multipropcessor programming 读书笔记-硬件基础2
- Linux中安装Docker,在Docker中安装MySQL和Redis并在Windows下连接访问