Flexbox makes it easier than ever to create footers that look clean, adapt beautifully to different screen sizes, and are simple to customize in Divi 5. In this free pack, you’ll find 20 unique Flexbox footer designs, each built with Divi 5’s Flex layout system for precise alignment and responsive control. Whether you want to use your site’s existing global styles or start with a ready-made design, you’ll find both options here.
Preview
Let’s take a look at all 20 Flexbox Footers in this pack. This pack is free for you to download further down the post.
https://youtu.be/XutcUA0RCcs
Subscribe To Our Youtube Channel
Get all 20 Flexbox footers for free, including both Default and Prestyled versions. Each footer is ready to import into your Divi Library and use in the Theme Builder. Just download and start building.
What’s Included (42 Exports)
Once you download and unzip the folder, you’ll find all 42 layout exports neatly organized into Default and Prestyled versions as individual footers and as full “All Footers” packs.
Default – Individual Footers (20) → Uses your global styles.
Default – All Footers (1) → Full pack using your global styles.
Prestyled – Individual Footers (20) → Includes inline styling for an instant, ready-made look.
Prestyled – All Footers (1) → Full pack with inline styling applied.
How To Install The Layouts
Keep your download folder close by to start importing them to your Divi website.
1. Import Layouts Into The Divi Library
Go to Divi → Divi Library.
Once there, click the Import & Export button to install the files.
Look for the Flexbox Footer Layouts (All) file and click to import it.
Go to Divi → Theme Builder.
Create a new footer template or open an existing one.
Once you’re inside the footer area, you can use the Divi Library to select your footer layout of choice. Click the Add Layout button in the top left corner of the Theme Builder.
Select Saved Layout.
Click the footer layout you wish to add to the Theme Builder.
Click the Use This Layout button to load the footer.
Make sure to save your new footer and theme builder changes.
Default vs Prestyled: Which Should You Pick?
When you open the download folder, you’ll see two versions of every footer: **Default** and **Prestyled**. They’re built exactly the same way, the difference is in how they handle styling.
Default footers inherit their look from your global styles. Your brand colors, fonts, and button styles are automatically applied. If you’ve already set up your global styles, Default is the quickest way to add these footers to your site and instantly match your design.
Prestyled footers come with all their styles baked in: colors, fonts, and button designs are inline. They look exactly like the previews right out of the box. This is great if you’re building a quick demo, testing ideas, or you want to grab the exact design you see in the screenshots without touching your variables.
In short, go with Default if you want the footers to blend seamlessly with your existing site styles. Pick Prestyled if you want the ready-made look shown in the previews.
Divi 5’s Flexbox Layout System gives you powerful tools to tweak layouts while keeping everything responsive. Here’s how to customize these footers to fit your site’s style.
1. Select A Module For Customization
In the Theme Builder, hover over the layout and click on a module you want to edit, such as a text module, social media follow module, or button. The module’s settings panel will open, allowing you to modify content, design, or advanced options.
For example, you can click on the Text module and change the content of the module, or use Divi AI to help write content that will capture visitor attention.
In the module’s design tab, you can tweak fonts, colors, and more settings to match your branding.
Each Flexbox footer is fully customizable, including images, background colors, fonts, and more, allowing you to tweak the design to match your vision.
2. Adjust Flexbox Settings For Layout Control
Each footer is designed using Divi 5’s Flexbox Layout System, meaning you can change the direction of your layout, align items, or wrap them using extensive Flexbox controls. In the Theme Builder, click on a section or row you want to customize. For example, if you wish to adjust the space between design elements, select the column within the row, navigate to the design tab, and select the Layout dropdown menu.
You can adjust the value in the Vertical Gap field to control the spacing.
The Layout Direction options allow you to change the direction of your layout. For example, in a row’s settings, you can display all design elements in a row (horizontally), row reverse, column (vertically), or column reverse.
To control the alignment of flex items (columns, rows, or sections) along the main axis, you can adjust the Justify Content settings. Available options include aligning items to the start, center, end, space between, space around, or space evenly. These settings are determined by the container’s Flex Direction. For example, horizontal if Flex Direction is set to row, or vertical if it is set to column.
In the Align Items field, you can align design elements within a container to the start, center, end, or stretch.
The Flex Wrap setting controls whether flex items within a container stay on a single line or wrap onto multiple lines when there isn’t enough space to fit them all along the main axis. When choosing No Wrap, all flex items are forced to stay on a single line, even if they overflow the container.
Wrap ensures flex items automatically wrap onto additional lines when they can’t fit, and Wrap Reverse wraps content in the reverse order.
3. Add Links Where Necessary
Although every footer layout is ready to go out of the box, you’ll still need to add links. In this example, you’d add links to your social media follow module or privacy policy. Click to expand the module’s settings. Click on the first item in the content tab to reveal its settings.
Expand the link dropdown and add the link to your account or page in the Account Link URL field.
Be sure to save your footer before exiting the Theme Builder.
These 20 Flexbox footers are a quick way to speed up your Divi 5 builds, whether you’re working from your established global styles or starting with a predesigned look. Download them, drop them into the Theme Builder, and make them your own. Flexbox handles the alignment so that you can focus on design.
Leave A Reply