Pricing section block

This lesson walks you through building a responsive pricing section that is consistent with other Pro Blocks in our system.

Instructions

Go to Assets and find Pro Blocks / Empty LP Section.
Right-click the section and detach the instance.
Use Swap Instance to change the slot to New Pricing Section.
Copy a Pricing Card using Ctrl + C (Command + C on Mac).
Paste it using Ctrl + V (Command + V on Mac).
Press Shift + A to auto-frame the cards.
Rename the frame to Flex with Ctrl + R (Command + R on Mac).
Change the layout direction from vertical to horizontal.
Add spacing-6 (24px).
Change the second card’s type to Primary.
Drag in another Empty LP Section for mobile.
Detach it using Ctrl + Alt + B (Command + Option + B on Mac).
Copy the Flex frame and paste it inside the mobile section.
Change its direction to vertical.
Delete the Slot.
Update the Breakpoint setting in pricing cards to Mobile.
Ctrl-click (Command-click on Mac) the first tagline you want to edit.
Hold Shift and select the next tagline.
Press Enter or click multi-text edit icon.
Repeat for the headline.
Select both frames by holding Shift.
Press Ctrl + R (Command + R on Mac) to rename them.
Name them "Pricing Custom / Desktop" and "Pricing Custom / Mobile".
Select both and click Create Component Set.
Add Pro Blocks / before the component name.
Rename the variant to Breakpoint.
You’ve successfully built a responsive pricing section.

Website Project (Lesson 4)

In this practice lesson we will build our website with Pro Blocks. We will also make some adjustments to match Pro Blocks with our overall styling and make the design more interesting.