How to use conditional logic in forms

One of the most powerful features of the forms module of Divi is the conditional logic that allows to show or hide form fields depending on whether certain conditions are met so let's see how easy it is to use them.

How conditional logic works

The first thing is to know the characteristic, that you will find in each field of your form.

As you see in the previous capture, the first thing is to activate the conditional logic .

Once done this it decides if the rules (more below) what you apply will be all at once or any of them . This is a vital decision for the operation of logic, and the best teacher is the practice and purpose of your form.

To finish, start applying rules about existing fields, and this already gives you a clue: you can not apply conditional logic until you have created all the possible fields of your form .

Operation is simple :

  1. You choose the field to which the rule will apply between created
  2. Defines the conditional logic:
    • is equal to (an option of your chosen field)
    • is not equal to (idem)
    • is greater than (a numerical value of the chosen field)
    • ] is less than (idem)
    • contains (text, etc. of the chosen field)
    • does not contain (idem)
    • is empty (the chosen field)
    • is not empty (idem)
  3. You select the value to which the conditional logic will be applied between the values ​​of the chosen field.

] The result is that the field to which you apply the conditional logic will only be seen if the rule or rules defined is met, otherwise it will not be displayed.

Examples

The best way to see it it is with examples, so we are going to entangle a little with some representatives.

The field offers options

If the field to which you are going to apply the conditional logic is of the drop-down type, checkboxes or radio buttons is almost the most obvious, you just have to choose the conditional logic (equals, is not equal, etc) and choose the field to the value of the available options to which it will be applied .

So, if the field we are editing is of type checkboxes and you have defined that the rule is that you have chosen the field " I want … " the option " Budget Request ", then this field will be displayed .

]

And in the published form, choosing the option " Budget " will show the field of budget types to which we have applied the conditional logic in addition to all generic fields, with no conditional logic, common to say it in some way.

Choosing field with conditional logic

Applied conditional logic

As you see in the previous example, before selecting a field from the first drop-down are shown the fields without conditional logic (name, email, message) and are only selected by selecting the field with conditional logic, so that – in this case – the client chooses the budget type.

No is an options field

The other broad possibility is when the field from which the logic will emerge is not a list of options but something else plan or.

Imagine, for example, that there is a field for the user to I saw a resume, and if the user chooses it, an additional field is shown to explain its virtues.

You could also add a field whereby if the email address is from the company itself, it will not be shown, since You have your skills. Something like that …

In this way, even if the user selects the value " Work with you ", as I have marked apply all the rules, it will only be shown if the mail does not contain ayudawp.com.

With email

Without email

As you see in the screenshots, if you do not enter the email, the aptitude field for the job is shown, but once the enter and match the condition put that field is hidden.

The examples can be many, and you can complicate the form to infinity, applying rules on rules to create really complex forms, with a lot of answers based on varied conditional logics.

This makes the forms module of Divi really powerful, for almost any need. For my taste just lacking a file upload field, otherwise, thanks to the conditional logic, is practically perfect.

Loading …

May also help you:

How to remove Google Fonts from Divi, Genesis and more topics

As you probably know, there are many, many themes that load Google Fonts sometimes in excess, but you have to understand it , and is that for a theme developer is very convenient to load fonts from Google to make their subject more visually attractive, without having to host them in the subject, reducing their weight. Now, this has a problem, or several.

Google Fonts and the WPO

If you have analyzed your website in any measurement service of optimization and speed you will have seen that detect the loading external resources from Google Fonts as a problem . This is because are external calls that your website does to finally display its content, since resources do not always have to be available and yes, it's a problem. One would think that the hell, if they are from Google, they will load fast! But what if Google deletes that source tomorrow for a problem of rights, profitability, or whatever? And it's only an example. It can also happen that the servers where the Google Fonts are hosted have load delays for any reason, which would affect the loading of your website, as there would be resources that would never end up being displayed / uploaded. So it's best to host the sources locally, or not to load them from Google Fonts .

Google Fonts and privacy

In case you did not know, it turns out that if your theme uses Google Fonts are sharing the IPs of your visitors with Google . Come on, that Google does not lose opportunity to obtain information about our Internet uses at any time. And of course, if you are committed to privacy, let's not say since the appearance of the RGPD you should or inform your users in your privacy policies that that is happening, or simply avoid loading Google Fonts on your website, and show it with the user's system sources.

How do I turn off the Google Fonts upload?

