如何以8个步骤设计餐厅网站[+免费模板]

餐厅网站通常展示预订信息和位置，菜单，员工bios，以及帮助餐厅与客户沟通。像WordPress这样的网站建设者提供模板，可以快速，轻松地设计专业餐厅网站而无需编码技能，使其成为网站设计经验不足的餐馆老板的理想选择。

幸运的是，餐馆网站并不昂贵，而且相当容易创建。使用Bluehost，您可以在完整的网站包上花费2.95美元/月，包括域名，托管和企业电子邮件。包含在内，您可以免费访问WordPress网站构建器，这可以帮助您在一小时内创建您的网站。点击下面开始。

访问Bluehost

以下是如何通过八个步骤设计和启动您的餐厅网站：

1.获取您的域名和托管

要创建一个餐厅WordPress网站，您首先需要一个托管计划。我们推荐Bluehost，因为它们将所有内容整合到一个软件包（网站，域名和专业电子邮件帐户）中，并提供最优惠的价格，起价为每月2.95美元。

要开始使用，只需点击该链接，然后点击“立即开始使用”。第一步是选择您的托管包。当你注册36个月时，他们的基本计划只需2.95美元/月。对于大多数单一地点的餐馆来说应该足够了。仅当您打算创建多个网站或需要超过5个企业电子邮件帐户时，才考虑“加”计划。

接下来，您将选择您的网站域名，例如www.YourRestaurantName.com。虽然Bluehost允许您在不同的扩展名之间进行选择，但大多数餐馆都选择.com名称，因为它是最受欢迎和众所周知的。如果您选择了最佳选择，请考虑添加额外的字词，例如您的城市名称，或查看我们的前25个域名提示以获取其他提示。您还可以使用下面的工具查看可用的内容：

2.连接您的域名和安全证书

注册Bluehost后，系统会要求您设置密码并确认您的电子邮件地址。在此之后，您将进入Bluehost欢迎页面。在设计您的网站之前，您需要将新域名链接到您的网站，然后启用安全证书以保护您的网站访问者的信息并提高您网站的搜索引擎排名。

连接您的域名

点击左侧面板上的“我的网站”和“管理网站”。然后，找到“设置”面板。在显示“站点URL”的框中，将临时URL更改为新域名。这会将您的新域名链接到您的网站。关联后，访问者会在输入您的网址时被定向到您的网站。

启用安全证书

接下来，通过单击“安全”选项卡启用安全证书。找到“免费SSL证书”的框并启用它。这会将您的网站更改为“https”，这意味着它会加密所有访问者数据，以防止可能威胁到客户安全的数据泄露。安全网站在Google等搜索引擎中的排名更高，因为Google更喜欢保护访问者以获得更好体验的网站。

完成这些步骤后，单击“登录WordPress”开始设计您的站点。

3.在WordPress上安装餐厅网站模板

网站模板包括有助于创建网站的布局，字体，颜色，图像和页面。从那里，您可以编辑您选择的模板，以满足您的品牌和业务需求，即使没有编码技能。餐馆应首先选择一个股票餐厅网站模板，然后使用导航菜单或拖放网站构建器调整设计。

首先，单击“登录WordPress”转到WordPress仪表板。这是您网站的主要“控制中心”，您可以在其中设计网页，进行编辑，添加博客文章，更改网站颜色和字体等。对于餐厅网站，您需要下载Fit Web主题：餐厅版等餐厅主题。我们将使用此主题作为以下步骤中的示例。

现在，您需要在WordPress网站上安装主题。要执行此操作，请将鼠标悬停在左侧菜单上的“外观”上，然后单击“主题”。

从那里，点击右上角的“上传”，如下所示。

接下来，单击屏幕顶部的“上传主题”按钮。您应该收到上传文件的提示。将刚下载的主题.zip文件上传到WordPress。加载后，单击“立即安装”。等待它安装，然后单击“激活”。您现在将在您的网站上安装Fit Web主题，并可以开始自定义它。

4.自定义您的餐厅模板

要自定义模板，请添加您的姓名和餐馆信息，并上传您自己或第三方免费照片。您还可以对网站的格式和样式进行简单调整。 Fit Web主题：餐厅版旨在尽可能方便用户使用。尽管如此，它仍然是高度可定制的，这意味着您可以完全控制颜色，字体和页面格式，所有这些都可以通过易于使用的选项菜单进行自定义。

