"We are revamping our Knowledge Base articles to serve you better. In case you find something unusual, do not panic. Reach out to our Support Team by submitting a ticket if you ever need some help.”

aljen

Gradients for Row and Column Backgrounds and Overlays

Color Gradients for Row and Column Backgrounds and Overlays You can create linear and radial color gradients for row and column backgrounds, background overlays, and row shape layers To use a gradient as a row or column background or background overlay: Choose Gradient as the background type, which exposes the Background gradient section, which is described in the following […]

Gradients for Row and Column Backgrounds and Overlays Read More »

Borders

Borders Rows, columns, and some modules have a Border section, as shown in the following screenshot. The Border section is divided into two main subsections: General These settings apply to the standard border around an object, described in the next section. Radius & Shadow These settings are described in the Radius & Shadow article. The device icon appears

Borders Read More »

Radius and Shadow

Radius and Shadow Radius and shadow effects apply whether or not a border line has been set in the General section. The Radius setting rounds the corners of the border box area to round the corners of either the border line, if you set one, or the edges of a row, column, or module background. When you click any

Radius and Shadow Read More »

Gradient With CSS

CSS Gradients The easiest way to add a gradient as the background color of a row or column is to use the color gradient background feature built into the rows and columns. However, if you have a special gradient effect you want to use, for example from a gradient-generating tool, here are some tips. Gradients can be

Gradient With CSS Read More »

Responsive Columns

Responsive Columns Columns in layouts can become quite complex, with multiple column groups in rows, child columns, and multiple modules in a single column group. See this guide on How Column Works Here’s a complex example of column stacking. This example shows a single row with two column groups. The first column group has two

Responsive Columns Read More »

Disable Responsive Behavior

Disable Responsive Behavior You may disable responsive behavior site-wide from the Global Settings. If you disable responsive behavior, the layouts you see on extra large devices will be preserved on large, medium, and small devices. When you disable responsiveness site-wide, you lose the following functionality: Column stacking doesn’t occur. Margins and padding stay the same on every device,

Disable Responsive Behavior Read More »

Responsive Device Toggle

Responsive Device Toggle The purpose of this article is to explain what the responsive device toggle is and how it helps you optimize your DropFunnels Editor layouts for specific devices. Introduction​ Responsive Device Toggle allows you to customize the appearance of your layout’s rows, columns, and modules on a per-device basis, using DropFunnels Editor breakpoints.

Responsive Device Toggle Read More »

Responsive Editor

Responsive Editor The Responsive Editing mode allows you to create and edit your layouts in a way that ensures they look great on all devices. Access Responsive Editing mode​ Enter Responsive Editing mode in any of the following ways: Step 1: Click the Responsive Toggle icon next to settings that have it for a row, column,

Responsive Editor Read More »

Breakpoints

Breakpoints CSS breakpoints determine how a responsive layout behaves on different devices based on its width. You can use them to control when your layout can be adapted or to show or hide content based on a device’s size. Desktop First Approach DropFunnels Editor takes a desktop-first approach. That is, you begin by designing for

Breakpoints Read More »