If you're clear, let's see how to prevent the Google Fonts load and consequently the recovery of private data of your visitors (IPs) with Google. What we will do, for both Divi and for any other tem a, is to use the WordPress function wp_dequeue_style with which we will avoid loading Google Fonts of the CSS stylesheet of the theme . For this we need to know the name to include in the $ handle of the function, and here is a list of the most used topics:

Topic Style sheet name with Google Fonts ($ handle)
Twenty Twelve twentytwelve-fonts
Twenty Thirteen twentythirteen-fonts
Twenty Fourteen twentyfourteen-fonts
Twenty Fifteen twentyfifteen-fonts
Twenty Sixteen twentysixteen-fonts
Twenty Seventeen twentyseventeen-fonts
Genesis Sample genesis-sample-fonts
Extra extra-fonts
Divi divi- fonts

Once we know the function to use and the $ handle we just have to add our code to the file functions.php of the active theme, like this:

In the previous example we are avoiding the loading of Google Fonts in Divi. To see another example, in Genesis would be like that :

Easy eh?

Would you rather use a plugin?

If you do not dare with the code you can also use a plugin like ] Disable Google Fonts but only if your theme is one of these: Twenty Twelve, Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, Twenty Sixteen, Twenty Seventeen.

How do I host Google Fonts locally?

Another possibility, of course, would be to store locally the Google Fonts that your theme uses. In this way you fully maintain the aesthetics of your theme while respecting the privacy of your visitors facing Google. In this case the process passes by downloading the Google sources, hosting them on your server and changing the internal calls of the stylesheet, so that they point to the new address where the sources are, as we have already seen. It is somewhat more complicated but a good solution in any case.

Loading …

That may also help you:

How to optimize the speed and load times of Divi without plugins

One of the dangers of using layout models is that you have so many possibilities to decorate and flip with your pages, and it is so simple to do so, that Sometimes we make our web load slow, because of the amount of resources we insert in it .

Of course, the main criterion and norm to take into account should be not to use any resources other than essential to get conversions, sell or whatever you want to achieve with your web layout with Divi .

But the reality is that we see the option of putting a carousel with photos at high quality , or a call to action with video and it's hard to resist offering a tremendously attractive and effective website .

So, since I know you're not going to hold on, at least I'd like to give you a few tips and tricks to make Divi load faster and you get good results of WPO optimization not only in the online meters, but in the actual load of your pages.

WPO in Divi without plugins

The optimization of resources or WPO is possible in all web, and also with Divi and any visual layout. You just have to take into account some basic rules and apply the possibilities offered by the same designer.

Optimize the images before uploading them

 image file size in wordpress

Do not pass nothing to put a section hero full screen with a wonderful image that shows your qualities or product, as long as the weight of the file does not pose a problem for the loading of your page, especially on devices mobiles always with worse connections.

For this apply these 3 rules :

  1. Do not upload or use an image whose file weighs more than 100 Kb.
  2. Do not upload or never use an image at a higher resolution than necessary.
  3. Always use jpg instead of png unless you need transparency.

For the file weight say you do not have a program of image editing can to use online services such as tinypng that allow the compression almost without loss just with drag and drop your images.

 reduce image size tinypng [19659003] When the service optimizes your image, you download and upload the optimized image instead of the original image.

Regarding image size / resolution always take into account the image sizes for each Divi module. and reduce them from the same WordPress, as in the following captures …

 edit image wordpress 1

 Edit image wordpress 2 ]

 image optimized with wordpress

When you have the image at a suitable size, and at a sufficient quality for the web visualization in the browser, upload the image and, if you already had an earlier version, s use it for the new one, and optimized .

Imagine a web with the image of the previous example, with 7 Mb per image in which you have a carousel with 2 or 3 images of that size and weight, what it will take to load, however much you try to optimize by other methods.

And always, always, first reduce the size of each of your resources before you start applying optimization tricks or add WPO plugins.

Optimize videos before uploading them

Of course, you must apply the same criteria for videos.

The first advice is that if you can, avoid uploading files video, and use the oEmbed WordPress capability of to show videos from services like YouTube or Vimeo by simply pasting the URL anywhere in the editor.

Just add a module of text and in the editor box paste the URL of your video to

In this way you avoid having to serve video directly from your website so not only will your page weigh several megabytes more for the weight of the video, but it will consume huge resources for each reproduction, and you'll spend thousands of euros on web hosting.

If you need upload a video, for example for a Divi video carousel, and it's imperative that it be at least optimize the video to the maximum before uploading it.

Here again I suggest some common sense rules:

  1. If you can embed video using oEmbed better than uploading it.
  2. Always use the .webm format , much more optimized and smaller.
  3. If for compatibility with browsers you also have to upload the .mp4 format, optimize it before uploading it.

