Divi Senseihttps://divi-sensei.com
All about DiviThu, 15 Nov 2018 17:06:46 +0000en-UShourly1https://wordpress.org/?v=4.9.8Divi Module Development Tippshttps://divi-sensei.com/blog/2018/04/27/divi-module-development-tipps/
https://divi-sensei.com/blog/2018/04/27/divi-module-development-tipps/#commentsFri, 27 Apr 2018 21:36:05 +0000http://divi-sensei.com/?p=1737Horray! Divi 3.1 is finally out and it comes with proper APIs for developers. Now we can not only count on better support from Elegant Themes but also make our modules ready for the Visual Builder. Since the day the update came out, we read through all the available docs, looked through the code and […]

]]>Horray! Divi 3.1 is finally out and it comes with proper APIs for developers. Now we can not only count on better support from Elegant Themes but also make our modules ready for the Visual Builder. Since the day the update came out, we read through all the available docs, looked through the code and did a lot of testing to see how we can utilise whats there and to update our Developer Dojo .

It is great to have docs but so much we love them, we have to admit that they are not complete yet. A lot is missing but will eventually be added soon as the Elegant Theme staff gets to know what we developers are particularly interested in. Currently there also is no real good place to ask questions but unofficially, ET told to us that there might – or might not – will be a slack channel or something similar for developers to exchange their knowledge and best practices. Until then, the best place to report bugs and ask questions is the issue section of the github repository for the create-divi-extension.

In this article we want to help other developers to get up to speed quickly by sharing our knowledge about a few undocumented topics – at least at the time of writing this article.

The Divi loading indicator

The first thing we want to talk about is Divis loading indicator. You surely have seen it a lot of times. The white circle with the dancing blue, orange, violet and green dots. Remember?

When developing your own modules, we recommend to blend them in into the system as good as you can. They should feel familiar to the user and using some design elements and colors of the Divi Builder is a good choice. Instead of utilising some other third party loading indicator or writing your own one, when loading something in your module while editing a page in the Visual Builder, you should go for the default loading indicator – especially since it’s so easy to do. All you need it to add this output in your React component:

Can it get any simpler? Any time you do some processing, you can display this indicator to show the user that the system is still running and something is happening under the hood – for example if you make a Ajax call. Speaking about which…

Making Ajax calls

What a transition, it’s almost as if we had put some thought into this. So modules can now support three different levels of Visual Builder support: off, partial and on. When your module sets the public $vb_support = ‘off’;, you will just see a grey block in the Visual Builder where your module is. This is for backwards compatibility with pre 3.1 modules. If the support is set to partial, Divi will make a Ajax call and under the hood call your modules render function. The holy grail though, is to make your modules fully compatible. To do this you have to set the support to on and implement the render function in your React component.

In most cases thats not so hard to do. Elegant Themes even gives you some examples. Unfortunately they are really simple and only handle the case for when all your content is defined in your modules settings (e. g. inside textfields). But what if your module is a bit more complex or if you for example want to load a value from a custom post field. Well, then the documentation lets you down. But don’t worry, we are here to give you a helping hand and show you how to solve the riddle. The answer is Ajax and the process is actually quiet easy.

First you have to add the php code you want to call. You can put the code in the main plugin file in the root directory of your plugin. Lets for example take this function which loads the post title based on which post id we send via Ajax:

As you see we have three variables in our state. A error to store possible error information, a isLoaded boolean to determine if we need to show a loading indicator and finally the title we want to display. With this in place, we can add another lifecycle function in which we make our Ajax call:

Here we build the Ajax call and make a POST. Fortunately, Elegant Themes already stored some useful information in the window object and we can utilise it to get the Ajax url and the ID of the current post. Of course we could also access our modules props and use values from them if we’d like to. Finally it’s time to render our module:

Here we load the state and check whether we have an error, are loading or if everything is okay. Now when the module is added for the first time, its constructor is called and error is null and isLoaded false. This means the render function will return the loading indicator. Then the module is mounted and our Ajax call is made. Once it finished, the state is set which causes the component to render again. This time we either have an error or a title and can display them instead of the loading indicator.

That wasn’t too hard, was it?

Making your modules distinguishable

The final tipp we want to share with you is how you can make your modules distinguishable. “But Sensei, you said our modules should blend in!” – yes, that is true. Your modules should feel familiar and have a similar look and feel when editing and using them but if happened more than once that after somebody purchased one of our modules, they asked where to find them. They just blended in too well and people didn’t recognise them in the builder. That is why we started to give them a little more noticeable design in the list of modules. This is what we mean:

Now when you open the module list to add a new module it is immediately clear which modules are from us. This, however, is the only time we want to stand out. When you use our modules, you will not notice that they are not from Elegant Themes themselves. To achieve a look like this you have to add some CSS in two places. If you want to support the Backend Builder, you have to add the CSS to your admin CSS since the Backend Builder rund – as the name suggests – in the Backend / Admin area of WordPress:

Conclusion

