[Click Funnels Tuts] How To Make Full Width Rows

by | Nov 3, 2019 | Click Funnels, Tutorials | 0 comments

Why Do I Need/Want A Full Width Row?

There are several reasons that a designer / funnel builder might want to utilize a true full width row in Click Funnels. Some which might be:

  • Design a header that is more traditional like what is found in websites with the logo on the left and a navigation menu on the right.
  • Utilize more screen real estate (horizontally) for large sections of copy.
  • Create wider columns.
  • Create visual breaks in content.

 

Tutorial Overview

Time To Implement:

5 minutes

Skill Level Required:

Beginner

Tech Used:

Click Funnels
CSS
Chrome Browser
Dev Tools (Chrome)

Let’s Jump Right In!

Making any row full width in Click Funnels is super, super, ridiculously easy. Does writing code (in this case CSS) make you nervous? DON’T BE!!! It’s literally just a couple of lines that you’ll copy and paste in your “custom css” section in the funnel editor. 

The CSS selector and rules that you’ll implement are:

#YOUR-SECTION-ID .containerInner {
    width: 100%;
}

Follow the steps!

  1. Copy the above code
  2. Login to your Click Funnels account
  3. Navigate to the funnel you want to edit and open the editor
  4. Click on “settings” and select “custom css” from the drop down menu (see fig. 1)

figure 1

5. Paste the code you copied (from step 1) into the pop-up window that appears when you select “custom css”
6. Now, close the pop-up window and edit the Section that contains the row(s) you want to make full width. This is the “green” highlighted areas when moving your mouse around the content in your funnel editor.  See fig. 2 below

figure 2

7. When you click the “settings” icon (gear icon in fig. 2), a slide out menu will appear. Look at the bottom of the section settings screen and find the “#” (Get CSS Info) tab. Click on this tab (see fig. 3).

figure 3

8. When you click on the GET CSS INFO tab, a pop-up window will appear. This window contains the section title and the CSS ID Selector. Copy the CSS ID Selector (see fig. 4 – the blue highlighted text is what you’ll copy).

figure 4

9. Now that you have the Section’s CSS ID copied, once again, click on the “settings” tab in the upper left hand corner of your editor’s screen.
10. Select “Custom CSS” from the drop down menu.
11. Find the code that you pasted in there from the first steps. Replace the #YOUR-SECTION-ID selector with the ID selector you copied from step 8. Looking at the example screenshots, your code will look something like:

#section--61411 .containerInner {
width: 100%;
}

12. Click “Save” in the upper right hand corner!

Tutorial Wrap Up

That’s it in a nutshell! Now you know how to make any row truly full width inside of Click Funnels. 

Now, if you have multiple rows inside of different sections and you would like to make them all (or some of them) full width, you simply add each section ID (along with the .containerInner selector) to the code you pasted in with the selectors separated by commas. 

For example, if you had 3 sections that you wanted full width rows in, your CSS would look like the following:

 

#YOUR-SECTION-ID .containerInner, #YOUR-SECTION-ID2 .containerInner, 
#YOUR-SECTION-ID3 .containerInner {
width: 100%;
}

In the above example, you would replace each instance of #YOUR-SECTION-ID with the actual section IDs found in the section settings “GET CSS INFO” tab.

PRO TIP #1

If you are needing to find multiple section IDs for the above code, it can be a little quicker (easier) to utilize Chrome’s Dev Tools to look at the DOM (document object model) and quickly locate the section IDs. 

Are you looking for pro tips and tricks to have your funnels looking amazing? Subscribe to our “Click Funnels CSS Tricks” newsletter and get professional customization tips right to your inbox – 100% FREE…

Tutorials

Wordpress

Shopify

Bigcommerce

Click Funnels