Divi’s integrated condition options let us show content material in response to a Web page Talk over with situation. This lets you show any Divi component provided that the consumer has visited a selected web page in your web page. In different phrases, the content material will stay hidden till the consumer has visited the web page. This capability is superb for retargeting guests with a press release bar when they consult with a touchdown web page. For the reason that guests have confirmed to have an interest (they got here again to the touchdown web page), we will be able to leverage this via showing bulletins (reductions, limited-time provides, promotions, and so forth.) to steer them in the appropriate course.

On this educational, we’ll display you find out how to retarget a touchdown web page consult with with a press release bar in Divi via benefiting from Divi’s integrated situation choices. All it takes is a couple of clicks.

Let’s get began!

Sneak Peek

Here’s a fast take a look at the design we’ll construct on this educational.

This Announcement Bar will probably be displayed after a consumer visits the web page.

Obtain the Structure for FREE

To put your arms at the format from this educational, you are going to first want to obtain it the use of the button underneath. To realize get right of entry to to the obtain it is very important subscribe to our Divi Day-to-day e-mail record via the use of the shape underneath. As a brand new subscriber, you are going to obtain much more Divi goodness and a unfastened Divi Structure pack each and every Monday! If you happen to’re already at the record, merely input your e-mail cope with underneath and click on obtain. You are going to now not be “resubscribed” or obtain further emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

See also  The Divi 5 Feature Swap (Plus 200+ Fixes/Improvements)

Obtain For Unfastened

Sign up for the Divi E-newsletter and we will be able to e-mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative superb and unfastened Divi assets, pointers and tips. Apply alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your e-mail cope with underneath and click on obtain to get right of entry to the format pack.

DOWNLOAD

You have got effectively subscribed. Please test your e-mail cope with to substantiate your subscription and get get right of entry to to unfastened weekly Divi format packs!

To import the phase format for your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, choose the import tab and select the obtain report out of your laptop.

Then click on the import button.

As soon as carried out, the phase format will probably be to be had within the Divi Builder.

The Key Idea

Easy methods to Show a Segment Provided that a Customer has Visited a Particular Web page

As up to now discussed, Divi’s integrated situation choices come with a Web page Talk over with situation that lets you show any Divi component provided that the consumer has visited a selected web page in your web page. In different phrases, the content material will stay hidden till the consumer has visited the web page.

However, you’ll select to show a Divi component provided that the consumer has now not visited a selected web page. In different phrases, the content material will stay hidden to the consumer till they consult with the web page.

On this educational, we’re going to use Divi’s situation choices to show a press release bar provided that a consumer has visited the touchdown web page. The announcement bar will also be constructed simply the use of the Divi Builder to incorporate any form of content material or design you need. As soon as constructed, you’ll upload the Web page Talk over with situation to the announcement bar (which on this case is a Divi phase) via doing those easy steps:

1. Open the phase settings for the phase used to create the announcement bar.
2. Underneath the complex tab, click on the plus icon beneath Show Prerequisites so as to add a brand new situation to the phase.
3. From the situation dropdown, choose the Web page Talk over with situation from the record.
4. Within the Web page Talk over with situation settings popup, choose the method to show provided that the consumer has visited a selected web page.
5. Make a choice the precise web page from the record of pages out of your web page (which on this case will be the Touchdown Web page).

That’s it! As soon as carried out the announcement bar (or phase) is not going to seem to customers till they’ve first visited the Touchdown web page up to now.

Now that you’ve a snatch at the key idea, let’s get to the academic, we could?

What You Wish to Get Began

To get began, it is very important do the next:

1. If you happen to haven’t but, install and activate the Divi Theme.
2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
3. Select the choice “Construct From Scratch”.

After that, you are going to have a clean canvas to start out designing in Divi.

Easy methods to Retarget a Touchdown Web page Talk over with with an Announcement Bar in Divi

Section 1: Loading the Electronics Retailer Touchdown Web page Structure

Sooner than we will be able to retarget a touchdown web page, we want to construct one first.

To hurry up the method, we’re going to use the Electronics Retailer Touchdown Web page Structure from Divi’s Electronics Store Layout Pack which is to be had from throughout the Divi Builder.

