您想了解如何使用 Elementor插件 ?

自定义WordPress主题是构建WordPress网站时的主要任务之一。 由于她控制着网站的设计,因此许多专业人员在这里花费大量时间。

创建自定义WordPress主题通常涉及使用主题文件和代码编辑器。 布局更改发生在模板文件中,设计更改通过CSS进行。 此外,您还必须不断刷新浏览器窗口以显示您的自定义设置,这可能有点麻烦。

幸运的是, Elementor, 这个过程变得非常容易,因此您可能需要检查一下。

但是之前,让我们一起发现 如何安装WordPress博客7步骤 et 如何找到,安装和你的博客激活WordPress主题.

然后,回到我们为什么在这里。

什么是WordPress主题

本质上,WordPress主题是定义WordPress网站外观的模板的集合。

WordPress主题涵盖了影响网站设计的所有内容,从页眉和页脚到配色方案,布局等。

有很多可用的主题,包括免费的和高级的,几乎适合任何行业,比如 摄影网站, 健身俱乐部网站, 美发沙龙网站, 法律网站等等。

为什么要自定义WordPress主题?

创建网站的主要原因之一是促进您的业务。 有什么比这样做更好的方法 创建一个网站 独特的,促进了公司的风格和设计。

您是否可以想象没有独特设计的亚马逊,eBay或Google就是他们吗?

当然不是,这就是我们要自定义WordPress主题的原因之一。 我们希望使其独特并适应我们公司的信息。

此外,有时,或者说,经常,您会遇到一个WordPress主题,该主题因设计不佳,颜色不能很好地搭配而困扰,或者主题过于沉重且仅影响网站性能。网络。 WordPress主题可能很强大,除了令您困扰的那件事。 自定义它并更改它可以解决您所有的问题并创建 更好的用户体验.

如何自定义WordPress主题

有几种方法可以自定义WordPress主题。

  1. 通过WordPress定制器手动进行
  2. 折扣码
  3. 与Elementor

如何手动自定义WordPress主题

您可以通过内置的 WordPress 定制器自定义您选择的 WordPress 主题。 如果您在没有代码的情况下执行此操作,那么您可以更改的内容通常会受到限制。 一些 WordPress主题 高级版允许您有更多的自定义选项,但本质上并没有太多适合您的设计选项。

在深入探讨该领域之前,我们想指出的是,当您自定义现有的WordPress主题时,最好使用 一个子主题而不是父主题.

WordPress子主题

子主题是WordPress主题,其功能和特征与另一个WordPress主题父主题完全相同。 子主题用于安全地自定义和修改主题,而不会影响父主题,并且不会失去对其进行更新的能力。 

WordPress主题定制器

因此,既然我们知道最好使用子主题,那么让我们学习如何使用WordPress Customizer自定义主题。 要访问它,请转到您的仪表板,单击 Apparence 在左侧,然后选择 个性化。

您可以使用此定制程序修改的主要功能如下:

添加网站标题,徽标和图标

要添加或更改标题,徽标或图标,您只需进入网站的“身份”面板即可。 并选择每个元素进行修改。

更改WordPress主题的颜色

某些码 WordPress主题 将允许您更改它们的配色方案,但不是全部,而且它们通常是 WordPress主题 优质的。 如果您的 WordPress 主题允许您更改配色方案,则在访问定制器时您将看到此选项。

添加了导航菜单

定制程序还允许您轻松添加和修改网站导航菜单。

如何使用代码自定义WordPress主题

您会注意到在外观选项卡下,您可以选择主题编辑器。 单击它会出现一个带有主题代码的窗口。 此选项需要对CSS编码有充分的了解,不建议初学者使用。

在这里您将可以访问以下文件 style.css,functions.php,并且正是在这种情况下,您需要一个子主题,以免破坏您的网站。

通过编码自定义主题的另一种方法是使用FTP解决方案上传文件。 该过程涉及通过托管服务提供商创建FTP凭据,下载和安装FTP解决方案(如FileZilla),登录到帐户并编辑文件,然后再通过该文件上传。 FTP解决方案。

发现我们的指南 如何使用FileZilla安装WordPress

除非您熟悉编码,否则我们不建议您使用此选项。

使用Elementor轻松自定义WordPress主题

您可以直接从用户界面执行此操作。 无需更改一行代码或重新加载浏览器窗口,甚至一次。

通过Elementor,您只需单击几下鼠标,即可快速轻松地更改网站的每个元素,甚至可以针对移动平台优化这些功能。

