什么是域名？譬如loyseo.com便是我的网站的域名。
为了让您的客户访问域名就可以打开您的网站，您需要：
域名取名要点
基于以上条件，再看下面的几条：
下方我录了一个教程，包含：域名取名、在Cloudflare注册域名并解析、绑定到网站，其中网站是放在Cloudways主机的，下文会教如何开通Cloudways主机。
注意一下，今年有一位客户反馈自己的cloudflare账号被误K，导致域名找回困难，cloudflare的客服时效性也比较坑，虽然客服说是误判，但由于时差原因提交资料不及时，直接就被删号处理了，虽然客服说域名可以恢复到新账户中，但效率极低。所以还是建议大家曲折一点，在阿里云或是namesilo注册域名。
域名买好后，就可以来购买主机了。
好啦~接下来我们便可以开始安装Astra主题，开始制作网页啦~
1.进入WordPress后台的Appearance》themes页面，点击AddNew按钮
2.在添加主题页面中，搜索Astra，找到对应主题后，点击Install按钮
3.安装完astra后，点击Activate激活主题，接下来我们导入网站模板
新手尝试时，可以先用Astra主题免费版，当你觉得功能不够用了，可以再考虑购买付费版。
Astra主题付费版=Astra主题+付费插件，这个主题本身是免费的，通过几个付费插件来扩展付费的高级功能。
如果你决定使用免费版的StarterTemplates插件，那么请进入Astra》Dashboard页面，找到页面中的startertemplates标签页，点击下图所示的install&activate按钮，安装并启用免费的导入模板的插件。（付费版用户不用装这个插件了哈）
安装并激活完成后，会跳转到如下页面，我们不用AI功能，而是直接用经典模板导入功能，请点击下图中右侧的buildwithtemplates。（为什么不用AI功能呢？因为你它对你的要求更高，你的想法是否能转换成AI可以理解的需求文案？你需要不断调教你的文案，甚至要学习如何写作AI的输入文案，这在建站入门阶段就跑题了，你不如从现成的模板入手去学习如何建站，等你熟练了，再试试AI功能。）
接下来，我们就来到了挑选模板的界面，我们首先要做的是，明确模板所用的页面编辑器，因为编辑器之间是互斥的，也就是说：如果你选择了下图中的elementor编辑器的模板，那么这个模板导入的页面就主要是用Elementor做的，这些用elementor做的页面，你无法用blockeditor（也就是wordpress自带的古腾堡编辑器）或者beaverbuilder去编辑。
有一些同学，在导入模板时，没有主动去选择页面编辑器，而默认的编辑器是blockeditor，当导入模板后，他们又想采用elementor去编辑，结果呢，发现这些模板内容全部在elementor的一个container中，并且是一个文本元素中，无法单独去编辑每个区域的内容，原因就是因为没有选择模板所用的编辑器。
接下来我们看到了模板列表，其中标记premium的就是付费版的模板，请根据你的喜好选择模板，我们以下图中的organicstore为讲解示例，这是一个电商的网站模板，我们会将它改造为B2B外贸网站。
选中模板后，你可以上传logo、选择字体与配色方案，如果现在还拿不定主意，以后也可以再改的，点击按钮继续。设置好后，点击continue
若是你以后想更换模板，为了不引起内容混乱，再次导入时，图中会提供一个选项：maintainprevious/olddata（即保留当前模板），你可以不选它，以便删除已有模板的内容和设置。
接下来我们静静等待网站导入，不要关闭网页哦。
导入完成后将看到成功提示。
导入完成后，我们查看一下网站，大功告成。
若是导入的进度条卡住不动，可重新再导入操作一次。
若是导入失败，系统会给与原因提示及解决办法。
若是导入成功，但网站依旧不是模板的样子，那么请二次导入试一试。
若是导入成功，但是导航菜单和后台页面中出现很多重复内容，那也可以尝试重新导入试试。
此外，部分服务器（譬如WPXhosting）因为安全策略原因，不允许做导入动作，或是导入完成后，依旧还是导入前的老样子，此时，你就需要联系主机商的客服来解决了。
由于过多的插件会影响网站的速度和安全，所以用不上的插件，就请前往plugins/插件的列表中进行禁用并删除。
那如何判断某个插件是否可以删除呢？我提供一个简单又普适性的思路。
请先浏览一下你的网站，首页、公司介绍、联系我们、产品列表、产品详情、博客列表、博客详情，对他们有个大体的印象了，
此时，我们挨个禁用可能不必要的插件，先禁用第一个，然后再去浏览一下页面，看看有无内容或功能缺失，
如果没有缺失，那说明这个插件可以基本判定无用；
如果有缺失，且你认为缺失的部分无关紧要，那么也可以基本判定这个插件是无用的；
如果有缺失，且你认为缺失的部分是你需要的，那么这个插件就要保留哦。
那更深入一点的解决方法是：研究这个插件的官网，了解这个插件的功能，翻看插件的官方文档，以便进一步判断这个插件的必要性。
接下来我们要调整网站的页头导航，大体效果如下图所示（注：其中菜单栏目仅供学习，你应该根据自己站点情况自行配置，我在后文演示中所配置的菜单项会因情节需要有所出入）
网站模板导入完成后，我们开始设置网站的logo、icon（显示在浏览器页卡中的小图标）、网站名称（sitetitle）及标语（tagline）。
如下图所示，在Astra>dashboard页面中，点击网站标识进入
进入后将看到下图，我们依次：
针对最新版本的Astra：进入Appearance》Customize》HeaderBuilder中，删除cart、account，然后加入search图标。
接下来按动图所示，将主菜单（primarymenu）挪到中间栏，并在右侧栏里加上搜索图标
在上图中，我们能看到headbuilder有三行，我们目前编辑的是中间行（也就是主导航），那接下来，我们在它的上方增加顶部导航
如下图所示，添加social到第一行header的右侧
再在第一行左侧点击加号添加HTML
接下来，点击HTML1，在左侧的编辑框里，切换到Text模式，输入：
接下来我们去配置Social，点击之前添加的Social，在左侧能看到已经添加了3个示例，你可以在下图①处选择其他社交媒体，然后点击按钮添加，也可以点击已有的图标譬如facebook，在url中填入你的Facebook主页地址。如果你需要更换图标，在下图③处点击即可展开图标面板。
当添加完图标后，你还可以设计它们的样式，如下图所示，切换到design标签，然后你可以配置图标的大小、图标之间的间距、图标与背景之间的间隙、图标的圆角弧度、图标和背景的颜色&鼠标悬停色。
此外，在上图的右下角，我们能看到三个图标：电脑、平板、手机，请点击平板或手机，在平板和手机上的header是独立制作的，请自行制作一下哦。
最后，我们给顶部导航设置一个底色。（主导航设置的方式也是同理）
如果你想给顶部导航或主导航设置一下高度，按下图所示操作
如果你调整了高度后，导航的高度还是觉得高，那很可能是内容太高，撑住了，譬如，你可以试试将logo的宽度设置小一点，然后logo就会缩小，导航就自然变矮了。
在完成上面的工作后，我们要修改主菜单（primarymenu）了，现在我们要去后台的菜单管理处进行内容的修改。
部分插件此处未提及，在下文中介绍到对应功能，再安装即可。下文我们会逐一介绍这些插件的使用教程以及用处。
本教程选的模板中缺少了联系表单，我们要将它补充完整，请按下面的教程逐步完成操作。
接下来，我们将表单放入到联系我们页面中
在网站allpages页面中，找到contact页面，点击editwithelementor。如果你的页面下方找不到editwithelementor，那么请直接点击edit，进入后，点击按钮editwithelementor。
在页面左侧的工具栏中，输入ninja搜索，将图中标记有EA的ninjaforms元素块，左键按住拖拽到右侧页面中的目标位置。
如果你没安装EssentialAddonsforElementor插件，是看不到这个元素块的。
如果你安装了还看不到元素块，那么，在wordpress后台找到essentialaddons菜单，来到elements菜单下，通过ctrl+f的页面搜索技能，输入ninja找到ninjaform的元素，点击它右边的开关按钮，然后回到页面顶部点击保存按钮，这个元素就能在编辑页面时找到了。
为什么有这种元素的开关功能呢，它的作用是为了提升页面速度，因为用不到的元素，如果还摆在页面的css、js中，无疑会增加页面的体积，这也是速度优化的一项工作，部分优秀的插件，能够提供这个能力，当然，我也发现有些插件提供了“表面上”的这个能力，虽然有开关，但是css并未做元素分离，也就是不论你开关与否，css的体积都不会受到影响。
接下来，我们回到页面中，点击ninjaform元素，在左侧面板中，选择之前制作的表单，Ninjaforms元素块在Elementor中编辑时会出现一直在加载的情况，我目前也还没找到解决方案，但实际他在前台是能够正常显示的，所以此问题暂时搁置。
我们点击页面左下角的update的发布页面，并预览它，如下图所示，表单已经成功显示。
我们接下要修改表单的样式，譬如：隐藏表单标题，修改字段标题的粗细，修改输入框内部的颜色、修改提交按钮的样式。
表单样式修改完之后是下图所示效果，接下来我们逐一操作。
我们依旧还在Elementor编辑联系我们页面中，左键点选刚才在页面中添加的ninjafroms表单，如下图所示，在左侧的工具栏中，将Title开关关闭，保存一下页面去预览一下标题是否隐藏成功，如果失败，那么继续下一步。
在表单标题的下方有一段话：“Fieldsmarkedwithan*arerequired”，这个可以说是常识了，无需赘述，所以我们将这段话隐藏，需要用到自定义CSS功能。
1.进入appearance》customize页面
2.点击底部的additionalcss
3.添加如下代码后，点击右上角的publish按钮即可。
继续，在Style标签页中，找到Lables设置字段标题的字体粗细（weight）为400，原来的字体比较粗，改为400会细一些。
继续，在Style标签页中，找到submitbutton按钮，开始设置
继续选择hover标签，设置鼠标悬停于按钮时的文本颜色（textcolor）与按钮背景颜色（backgroundcolor）
于是，我又重新修改了一下按钮的设置，如下图所示，改完后保存、换个未登陆后台的浏览器查看，一切正常了。
接下来进入具体操作，提供两种解决方案，
一种是用Elementor制作博客页面，这种方法复杂一些，不过能学到元素的使用方法；
另一种是用主题自带的博客列表模板，这种方法简单，这两种方法你都看一下，因为在第二种方法里介绍了博客详情页的显示项与侧边栏的配置。
这个制作方法没有侧边栏，如果你需要展示侧边栏，请用下文的第二种方法。
为了保持设计的一致性，我们从aboutus页面复制标题模块到Blog中
请使用Elementor编辑aboutus页面，如下图所示，右键点选模块，再点击copy复制标题模块
然后回到Elementor编辑的博客页面，右键粘贴（paste）这个模块
粘贴完成后，我们发现跟about页面不一样，用elementor编辑about页面时，顶部未显示导航，因为about页面设置的是透明导航，我们也将blog页面同样设置一下。
进入后台的allpages页面，找到blog，点击Edit。
按下图所示，按序号顺序操作，将transparentheader的设置选择为Enabled，最后save页面即可。
接下来继续用Elementor编辑Blog页面，你可以保存后刷新一下页面，顶部的导航将消失，这表示透明导航生效了。
先修改一下标题，改为Blog，左键点选元素后，在左侧工具栏中将出现这个元素的设置项，如下图所示。
也可以对readmore按钮的文案进行默认颜色、悬停色、字体大小、粗细的配置。
我们开启了showloadmore的按钮，也需要给它配置样式
你可以尝试一下每个配置的功能，其中若看到配置项名称右侧显示了电脑图标，说明它可以在不同设备上选择不同的设置，这是为了让网站能够灵活的适应电脑、平板、手机设备，也就是响应式设计。
最终，你会得到下图这样的博客页面。
免费版的Astra也提供了基础的博客页面设置功能的
接下来我们去设置一下博客页面，请进入appearance》astraoptions页面。
然后，如下图所示，激活这些配置，其中灰色底纹的部分无法激活，因为这些是与第三方插件配套的，譬如learndash是教程插件，我们做外贸网站是不必须的，自然不需要激活他们。
不论你是免费还是付费用户，接下来，可以直接在astraoptions中找到bloglayouts进入
免费版和付费版的Astra的Blog配置功能不一样，我们依次讲解。
如果你使用的是免费版，我为博客页面配置了如下示例，你可以按照下方的配置一比一设置。
接下来我们看一下Blog页面的具体配置。
点击左图中的blogtitlearea可进入下图的配置界面，用于配置页面标题栏部分
切换到Design页面，大部分设置保持默认即可，我们将back背景改个配色，因为默认的不大好看
如果你用的是付费版Astra，你将能看到更多的配置选项，下面提供一个配置示例。
接下来我们看一下具体配置
点击>前往设置，具体设置在右侧
接下来，我们看看具体的设置，如下
点击posttitlearea配置的>，进入下图，用于配置标题栏及其上方的图片banner
退出posttitlearea的配置，继续回到singlepost的配置界面，继续对照下面完成设置
其中comments的配置保持默认即可。
接下来，我们在singlepost的design界面中，设置outside为0。
设置过程中，记得随时点击顶部的publish按钮保存。
最后，记得将博客页面添加到网站菜单中哦~
这个模板本身已经提供了产品列表和产品详情页，并且已经默认给产品列表页添加了左侧侧边栏，而产品详情页是没有侧边栏的。
如果你要移除或更改产品列表页的侧边栏的位置，请来到Appearance>Customizing>WooCommerce>ProductCatalog页面，即可设置。同理，你也可以在Appearance>Customizing>WooCommerce>singleproduct页面配置产品详情页的侧边栏。
然后我们去设置sidebar的内容，如下图所示，在appearance>widgets中找到woocommercesidebar和productsidebar，前者用于产品列表页，后者用于产品详情页。
我们点击页面左上角的加号，能展开可用的widgets面板，找到你需要的，左键按住它，拖拽到你要放的sidebar里就可以了。
然后在astraoption配置中开启offcanvassidebar即可。
作为B2B外贸独立站，是不需要展示价格和加入购物车按钮的，我们只需要在发布产品时不填写价格即可，这样加入购物车按钮也不会出现。
目前产品页面没有询盘联系表单，我们需要借助插件CustomProductTabsforWooCommerce，先用它添加一个标签页，放入之前在Ninjaforms制作的联系表单的短代码（shortcode），然后在添加产品时加入这个标签页即可，具体操作步骤如下：
1.在网站后台找到customproducttabs菜单，进入后点击addtab
如下图所示，依次输入标题、名称，然后切换内容框到text模式，从ninjaforms的dashboard页面获取表单的shortcode，黏贴到tabcontent中，最后点击savetab即可。
然后我们去编辑一个示例的产品，给它添加这个询盘标签页。
进入网站后台，在allproducts页面任意选一个产品，点击edit按钮进入编辑
在编辑产品页面时，滚动页面到下图所示位置，进入customtabs标签页，点击addasavedtab
然后选择刚才添加的标签页即可。
如下图所示，标签页已经成功加到这个产品里了，我们在页面右上方找到update按钮，点它发布产品。
然后我们查看一下这个产品，能看到Enquiry询盘标签页已经成功加入了。
你需要添加自定义CSS
请按如下规则组织代码，代码中/**/部分是注释给你看的，你可以删除它；将代码添加到additionalcss中后，点击右上角的publish按钮即可。
由于上文中开启了astra主题的面包屑功能，但是它不能配置产品列表页面是否展示面包屑，如下图所示，出现了两个面包屑，如果是Astra付费版的用户，可以直接在appearance-customize-woocommerce-productcatalog中将displaybreadcrumb关闭即可隐藏面包屑。
如果使用Astra免费版的用户，可以用短代码的方式，将woocommerce自带的面包屑去掉；
/***Removethebreadcrumbs*/add_action('init','woo_remove_wc_breadcrumbs');functionwoo_remove_wc_breadcrumbs(){remove_action('woocommerce_before_main_content','woocommerce_breadcrumb',20,0);}去掉产品详情页面的多余面包屑产品详情页也多了一个面包屑，但这个可以在后台配置，不需要添加短代码。
进入后台appearance》customize，然后按照下图所示操作，进入woocommerce》singleproduct，选中disablebreadcrumb，点击publish保存即可。
上文提到的隐藏问题：产品首页的页面标题和菜单里的标题不一样，那是因为在设置菜单时，是可以修改标题的；但页面实际名称还是Shop。
我们进入allpages页面，找到shop页面，点击其下方的quickedit，可以快速修改页面的标题以及slug，都改为Products吧，保持一致。注：slug，你可以当做是url。
至此，一个满足常规使用的产品页面就完工啦，包括产品列表页、产品详情页。
细心的你可能发现我的页面上是有producttags，而你那儿可能没有，那你去修改一下几个产品，在快速编辑或者编辑产品页面的右侧都能找到标签，自己按需给产品添加标签吧，但注意哦，不要跟分类重复了。
请进入后台的allpages页面，如下图所示的情况，带有elementor标记的，都可以用elementor编辑页面，也就是能够可视化编辑页面内容。
用Elementor编辑页面的方法：点选要修改的内容，然后在左侧工具栏中设置内容、样式以及高级配置。我们依旧用一个视频来讲解页面内容编辑功能，视频中的模板与本文中的模板不一样，但方法是一样的。
你还可以看下方的Elementor编辑器的教程，了解更多细致的操作。
在免费版的Astra里是不提供页面上的返回顶部按钮的，如果你购买了付费版，安装AstraPro插件后，进入appearance》astraoptions界面，点击图中的activateall按钮激活所有高级模块就能启用返回顶部按钮了。
如果决定只用免费版Astra，那有如下两种方法：
在上文中我们已经介绍过主题设置的一部分功能，譬如侧边栏、面包屑。接下来我们讲解一些常用的Astra主题设置功能。
在appearance》astraoption页面，点击setcolors进入
进入页面后，点选basecolors菜单进入配置页面。
在basecolors页面，可以设置如下颜色：
使用Astra的全局文本排版设置，可以对全站的文本样式进行自定义。需要注意的是，如果你在Elementor中设置了某些元素的文本样式，那它将不会取用Astra主题中设置的文本样式。
功能入口：请点击菜单WordPress后台菜单：appearance》customize，进入后点击global》typography。在Astra免费版中，提供了如下图所示的两项配置：基础排版设置、标题设置。付费版Astra的配置功能更多一些。
当你在设置文本字体、字号、粗细等样式时，右侧界面中可及时预览页面效果，你还可以直接在页面点选需要预览的页面。
譬如下图所示，我框选了两处正文文本，也可以理解为基础文本，他们会取用此处的基础排版样式。而另外两处较大较粗的字体，是标题文本，标题文本通常比较突出，通常用在页面标题以及页面主要栏目标题。
上文中提到的标题文本（heading），在WordPress中分为6种——H1-H6，数值越大，标题层级越深，H1通常是页面的大标题。
功能入口：请点击菜单WordPress后台菜单：appearance》customize，进入后点击global》container。
布局可以针对页面、博客详情页、归档列表页、产品页面分别设置
功能入口：请点击菜单WordPress后台菜单：appearance》customize，进入后点击global》button。此处可以设置按钮的：
功能入口：请点击菜单WordPress后台菜单：appearance》customize，进入后点击Header》PrimaryHeader。
如下图所示，我将页头布局改为了上logo+下菜单布局，一共有三种布局，请按需调整。同时，还可以调整页头的宽度（width），它提供了contentwidth（与内容宽度保持一致）和fullwidth（全宽）选项。也能给页头添加底部边框，设置粗细（bottombordersize）以及颜色（bottombordercolor）。
此处的设置依旧是左侧修改后，右侧即时预览，你可以逐一调整测试，不点击右上角的Publish按钮都不会生效。你也可以点击publish按钮旁边的齿轮，它还提供保存草稿和定时发布的功能。
在左侧页面底部，还有设备图标按钮，点击不同的图标，在右侧可以预览不同设备上的网页效果。
在导入模板后，我们能看到导航的右侧有一个购物图标，你也可以将它更换为搜索图标或按钮。
功能入口：请点击菜单WordPress后台菜单：appearance》customize，进入后点击Header》PrimaryMenu。如下图所示，可以在lastiteminmenu中设置。
在lastiteminmenu下方，还有两个选项，你需要点击左下角切换到平板或手机模式，然后试用它们，用于控制这个元素的显示状态与显示位置。譬如下图，我便将搜索按钮收在了菜单内。
依旧在这个配置页面，你还能找到子菜单样式设置、移动端菜单按钮的样式设置。
请按照如下教程逐步操作
还有，我们在上文中已经做了一些很关键的速度优化的工作了。
其次，我们使用了Cloudflare为网站添加了免费的CDN，当然，如果经费充足，直接在Cloudways里开通付费的CloudflareCDN套餐，自然是能让网站更快一些。
接下来，我们还可以在网站层面做些什么呢？
完成上述内容后，站点可上线，开放收录吧、
进入设置》阅读（setting》reading），将建议搜索引擎不索引本站点去掉勾选，保存更改
然后进入GoogleSearchConsole，提交站点地图地址以助于加快收录。
站点地图地址可在RankMathSEO中获取
根据读者的咨询，我将一些细节问题及答案补充如下
通过添加自定义css.woocommerce-ordering{display:none}
.woocommerce-ordering{display:none}如何在首页展示我想要的产品如果你用的是免费版Astra，使用Elementor编辑首页，将产品模块替换成新的元素ProductGrid（EA）。
之前我们安装的EssentialAddonsforElementor插件中，提供了ProductGrid（EA）元素，使用它替换首页中已有的产品元素。
在ProductGrid中，如下图所示，在Productsetting中，按你的需要调整FilterBy，以及Order（排序）规则、并且可以指定产品所属的目录（productcategories）
其中，作为B2B站点，只有RencentProducts和FeaturedProducts我们能用上。RencentProducts表示最新产品，FeaturedProducts表示星标产品，在后台产品管理页面，将产品的星星点一下变实心就表示星标了。
备注：Bestsellingproducts表示热卖产品；saleproducts表示促销产品；topratedproducts表示最高评价产品；对于B2B站而言，不涉及销售，也就用不上这三个选项了。
安装并激活插件PremiumAddonsforElementor之后，请先创建banner的内容，如下图所示，在templates中addnew，模板类型一般选择setion。
进入页面后，你将能看到PremiumAddonsforElementor提供的模板入口（五角星），点击它你可以查看一些现成的模板，免费的可以直接导入，标记pro的需要付费。
如下图所示，我导入了一个banner
插入完成后，你可以按需修改内容素材，完成后点击左下角的publish按钮发布。
接下来用相同的办法创建第二个banner，你也可以不导入模板，自制一个banner，譬如最简单的是直接用image图片元素
记得将图片尺寸设置为full，将link设置为customurl，然后输入图片需要链接的页面。
接下来用Elementor编辑需要添加banner的页面，总左侧元素库找到premiumcarousel，将它拖拽到右侧页面中
然后按下图所示，选择template为刚才制作的两个banner。
上图中我们能看到banner两侧有空白，我们如下图所示，选择banner所在的setion，然后在左侧的style中，将contentwidth从box设置为full，这下banner两侧就没有空白了，但是四周还有细小的间隙，请继续往下看。
如下图所示操作，点选banner所在的column，然后在advanced标签页中，找到padding并设置为0，可以去掉banner周围的白色缝隙。
不建议设置为自动更新，因为插件更新还是可能会出错的，建议1~3个月手动更新一次，更新前记得备份网站，除了主机的备份以外，还可以用updraftplus备份，直接在wordpress后台备份，方便后续恢复，如果更新出错，还可以用备份进行还原。
当你用Elementor编辑SHOP或products页面时，出现下方图一的错误，那是因为这个页面在Woocommerce的设置中被选为商店页面（见下方图二），并且在页面管理中，也能看到它被标记为商店页面（见下方图三），此时，便不能用Elementor编辑，它是自动调用主题的模板的，如果你非要用Elementor编辑它，请先在Woocommerce的设置中，取消该页面作为商店页面。
大概率是的产品首页未被设置为商店页面。请在woocommerce的设置》常规中，按下图所示方式配置。
原因是在设置菜单最后一项图标时，选中了TakeLastItemOutsideMenu，如下图所示，去掉勾选即可恢复。
点赞
Bonnie是LOYSEO的创始人，在建站领域有着超过14年的经验，热爱能将想法变为现实的WordPress，更是Elementor的忠实用户~