Step by step instructions to Make Custom Occasion Posting and Enrollment Pages with Divi and WooCommerce

Posted on December 6, 2017 by Nathan B. Weller in Divi Assets 9 Remarks
Step by step instructions to Make Custom Occasion Posting and Enrollment Pages with Divi and WooCommerce
Blog/Divi Assets/How to Make Custom Occasion Posting and Enrollment Pages with Divi and WooCommerce

Assuming you run or help volunteer at an association that puts on occasions, then you're possible acquainted with an extensive variety of occasion arranging, the executives, and limited time instruments. There's Facebook, Meetup, and heaps of WordPress modules with somewhat various ways to deal with the errand of putting on an occasion.

These devices are perfect. Also, for pretty much every utilization case I can imagine, one of them works impeccably. However, in certain examples, for example, on account of an association that just does a couple one-off occasions or few yearly occasions, these choices can be pointless excess. Or on the other hand maybe they don't do a sufficient occupation of addressing exactly the way in which significant the occasion is to your association since in a considerable lot of these devices, all occasions appear to be identical.

Should a graduation service or supper to respect an extraordinary visitor truly look and feel equivalent to an easygoing picnic?

On the off chance that you're asking me, the response is a reverberating no.

However, assuming none of these apparatuses is very ideal for the errand, that prompts another inquiry: what would it be advisable for us to do all things considered?

My response is: make custom occasions posting and enlistment pages with Divi!
See of Final product

The Ranchers Market Format Pack that we delivered on Monday as of now has a custom occasions page. With the goal that component is dealt with. You can download that format pack free of charge and utilize the plan with no guarantees or change it to your inclinations.

custom-occasions posting page

However, as may be obvious, every one of these occasions has a connection that says "Enlistment Data". If you have any desire to connect that up to Facebook or Meetup-task finished. However, on the off chance that you need more command over the plan of your full occasion subtleties and enlistment process you can interface them to a page on your site like the one I've planned beneath.

custom-enlistment page

This custom occasion posting/enlistment page will permit you to introduce your occasion in a completely marked manner that gives the experience you believe the people who connect with your association should have.

Really perfect, correct?

This is the way to make it yourself!
Setting up Your Plan Resources

The essential resource you want to track with this instructional exercise is our fresh out of the box new (free) Ranchers Market Format Pack. Adhere to the guidelines there to download and introduce it. Then, at that point, I strongly suggest following the means framed here to take your site to a higher level.

You will likewise need to download the picture resources envelope from the Ranchers Market Design Pack post. It's situated at the actual lower part of the post. There is a picture in there that is not in the format pack itself that we will need to utilize called ranchers market-22.jpg. I've resized this picture from it's full goal size of 2496px by 1665px to 1200px by 800px.

The main picture I'm involving that is not currently remembered for the Ranchers Market Design Pack or picture resources is a 600px by 800px representation picture for the "Meet Your Educator" part of the plan. So while tracking with you should give your own picture to this part.

(Or on the other hand snatch the one I utilized from our recently delivered Travel Format Pack.)
Instructions to Make Custom Occasion Posting and Enrollment Pages with Divi and WooCommerce

Buy into Our Youtube Channel
Making a Custom Occasion Enlistment Page in Divi

Priorities straight, we should make another page by going to Pages > Add New in the WordPress Administrator. The occasion from our postings page that I will make an enrollment page for is the Natural Cooking Class that should occur in the period of September. So I'll refer to my new page as "September Natural Cooking Class". Then, at that point, we want to tap the purple Use Divi Developer button.

make new-page

Presently we can move things to the frontend of the site for our plan work by tapping the blue button that says Utilize Visual Developer.

divi-enlistment page-area 1-1

To kick things off, click on the blue stuff symbol to open up your segment settings. Under foundation click on the picture tab and add our re-sized ranchers market-22.jpg picture. Then, set the foundation Picture Mix to Overlay.

divi-enrollment page-segment 1-2

Then, still behind the scenes settings, get around to the variety tab and set the foundation tone to rgba(0,0,0,0.47). Save your settings.

Then, now is the ideal time to add our page title. click the green in addition to symbol in the green line (not at the lower part of it) to choose your section inclinations for this column. Pick single segment. You will then, at that point, be provoked to embed a module. Embed a text module.

divi-enrollment page-segment 1-3

Enter the text "September Natural Cooking Class" and set your passage style to h1.

divi-enrollment page-segment 1-4

Then, at that point, get around into your text module's plan tab and open up the plan settings for Heading Text. Arrange the accompanying settings:

Heading Textual style: Lato

Heading Textual style Weight: Strong

Heading Text Arrangement: Center

Heading Text Size: 46px

Heading Text Tone: #ffffff

divi-enlistment page-area 1-5

Then, look down to the Dividing choices. Arrange the accompanying settings.

Cushioning Top: 100px

Cushioning Base: 75px

divi-enrollment page-area 1-6

Save these settings and afterward make another customary area (blue). Select the two equivalent segments choice for your line. In the lefthand segment add a picture module. The picture I utilized is called produce-14.jpg and it ought to currently be in your media library since you're utilizing the Ranchers Market Design Pack.

In the second line segment, add a text module. Compose the accompanying text:

"Hold Your Spot Today

Hold your spot at our September Natural Cooking Class. This buy gives you one of the restricted class spots and each of the provisions you should track. Simply bring yourself!"

Set the text "Save Your Spot Today" to a h2 utilizing your passage styles. Save your settings. You ought to now have a segment/line that seems to be this.

divi-enrollment page-segment 2-1

Presently it is the ideal time to tweak! How about we start with the column. We believe that it should stand apart since this is our enrollment page's essential source of inspiration. Set the line foundation tone to #e55039.

divi-enrollment page-segment 2-2

Presently how about we jump over into our line's plan tab. Open up the Dividing choices and arrange the accompanying settings:

Custom Cushioning: 0px for all choices.

Section 2 Custom Cushioning:

Top: 60px

Right: 25px

Base: 25px

Left: 25px

Save settings.