With 3.1, Divi has become even greater and developing modules has become a lot easier due to the new tools and documentation. It’s not complete yet but we are on a good way. We hope these tips will help you to develop first class modules. If you want to get up to speed even faster, why don’t you enroll in our Developer Dojo? Do you have any more questions, want us to write about something? Let us know in the comments, we would love to exchange with likeminded.

]]>https://divi-sensei.com/blog/2018/04/27/divi-module-development-tipps/feed/6Truly equalised heights on Divis Blog Grid Cardshttps://divi-sensei.com/blog/2018/03/07/divi-equalized-blog-grid-cards/
https://divi-sensei.com/blog/2018/03/07/divi-equalized-blog-grid-cards/#commentsWed, 07 Mar 2018 02:20:16 +0000http://divi-sensei.com/?p=1690In this article we will cover the necessary steps to make something work which currently annoys a whole lot of people who use Divi: the uneven sized cards in the Divi Blog Grid module. We highly recommend you read through the whole article to understand what we are doing and why we are doing it, so […]

]]>In this article we will cover the necessary steps to make something work which currently annoys a whole lot of people who use Divi: the uneven sized cards in the Divi Blog Grid module. We highly recommend you read through the whole article to understand what we are doing and why we are doing it, so in case a future Divi update breaks the code, you can fix it yourself. It’s always good to understand the things you do instead of simply copy-pasting snippets which you don’t understand.

The JavaScript code we will use is quiet easy to understand and besides that, we also need a little bit of CSS knowledge. Both are skills which every website owner should have a basic understanding of – and even if you don’t know much about JS and CSS, today is the day you can learn your first of many lessons.

The Problem

Unequal sized article cards in Divis Blog module

Lets start with the problem. It’s always good to know what you want before you start. A clear goal avoids confusion on the way. So whats the problem with Divis Blog Grid module? Nothing, if you like masonry layouts. But what if you want equally sized cards? That is not so easy. We could say:

How can we make all cards equally sized in the grid?

The module is lacking any settings to equalise the height of the cards. Pure CSS also won’t work due to the modules HTML output . On desktops and tablets, Divi puts all the articles in multiple, independent columns. That prevents us from using CSS to get equally sized cards – at least without giving fixed height values to all articles – but that either leads to overflowing text or weird empty areas. It would be better to have a dynamic way of findig the largest visible article and adjust the height of all other items. Now the problem becomes clearer again:

How can we find the largest article in the visible grid and apply its size to all other visible article in the same grid?

Now that sounds like a good description of the problem. We can easily solve these kind of tasks using JavaScript. Let’s do it! It’s not so difficult.

The Solution

Let’t get to the solution. We’ll go over it piece by piece. If you are just here for the code, feel free to scroll all the way to the bottom to just copy the finished result. But don’t complain or blame us if something is not working. Read through the tutorial and you’ll be able to fix any issues yourself. Now everybody: grab a coffee or a tea, get seated and enjoy the show.

Preparing JavaScript and running your first lines of code

We start with a simple script tag. We’ll need it for putting our own code in Divis Theme options later. If you are more advanced and want to use the code in an existing JavaScrip file, e. g. from your Child Theme, you can skip this step.

<script>
</script>

In between the script tag, we can now start writing our JavaScript. To make it a little bit easier to deal with the HTML, we can use jQuery. jQuery is just a library for JavaScript, which comes with a lot of handy functions. It’s already shipped within Divi so we can just make use of it. But jQuery in WordPress comes with one limitation or downside. You have to write “jQuery” instead of the short form “$” every time you want to use it, which can be quiet annoying. So to enable the “$” shortcut, we encapsulate our actual code in a function and pass jQuery itself as the argument to the function. By defining the parameter of the function as “$”, we now can use $ as a synonym for jQuery. Add this code in between the script tags

(function ($) {
})(jQuery);

Enough with the preparations, time to start coding. So what are the steps to achieve our goal. Lets break them down:

Get all the visible articles

Find out which one the largest is

Get the size from the largest article

Apply the size to every other article

So how do we get the articles? Well, we can use jQuery to get any HTML-element on the page, if we know the CSS selector of that element. So lets check the HTML of our blog grid to find out the required CSS selector. To do that, use your browsers debug-tools. Every major browser comes with some sort of these tools. Often you can access them by right-clicking somewhere on a website and choose “inspect”.

If you see this screen for the first time, it might look a bit scary but in reality it just wants to be your best friend. In the upper left you have the element selection tool (the one with the cursor on it). If you click it, you can click on any element on your page and the corresponding element will light up. In the lower part, you have the HTML on the left and the CSS on the right. This is the complete HTML and CSS as it is seen and interpreted by the browser.

After selecting the article in the grid, we can see a bunch of things. First of all, every article seems to be an “article” element. Articles are organised in three columns. The columns are inside a tree of “div” elements. The outmost element, which is the blog grid itself, has the classes “et_pb_module”, “et_pb_blog_grid_wrapper”, “et_pb_blog_0” and fourth class which just happens to be “sensei-grid”. But this is no magical coincident. We actually gave the blog this class intentionally. Why? There are multiple reasons: we might want to use the code on multiple pages of the same websites but we do not want to use the functionality we are developing on every single blog grid on the whole site. Thats why we use a custom CSS class. Then we can decide on which blog grid we want to enable the functionality and other modules on the same site are not affected.

