Today’s tutorial will be a little long-winded to give a simple intro to Parent:Child relationships and selectors. While it is written with Divi as an example, it applies generally to CSS on all types of pages.
I’ve been spending a bit of time on Facebook lately looking through various groups dedicated to web design. I’m trying to learn more about what is giving people difficulties and learning about problems I might run into in the future (beware developing a page locally on a different version of php than the final host, you are in for a world of hurt!
When I can I try to throw in my meager knowledge to answer a question or solve a problem. Today a person was asking a question about the Bloom e-mail optin plugin in from elegant themes for their Divi builder (remember I’m an affiliate, doesn’t cost you anything, but makes me a little cash). Basically, the person wanted to be able to click a button and have the opt-in pop up. Luckily, the plug-in has an option for that!
Once you have the Bloom plugin installed you need to make a new “OPTIN”. To do this you go to your dashboard and click on the Bloom config on the left side. That will bring up your active optins screen. From there you click on the “NEW OPTIN” button on the upper right. Next, you have to walk through three different configuration screens that set the campaign’s name, what mailer you are going to use, and the overall design. Once those are locked in it is time to set-up when or under what conditions you want the opt-in to appear.
As you can see, there are a number of options. In this case I have “Trigger On Click” checked. You can also have multiple triggers – like a time delay and a trigger when clicked. A word of warning, the “Display Once Per Session” doesn’t seem to apply to all the triggers, so if you select time delay and click to trigger, the user will see your optin more than once.
Okay, back to the main tutorial. Once you check the “Trigger On Click” option you will see another box appear below it that says “CSS Selector (string)”. Here is where you will define what object/s in your DOM can cause the optin to appear. One important thing to think about here is how specific you want to be and how to make sure that the click item is unique. The best way to do this is to give either the item (or its parent in the DOM) a unique ID. So what is this whole parent:child thing?
Here is just some example HTML that defines a short “About Us” page along with our subscribe button for the optin. Hopefully you can build something like this easily with Divi using whatever modules you would like. We will get back to the Divi specifics shortly and where you can run into “trouble”. In the most straight-forward implementation, you could simply add an id to the button.
Then, within you Bloom CSS Selector you would add “#sub_clicker” without the quotes. This basically says to look for an item on the page with an ID (#) of sub_clicker. Note: Class and ID names are case sensitive – I usually use camel case for my Class and ID names, but here it seemed clearer to use underscores. In this case, I only want one button on my whole site to allow people to subscribe, so I used an ID. If I have multiple buttons I would use a Class name.
Then I would modify my CSS Selector to “.sub_clicker”. So, hash (#) for ID and dot (.) for Class. “But,”, you yell, “I’m using a module in Divi that doesn’t let me give Class/ID names to individual buttons!” Here is where the parent child thing comes into play. Any element up the DOM tree is going to be a parent to those lower on the tree. So, in the original code the “.main-body” is going to be the parent to both the “.about-us” div and the button. The “.about-us” div will be the parent of the button. So, say we can use Divi to only add a custom ID to the parent. The example that came up today was the full-width header module. It allows for two buttons, and while you can add custom CSS styling to each, there isn’t a way (that I know about) to add a Class or ID to those buttons within the module. However, you can add a custom Class/ID to the main module. This ends up generating the following code.
As you (hopefully) can see, I added an ID of “clicker” to the section. If I didn’t have other pages with buttons I could simply add “.et_pb_button_one” to my CSS selector line in Bloom. However if I do have other pages with buttons, this will quickly hijack their functionality. But, with the “clicker” ID set on the section we can take advantage of the parent:child relationship and set our CSS Selector to “#clicker .et_pb_button_one” to target only this button in this section. Note the space between the two selectors, this can be important! This same approach can be used with tags, as well. If we wanted both of the buttons to be optin triggers we could use “#clicker a”, since they both have <a> tags. We could even have our text be the trigger with “#clicker h1”!