使用导航菜单自定义

将鼠标悬停在左侧工具栏上的“外观”上，然后单击“自定义”。自定义菜单分为多个小节，如标题和社交链接。如果您需要任何这些部分的帮助，可以在我们的用户论坛中提出问题。在大多数情况下，您只需单击导航菜单，然后使用菜单选项编辑您的餐厅模板。

以下是您可以在导航菜单中找到的小节。

添加标题

为您的网站设计标题面板。您可以上传徽标，或只是输入您的餐馆名称作为文本（稍后您将能够调整字体）。在此之下，输入您的街道地址和电话号码。

如果您仍需要徽标，请查看Fiverr的设计师，定价为5美元。

添加社交链接

将社交媒体图标添加到您网站的右上角。只需将页面链接粘贴到相应的字段下，图标就会自动显示。还可以选择添加带有邮件图标的电子邮件地址。如果您还没有创建社交媒体帐户，请了解Facebook，Yelp和Instagram对企业的好处。

选择字体

默认情况下，站点使用Londrina字体作为标题，并使用Open Sans字体作为正文。但是，您可以选择不同的字体并立即在右侧预览。正文字体用于“关于”或“小时”等段落部分。您的标题字体显示在部分标题中，副标题字体用于按钮和主导航菜单。

您可以从一长串的身体字体中进行选择，包括Open Sans，Josefin Slab，Montserrat，Comfortaa和Raleway。可以使用同样长的标题字体列表，包括Roboto Slab，Indie Flower，Londrina Shadow，Shrikhand和Satisfy。选择与您的品牌形象对齐的字体。

选择颜色

默认背景颜色控件允许您调整网站上某些部分和页面的背景颜色。它不会改变背景颜色的原因是因为某些部分（如位置和图库）有自己的颜色控件。

如果您想在整个网站上使用相同的背景颜色，只需选择颜色，然后找到六位数的HEX颜色代码。将其写下来，或将其复制到剪贴板，然后将其应用到您想要使用此颜色的任何其他位置。

建立和安排部分

部分是您希望在主页上显示的内容元素，以便为访问者提供他们需要的信息。选择要在首页上显示的部分以及顺序。只需单击并拖动部分即可按不同顺序排列。或者，单击眼球图标以从您的网站中删除部分。

以下是此主题可用的六个主页部分的概述：

英雄 - 英雄有标题，背景照片和两个可选按钮。这几乎总是出现在您网站的顶部。
地点 - 位置显示您的地址，小时数和联系信息，以及嵌入式Google地图。
画廊 - 图库为您的主页添加了一个简单的图库。
关于 - 这是一个添加简短的生物，菜单描述或任务声明的地方。
邮件捕获 - 这提供了一个由Mailchimp提供支持的可选邮件列表注册表单。
页脚 - 在这里，您可以在网站底部添加文字，链接或图片。

部分：英雄

英雄部分有一个大横幅图像，带有粗体大写文本，下面有两个可选按钮。将此视为您网站的主要“标题”。它应该吸引访问者的注意力，提供简单的业务摘要，并通过两个按钮为访问者提供简单的方法。要添加图像，请选择我们提供的默认图像之一或上传您自己的图像。 Unsplash提供您可以使用的免费高分辨率图像。

上传图像后，请注意您的配色方案。如果您的照片很暗，请确保将文本更改为白色或亮色，以便于阅读。如果您的照片相当明亮，请使用深色文本进行对比。 “背景颜色”允许您通过在图像上添加透明层来进一步使图像变亮或变暗。

要向图像添加按钮，只需输入按钮文本和应显示按钮的URL。此外，选择与您的网站样式相匹配的颜色和按钮样式。要删除按钮，只需删除文本和URL即可。更改按钮样式后，在预览屏幕刷新后，您将不再看到该按钮。

部分：位置

您可以在此处添加地址，营业时间和联系信息等业务信息。此部分还包含一个嵌入式Google地图窗口小部件，可将您的地址显示为地图上的图钉。要进行此设置，您需要一个Google或Gmail帐户（可以免费创建），然后按照Google提供的说明获取API密钥。

