英文网站Landing Page(着陆页)制作(2017.12.13更新)

由于我的博客从国外主机转移到国内,好多功能不能正常显示,请朋友移步到http://www.10122.com/zhuoluye-zhizuo/ 查看完整刘春晓的博客文章:英文网站Landing Page(着陆页)制作(2017.12.13更新)

一个网站的最终目的就是转化成销售,无论是什么样的网站,所以设计一个专业的着陆页面(landing page)非常的有必要。

着陆页landingpage

今天这篇文章就是教你怎么免费的去制作一个专业,美观,大气,简洁的着陆页。

可以说这又是一篇实实在在的可以动手操作的文章,而且是你从来没有在网络上看到过的操作。

至于什么是着陆页,你百度或者谷歌一下就可以了,这个我就不多做介绍了。

关于着陆页面的设计,我在设计外贸企业网站那篇文章里已经提到过一些思路,如果你想自己制作网站的话,希望可以先看完那篇文章再来操作这一篇。

当然我也有一篇文章:怎么制作营销型网站?,这篇文章也是关于英文网站提供了一些思路,只为开拓一下认知。

这里我不讲理论,我只动手操作怎么制作。

所以,我们在制作landing page的时候,就需要有一个页面模型,这个是需要我们自己找的,然后我们模仿着这个页面来制作。

其实制作一个单一的页面是比较简单的,但是最重要的也是最难的就是制作popup(我们常说的弹跳框)和contact form(联系表格)。

点击这里查看:怎么设计一个外贸企业网站,http://www.10122.com/wangzhan-sheji/

那什么是popup呢,来点击下面的按钮先看一下,下面会介绍怎么操作。

 查看popup

popup和contact form有什么用呢?

主要是为了搜集客户的信息,让客户留下他的邮箱,电话,或者一些其他资料。

其实你也知道,只有留下了客户的信息,你才能更进一步的去操作一些事情。

如果你是外贸销售人员,那么你努力的发布信息,或者发送邮件,或者很努力的优化你的英文企业网站去开发客户,为的是什么?

还不是要得到客户的信息,进而促成销售。

网络销售需要的是时间沟通,试想,如果连客户的信息你都搞不到,你向谁去销售你的产品。

所以,着陆页(landing page)很重要,而制作这个页面的唯一目的就是让他通过按钮,注册他的信息,进而进入我们的email list,

我在我那篇怎么设计一个英文网站里说过这样一个事情,可以把首页制作成着陆页,其实这样是不完全正确的。

但是好多做外贸的朋友根本不了解着陆页的正确使用方法,其实着陆页是针对某一个主题而专门设计的一个页面,要求这着陆页要完全匹配这个主题而做的一个营销型页面。

如果你做谷歌排名广告,当客户在搜索引擎上搜索某一个产品关键词或者信息关键词,当你的广告排名靠前而吸引了他时,他就会点击进去。

好多人把这个点击进去的网址就直接设置成他们自己网站的home页,也就是主页,或者是产品页面,看似好像没有问题,其实这是错误的。

如果你查看广告后台数据就会发现,其实你的转化率很低很低,这是因为你没有针对于此而进行着陆页的制作,也可以说没有进行营销优化

所以最好是一个主题针对一个页面。