Of course you could also use any other element selector to get a common surrounding element of the columns. For the sake of this tutorial, we will go with “.sensei-grid”. The “.” before the element indicates that it is a class. In CSS you can address elements by their element tag (e. g. “article” or “grid”), by their CSS ID (e. g. “#myelementid”) or their CSS Class (e. g. “.sensei-grid”). In the Advanced tab of your modules, rows or sections you can add your own CSS ID or multiple classes. Here you don’t add the “.” but just the classes you want (e. g. “my-first-class my-second-class”). So lets find out how tall the articles are. Write this code inside the jQuery function we created earlier:

First, we use the “$” to call jQuery. We pass in “document” – which is a JavaScript keyword, a reference to the “page” which the code runs on – and then call the “ready” function to which we pass a callback. We do this to tell jQuery that we want to wait till the whole document (the current page) is ready. If the page is not ready, we can’t safely manipulate the content. Instead we simply wait. Once the document is ready, the function we passed to the “ready” function gets executed by jQuery.

Inside the callback, we use jQuery again. This time to get each Sensei Grid. We simply pass the CSS selector to jQuery and get all the elements. In CSS, a class selector can return multiple elements. Since we could have two or more blog modules on the same page, we want to find the largest article for each one separately so using the “each” function and passing in another callback function, we can execute the same code multiple times.

Again we use jQuery but this time with the “this” keyword, which is a reference to the outer element on which we run the “each” function. Imagine you have two blog modules. jQuery will find the first one and “$(this)” will be the blog grid with the classes “sensei-grid” and “et_pb_blog_0”. When jQuery runs the same callback for the second module, $(this) will represent the blog grid wich has the CSS classes “sensei-grid” but this time it has the class “et_pb_blog_1” – another module.

Next we use the “find” function to find every “article” element inside the blog module. This will find all articles, no matter in which column they are. But only in the current module. Since we now again potentially have more than one result, we use the “each” function again to iterate over each article. Now we can finally print out the height of each article on the console.

Copy the code and head over to your Divi Theme Options. Select the “Integration” tab and paste the code into the “Add code to the < head > of your blog” field.

Save your settings and open the page with the blog grid. Open the inspector of your browser again, but this time check out the console. If you have done everything right, you should see the output. Maybe you need to force refresh the page by holding down the shift key on your keyboard while refreshing the page. Also sometimes caching plugins can be an issue and you might need to purge the cache to see the result.

Get the tallest article and change the others articles heights

Alright. Now that we have all the articles in the blog module and know their individual heights, it’s time for the next step: find out which article is the tallest and then apply it’s height to all other articles. To do this, we can simply store each height in an array and then use JavaScripts Math library to find the largest number in this field. The last step is to use the max value and apply it to the other articles. Since we need the articles multiple times, lets remove the innermost each-loop (starting with “$(this).find(…)” and instead use this code.

We still first get all the articles but this time we store all the articles in a variable called articles. Then we create a array to store the heights of each article. Next we loop over each article, calculate the height from its content and save the height in the array.

Are you asking yourself where the 4 class selectors come from? We used the inspector again to look at the HTML structure of each article. You’ll find that these are the exact elements in our article. But we also need to consider paddings and borders. We can calculate that by subtracting the elements height from its outer height.

Once we have all the heights, we can use the Math library to get the max value from the array and store it in another variable (learn more about Math here). Finally we loop over each article again and set the height to the value we previously found. Phew. Our code now should look like this:

Refresh the page with the blog grid and you already should see the result. If not, you might need to force a refresh again. You might ask yourself why we calculate the height of the article by using the individual content heights instead of simply using outerHeight() on each of the articles. Why it is important to calculate the height from scratch in each run, we will see in a second.

React to size changes

There are a bunch of things going on under Divis hood which can cause a size change of the blog grids content. But not only that. The user could simply resize the browser or flip the screen of a mobile device. That can activate certain media queries and the size of the content changes. We need to react to size changes and recalculate the article heights based on the new content size. If we would use the articles outerHeight() we would run into problems as after the first calculation run all articles already have the same height. Therefore the height will never change after the first run.

Okay so lets handle size changes. Modern browsers support Mutation Observers. A MutationObserver is a JavaScript object which allows you to monitor changes in a given element. This in combination with a observer on the window should be sufficient for us to deal with the content size changes.

As you can see, for a better reusability we moved the code from inside the each-loop of the sensei-grids into its own function. We do this for better reusability. In the each-loop we now get the blog grid we are iterating over. We pass each grid to the function we just created. This will apply the first round of equalising the heights. Then we setup a MutationObserver for each blog grid.

Every time the MutationObserver detects a change inside the module, it will call the callback function we pass into the constructor. Of course we use this opportunity to re-apply the equalising. Finally we need to handle a resize of the browser window. We can observe the browser window for resizing and yet again equalise the blog grids.

So far so good. When you reload the page, you will see that the articles heights are perfectly equal. Also when you resize the browser window you still should end up with a nicely, equalised blog grid. Here we created some articles to show you how it looks like when you don’t have images on all articles:

Fixing the paging

Speaking about images. There is one last thing we need to take care of. When you enable paging on the blog grid module and click the button to show older entries, you’ll run into a problem. The articles are completely wrongly sized. Thats because the images take some time to load which interferes with our calculations. So the final step is to add yet another function in which we can call our function to equalise the heights after the images are loaded:

As you might know, Divis blog grid uses Ajax to load older entries without leaving and reloading the whole page. We can use this to our advantage and wait till the Ajax call finishes. We then use a little helper function to execute our own code after all images inside the grids have been loaded. Once the images are completely loaded and their size is known, we can re-calculate the heights. Now we get the correct height including the image and no article is to short – no text ist cut off.

The helper function is a little bit “advanced”. Basically we scan each grid for images and then use the Promise library to execute some code after certain conditions are met. In our case the loading (or the failure to load) of the images of the blog grids.

Final Code and Thoughts

Thats it, we are done. Lets have a look at our final result. It came out less than 100 lines of code and wasn’t too hard to create or was it? This is what your code now should look like:

If this was your first time using jQuery and you have not understood everything we did here: no worries. The more you use JavaScript and jQuery, the more you will understand. But hey, maybe you are now interested in starting to learn JavaScript at all. If so, we recommend reading or watching a few tutorials on the web or on YouTube to get a better understanding of whats going on. We hope it was not too difficult to follow.

If you already have experience with jQuery, this should be easy enough to be understood well, or isn’t it? If so, let us know in the comments. We hope you enjoy this little tutorial. Let us know what you think and would you like to see little snippets like that in the WordPress Plugin Directory as free download?

]]>https://divi-sensei.com/blog/2018/03/07/divi-equalized-blog-grid-cards/feed/3Equalize your Blog Grid column heighthttps://divi-sensei.com/blog/2017/11/07/equalize-blog-grid-column-height/
https://divi-sensei.com/blog/2017/11/07/equalize-blog-grid-column-height/#commentsTue, 07 Nov 2017 07:40:42 +0000http://divi-sensei.com/?p=1509One thing we really don’t like about the Blog Grid module is that if you have different lengths of excerpts, then each card in the Blog Grid has a different height. Luckily with a little bit of CSS tweaking, we can change that. To show you what we mean and what this tutorial is about, […]

]]>One thing we really don’t like about the Blog Grid module is that if you have different lengths of excerpts, then each card in the Blog Grid has a different height. Luckily with a little bit of CSS tweaking, we can change that. To show you what we mean and what this tutorial is about, we will go from this:

to this:

But before we tell you the CSS, lets talk about what we need to do. After all you are here to learn something and not to only copy some code without understanding it, right? Okay so the things we are trying to achieve are:

Each column of the Blog Grid should have the same height

The read more button should align nicely at the bottom of the card

To achieve this, we need to take care of a few things. Lets start by inspecting the structure of the module to find out, whats going on and where we can hook ourselves into. Right-click anywhere on the page and use your developer tools to inspect the HTML structure of your page. Alternatively choose “View Sourcecode”. With the inspection tool, you can hover over the different elements of the module. We immediately notice that the columns have different heights.

Fortunately there is a simple fix to give elements a flexible, yet equal height: flexbox. To do that, we simply display the parent container as flex and give our columns a flex value of 1 which basically means: fill your parents container even if you are smaller. The parent container with the “display: flex” attribute then gets the height of the tallest element and each smaller element fills the gap. Since we are playing around, lets not add the CSS to our actual Divi Custom CSS but only to the inspector so we can make sure everything works before we mess up our site.

Okay, the columns now have a equal height but the cards still look different. Lets take care of that. Again we first inspect to see whats going on. We notice that the “article” element has different heights.

Again we use flexbox to fix this. We do so by displaying the columns as flex as well but this time we use a flex-direction of column instead of row. Besides that, we give the “article” element a flex value of 1 so it fills its parent no matter what, just like we did before with the columns.

Finally we need to do something so the read more button sticks to the bottom. Yes, you guessed it right: we will use flexbox for this. Once again we display something as flex and use flex: 1 on a child element. This time, the “article” and the “post-content” are our targets. Oh, and to be able to use justify-content on the “post-content”, we also display it as flex.

Okay, now that we know the CSS we need, we can wrap it up and put it in our Divi Custom CSS field. We don’t want to affect any other elements which by accident have the same CSS classes so lets give the Blog Grid module a custom CSS class and put this class in front of each customization we made. The final CSS should look like this (we also polished it up a little bit for cross browser compatibility with this tool and to fit the margins of our page, you might want to adjust the values to your liking):

Thats it, that wasn’t to hard, was it? If you want to learn more about the powers of flexbox, there are a lot of good tutorials out there. Like this one from css-tricks.com. We hope that today you learned something and if so, we would love to hear from you in the comments below.

Divi is a great theme, no doubt. But sometimes the standard modules are a little bit limited in the way how you can use them. Recently we saw a question in one of the Facebook groups about how the Divi Slider could be used to display images. Sure, the slides have a field to upload an image and they also have the background image option but both settings have their drawbacks.