部分：画廊

这提供了一个简单的画廊，可以显示您的餐具，餐厅或客人的照片。照片将显示为缩略图，访问者可以单击放大。使用“布局列”更改照片库中的列数。在这里，您还可以增加或减少图像尺寸。例如，更改为三列而不是四列将创建更大的行，每行包含三个更大的图像。

部分：关于

对于“关于”部分，添加餐馆的段落描述。如果你有一个重要的信息要传达，而且它不适合英雄部分，那么这就是应该去的地方。您可以在餐厅的原始故事中加入一段，或者为什么您比其他当地餐馆更好。例如，您可以提供素食主义者或从农场到餐桌的菜肴，或者您可能位于历史悠久的建筑中，并提供相匹配的体验。

默认情况下此部分是隐藏的，因此如果您想使用它，您可以在“部分顺序”下启用它。我们隐藏了它，因为只有选择的餐馆应该使用它。您的主要网站目标是让访问者访问您的订购页面，菜单或查找您的地址/联系信息。像这样的基于文本的部分通常可以分散您主页上更重要的功能。

部分：电子邮件捕获

对于想要在其网站上添加简报注册表单的Mailchimp用户，这是一个可选部分。编写标题和子标题，然后添加Mailchimp API密钥和列表ID。将它移动到最有意义的地方。如果电子邮件营销是您的首要任务之一，请将其移至您的英雄下方以最大限度地提高参前往“部门订单”并将电子邮件捕获拖到其他部分之上。

如果你尚未开始电子邮件营销但有兴趣尝试，Mailchimp有一个免费版本的小企业。点击此处注册或了解更多有关它在我们的电子邮件营销软件买家指南中提供的内容。

部分：页脚

与标题一样，您的页脚会显示在您网站的每个页面上，通常用于发布网站信用，照片信用和版权信息。您还可以添加最多六个奖项，这些奖励是代表您的业务所获奖励或成就的小图标。

要添加赞誉，请单击“添加新的Accolade”，然后上传图像。理想情况下，这应该是一个透明的.png图像，因此它不会与您网站的背景颜色冲突。您还可以选择链接URL。例如，您可以添加提及您的业务的文章。要查找展示您餐馆的网站/标题的徽标，请使用Google图片。在顶部菜单栏上将颜色设置为“透明”。

创建导航菜单

您的主导航菜单将显示在网站标题上，以帮助您的网站访问者轻松查找页面和内容。要创建主导航菜单，请单击“创建新菜单”并将其命名为“主导航”或类似名称。选中“导航菜单”框并单击“下一步”。现在单击“添加项目”。这将打开一个菜单，您可以在其中决定要添加到导航栏的页面。

因为到目前为止您只创建了一个页面（Home），所以添加的选项不会太多。现在只需点击“主页”，然后根据需要添加更多内容。

保存您的更改

使用自定义菜单完成编辑后，单击自定义菜单顶部的齿轮图标，然后选择“保存草稿”。然后单击“X”返回主仪表板。您可以随时返回自定义菜单进行更多更改。

5.创建您的食物和饮料菜单

菜单显示餐厅的菜肴或食物选项，包括生动的图片，描述和价格信息。大多数餐馆通过上传他们的菜单图像或在网页上输入它们来添加他们的菜单，其中添加了一些用于点缀的图像。为了帮助您的菜单在Google等搜索引擎中排名很好并在移动设备上表现更好，第二种选择是最佳选择。使用免费插件“食物和饮料菜单”，创建菜单部分，单个菜单项，整理菜单和发布。

安装食物和饮料菜单插件

您将在仪表板上找到安装此插件的提示，如上所示。只需单击“开始安装插件”。从此处，再次提示您单击“安装”。完成后，单击“返回到所需的插件安装程序”，然后在“食物和饮料菜单”下选择“激活”。您现在应该会在屏幕左侧看到一个新图标。如果您没有看到如下图所示的“菜单”，请刷新页面。

添加菜单部分

菜单部分将菜单分为您提供的菜肴类型，包括开胃菜，汤，沙拉，三明治，甜点，饮料或面食。你可以标记任何你想要的东西。要添加它们，请将鼠标悬停在菜单图标上，然后选择“菜单部分”。添加标记为您提供的菜肴类型的各个部分。

