How to Insert Divi Modules or Rows inside Other Divi Modules (without a Plugin)

CSS Snippets for Divi

Note: the hex colours below – change to your site’s colours.

/*—————[add grey opaque bg to slider text]—————*/

.et_pb_bg_layout_dark .et_pb_slide_description {
background-color: rgba(0, 0, 0, 0.5);
display: inline-block;
padding: 50px;
margin: 100px;
border-radius: 15px;
}

/*—————[change body font size]—————*/

body {
font-size: 16px;
}

/*—————[change submit button bg colour]—————*/

.et_pb_contact_submit:hover {background: #000000;}

/*—————[change social icons colour]—————*/

.et-social-icons body {
color: #000000;
}

/*—————[change dark-bg icon links colour]—————*/

.et_nav_text_color_dark, .et_nav_text_color_dark #et-secondary-nav a.hover, .et_nav_text_color_dark .et-social-icon a {
color: #000000;
}

/*—————[change light-bg button colour]—————*/

.et_pb_bg_layout_light .et_pb_more_button {
background-color: #000000;
color: #FFF;
}

/*—————[change footer info font weight & colour]—————*/

#footer-info a {
font-weight: 700;
color: #000000;
}

/*—————[edit slider height, padding for image & desc]—————*/

.et_pb_slider .et_pb_slide {
height: 444px;
}

.et_pb_slide_with_image .et_pb_slide_description {
padding-bottom: 0;
padding-top: 80px;
}

.et_pb_media_alignment_center .et_pb_slide_image {
bottom: auto;
top: 50%;
}

/*—————[change section padding to 0px]—————*/

.et_pb_section {
padding: 0px 0px;
position: relative;
}

/*—————[change top menu hover colour]—————*/

#top-menu.nav a:hover { color: #FFF !important}

/*—————[change main header font weight ]—————*/

#main-header {
line-height: 23px;
font-weight: 700;
}

/*—————[change links-hover colour]—————*/

a:hover {
color: #000000 !important;
}

/*—————[change Widget text link and hover link colours]—————*/

.et_pb_widget li a {
color: #000000 !important;
}

.et_pb_widget li a:hover {
color: #ffffff;
}

/*—————[change project button hover colour]—————*/

.project .et_pb_promo_button a:hover {
color: #000000 !important;
}

/*—————[edit project padding top to 0px]—————*/

.project .entry-content {
padding-top: inherit !important;
}

.et_pb_post .entry-content, .project .entry-content {
padding-top: 0px;
}

/*—————[change social icons hover colour]—————*/

.et_pb_member_social_links a {
color: #ffffff;
}

/*—————[change page layout to 2/3 by 1/3]—————*/

@media only screen and (min-width: 1024px) {
.category div#left-area {
width: 700px;
}
.category div#sidebar {
width: 315px;
}
.category #main-content .container:before {
right: 330px !important;
}
.single div#left-area {
width: 700px;
}
.single div#sidebar {
width: 315px;
}
.single #main-content .container:before {
right: 330px !important;
}
}

/*—————[force slider and button to render on mobile]—————*/

@media only screen and (max-width: 767px) {
.et_pb_slide_content, .et_pb_more_button, a.et_pb_more_button {
display: block !important;
}
}

/*—————[Custom Subscribe – Tutorial by Geno Quiroz]—————*/

.thin-subscribe .et_pb_newsletter{padding: 20px 10px; border-radius:10px;}
.thin-subscribe .et_pb_newsletter_description {padding: 0 0 20px 0; width: 100%;}
.thin-subscribe .et_pb_newsletter_form {width: 100%;}
.thin-subscribe .et_pb_newsletter_form p {display: inline-block; margin-right: 40px;}
.thin-subscribe .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 300px;}
.thin-subscribe .et_pb_newsletter_button {padding: 2px 6px;}
.thin-subscribe a.et_pb_newsletter_button:hover {padding: 2px 6px!important;}
.thin-subscribe a.et_pb_newsletter_button:after {display:none;}
.thin-subscribe .et_pb_newsletter_form p:nth-child(3) {display: none;}

