Hery Eko Ardhianto

  Menggunakan JQuery (Solusi Sekali Klik) Jika Anda punya banyak ikon dan malas mengubahnya satu per satu, atau ingin memaksanya lewat kode, gunakan script ini. Masukkan kode ini di Divi > Theme Options > Integration > Add code to the < head > of your blog: ============ <script> jQuery(document).ready(function($) {     // Mencari link di dalam modul Social Media Follow dan menambahkan target _blank     $('.et_pb_social_media_follow li a').attr('target', '_blank'); }); </script> ===========

QUESTION: I have a booking engine script. When viewed in the back-end, the layout appears correctly, but when displayed on the front-end, the design changes and looks messy. Could you please help me with what settings I should check or adjust in Divi to fix this issue? ANSWER I fixed the issue for you by adding the "fitvidsignore" class to the Code Module: 👇 The fitvidsignore class is used to exclude specific iframes or embeds from being processed by FitVids.js or similar libraries. FitVids.js is a jQuery plugin that makes videos responsive by maintaining their aspect ratio. However, sometimes it can apply incorrect padding, leading to unwanted spaces around the video. By adding the fitvidsignore class to an iframe or any other parent element like the Code Module in this case, you instruct the library to ignore this particular iframe/content, preventing it from applying any automatic padding or wrapping it with additional divs that could cause layout issues. This is particul...

.et_pb_gallery_items { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; } Start write the next paragraph here

 Customize Blog Module - Read More Link Text Change text of the read more button. Change style and color of the read more button. Updated over a year ago Change text of the Read More Link 1) To change the text of the Read More button in a Blog module go to Divi > Theme Options > Integrations > "Add code to the < head > of your blog" and add this code: ========== <script> (function($) { $(document).ready(function() { var custom_read_more_text = 'Custom Text'; $(".et_pb_posts .more-link, .et_pb_blog_grid .more-link").text(custom_read_more_text); $(".pagination a").click(function(){ $(document).ajaxSuccess(function(){ $(".et_pb_posts .more-link, .et_pb_blog_grid .more-link").text(custom_read_more_text); }); }) }); })(jQuery) </script>  =========

 Merubah BLOG MODULE menjadi list view ke bawah: Make The Divi Blog Module Image On The Left And Details On The Right Step #1: Set The Blog Module To Fullwidth Layout Go the Blog Module settings to the Design tab and set the Layout to Fullwidth. Don’t worry if this looks wrong. We need to set it this way to make the next step much easier. If we kept it as a grid layout, it would be much harder to achieve the desired layout. Step #2: Add The CSS Class To The Blog Module In order to only affect certain Blog modules on the site, we can use a custom class. So open up the Divi Blog module settings and go to the Advanced tab. From there, open the CSS ID & Classess toggle. Place the class “ pa-blog-list ” into the CSS Class input field there. Step #3: Set The Image and Details Width With CSS Basically, we are telling the image to be only 30% wide. Then we tell the title, meta, and excerpt to be 70% wide. By adding a float left on them, it makes  them stack up beside each other....

https://www.youtube.com/watch?v=EMud8mbVZ50 Pada colom yang ada backgroundnya, masuk ke ADVANCE - CUSTOM CSS - MAIN ELEMENT: background-size:100%; transition: all 0.5s ease; dan di HOVER: background-size:130%; Start write the next paragraph here

@media only screen and (max-width : 980px) { footer .et_pb_menu__menu { display: block !important; } footer .et_mobile_nav_menu { display: none!important; } } Membuat menu pada footer tidak menjadi responsive. DIVI-THEME OPTION : CSS

BLOG SETTING>ADVANCE>FREE FORM CSS selector .entry-featured-image-url { overflow:hidden } selector img { transition-duration: .7s; } selector img:hover { transform:scale(1.25); } Start write the next paragraph here

  MASUKAN CSS INI KE DALAM: POST SETING > ADVANCE > CUSTOM CSS PADA MODUL GALLERY: CSS CLASS: col-width /** Desktop **/ @media (min-width: 981px){ .col-width .et_pb_gallery_item { width: 16.66% !important; /*six columns*/ clear: none !important; } } /** Tablet **/ @media (max-width: 980px){ .col-width .et_pb_gallery_item { width: 25% !important; /*four columns*/ clear: none !important; } } /** Small Tablet and Large Phone **/ @media (max-width: 767px){ .col-width .et_pb_gallery_item { width: 33.33% !important; /*three columns*/ clear: none !important; } } /** Phone **/ @media (max-width: 479px){ .col-width .et_pb_gallery_item { width: 50% !important; /*two columns*/ clear: none !important; } } Start write the next paragraph here

  blurb>anvanced-free-form css; .et_pb_module_header, .et_pb_blurb_description {padding:0px 20px;} Start write the next paragraph here

/* Reduce left spacing between blurb icon and blurb text */ .dm-tight-blurb.et_pb_blurb_position_left .et_pb_blurb_container { padding-left:5px; } /* Vertically center blurb icon and blurb title */ .dm-tight-blurb.et_pb_blurb_position_left .et_pb_main_blurb_image { padding-top:10px; } Start write the next paragraph here

TULIS DISINI Start write the next paragraph here

Default image divi menjadi hover dan ukuran sesuai kemauan kita https://www.peeayecreative.com/how-to-change-crop-divi-image-aspect-ratios-in-the-builder/  ============= /*image aspect ratio landscape 16:9*/ .pa-image-16-5 .et_pb_image_wrap { padding-top: 25.25%; display: block; } .pa-image-16-5 .et_pb_image_wrap img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } /*image aspect ratio square 1:1*/ .pa-image-1-1 .et_pb_image_wrap { padding-top: 100%; display: block; } .pa-image-1-1 .et_pb_image_wrap img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } /*image aspect ratio landscape 16:9*/ .pa-image-16-9 .et_pb_image_wrap { padding-top: 56.25%; display: block; } .pa-image-16-9 .et_pb_image_wrap img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } /*image aspect ratio landscape 4:3*/ .pa-image-4-3 .et_pb_image...

 selector .et_pb_image_wrap {   overflow:hidden } selector img {   transition-duration: .7s; } selector img:hover {   transform:scale(1.25); }

selector { animation: imzoom 60s infinite linear } @keyframes imzoom { 0%, 100% { transform:scale(1) } 50% { transform:scale(1.3) } } Start write the next paragraph here  

CSS FOR COLUMN SETTINGS INSIDE THE ROW display: flex; align-items: center; justify-content: center; The above code should be placed inside the Main Element CSS Box in the Column Settings. To access column settings, first, go to the Row Settings, click on the settings gear to access the Column Settings, navigate to the Advanced tab, then to Custom CSS and add the code to the Main Element. If you want to stack the modules in the mobile view, add the code below within the Column Settings on the mobile device type. TO STACK BUTTONS ON MOBILE VIEW display:block;

 Divi has a weird quirk where any blog post that is published has a space between the post and the footer. Luckily there is a quick fix. Click on the gear icon in the Divi Visual Builder. In the CSS section of the post editor, add the following code snippet and save. .single .et_pb_post {  margin-bottom: 0;  padding-bottom: 0; } #left-area {  padding-bottom: 0 !important; } If it is saved correctly, you should no longer see a space between the post and footer.

Open the Blog module settings by clicking on the Gear icon Go to the Design Tab → Layout and select Grid Go to Advanced Tab → CSS ID & Classes → CSS Class and set a custom CSS class to the Blog module. You can use dt-blog-equal-height Go to Divi → Theme Option → Integration tab → Header Add this JS code: <script> (function ($) { $(document).ready(function () { $(window).resize(function () { $('.dt-blog-equal-height').each(function () { equalise_articles($(this)); }); }); $('.dt-blog-equal-height').each(function () { var blog = $(this); equalise_articles($(this)); var observer = new MutationObserver(function (mutations) { equalise_articles(blog); }); var config = { subtree: true, childList: true }; observer.observe(blog[0], config); }); function equalise_articles(blog) { var articles = blog.find('article'); var heights = []; art...