Streaming live at 10am (PST)

How To create 'guru'style capture page


#1

Hi guys

I am still relatively new to webflow but I am loving getting things to work

I need to create a Capture Page like this one, it is mine! http://your100kplan.com/lcp/leche

and http://your100kplan.com/lcp/new_york

I am not worried if the actual form has to appear on the page or about the animation that brings the box in although I am sure this can be done. I also don't need the 2 step Opt In (Click Button _ form appears although that would be great!)

What I would like to know is how do I create the semi transparent box that holds the info.

I have the hero/background in place but cannot see how to center the content. Do I need to use a 3 column layout but only use the centre column for my content?

What is the best way to achieve this effect/result

My form will need to have First Name, Last Name,Email Address, Telephone No plus a check box that confirms the opt in. I have the form figured out

Just need a little help with the design/concept

Thanks in advance

Paul


#2

Hi Paul, Webflow was made to do that.

Give the body height 100% and drag a section and give it height 100% too. Give this section your background set to Cover.

Drag a container in the section, give it a class name.

Drag a div in the container, give it the size of the popup you want, round corners, black bakground with transparency

Select the container and give it position relative then top 50%

and transform move up -50%

Now your container is vertically centered...

Do this and tell us from there (:


#3

Hi Vincent!

Thanks for that.. much easier than the way I was trying!

Is it possible to have a button in this Div Block that when clicked will load the Form?

Also, can you make the Div Block slide in using transformations or am I getting ahead of myself here! smile

Thanks for your help again

Paul


#4

Yes, select the div block, create an interaction, set the initial state by making it move up then opacity 0, then add a onLoad trigger, add a step with just a 300ms delay, then a step with opacity 100 and move to origin.

that's for the animation on enter.

then design another popup the same way, in the same container, make it position:absolute and place it on top of the first popup, then give it opacity 0 and display none. it's hidden. Affect an interaction to the button on the first popup, add a onclick trigger, affect different elemen" type the fidt opup name and make it siappear. ad another onclick trigger, affect different element and type in the name of the second popup, set it to display:box and opacity:100%...

See the process? Play around with that.


#5

Thanks Vincent

I will play around with that.

When I add a headline or text to the div block do I need to add it in another div?

I tried adding a heading but it moved out of the box.

Also should the box be px or % based for responsiveness?

Thanks again... promise I will not ask any further questions...today!

Thanks

Paul


#6

Vincent

This is what I mean about keeping the content in the box

https://preview.webflow.com/preview/lcp2?preview=66b204930734aee6bb54498e53e493d0

It look ok in the designer but not when viewing the site

any ideas

Thanks

Paul


#7

Hi Vincent

All looking good so far!

Not to sure how to do this part

any advice would be great

Regards

Paul


#8

Hi Vincent

I have got this working now!

However, when the second box comes onto the page it drops down lower that it should.

Any ideas why please here is my share link:

https://preview.webflow.com/preview/lcp2?preview=66b204930734aee6bb54498e53e493d0

I was not sure about this

What is display: box? I see display: Block

Thanks for ALL your advice and help

Regards

Paul


#9

Vincent

This is working great EXCEPT when the second element comes on the page it
does not go to the correct place. It is too low on the page.

I have tried everything I can think of including re-doing the whole page!

The end result is the same!

I am sure this is something simple BUT if anyone knows the answer I would be very grateful

Thanks

Paul


#10

take your form popup and put it up one step in the hierarchy... I mean place it under the Background element.

then give it top 50% and transforme move up -50% to center it. Should work smile

works!


#11

Thanks Vincent

I guess moving out of the same container as the other element did the trick!

Awesome.. I will now finish the formatting

Thank you so much!

Regards

Paul


#12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.