How To Create Mansory Design In Divi Using Custom CSS Grid | WP

If you think the Divi columns features doesn’t support what you want in creating a mansonry grid layout either for your gallery, portfolio, images. This CSS grid will do the trick for you.

 

 

Basically, we will need to use 1 column and push all the elements vertically or horizontally depending of the design you wanted to create. In this example, we will create this kind of layout.

 

1.Open your page or post and create a one column row

divi column

 

2.Open the Row Settings by clicking the gear icon > Advanced tab > add a class name. As an example I use mygrid_column

divi row settings

 

3.Add a class on your inner module, As an example, I use lender_img

module settings advanced tab

 

Go to WordPress dashboard > Divi > Theme Customizer > Custom CSS and add the following code

div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(4,1fr);
align-self: center;
}

If you want to change the number of grids in mobile version, simply add this media query. Let’s say if viewed in mobile, images will turn into columns so that will be

@media (max-width: 414px) {div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(3,1fr);
align-self: center;
}}

Preview:mansory grid css sample divi

Cheap Hotels In Osaka For As Low As P2100 | All DownTown Area

Booking the right hotel before traveling in Osaka Japan is very important because the transportation there is quite expensive over other countries.

In this travel guide, I point out the two cheap hotels we stayed in. Super near from train station and located in the downtown area  where most tourists hang out.

 

Wings Hotel in Shin Osaka | P3,100/day

The place itself is actually better than the picture. Another thing what I really like is the train station is just beside the hotel.

cheap hotel in shin osaka

SunRoute Hotel in Namba Osaka | P2100/day

No one doesn’t love Namba. This is the center of Osaka where most tourists hangouts and there’s also a lot of stores and restaurants.

cheap hotel in osaka

 

This hotel is AMAZING! The price is a deal breaker, they also have free mobile that you can use as your map guide. Basically, you don’t need to buy a sim card if you stayed here. 🙂

 

By the way, don’t forget to buy Ikoka card to save time buying tickets. You can also use this in bus or even in luggage locker.

 

How To Create Onclick Popup Modal In Divi Without Using A Plugin

Choosing a modal way of creating a popup on your Divi might be the perfect fit if you don’t want to get in trouble with plugin compatibility. In this Divi 01 tutorial, I’m going to walk you through how to create a perfect modal for your Extra and Divi website.

Modal Popup Demo:

 

Things We Need in Creating A Modal

 

Code Module:

Simply add a classed for your row and section to serve as your popup container and popup box.

In my case, I added a class name pricing_table on my code module and pricing_background for section module.

Don’t forget to add a class name on your button to trigger the modal when click.

button module

Let’s get our hands dirty!

Copy the code below and paste it to the respective section. 

  • Click the CSS tab and paste it to Divi > Theme Customizer > Custom CSS
  • Select the JS tab > copy & paste > go to Divi > Theme Options > Integration > Add it either in <head> or <body> section.

PS: Don’t forget to add the opening and closing script. The reason why I commented it down because Codepen doesn’t allow you to add <script> since we’re already using JS file.

See the Pen
Pop-UP
by Angelic Sanoy (@angelicsanoy)
on CodePen.

 

Still confused? Let me know your thoughts. 

2019’s Complete Guide To Fix Loading Issue With Divi Builder or Visual Builder

In this guide, Bookworm Head will walk you through the most common troubleshoot you can do to fix the loading issue with Divi.


1.Plugin Conflicts

Some of the plugins can trigger the loading issue. Mostly, these are poor plugins that haven’t updated for years or it’s just not compatible with Divi. In this case, try to disable the plugins temporary to isolate what’s causing the issue.

 

how to deactivate plugins

If the problem solved after that, then you will need to find which plugin is conflicting, simply enable it one by one. If the problem occurs again when activating a specific plugin, then you need to keep that disable.

If you have WordFence and you confirmed that this causing the issue then simply set the Firewall to Learning Mode instead of Enabled and Protected

how to change the wordfence firewall to learning mode

 

