如何在WordPress中创建自定义形状分隔符

您想将自定义形状分隔符添加到您的WordPress网站吗?形状分隔器可以以引人入胜且引人注目的方式组织您的内容。它们还可以突出显示您网站上最重要的内容,因此访问者和客户不会错过关键信息。在本文中,我们将向您展示如何在WordPress中创建自定义形状分隔线。

为什么要在WordPress中创建自定义形状分隔线?

形状分隔符是一种在内容块之间添加的分区分隔符。

这些分隔符可以很简单,例如使用内置WordPress块创建的水平线。

您可以使用这些基本分隔符来组织和分隔内容,这在涵盖许多不同主题的页面上特别有用。

您还可以使用页面构建器插件和其他网页设计软件创建更高级的形状分隔线。这些可以突出显示您网站最重要的内容,使其在访问者和客户中脱颖而出。

33d4f6dc9d2989b9f17ce87cb42a965f.png

具有专业外观的形状分隔线还可以使页面更加有趣和引人入胜。

例如,您可以使用它们为电子邮件新闻稿注册表单创建独特的背景。

8a22070bb428b24d2c9412d4fdbe08e3.png

方法 1.创建一个简单的形状分隔线(无需插件)

将自定义形状分隔符添加到WordPress的最简单方法是使用内置的分隔符块。

此方法允许您在任何WordPress块之间添加水平线分隔符,然后自定义线条的颜色和样式。

此方法不允许您向WordPress添加不同的形状,并且具有有限的自定义设置。但是,您不需要安装额外的WordPress插件,因此这是向您的网站添加简单形状分隔线的最简单方法。

要开始使用,只需在内容编辑器中打开要添加水平分隔符的帖子或页面。然后,单击要放置分隔符的“+”按钮。

851a54a90aeff4fa4b972a89d4d04713.png

在弹出窗口中,输入“分隔符”。

当右侧块出现时,单击以将其添加到页面或帖子中。

f9e06fd9376fb6654f7dea00f1b63c55.png

要自定义默认分隔符块,请单击它,然后使用右侧菜单中的设置。

您可以使用“样式”部分中的按钮在默认、宽线和点之间切换。

e8ac70184ea54de27c384d24c7b16aa0.png

您还可以更改线条的颜色,使其与您的主题或品牌的其余部分相匹配。

为此,请单击“背景”,然后从出现的弹出窗口中选择一种颜色。

f52d8f8761c2acc60a8f3f6564300e03.png

当您对分隔符的外观感到满意时,可以单击“发布”或“更新”按钮以使形状分隔线生效。

方法 2.使用页面构建器在WordPress中创建自定义形状分隔符(推荐)

如果您希望使用不同的形状并自定义分隔器的每个部分,那么我们建议您使用 SeedProd 插件。

SeedProd 是市场上最好的 WordPress 页面构建器插件,它允许您使用简单的拖放编辑器向任何部分、行或列添加自定义形状分隔符。

它还带有 180 多个专业设计的模板和 90 多个块,您可以使用它们来创建漂亮的自定义主页、登录页面等。

注意:WordPress.org 上有一个免费版本的SeedProd,但我们将使用Pro版本,因为它带有各种形状分隔器。

您需要做的第一件事是安装并激活 SeedProd 插件。

激活后,您需要输入许可证密钥。

4c9597be51b1cacbfeff3f5f203221c5.png

您可以在SeedProd网站上的帐户下找到此信息。输入许可证密钥后,单击“验证密钥”按钮。

完成后,转到 种子生产 » 页面,然后单击“添加新登录页面”按钮。

44e339576f6cfcbf90705d49c728c6d4.png

之后,是时候选择一个页面设计模板了。SeedProd 有大量专业设计的模板,您可以对其进行微调以完全适合您的 WordPress 网站。

要选择模板,只需将鼠标悬停在其上,然后单击“复选标记”图标。

8ca898b49d0127c5cad817402c3c7f5f.png

接下来,继续并键入页面的名称。SeedProd 将根据页面标题自动创建一个 URL,但您可以将 URL 更改为所需的任何内容。

例如,您可能希望添加一些相关的关键字,这将有助于搜索引擎了解页面的内容,并可能改善您的WordPress SEO。

