The DIVI page builder is rather good
Here at Portal Creative we like to build websites using WordPress. When we started building with WordPress, 99% of our website themes were built by hand using the Foundation framework. This gave us complete control of the layout and functionality of our web builds but as you can imagine it took quite a while to build each site and as more website jobs came in we were busier and busier.
Step forward a several (8) years, we were keen to not saddle our clients with stock themes that are limited in functionality, so we stumbled upon the quite remarkable DIVI theme. DIVI’s theme is a completely blank canvas which allows us to design and build completely bespoke websites from scratch. It has an excellent and well-designed front end page builder which is intuitive and fast. We’ve used just about every page builder going over the years but none of them can hold a candle to DIVI so much so that we use it exclusively for new client web builds.
CSS tweaks for the DIVI theme
As we’ve been using DIVI for some time now we’ve come across a few handy CSS tweaks that we tend to add to each build. From removing the top header box shadow to changing the font weight of the menu and to changing the website logo for certain pages. We’ll keep this page up to date with useful CSS snippets for the DIVI theme as we find them.
#main-header, #main-header.et-fixed-header {
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
box-shadow: none!important;
}
#et-top-navigation {
font-weight: normal;
}
#main-content .container:before {
width:0;
}
.et_pb_widget_area_right {
border-left:0 !important;
}
.et_pb_widget_area_left {
border-right:0 !important;
}
@media only screen and (max-width: 1200px) {
#top-menu {
display: none;
}
#et_mobile_nav_menu {
display: block;
}
}
#top-menu li ul {
width: 260px;
padding:0;
}
#top-menu li li {
border-bottom: 1px solid #ddd;
width: 100%;
padding:0;
}
#top-menu li li a{
width:100%;
padding:10px 20px;
}
@media only screen and (min-width: 768px) {
#et-info { float:right !important; }
}
.et_pb_widget_area_right {
border-left: 0 !important;
}
.et_pb_widget_area_left {
border-right: 0 !important;
}
.et_pb_map_container {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(100%);
}
@media only screen and (max-width: 767px) {
#logo {
height:auto;
margin-left:-15px;
width: 90%;
max-width: 90% !important;
}
}
DIVI CSS tweaks with classes
These little snippets require classes to be added to the section or row of your layout
.inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 10px;
}
.inline-buttons {
text-align: center !important;
}
.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;
}
