我正在评估快速加载 WordPress 主题。我尽职调查的一部分是在我正在测试的主题中创建一个典型的主页。

我很高兴发现我可以在 GeneratePress 中以多快的速度创建漂亮的全角主页英雄图像——无需任何插件或高级附加组件。所以,我在分享。

对于本教程,我们将使用 GeneratePress 主题的免费版本和 Gutenberg WordPress 块编辑器。

顺便说一句,我不隶属于 GeneratePress,也不隶属于任何软件供应商。

我们将涵盖的内容

1.GeneratePress主题设置

2.古腾堡文件设置

3.古腾堡区块设置

4. umph 的额外自定义 CSS!

如果您想继续,这是我使用的图像Unsplash。随意下载它,将其裁剪为 1280x849 像素,然后将其优化到大约 200 KB 或更少。

---

GeneratePress 主题设置#

标头

导航到 外观 > 自定义 > 布局 > 标题

• 标题预设:右导航

• 标题宽度:完整

• 内页眉宽度:全

• 标题对齐:左

导航

导航到 外观自定义 > 布局 > 主导航

• 导航宽度:全

• 内部导航宽度:包含

• 导航对齐:左

• 导航位置:向右浮动

[](https://res.cloudinary.com/practicaldev/image/fetch/s--hGoTWqW7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/b9jv853u8sk5ly53twtz.png)

确保您点击“发布”按钮以保存您的更改。现在,使用 Gutenberg(块编辑器)创建一个新页面。

如果您需要 Gutenberg 复习,请查看来自 Shout Me Loud 的Gutenberg 教程。

好吧!让我们点击文档设置。

---

古腾堡文档设置#

为您的文档设置选择这些选项。

• 侧边栏:内容(无侧边栏)

• 页面生成器容器:全宽

• 禁用元素:内容标题

明白了吗?伟大的。是时候创建一个覆盖块了。

加盖块

在页面顶部添加一个新块。选择 Cover 作为块类型。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zenqbyZJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/z7khyg3194ohnpdyiv44.png)

上传您之前准备的图像。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--FhRZF3-b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/nh196makhoivc13ecdb8.png)

现在,让我们调整新封面块的设置。

---

古腾堡块设置#

为您的块设置选择这些选项。

• 媒体设置:固定背景(给我们带来臀部视差效果)

• 尺寸 > 最小高度像素:849px(还记得我们上面的英雄图像的高度吗?)

• 叠加 > 背景不透明度:50%

哇!我们快到了。

---

自定义 CSS 用于一些 Umph!

好的。所以我添加了自定义 CSS 以确保以下内容:

1.我们的顶部导航栏是非粘性的

2.我们的顶部导航栏有透明背景

3.我们创建的封面块没有隐藏我们的顶部导航栏

4.我们的网站标题从深色背景中弹出

5. 最后,让这个样式只应用于主页

这是我使用的自定义 CSS。

/* Need this to make transparent header overlay for homepage hero. */
.page-id-6 .site-header {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: transparent;
}

/* Brighten the branding text to make it pop on a dark background. */
.page-id-6 .main-title a {
    color: whitesmoke;
}

不知道把这个 CSS 放在哪里?请阅读如何将 CSS 添加到 WordPress。

不知道如何找到页面ID?在浏览器中打开您的页面。查看源代码。搜索“<body”。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--XUtCFkvJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/lo3vb85m6vfqkucvlwsu.png)

耶,你做到了!击掌!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--DyalQn0R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/ https://dev-to-uploads.s3.amazonaws.com/i/uqy9jh531rp1hkg2ilxh.jpg)

谢谢阅读。分享和享受 ;-)

使用的英雄形象是印度尼西亚历史名城日惹市一名马和马车司机的 35 毫米胶片扫描。