As you know, Divi modules that allow video insertion offer you 2 fields , for upload the .webm and .mp4 version of the same video .

 videos webm and mp4 divi

Always upload the .webm version, because they are more optimized for web and smaller but if you also have to load the .mp4, for compatibility, to make it look good in all browsers, at least reduce the file size before.

If you do not have .webm version you can convert your .mp4 video to .webm on this website . So you have both formats.

You can optimize video both .mp4 and .webm format, in online services like ClipChamp (free for 5 videos per month), which they work the same as the aforementioned tinypng.

Just upload the original video and download the optimized one. Then you upload the already optimized to your Divi module.

Install only the essential plugins

One of the parameters for measuring the loading times of a website is the TTFB and one of the parameters that make a page load slowly is the number of plugins installed and active.

So, before installing plugins, even if they are caching and optimization, follow this guide that I propose, and then keep your arsenal of plugins to the absolute minimum .

Easy, huh?

Generates a static CSS from Divi

For some time now, Divi has incorporated its own optimization tools into its options, and we are going to take advantage of them. [19659003] One of them is the generation of a static CSS file, which will reduce the size of the CSS styles of Divi allowing a faster and optimized page load. In fact it is one of the typical optimizations that include most of the WPO plugins and cache.

For this you see, in the WordPress administration, the menu Divi> Theme options> Builder and active the option called static CSS generation .

 css estatico divi

By activating this a static and minimized version is saved and loaded ( minify ) cached by Divi CSS which makes it faster to load.

Activates inline styles

Another feature that Divi has incorporated, although at some point the removed, is the possibility of serving the inline styles in the footer which allows the caching of the styles.

If you want to recover this functionality you have it in the same options page of the previous setting, in the selector called Send inline styles [1 9659059]. Just activate and save the changes.

 styles inline divi

Minimize and combine the JS and CSS files

One of the most typical optimizations that include the plugins WPO is the of minimize ( minify ) the code files, JavaScript and CSS .

In Divi you do not need to install a plugin for this, you have it in the Options of the theme, in the tab General, just under the whole.

 minify css js divi

Simply activate the two options and save.

Divi minimizes all the JavaScript and CSS that it uses ] and offers the browser minimum and optimized versions of everything, reducing the weight of your entire web and each page offering shorter load times, in addition to obtaining better results in web speed meters such as PageSpeed. [19659074] WPO with Divi Builder

If you do not have the Div theme i, if you only use the Divi Builder plugin you have these same configurations, all together in the Advanced tab of your options.

 wpo divi builder

And with plugins?

In my tests I have verified that works better than the minimized and combined that Divi does of its own CSS and JS that the plugins that you will find out there.

Now, you can further improve the optimization, the WPO of your web with a perfect combination which I propose to you:

  1. HTTP / 2 – Host your web in a hosting that serve your web in HTTP / 2, with innumerable advantages . If your web hosting offers it to you, you only have to serve your website in https with an SSL certificate .
  2. PHP 7 – Do not host your website if your hosting does not allow you to have the version of PHP 7.0 or higher the improvements in speed and security are impressive.
  3. A good cache plugin . If you have your website in SiteGround you will only need SG Optimizer . Otherwise I recommend WP SuperCache very easy to use and configure.
  4. Autoptimize – This optimization plugin adds the ability to minimize all HTML files, but it will also do it with the JS and CSS that are not from Divi. I recommend not activate more options than these without advanced options, to not break anything.
  5. WPO Tweaks – If you install my plugin for WPO optimizations to one click you will have, without having to configure anything, optimal speed improvements to virtually any web.
Loading …

may also help you:

Convert any link into a Divi button • WordPress Help

/ * CSS to create a very cute divi button * /

. button white {

font size : 20px ;

font weight : 500 ;

] moz border radius : 3px ;

webkit ] – border radius : 3px ;

border radius : 3px [19659003];

padding : 8px 20px ;

line height : 1.7em ; [19659002] background : transparent ;

border : 2px solid [19659003];

webkit font smoothing : antialiased ;

] moz osx font smoothing : grayscale ;

moz transition : all 0.2s ;

webkit ] – transition : all 0.2s ;

transition : all 0.2s ; [19659002] position : relative ; }

to . button white {

background color : transparent ;

border : 2px solid # 8e3737; / * change the border color here * /

color : # 8e3737! important; / * changes here the color of the text * /

font weight : bold ; }