添加部分名称后，不要忘记更改slug（这是URL，看起来像粗体文本：www.johnsrestaurant.com/menu/鱼特价）。您通常可以在输入页面标题的字段下找到它。全部以小写字母输入相同的单词。如果有多个单词，请使用连字符而不是空格。例如，您可以添加“开胃菜”，如上所述，或“fish-specials”。

添加菜单项

菜单项目包括您提供的菜肴的实际照片和描述以及价格。完成菜单部分后，即可开始添加这些项目。要执行此操作，请将鼠标悬停在菜单图标上，然后选择“菜单项”。单击顶部的“添加新菜单项”。在下一页上，您可以添加单个菜单项。每个项目有四个关键字段，包括标题，说明，菜单部分和价格字段。

一定要填写所有这些字段。在标题部分，添加菜肴的名称。在描述字段中，添加菜单项的简短描述，然后单击“添加媒体”以上载其图像。在菜单字段中，指明您要将项目添加到哪个菜单部分（例如，菜单中的意大利面或三明治部分）。在价格字段中，列出菜肴或商品的价格。

安排和发布菜单项

添加完所有菜单项后，将鼠标悬停在左侧工具栏上的“菜单”图标上，然后单击“菜单”。现在，单击顶部的“添加菜单”。为菜单命名（例如，晚餐，早午餐或餐饮），然后滚动到底部，其中显示“菜单布局”。

在这里，您可以拖动您创建的不同菜单部分来设计菜单页面。将它们放在两列中的一列中，然后拖放它们以排列顺序。完成后，单击顶部的“预览更改”。如果您对自己的设计感到满意，请点击“发布”。

将您的菜单添加到您网站的导航菜单

菜单（或菜单）完成后，请记住将菜单添加到主导航栏。为此，请在您的网站仪表板中导航至“外观”，然后单击“自定义”和“导航菜单”。现在，单击“主菜单”。单击“添加项目”，您将看到刚刚创建的食物菜单的选择。选择它并保存菜单。

6.为您的网站添加更多页面

虽然并非总是必要，但许多企业主喜欢在其网站上添加其他页面，例如“关于”，“联系”，“餐饮”或“我们的故事”页面。这些使您有机会添加额外的信息，而不会使您的主页太拥挤。如果您要上传图像文件以显示食物/饮料菜单，这也是您创建菜单页面的方式。

要创建新页面，请返回仪表板，然后单击左侧工具栏上的“页面”。点击页面顶部的“添加新内容”，如下所示。

对于您创建的每个页面，有三个要注意的关键元素。标题页位于最顶层。在这里，你将包括一个页面标题，如“关于我们”，“餐饮”或“我们的故事。”页面标题应该与标题匹配，在多个单词之间用连字符（例如“我们的故事”）。最后，页面内容应添加在slug下面的大框中。您可以通过单击并键入来为此字段添加文本。点击“添加媒体”添加照片。

以下是对每种页面类型的更深入了解：

关于我们

“关于我们”页面应包括您的餐厅描述，一段式的BIOS和员工的图像，以及您的餐厅所获得的任何奖励。最好在您的餐厅列出的评论网站中添加一个链接，这样人们就可以通过顾客的眼睛看到您的品牌。如果您专注于食品（例如素食主义者或寿司），请考虑包括常见问题部分以回答常见的客户问题。

我们的故事

讲述您餐厅诞生的故事以及从那时起它如何演变。包括使您的业务与其他当地餐馆相比特殊或不同的原因。为你的故事添加一些情感和人性，让你的个性闪耀，使这个页面有意义。

联系我们

在食品行业，客户对成分，定价和政策有很多疑问。其中许多问题可以在“关于我们”和“菜单”页面的常见问题解答部分找到，但是，对于您可能没有想到的其他问题，请确保客户可以通过添加电子邮件地址，电话号码与您联系，和社交媒体页面。

餐饮（如适用）

在这里，您想准确列出您可以为客户活动提供的食物类型。您还想告诉感兴趣的访客如何请求您的餐厅提供的活动。包括号召性用语按钮，例如“了解详情”（将其引导至您的菜单页面），“开始使用”或“与我们联系”（将其引导至您的“联系我们”页面）。