Elementor通过使用动态内容并允许您预览页面使此过程变得更加容易。 这样,您可以立即查看设计更改将如何影响您的实际网站和内容。

自定义页眉和页脚

当设计页眉和页脚时,Elementor可以让您完全灵活。 我们都知道它有多无聊,您拥有WordPress主题,并且无法更改页眉或页脚设计的单个方面。 您需要专门的主题,插件等。

使用Elementor,这很容易。

1.创建标题模板

首先配置一个新的标题模板。 为此,请转到Elementor>我的模板。

如何自定义wordpress主题元素或标题模板1

这里的一种开始方法是点击顶部的“添加新”按钮。 在下一个屏幕中,使用下拉菜单选择“页眉”作为要设计的模板类型。

如何自定义wordpress主题元素或标题模板2

您也可以通过单击上一个屏幕的“标题”选项卡,然后按显示的大绿色按钮来访问此屏幕。

如何自定义wordpress主题元素或标题模板3
它将预选择标题作为模板类型。 无论哪种方式,您都需要为模板添加一个合适的名称(这样您以后就会知道),然后单击“创建模板”继续。

它会带你到这里。

如何自定义wordpress主题元素或标题模板4

使用Elementor Pro,您可以从预先设计的标题块中进行选择。 这些是设计模板,您可以将它们用作自己设计的起点,在这种情况下,我们将要做这些。

将鼠标悬停在标题栏上时,单击 插页 使您可以立即开始设计。 否则,请先单击图像以查看大图。 然后您可以随时按 插页 以上。

如何自定义wordpress主题元素或标题模板5

否则,如果您想从头开始,只需单击以下按钮关闭窗口 X 在右上角。

2.更改基本的接头设计

输入新的表头后,首先你会注意到我们之前配置的标志和菜单已经存在。

如何自定义wordpress主题元素或标题模板6

这就是我们将它们放置到位的原因,我们将讨论如何自定义它们。 但是,首先让我们看看如何自定义标题部分。

为此,只需将鼠标悬停在它上面,然后单击顶部的编辑按钮。 这将在左侧打开一个编辑选项列表。

如何自定义wordpress主题元素或标题模板7

您可以在不同的菜单中控制以下内容:

  • 布局 -控制节的宽度,列之间的空间大小,其高度,垂直列及其内容位置,为其分配的HTML标记和常规结构。
  • 样式 -在这里您可以更改背景颜色,包括 悬停效果甚至 添加图像或视频 如果需要,可以添加覆盖,边框和分隔线效果以及更改版式设置。
  • 进阶 -这部分允许您添加CSS属性,例如margin和z索引,动画,ID和类。 它还允许您使该部分保持粘性并控制响应设置以及添加一些内容。 自定义CSS.

以上所有内容都是不言自明的,您将很快获得所需的内容。

3.自定义标题元素

但是,您不仅可以整体编辑标题部分,还可以编辑其中的项目。 例如,要自定义网站徽标,只需单击它。 这也将在左侧为您提供编辑选项。

如何自定义wordpress主题元素或标题模板8
对于徽标,这提供了以下选项:

  • 内容 -更改图像尺寸,对齐方式和链接位置。
  • 样式 -控制宽度和高度,添加CSS效果和悬停效果,并根据需要添加边框和阴影。
  • 进阶 -在这里,您会发现与标题部分基本相同的选项。

使用设置以自定义徽标的方式自定义徽标在标题中的显示效果。 另请注意,每个项目都有其自己的选项类型,因此请务必将每个项目都签出。

4.添加项目

当然,使用Elementor,您也可以将元素添加到标题中。 只需单击右上角的符号即可查看可用的内容。

使用 Elementor 插件自定义 WordPress 主题。
编辑标题模板时,Elementor会自动在列表顶部显示相关的块,这在这种情况下最有意义。 在这种情况下,这些是网站徽标,导航菜单和网站标题之类的东西。

因此,例如,如果要在徽标旁边添加网站标题,只需将其拖放到徽标上即可。 但是,我们目前选择的标题模板允许我们将其添加到徽标的上方或下方。 但是,这是一个很容易解决的问题。

在这种情况下,将鼠标悬停在标题上并使用加号 -+-在上面添加一个部分。

如何自定义wordpress主题元素或标题模板10

单击此处的紫色按钮以选择三列设计。

如何自定义wordpress主题元素或标题模板11

然后将元素从现有标题部分拖到新部分,并在中间添加网站标题。

如何自定义wordpress主题元素或标题模板12