2. CSS File Generation

Also, don’t forget to clear your css file generation. Simply go to WordPress dashboard > Divi> Theme Options > Builder > Advanced > Clear or disable the css file generation.

4. PHP Directive Limit and Outdated PHP version

Old version of PHP is unsecured and since Elegant Themes keeps their theme up to date to WordPress best practices, you need to keep your site as well.

 

How to update my PHP

As an example, I will use Siteground since this is my hosting site.

 

How to change the php directive values. The effective ways I recommend so far is putting the recommended values below to your .httaccess.  This is a hidden file so make sure that you’ve enabled your FTP client to view hidden files, then open up the file labeled “.htaccess” to edit. At the bottom of the file, paste in this code:

how to edit the .httaccess divi

php_value upload_max_filesize 264M
php_value post_max_size 264M
php_value max_execution_time 600
php_value max_input_time 600

For the complete reference, Elegant themes wrote this guide you can check

 

5. Harmful custom jQuery on the <head> section or CSS on the Theme Customizer

To access the <head> section, go to Divi > Theme Options > Integration 

 

To access the <head> section, go to Divi > Theme Customizer > Custom CSS

 

 

 

Outdated WordPress/Theme version or Poor child theme

switching the child theme to divi

If you still haven’t fixed the error after the above recommended, open your WordPress dashboard in Incognito > right click and inspect the elements, if you found any error in the console then there might be something wrong in the WordPress or Theme installation. If that happens, you will need to reinstall your WordPress or Theme.

 

How to reinstall your Divi website?

Activate any default theme like Twenty Seventeen then delete the current installed Divi theme. Lastly, go to members area > download the Divi.zip and re-upload it to your WordPress dashboard > Themes > Add New

 

Make sure you backup your custom CSS and jQuery if you have some. Simply put it on the notepad++ so you can re-add it after reinstallation is finished. 

 

How to reinstall the core WordPress files? 

1. Go to WordPress.org and download the latest version of Divi. Unzip the file. 

2. Open your root directory using ftp and replace all the files except your wp-content folder and wp-config.php

 

Warning: Always backup your website when doing the reinstallation.

 

Does the above recommendation fix your current issue? I’ll be happy to know your feedback!

Is It Worth To Attend Event Like DevCon Summit?

In every expertise, their’s always a group of volunteers who are willing to share their ideas as a give back without expecting any return. On my side, there’s a community called Devcon.

One day, when I was scrolling in social media I found the ads about DevCon Summit event near in our hometown. It’s really interesting but there’s always doubt back on my mind, Is it really worth to attend? I mean, this is a 1-day whole event. am I willing to exchange my 1-day workload for this summit?  Even my friend also asks me that question so here’s the breakdown of the pros and cons of attending an event like DevCon.

Pros of attending DevCon Summit

  • If you’re a business owner related to the tech industry and looking for manpower, I encourage you to participate as a sponsor. Theirs’s a lot of ideal candidates and connection who are willing to help you out.
  • They will tackle topics that are helpful for aspiring developer. From Mobile Development, API, Cyber Security, Blockchain and many more. Although it doesn’t involve hands-on coding, at least their giving the fundamental insights.
  • Aside from T-shirts and cute DevCon bags, There’s a lot of souvenirs especially if you have participated in their Q&A. Lucky I got a lot of them.
  • More opportunity for aspiring developers. I even see sponsors who are giving FREE training, just to help you become competent.
  • It will help expand your network in your industry.

Cons Attending Events Like Devcon Summit

  • If you are looking for something a hands-on practice then this is not for you. Basically, this is a pure essential chit chat talk.
  • It’s not FREE though I would say that your ticket is still “SULIT” because they do have a lot of giveaways. See all the giveaways we’ve got.

This is once in a blue moon event so better to attend.

Cheers. See you at the next Devcon Summit

Ways To Reach DevCon Community:

Facebook: @DevConDavao | @DevConPH
Website: www.devcon.ph