预订

此页面包含有关预订的信息以及客户如何与您联系。如果访客可以通过您的网站进行预订，请在此处提供预订表格。如果您希望他们致电或发送预订请求，请向他们提供明确的联系信息。对于移动用户，包括“预订”等号召性用语按钮，可将访问者引导至您首选的联系方式，例如可以点击呼叫的电话号码。

活动日历

许多餐馆都有特别活动（如现场音乐或主题之夜），他们希望邀请客户加入。事件日历会提醒客户您正在进行的店内活动，允许他们围绕他们规划他们的日程安排。

添加其他页面后，您可以预览每个页面，将每个页面保存为草稿，或者只需单击“发布”即可在您的网站上显示。即使在您发布页面后，您也可以在以后进行编辑。

7.为您的餐厅网站创建博客

餐馆博客可以展示您在您的利基（例如寿司），或您的餐厅文化，内部人才或食谱方面的专业知识。好帖子也是可分享的，帮助您通过社交媒体和电子邮件简报等平台吸引更多客户。 WordPress是一个很好的餐厅博客平台，因为可以从您的仪表板添加帖子，然后轻松编写您的内容。上传图片并在相关类别下发布每篇帖子（如“食谱”）。

添加新帖子

要添加新帖子，只需前往WordPress信息中心左侧菜单栏上的“帖子”，然后点击“添加新内容”。就像创建新页面一样，添加标题，撰写文字和添加图片/媒体内容。此外，通过单击页面右下角“特色图像”字段下的“设置特色图像”链接添加特色图像（完全向下滚动以查找此内容）。

添加博客帖子类别，分配和发布

我们建议将每篇博客文章保存在同一类别下，例如“博客”或“更新”。这样，将博客添加到主导航栏很容易。只需点击“添加项目”，“类别”和“博客”即可。如果您想创建两个不同的博客（例如，一个用于食谱，另一个用于事件），则只需使用两个不同的类别。现在，您可以在导航栏上单独链接到它们。设置每个帖子的类别后，单击“发布”。

8.启动您的站点

启动您的网站意味着您要发布它，以便访问者可以查看它。在您的网站内容完全填写之前，不应该这样做。启动站点后，您可以随时返回并编辑它，但是，对于您的首次启动，最重要的部分是没有URL会导致空白页面。要启动您的站点，请单击左侧WordPress菜单选项中的Bluehost按钮。

现在找到“启动您的站点”框，然后单击“启动”按钮。完成此操作后，在线人员可以看到您的网站。您现在应该可以在浏览器中输入您的网址并访问您的网站。如果您收到错误页面，请返回步骤2并确认您在“设置”面板上输入了正确的URL。

主餐厅网站设计元素

餐厅网站通常包含菜单，关于我们，博客和其他页面。结合起来，这些帮助餐厅通过向人们提供诸如餐馆销售的菜肴类型，顾客如何预订，如何联系或定位餐厅，店内活动公告和时间表等信息，为店内的顾客带来更多顾客。他们的员工如何为店内用餐体验做出贡献。

除标准网站功能外，餐厅网站通常还包括以下内容：

菜单页面 - 使用像WordPress这样的平台，您可以安装可以帮助您轻松创建菜单的插件，但即使您手动构建菜单，这也应该是您餐厅网站上的标准功能。
预订 - 无论是嵌入页脚还是添加为自己的页面，都应在您的网站上突出显示有关预订的信息。访客应该可以直接在您的网站上进行预订，或使用明确的电话/电子邮件信息直接与您的餐厅联系。
活动页面和日历 - 大多数餐厅举办特别晚宴或举办公共活动。为了帮助您的客户定期访问您的餐厅，请务必始终将您的活动页面或日历与最新的活动信息（如时间，日期和说明）保持同步。
关于我们 -重要的是要创建一个页面，其中包含厨房工作人员的头条和每个人的简短传记，以及他们如何在您的业务中发挥他们的才能。此外，还包括您餐厅食品专业的简要说明，以及您与竞争对手的区别。餐厅收到的任何奖项也可以包括在这里。

