这在wordpress上可以实现吗？

Question

尝试制作一个类似这个主题的网站https://www.beefitswhatsfordinner.com/，这在 WordPress 上可以实现吗？

我试图避免代码，因为我将使用插件，但以下是我目前尝试过的。

平台是wordpress，页面构建器是elementor，这个HTML sn-p在一个elementor块的HTML标签里面

<sectiona>
<ul>
    <li>
        <a>
            Button 1
        </a>
        <img src="/wp-content/uploads/2019/11/1.jpg">
    </li>
    <li>
        <a>
            Button 2
        </a>
        <img src="/wp-content/uploads/2019/11/2.jpg">
    </li>
    <li>
        <a>
            Button 3
        </a>
        <img src="/wp-content/uploads/2019/11/3.jpg">
    </li>
    <li>
        <a>
            Button 4
        </a>
        <img src="/wp-content/uploads/2019/11/4.jpg">
    </li>
    <li>
        <a>
            Button 5
        </a>
        <img src="/wp-content/uploads/2019/11/5.jpg">
    </li>
    <li>
        <a>
            Button 6
        </a>
        <img src="/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>

Answer 1

Wordpress 只是一个 CMS。

所以你可以用它构建任何网站，这里最难的部分是前端。

您可以扩展posttypes并添加posttypes，添加类别以实现更复杂的内容结构。