to . button white : hover {

background : transparent ;

border : 2px solid # 8e3737; / * change here the color of the border when passing the cursor * /

padding : 8px 34px 8px 14px important ; }

to . button white : after {

font family : 'ETmodules' ;

font size ]: 32px ;

opacity : 0 ;

speak : none ;

font style : normal ;

font ] weig ht : normal ;

font variant : normal ]

text transform : none ;

line height : 1 ;

webkit font smoothing : [19659004] antialiased ;

moz osx font smoothing : grayscale ;

font size : 32px ;

line ] heig ht : 1em ;

content : " 35" ;

position : absolute ;

margin left : 1em ;

moz transition : all [19659000] 0.2s ;

webkit ] transition : all 0.2s ;

transition : all 0.2s ; }

to . button white : hover : after {

] [19659004] opacity : [19659308] 1 ;

display : block ! important ;

font family : 'ETmodules' ;

speak : none ;

style : normal ;

font weight : normal ;

font variant : normal ;

text transform : none ;

line height : [196590] 13] 1 ;

webkit font smoothing : antialiased ];

moz osx font smoothing : grayscale ;

right : 0px ;

top : 5px ;

margin left : 0 ; }

Foldable, extendable and foldable mobile menu

/ * Styles for Divi mobile folding menu * /

<style type = "text / css">

# main-header .et_mobile_menu .menu-item-has-children> a { background-color : transparent ; position : relative ; ]

# main-header .et_mobile_menu .menu-item-has-children> a: after { font-family : 'ETmodules' ; text-align : center ; speak : none ; font-weight [19659006]: normal ; font-variant : normal ; text-transform : none [19659006]; -webkit-font-smoothing : antialiased ; position : absolut ute ; }

# main-header .et_mobile_menu .menu-item-has-children> a: after { font-size : 16px ; content : ' 4c' ; top : 13px ; 19659089] right : 10px ; }

# main-header .et_mobile_menu .menu-item-has-children.visible> a: after ] { content : ' 4d' ; }

# main-header .et_mobile_menu ul.sub-menu {[19659089] display : none ! Important ; visibility : hidden ! Important ; transition : all 1.5s ease-in-out ; }

# main-header .et_mobile_menu .visible> ul.sub-menu {[19659089] display : block ! Important ; visibility : visible ! Important ; }

/ * JS for mobile folding menu Divi * /

<script type = "text / javascript ">

( function ( $ ) {

function setup_collapsible_submenus () {

var $ menu = $ ] ( '# mobile_menu' )

top_level_link = '# mobile_menu .menu-item-has-children> a' ];

$ [19659132] menu . find ( 'a' ) . each ( function () [19659089] {

$ ( this ) . off ( 'click' ) ;

) ( $ ( this ) . is ([19659132] top_level_link ) ) {

$ ( this ) . attr ] ( 'href' '#' ) ;

}

if ( ! $ ([196] 59163] this ) . siblings ( '. Sub-menu' ) . length ) {

$ ( this ) . on ( 'click' ] function ( event ) {] $ ( this ) . parents ] ( '. Mobile_nav' ) . trigger ( 'click' ) ;

} ) ;

} else {

$ ( this ) . ] on ( 'click' function [1 9659006] ( event ) {

event . preventDefault () ;

] $ ( this ) . parent () . toggleClass ( 'visible' ]) ;

} ) ;

}

} ) ;

}

$ ( window ) . load ( function () [19659006] {

setTimeout ( function () {

setup_collapsible_subm enus () ;

} 700 ) ;

} [19659006]) ;

} ) ( jQuery ) ;

How to change the size of the highlighted image in the blog module in grid

The blog module in grid Divi is quite colorful and attractive, but if something I have found that my clients do not like is that the image prominent, or the box to her destined, have a fixed size, that is not the one that they want.

And yes, possibly have clients very squared, but it is necessary to give service to all no?

The other day we talk about how to match the height of the elements of the blog module in grid a solution that customers like a lot, but the truth is that this change the size of the highlighted image they ask for many more. 19659003] The problem is that Divi has a default size, and if your image is, for example, smaller or bigger, you adjust it as you want, or you pixelate it or cut it out . ] That said, the situation is when your client always uploads the images to a specific size to, and wants them to come out whole. In that case what touches is force the default size to the client .

Fortunately, the solution is simple.

You just have to add a couple of new functions at the end of the file functions.php of the son theme:

In the previous code only you have to change the example sizes of width and height of the thumbnail to those of your client's featured images .

Save the changes and that's it, now all the thumbnails with the highlighted image will have the exact size of the images uploaded by your client to that size .