但是,等等,风格完全不同! 没问题。 只需右键单击现有标题,然后选择 复制。 然后右键单击新部分,然后单击此处 粘贴样式。 然后,Elementor将应用现有部分的样式,您可以在以后关闭它。 

如何自定义wordpress主题元素或标题模板13

您可以对任何其他标头元素,当然也可以对Elementor中包含的所有其他元素执行相同的过程。

自定义唯一的帖子模板

在Elementor中,您还可以自定义单个帖子模板。 这是如何做 :

1.创建一个新模型

创建模板的方式与常规方式相同。 但是,这次选择 集成的 作为模型类型。 然后,在下面,选择要编辑的唯一模板。 在这个例子中, 帖子.

如何自定义wordpress主题元素或标题模板14

如果您要创建新的页面设计,请编辑404页面(稍后再介绍)或编辑 自定义帖子类型 特别是,您会选择其他东西。 在任何一种情况下,请输入名称并继续。

在下一个屏幕中,您可以像往常一样从预定义模板中进行选择。 但是,在这种情况下,我们想从头开始创建一个新模型。 因此,单击右上角的X关闭此窗口。

2.配置预览

然后将预览窗口设置为现有帖子。 您可以通过单击编辑器选项底部的眼睛图标来执行此操作,然后 点击“设置”。

如何自定义wordpress主题元素或标题模板15

在打开的菜单中, 预览 动态内容,选择 发布。 之后,在下一行中,您可以按名称搜索并选择现有帖子。

如何自定义wordpress主题元素或标题模板16完成后,点击 使用 & 预览。 尽管此时您将看不到任何内容(因为页面上没有任何内容),但它将告诉Elementor从现在开始使用此帖子中的数据。 您很快就会明白这意味着什么。

3.让我们创建上面的部分 

首先,我们将创建上面的部分。 在这里,您通常会找到诸如帖子标题之类的内容以及诸如作者,日期和类别之类的元数据。

第一步是单击标志 + 并创建一个单列部分。

如何自定义wordpress主题元素或标题模板17
完成后,在布局部分,您可以选择控制其宽度,高度,位置和样式。 在这种情况下,这里没有太多要做。 另外,请放心,您以后随时可以返回并进行更改。

然后将帖子标题小部件拖动到新部分。

如何自定义wordpress主题元素或标题模板18

当您这样做时,请确保使用所有可用的选项来根据自己的喜好调整设计和布局。 例如,这是我的设置:

如何自定义wordpress主题元素或标题模板19

您还应该学习一个很酷的功能。 单击帖子标题的关键符号时,可以在动态数据之前和之后添加静态内容。

例如,如果您为某个帖子类别(例如“新闻”或“食谱”)创建模板,则可以将其添加到帖子标题中,如下所示:

如何自定义wordpress主题元素或标题模板20

这样,该数据将显示在该类别的每个帖子中。 我现在不会使用此功能,但认为这对您来说是重要的补充说明。

在帖子标题下,我们将插入 帖子 资料包 小部件 查看帖子的元数据。

如何自定义wordpress主题元素或标题模板21

这是我使用的设置:

如何自定义wordpress主题元素或标题模板22

另外,我使用样式选项使设计适合页面的其余部分。 确保您执行相同操作。

4.设置柱体

在标题之后,是时候创建页面的正文了。 如果您希望此部分的设计与标题不同,则需要设置一个新部分。 但是,我保持简单,因此不必这样做。

我们要插入的第一件事是特色图片。 为此,您可以将相同名称的小部件放置在页面上已经存在的内容下。

如何自定义wordpress主题元素或标题模板23

我基本上没有更改任何设置,只保留了所有内容。

然后是时候发布内容了。 这里也有一个相应的块。

如何自定义wordpress主题元素或标题模板24
您会注意到,对于特色图片和帖子内容,Elementor会自动提取网站上已有的内容。 对所需的新块的设计进行任何调整,例如,使用印刷设置。

除此之外,仅此而已。 这里没有太多工作要做,因此我们可以继续进行最后一部分。

5.配置页脚

在这种情况下,我们希望页脚显示作者的个人资料,共享选项和读者评论。 为此,首先,我们需要创建一个包含两列的新部分。 要为作者个人资料创建更多空间,可以将其设置为66.33布局。

如何自定义wordpress主题元素或标题模板25

之后放置小部件 作者箱 在左侧部分。

如何自定义wordpress主题元素或标题模板26

确保自定义样式以适合您的需求。 我添加了一些背景色,并略微调整了版式设置。

之后,是时候在右侧添加“共享按钮”块了。

如何自定义wordpress主题元素或标题模板27

