晋城做网络：如何用Divi建立一个理发店网站

每个理发店都需要一个漂亮的网站。随着Divi的力量在你身后(和那些美妙的免费Divi布局包)，你可以轻松地创建一个网站，任何理发师都会自豪。

今天，晋城做网络将向大家展示如何使用Divi为理发店建立一个网站。我会从咖啡店的布局包开始。我这么做有几个原因：

1。布局提供了一个很好的配色方案，适合理发店。

2。页面布局符合理发店网站的要求。

例如，大多数理发店提供产品，所以商店页面是一个很好的包含。菜单布局可以很容易地变成一个服务页面，列出所有不同类型的理发服务。我喜欢把这个“酿造指南”变成一个过程页面，让你体验“完美”的理发体验。

偷窥

本教程需要什么？

1.已安装并激活divi主题。

2.咖啡店布局包导入你的Divi图书馆。您可以选择任何您真正想要的布局，但为了本教程，我将使用咖啡店布局，因此我们有一个工作示例。我相信很快就会有一个理发店的布局，这会让事情变得更容易 .

3.图片-我将使用来自Shutterstock的照片和一些从其他布局包拍摄的图片。当建立你自己的理发店网站时，确保你选择高质量的照片，与正确的尺寸将容纳它(即背景图像应至少为1920×1080)。你也可以看看这个使用Divi图像的最终指南。如果你在寻找一种免费的股票图片解决方案，请访问unspash.com。

确定理发店网站需要什么

要为理发店建立一个有效的网站，至少应包括以下内容(显然取决于理发店)：

1.联络资料(包括联络表格、工作时间、地址及电话号码)

2.在线约会日程安排或至少有关如何安排约会的信息。

3.价格

4.推荐信

5.工作人员信息

6.公司及历史信息

7.网上商店或提供的产品

8.很棒的照片(拍摄前后的照片，公司位置/建筑的照片，员工在行动中的照片，以及令人惊叹的高质量理发的一般照片)。

有了这个总清单来指导我们，我们可以开始定制我们的布局，包括这些元素，并有效地组织起来。

使用新布局创建页面

对于这个理发店网站，我将构建4页使用页面布局从咖啡店布局包。下面是包含我为每个页面使用的布局的页面列表。

1.首页-咖啡厅落地

2.联系页面-咖啡店联系人

3.预约网页-咖啡店博客

4.咖啡厅-咖啡厅

此时，您将需要创建4页并为每个页面导入相应的布局。

创建主菜单

现在，您需要创建一个主菜单作为新站点的导航。请确保将4页添加到菜单中。

设置默认调色板

转到Divi>主题选项，并在默认调色板中添加以下颜色：

#1d2528

#3d3a35

#dca 47d

尽管我真的很想在教程中使用这一点，但当您对自己的理发店站点进行更多的自定义时，您稍后会感谢我，特别是当您必须创建布局中没有找到的新内容时。

添加您的全球重音颜色

转到Divi>主题定制程序>常规设置>布局设置。然后将全局重音颜色更改为：

#dca 47d

此颜色将应用于超过20个位置通过您的主题(一些地方，您可能永远看不到)，但由于这是主题重音颜色的布局，它是完美的，因为添加此颜色，以更新链接和图标的默认颜色(至少)。

发布主题自定义程序设置并刷新页面，以确保这些更改生效。

晋城做网络更新主题定制程序中的排版设置

即使您的布局在模块级别具有自定义排版设置，了解布局字体是什么非常重要，这样您就可以将它们包含在主题自定义程序中的默认排版设置中。这是必要的，以匹配整个Divi主题使用的字体(在您的新布局之外)与您的布局中使用的字体组合。这也将确保您在创建新模块时添加的任何其他文本都与站点匹配。

转到Divi>主题定制程序>常规设置>排版，并更新以下内容：

正文大小：18 px

身高：1.8米

标题字体大小：42 px；

标题出租间距：2 PX

航向高度：1.5厘米

标题字体样式：TT

标题字体：Oswald

身体字体：Nunito

标题文本颜色：#333333

自定义主菜单栏

此时，您可以继续并确保您的主菜单栏设计正确。有许多不同的方式，我们可以定制菜单的方式，以符合这个布局，但现在我要做的是更新我的文本大小。

从主题定制器转到头&导航>主菜单栏，并更新以下内容：

文本大小：18 px

字体样式：粗体(B)，大写(TT)

您还应该注意，默认的正文文本已经添加为菜单文本的字体。此外，活动链接颜色，下拉菜单线颜色，和汉堡包菜单图标在移动上都自动继承了全球重音颜色。

这是为你的网站的初始设置做的。

如果您需要提醒您如何设置布局，检查这些步骤.

为您的理发店网站选择在线预约计划程序

根据我在这篇文章发表时的研究，我对从免费WordPress插件到昂贵的SaaS公司的众多选择感到有点不知所措。

好消息是，他们中的许多人似乎运作良好(至少我尝试过的那些)。因此，如果金钱是一个问题，开始尝试一些免费的WordPress插件，并努力工作，直到你有了你想要的功能和设计在一个在线预订服务为你的网站。

