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

Bonus Materials with Purchase

Dedicated Landing Page Design Best Practices

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Isaac Rudansky

Globally-recognized Google Ads and PPC expert with millions in revenue generated across 450+ businesses internationally and over 900k students worldwide.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design Web Design Design Thinking Business

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.

2,000+ classes ranging from fundamentals to advanced techniques.

Getting Familiar With the Unbounce Page Builder and Adding Our Header Section

Getting Familiar With the Unbounce Page Builder and Adding Our Header Section

Lesson Info

32. Getting Familiar With the Unbounce Page Builder and Adding Our Header Section

Lessons

Laying the groundwork for good design

The Myth Of The Perfect Landing Page Conversion Rate

The 3 Main Types of Landing Pages and How To Use Them Effectively

Business Models and Understanding Your Conversion Actions

The AIDA Sales Funnel and The Online Decision Making Process

The Awareness Stage of the Funnel ... Where It All Begins

The Interest Stage of the Funnel ... Tell Me More

The Desire Stage of the Funnel ... I Want What You Sell

The Action Stage of the Funnel ... I'm Going to Buy What You Sell

The Fogg Behavior Model and how it Applies to Good Landing Page Design

Making Your Landing Page Design Memorable

Quiz: Landing Page Design Fundamentals

The Primacy of Product and The Concept of Usability in Landing Page Design

Eschew Obfuscation ... Clarity and the Quest for Fewer Question Marks

The 5 Second Usability Test in Landing Page Design (and how you can use it now)

The Art and Science Behind Designing High-Converting Calls To Action (CTA's)

Readability and Visual Hierarchy Landing Page Design

Respecting Web Conventions in Landing Page Design

Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates

Information Architecture and Accessibility - Landing Page Design Best Practices

Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices

Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices

Dedicated Landing Page Design Best Practices (Part 1)

Dedicated Landing Page Design Best Practices (Part 2)

Quiz: Principles of Good Landing Page Design: Examples, Case Studies & Best Practices

Using Scarcity to Improve Conversion Rates on Your Landing Pages

Principles of Persuasion - Reciprocal Concessions & Reciprocity in Landing Pages

Principles of Persuasion ... Anchoring and Cognitive Dissonance Theory

User Scenarios and Contextual Perception in Landing Page Design

Quiz: Principles Of Persuasion in Conversion Rate Optimization

My Favorite Landing Page Builders and Getting Started With Our Unbounce Page