Would you like to add teaser content to a scrollable tablet on Divi?
Adding teaser content to your Website can be a strategy marketing effective. This works particularly well for promote things like ebooks. You give them a preview of the content so they want more.
In today's tutorial, we'll show you how to showcase teaser content in a drop-down tablet in Divi.
To do this, we will take advantage of Divi's built-in options to turn a column into a drop-down container (designed to look like a tablet) that can include any type of content you want.
You can use it for promote the first chapters of any ebook, view sample designs from your portfolio or any other type of content.
Let's start!
Preview
Here's a quick look at the tablet with scrollable content we'll be creating in this tutorial.
Create a new page with Divi Builder
In the WordPress dashboard, go to “Pages > Add New”
Give a title that makes sense to you, then click “Use DiviBuilder”
Then click “Start-Building”
Tablet design with scrollable teaser content in Divi
Creating the drop-down tablet container with a Divi column
Add a row
To start, create a two-column row with a regular section.
Column 1 settings
Background color
Open the column 1 settings and add a white background to the column.
- Background: #ffffff
Border and Margin
Go to the tab Design drop down option Spacing and change the settings as follows:
- Padding (Top, Bottom, Left and Right): 25px (top, bottom, left, right)
Then pull down the option Border and change the settings accordingly:
- Rounded Corners: 20px
- Border Width: 30px
- Border Color: #000000
Shadow box
To give the tablet design some depth, pull down the option BoxShadow and add the following box shadow:
- Box Shadow: see screenshot
- Box Shadow (Horizontal and Vertical) Position: 5 px
- Shadow Color: #555555
Custom column height and width with CSS
The key to making column content scrollable is to give it a defined height. This will cause the content to overflow the column height.
We also want the aspect ratio of the tablet to stay consistent, so it's a good idea to give the column a maximum width as well.
To give the column a custom height and width, go to the tab Advanced and update the following:
Under Custom CSS, add the following CSS for the desktop display (Main Element):
height:650px;
max-width: 488px;
Then activate the tab for other display and paste the following custom CSS for the phone display of the main element:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Vertical overflow: scroll
As mentioned earlier, the column now has a defined height which will inevitably cause the contents of the column to overflow vertically.
To ensure that overflowing content can be viewed by scrolling down the column, set the visibility vertical overflow option to “scroll”. To do this, expand the option Visibility tab Advanced
- Vertical Overflow: Scroll
Add teaser content to dropdown column
At this point, the column (or shelf) is ready for content. You can use any Divi module in this column to create your preview content.
In this example, we are adding dummy ebook content which will consist of a module Blurb (to display the initial call to action), a module Image (to display the book cover) and a module text (to display some chapters of the ebook).
Scrolling CTA (Call to Action) with book cover background
The first teaser content item we are going to add is a module Blurb which will serve as a call to action “scroll to preview”.
We'll be using a presentation icon, title, and background with a book cover as the background image and a color gradient overlay.
In the tablet column, add a module Blurb.
Update the content as follows:
- Title: Scroll to read an excerpt
Drop down option “Image & Icon”
- Use Icon: Yes
- Icon: see screenshot
Then pull down the option background and add a gradient
- Left side color: rbga(0,0,0,0,0.0)
- Right Side Color: #ffffff
- Starting position: 20%
- Final position: 85%
- Square Gradient Above Background Image : YES
Then add the book cover image. For best results, add an image approximately 600px by 850px .
On the Design tab, update the following styles for the icon and title:
- Icon Color: #000000
- Icon font size: 80px (desktop and tablet), 70px (phone)
- Title Font: Montserrat
- Title Text Alignment: centered
- Text Color: #000000
Then we can move the icon and title down the column by adding a top margin.
To size and space the blurb, update the following:
- Height: 100%
- Margin: 25px (Bottom)
- Padding: 400px (desktop and tablet), 270px (phone)
The image of the book cover
The next piece of teaser content will be an image of the book cover. To add an image, simply add an Image module below the Blurb module.
Then upload the same image used for the blurb background.
The contents of the text preview
Our last piece of teaser content will be the text which will include some fictional chapters from our ebook. To add the text, add a new Text module below the previous image.
Then paste the following HTML code into the body text tab:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Under the Design tab, update the heading style and spacing as follows (Heading 3):
- Font: Montserrat
- Font Weight: Ultra Bold
- Text Alignment: Centered
- Line Height: 1,3 em
- Padding: 10% (Top and Bottom)
A few final touches
Update line parameters
With the content in place, we need to make some adjustments to the row to make the design more responsive. Open Line Settings and update the following:
- Width: 100% (desktop), 90% (tablet and phone)
- Max Width: 1px (desktop), 080px (tablet and phone)
Add additional content to column 2
At this point, we can add additional content to column 2 if needed. For this example, we added a Text module and a Button module and customized them similar to the design shown in our ebook layout pack.
Download DIVI Now!!!
Final result
Now let's see the final result.
Check out the drop-down content available inside the laptop tablet.
And this is how the design stacks up on the tablet and phone screen.
Conclusion
Perhaps the best thing about this scrolling tablet design is its versatility. Because the tablet is essentially a Divi column, you can use any number of Divi modules (text, image, button) to design the content you want to showcase.
Hope this helps you the next time you need to showcase some teaser content on your Website.
If you want to know more about Divi, do not hesitate to visit our catalog of Divi tutorials. You can also consult How to create the Blog page with the Divi Blog module
If you have any questions or suggestions, feel free to leave a comment in the comments section below.
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.
...