@media only screen and (max-width: 1100px) {
.thin-subscribe .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 275px;}
}

@media only screen and (max-width: 980px) {
.thin-subscribe .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 220px;}
.thin-subscribe .et_pb_newsletter_description { width: 100% !important;}
}

@media only screen and (max-width: 767px) {
.thin-subscribe .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 240px;}
}

@media only screen and (max-width: 479px) {
.thin-subscribe .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 180px;}
}

/*—————[Bottom Footer Section]—————*/

#footer-info {float: center; text-align: center;}

#footer-info a {
font-size: 14px;
font-weight: 400;
color: #a0ce4e;
}

#footer-info a:hover {
font-weight: 400;
color: #0093a4;
}

.bottom-nav {text-align: center;}

.bottom-nav a {
font-weight: 400;
color: #a0ce4e;
}

.bottom-nav a:hover {
font-weight: 400;
color: #0093a4;
}

prosojno ozadje glave pri pomikanju navzgor:

#main-header {
opacity: 0.8;
}

slika, ki je razregnjena čez celo ozadje in se ne premika:

#main-content, #et-main-area, #left-area, #sidebar /*#main-header, .clearfix=noga*/ {
background-image: url("http://duzs.splet.arnes.si/files/2015/08/bg-main.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
}

večji glavni meni:

#top-menu li {
 font-size: 15px;
}

barve povezav v sidebaru:

#sidebar ul li a{
 color: #e2cdb3;
}

barve naslovov, avtorja, kategorij, gradnikov …:

.post-meta a, h1, h2, h3, h4, h5, h6, h4.widgettitle {
 color: #e2cdb3 !important;
}

barve glavnega menija:
#top-menu a {color: #fff!important;}
#top-menu a:hover {color: #ed6a00!important;}
#top-menu li.current-menu-ancestor > a {color: #ed6a00!important;}
#top-menu li.current-menu-item > a {color: #ed6a00!important;}

To add a dividing line between the individual widgets in the Divi Theme’s sidebar, we can add the following CSS:

#sidebar .et_pb_widget { 
    border-bottom: 1px solid #ddd; 
    padding-bottom: 20px; 
    margin-bottom: 20px; 
}
#sidebar .et_pb_widget:last-of-type { 
   border-bottom:0; 
}

barva pisave v sekundarnem meniju:

.et_nav_text_color_light, .et_nav_text_color_light #et-secondary-nav a, .et_nav_text_color_light .et-social-icon a, .et_nav_text_color_light #et-info a {
 color: #BCBCBC;
}

odstranitev navpične črte med stranjo in gradniki

.et_pb_widget_area_left, .et_pb_widget_area_right {
 border-color: transparent;
}
#main-content .container:before {
 height: 1%;
 width: 0px;
 background-color: transparent;
}

obrobe za sidebar in za gradnike (widgete) na prvi strani

#sidebar .et_pb_widget, .widget_black_studio_tinymce, .widget_nav_menu, .widget_archive, .widget_recent_entries { 
 border: 1px solid #ddd; 
 padding: 10px; 
 margin: 5px; 
 border-radius: 10px;
}

Prikazna slika na levi:

.et_pb_post {
margin-bottom: 100px;
}
.et_pb_post a img {
object-fit: scale-down;
max-height: 150px;
float: left;
max-width: 30%;
left: 0;
margin-right: 14px;
margin-bottom: 10px;
}
@media only screen and (max-width: 980px) {
.et_pb_post a img {
object-fit: scale-down;
float:none;
max-width:100%;
max-height: 300px;
}
}

Prikazna slika na levi (2)

@media only screen and (min-width: 981px) {
.et_pb_post.has-post-thumbnail .entry-featured-image-url {
float: left;
width: 30%;
margin-right: 4%;
}
.et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
padding-left: 34%;
}
}
.et_right_sidebar #main-content .container::before{
left: 20% !important;
right: auto !important;
}
body #page-container #left-area{
float: right;
padding-left: 3%;
padding-right: 0;
}
body #page-container #sidebar{
padding-left: 0;
padding-right: 3%;
float: left;
}