To load the format to the web page, click on the Upload From Library button (the plus icon) from the settings menu. Underneath the premade layouts tab, choose the Electronics Retailer Touchdown Web page format and click on the Use This Structure button.

You need to, in fact, use an current touchdown web page in your web page, or select to construct one by yourself. However for now, this may paintings.

Section 2: Making a Segment with The Web page Talk over with Situation

As a way to construct the announcement bar, we’re going to use a Divi Segment. Pass forward and upload a brand new common phase beneath the present peak phase of the format.

As soon as added, drag the phase to the highest of the web page format and upload a three-fourths 0ne-fourth row to the phase.

Open the phase settings and upload the next background colour to the phase:

• Background Colour: #5e10da

Underneath the design tab, replace the spacing and upload an animation impact to the phase as follows:

• Padding: 0px peak, 0px backside
• Animation Taste: Slide
• Animation Course: Down
• Animation Beginning Opacity: 100%

This may shorten the peak of the announcement bar in addition to give it an crowd pleasing animation impact when the web page lots.

Underneath the complex tab, upload a brand new show situation via doing the next:

1. Click on the plus icon beneath Show Prerequisites so as to add a brand new situation to the phase.
2. From the situation dropdown, choose the Web page Talk over with situation from the record.
3. Within the Web page Talk over with situation settings popup, choose the method to show provided that the consumer has visited a selected web page.
4. Make a choice the precise web page from the record of pages out of your web page (which on this case will be the Touchdown Web page).
5. Save Settings.

Now you are going to have a brand new Web page Talk over with show situation for the phase.

Be aware: In case you are the use of a caching plugin, this web page will have to be excluded from the cache to permit the show situation to serve as correctly.

Section 3: Developing the Announcement Bar Content material

At this level, we now have the phase and row for our announcement bar in position. And our phase has the Web page View show situation lively. So, any content material we upload throughout the phase will inherit the show situation of its guardian container (the phase). All we want to do now’s fill the phase with content material to complete the introduction of the announcement bar.

The primary piece of content material would be the announcement bar textual content. So as to add the textual content, reproduction the textual content module underneath the digital camera symbol in the appropriate column of the row within the current header phase of the format. Then paste the textual content module throughout the left column of the row within the announcement bar phase.

As soon as the brand new textual content module is added, open the textual content settings and replace the next:

• Heading 3 Textual content Alignment (pill and call): Heart
• Heading 3 Textual content Measurement (telephone): 12px
• Padding: 5px peak

In the appropriate column of the announcement bar, we’re going to upload a button. To try this, reproduction the present button module above the countdown timer in the appropriate column of the row within the current header phase of the format.

Then paste the button module within the appropriate column of the row within the announcement bar phase.

As soon as added, open the settings for the button module and replace the next:

• Button Alignment (pill and call): Heart
• Padding (pill and call): 5px peak, 5px backside

Section 4: Adjusting the Row Settings

To place the general touches at the design of the announcement bar, open the settings for the row and replace the sizing choices as follows:

• Gutter Width: 1
• Width: 95%
• Max Width: 980px

• Padding: 20px peak, 15px backside

Ultimate Outcome

That’s it! To take a look at the outcome at the are living web page, take into account that you’re going to now not see the announcement bar till you consult with the touchdown web page (or no matter web page you decided on for the Web page View situation).

Here’s what the announcement bar will seem like as soon as it does seem.

And here’s the animation of the announcement bar on web page load.

Ultimate Ideas

The Web page View show situation highlighted on this educational is handiest one of the condition options to be had in Divi. Be happy to mix the web page view situation with different prerequisites that make sense for a press release bar. For instance, you might want to additionally come with the Product Acquire situation to supply a first-time acquire cut price handiest to guests who’ve now not made a purchase order. Plus, you’ll additionally experiment with showing different content material but even so a press release bar as neatly. Have a laugh!

I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; colour: red; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}

The submit How to Retarget a Landing Page Visit with an Announcement Bar in Divi gave the impression first on Elegant Themes Blog.

read more