Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
Isaac Rudansky
Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
Isaac Rudansky
Lesson Info
32. Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
Lessons
Laying the groundwork for good design
13:23 2The Myth Of The Perfect Landing Page Conversion Rate
12:05 3The 3 Main Types of Landing Pages and How To Use Them Effectively
18:57 4Business Models and Understanding Your Conversion Actions
06:04 5The AIDA Sales Funnel and The Online Decision Making Process
16:48 6The Awareness Stage of the Funnel ... Where It All Begins
17:26 7The Interest Stage of the Funnel ... Tell Me More
14:10The Desire Stage of the Funnel ... I Want What You Sell
12:44 9The Action Stage of the Funnel ... I'm Going to Buy What You Sell
09:05 10The Fogg Behavior Model and how it Applies to Good Landing Page Design
19:25 11Making Your Landing Page Design Memorable
12:44 12Quiz: Landing Page Design Fundamentals
13The Primacy of Product and The Concept of Usability in Landing Page Design
15:23 14Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks
11:17 15The 5 Second Usability Test in Landing Page Design (and how you can use it now)
12:25 16The Art and Science Behind Designing High-Converting Calls To Action (CTA's)
18:29 17Readability and Visual Hierarchy Landing Page Design
19:50 18Respecting Web Conventions in Landing Page Design
13:22 19Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates
19:53 20Information Architecture and Accessibility - Landing Page Design Best Practices
19:51 21Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices
15:34 22Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices
08:43 23Dedicated Landing Page Design Best Practices (Part 1)
14:57 24Dedicated Landing Page Design Best Practices (Part 2)
12:18 25Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices
26Using Scarcity to Improve Conversion Rates on Your Landing Pages
09:46 27Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages
12:07 28Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory
18:56 29User Scenarios and Contextual Perception in Landing Page Design
16:37 30Quiz: Principles Of Persuasion in Conversion Rate Optimization
31My Favorite Landing Page Builders and Getting Started With Our Unbounce Page
10:02 32Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
07:28 33Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool
16:25 34Working With Background Imagery in Landing Pages and Developing Our Hero Section
15:36 35Creating a Form, Action Block, and Finishing the Hero Section in Unbounce
19:27 36Discussing Landing Page Design Changes and Creating our Primary Content Section
16:17 37Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce
10:42 38Publishing Your Unbouonce Landing Page on Your Custom Domain
03:43 39Adding Custom CSS in Unbounce to Create Professional Drop Shadows
06:03 40Making Your Landing Page Design Work Better With Custom Javascript Snippets
08:08 41Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines
02:30 42Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form
03:30 43Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights
12:20 44Integrating Your Unbounce Form Submissions With Your Mailchimp Account
09:06 45Quiz: Building a High Converting Landing Page From Scratch
46Wester Computer Audit (Part 1)
08:28 47Wester Computer Audit (Part 2)
09:16 48Wester Computer Audit (Part 3)
15:19 49Wester Computer Audit (Part 4)
13:52 50Quiz: Landing Page Audit in Action
51Conclusion
02:52 52Final Quiz
Lesson Info
Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
How do you design fans and welcome back, let's take a few seconds to go over the main navigational structure of your own bounced page builder. The most important elements you're gonna be looking at is what's going on here on the left hand side and on the right hand side on the left hand side you have your tools panel. If you've ever use Photoshop very similar right? Basic tools, you have sections, one bounces built based on sections, boxes within sections and all these different elements within the different page sections. Okay, so we have forms, video embeds, custom html, social widgets, images, text and buttons. This is all done by Dragon Drop and we're gonna take a look at that in a second. Of course on the right hand side are the different customizable elements of whatever um whatever element here you are under, if I'm working on a section, I'll be able to see how I can customize that section over here right now. I'm at the main page Properties panel um and I could customize differ...
ent elements of my main page so things like the title of the page, meta description, keywords, the background of the page, the default textiles, all that type of stuff. Um Properties is great out right now, but if I were to go into, let's say if I had a background image, I'll be able to look at the properties of that background image and then goals of the page or what is what my actual conversion goal is going to be but we can't have that set up yet until we actually have a form on the page. Okay, um at the top you have your basic tools panel where you can move elements up and down backwards and forwards, you can copy and paste elements, duplicate elements undo and redo all the different basic tools that you're familiar with variants is where you're gonna be able to toggle through your different variations of elements on the page. So the whole idea with unbound is being able to say test two different headlines. So I might have variant A and variant B with two different headlines or two different color schemes or you know, two different form submissions, two different form layouts. Things like that overview is gonna bring me back out of the page builder, back to the overview of the page on bounce, brings me back to the, my main login down here, we can toggle between mobile view and we're gonna get a few different visit, we're gonna get a few different messages, will not show this again, of how the mobile view works, definitely read through some of these aspects. Um This is the mobile view of your page and we're gonna be able to to specifically customize the mobile view, we'll do that. Once we finish the desktop view, you could add custom CSS by clicking on the CSS style sheet, we'll do a little bit of that and you can add javascript. This is where we're actually gonna add our conversion tracking code from Adwords and we're going to go into that as well. Page content is going to expand a panel that has all the different elements on your page. So you'll be able to go, you could you could select a button obviously from the page itself, but sometimes you have very thin lines or you want to get a sense of your entire hierarchy hierarchy of all the different elements and you'll be able to see that in the left hand side under the contents panel and clicking again to get that, get rid of that and clean everything up here. Okay, so let's get I've made a couple decisions about my site for this landing page and what I want to do is have a boxed layout. What that means is that we're not going to have the background images and the background color span the entire width of the browser plane. Right? A lot of times you see these full width background images um and background layouts But we're not going to do that. We're gonna have a boxed layout where all the content is contained in the main section here. And you could see that with these blue guidelines now on bounds, defaulted us to 760 pixels when we first started out. Right 760 pixels and you can also change your guide settings by showing page guides or I always show my page guides section guides will c sections in a second and out of bounds warning when I stretch something that goes out of my main content area. So I usually keep all these three things selected for the sake of building the page. Okay, once again, if I, if I rushed through these different elements here, it's because it's all basically simplistic. Whatever you don't understand now, you're going to get a sense as we just follow along and create the page. But the main thing here is twofold one, learning just the technical use of all these different unbound options, but that's, you know, it's going to become second nature to you as you just play around with unbound. But the main thing is just talking out the process, right? So this is very free association. I don't have a script, I'm not reading off anything, I honestly haven't even planned out the content yet. In my head, this is gonna literally be me building a landing page, let's say for a client. And I'm just gonna talk out all my decisions as I go along. So if it's a little bit messy, uh that's kind of intentional because I kind of want to let you in to just see my process without it being too scripted or too stilted or anything like that. So what I wanna do is I want to increase the width of this page because 760 pixels is smaller than most desktops. Okay, so I think I'm gonna want to go to like 1100 pixels and I just hit enter and then these blue lines re re snap to 1100 pixels because that's that's really you're very, you're very rarely going to have any desktop today That cannot fit pixels in the browser plane. So that's what I want to do. Honestly, I'm not really sure why unbound still gives you 760 pixels but you know it's okay. I'm not going to write up any title meta description. I'm going to save that for afterwards. My background property. Okay, so this is gonna be the background of decides the page. So I'm going to want to make this a light great already kind of is a light gray. Maybe a little bit lighter and here we're good to go. You can change the opacity of that. Right? I could go up and down and here are my default textiles. Black and blue for a link. We can leave that together. We can leave that here for now as well. I'm going to end up changing these actual content sections to be either white or with a background image or things like that. And just the main idea is to have the sides of the page be gray. So let's go ahead and add our navigational element. Right? We're gonna have our header. Every single page needs to have a header. We're not going to have navigational elements because there's a dedicated landing page but we will have our logo and we might have some trust factors where those those traditional navigational links will be. So the first thing I need to do is add section everything it unbalances based on sections. You can't even go in. If I'm trying to drag text, you can't even drag text. I can't drag a form. The only thing that's available to me is a section. So I'm just gonna click section and literally just drag it and drop it right in. Okay. And now a few things, a few different things happened, it defaulted with a white background color um and we can see that here. It now gives me the options too, modify the sections side. So I could drag this up and down to modify the size of the section. I can also grab these little handles here off to the left hand side to change the padding of the of the um following section. So where should the content start on the section below it? So I'm gonna leave that together for now. And obviously there's gonna be a header section so it's going to be relatively small. Right? And now I need to go and upload a logo but I don't have a logo yet. Right? So we're gonna build a logo together from scratch. So I'm gonna go online. I'm gonna find some potential iconography that I could use. I might buy something and then we're gonna jump in Photoshop and create a logo, Maybe a little bit of a tagline. Um And then we're gonna upload it and we're gonna use the image tool and unbound to drop it in. So I'm gonna spend a few minutes and just finding that iconography so you guys don't have to, you know, sit around here waiting till I find something that is appropriate. But I will show you how I build the logo in Photoshop just in case you're interested. You might not be, but it'll be pretty quick. I'm sure it'll be fun. So I will see you guys very shortly in the very next lecture.
Class Materials
Ratings and Reviews
a Creativelive Student
Great Job!! Isaac's energy is contagious, he is insightful and engaging. It is a lost of valuable content and I feel I learned so much from him in this short time. He is a reason I will end up with the subscription so I can watch this course again along side of his other courses. My only complaint was live streaming kept turning off and I missed information.
Student Work
Related Classes
UX Design