退房的一个免费选项是简单约会WordPress插件，似乎迎合了Barbershop类型的约会，并有扩展集成个人日历和支付网关。

Calendly也有一个免费的选择，但你将不得不升级，以解锁某些功能，如多个事件类型和在线支付。我喜欢Calendly的干净和简单的UI。它很容易使用，我肯定能看出它在理发店很好用。

vcita对于您的业务来说是一个很棒的全合一解决方案，它超出了调度的范围，基本上可以处理您抛出的任何东西(比如与Quickbook集成)。这里有一个更多的vcita的详细分类.

针灸计划可能是我最喜欢的功能之一，因为所有强大的调度功能，但我必须承认，有一点学习曲线。

正方形是一种方便的软件，它可以在一个系统中预订约会、接受付款。我的理发师实际上使用这个系统，我必须承认它工作得很好(至少从客户的角度来看是这样)。你可以使用磁条阅读器，它可以连接到你的iPad上，让你在实体商店里有一个简单的结账过程。

如果您承诺在您的理发店网站上提供在线预订能力，我的建议将是与一个非常可靠和易于使用的。如果你找到了最适合你的生意，那么成本在这一点上就不重要了。拥有一个适用于您的业务的自动预订系统比每月为预订插件或软件支付的费用要高得多。

优化主页

对于主页，我绝对希望有一个好看的标题与一个伟大的外观背景图像。这为网站的其他部分设置了基调。跳出框，登陆页有一个很好的外观标题。所以我只需要更新图片和内容来适合理发店。

我将标题下的部分转换为显示所提供的服务和价格的部分，以及CTA预订约会。

我去掉了“我们的故事”部分下的视频，用一小块文字保持了它的简单。我从上面的“服务”部分复制并粘贴了一个按钮，以防万一我想链接到一个单独的About页面。

我还定制了几个特色部分，以促进网上商店和商店的气氛。

我想在主页上展示一个“我们的团队”部分，于是我开始从咖啡店拿起关于布局的信息。为了做到这一点，我实际上增加了咖啡厅的布局到我的主页，并删除了所有的部分，除了我想要的。这是怎么做的。

在VisualBuilder中打开“设置”菜单，然后选择“从库加载”，然后选择“从库添加”选项卡。取消选择替换现有内容的选项(这将新布局作为附加内容添加到当前布局的底部)。然后从列表中选择关于布局的咖啡店。

现在，您需要做的就是从主页内容下面导入的About页面内容中删除所有您不想要的内容(在本例中，除了我们的团队部分)。然后剪切并粘贴(或拖动)我们的团队部分，就在页脚内容部分之上。

我保留了页脚联系信息的布局，我认为它在每一页上都工作得很好。我唯一改变的是部分背景图像。

以下是我修改后的主页：

优化商店页面

咖啡店布局已经准备好将特色产品部署到您的页面上的商店模块。您所需要做的就是添加新产品到您的WooCommerce商店。然后重新加载并看着它们出现在您的页面上。

很简单。

当然，您将需要添加一个新的背景图像到您的页眉和页脚secion。

不要忘记从WooCommerce中选择此页面作为默认的Shop页面。要做到这一点，请转到WooCommerce>Settings>Products(选项卡)>Display，并从“Shop Page”旁边的下拉菜单中选择此页面。

这是我们的最后一页设计：

优化联系人页面

除了不断更新这些背景图片和颜色外，我还添加了一个CTA在线预约。如果您不想要一个单独的预订页面，您也可以选择在这里包括一个嵌入式预订表单。

此外，地图需要一个GoogleAPI才能工作，所以不要忘记在主题选项中处理这个问题。您还需要集成您的电子邮件服务提供商电子邮件列表到您的电子邮件选项单。

创建“预约书”页面

不要让您的预订按钮重定向到第三方网站，继续前进，并将您的表单嵌入到您的网站的网页上。这是保持用户体验和设计始终一致的一个很好的方法。大多数(如果不是全部)约会调度解决方案都提供了嵌入代码。

下面是一个使用嵌入到代码模块中的acuityScheduler I构建的约会调度表单的示例。我所做的就是删除页眉和页脚上的背景图像，删除博客模块，在博客模块的位置添加一个代码模块，然后添加针灸Scheduling提供的短代码。

这是结果。

最后思想

创建一个新的网站为理发店是一个大大减少当你知道你需要什么，你有权力的Divi(和Divi布局)在你的支配。本教程的目的是为您提供一些关于如何使Barbershop布局良好的技巧，以及关于如何正确设置新布局以启动设计过程的一些一般指导方针。我本可以更详细地介绍在对4页进行自定义时使用的具体步骤和设置，但是由于你们中的许多人会为您的Barbershop选择不同的布局，所以我认为更概念性的方法更适合这篇文章。

欢迎与我们分享您自己的Divi Barbershop网站。我们都会从这个灵感中受益。

晋城做网络期待着在评论中听到你的意见。

干杯!