您可以在上面的屏幕截图中看到我的设置。

之后,剩下的就是在每一列的下方再创建一个部分,然后将“张贴评论”小部件拖放到其中。

如何自定义wordpress主题元素或标题模板28

(顺便说一句,如果找不到这些小部件中的任何一个,只需使用搜索功能即可)。

如何自定义wordpress主题元素或标题模板29

对您认为有必要的评论部分进行任何调整(我照原样保留了),您可以开始发表了。 这是完成的设计:

如何自定义wordpress主题元素或标题模板30

自定义存档模板

1.配置您的WordPress存档模板

到目前为止,您已经知道创建新模型的解决方案。 唯一的区别是在这种情况下,您将选择 档案 作为模型类型。

如何自定义wordpress主题元素或标题模板31

之后,像往常一样,您可以选择许多块,也可以从头开始创建自己的模型。 但是,对于存档,您大约只有两个 小部件 Elementor仍然很重要。

2.定义档案的标题

我要谈的第一块是档案标题 档案名称.

如何自定义wordpress主题元素或标题模板32

除了下面的常规设置 风格和高级,当您点击下面的键符号时,您会找到一个重要的选项 标题。

如何自定义wordpress主题元素或标题模板33

在这里,您可以启用和禁用 Elementor 是否在页面上显示存档类型,就像它下面的作者:下面的部分一样。 这通过下面的按钮发生 包含上下文

顺便说一句,您可以像往常一样使用预览设置(“眼睛符号”>“设置”)预览不同的档案。 这样,您可以查看独特类别,标签,作者等的设计。 记在心上。

3.使用档案出版物块

存档的第二个重要小部件是存档帖子。 这样一来,所有属于任何档案的帖子都将汇集到一个页面上。 当选择模板时,它们已经存在,但是您也可以使用此块轻松地自己添加它们。

如何自定义wordpress主题元素或标题模板34

让我们看一下它提供的用于定制存档页面的选项:

  • 皮肤 -选择以经典或卡片样式设计显示您的帖子。
  • -确定显示您的帖子的列数。
  • 显示图片 -激活存档页面上的特色图像
  • 石工 - 显示或不显示砖石设计的项目。
  • 图像大小 -Elementor图像的大小应在存档页面上使用。
  • 标题 -是否要显示帖子标题?
  • 标题HTML标签 -如果是这样,应该在其周围包裹什么HTML标签?
  • 摘抄 -包括您的帖子摘录或仅显示标题。
  • 摘录长度 -确定提取物的长度。
  • 元数据 -定义可供访客使用的帖子元数据。
  • 之间的分隔符 -元数据信息之间的分隔符。
  • 了解更多 -包括“更多”链接,是还是否?
  • 徽章 -允许您向帖子添加更多信息,例如类别和标签。
  • 分类徽章 -在这里您可以决定要包含哪些信息。
  • 头像 - 有了这个,您可以更改文章作者的个人资料图片

除了上述内容,您还有其他选择。 下 分页 您可以定义如何处理归档分页。 例如,如何显示它,要包括的页面数以及文本的对齐方式。

enfin, 高级 允许您设置在访问者登陆空档案时显示的消息。 其他一切都应该很熟悉。 请注意,样式选项会根据您选择的皮肤而变化。

4.控制每个档案的出版物数量

关于存档模板的快速说明。 要更改在归档文件(或博客页面)中显示的帖子数量,您需要在WordPress下 设置>阅读。 

如何自定义wordpress主题元素或标题模板35

在这里,只需输入您希望访客看到的帖子数。

个性化 轻便 WordPress主题与Elementor

自定义 WordPress 主题是许多专业人士的生计。 尽管这通常涉及对文件进行大量编码和编辑,但对于 Elementor,这不再是必需的。

如您在上面看到的,该插件是一个成熟的WordPress主题编辑器。 它允许您从其用户界面自定义它的每个部分。 您可以编辑网站的页眉,页脚,页面和帖子模板,存档模板等。

使用动态内容并预览网站的任何部分的能力,您可以实施所有流行的自定义

简而言之,Elementor可以轻松自定义您的WordPress主题。 您无需费力地对数十个文件和数百行代码进行更改,而是可以在一处快速完成所有操作。

立即获取Elementor Pro!

结论

就在那里! 本文就是这样,向您展示如何使用 Page Builder Elementor 自定义 WordPress 主题。 如果您对如何到达那里有任何疑虑,请告知我们 评论.

但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

但与此同时, 在您不同的社交网络上分享此文章.

...