Split Layout Squarespace

Question

我正在尝试创建类似于此（https://miro.medium.com/max/4948/1 * ukiU0G636SvZn-Ky3KY6AQ.png）的分屏布局，但是我正在Squarespace中构建网站。我特别需要一个全出血的分屏布局，在彩色背景的两边都带有文本和按钮。

有人知道如何在Squarespace中进行此操作吗？您可以简单地在索引中并排布置两个页面吗？

我已经在本网站的另一部分（https://www.youtube.com/watch?v=u9eQhAxJngY&t=1s）上阅读了本教程，并且我了解这里使用的概念，只是不确定如何将这种想法应用于我的需要。enter image description here

Answer 1

以下示例使用Brine模板，并在页面底部具有示例部分：

https://triceratops-blackbird-9p9x.squarespace.com/?password=p

唯一添加的CSS是以下内容：

#the-founders .Index-page-content {
  padding: 0 !important;
  margin-right: 0;
  margin-left: 0;
  max-width: none;
}

#the-founders .sqs-col-6 {
  padding: 10% 10% !important;
}

@media screen and (min-width: 641px) {
  #the-founders .row, #the-founders .sqs-row {
    display: table;
    width: 100% !important;
    margin-right: 0;
    margin-left: 0;
  }
  #the-founders .sqs-col-6 {
    float: none;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
}

#the-founders .sqs-col-6:first-child {
  background-color: yellowgreen;
}

#the-founders .sqs-col-6:last-child {
  background-color: orange;
}

它仅在一个部分中使用两列常规内容。在这种情况下，我使用了Brine模板中的默认“ The Founders”部分。我在每一列中添加了文本块和按钮块。

考虑：

• 您将定位页面/部分ID而不是#the-founders。
• 您需要注意，只有一行两列。在Squarespace中，很容易在一个部分内拖动块并实际上创建空行和配置错误的列。
• 媒体查询使用641像素，您可以将其更改为移动断点宽度（在其上方1像素）。
• 您还可以使用这种方法相当容易地添加背景图像。这些图像不会使用Squarespace基于JavaScript的“ ImageLoader”，但是，如果您优化背景图像，则无需担心。您可以通过CSS编辑器底部的“管理自定义文件”按钮上传背景图片。
• 我没有参与此演示的样式标题和按钮。