Note: If you upload the highlighted images of another size to the code, then each image will be different. The trick is that the image you upload is exactly the same size as the one defined in the code.

Loading …

May also help you:

Divi Tutorial: Prevent the logo from losing quality

One of the things that makes me more nervous Divi although I love it, is that when you add your own logo it looks very ugly, pixelated or low quality .

Either because of the size of the chosen image or the format, when the size of the main menu is small, it is often displayed poorly and basically looks bad .

One possible solution, manual, it is upload the logo to the maximum size – or similar – that will be displayed in your main menu . It's a fix, but it works.

But if you do not want to do ridiculous experiments or calculations it's best that you add this bit of CSS from the Theme Customizer > Additional CSS :

Save the changes and your logo will look decent already .

Following the same example from the previous web would now look like this, without changing the image file, just applying the previous CSS:

This is one of my tricks for Divi favorites so easy to apply and the great and visible result with the least effort.

]

How to improve the appearance of comments

The theme Divi has many advantages and every time it improves more in every way, but there are some elements that still leave something to be desired, at least for my taste, and one is the native aspect of the comments, so let's improve them .

I mean the Divi theme, for example, user avatars are square which goes against current style trends, because in almost virtually all web services are round.

One more problem with the avatars is that are also too large .

And also to how the boxes are shown when responding to comments, overlapping at times on top of each other, which is a fat design flaw.

Another flaw , in my view, is the excessive margin that is added to each comment anidad or sometimes overflowing the width of the comment zone.

Here are some examples of what I'm saying:

Well, if you want to fix these bugs you can greatly improve the appearance of the native comments of Divi by adding a bit of custom CSS or solve them, and offer better comments.

Just open Theme Customizer > Additional CSS and add the following code:

Post changes and the improvement will be noticeable .

you see, in each line I explain in the code what each part does e, for your reference.

In the end, what you get is this other …

How can you observe, we have achieved the following:

  • Convert the square avatars into rounds
  • Reduce the size of the avatars somewhat
  • Improve the placement of the avatars
  • Make the avatars even smaller in mobile devices
  • The nested comments, from the second comment, remain in the same margin, do not extend to infinity.
  • In passing we have eliminated the problems of visualization in the box to respond to comments, which you will appreciate the first time you use it.

If you want to add more styles for more sizes of devices you will only have to add the lines corresponding to the maximum widths you want to specify and customize.

Loading …

That may also help you:

Lightbox also in the images, not only in the galleries • WordPress Help

As you already know if you use Divi among its possibilities it incorporates in a native way the effect lightbox , or table of light, in the galleries, to open the images in a pop-up window. The only downside is that this does not work on single images.

If you activate the Divi gallery option in the theme settings or the plugin when you insert a gallery in an entry or page, clicking on any image is will open in a pop-up window (modal) from which you can easily navigate between the other images in the gallery and, most importantly, without leaving the publication you are in.

 lightbox divi en images

But there are many users who also need or want that functionality when they link an image to the multimedia file, and there does not work by default lightbox by Divi with what would have to install a new plugin, with its own script that creates the pop-up window.

And the main problem is the overload, having use two scripts to get the same effect . A few scripts that will load in each URL of your site.

Another problem of having two scripts for the same thing is that the user experience will not be consistent since it will be difficult to find another plugin / script that has the same pop-up window design as the one used by Divi.

Fortunately there is a way to re-use the same Divi script also for the single images linked to the multimedia file .

Effect ] lightbox from Divi in ​​images with a bit of code

For to use the script lightbox from Divi, also in single images simply add this code to the file ] functions.php of Divi's son theme:

Effect lightbox of Divi in ​​images with a plugin

 divi lightbox for images

If you prefer to use a plugin Do the same, take advantage of the existing Divi script you can install Divi Lightbox for Images .

You do not have to configure anything, just install it and activate it . From that moment on, linking an image to your multimedia file will also use the Divi script for it, not only for the galleries.

In passing, the plugin loads the script at the bottom of the page, better for optimization ( WPO ) of your site .

Loading …

may also help you:

Remove border and margins in the grid style blog module

One of the most popular modules Divi is the one from blog style grid, or masonry which shows the last entries so that they look like in boxes stacked in aesthetically mode messy.

If you use the social network Pinterest you know what I'm talking about, it's very similar.

This module, by default, adds an additional margin and wraps the entries in boxes with border that you can remove if you want.

To eliminate that additional margin and border you just have to add the following code in section Additional CSS WordPress Personalizer .

Save the changes and you'll have the grid-style blog module, or masonry, cleaner like this: