如何使用文本叠加制作WordPress网格

时间:2016-09-06 23:21:45

标签: html css wordpress

我正在尝试在WordPress中创建一个2列网格,其中每行都有一个填充图像的网格项,以及一个填充了文本/可点击按钮和背景图像的网格项。

我也在使用Visual Composer。我正在创建一个全宽行,然后将其拆分为两个50%的列。然后我制作一个HTML块,并简单地添加图像。但另一个更难......

如果我将其设为HTML块并写出文本并设置背景图像,则背景图像仅覆盖文本区域。我需要网格项目大小相同,我将附加一个我试图重新创建的模型。我不能发布链接,因为它是针对客户的,这违反了我们的合同。

谢谢!

Mock-up

1 个答案:

答案 0 :(得分:1)

我建议在Visual Composer的相应列中添加内容,然后单击"编辑"整行的图标(不是列)。在"行设置"框向下滚动并选中标记为" Equal Height"的选项。这将强制两列的高度相等。然后点击"编辑"对于需要照片的列,请单击"设计选项"选项卡,并设置背景图像。

您可能需要在内容框中使用元素的边距和填充以使其达到您想要的高度,但重要的是要知道您的列将是相同的大小,您只需要强制高度你想要使用盒子里面的元素(而不是试图设置盒子的高度)。

希望这有帮助!