Toggling weblog put up excerpts on hover can also be a great way to stay a compact grid structure on your weblog posts with out leaving behind the ones excerpts altogether. The theory is to cover the excerpts first of all after which toggle their visibility when soaring over a put up merchandise inside the grid. This permits customers to look extra posts inside the browser viewport whilst offering the person with the solution to see excerpts of posts they’re serious about through hover over the put up.
On this educational, we’re going to display you the way to toggle weblog put up excerpts on hover in Divi. To do that, we can be including a couple of snippets of customized CSS that can toggle the excerpts of a weblog module’s put up merchandise on hover (no JQuery wanted). As soon as the code is in position, you’ll be able to taste the weblog module then again you wish to have the use of Divi’s integrated settings.
Let’s get began!
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 arms at the designs from this educational, you are going to first wish to obtain it the use of the button under. To realize get entry to to the obtain it is important to subscribe to our Divi Day-to-day e-mail record through the use of the shape under. As a brand new subscriber, you are going to obtain much more Divi goodness and a unfastened Divi Structure pack each Monday! When you’re already at the record, merely input your e-mail deal with under and click on obtain. You’ll no longer be “resubscribed” or obtain additional emails.
@media simplest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .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 robust { 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 robust, .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 !necessary;}
Obtain For Unfastened
Sign up for the Divi E-newsletter and we can e-mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus heaps of different superb and unfastened Divi assets, guidelines and methods. Observe alongside and you are going to be a Divi grasp very quickly. If you’re already subscribed merely sort to your e-mail deal with under and click on obtain to get entry to the structure pack.
You might have effectively subscribed. Please test your e-mail deal with to substantiate your subscription and get get entry to to unfastened weekly Divi structure packs!
To import the segment structure on your Divi Library, navigate to the Divi Library.
Click on the Import button.
Within the portability popup, make a choice the import tab and select the obtain report out of your pc.
Then click on the import button.
As soon as achieved, the segment structure might be to be had within the Divi Builder.
Let’s get to the educational, lets?
What You Wish to Get Began
To get began, it is important to do the next:
- When you haven’t but, install and activate the Divi Theme.
- Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
- Make a choice the choice “Construct From Scratch”.
After that, you are going to have a clean canvas to start out designing in Divi.
The right way to Toggle Weblog Submit Excerpts on Hover in Divi
Developing the Weblog Module Structure
First, we wish to create a elementary structure for our weblog posts. For this case, we’re going to upload a one-column row with a weblog module within it.
Create Row
Upload a one-column row to the segment.
Row Width
Within the row settings modal, replace the next design settings to regulate the width.
- Width: 95%
- Max Width: 1200px
Upload Weblog Module
Within the column of the row, upload a brand new weblog module.
Weblog Module Settings
Subsequent, replace the weblog module content material settings through deciding on to turn the learn extra button.
Below the design tab, make a choice the Grid structure for the weblog.
Below the complicated tab, upload the next CSS Magnificence:
- CSS Magnificence: toggle-blog-excerpt
We will be able to use this elegance as a selector for our customized CSS code in the next move.
Upload Customized CSS with Code Module
At this level, we have now a elementary grid structure for our weblog posts with a customized CSS elegance added to the weblog module. We will be able to use this CSS Magnificence selector to focus on this explicit weblog module and upload a toggle impact on hover to the put up excerpt portion of the put up merchandise.
So as to add the CSS, we’re going to use a code module. Upload a brand new code module under the weblog module.
Paste the next customized CSS wanted for the put up excerpt toggle impact. You’ll want to wrap the CSS within the vital taste tags.
@media all and (min-width: 981px) {
/* upload transition for put up content material*/
.toggle-blog-excerpt .et_pb_post .post-content {
-webkit-transition: all 500ms !necessary;
transition: all 500ms !necessary;
}
/* stay put up content material visual in visible builder */
frame.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
visibility:visual;
opacity: 1;
max-height:none;
}
/* disguise put up content material */
.toggle-blog-excerpt .et_pb_post .post-content {
visibility: hidden;
opacity: 0;
max-height:0px;
}
/* display put up content material when soaring over put up merchandise */
.toggle-blog-excerpt .et_pb_post:hover .post-content {
visibility: visual;
opacity:1;
max-height: 500px;
}
/* set min-height for all put up pieces */
.toggle-blog-excerpt .et_pb_post {
min-height: 400px;
}
}
Let’s take a look at the outcome to this point on reside web page.
End result
We’ll cross over the code slightly extra intimately on the finish of the object. However for now, let’s take a look at the outcome to this point.
Upload Further Styling to the Weblog Module with Divi Builder
Now that the CSS is in position to provide us the toggle impact for our weblog put up excerpts, we will upload any further styling to the weblog module the use of the Divi Builder.
For this case, we’re going to make minimum changes to the way, however be happy to discover your individual styling as neatly.
Taste Submit Name
- Name Font Weight: Daring
- Name Textual content Colour: #6d6a7e
- Name Textual content Dimension: 20px
- Name Line Top: 1.3em
Taste Learn Extra Textual content
- Learn Extra Font Weight: Daring
- Learn Extra Font Taste: TT
- Learn Extra Textual content Colour: #6d6a7e
- Learn Extra Letter Spacing: 1px
- Learn Extra Line Top: 3.5em
Taste Pagination
- Pagination Font Weight: Daring
- Pagination Font Taste: TT
- Pagination Textual content Colour: #6d6a7e
- Pagination Letter Spacing: 1px
Take away Border
- Grid Structure Border Width: 0px
Taste Field Shadow on Hover
- Field Shadow: See Screenshot
- Field Shadow Vertical Place: 0px
- Field Shadow Blur Power: 38px
- Shadow Colour (desktop): clear
- Shadow Colour (hover): rgba(109,106,126,0.25)
Ultimate End result
In regards to the CSS Code
If you have an interest within the breakdown of the customized CSS added to the code module previous, right here it’s.
First, we wish to wrap all the CSS in a media question that can simplest practice the CSS to desktop browsers.
@media all and (min-width: 981px) {
}
2d, we wish to upload a transition with a length of 500ms to the put up content material/excerpt to the way adjustments that can happen when soaring over the put up merchandise.
/* upload transition for put up content material*/
.toggle-blog-excerpt .et_pb_post .post-content {
-webkit-transition: all 500ms !necessary;
transition: all 500ms !necessary;
}
3rd, we wish to make certain the put up content material/excerpt stays visual when the use of the visible builder in order that we will make edits.
/* stay put up content material visual in visible builder */
frame.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
visibility:visual;
opacity: 1;
max-height:none;
}
Fourth, we wish to disguise the put up content material/excerpt through default when the web page lots. To do that we use visibility:hidden to cover the content material. Then we upload opacity:0 in order that we will get a fade in and fade out transition impact after we upload opacity:1 to the hover state. We additionally use max-height:0px to get the sliding toggle impact after we upload max-height:500px to the hover state.
/* disguise put up content material */
.toggle-blog-excerpt .et_pb_post .post-content {
visibility: hidden;
opacity: 0;
max-height:0px;
}
5th, we display the put up content material/excerpt when the put up merchandise (.et_pb_post) is within the hover state. To do that we modify the visibility to visual, the opacity to one, and the max-height to 500px.
/* display put up content material when soaring over put up merchandise */
.toggle-blog-excerpt .et_pb_post:hover .post-content {
visibility: visual;
opacity:1;
max-height: 500px;
}
For the overall snippet, we will give the entire put up pieces the similar min-height for a cleaner vertically aligned grid structure.
/* set min-height for all put up pieces */
.toggle-blog-excerpt .et_pb_post {
min-height: 400px;
}
Right here’s yet one more take a look at the overall code.
@media all and (min-width: 981px) {
/* upload transition for put up content material*/
.toggle-blog-excerpt .et_pb_post .post-content {
-webkit-transition: all 500ms !necessary;
transition: all 500ms !necessary;
}
/* stay put up content material visual in visible builder */
frame.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
visibility:visual;
opacity: 1;
max-height:none;
}
/* disguise put up content material */
.toggle-blog-excerpt .et_pb_post .post-content {
visibility: hidden;
opacity: 0;
max-height:0px;
}
/* display put up content material when soaring over put up merchandise */
.toggle-blog-excerpt .et_pb_post:hover .post-content {
visibility: visual;
opacity:1;
max-height: 500px;
}
/* set min-height for all put up pieces */
.toggle-blog-excerpt .et_pb_post {
min-height: 400px;
}
}
Ultimate Ideas
As proven on this educational, including a couple of snippets of CSS can provide the capability had to toggle weblog put up excerpts with a pleasing hover impact. The most productive section about this technique is that we will construct upon this capability through including any further styling we wish to the weblog module the use of Divi’s integrated choices. This may occasionally can help you upload extra complicated styling to the put up pieces together with extra hover results. Optimistically, this may lend a hand give your Divi web site’s weblog an extra spice up in design and capability.
I look ahead to listening to from you within the feedback.
Cheers!
.inline-code{padding: 0px 4px; colour: purple; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!necessary} 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 put up How to Toggle Blog Post Excerpts on Hover in Divi seemed first on Elegant Themes Blog.
WordPress Web Design