以上元素应该是整个餐厅网站结构和设计的一部分。在设计每个页面时，包括生动的食物图像，白色空间，以防止压倒性的读者，清晰的联系信息，您的位置地图，以及添加定期更新或帖子的地方。

6顶级餐厅网站模板

WordPress餐厅模板是您可以在几分钟内安装的网站设计，然后自定义以匹配您的餐厅品牌和产品。餐馆使用它们轻松展示他们的历史，员工简历，菜单，预订信息，活动等。餐厅有数百种餐厅主题，可以创造出真正独特且反映其品牌的东西。

以下是构建自定义网站时要考虑的一些WordPress餐厅主题：

Fit Web主题：餐厅版

价钱： 自由

适合小型商务餐厅主题的例子。

这是一个可定制的现代设计。功能包括突出的联系信息，订购按钮，响应式设计和自定义菜单，可完全控制颜色，字体和页面格式。

Belise Lite

价钱： $49

Belise WordPress主题示例。

这是一个优雅的主题与现代简约设计，帮助餐厅让游客专注于他们的菜肴，而不是复杂的设计和导航。它具有响应式布局，事件部分，简单的食物菜单，显示组合的能力，WooCommerce在线销售的兼容性，联系表单，颜色选择以及与WordPress多语言（WPML）插件的兼容性，创建多语言网站。

味道

价钱： $49

风味WordPress主题示例。

这是一个现代，优雅，生动的设计。它的功能包括响应式布局，展示菜肴的滑块选项，活动日历，与WPML的兼容性以创建多语言网站，联系表单和高级内置搜索引擎优化（SEO）。它可通过拖放式编辑器，内置页面布局，Google字体集成以及可用于自定义每个页面的无限侧边栏进行高度自定义。

阿米奇

价钱： $50

Amici WordPress主题示例。

这是一个优雅，精致，简单的设计，模仿店内翻盖菜单体验。其功能包括在移动设备上显示的响应式设计，提供更加生动的图像的Retina-ready显示，联系和预订表格，快速网站加载以及与WPML插件的兼容性，以便轻松实现多语言网页。

酒馆

价钱： $59

酒馆WordPress主题示例。

这个主题拥有经典而质朴的设计。它具有响应式设计，适用于移动设备查看，图像和视频滑块，视频背景选项，Retina显示准备（用于生动的图像显示），内置SEO优化，拖放编辑和60多页元素（如CTA）按钮等）您可以选择自定义每个页面。它还兼容多语言网站的WPML插件和在线销售的WooCommerce。

罗莎

价钱： $75

罗莎主题的例子。

这是一个大胆，高度可定制的主题，具有响应式设计，可在移动设备上显示漂亮的显示，可搜索和可滑动的食物菜单，在线预订和订购以及SEO优化布局，以帮助您的网站在Google上排名很好。这对于展示丰富文化体验的小型企业来说是最好的。

5顶级餐厅网站设计和维护工具

网站设计和维护工具可帮助小型企业维护和更新其网站，从而增加流量。例如，餐馆网站最成功的当他们使用工具帮助他们在Google上排名很好，创建内容以吸引访问者参与并说服他们访问，并更新布局/设计以满足网站访问者的期望。

这里有一些工具可以帮助您充分利用您的餐厅网站：

Fiverr – 这是一个在线自由职业者平台，您可以在这里聘请餐厅专业网站，博客和菜单编写者，每个项目只需5美元。
Yoast - 这是一个免费的SEO WordPress插件，可以帮助您优化您的设计和内容，以便在Google上排名很好，以便本地客户可以在线找到您。
Canva - 这是一个免费的图形设计平台，即使您不了解图形设计，也可以用它来创建图像。它有菜单，徽标，博客横幅，公告和其他模板，您可以使用自己的照片和文本轻松自定义，然后上传到您的网站
Freshmarketer - 这是一个转换率优化工具包，可帮助您解决阻止网站访问者转换的问题（例如，笨重的预订或无法下订单）。他们提供免费的小型商业计划，其中一些每月的成本高达99美元，具体取决于您想要使用的功能。
Hibu - 如果您的小企业时间紧张，您可以将您的网站设计和维护外包给Hibu。他们将设计一个价格低至400美元的网站，然后对其进行维护，以确保它在谷歌的每月只需100美元。