Site Design Analysis #01

Here I will discuss the feature of this sample site called divi theme for wordpress. Let’s focus on header appearance. At first condition, the header will show as follows:

And the menu content as follows:

When user try to scroll down at certain amount of pixels, the header will automatically resizes with some animation effect to:

And the menu also perform resize to:

For the purpose of this analysis, the page is saved to D:\sites\02 folder.

When viewed in the local folder, I notice that the search icon is not properly shown:

Using the inspector, the search icon is governed by:

With the CSS rule as folows:

Finding the origin of ETModules font in CSS, I have:

Let’s create the above required folder and copied the files to d:\sites\02 folder structure, and now I have:

Next, I try to scroll down to see whether it has the same effect from the original page from the website, but turns out it is not working. The header do not resize itself.

Checking to Firefox’s console, I have:

After performing some necessary fixes of malformed string constant, now the header resize effect is active. But now the javascript is in minified mode so the process of reconstructing javascript to its original source is required.

But which javascript source that is related to this animation effect ?

Using the Firefox’s inspector when I try to scroll down the page, there are some changes in the element class at et-animated-content as follows:

And by clicking on the event icon, I have:

The custom.js is in minified form, but when I try to check at line 111 as describe above, I have:

At line 110 there’s information of where’s the javascript code is come from. So, this block is removed and replace with original source from custom.js and leaving all other minified parts intact.

After this process is done, now I have the working development mode of javascript that is not minified and responsible for the above animation effect. But how is the mechanism works ?

Again, using the Firefox inspector, what I found is at the start, the margin top is -1px and class is blank as follows:

When I scroll down, it changes to:

The et-fixed-header class attribute is responsible to change the height to a more compact form and the -27px margin changes is required so that when the height shortens, the page content should be moved up, otherwise it will be like this:

Try to find possible class modification for addition of et-fixed-header in the sources, I have:

With callstack as follows:

You can see that the callstack to the addClass jQuery method is called from a minified source at line 91 which is:

Download the appropriate Waypoints version 4.0.0 and expand the custom.js source with download jquery.waypoints.js file, and now the callstack become:

This javascript module is required to create trigger when the selected object hit the top of view port.

Now let’s explore the menu option when viewed with desktop screen:

When the screen size is narrowed down until certain limit, the above menu become:

And the three-striped button above will contain the menu when clicked:

Let’s see how this is accomplished. Using Firefox’s inspector, when the navigation menu is in expanded state (i.e. in desktop view port) the element below is active:

And the element below is greyed out:

But when it reaches certain minimum width, the navigation element with id top-menu-nav below is greyed out:

Where the et_mobile_nav_menu is active:

By viewing the css rule, the top-menu handling as follows:

Where the et_mobile_nav_menu css rules as follows:

So this is controlled via @media css directive.

Now, let’s find the mechanism of menu in narrowed width, when clicked it will show the menu. The first step is try to identify the javascript event by clicking on “ev” icon in the inspector:

The script is in minified state and originated from frontend-builder-global-functions.js. Let’s copy the development javascript to this file, and again view it using inspector:

Let’s try to perform breakpoint at the above location, to see whether it has some relation with the shown menu:

And indeed it is related with the callstack as follows:

For more detailed analysis starting from the above step, I will leave it to the reader.

Now, let’s explore the Divi approach on search mechanism. The search UI begins by clicking on the search icon:

Then the navigation menus will slowly fading out and the search input will slide down to become:

Again by examining using inspector, I have:

And source code location as follows:

Let’s explore the content below the header. When viewed on desktop view port, it comprises of two columns:

But when the view port is narrowed down it will automatically reduces to one column:

Let’s see how this mechanism works. The right pane is defined using div element with sidebar id and left pane is left-area as the id. The div element with sidebar id is defined with @media css directive as follows:

When it is below 981px, the above rule with float and width is not applied.

In the end, this article provides a preliminary steps to reveals some features and functionality of the sample site. Actually more steps should be completed if someone wants to apply the features specific to this site into their website. In this case, I will leave it to the reader.

You can leave a response, or trackback from your own site.

Leave a Reply

Powered by WordPress and Bootstrap4