As of late, we’re going to display you an artistic option to exhibit weblog posts as floating playing cards in Divi. Each weblog or site will have to search to have nice content material this is horny and, possibly simply as vital, obtainable. A technique to ensure content material remains obtainable to customers is to glide it at the web page. That is often referred to as making a component mounted (or sticky). And for the bloggers available in the market, we’re going to turn you find out how to exhibit your weblog posts as floating playing cards in order that they keep in view whilst scrolling down the web page. We’ll even throw in a tip on find out how to display and disclose the ones floating playing cards on hover.
Let’s get to it.
Sneak Peek
Here’s a fast take a look at the design we’ll construct on this educational.
Obtain the Structure for FREE
To put your palms at the designs from this educational, you’re going to first wish to obtain it the usage of the button underneath. To achieve get admission to to the obtain it is very important subscribe to our Divi Day by day e mail record by way of the usage of the shape underneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a unfastened Divi Structure pack each and every Monday! In the event you’re already at the record, merely input your e mail cope with underneath and click on obtain. You’re going to now not be “resubscribed” or obtain additional emails.
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .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 !vital;}
Obtain For Loose
Sign up for the Divi E-newsletter and we can e mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of different superb and unfastened Divi sources, pointers and tips. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e mail cope with underneath and click on obtain to get admission to the structure pack.
You’ve effectively subscribed. Please take a look at your e mail cope with to substantiate your subscription and get get admission to to unfastened weekly Divi structure packs!
To import the phase structure on your Divi Library, observe those steps:
- Navigate to the Divi Library.
- Click on the Import button.
- Within the portability popup, make a choice the import tab.
- Select the obtain record out of your laptop.
- Then click on the import button.
As soon as performed, the phase structure might be to be had within the Divi Builder.
Let’s get to the educational, lets?
What You Wish to Get Began
Prior to you get started development this design in Divi, it is very important do the next:
- Create a brand new web page and use the Divi Builder to edit the web page at the entrance finish (visible builder).
- Choose the choice “Select a Premade Structure”.
- Seek for and Choose the Blogger Touchdown Web page Structure.
- Click on the “Use This Structure” button to load it to the web page.
After that, you’re going to have the premade web page structure in a position to make use of for this educational.
How you can Design Weblog Publish Floating Playing cards The use of Divi’s Weblog Module
Now that you’ve got the blogger touchdown web page structure loaded to the web page, we’re in a position to create our weblog submit floating playing cards.
Developing the weblog submit floating playing cards comes to 5 major steps:
- Developing the phase, row, and column as a brand new container for the weblog module.
- Including a weblog module and identify to the row/column
- Customizing the row with a hard and fast place and customized width
- Updating the weblog module with minimum content material and a box-shadow
- Making the row of playing cards come out on hover
Step 1: Developing the phase, row, and column as a brand new container for the weblog module
Let’s get started by way of developing a brand new phase on the very backside of the web page structure.
Then upload a brand new one-column row to the phase.
Step 2: Including a weblog module and identify to the row/column
As an alternative of constructing a brand new weblog module right here, scroll up and to find the present weblog module showing 3 weblog posts (it’s within the 3rd phase towards the center of the web page). Open the “Different Module Settings” and make a choice “Replica Module”.
Then paste the module within the new one-column row we created on the backside of the web page by way of right-clicking at the grey plus icon and settling on “Paste Module”.
Subsequent, we’re going to upload a identify above our weblog posts that may even glide above the weblog submit playing cards. To try this, reproduction the present textual content module with the small identify textual content that reads “Way of life”.
Then paste the module appropriate above the brand new weblog module we simply added underneath.
Subsequent, alternate the identify textual content to explain the type of weblog posts you need to characteristic. On this instance, we’re going to only use “Maximum Widespread”.
Step 3: Customizing the Row with a Fastened Place and Customized Width
We need to make the weblog submit playing cards smaller in order that they don’t take as much as a lot room at the web page when they’ve the mounted place. This may be distracting. To try this, open the row settings and replace the next:
To present make the playing cards glide, we wish to give the row a hard and fast place. Underneath the complicated tab, replace the next:
- Place: Fastened
- Location: Backside Proper
- Vertical offset: 20px
- Horizontal offset: 20px
- Z Index: 12
Updating the weblog module with minimum content material and a box-shadow
For essentially the most section, the weblog module already has a three-column grid structure and a pleasing taste that got here with the structure pack design. However there are a few issues we wish to do.
First, we wish to make the playing cards smaller (vertically), we wish to take out one of the most content material components. To try this, open the weblog settings and conceal the entire components except for the featured symbol. This may occasionally make it so the submit handiest displays the featured symbol and identify.
Underneath the design tab, give the weblog playing cards a field shadow as follows:
- Field Shadow: See Screenshot
- Field Shadow Blur Power: 28px
- Shadow Colour: rgba(0,0,0,0.19)
Preview
Here’s a preview of the overall outcome to this point.
Making the row of playing cards come out on hover
As a last step, we will upload a pleasing hover impact that entices customers to engage with the floating playing cards. To try this, we will benefit from Divi’s Develop into and Hover choices.
Open the row settings and replace the next change into choices:
For Desktop
- Develop into Translate Y Axis: 50%
For Hover State
- Develop into Translate Y Axis: 0%
For Pill (and Telephone)
- Develop into Translate Y Axis: 0%
This may occasionally carry all the row of playing cards outdoor the browser viewport by way of 50% first of all. As soon as the consumer hovers over the row, the row of playing cards comes again utterly in view, permitting the consumer to click on any submit they need to learn.
Hiding the Row on Cell
Except you need to characteristic a unmarried weblog submit, it doesn’t make sense to glide those weblog posts on cellular. It might almost definitely take in manner an excessive amount of area and reason problems when looking to scroll. To cover the playing cards on cellular, open the phase settings and disable the phase visibility on telephone and pill.
Ultimate End result
Ultimate Ideas
I look ahead to listening to from you within the feedback.
Cheers!
.inline-code{padding: 0px 4px; coloration: red; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!vital} 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 Design Floating Cards Using Divi’s Blog Module gave the impression first on Elegant Themes Blog.
WordPress Web Design