How to Design a Tablet with Scrollable Teaser Content in Divi | Elegant Themes Blog

Adding teaser content to your website can be an effective marketing strategy. This works especially well for promoting things like ebooks. You give them a sneak peek of the content in order to leave them wanting more. In today’s tutorial, we’re going to show you how to showcase teaser content within a scrollable tablet in Divi. To do this, we’ll take advantage of Divi’s built-in options to transform a column into a scrollable container (designed to resemble a tablet) that can include any type of content you want. You can use it to promote the first few chapters of any ebook, display example designs from your portfolio, or any other type of content.

Let’s get started!

Sneak Peek

Here is a quick look at the tablet with scrollable teaser content we’ll build in this tutorial.

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:

After that, you will have a blank canvas to start designing in Divi.

How to Design a Tablet with Scrollable Teaser Content in Divi

Part 1: Creating the Scrollable Tablet Container with a Divi Column

Add Row

To start, create a two-column row with a regular section.

Open the settings for column 1, and add a white background to the column.

Padding and Border

Then add a border and padding to the column as follows:

Box Shadow

To give the tablet design a little depth, add the following box shadow:

Custom Column Height and Width with CSS

The key to making the column’s content scrollable is to give it a set height. This will make the content overflow the height of the column. We also want to keep the aspect ratio of the tablet consistent, so it is also a good idea to give the column a max-width as well. To give the column a custom height and width, go to the Advanced tab and update the following:

Under Custom CSS, add the following CSS for the Main Element desktop display:

Then activate the responsive tabs and paste the following custom CSS for the main element phone display:

Vertical Overflow: Scroll

As mentioned earlier, the column now has a set height which will cause content inevitably to overflow the column vertically. To make sure the overflowing content can be viewed by scrolling on the column, set the visibility vertical overflow option to “scroll”.

Part 2: Adding Teaser Content to the Scrollable Column

At this point, the column (or tablet) is ready for some content. You can use any Divi module within this column to build your preview content. In this example, we are adding some mock ebook content which will consist of a blurb module (to display the initial call to action), an image module (to display the book cover), and a text module (to display a few chapters of text).

The Scroll CTA with Book Cover Background

The first piece of teaser content we are going to add is a blurb module that will serve as a “scroll to preview” call to action. We will use a blurb icon, title, and a background with a book cover as the background image and a gradient color overlay.

Inside the tablet column, add a blurb module.

Update the following content:

divi tablet with scrollable teaser content

Then add the book cover image. For best results add an image that is about 600px by 850px in size.

Under the design tab, update the following styles for the icon and title:

We can adjust the height of the blurb to match the column height so that it fills the tablet using 100% height. This height percentage value only works because our column has a set height. Then we can move the icon and title to the bottom of the column by adding top padding.

To size and space the blurb, update the following:

The Book Cover Image

The next piece of teaser content will be an image of the book cover. To add an image, simply add an image module under the blurb module.

Then upload the same image used for the background of the blurb.

The Text Preview Content

Our last piece of teaser content will be the text which will include a few mock chapters of our ebook. To add the text, add a new text module under the previous image.

Then paste the following HTML inside the text tab of the body:

Under the design tab, update the heading style and spacing as follows:

divi tablet with scrollable teaser content

Part 3: A Few Final Touches

Update Row Settings

Once the content is in place, we need to make a few adjustments to the row to make the design more responsive. Open the row settings and update the following:

Add Additional Content to Column 2

At this point, we can add additional content to column 2 as needed. For this example, I added a text module and button module and styled them similar to the design featured in our Ebook Layout Pack.

Final Result

Now let’s check out the final result.

Check out the scrollable content available inside the tablet.

And here is how the design stacks on tablet and phone display.

Final Thoughts

Perhaps the best thing about this scrollable 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 feature. Hopefully, this will come in handy the next time you need to showcase teaser content on your website.

I look forward to hearing from you in the comments.


This content was originally published here.