What if you just want an image – and only the image – on the slide while maintaining the aspect ratio of the image and having the image cover the whole slide? In other words: how can you make the Divi Slider a fullwidth image slider? Or to show what we mean:

Well, we are sorry but this is just not possible with the standard module. You either end up with a stretched or cropped background image or a way to small slide image. Either way, it is not what you want, right? There is no way around writing some CSS and to be honest, in that case it was not the easiest thing to do. Partly because of the weird combination of hard coded properties, partly due to dynamically set properties via JavaScript and finally there are some media queries involved as well.

To keep things short, we came up with a responsive solution which should work in most cases. Simply add the following CSS to you themes Custom CSS field in the Divi Theme Options.

Okay, so with the CSS in place, we now can setup our slider. First, add a new Slider Module. It doesn’t matter if it is a Fullwidth Slider in a Fullwidth Section or a regular Slider in any kind of Row.

Then start adding your slides. Since the title, the button and the content will be invisible to your readers, it doesn’t matter what you put in here. However, search engines will still be able to see the text so you might want to use something which fits your content to improve your On-Page-SEO. If you want your slides to be clickable, use the Button URL field.

Then choose the image you want to display in your slide.

Last but not least, head over to the Sliders Advanced tab and add the “full-image-slider” class to the CSS Class field.

Thats basically all you need to do. Save the page and see your Divi fullwidth image slider in action. If you found this tutorial useful, we would be happy to see how you use the code so why not leave us a comment below?

]]>https://divi-sensei.com/blog/2017/10/25/create-fullwidth-image-slider-using-divi-slider-module/feed/21Two Column Image Grid on Phoneshttps://divi-sensei.com/blog/2017/10/18/two-column-image-grid-phones/
https://divi-sensei.com/blog/2017/10/18/two-column-image-grid-phones/#commentsWed, 18 Oct 2017 04:55:13 +0000http://divi-sensei.com/?p=1424Recently we saw a question in one of the Divi Facebook groups, asking if somebody could develop a image grid module to display two column photo grids on phones. As you might know, the Image Gallery module is responsive and uses the rows Gutter Width setting to calculate the spacing between items.

The Problem

Recently we saw a question in one of the Divi Facebook groups, asking if somebody could develop a image grid module to display two column photo grids on phones. As you might know, the Image Gallery module is responsive and uses the rows Gutter Width setting to calculate the spacing between items. Here is such a gallery which is inside a row with a custom Gutter Width of 1:

As you resize the browser, you can see that at some point, the grid changes from 4 columns on desktops to 3 columns on tables. Then 2 columns on smaller tablets and finally you end up with 1 column on phones.

The solution: CSS Media Queries

Luckily for the person in trouble, there is a very simple solution to solve this problem: Media Queries. If you are not familiar with media queries, basically all they do is apply certain CSS only if a given criteria is met. For example you can apply CSS to an element only if the screen size is smaller than a given amount of pixels.

If you ever wondered which media queries Divi use to differentiate between desktops, tablets and phones, you should check out this article from Elegant Themes, where each of the media queries used in Divi is explained. To target phones only, all you have to do is wrap your CSS in the following media query.

@media all and (max-width: 767px) {}

Okay so back to our image grid. If we inspect it using the element inspector (which most modern browsers have in their developer tools), you can find out the CSS selector for the image grid:

As you see, there are a bunch of CSS classes we could use to address the grid items. Keep in mind that the more selectors you combine, the higher the priority will your own CSS have. This is important so that your CSS does not get overwritten by another CSS.

To take things even further, we suggest you add your own CSS class to the grid you want to style, so that you don’t affect other grids or even other modules on your page. For example, if you would just use “.et_pb_grid_item” to target, then not only all image grids but also the Portfolio and Filterable Portfolio modules items would get targeted. You surely don’t want this, so head over to the advanced tab of your Gallery and add the this class to the CSS class field (separate multiple classes with commas): “two-col-grid”. Notice that there is no dot in front of the class name.

Next you need to add the CSS to your themes Custom CSS field. Head over to your Backend and go to Divi->Theme Options. Scroll all the way to the bottom and add the following CSS to the Custom CSS Field:

Here we first target only those Gallery modules (et_pb_gallery) which also have the “two-col-grid” class. Then we target the grid item inside the Gallery and give it a width of 50% which will result in two columns. Of course you can have more columns if you like. For example a width of 33.3% will result in three columns and 25% in four columns. The final result will look like this gallery (resize the browser and compare it to the gallery above):

]]>https://divi-sensei.com/blog/2017/10/18/two-column-image-grid-phones/feed/5Prevent mega-menu drop down from collapsing immediatelyhttps://divi-sensei.com/blog/2017/08/27/prevent-menu-from-collapsing-immediately/
https://divi-sensei.com/blog/2017/08/27/prevent-menu-from-collapsing-immediately/#respondSun, 27 Aug 2017 13:47:21 +0000http://divi-sensei.com/?p=1049Divis menu looks awesome and especially the mega-menu is one of our favorites – thats the one we are using on this page. However, it sometimes can get really annoying and frustrating because the menu is hidden immediately if the mouse is not hovering over the menu entry anymore. This forces uses to use a rather […]

]]>Divis menu looks awesome and especially the mega-menu is one of our favorites – thats the one we are using on this page. However, it sometimes can get really annoying and frustrating because the menu is hidden immediately if the mouse is not hovering over the menu entry anymore. This forces uses to use a rather unnatural mouse movement sometimes. This picture illustrates that:

