Design Like a Pro: 4-Column Rows in ClickFunnels with No Code

Описание: For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com

Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-c...

Welcome back, this is Dan Havey with Ninja Hacks, and today we're answering Nicole's question from the ClickFunnels Official Group. She wants to know how to set something up that looks similar to an example she provided. I'll walk through the steps quickly because although Eduardo had a lot of it right, there's one issue: he mentioned using a text element and giving it rounded corners, but you can't do that without custom code. Let's dive into how you can do this in ClickFunnels.

First, we'll start by making a full-page section and then add a four-column row into that section. In your row, you can adjust the width and padding to fit your design. For our example, we don't need to worry too much about that. Next, we'll drop in a headline element and tweak the settings so we can see it better. Click on "Override" to ensure we control the stylesheet. Let's put in a gray background and white text that says "Week One."

Now, the problem is that there's no option to add rounded corners to a text element. Instead, we can use a button element. Add the button, set it to full width, and adjust the vertical padding to match Nicole's design. Change the background to a custom gray and make the text white. To create rounded corners, set the corners to 25 pixels. You might need to use a bit of custom code to disable any default actions: use `JavaScript:void(0)` to ensure the button doesn't trigger anything unwanted.

Moving on to the lower section, Nicole's design has two rows, so we need to add another four-column row. First, let's deal with the outer border. Adjust the column to remove any margin, add a border, and set the corners to 25 pixels. Add 20 pixels of padding at the top and bottom. Then, drop in a paragraph element for the text. If the text runs to the edges, add padding to the column.

For the sections with a lot of text, buttons aren't ideal, so we can add a section as an element within ClickFunnels. Set it to be 100% of the width of the bounding column. Inside this section, add a paragraph element and adjust the styling. Remove padding from the column, set a background color, and add rounded corners. Adjust padding as needed to achieve the desired look.

Lastly, for the remaining elements on the page, clone the section and add top margin to separate them. Adjust each cloned section to ensure the design matches Nicole's vision. If needed, add margins to the columns to create space between elements. Play around with the padding and margins until you achieve the desired layout. Remember, you can clone sections and drag elements to make the process quicker. If you have any questions, just let me know!