WooCommerce Buttons Styling for Divi
Adding WooCommerce to your Divi website means there are a lot more buttons you’ll want to style. Divi does add some styles to your WooCommerce buttons, but that said, they won’t look great out of the box for several reasons. Based on your color selections...
Upgrade Your Divi Shopping Cart – Divi Tuts
The shopping cart is ubiquitous on ecommerce sites. Divi’s shopping cart makes it very apparent you have a Divi website. The icon doesn’t have configurable options. Never fear, you can easily add pizzazz to your shopping cart as you break the Divi mold and...
Update Your Contact Form: Linked GDPR checkbox, Columns for Options, Success Message Styling – Divi Tuts
The Divi contact module is much more extendable than people give it credit for, but documentation is spread across several posts and support threads. Here are a few lesser known configurations and some of our own simple customizations that can enhance your contact...Multi-Color Divi Menu Backgrounds in 2 Minutes – Divi Tuts
Here’s a quick and easy video tutorial on adding a background to your Divi primary menu items and then giving each item a different color. You’ll also want to add some padding to make the menu items look nice and evenly spaced. Open up your theme...
Divi Menu Position Tricks – Right align logo, Sticky Mobile Menu, Push Menu Below First Section
Divi is a beautiful theme. But we love customizing the header area so that our Divi websites doesn't look so out of the box. Below are code snippets you can leverage that affect the position of your primary menu and its elements. Swap Logo and Primary Menu If you...Latest Posts
3 Column Blog Grid Layout w/ Equal Heights, Grow, and Custom Borders (Divi Tuts)
Here’s a great way to customize your blog page and... Read more
Here's a great way to customize your blog page and category archives. In this tutorial, we show how to add the following:
- Equalize blog rows
- Three column grid layout
- Grow class with shadow on hover
- Featured image height crop on mobile devices
- Widget title borders
- Blog pagination borders
Once the blog page is complete, go to the Theme Builder under the Divi/Extra menu and create a new template. Click on the pencil icon in the body section and create a custom body area. Choose the column layout that matches the layout of the blog page. Add your sidebar in one column and the Blog module in another. In the settings for the blog, enable the "Posts for current page" option. In the advanced tab, add the following classes so that the design matches the blog page: trumani-blog et_blog_grid_equal_height. That's it!
Javascript
Credit: Divi Sensei [code lang="js"] /*Equalize Blog Columns*/ .bloggrid .et_pb_salvattore_content { display: -webkit-box; display: -ms-flexbox; display: flex; } .bloggrid article { margin-bottom: 20px !important; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .bloggrid .post-content { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bloggrid .column { margin-bottom: 20px !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }[/code]CSS
[css] /*** Begin Blog Customizations ***/ /* 3 Column Grid */ .trumani-blog .et_pb_salvattore_content[data-columns]::before { content: '3 .column.size-1of3' !important; } @media only screen and ( min-width: 981px ) { .trumani-blog .column.size-1of3 { width: 32% !important; margin-right: 1%; } } /* Hover Shadow & Grow */ .et_pb_post { box-shadow: 0 1px 2px rgba(0, 0, 0, 0); -webkit-transition: all 0.6s; transition: all 0.6s; } .et_pb_post:hover { -webkit-transform: scale(1.01, 1.01); transform: scale(1.01, 1.01); box-shadow: 1px 5px 14px rgba(0, 0, 0, 3); z-index: 1; } /* Shrink image on mobile */ .et_pb_image_container img { max-height: 350px !important; object-fit: cover !important; } /* Pagination border */ div.alignleft { padding-right: 5px; border-right: 2px solid #f06449;} div.alignright { padding-left: 5px; border-left: 2px solid #f06449; } /* Widget header */ h4.widgettitle { display: flex; align-items: center; text-align: center; } h4.widgettitle::before, h4.widgettitle::after { content: ''; flex: 1; border-bottom: 2px solid #f06449; } h4.widgettitle::before { margin-right: .25em; } h4.widgettitle::after { margin-left: .25em; } /*** End Blog Customizations ***/[/css]
WooCommerce Buttons Styling for Divi
Adding WooCommerce to your Divi website means there are a... Read more
Adding WooCommerce to your Divi website means there are a lot more buttons you'll want to style. Divi does add some styles to your WooCommerce buttons, but that said, they won't look great out of the box for several reasons. Based on your color selections in the theme customizer, you'll often see WooCommerce buttons disappear on hover, or they have arrow icons that look terrible because they aren't vertically center. WooCommerce buttons are the workhorses of your Divi eCommerce site. They convert you visitors into customers, so it's essential that they mesh with the rest of your Divi theme. To find the WooCommerce buttons, it's easiest to go through the shop process from start to finish and find them on each page. We'll have some suggestions for hooks and CSS on each page.
Try Out Some Examples Below
Here are WooCommerce Buttons per each page and how to style them by adding CSS taken from the video above. Be sure to add :hover whenever you want to style the button on mouse over. The Product Page WooCommerce Buttons - Add to Cart [css]button.single_add_to_cart_button.button.alt { color: white !important; } button.single_add_to_cart_button.button.alt:hover { color: purple !important; }[/css] - View Cart [css]a.button.button.wc-forward { color: white !important; }[/css] The Cart Page - Apply Coupon (if coupons are enabled) [css] button.button { background: #b8621b !important; color: #fff !important; } [/css] - Update Cart [css] button.button { background: #b8621b !important; color: #fff !important; } [/css] - Proceed to Checkout [css] a.checkout-button.button.alt.wc-forward { background: transparent !important; color: #b8621b !important; padding: 5px 30px !important; border: 4px double #b8621b !important; max-width: 70% !important; font-size: 15px; font-weight: 600; letter-spacing: 1.4px; } a:hover.checkout-button.button.alt.wc-forward { background: #b8621b !important; color: #fff !important; } [/css] - Return to Shop [css] a.button.wc-backward { color: #fff !important; padding: 5px 30px !important; text-transform: uppercase; } [/css] The Checkout Page - Apply Coupon [css] button.button { background: #b8621b !important; color: #fff !important; } [/css] - Place Order [css] button#place_order.button.alt { color: red !important; }[/css] Hide the Divi hover arrow icons: [css] .woocommerce #content input.button.alt:after, .woocommerce #content input.button:after, .woocommerce #respond input#submit.alt:after, .woocommerce #respond input#submit:after, .woocommerce a.button.alt:after, .woocommerce a.button:after, .woocommerce button.button.alt:after, .woocommerce button.button:after, .woocommerce input.button.alt:after, .woocommerce input.button:after, .woocommerce-page #content input.button.alt:after, .woocommerce-page #content input.button:after, .woocommerce-page #respond input#submit.alt:after, .woocommerce-page #respond input#submit:after, .woocommerce-page a.button.alt:after, .woocommerce-page a.button:after, .woocommerce-page button.button.alt:after, .woocommerce-page button.button:after, .woocommerce-page input.button.alt:after, .woocommerce-page input.button:after { content: none !important; } [/css]
Upgrade Your Divi Shopping Cart – Divi Tuts
The shopping cart is ubiquitous on ecommerce sites. Divi’s shopping... Read more
The shopping cart is ubiquitous on ecommerce sites. Divi's shopping cart makes it very apparent you have a Divi website. The icon doesn't have configurable options. Never fear, you can easily add pizzazz to your shopping cart as you break the Divi mold and set your website apart from the crowd.
Change the Shopping Cart Styles in the Theme Customizer
Make the color better suited to your theme. Grab visitors' attention by increasing the font size. [css] .et-cart-info span::before { color: #007ABB; font-size: 20px; } [/css]Does the Trumani Shopping Cart Look Different?
Yup, we use the Extra theme, not Divi. But both icons are part of the Elegant Icon Font set, which means you can use it, too. Here's how to replace the default icon with the alternative cart icon that appears in the Extra theme. In your theme customizer, add the following snippet. [css] .et-cart-info span:before { content:"\e015"; } [/css] Why even have a shopping cart as your icon? Give your Divi site personality. If you sell tools, maybe the toolbox is better suited for you. Sell software? Use the download icon. Here's a list of ideas to stand out from the crowd. Let me know if you can think of other good stand ins for the cart. Just swap in the characters in bold. I sell...
Software-->Download (\e092), Folder Download (\e05f)
Photos-->Camera (\e075), Camera_Alt (\e00f)
Presents-->Gift (\e073), Gift_Alt (\e008)
Groceries-->Bag (\e079), Bag_Alt (\e013)
Discounted Items-->Tag (\e07b), Tags (\e07c), Tag_Alt (\e017)
Tools-->Toolbox (\e085), Toolbo
x_Alt (\e021)
Need to add social media icons in the header? We've got you covered. Head over to Customize Social Icons in Top Header
Update Your Contact Form: Linked GDPR checkbox, Columns for Options, Success Message Styling – Divi Tuts
The Divi contact module is much more extendable than people... Read more
The Divi contact module is much more extendable than people give it credit for, but documentation is spread across several posts and support threads. Here are a few lesser known configurations and some of our own simple customizations that can enhance your contact form.
Full Width Contact Fields
This question rears its ugly head on the regular in the support thread. By default, most field types are 50% width. Converting them to full-width so that they span the length of the column is an easy change in the field’s design tab.
Link to Privacy Policy (checkbox)
This nifty trick may help you achieve compliance with the GDPR. Here’s the big caveat. YOU MUST USE THE VISUAL BUILDER. I have never used the visual builder to create or update a page, so this was a learning moment.
So, if you need a link to your privacy policy, simply add a checkbox field type, add one option and enter the text you want. Then add the text you want linked by selecting the link icon and adding the text and hyperlink.
Style Success Message (div.et-pb-Contact-message)
We can personalize our success message content, but not the background, font family, etc. To do so, open up your theme customizer and add something like this: [css] div.et-pb-Contact-message { background: #000; color: #fff; text-size: 24px; } [/css]Style or Hide Field Titles
By default, checkbox and radio fields must display the title or label. If you don't enter anything in the title field, it will simply display "New Field". Here's a way to hide the title in the theme customizer. You could also modify the css below to increase the font size or weight. [css] .et_pb_contact_field_options_title { display: none; } [/css]Columns for Radio / Checkbox Options
Do you have checkbox or radio field with a long list of options? They display single file by default, which can lead to a lot of white space, especially if you have four or more options. You can create columns by adding the code below. Go to the checkbox/radio field settings, select the advanced tab and insert the css into the main element checkbox. Adjust the column-count to increase the number of columns. Adjust the column gap to get your desired spacing.
[css]
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
[/css]
Multi-Color Divi Menu Backgrounds in 2 Minutes – Divi Tuts
Here’s a quick and easy video tutorial on adding a... Read more
Here's a quick and easy video tutorial on adding a background to your Divi primary menu items and then giving each item a different color. You'll also want to add some padding to make the menu items look nice and evenly spaced.
- Open up your theme customizer, plop in the css below, and change the hex codes to the colors of your choosing.
- Go to your primary menu in the appearance-->menus.
- Ensure the "css classes" box is checked on the screen options panel at the top.
- Add the ids (e.g. menu1, menu2) to the corresponding menu items and click save.
- Enjoy