If you try to move the mouse diagonally, it will cause the menu to disappear. Instead you first have to move the mouse down and then, once you are in the drop-down, you can go sideways. We colored the menu links background to grey to show you the actual area of the menu item which will trigger the drop-down menu to be visible. Once the mouse is outside of that area, the drop-down is collapsed.

So what can we do prevent this behavior? The answer is quiet simple and involves just a few lines of CSS. Simply go to your Divi Theme Options page and add the following code to your custom CSS:

First we make sure to only apply this CSS to the desktop size of our page since everything below 980px width will cause the mobile menu to show up anyways. We do this by using a media query with a min-width of 981px.

Then we make sure to always display the sub-menus. By default, the mega menu makes them invisible by adding “.et-dropdown-removing” class via JavaScript to the top level menu item when leaving the link (the grey area from the picture). This will then cause the drop-down to be hidden immediately. But not only that, the mega-menu has some weird CSS settings which causes the first level children to be visible but their submenus to be hidden. Thats because there is a JavaScripts which adds a “.et-hover” class instead of using the CSS “:hover” pseudo element. You can check what we mean by using the element inspector of your browser to force a hover effect on the parent menu item. Strange, isn’t it?

Anyways, that is fixed by making the sub-menus display as block and then just making them invisible when not hovering. Finally, we apply a transition to the drop-down. This will allow the user to move the mouse diagonally without the drop-down collapsing instantly.

By the way, this does not only work for the mega-menu but also for the normal drop-down menu. We hope this cool little trick helps you improve your Divi page. Cheers

]]>https://divi-sensei.com/blog/2017/08/27/prevent-menu-from-collapsing-immediately/feed/0How to use Divis Mega Menu to create awesome custom menushttps://divi-sensei.com/blog/2017/08/27/how-to-use-divi-mega-menu/
https://divi-sensei.com/blog/2017/08/27/how-to-use-divi-mega-menu/#commentsSun, 27 Aug 2017 13:45:41 +0000http://divi-sensei.com/?p=1050Divi is a really great theme with a lot of flexibility. However, the drop-down menu is something we quickly have had enough of. Often you can identify that a page is using Divi just by looking at the menu. The colored line below it, the distances, the hover color. We never fully understood why so […]

]]>Divi is a really great theme with a lot of flexibility. However, the drop-down menu is something we quickly have had enough of. Often you can identify that a page is using Divi just by looking at the menu. The colored line below it, the distances, the hover color. We never fully understood why so many people spend so much time on creating good liking layouts but barely take care of the default look and feel of their menus.

In this post, we want to show you a really cool alternative to the boring default drop-down and give you an example of how you can style your Divi menu to not only look way cooler than the average but also show you some neat little tricks for styling WordPress menus in general. For this, this post is separated in 3 sections:

Using Divis mega-menu

Styling the drop-down menu

Adding custom images and icons to your menu

The Divi Mega Menu

It’s sad that there is no setting or even a hint in the theme customizer that this exists (well maybe there is something in the documentation but who has time to read that, am I right?). We used Divi for about one and a half year when we first heard about this awesome treasure, hidden in the depths of the themes code.

The mega menu basically lets you create a single full-width drop down with multiple submenus inside it and visible at the same time. Yes, the menu on this site is a mega-menu as well – a custom styled, though. To activate the mega-menu, all you have to do is to add “mega-menu” to your menus top level menu entries CSS classes. Keep in mind that it works best if you have 3 levels of menu entries. The first level gets the “mega-menu” class. The second levels are then the “categories” and the third level are the entries.

Check out the menu structure for our page. “Menu” is the top level entry (by the way, you can have multiple top level entries with the “mega-menu” class). The second level are the “categories” like blog, themes and modules. The third level are then the entries which are listed under the categories (e. g. the blog categories under the blog section).

By the way, if you don’t have the CSS field in your menu, you have to activate it in the Screen Options. Generally, the Screen Options are often overseen and are available in a lot of different places. You should check them out more often.

That is basically it. You are now able to use the Divi Mega Menu. It is indeed that simple. However, it will look different to what our menu looks like. Probably more that. Thats because we added some CSS to style our menu. Which brings us to the next section.

Styling the drop-down menu

There are various tutorials on how to style the WordPress navigation. However, we want to show you how we styled ours. At this point, we would like to thank and credit Geno Quiroz, from who we have gotten most of the styling. He has an awesome tutorial to style the mega menu here.

Please note that we already applied our primary color and some other color changes here. Well, that alone might work for his page or the sake of the tutorial he wrote but this brings a few downsides. Lets look at what happens if we only apply this CSS:

