使用Elementor pro可以完全自定义WordPress网站主题，制作页眉、页脚、文章列表、文章详情、产品列表、产品详情等页面，它还能够让你抛开那些厚重的主题，以及繁琐的主题设置，只需要安装默认主题或者Elementor自带的Hello Elementor主题，实现提升网站速度的效果。
为避免发生一些不兼容的情况，推荐使用Hello Elementor主题或者Astra主题（免费版即可）！Elementor pro最低的售价是$49/1个授权每年。
第一步：安装激活Elementor pro
购买之后，你可以下载Elementor pro安装包，通过上传插件的方式安装激活插件，然后在License中连接你账号，激活授权。
连接之后的激活状态
在使用Elementor Pro之前需要安装激活Elementor基础插件，基础插件直接在先安装即可。
第二步：站点设置
站点设置功能对应主题设置功能。站点设置在Elementor页面编辑器编辑状态中进入。
2.1 Global Colors（全局颜色）
全局颜色中，你可以设置4个系统颜色，这类似于主题中的风格颜色设置。
同时我们还可以添加自定义的颜色到色板中，这样我们在设置元素颜色的时候可以进行选择。
设置全局颜色的好处就是，当我们需要修改全网站全局的某个颜色，我们只需要在这里对这个颜色进行修改，不需要再去找对应的元素一个一个的修改。
点击颜色框即可修改颜色。
设置之后记得点击下放的【update】按钮，否则不生效。
设置之后，如何使用？
在元素样式中，设置颜色的地方，点击【地球】的标志，弹出拉下，选择全局颜色即可。
下拉中出现的Theme color是主题中设置的颜色，不用管他。如果你使用了它，需要全局修改的话，需要去主题里面修改对应的颜色，如果你已经使用了Elementor Pro自定义主题，就可以不使用主题的颜色。
当然，你也可以单独为元素设置颜色，不使用全局颜色。
2.2 Global Fonts（全局字体）
和全局颜色一样，是针对字体的设置，提供了4个系统字体，也可以添加自定义字体。应用到元素之后，需要全局修改的话，直接在这里修改即可。
Fallback Font Family是当浏览器不支持我们设置的字体时，显示的字体，该设置默认即可。
通过点击每个字体的笔头标志，可以修改字体的样式，包含字体、字体大小、字体粗细、大小写转换等等。
设置之后，如何使用？
在元素样式中，设置字体的地方，点击【地球】的标志，弹出拉下，选择全局字体即可。
当然，你也可以直接点击【笔头】标志，单独为这个元素设置字体。
2.3 Typography（排版）
排版里面可以设置body（正文）的字体、颜色以及段落距离，Link（链接）以及H标签的字体、颜色设置。这里的颜色和字体可以选择之前做好的全局颜色和全局字体。
H标签最好重新做一下字体大小和粗细的设置。以便用户阅读内容。
为了避免主题里面的排版设置对Elementor排版设置的影响，需要关闭默认颜色和字体设置。
设置好之后，如何使用？
设置好之后，在Elementor页面编辑中，使用的Text Editor元素会默认使用body设置的样式，其中如果在Text Editor中给文本加了链接的，链接的样式将使用Link设置的样式。Heading元素的样式则沿用这里的H1~H6设置好的样式。
如果H标签的颜色没有继承这里的设置，就在H标签元素中的颜色设置里面选一个全局设置即可。
这样就不需要针对每个H标签进行设置样式。
2.4 Buttons（按钮）
Buttons是针对按钮做的全局样式，设置之后按钮元素或者包含按钮的元素将会默认使用这里的全局样式。
其设置内容和Button元素差不多，摄设按钮的字体，颜色，边距等内容
设置完成之后，在Elementor页面编辑中拖拽的Button元素，将会默认是这里设置的样式，后期我们做风格调整的时候，只需要修改这一处就可以，不需要再针对单个Button元素逐个进行修改。
但如果你对某个button元素做了单独的设置，那么后期的全局修改则对其不再生效，你需要再手动修改这个button元素。
可以通过恢复按钮改回默认设置，则全局设置依然生效。
2.5 Images（图片设置）
针对图片做的全局设置，方法和效果Button类似。参照上文的Button设置理解即可。
设置内容比较简单，通常也不需要进行设置，这里不再做详细赘述。
2.6 Form Fields（表单字段）
表单字段时针对Form表单的字段做的全局样式设置，设置之后，你在网站中使用的Form元素中的字段默认的样式就是这里设置的样式。
设置的内容比较有限，我们在做表单过程中还需要设置更多的样式，就需要在单独在表单元素里面去进行设置。
我通常的做法是整个网站只用一个Form表单，通过创建一个Section模板，将Form表单放在整个模板里面，然后在不同的页面调用这个模板。这样整个网站只需要维护一个Form表单即可。
2.7 Site Identity（站点标识）
站点标识里面设置网站的名称、描述以及Logo和图标。
设置之后保存，然后刷新页面生效。
2.8 Background（背景）
这里可以设置网站的背景颜色
话可以单独设置手机浏览器的背景颜色
2.8 Layout（布局）
这里可以修改网站的布局，包括内容的宽度，移动端断点等。
网站布局设置，内容宽度可以根据自己的需求设置，希望内容在屏幕中宽一点就数值就设置大一点。，最小不低于1140px。
元素之间的间距 默认是20px，你也可以根据自己的需求改变。
其他的选项默认即可。
移动端断点设置，默认是手机和平板端，断点也默认即可。
2.9 Lightbox（灯箱）
灯箱是图片元素中的一个图片展示效果。
灯箱底部的标题可以设置不显示（None），或者显示为图片的不同属性，例如Titile、Caption、Alt、Description，这些根据你自己的需求设置即可。
Description默认设置为图片的Description，如果图片本身没有设置Description，那么就不显示内容。
Background Color设置灯箱的背景。
UI Color和UI Hover Color设置灯箱右上角的放大、全屏、关闭等按钮的颜色。
Text Color设置底部标题和描述字体的颜色，如果不设置则默认使用UI Color设置的颜色。
Toolbar Icons Size 设置灯箱右上角的放大、全屏、关闭等按钮的大小。
Navigation Icons Size 设置相册中翻页图标的大小。
当图片元素的Link选择【media file】时，就可以通过灯箱效果显示图片，选择【default】沿用我们的全局设置样式。
另外Gallery（相册）元素的【Click Action】也可以设置为【linghtbox】模式，这样鼠标点击相册时就会弹出灯箱效果展示图片。
灯箱效果如下：
2.10 page Transitions(页面转换效果)
可以设置页面加载的动画效果
设置预加载效果，不同的类型你可以选择设置看下效果，然后选择一个你觉得合适的。
下面是设置好的效果：
2.11 Custom CSS（自定义样式）
这个功能很少会用，除非你需要给某些元素添加手写的CSS样式，可以在这里写。
直接将样式卸载这里面就可以，发布之后生效。
2.12 WooCommerce
这个设置，只有在安装了WooCommerce插件之后才会有，如果是B2B外贸网站可以不用这些。
这里就是这是电子商城的一些默认页面以及通知消息的设置，和WooCommerce设置里面是一样的效果。
第三步：自定义WordPress网站主题（Theme builder）
通过Elementor Theme builder功能可以自定义网站的Header、Footer、Single Post、Archive、Single Product、Product Archive、404等页面模板，让网站的显示布局按照你希望的效果进行展示。
3.1 Header（页眉）
页眉就是网站的顶部的内容，通常主题会预先设置好几种风格布局，你可以在主题设置中去选择，或者你可以在主题的框架下自定义。很多设置项需要进行配置。
通过Elementor Pro我们可以完全自定义一个Header。详细的制作过程可以查看视频：
完整的Header制作教程–>> 《如何用Elementor Pro制作网站Header？》
3.2 Footer（页脚）
页脚制作视频教程
完整的Footer制作教程–>> 《如何用Elementor Pro制作网站Footer？》
3.3 Archive（文章归档页面）
归档页面包含了文章博客的分类页面、标签页面、日期归档页面、作者归档页面、搜索结果页面等，通常我们会做一个模板来展示这些归档页面，当然也可以针对不同的归档类型制作不同的模板来展示内容。这个取决于你对网站的设置。
下面是如何利用Elementor Pro制作文章博客归档页面的视频教程。
3.4 Single Post（博客文章详情页）
第四步：定义B2B产品页面
这部分内容可以参考本站的《WordPress B2B外贸网站产品管理终极指南（Elementor Pro+woocommerce）2022》
这里面我针对使用Elementor Pro制作B2B 产品页面介绍的很详细。
最后
以上就是使用Elementor Pro自定义B2B外贸网站主题的全部内容，主要提供的是一种使用Elementor Pro做网站的思路，让我们可以抛开一些庞重的付费的主题，来实现网站搭建。