当您对输入的信息感到满意时,请单击“保存并开始编辑页面”按钮。

接下来,您将被带到拖放页面构建器,准备自定义模板。

SeedProd 编辑器在右侧显示设计的实时预览,在左侧显示一些块设置。

左侧菜单还包含可以拖动到布局上的块。

例如,您可以拖放按钮和图像等标准块,或使用倒数计时器、联系表单、社交共享按钮等高级块。

a01d97a58816020e72421557e70ff72d.png

要自定义块,只需单击以在布局中选择它。

然后,左侧菜单将显示可用于配置该块的所有设置。您还可以更改页面的背景颜色、添加背景图像或更改配色方案和字体以更好地匹配您的品牌。

e36d596dc58fecfde1f2e082640c9504.png

SeedProd还带有“部分”,这是经常一起使用的块的集合。例如,SeedProd 具有页眉部分、英雄图像、号召性用语、客户推荐、常见问题解答、功能、页脚部分等。

要查看不同的部分,只需单击“部分”选项卡。

47e1dd837798183381513f3d833fa569.png

您可以使用拖放在布局中移动部分和块。

如果要删除块,只需将鼠标悬停在它上面,然后在出现垃圾桶图标时单击它。

d8602cb0ce0c5bfc12db02b9664327da.png

无论您是否选择使用 SeedProd 剖面,您现在都可以创建自定义形状分隔符。只需单击以选择要添加分隔符的部分、行或列。

然后,单击左侧菜单中的“高级”选项卡。

现在,单击以展开“形状分隔线”部分。

首先,您可以通过选择“顶部”或“底部”按钮来选择显示形状分隔线的位置。

aa5191636da02674e8ae28e5a39de0ea.png

您现在可以打开“类型”菜单并选择要使用的形状分隔线。

当您选择不同的形状时,实时预览将自动更新,因此您可以尝试不同的样式以查看最佳外观。

27b830a0bc6c40615481ed35211c3850.png

选择形状分隔线后,您可以使用新设置设置其样式。

首先,您可以单击“颜色”,然后从出现的弹出窗口中选择一种新颜色。

29ced69973a5301c51d63319eebc4d0d.png

完成后,您可以通过拖动“宽度”和“高度”滑块来放大或缩小分隔线。

如果您已经想到了特定的尺寸,则可以在框中键入这些数字。

您也可以尝试通过单击来翻转分隔器以启用或禁用“翻转”开关。

默认情况下,分隔符将显示在其余内容的后面,因此用户可以清楚地看到与分隔符重叠的任何文本、图像或其他内容。

但是,将形状移动到前面可以创建一些有趣的效果。如果您想查看其外观,只需单击以启用“置于顶层”开关。

401068111e7dc3480e3633eed04cf911.png

要添加更多分隔线,只需按照上述相同的过程进行操作即可。

您甚至可以在区域的顶部和底部添加形状分隔线,这通常会产生一些令人印象深刻且引人注目的结果。

e67fbd130107c2ccee6fc5b2994f4518.png

您可以通过添加更多块并在左侧菜单中自定义这些块来继续处理页面。

如果您对页面的外观感到满意,请单击“保存”按钮。然后,您可以选择“发布”以使该页面生效。

如何将形状分隔线添加到WordPress主题

SeedProd 的拖放编辑器使您可以自由地向任何页面添加独特的形状分隔符。但是,有时您可能希望在多个页面上使用相同的形状分隔线,甚至在整个WordPress博客或网站上。

这将帮助您创建一致的设计,还可以为您节省大量时间。在这种情况下,我们建议使用 SeedProd 主题生成器向主题添加形状分隔线。

使用SeedProd,您可以创建自定义WordPress主题,而无需编写任何代码。它会创建构成主题的所有文件,包括侧边栏、页眉、页脚、单个帖子等。

b7023f5052947c083c56dbd85cf717d9.png

然后,您可以使用熟悉的拖放构建器自定义这些文件。这包括按照上述相同过程添加形状分隔线。

当您使用 SeedProd 激活新主题时,它将覆盖您现有的 WordPress 主题,因此仅当您想替换当前主题时才应使用此方法。

e42e19292f5c56ef49b93b056b12cd0c.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值