首页 » elementor » academy » Build a Blog in Elementor » Elementor Pro制作博客网站 [07] 使用 Elementor 设计我们的帖子

Elementor Pro制作博客网站 [07] 使用 Elementor 设计我们的帖子

在上一课中,我们学习了向博客添加新帖子的不同方法,并回顾了文章结构和博客最佳实践。

在本课中,我们将了解如何自定义工具包的单个帖子模板,并查看使用默认古腾堡编辑器编写的帖子的样式选项。

所以准备好一杯咖啡(或茶),让我们开始吧。
我们将从预览我们在上一课中使用古腾堡编辑器创建的帖子开始。正如我们所看到的,这篇文章的文本样式与我们在全局样式中设置的字体和颜色不匹配,但我们稍后会看到如何更正它。

让我们开始自定义帖子模板。使用 Finder 访问主题构建器,选择单个帖子,然后单击“编辑”。为了查看需要应用哪些更改,我们可以选择一个特定的帖子进行预览。

单击齿轮图标,然后在预览设置下,转到第二个下拉菜单并搜索我们的帖子。点击按钮更新预览。完美的。

在我们进行任何更改之前,让我们浏览一下这篇文章,看看我们在这里得到了什么。首先,我们有这篇文章图片。如果我们单击此小部件,我们会注意到它是从特色图像字段中获取的。通过单击齿轮图标,我们可以设置后备图像,以防图像无法正确加载。

继续到右栏,我们有这个帖子信息小部件,显示了这篇帖子的发布日期。这个小部件允许我们为访问者添加有用的信息,例如术语,通常用于添加标签或类别,提供对这篇文章的评论数量,等等。

通过单击标题,我们可以看到它实际上是一个帖子标题小部件,它会自动从我们在 WordPress 中创建的文章中获取信息。这是许多与帖子相关的小部件之一,旨在简化单个帖子的创建过程。

向下滚动,我们可以看到我们帖子的内容。但是,我们实际上无法从此处对其进行编辑。这是因为此小部件 Post Content 从我们在上一课中创建的文章中动态获取其内容。但是我们可以继续编辑这个模板,从这里的侧边栏开始。让我们稍微改变一下以适应 Xander 的品牌。

首先,我们将更改文本并调整样式。我们还可以将我们的电子邮件营销平台集成并连接到我们的表格。我们将在描述中留下链接。

接下来,我们将更改图像。

进一步向下滚动,我们会找到这个小部件,它有助于将我们的读者引导到较旧或较新的帖子。由于我们正在查看 Xander 博客上的最新文章,因此我们只能看到这个较旧的故事按钮。

我们也有这些共享按钮,它们对于覆盖更广泛的受众是不可或缺的。我们可以选择和设置可用于共享的不同平台,以及更改按钮样式,例如使用图标而不是文本。我们也可以隐藏标签,只使用一个图标,这样更符合 Xander 的风格。伟大的!

接下来,我们有帖子评论小部件,顾名思义,它允许我们的读者回复我们的文章。与发布内容小部件一样,此小部件继承了我们网站主题的样式。我们稍后会看到如何自定义它。

最后,我们有 Posts 小部件,它显示更多文章。使用布局设置来选择我们的帖子的显示方式,并使用查询设置来控制要显示的帖子以及显示顺序。
我们可以在分页选项卡中控制帖子分页设置。

现在让我们看看如何在帖子内容和回复小部件中设置排版样式。全局字体只能直接应用于在 Elementor 编辑器中创建的内容。回想一下,我们在 Gutenberg 编辑器中在 Elementor 之外创建了这篇文章,……所以我们将使用主题样式来调整我们的文章的外观。

单击汉堡菜单,然后转到站点设置。请记住,这个蓝色标题表示我们正在编辑将应用于整个站点的设置。

在主题样式下,单击排版。在上一课中,我们使用不同的标题提到了内容层次结构的重要性。这个屏幕允许我们设计每个单独的标题,以及我们网站上的文本和不同的链接。

让我们从调整主体样式开始,使用我们的全局颜色和字体。
我们还可以控制段落之间的空间,如此处所示。
接下来,我们将设置链接的颜色。如果需要,通过为链接和悬停效果设置颜色来更改它。