As you see, the mega menu looks slimmer already but what about the default dropdown? The first level indeed looks okay as well but if you have a sub-menu in there, it totally breaks the menu. So lets fix this by adding the following CSS. Notice that we use the “:not()” pseudo element to explicitly exclude the mega-menu from using these styles.

This will put subsequent sub-menus on the right place. It also adds back the functionality to open sub-menus to the left when there would not be enough space otherwise.

Next lets tackle the blue line. Though it might work for your page, it not only is a first class indicator that you are using Divi but it also makes every Divi page somehow look the same and maybe you or your clients just don’t like it. So lets get rid of it. We do that by removing the top border from the sub-menu. Add the following to your CSS:

This will remove the border on the mobile menu as well but if you only want to remove it on the desktop, use the #top-menu-nav instead the #et-top-navigation. Now since we removed the border, the sub-menus are missing 3px of height so go back to the “#top-menu li li ul” selector and change “top: -3px;” to “top: 0px;”. Now the sub-menus are back in place.

We find, that the link should fill the whole sub-menu so add this CSS code as well:

There is only one thing which really annoys us. As soon as you are not hovering accurately over the top level entries, the drop-down is collapsed immediately. If you are looking for a fix for this issue, you should checkout the tutorial we have written on this topic: prevent Divi Mega Menu from collapsing.

The last thing we like to style is the current selected page in the mega-menu. By default, Divi overwrites the current selected page with a blue color but we also want to show off the ancestor of the currently selected page. Therefore we added this CSS:

Adding images and icons to your menu

If you want to add a visual pleasing decal to your menu, you have basically two options. You can use images are a icon font like Font Awesome or Divis builtin one which is called “ETmodules”. You then again have two options on how to get that into the menu. You either can use HTML (most people don’t know that you can use html in the menu titles field) or CSS.

The HTML Way

The HTML way is probably the easier approach. Simply create a <img> tag with your desired image and add it to the menus Navigation Label.

You can either stlye the image inline or you could use the CSS Classes field to add additional classes so you can target your image. In this case, you could use one of these selectors to select the image:

.mega-menu img

.menu-item img

#top-menu a img

A good idea could be for example to vertically align the image with the text, change it’s size or do whatever else pleases you.

The second option is using :before or :after pseudo elements to add content manually. That is by the way how we did things in our menu. First, we added a bunch of classes to our second menu level (blog, etc.) and then used this CSS to add the icons using Divis icon font.

Whats that square you might ask – depending on which browser you are currently using. Well, thats the unicode character used by the icon font. Though they look the same since the browser does not know how to render them appropriately, they are in fact different. If you wonder where you can get them from, simply fire up the Divi Builder, open a module with a icon field (like the Button or Blurb module) ad open your browsers element inspector. By inspecting the icons, you can out the unicode character to use.

Now it’s just a matter of copy and paste the character from the data-icon field to your CSS.

]]>https://divi-sensei.com/blog/2017/08/27/how-to-use-divi-mega-menu/feed/12Making Website Screenshots using Chromehttps://divi-sensei.com/blog/2017/08/25/making-website-screenshots-using-chrome/
https://divi-sensei.com/blog/2017/08/25/making-website-screenshots-using-chrome/#respondFri, 25 Aug 2017 20:05:51 +0000http://divi-sensei.com/?p=958Have you ever seen of of those screenshots showing a whole page? We often have and we always wondered how to do that. Sure, you could simply make multiple screenshots and stich them together using Photoshop or something like that but did you know there is a builtin screenshot tool in Googles Chrome browser which […]

]]>Have you ever seen of of those screenshots showing a whole page? We often have and we always wondered how to do that. Sure, you could simply make multiple screenshots and stich them together using Photoshop or something like that but did you know there is a builtin screenshot tool in Googles Chrome browser which you can use out of the box to capture full page screenshots?

Simply open the developer tools (⎇+⌘+i on OS X or Ctrl + Shift + i on Windows) and hit ⌘+Shift+P on OS X or Ctrl + Shift + P on Windows to bring up the Command Menu. Now simply type in “screenshot” and select the “Capture full size screenshot” option. Chrome will create a screenshot and download it to your download folder. A simple but powerful trick, especially useful if you want to showcase you pages. As always, we hope this little tricks will serve you well in the future. Cheers

]]>https://divi-sensei.com/blog/2017/08/25/making-website-screenshots-using-chrome/feed/0Create a indented edge / corner only border with CSShttps://divi-sensei.com/blog/2017/08/15/create-edge-corner-border-border-css-pimp-images/
https://divi-sensei.com/blog/2017/08/15/create-edge-corner-border-border-css-pimp-images/#respondTue, 15 Aug 2017 17:34:18 +0000http://divi-sensei.com/?p=859Today we want to share with you a cool little CSS trick you can use to create a border overlay where the border is only visible on the edges. This can make some great looking effects, especially when you use it as a overlay for images. The Problem Okay so heres the problem: we want […]

]]>Today we want to share with you a cool little CSS trick you can use to create a border overlay where the border is only visible on the edges. This can make some great looking effects, especially when you use it as a overlay for images.

