This code snippet provides a quick and easy guide to aligning the Search button in the Divi Engine Filter post module using CSS. While this post do not cover everything, this will get you going in the right direction and is perfect for Divi users who want to make their Filter module more visually appealing by aligning the Search button to the right.
How to Align the Search Button in Divi Engine Filter: A Simple CSS Snippet
Details
Snippets Demo
Code
Description:
Step 1: In the Advanced Tab of the Filter Post module, add the CSS class search_button_aligned.
Language: CSS
Where to add: Divi Module Advanced Tab
search_button_aligned
Description:
Step 2: Insert the following CSS code into the Theme Options > Custom CSS section of your website.
Language: CSS
Where to add: Divi Theme Options
.search_button_aligned div#divi_filter {
display: flex;
gap: 20px;
}
.search_button_aligned #divi_filter > form {
flex-grow: 1;
}
.search_button_aligned #divi_filter > form input {
margin-top:0;
}
Related Snippets
Easy | CSSJavascript
Implementing a Lightbox for ACF Images in Your WordPress Site
Jul 10 2024
Easy | CSS
Numerical Indexing for Repeated Fields in the Divi Machine Repeater Module
Feb 29 2024
Explore more from Divi Engine
Divi Form Builder
From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.
Divi Machine
Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.
Divi BodyCommerce
A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.
Divi Membership
Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.
Divi Machine Accounts
Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active
Divi Ajax Filter
Filter WooCommerce, Posts & Custom Posts without reloading the page.
Divi Mobile
Divi Mobile helps you create beautiful looking mobile menus without having to code.
Divi Nitro
Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.
Divi Protect
Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!
Divi Mega Menu
Improve the user experience of your Divi website with our Divi Mega Menu plugin by creating dynamic menus using the Divi Builder.