firdavs abdunazarov.

ProjectsCase studies & work

ShotsVisual explorations

About Writing Wall of Love Contact

Framer Beginner to Pro

Search lessons

Course overview

Curriculum walkthrough3:16
How to get the most out of the course2:04
Create a Framer account1:07
Course resources5:58

Intro to Framer Interface5:13
Frames & Absolute positioning7:19
Stacks & Relative Positioning6:53
Sizing: Fixed, Fill, Fit,5:12
Breakpoints5:05
Working with text & font styles9:11
Working with colors & color styles4:14
Images7:29
Icons & SVGs4:31
Introduction to Components8:45

Components module overview2:34
Setting up our project & first font styles9:14
Defining all font styles10:48
Setting color styles10:27
Hero section13:54
Working with logos in Framer6:27
Validation section & ticker component9:30
Feature highlights section16:24
Features section: designing the section15:08
Features section: turning into components8:30
Process: Designing the section14:15
Process: Adding interactivity7:12
Vertically rotating card: design11:07
Vertically rotating cards: interactivity11:21
Featured testimonial11:51
FAQ: designing cards13:21
FAQ: making card interactive7:37

Navigation & Footer Module Overview0:43
Designing the Navbar7:57
Mobile navigation15:41
Sticky & Fixed positioning8:08
Dropdown menu - desktop version11:47
Dropdown menu - mobile version6:20
Footer design13:06
Footer for mobile3:51

Module Overview (4. Pricing & masking)0:41
Designing Pricing cards11:26
Introduction to Masking6:51
Creating all Pricing cards12:34
Annual and monthly pricing9:11
Adding a transition effect10:32
Adding a background pattern6:25
Designing a circle background3:36
Designing CTA banners13:45

Blogs & CMS Module overview1:10
Setting up our first CMS collection8:11
Designing blog post page7:58
CSV importing & exporting3:13
CMS references12:11
Conditional views3:36
Creating our Blog card11:24
Connecting components to CMS6:40
CMS filtering & limits8:39
Adding a Back button6:08
Legal page with Previous & Next buttons11:43

Forms & 3D transforms Module overview0:55
Designing our first form16:39
Form states & sending data to email12:11
Connecting our form to Google Sheets4:19
Intro to 3D transforms7:33
Designing 3D cards12:34
Flipping on hover and click9:32
Connecting 3D card to CMS8:18

Animations & Effects Module overview0:57
Header Appear effect8:43
Hero circle scroll transform effect7:31
3D scroll transforms6:53
Scroll speed effect3:30
Scroll animation for Navbar2:35
Appear animation with a delay6:09
Feature section - Effects on component level5:45
Loop, Drag, Hover & Press effects10:37
Text effects5:49
Page effects6:53
Buttons hover effect8:09

SEO & Analytics Module overview1:26
Setting up a 404 page7:19
Project clean up11:26
SEO and Site settings13:12
Setting accessibility tags3:41
Connecting our site to a custom domain2:41
Checking SEO score and social images5:26
Framer analytics & connecting to Google Analytics4:38

Course overview
/
4. Pricing & masking
/
Adding a background pattern

Adding a background pattern

4. Pricing & maskingLesson 46 of 876:25

Search lessons

Course overview

Curriculum walkthrough3:16
How to get the most out of the course2:04
Create a Framer account1:07
Course resources5:58

Intro to Framer Interface5:13
Frames & Absolute positioning7:19
Stacks & Relative Positioning6:53
Sizing: Fixed, Fill, Fit,5:12
Breakpoints5:05
Working with text & font styles9:11
Working with colors & color styles4:14
Images7:29
Icons & SVGs4:31
Introduction to Components8:45

Components module overview2:34
Setting up our project & first font styles9:14
Defining all font styles10:48
Setting color styles10:27
Hero section13:54
Working with logos in Framer6:27
Validation section & ticker component9:30
Feature highlights section16:24
Features section: designing the section15:08
Features section: turning into components8:30
Process: Designing the section14:15
Process: Adding interactivity7:12
Vertically rotating card: design11:07
Vertically rotating cards: interactivity11:21
Featured testimonial11:51
FAQ: designing cards13:21
FAQ: making card interactive7:37

Navigation & Footer Module Overview0:43
Designing the Navbar7:57
Mobile navigation15:41
Sticky & Fixed positioning8:08
Dropdown menu - desktop version11:47
Dropdown menu - mobile version6:20
Footer design13:06
Footer for mobile3:51

Module Overview (4. Pricing & masking)0:41
Designing Pricing cards11:26
Introduction to Masking6:51
Creating all Pricing cards12:34
Annual and monthly pricing9:11
Adding a transition effect10:32
Adding a background pattern6:25
Designing a circle background3:36
Designing CTA banners13:45

Blogs & CMS Module overview1:10
Setting up our first CMS collection8:11
Designing blog post page7:58
CSV importing & exporting3:13
CMS references12:11
Conditional views3:36
Creating our Blog card11:24
Connecting components to CMS6:40
CMS filtering & limits8:39
Adding a Back button6:08
Legal page with Previous & Next buttons11:43

Forms & 3D transforms Module overview0:55
Designing our first form16:39
Form states & sending data to email12:11
Connecting our form to Google Sheets4:19
Intro to 3D transforms7:33
Designing 3D cards12:34
Flipping on hover and click9:32
Connecting 3D card to CMS8:18

Animations & Effects Module overview0:57
Header Appear effect8:43
Hero circle scroll transform effect7:31
3D scroll transforms6:53
Scroll speed effect3:30
Scroll animation for Navbar2:35
Appear animation with a delay6:09
Feature section - Effects on component level5:45
Loop, Drag, Hover & Press effects10:37
Text effects5:49
Page effects6:53
Buttons hover effect8:09

SEO & Analytics Module overview1:26
Setting up a 404 page7:19
Project clean up11:26
SEO and Site settings13:12
Setting accessibility tags3:41
Connecting our site to a custom domain2:41
Checking SEO score and social images5:26
Framer analytics & connecting to Google Analytics4:38

Watch on YouTube

PreviousAdding a transition effect NextDesigning a circle background

About this lesson

Create and implement custom background patterns for enhanced visual design.

firdavs abdunazarov.

Product thinker. Designer. Developer. I bring strategy, craft, and code together so your website doesn't just look good. It works.

NAVIGATIONHome Work Shots About Writing Framer course Travel Wall of Love Contact

SOCIALSX / Twitter LinkedIn Contra

© 2026 Firdavs. All rights reserved.

Privacy Policy Terms of Service