The Problem

Okay so heres the problem: we want to create a border overlay where the border is not a straight line all the way through but it only visible on the corners. Like a camera view finder. Here is an example of what we will do:

Sure, we could simply draw the lines with Photoshop but then we could not simply use the image elsewhere and it wouldn’t be responsive. Therefore we need a more flexible solution. Also we don’t want to repeat the same steps over and over again in PS, right? So lets write some awesome CSS.

The Solution

The solution is to use pseudo elements in combination with the border property. Basically this trick works on every HTML element, which is at least inside one other element. If you have multiple elements on the same level, you might need to change the CSS slightly to achieve what you want. In our case, our HTML looks like this:

We want to put the edged border over the image but to make that work, we needed to put the image inside a p (any other container will do the trick as well) because the image itself has nothing inside it. The h2 would work as it is though.

The first thing we wanted to do, was to center the title over the image and also make the image fill the available space. We can easily achieve this using the following CSS:

And thats already everything you need to do. We hope that cool little trick will help you create a cool looking overlay on your next projects. If you use it, we would love to hear from you in the comments. Cheers

Credits go to the person who came up with this solution in this Stack Overflow Post:

]]>https://divi-sensei.com/blog/2017/08/15/create-edge-corner-border-border-css-pimp-images/feed/0Make Divi Fullwidth Header Scroll Down Button bounce (until the site is scrolled)https://divi-sensei.com/blog/2017/08/10/make-divi-fullwidth-header-scroll-button-bounce-site-scrolled/
https://divi-sensei.com/blog/2017/08/10/make-divi-fullwidth-header-scroll-button-bounce-site-scrolled/#commentsThu, 10 Aug 2017 15:00:43 +0000http://divi-sensei.com/?p=849Have you ever created a Divi page using the Fullwidth Header module and activated the Scroll Down button? We love the style, especially if the Fullwidth Header is set to fullscreen mode. Then the Scroll Down button is a nice indicator that there actually is more content on the page. However, since it is a […]

]]>Have you ever created a Divi page using the Fullwidth Header module and activated the Scroll Down button? We love the style, especially if the Fullwidth Header is set to fullscreen mode. Then the Scroll Down button is a nice indicator that there actually is more content on the page.

However, since it is a static button, it doesn’t draw that much attention to it. Wouldn’t it be nice if there was a way to change that? A way to make the button jiggle or bounce to draw the users attention? Well the good news is: there is! And it might be easier than you think.

Add a animation to the Show More button

All you have to do to give the Scroll Down button a nice little animation is to open the pages or posts setting and add the following CSS:

Of course you could also add this to your custom CSS to apply it site wide but personally, we prefer to only have this on pages where we really want it. Mostly when we use the Fullwidth Header module as the first module on that page. If we use it somewhere else on the page, we usually don’t show the Scroll Down button or we don’t want it to animate because it can also distract the user from the content.

Removing the animation on page scroll

Speaking about which. Wouldn’t it be nice if we could somehow make the animation stop once the user has scrolled? As soon as the user realizes that there is more content available, we don’t need to draw his attention to the animating button, right? Moreover, it could be distracting from the great page he should actually look at. So how could we do that?

Let us show you what we came up with to solve that problem. It’s actually quiet simple. If you know a better way, we would love to hear all about it. Feel free to leave us a comment if you have a better solution. Anyways, this is how we do it.

Add a custom class

The first step is to add a custom class to the Fullwidth Header module so we can better address it via CSS and JavaScript. No worries if you don’t know how to program, this is very easy and you don’t even have to leave the Divi Builder. Open the module settings and head over to the Advanced tab and add frontpage-header to the CSS class field. Save the module and you are done.

Change the CSS

Next change the CSS you added in part 1 of this tutorial. Instead of selecting the et_pb_fullwidth_header, we now can use our own CSS class. Simply replace the element like so:

Add the jQuery magic

The final step is to add some JavaScript code. The idea is to remove the frontpage-header class once the user scrolls. This will cause our CSS selection to fail and therefor the animation will not be applied anymore. But before we can add any JS code, we need a location to put it in. We don’t recommend to add it site wide so the best solution we could come up with was to simply add a Code module next to the Fullwidth Header module.

In this code module, add the following code. Make sure you include the <script> tags:

As you see, the script is very simple. We use jQuery to get the window. We then add a anonymous function which gets executed every time the user scrolls. Inside the function, we simply select our frontpage-header and remove the class from the element. Once the class has been removed, the animation stops. Easy, right?

Final thoughts

We think animating the Scroll Down button is a huge benefit. Maybe for you and us it is always clear that you at least try out to scroll a page and most people will also notice the Scroll Down button even if it is not animating but believe it or not, we had customers in the past who called us in confusion, asking why their page only consists of one image.

Once we added the animation, they immediately noticed the button and were satisfied. Don’t judge others based on your own standards and assume everybody is on the same page. You are probably one of the 10 % of people who knows the web the best but there are millions of users who are not familiar with the latest website designs so be indulgent and offer them some help when using your websites.