Streaming live at 10am (PST)

How to add 3 boxes for price-points


#1

Here:

https://www.screenmailer.com/v/j4y97avDIa8jzVU


#2

You can create three div-s, assign them float left + right margin to keep distance between then; then you style them to look like those boxes. You can either assign them fixed width or 33% (given that you put the three of them inside a parent div with 100% width).


#3

How do I style them to look like those boxes?


#4

Well, you start with re-creating the borders - make the same borders using the "Borders" section in the paintbrush icon column on your right-hand screen; then add some padding and then add another div inside for all the remaining content.


#5

Hi Tim,

I recreated the pricing boxes you were looking for, here is the project:

https://preview.webflow.com/preview/lahwf?preview=c7a43bb0e24fb4f42b58f54ac5656f41

A few things i used:

How to wrap a text in a span:

Highlight the text you want to have different styles, click on the brush tool on the right, give it a new class name, for example: Price text and style it!.

Also, for the little line you were looking for, drop a div where you want the line to be, and style it like so:

One little thing, have the width for the 3 boxes set on auto, if it's not on auto it will most likely break the responsiveness.

Hope this helped!

Michael


#6

Hi Michael, thanks for your reply, here are the things I'm still having problems with:
https://www.screenmailer.com/v/vl6stLLKvaVuQaM

Also, Michael can you please answer this too? I've asked it a couple times to other people but have not yet received an answer that shows how to create the "Features" section where the user is taken to a separate URL for each feature she clicks on. Here it is explained more:

https://www.screenmailer.com/v/BmdwR0ysf5Iaruw


#7

For the second question do you mean this?

http://interactions.webflow.com/ (Example 3)


#8

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