例如有的客户可能搜索:价格便宜的XXX、质量好的XXX产品、中国的XXX产品、XX认证的产品、售后服务有保障的XXX产品。(就是表达这个意思,不一定客户非要搜索这些关键词,至于关键词的研究我有一篇是专门的介绍的,操作步骤非常的详细,有兴趣点这里看一下

所以针对这些搜索的词汇,我们应该针对不同而做出不同的landing page页面。

客户要便宜的,我们的页面主要针对价格来开展,尽量让他把他的联系信息留下。

XX认证的产品,客户主要是先考虑这个认证,然后再是其他,所以,如果你有这个认证,那么就专门针对这个认证做一些详细的介绍,并把自己有这个认证和认证的产品图文并茂的表现出来,试想这样能不把客户的联系方式留下来吗?

要求售后服务有保障,那你就把你的售后主要的体现在这页面,尽量消除客户的一切顾虑。

如果这样操作的话,难道你的转化率会不提高?

我深知获得一个客户是多么的不容易,所以,不要浪费你的每一次点击。

浪费点击就是浪费钱,所以我们尽量争取做到最大的转化。

如果让你做英文的seo,那么你会操作吗?

也许你只知道,做英文seo就是发发外链,提升网站的投票数。

其实seo包括站内seo(on-page seo)和站外seo(off-page seo)。

站外seo我们是无法控制的。

但站内seo是我们可以控制的。

而landing page就属于站内seo的一个组成部分。

你只知道做站外优化,但是为什么不把站内优化也做好呢?

为什么我们不把网站弄的漂亮一些,更具有吸引力一些呢?

范爷和凤姐如果让你选择,你更喜欢看哪一个?

毫无疑问谁都知道选择漂亮的。

所以……

好了,又废话了这么多,开始我们的操作。

首先,我们找一个landing page的页面模板。

由于我们是操作免费的,所以和那些专业的页面是会有一些区别的。如果打算做的更专业一些,还是建议花钱购买。

花钱购买会节省很多的时间,而且在优化方面制作的非常好,这样也节省我们好多的时间。

我在这篇文章里有介绍这个,这都是好多国外大牛们使用着并强力推荐的。点击进入

www.1473.com就是用thrive themes 制作的,这是一个做英文动画和老外客户证言的网站

以下页面是我做的截图,原始模板是哪个网站的,我给忘记了,只截图了下来。

我感觉这个模板页面具有代表性,很不错。

原始模板页面:点这里看一下

制作后的页面:点这里看一下

点开popup后的页面:点这里看一下

制作后的页面是我自己又添加了一下,做的比较粗糙,有一些元素我故意做的夸大一些,这样可以突显元素特性。

其实这个也是我另一篇文章WordPress网站制作的一个详细补充。

开始,我们需要的插件。

1.Elementor 2.contact form 7 3.popup maker 4.SiteOrigin CSS

步骤如下:

第一步:框架制作  

第二步:contact form 7制作

第三步:popup 制作


#第一步:landing page页面大体框架制作布局操作

1.头部

ADD NEW SECTION >>三列布局(由于是有三个部分构成)

最左面是logo图片,中间是文字,最右面是电话文字。

这里最要的要说一下上下位置的调整。假如,call us 这里我们需要调一下上下左右,使其能够比较工整的对齐。

点击红箭头所指,就会出来这个框的布局设置

红箭头所指的就是调整上下左右位置的,自己调试一下就可以,没有什么,下面padding那里也是调整框的。

红圈里标注的是你可以全部设置还是单个设置,点一下链接锁开了就是单个设置,如果使这样就是设置一个其他的就会都一样跟着设置。

自己调一下就可以。

2.横幅图片

头部的下面,添加一个section,或者在左面直接拖过去。在左面的设置那里根据自己的需要设置一下image size。

3.在横幅上的那个框。

这个大框包含多个小框。小框往大框里面套就行。

主要说一下怎么把这个框弄在图片上面这里。

进入这个整体大表格的设置里。看到了没有,就是把margin的top调整了一下。

绿色按钮的添加也是比较简单,直接从左面选项选个按钮拖过去就可以了。

对按钮进行设置,不要弄错了设置,是对按钮这个元素进行设置。

我们设置这个按钮就是要求当你的访客点击这个按钮的时候,出现注册表,如下图。

这个注册表是我们可以自己设置的,修改一下样式什么的都可以,后面说。

4.about us和Our Services就不用说了把,

他们下面的横线,我们添加的是这个元素Divider,进入可以设置长短,粗细,颜色,和上下的距离。

5.why choose us这里其实是有两部分组成

一个是添加了一个section单行,然后添加了why choose us文字。

把这个框设置一下高度,调试成我们需要的那样。

可以把背景设置成cloud形,在Type那里。

三个带苹果的框是icon box这个元素,直接拖拉就可以了,可以选择适合内容的icon。

6.客户证言这里更简单了,一行两列,一个是图片,一个是文字,调整一下边框比例就可以。

7.接下来就是contact form了


#第二步contact form 7的制作

添加一个新表单,然后进去就是这样的代码

<label> 你的名字 (必填)
[text* your-name] </label>

<label> 你的邮箱 (必填)
[email* your-email] </label>

<label> 主题
[text your-subject] </label>

<label> 你的留言
[textarea your-message] </label>

[submit “发送”]

然后我们修改一下每个框。

①选上[text* your-name]或者去掉,然后点击text这个

出现弹框,尤其是这个id,我们修改表格样式需要这个东西,必须要填上

contact form 7设置

例如我填上id:chunxiao,然后这个代码就变成

[text* text-421 id:chunxiao placeholder “Enter Your Name”]

enmail也是这样操作,留言选择的是text area。

submit这里,label框里是显示的按钮上的字。

修改完成后就是以下的代码:

[submit id:zhuce “这是点击按钮”]
按照我们着陆页的那个表格,所有的代码就是:

<label> Your Name (required)
[text text-22 id:landingpagename placeholder “Your Name”] </label>

<label> Your Email (required)
[email* email-285 id:landingpagemail placeholder”Your email”] </label>

<label> Your Message
[textarea textarea-574 id:landingpagliuyan placeholder “说几句吧”] </label>

[submit id:xuqiu “发布我的需求”]

当我们输入错误信息的时候,会显示一些文字,就是在下面修改。

form的基本信息就差不多了。


#第三步popup的制作

当你安装好了popup maker这个插件之后,会出现在网站后台的左面栏里。add popup,添加一个。

popupmaker

 

popup有两个表现形式:Ⅰ.自动弹出   Ⅱ.点击弹出

我们制作的这个页面是点击按钮弹出的。

还有一种是当我们进入这个页面,自动弹出的,至于多长时间弹出,我们可以自己设置时间。

triggers

你一选择auto open,就会出现这个框,自己设置时间。

再设置一下cookies,这是个什么东西呢?

当访客进入网站,不可能进一个页面,多少时间就出现一次popup,所以,我们在这里设置一下cookies,也就是说,在多长时间之内,他只收到这一次。

这个自己调试一下,玩吧,闲着也是闲着。

选择之后,出现下面的情况

1month其实太长,设置成1day最好,在个人的喜好。

然后add,

cookies

当然,如果我们想让这个popup只出现在某一个页面或者某个文章页,而不是出现在整个网站内,这也没有问题,右面侧栏,select a condition,下拉箭头,选择你的页面就可以了。

假如我的文章很多,我要选择单独的一篇文章,要出现一个popup,有一个selected,输入你那个页面的id就可以了。

例如我选择出现在我的个人介绍那里,http://www.liuchunxiao.com/chunxiao/,那我就输入:chunxiao,这个页面就出来了。

再下面display settings,设置弹出popup的大小,自己调试一下。

Disable Overlay这里,前面的框打上√,这个意思是popup会在你的当前页面打开,如果不选就是在另一个页面出现,背景一片空白。

下面Position,就是popup出现的位置,一般都是选top center,可以自己测试一下,然后又个top项,就是距离top有多少距离,可以自动调试。

close settings那里,就是右上角有一个close的关闭标志,这个可以自己设置文字或者X号。

基本设置就到这吧,太磨磨唧唧了,再不清楚就一个一个的看一下,看不懂的谷歌。

主要我们来设置一下popup弹出的那个框里的内容。

把我们制作的联系表格短代码粘贴进来。在contact form那里找一下就是下面这个东西。

粘贴到popup表格里,然后添加我们想看到的文字,做一下排版。


Simply the Best Way to

Create Landing Pages

Sign up now and get access to our Landing Page Demo:


上面那个是我们制作landping跳出的表格,这个就不说了,说说当页最下面我自己添加的那个。

但是你会发现,表格并不是我们看到的这样漂亮,所以我们做对表格做一个美容。

制作完成后的效果见下图

后面的背景设置就是在你的框内设置,这个我就不说了。

谈一下这个contact form,也就是那个填写表格。

进入插件SiteOrigin CSS的设置

进入之后,是空白的,需要我们添加一些css代码。#后面就是我们在制作form的时候,设置的那个id。

#landingpagename           /*设置名字框的那个代码/
{
width: 100%;
background-color: #f7f7f7;
box-sizing: border-box;
height: 50px;
border-radius: 4px;
}

#landingpagemail       /*设置邮箱框的那个代码/
{
width: 100%;
height: 50px;
border-radius: 4px;
}
#xuqiu                       /*设置按钮框的那个代码/
{
width: 60%;
background-color: #F79B20;
height: 100px;
border-radius: 4px;
text-align: center;
margin-left:20%;
font-size:48px;
font-weight: bold;
}
#landingpagliuyan          /*设置留言框的那个代码/
{
width: 100%;
height: 150px;
border-radius: 4px;
}

上面{}里的代码可增加可减少,自己设置。

想了解更多的css代码,给你个网站,这个网站有好多的基本设置,对我们有非常大的作用。

https://www.w3schools.com/css/default.asp (如果打不开,就看看我是怎么打开的,点这里看我怎么科学上网

这个可以打开,中文网站http://www.w3school.com.cn/css/index.asp(2017.08.13更新)

基本的popup就制作完成了,里面的代码我就不解释了,看不懂就动手操作,看看前台怎么显示。

再有最后一个,就是首页的按钮怎么添加的popup,怎么一点按钮就出现那个弹框。

进入你的后台popup maker,有一个id

在那个按钮元素的设置那里,有一个advanced,选择之后,有一个CSS Classes,把你的popup id添加进去就可以,应用一下。

好了,landing page(着陆页)的制作到此全部结束。

又是一篇达6000多字的文章,还不算图片。

能看完就挺累的,更别提我写这篇文章有多累了。

还有制作表格,我反复测试了不下几千次(夸张了点),真的是太麻烦了,没办法,谁叫我爱好玩这个呢,在其他网站你不会看到有这么详细的操作的。

而且,这完全是免费的,当然花钱是能帮我们解决这些问题,但是在我刚开始操作的时候,没有太多的money投入,那么就是需要我们的时间和精力来研究这个。

如果你的资金充足的话,建议你还是花钱买一些模板主题,那些都是经过代码简化,转化测试而总结出的,绝对的牛bi。

如果你不清楚选择什么样的,联系我,我告诉你什么样的比较适合你,我不收费。

看完这篇文章,如果有一些收获的话,别忘记留下你的评论。

如果喜欢我的博客,请也别忘记分享给你的朋友。

谢谢。

发表评论

邮箱地址不会被公开。 必填项已用*标注