由于H1是我们设计设置的,所以不需要调整这个样式,所以我们直接跳到H2。我们将设置颜色……和排版。我们将为 H3 做同样的事情。我们暂时保留其余标题。如果我们将来需要调整它们,我们可以随时回到这里。

向下滚动,我们可以看到这个“发表评论”按钮的样式仍然使用默认的主题颜色。要更改此设置,请返回“站点设置”,转到“按钮”,然后根据需要调整按钮的样式。

我们还可以设置其他元素的样式,例如图像和表单字段。我现在花点时间来设计表单字段的样式。随意继续并更新您自己的样式。

一切准备就绪后,我们将点击“更新”按钮以保存我们的更改,然后单击此图标关闭站点设置面板,然后返回编辑我们的页面。

伟大的!我们已经调整了此模板及其样式以匹配 Xander 的品牌,但我们真的才刚刚开始!. 当我们创建博客时,我们希望确保我们的帖子易于阅读且可信。有几个小部件可以帮助我们做到这一点,我们将从目录开始。

Elementor 的目录小部件可帮助您根据标题标签的层次结构组织页面内容,并使您的网站访问者更容易浏览您的 WordPress 网站。

然而,这个小部件会自动生成它的标题,这意味着有时它可能会生成不相关的标题,正如我们在这里看到的那样。

要过滤掉不必要的标题,让我们确保此小部件仅从文章本身提取内容。为此,请单击帖子内容小部件,转到高级,然后在 CSS ID 中输入“我的内容”。

返回目录,输入井号 (#) 或主题标签,以及“我的内容”。这让 Elementor 知道我们只想提取具有 my-content ID 的元素中的标题。

现在剩下要做的就是根据我们的喜好设置小部件的样式。
我们还可以使用摘录小部件,并将其放在目录的正上方,这样我们的访问者将以更简洁的初始视图开始。

这样,Xander 的读者就有了一个简短的介绍和这个方便的目录,可以在整个帖子中轻松导航。

接下来,为了增加我们帖子的可信度,我们会让访问者知道他们正在阅读谁的文章。

滚动到文章底部,在小部件中,搜索并拖入作者框小部件。此小部件提取文章作者的个人资料信息。Xander 目前是他的博客中唯一的作者,但博主用来增加受众范围的一个常见策略是在他们的博客中包括客座作者。添加简短的简历将增强作者的可信度。

要编辑此信息,我们将返回 WP 仪表板,但在此之前,我们将单击更新以保存所有更改。然后,使用 Finder,我们将转到用户,然后单击您要更改其详细信息的用户。在这里我们可以设置用户的角色,比如客座作者的贡献者,我们不想像作者那样授予发布权限。我们还可以添加用户的名字和姓氏,并设置该用户的姓名在整个站点中的显示方式。
最后,我们将添加 Xander 的简介,并更改他的头像。

当谈到作者的简历时,建议保持简洁,但不要忘记提醒你的读者为什么他们应该听你的。
但是,个人资料图像由 Gravatar 控制。如果您还没有 Gravatar 帐户,请单击此链接,使用与 WordPress 登录相同的电子邮件进行注册,然后设置一个新图像。请注意,此图像将在您评论的每个 WordPress 网站或任何可能使用 Gravatar 的系统中跟随您。

现在我们已经完成,请确保保存您的更改,并使用 Finder,我们可以快速返回到通过主题构建器编辑 Single Post 模板。

回到 Single post 模板,我们可以看到我们刚刚添加的信息已自动更新。凉爽的。但是让我们做一些更改以确保它符合网站的风格。

单击作者框,然后转到“样式”选项卡。调整图像尺寸。并更改文本的颜色。

这看起来已经好多了,但我们可以添加一个小改动,使作者框弹出更多一点,并将其与文章内容分开。

转到高级,并使用填充添加一个小间隙。接下来,添加边框并调整其宽度。完美的!

让我们确保不要忘记通过使用响应模式来调整我们对移动设备所做的任何更改!
就是这样!我们现在在我们的页面上发布了完全定制的文章!

在下一课中,我们将了解如何对存档模板进行小幅调整,甚至创建特定于类别或标签的存档模板。所以一定要持续关注。到时候那里见!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top