Would you like to float blog posts in Divi?
Today we are going to show you a creative way to present blog posts as floating cards in Divi. Every blog or Website should aim to have an excellent contents attractive and, perhaps equally important or accessible.
One way to ensure that the contents remains accessible to users is to make it float on the page.
And for bloggers, we will show you how to present articles from your blog as floating cards so that they remain visible while scrolling the page.
Let's go.
Preview
Here is a brief overview of the result that we will obtain at the end of this tutorial.
What you need to get started
Before you start creating this design in Divi, you will need to do the following:
- Create a new page, give a relevant name and click on 'Use Divi Builder'
- Select the option Choose layout"
- Find and select layout 'blogger landing page'.
- Click the " Choose layout to load it onto the page.
After that, you will have the pre-made layout ready to use for this tutorial.
How to Create Blog Post Floating Cards Using Divi's Blog Module
Now that the layout is loaded on the page, we're ready to create our blog post floating cards.
Read also: How to Create a Sticky Global Header in Divi
Create a new section at the very bottom of the layout.
Then add a new one-column row to the section.
Add a Blog module and a title to the row/column
Instead of creating a new Blog module here, scroll up and find the existing Blog module displaying three blog posts (it's in the third section near the middle of the page). Open “ Other module parameters »And select« Module Copy"
Then paste the module into the new one-column row we created at the bottom of the page by right-clicking the gray plus icon and selecting “ Paste Module"
Next, we'll add a title above our blog posts that will also float above the blog cards. To do this, copy the existing Text module with the small title text " Lifestyle"
Then paste the module just above the new Blog module we just added.
Next, edit the title text to describe the type of blog posts you want to feature. In this example, we'll just use " Best-of"
Customizing the line with fixed position and custom width
We want to reduce the size of floating blog posts so they don't take up too much space on the page when they have a fixed position. It would be entertaining. To do this, open the line settings and update the following:
To make the items float, we need to give the line a fixed position. Under the Advanced tab, update the following:
- Position: Fixed
- Location: Bottom right
- Vertical Offset: 20px
- Horizontal Offset: 20px
- Z Index: 12
Updated Blog module with minimal content and box-shadow
Generally, the Blog module already has a three-column grid layout and a nice style that comes with the layout pack we have chosen. But there are a few things we need to do.
See also: How to create a global header with login form in Divi
First of all, we need to reduce the size of the maps (vertically) and remove some elements from contents.
To do this, open the blog settings and hide all elements except the featured image. This will make the post show only the featured image and title.
Under the Style tab, configure the box shadow as follows:
- Shadow box: See screenshot
- Box Shadow Blur Strength: 28px
- Subtitle font color: rgba(0,0,0,0.19)
Preview
Here is a preview of the result we have so far.
Make the line of articles appear on hover
Finally, we can add a nice hover effect that encourages users to interact with the floating articles.
Read also: How to create the blog page with the Blog module in Divi
Open line settings and update options:
For the office
- Transform: 50%
For hover state
- Transform: 0%
This will initially bring the entire line outside the browser viewport by 50%. Once the user hovers over the line, it comes completely back into view.
Hide row on mobile
Unless you want to publish a single blog post, it doesn't make sense to float those blog posts on mobile. It would probably take up way too much space and cause problems when trying to scroll.
See also: How to add a contact form to a global header in Divi
To hide maps on mobile, open section settings and turn off section visibility on phone and tablet.
Final result
Download DIVI Now!!!
Conclusion
So ! We have shown you in this tutorial a creative and original way to present the blog posts you want to highlight.
If you have any concerns or suggestions, find us in the comments section to talk about it.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
