Each and every web site in the end wishes UI that lives outdoor the web page’s commonplace content material glide: a pop-up, a sticky reminder, a slide-in panel, or a affirmation steered. In Divi 5, you’ll construct those with Canvases.
A Canvas is a indifferent design workspace that exists along the principle web page canvas. It’s not a module dropped into the web page format. As an alternative, it will give you a separate workspace for off-canvas UI, pop-ups, menus, staging layouts, and different designs that are meant to keep break away the principle web page whilst you construct.
This a part of the Mastery Direction covers two Canvas builds for the coworking homepage. The primary is a small Match Reminder understand anchored to the bottom-left of the viewport and dismissible with an in depth icon. The second one is a focused electronic mail opt-in pop-up this is hidden by means of default, gated by means of a cookie situation, and precipitated when the customer scrolls to a particular segment.
In combination, those two examples display the total Canvas, Interactions, and Show Stipulations workflow.
Contents
What Canvases Are
A Canvas is a indifferent workspace in Divi 5. The principle Canvas holds the visual web page content material. Further Canvases provide you with separate puts to construct trade layouts, hidden UI, off-canvas components, pop-ups, menus, and design experiments.
When wanted, Canvas content material will also be appended to the front-end web page or injected with a Canvas Portal. You’ll be able to nonetheless design within a Canvas the usage of acquainted Divi components, together with Sections, Rows, Columns, Teams, Modules, Presets, and Design Variables.
There are two primary Canvas varieties:
- International Canvas: To be had around the web site and helpful for reusable UI, akin to pop-ups, menus, notification bars, and ordinary site-wide components.
- Native Canvas: Tied to a particular web page or template and helpful for one-off UI that handiest belongs in a particular context.
We’ll construct each varieties on this educational. The Match Realize might be an area Canvas for the homepage. The e-mail opt-in pop-up might be a International Canvas, however we’ll cause it from the homepage. If you wish to have the similar pop-up to seem in different places, you’ll upload an identical cause interactions on different pages or templates.
How Canvas Visibility Works
3 options paintings in combination to make a Canvas behave like a pop-up, understand, or slide-in panel.
- Visibility settings: Conceal a component by means of default so it does now not seem till an interplay unearths it.
- Interactions: Create event-based conduct. A cause, akin to Click on, Load, or Viewport Input, runs an impact, akin to Display Part, Conceal Part, Toggle Visibility, Upload Cookie, or Take away Cookie, on a goal component.
- Show Stipulations: Come to a decision whether or not a component will have to render in response to stipulations akin to person function, instrument, date, or cookie values.
This mix allows you to design the component visually, cover it by means of default, expose it on the proper second, and optionally save you it from showing once more after a customer closes it.
Match Reminder Realize
The Match Reminder is the better of the 2 builds. This is a small card pinned to the bottom-left of the viewport. It features a gentle background, a dismal border, a heading, a brief description, and an in depth icon.
This understand seems when the web page lots and will also be disregarded for the present web page view. Since we will be able to now not set a cookie for this one, it may well seem once more on a long term web page load.
Create The Native Canvas
Within the Visible Builder, open the left sidebar and choose Upload Canvas. Don’t make this one a International Canvas. Title it Match Realize.
Set the Canvas to append beneath the principle web page content material. Then, give it a z-index of 999 so it stacks above common web page components however beneath the higher-priority pop-up we will be able to construct subsequent.
Construct The Phase, Row, And Column
Open the brand new Canvas and upload a Phase. In the correct sidebar, set the Phase’s Admin Label to Match Realize. This label makes the segment more straightforward to seek out when growing interactions that concentrate on it.
Within the Phase’s Design tab, open Sizing. Set Max Width to min(250px, 40%). This CSS serve as caps the cardboard at 250px on greater monitors whilst permitting it to shrink on smaller monitors.
Subsequent, cross to Complex > Place. Set Place to Mounted and Offset Beginning to backside left.
Underneath Spacing, set Margin Backside and the left/proper margin values to 1rem. This assists in keeping the attention clear of the viewport edges. Then, set Padding Most sensible and Padding Backside to 0px since the internal Column will care for the cardboard padding.
Set the Phase Row’s Width to 100%. Then, observe the Defined – Darkish Part Preset to the Column.
Within the Column’s Border possibility crew, upload the Define Choice Crew Preset in case your setup makes use of that preset for the 1px darkish border. Then, set the Row’s Background Colour to the Background – Mild Grey variable.
In the end, at the Column, set Vertical Hole to 1rem so the modules within stack with constant spacing.
Upload The Realize Content material
Throughout the Column, upload 3 modules on this order:
- Icon module
- Heading module
- Textual content module
Use an in depth icon, akin to an X, within the Icon module. Set its Place to Absolute, Offset Beginning to most sensible proper, and the highest/backside and left/proper margin values to -0.5rem. Set Icon Width to 26px.
Absolute positioning assists in keeping the shut icon anchored to the cardboard’s nook as a substitute of the viewport.
Subsequent, upload a Heading module and observe the Subheading Part Preset. Set the heading textual content to Reminder!.
Then, upload a Textual content module and observe the Small Textual content Part Preset. Set the frame textual content to: Networking occasion on Wednesday, August sixteenth, from 4 pm till 6 pm.
Cord The Shut Interplay
Choose the Icon module. Open the Complex tab and increase the Interactions possibility crew. Click on Upload Interplay and configure it like this:
- Cause: Click on
- Impact: Conceal Part
- Goal: Canvas, Phase — Match Realize
In the end, go back to the Phase and set a background colour with 0% opacity. This assists in keeping the Phase background clear so it does now not create visual sharp corners at the back of the rounded Row or Column styling whilst scrolling.
Save the Canvas and reload the entrance finish. The awareness will have to seem within the bottom-left nook and disappear when the shut icon is clicked. As a result of no cookie is ready, the attention can reappear on a long term web page load.
E-mail Choose-In Pop-Up
The e-mail opt-in pop-up is extra concerned. This is a focused modal with a headline, reassurance textual content, an in depth icon, and an electronic mail signup shape. It’s hidden by means of default, proven when a customer reaches a delegated homepage segment, and blocked from long term perspectives after the customer closes it.
Create The International Canvas
From the left sidebar, upload every other Canvas and make it a International Canvas. Title it Signal Up Pop-up Shape.
Append it beneath the principle web page content material. Set its z-index to 1000 so it seems that above the Match Realize if each are visual on the similar time.
Construct The Pop-Up Phase
Upload a Phase and set its Admin Label to Subscribe. That is the title the homepage interplay will goal.
Within the Phase’s Design tab, observe the Defined – Darkish Choice Crew Preset to the Border possibility crew. This assists in keeping the pop-up shell aligned with the remainder of the design machine. Then, set Background Colour to Background – Mild Grey.
Underneath Design > Sizing, set Width to 980px and Max Width to 80%. This provides the pop-up a beneficiant desktop width whilst combating it from exceeding the viewport on smaller monitors.
Underneath Complex > Place, set Place to Mounted and Offset Beginning to middle middle.
Construct The Row And Columns
Upload a Row the usage of a Flex container with Two Offset Columns, with 3/5 and 2/5 Column widths. Set the Row’s Structure Wrapping to Wrap. Then, reproduction the second one Column to create a 3rd Column.
Configure the 3 Columns with those desktop and pill Column Categories:
- Column 1: 3/5 on Desktop and Fullwidth on Pill and smaller.
- Column 2: 2/5 on Desktop and Fullwidth on Pill and smaller.
- Column 3: Fullwidth on Desktop and smaller.
Set each Horizontal Hole and Vertical Hole to the Spacing – Medium Design Variable.
Cap the Row’s Max Width with the Max Width – 900 Design Variable to stay the interior content material readable within the wider pop-up shell.
Upload The Pop-Up Modules
In Column 1, upload a Heading module with the textual content Reductions, Giveaways, & Different Information. Practice the H4 Preset to measurement and magnificence it.
In Column 2, upload an Icon module the usage of an in depth icon. Set Place to Mounted, set Offset Beginning to most sensible proper, and set the highest/backside and left/proper margin values to 1rem. Set Icon Width to 26px.
Beneath the icon in Column 2, upload a Textual content module and observe the Small Textual content Part Preset. Set the textual content to Max one electronic mail per thirty days. On desktop, you’ll align this article to the correct. On Pill and smaller breakpoints, transfer it again to the left so it reads naturally.
In Column 3, upload an E-mail Optin module and observe the Darkish Part Preset.
Within the Content material tab, set the E-mail Supplier dropdown for your provider of selection. This construct makes use of MailerLite, however setup varies by means of supplier. Attach the account, then take away the default heading textual content and frame replica within the module. For this pop-up, we’ll handiest come with the e-mail box.
Set The Cookie Show Situation
Choose the pop-up Phase and cross to Complex > Show Stipulations. Upload a Cookie situation and configure it like this:
- Show Rule: Cookie Price Does Now not Equivalent
- Cookie Title: hide-popup
- Cookie Price: true
This tells Divi to render the pop-up Phase handiest when the hide-popup cookie does now not equivalent true. After the customer closes the pop-up and the cookie is written, the situation not passes, so the pop-up won’t render once more till the cookie expires or is cleared.
Cord The Shut And Cookie Interactions
Choose the shut Icon module in Column 2. Within the Interactions possibility crew, upload two interactions to the similar click on cause.
- Click on → Conceal Part → Phase Subscribe. This closes the pop-up instantly.
- Click on → Upload Cookie. Set Cookie Title to hide-popup and Cookie Price to true. If the interplay settings come with a period box, set the period to the period of time you wish to have the pop-up to stick hidden.
Each interactions run from the similar click on occasion. The primary offers the customer a right away visible reaction by means of remaining the pop-up. The second one writes the cookie that the Show Situation exams on long term web page lots.
Subsequent, choose the entire pop-up Phase. Move to Complex > Visibility and conceal the Phase around the breakpoints the place the pop-up will have to get started hidden. The homepage cause will expose it when the customer reaches the selected segment.
Cord The Homepage Cause
Save the Canvas, then go back to the principle homepage Canvas. We handiest want one cause.
Open the Layers View from the left sidebar and choose the segment that accommodates Thrive in a greater paintings setting. In that segment’s Complex tab, increase Interactions and upload this interplay:
- Cause: Viewport Input
- Impact: Display Part
- Goal: Canvas, Phase — Subscribe
This presentations the pop-up when the customer scrolls that segment into view. It additionally avoids appearing the pop-up instantly on web page load, which is in most cases a much less intrusive revel in.
The Match Realize can seem on web page load as a result of it’s small and located out of the best way. The e-mail pop-up waits for a scroll-based cause as it takes over the middle of the display. Each components are closable with Icon interactions, and the e-mail pop-up additionally makes use of a cookie situation to forestall repeat perspectives after it’s disregarded.
Get started Construction Canvases In Divi 5 These days!
With the Match Realize and electronic mail opt-in pop-up stressed up, the coworking homepage now has interactive UI outdoor the standard web page glide. The small understand surfaces well timed data with out taking on the display, whilst the pop-up seems at a extra planned second and remains hidden after dismissal.
The similar Canvas, Interactions, and Show Stipulations trend can energy different off-page UI: cookie banners, slide-ins, announcement bars, affirmation activates, onboarding panels, and off-canvas menus.
Phase 12 of the Divi 5 Mastery path made the web site cling up throughout breakpoints. This section added conduct and interplay. In Phase 14, we’ll transfer into the Loop Builder, the place dynamic posts, merchandise, and customized question knowledge will also be changed into absolutely designed Divi layouts. That implies the similar design machine you constructed during the path can render many pieces with out duplicating the similar modules by means of hand.
The publish Phase 13: Growing Interactive Off-Canvas Components (Popups & Extra) gave the impression first on Sublime Subject matters Weblog.
WordPress Web Design