{"id":22033,"date":"2020-05-07T03:59:59","date_gmt":"2020-05-07T10:59:59","guid":{"rendered":"https:\/\/alejandrorioja.com\/?p=22033"},"modified":"2023-10-13T02:17:26","modified_gmt":"2023-10-13T09:17:26","slug":"designing-a-landing-page","status":"publish","type":"post","link":"https:\/\/alejandrorioja.com\/designing-a-landing-page\/","title":{"rendered":"How To Design A Landing Page: A Step By Step Guide"},"content":{"rendered":"\n<p>When I was putting up <a href=\"http:\/\/flux-ventures.com\/\" target=\"_blank\" rel=\"noopener\">Flux Ventures<\/a>, I thought I had to put up a good website. Doing this is part of my strategy to not only get lots of people interested but also increase my prospects at the same time.<\/p>\n\n\n\n<p>And I realized that the first hurdle is its landing page.<\/p>\n\n\n\n<p>While I was reading on how to do so, I am able to apply these to my own and not only did it bring me a lot of views, but it made my company look more trustworthy to each viewer.<\/p>\n\n\n\n<p>Today, I\u2019ll show you how you can make an amazing, high-value landing page so that you can get high-value followers as I did.<\/p>\n\n\n\n<p>As a summary, do watch this video about how important they are:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"flex-video widescreen youtube\"><iframe loading=\"lazy\" title=\"What is a Landing Page - How to Use Landing Pages for Your Business\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/eSeFpphWUSY?feature=oembed&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&playsinline=1&enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">What Is A Landing Page<\/h1>\n\n\n\n<p>First things first, let us define what it is.<\/p>\n\n\n\n<p>According to <a href=\"https:\/\/unbounce.com\/\" target=\"_blank\" rel=\"noopener\">Unbounce<\/a>, it is a standalone web page that is made specifically for a marketing or advertising campaign.<\/p>\n\n\n\n<p>Are you curious about what makes them different from home pages? I was confused before I got in nose-deep into research, so here\u2019s what I have to say about what makes them different:<\/p>\n\n\n\n<ul><li><strong>A landing page contains fewer links to the rest of the website.<\/strong><br><br>Let us take this example from <a href=\"https:\/\/unbounce.com\/landing-page-articles\/what-is-a-landing-page\/?_ga=2.203235858.2060996311.1583544051-1302300380.1583544051\" target=\"_blank\" rel=\"noopener\">Unbounce<\/a> as an example:<br><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"337\" src=\"https:\/\/lh4.googleusercontent.com\/O92d4iT3E9NFVD_O8zteqYJeyFwoMDsZbcX_AvUsTibyU9xpasRO1PZqTUGw5vJmBFBq_HzVJJ0qLjaebfw2PZpmMMcZ0tHF-6tChrnDfThZ9HEir38CIpuaF60w6SDgQGAYp3QW\"><br><br>The page on the left is a bike store\u2019s home page. Meanwhile, the one on the right is a bike store\u2019s landing page.<br><br>Notice that the webpage on the right has fewer links than the one on its left.<br><\/li><li><strong>A landing page aims to convince people to buy what they want to buy.<br><\/strong><br>Notice how the bike store\u2019s home page from the left wants you to click on any of its links.<br><br>For example, the items listed have a tag with a percentage like 40% or 15% convince you to click on the link below to learn more. This means you might be interested in a bike and its accessories.<br><br>Meanwhile, the landing page wants you to notice the shop\u2019s bike instead of its other products. There is a link at the top that redirects you to buy it off its page.<br><\/li><\/ul>\n\n\n\n<p>Now that we learned the difference between a home page from a landing page, let me show you some types of landing pages you can choose for your needs from <a href=\"https:\/\/blog.hubspot.com\/marketing\/landing-page-types\" target=\"_blank\" rel=\"noopener\">this<\/a> post:<\/p>\n\n\n\n<ul><li><strong>Squeeze Page<\/strong><br><br>This type of landing page\u2019s aim is to get visitors\u2019 emails in order to convince them to buy one of your products in the present or in the future.<br><br>How you make this page is that you offer your future visitors content they can get for free (e.g. newsletter, ebook, whitepaper) that would convince them to become subscribers to your website which will then become future buyers of your website\u2019s products.<br><br>Shown below is an example from <a href=\"https:\/\/neilpatel.com\/blog\/\" target=\"_blank\" rel=\"noopener\">Neil Patel<\/a>\u2019s page:<br><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"347\" src=\"https:\/\/lh5.googleusercontent.com\/TipUvYLDqlfq30VH-7VVsri6mz7svJQC25VkT7iPPL2M5w7Dy0UlVqXnFaZ5gtmjH8_zQmCTlm3mmHHu53lxyY_jCal6XOLPFGMOlfMhAuuYfKrcVnWCs5WWNl6rAWRjDVlaE6ra\"><br><br>As you can see, his page asks you for your email so that you can enter a chance to win a contest the website is currently holding.<br><br>Doing this will not only increase the number of people sharing this page to their friends who need it but it will also help you get a group of people you can convince with future contests or give them a discount with any of your products.<br><\/li><li><strong>\u201cGet Started\u201d Landing Page<\/strong><br><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"332\" src=\"https:\/\/lh4.googleusercontent.com\/TiKjgVO-nbCmriAA0TqUT7Uo9RSGP0hka-Tq3eCMNYdFMM8rYyynFbEXaPQGTGaCFgHRuvpfI7Jq8mk7cQhIZM9tNUM5M2am5MHZlJJufNJI8PSJ2SPNVZMUM-9rod4gnRBbHUvr\"><br><br>The picture above is an example of one of the other landing pages you can choose for your website, taken from <a href=\"https:\/\/mailchimp.com\/\" target=\"_blank\" rel=\"noopener\">MailChimp<\/a>.<br><br>This format is about enticing the visitor to click the \u201cGet Started\u201d button to convince them to get your product now or later.<br><br>Its goal is to present the website\u2019s main product as a solution to a visitor\u2019s need. In this example, it is attracting those who needed another CRM tool to help with their marketing strategy.<br><\/li><li><strong>\u201cComing Soon\u201d Page<\/strong><br><br>It is amply named due to being able to show its visitor that the website is about to release a product in the near future and you can know about it.<br><br>In these kinds of pages, it usually shows a countdown timer at the top, then it asks for the visitor\u2019s email below it in order to contact them for updates, especially when the product has been officially launched.<br><br>An example is this page from <a href=\"https:\/\/multia.in\/theme\/wordpress\/mievent\/comingsoon\/?event=292\" target=\"_blank\" rel=\"noopener\">MiEvent<\/a>.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"411\" src=\"https:\/\/lh4.googleusercontent.com\/IE4L3-SotBO927P19BmOffogHAvovibrBxHM_S3Q16awMrmiUQ1AjecgDkFxeAfq9jRGuRxfjneZFaxjenVIAGMgp_1d3fbBSBs8zDXMWPaWNJxeUfctaKgecbznL4GlSeCp72rZ\"><br><\/li><li><strong>Pricing page<br><\/strong><br>The final type I will show for you is remaking your pricing page.<br><br>Whether you are planning to sell a new product or you want people to purchase an existing one of yours, you can opt for a similar design like the one shown below from <a href=\"https:\/\/wistia.com\/pricing\" target=\"_blank\" rel=\"noopener\">Wistia<\/a>.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"583\" src=\"https:\/\/lh3.googleusercontent.com\/sqJ2uAaaSGNcOAZjkJ5-h1ak9ExWv0dvaLWkdmlqSTz16TrXIhHIycIUMIyimRIxVhnSre8PHGCSluxLzl6FwfsiMGKxhpecqXTvXOkpmLFx9Vd27pcanmMApMcECWLFBeS8pAC9\"><br><br>Aside from having their pricing page remade to look like this, they also made sure to add several links to their pricing page such as the next two pictures shown below to pique the visitor\u2019s curiosity even more:<br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"215\" src=\"https:\/\/lh5.googleusercontent.com\/Wxql9GxPXR0kgoSPjoKjglAYTxVftiHOR07qUVb7jk-U7pfp81DbihtqwNwuDSGigzkyXTCR8hXLkgWENc5Axzk5XoUx9g9N1YOOxg55Sy1Eh61vgvUHPhPhTS1XPLj52pvd4fK9\"><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"295\" src=\"https:\/\/lh3.googleusercontent.com\/8XHdul9gCX6FukjRlsxK8As3lQwf-xn9v7I_NQkW_LoSMo_nvy65vH2sMgcxVBNBgV0V8njalF4HodwJ79tkeVrrXzebdFfcGn1dzEVLy012CPp4yExj0AlxMCi3skuxwP0WBoR-\"><\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Benefits of Effective Landing Pages<\/h1>\n\n\n\n<p>After learning what landing pages are and what kinds you can use in your future website, let us explore why you should have one.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting SEO Ranking<\/h2>\n\n\n\n<p>This reason for getting a landing page has something to do with using the <a href=\"https:\/\/alejandrorioja.com\/keyword-research\/\">right keywords<\/a> to associate your product with your website.<\/p>\n\n\n\n<p>Having one will increase your website\u2019s visibility across all search results that include all of the words you use on this page.<\/p>\n\n\n\n<p>Think about it: creating a landing page using high-traffic keywords will increase your chances of getting a future customer with each click.<\/p>\n\n\n\n<p><a href=\"https:\/\/alejandrorioja.com\/local-seo\/\">Also read top tips and tricks of doing local SEO here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Promoting an Upcoming Product or Sale<\/h2>\n\n\n\n<p>Since this kind of web page focuses solely on one promotion, product, or sale, there are two reasons as to why having content focused in this way.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Highlighting the marketing campaign<\/h3>\n\n\n\n<p>For example, if you are a drinks manufacturer and you want to promote your newest energy drink, adding a landing page that talks only about the newest energy drink will help you increase attention on that.<br><br>This can also help you promote it in social media and other forms of marketing too since you can show people the link to the landing page, thus increasing your potential customer base at the same time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Track the campaign\u2019s success<\/h3>\n\n\n\n<p>Using the energy drink in the previous section as an example, having a landing page will also help you check how excited people are around your product.<br><br>After using it in several other campaigns, you can also gain more data such as how often your landing page has been visited and its <a href=\"https:\/\/alejandrorioja.com\/top-search-engines\/\">rank in search engines<\/a>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">What is Unbounce?<\/h1>\n\n\n\n<p>Now, before I introduce you to how you can make one yourself, I would like to highlight that I will be featuring a tool that can help you make one and add to your pages: Unbounce.<\/p>\n\n\n\n<p>Born out of a German company, their software has been used by various companies such as <a href=\"https:\/\/helixsleep.com\/\" target=\"_blank\" rel=\"noopener\">Helix<\/a> and <a href=\"https:\/\/www.campaignmonitor.com\/\" target=\"_blank\" rel=\"noopener\">Campaign Monitor<\/a> to help with their own landing pages. If you want to learn more about Unbounce, you can visit their site <a href=\"https:\/\/unbounce.com\/\" target=\"_blank\" rel=\"noopener\">here<\/a> and follow a tutorial in making one by watching this video:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"flex-video widescreen youtube\"><iframe loading=\"lazy\" title=\"Unbounce: How to Create a Landing Page From Scratch\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/p6JljKqlwFc?feature=oembed&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&playsinline=1&enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Steps on How to Design a Landing Page<\/h1>\n\n\n\n<p>After learning how important a landing page can be for your future marketing campaign for your website, here are the steps you have to do in order to create one by yourself.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1. Choose the right landing page colors<\/h2>\n\n\n\n<p>In this step, you have to think about what kind of colors your landing page should have. Doing this will help give the viewer an image of how you want your product to look like how your marketing campaign should feel to people.<br><br>Make sure to choose one of the following color schemes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Monochromatic<\/h3>\n\n\n\n<p>This color scheme makes use of different shades of a certain pure color called a hue. If you included a color where you added white to the hue, it is called a tint.<br><br>Meanwhile, adding black instead would create a shade. Finally, adding black and white to a hue would create a tone.<br><br>Adding at least one tint, shade, and tone to a selected hue to a landing page will make it feel more relaxed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Complementary<\/h3>\n\n\n\n<p class=\"has-text-align-left\">To talk about this color scheme, let us take a look at <a href=\"https:\/\/instapage.com\/blog\/landing-page-colors-influence-on-landing-pages\" target=\"_blank\" rel=\"noopener\">this<\/a> color wheel.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><br><br><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"485\" src=\"https:\/\/lh4.googleusercontent.com\/qyTWUeHbe9XHFi60VD9kZyjPTvjzXl_CDeeYArtZv87T-FU3WR7NSdjkAjVW-fUdquMFauv8s1Xejch1pBdTULfOvCAhrqD6Yoj9GZitsXayuutLKVVfEjBjta8RL51Q8xNTcULy\"><br><br><\/p>\n\n\n\n<p class=\"has-text-align-left\">For this color scheme, you have to choose two colors that are opposite to each other in this layout.<br><br>Two examples were to choose green and red or blue and orange.<br><br>Using any of these pairs on a page will help make certain elements stand out when used properly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Analogous<\/h3>\n\n\n\n<p>For this color scheme, it would have to use colors that are next to each other on the color wheel.<br><br>Referring to the picture in the previous section, you can opt for either blue with blue-green and blue with blue-purple. You can also opt for yellow-green and green too.<br><br>Opting for any of these colors won\u2019t bring too much contrast to any elements applied in the landing page compared to using complementary colors but they will be as easy on the eyes as using monochromatic colors are.<br><br>After choosing which color scheme to use for this, follow these tips on how to apply it on your design:<\/p>\n\n\n\n<ol><li>Dedicate 60% of the colors you will use for your background as it will be the biggest part of the post-click landing page visually.<\/li><li>Then, dedicate 30% of the colors to your header, footer, and form as it will dedicate the second most visual space.<\/li><li>Finally, use an accent color from your scheme to highlight the most important elements on the page and it should not exceed 10%.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Use the right shape for your landing page layout<\/h2>\n\n\n\n<p>One of the most common mistakes in making your page layout is that you have to cram as much as you can in one page, such as the example by <a href=\"https:\/\/www.carters.com\/\" target=\"_blank\" rel=\"noopener\">Carter\u2019s<\/a> page below.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh4.googleusercontent.com\/uSDoT1qbr-LWCmozqrmX7opUkv_FBcQl1h8aPxIuMcnuQcz00y-FBZhUh91Gavuw-gKznH61BSA5ZodTT2vw16H73ioCRWOEus_czawD6JKCFjWnf-u-TooG1BCDm4845-48uIpm\"><br><\/p>\n\n\n\n<p class=\"has-text-align-left\">If you designate this as your landing page design and I were to look at it at first, I would be confused due to seeing the sidebar and the categories of clothes this website is trying to sell to me. I would not be able to notice their promotion for their newest kids\u2019 line either.<br><br>However, compared to this landing page shown below by <a href=\"https:\/\/www.bodenusa.com\/\" target=\"_blank\" rel=\"noopener\">Boden<\/a>, I can clearly see that they are known for children\u2019s clothes and that is the only focus on the page.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh3.googleusercontent.com\/g52e5nJuBVOqMeAXzQElRdod2URs7_SJs1VAg8qD0pgowID-AeiJFPIVuxbQl1vke-WusbxWliDSx5iPnZrcmftTraXiUXbe9V6og4c_-e_AVkm-t7EIjctzUjTvqx_c38OLIqan\"><\/p>\n\n\n\n<p>Notice the shapes used in the Boden landing page.<br><br>The main focus of the landing page commands most of the space. For this specific example, they were aiming to show that they are selling children\u2019s clothes and added a picture of a girl wearing one of their clothes.<\/p>\n\n\n\n<p>Then, the next largest thing on this page is the small white box next to the picture that says \u201cNew clothes seek a good home.\u201d Under it, it has \u201cColorful new styles just waiting to be taken for a twirl\u201d with three links to their different clothes categories.<\/p>\n\n\n\n<p>Based on these two landing pages, here\u2019s my tips when you have to design your landing page based on its shape:<\/p>\n\n\n\n<ol><li>Dedicate most of your area to give the visitor a good impression of what the site is about. Adding moving pictures can increase conversions as much as 80%.<\/li><li>Allocate space to add two meaningful lines of text to summarize what you want to sell or promote. The first line should be a hook for people to stay while the second line should be a sinker to convince them to buy in the future.<\/li><li>Avoid adding too many elements to this page. Using Cartier\u2019s page as an example, doing this will help the visitor value your landing page\u2019s focus on a particular product or service that you are selling.<\/li><li>Adding links to your various social media pages can increase your chances to get a share of the 71% of millennials who would purchase something if it has been recommended online.&nbsp;<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Adjust your mobile landing page layout<\/h2>\n\n\n\n<p>Now that you have used the first two tips and the video I shared in order to fill out your landing page\u2019s design, your next step is to create one that works on mobile phones.<\/p>\n\n\n\n<p>Doing this will help you get as much share of more than half of web traffic worldwide as it continues to increase from 50.3% in 2017 to 52.2% last year.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.twillory.com\/\" target=\"_blank\" rel=\"noopener\">Twillory<\/a>, a brand that has applied this principle, was able to manage a conversion rate of 46.85%. They also opted for a stripped-down version of their desktop site, which resembles the latter\u2019s visual appeal without sacrificing load times on smaller devices.<\/p>\n\n\n\n<p>While using Unbounce to create your own landing page for these is as simple as clicking on the \u201cMobile\u201d tab at the bottom of the screen. You can also opt to use its Layout Assistant feature to automatically generate one for you and start from there as well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/LpIV6i4GN-g2JusOQu_MXOHQvig4KWRQShL2_fiPgjRn-kzyRHSjADFCTfdpVs5NiGljEjzsQVMR20x_DmMNPvOpdKF54Ul6t9Lq4Hc-7FfQJ-l8r42J0RIZozo8592c8VmgueLe\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/-MsN8MoPAYezqyg5-TvvZjYq3h12LpT5PEz0-JmAxtUkk5Auew1Px2q6o0V0QFIOJDd3U57-9a_-ksPcVQbiHIcqK1QJ5qBsO5txlsmMe5WfgGoaB-atgOCmPQDD0MdhEuwzVJyR\" alt=\"\"\/><\/figure>\n\n\n\n<p>Make sure to click the toggle button next to \u201cMobile\u201d to enable this view for your landing page before going to the Layout Assistant. Then, save your current project.<br><br>Unbounce can still let you create your own mobile landing page with or without using the said tool. Aside from that, you can also hide page elements you don\u2019t want to display.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configure your landing page settings<\/h2>\n\n\n\n<p>After finishing your layout, you would have to do three steps before launching your page.<\/p>\n\n\n\n<ol><li>Add a <a href=\"https:\/\/alejandrorioja.com\/ubersuggest-review\/\">keyword-focused<\/a> page title and meta description. Doing this will help search engines index this page quickly while increasing your chances to get more conversions once it is launched.<\/li><li>Create a personalized confirmation page such as a \u201cThank You\u201d page for your form. Doing this will not only increase your viewer\u2019s trustworthiness to your website but also be able to have another opportunity to make your viewer remember you for your product at the same time.<\/li><li>Add a listener that would indicate which part of your landing page that a user should click to qualify as a conversion. Doing this will help you automatically track how effective your page is once it is launched.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Set your landing page URL<\/h2>\n\n\n\n<p>If you have finalized your desktop and mobile layout for your landing page, the final step is to make it live! Here are the following steps on how to do so:<\/p>\n\n\n\n<ol><li>Log-in to Unbounce using your credentials and set up your CNAME with your website\u2019s original domain hosting service.<\/li><li>Go to \u201cDomains\u201d -> \u201cAdd your first domain\u201d<\/li><li>In the window that shows up, add the domain you want to use with the landing page you have made.<\/li><li>Click \u201cYes, I want to add a custom domain.\u201d<\/li><li>Choose \u201cI will set up the CNAME record myself\u201d and click \u201cContinue.\u201d<\/li><li>Go to your Unbounce landing page\u2019s overview screen.<\/li><li>Click the \u201cChange URL\u201d button<\/li><li>Select your domain in the drop-down.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Add tracking and custom scripts<\/h2>\n\n\n\n<p>If, for example, you had a custom landing page made in the past and you wanted to incorporate a better design but using the same files you had before, you can opt to import these to your Unbounce account.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importing JavaScript and jQuery<\/h3>\n\n\n\n<p>To import JavaScript or jQuery to your landing page, click the \u201cJavascripts\u201d button and paste the custom script inside. Then, choose between adding it \u201cBefore Body End Tag,\u201d \u201cAfter Body Tag,\u201d or \u201cHead.\u201d<br><br>Make sure to enable jQuery for your landing page first before proceeding with importing them.<\/p>\n\n\n\n<p>Also, the script will not run while the page is still in the editor, thus you can only see it once it is published.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importing CSS<\/h3>\n\n\n\n<p>Similar to how to import JavaScript and jQuery in the previous section, what you have to do in order to include a CSS file is to click \u201cStylesheets.\u201d<\/p>\n\n\n\n<p>Then, you can paste your custom CSS in the dialog that follows.<\/p>\n\n\n\n<p>After adding, your Properties panel will update with the contents of the CSS file that you just drew up and you can change it graphically there too.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Custom HTML or Widgets<\/h3>\n\n\n\n<p>If you want to add something like a slides viewer or a PDF viewer to your landing page, follow these steps to add it while in Unbounce\u2019s editor:<\/p>\n\n\n\n<ol><li>Drag the Custom HTML widget from the object toolbar to the spot you want it to appear on.<\/li><li>In the dialog box that appears, paste your script\/code for your widget.<\/li><li>Click \u201cSave Code.\u201d<\/li><li>Stretch the Custom HTML to the correct size.<\/li><li>Save the page.<\/li><li>Check how it works using the \u201cPreview\u201d button. If it does not show up, that only means that it can be viewed once it is published.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Integrate with your marketing toolset<\/h2>\n\n\n\n<p>While using the Unbounce editor, you can include the following widgets to your landing page in order to maintain it easily. In this tutorial, I will cover integrating Google Analytics and Zapier.<\/p>\n\n\n\n<p>To find other applications you can integrate with Unbounce, check <a href=\"https:\/\/documentation.unbounce.com\/hc\/en-us\/categories\/200231284-Integrations\" target=\"_blank\" rel=\"noopener\">here<\/a> for a list of instructions of which modules are supported.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Integrate Google Analytics<\/h3>\n\n\n\n<p>If you want to include Google Analytics to your landing page, your first step is to get your website tracking ID from Google Analytics. For more information about that, read <a href=\"https:\/\/support.google.com\/analytics\/answer\/1032385?hl=en\" target=\"_blank\" rel=\"noopener\">this article<\/a> from Google Support.<br><br>After that, go to \u201cSettings\u201d -> \u201cScript Manager\u201d -> \u201cAdd your first script.\u201d In the pop-up that shows up, select \u201cGoogle Analytics\u201d and fill in the details before clicking \u201cAdd Script Details\u201d as shown in the picture below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/8hucsWyLmv57iavUrfqLqPIGzRT_PONwcD7DlTentaO4ZOZ6IVGuAJ0xi2kcEoE1UZYGnl1w7zVCSjjtiVV__tUn8a-N2aY7dmWMlbJzBPrtrBsvU04YK8UlqxOwp-YzSTQMkrW8\" alt=\"\"\/><\/figure>\n\n\n\n<p>Fill in the form under \u201cScript Usage\u201d field of the domains you want to apply the tracking script to, as shown in the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Ubdk7cxKNBWEFJ5mXnaZj0U8V-3RqDbqoTWm7Vu_8OE1gPFfGS3Ym-lSvNXgPMcqhLszaTV1c6ZUx2dR1Gpvc0sj_p0cOhnvJDFBMPMNYhZL-FJkjKAHRh0upXoqoQlYLC_Fb2wR\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Then, click \u201cSave and Publish Script.\u201d<\/p>\n\n\n\n<p>If you want to learn more about how to set your conversion goal to your Google Analytics, follow <a href=\"https:\/\/documentation.unbounce.com\/hc\/en-us\/articles\/203509974\" target=\"_blank\" rel=\"noopener\">this tutorial<\/a>. If you want to add Google Tag Manager, follow <a href=\"https:\/\/documentation.unbounce.com\/hc\/en-us\/articles\/203814014\" target=\"_blank\" rel=\"noopener\">this tutorial<\/a> as well.<\/p>\n\n\n\n<p><strong>Integrate with Zapier<\/strong><\/p>\n\n\n\n<p>If you want to use Zapier to connect to other apps such as Google Docs and Trello, first you need to have a Zapier account. Aside from that, make sure you already have a published page, sticky bar, or overlay in your Unbounce account as well.<\/p>\n\n\n\n<p>Next, choose which page you want to add a module using Zapier integration in. Then, scroll down to see a list of possible integrations you can add.<\/p>\n\n\n\n<p>Then, click \u201cPowered by Zapier\u201d and in the pop-up, log-in using your Zapier credentials. After that, click \u201cAuthorize\u201d when asked for permission for Unbounce to access your data for it.<\/p>\n\n\n\n<p>Then, you are redirected to the full list of applications you can add to your landing page. Click on the plus symbol next to them to add them.<\/p>\n\n\n\n<p>Then, read through what the integration entails and click \u201cCreate this Zap\u201d if you will allow them to connect any of their modules with your Unbounce site. After that, log-in to your account under \u201dConnect an Account\u201d in the \u201cSelect Unbounce Account.\u201d<\/p>\n\n\n\n<p>Select your client ID, landing page, overlay or sticky bar once you are done then click \u201cContinue.\u201d After that, go through the screens and when you reach a step that asks you to turn on the Zap, click the toggle to keep it on.<\/p>\n\n\n\n<p>Back in the Page Overview section, all successfully configured Zaps will appear on top of the \u201cPowered by Zapier\u201d tab section. They can appear as any one of the following:<\/p>\n\n\n\n<ul><li>On<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/eq1QkNeyTDCtrwuZobfM1Vdsax_mY8S_mWKWrplvGHSxAfdCNVzbFAlU96F5en1-fwJOkaOwO29FpBFgQEhxz7xJo5g5aLrY8vKNxlk1CNpzlM8hekOGXKXXR2d6tbj0pBE3D5HR\" width=\"624\" height=\"69\"><\/li><li>Off<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/x4bMkkCn7o7bnC0SeaV1H_JgrFYISKA5oS1s0E23VcvKjzV6-QKKZNYbYdXMOymQjXnwONmZYJI4_MaQQutOxv_Uj86gIaduZo8Ds-n00GO6Vx7iZ9fpDJzNupHYQiw4Hm19ud9A\" width=\"624\" height=\"71\"><\/li><li>Draft<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/n3ov_oBeE6JjHvxZw92fbLObhCK9KRb5ldqYAwwJKYlUvwJN6u5EWt8l0Q5QEVnI4sxNuwu6JisGMEotQsVAFz9dLR5reJG6gPUuUSmNhLvqULuxyR9wmWUKEmil-n0cJeZ9JsvR\" width=\"624\" height=\"69\"><\/li><li>Unavailable<\/li><\/ul>\n\n\n\n<p>For more information about this, check this <a href=\"https:\/\/zapier.com\/learn\/getting-started-guide\/\" target=\"_blank\" rel=\"noopener\">guide<\/a> from Zapier themselves or <a href=\"https:\/\/documentation.unbounce.com\/hc\/en-us\/articles\/115005152226-Setting-Up-Integrations-Powered-by-Zapier-\" target=\"_blank\" rel=\"noopener\">Unbounce<\/a> or contact their customer support immediately if there is any trouble.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preview and publish<\/h2>\n\n\n\n<p>Finally, if you want to publish your site, click on the \u201cPreview\u201d button in the editing screen of your landing page and hit \u201cPublish.\u201d<\/p>\n\n\n\n<p>If you transferred this site from WordPress to Unbounce, add their WP landing page plugin and it is all set to help you redecorate your website at ease. You can read more about that <a href=\"https:\/\/unbounce.com\/product\/integrations\/wordpress\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<p>In summary, having a landing page for your website is awesome for converting visitors into customers. Aside from that, it can help with promoting a certain campaign, product, and\/or service.<\/p>\n\n\n\n<p>Then, designing using color theory and shapes will increase your chances of getting your point across to your audience within 3 seconds. Finally, I helped you navigate your way around Unbounce to make it a reality.<\/p>\n\n\n\n<p>Did this help you in your business marketing strategy? Read some of my other articles to get more ideas on how to rise above the others this 2020:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/flux.la\/how-to-ab-test\/\" target=\"_blank\" rel=\"noopener\">How to A\/B Test<\/a><\/li><li><a href=\"https:\/\/alejandrorioja.com\/create-million-dollar-ecommerce-business\/\">How to Make a Million Dollars with your E-Commerce Store<\/a><\/li><li><a href=\"https:\/\/alejandrorioja.com\/best-ecommerce-platforms\/\">The top E-Commerce Platforms<\/a><\/li><\/ul>\n\n\n\n<p>Have you made a landing page? Comment down below about your experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I was putting up Flux Ventures, I thought I had to put up a good website. Doing this is part of my strategy to not only get lots of people interested but also increase my prospects at the same time. And I realized that the first hurdle is its landing page. While I was&hellip;<\/p>\n","protected":false},"author":1,"featured_media":22036,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[113],"tags":[],"lang":"en","translations":{"en":22033},"uagb_featured_image_src":{"full":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page.png",1200,675,false],"thumbnail":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-150x150.png",96,96,true],"medium":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-300x300.png",300,300,true],"medium_large":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-768x432.png",768,432,true],"large":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-1024x576.png",1024,576,true],"1536x1536":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page.png",1200,675,false],"2048x2048":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page.png",1200,675,false],"post-thumbnail":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-80x75.png",80,75,true],"goodlife-thumbnail":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-80x75.png",80,75,true],"goodlife-grid":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-320x270.png",320,270,true],"goodlife-latest":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-320x225.png",320,225,true],"goodlife-latestshort":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-320x170.png",320,170,true],"goodlife-vertical":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-320x420.png",320,420,true],"goodlife-gallery":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-320x150.png",320,150,true],"goodlife-galleryvertical":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-320x350.png",320,350,true],"goodlife-poststyle1":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-770x433.png",770,433,true],"goodlife-thumbnail-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-40x150.png",40,150,true],"goodlife-thumbnail-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-160x150.png",160,150,true],"goodlife-thumbnail-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x18.png",20,18,true],"goodlife-grid-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-160x540.png",160,540,true],"goodlife-grid-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-640x540.png",640,540,true],"goodlife-grid-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x16.png",20,16,true],"goodlife-latest-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-160x450.png",160,450,true],"goodlife-latest-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-640x450.png",640,450,true],"goodlife-latest-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x14.png",20,14,true],"goodlife-latestshort-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-160x340.png",160,340,true],"goodlife-latestshort-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-640x340.png",640,340,true],"goodlife-latestshort-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x10.png",20,10,true],"goodlife-vertical-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-160x675.png",160,675,true],"goodlife-vertical-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-640x675.png",640,675,true],"goodlife-vertical-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x26.png",20,26,true],"goodlife-gallery-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-160x300.png",160,300,true],"goodlife-gallery-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-640x300.png",640,300,true],"goodlife-gallery-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x9.png",20,9,true],"goodlife-galleryvertical-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-160x675.png",160,675,true],"goodlife-galleryvertical-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-640x675.png",640,675,true],"goodlife-galleryvertical-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x21.png",20,21,true],"goodlife-poststyle1-small":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-385x217.png",385,217,true],"goodlife-poststyle1-2x":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page.png",1200,675,false],"goodlife-poststyle1-mini":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-20x11.png",20,11,true],"woocommerce_thumbnail":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-385x217.png",300,169,true],"woocommerce_single":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page-100x100.png",100,100,true],"web-stories-poster-portrait":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page.png",640,360,false],"web-stories-publisher-logo":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page.png",96,54,false],"web-stories-thumbnail":["https:\/\/alejandrorioja.com\/wp-content\/uploads\/2020\/05\/How-to-design-a-landing-page.png",150,84,false]},"uagb_author_info":{"display_name":"Alejandro Rioja","author_link":"https:\/\/alejandrorioja.com\/author\/alerioja\/"},"uagb_comment_info":7,"uagb_excerpt":"When I was putting up Flux Ventures, I thought I had to put up a good website. Doing this is part of my strategy to not only get lots of people interested but also increase my prospects at the same time. And I realized that the first hurdle is its landing page. While I was&hellip;","pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/posts\/22033"}],"collection":[{"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/comments?post=22033"}],"version-history":[{"count":0,"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/posts\/22033\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/media\/22036"}],"wp:attachment":[{"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/media?parent=22033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/categories?post=22033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alejandrorioja.com\/wp-json\/wp\/v2\/tags?post=22033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}