Including teaser content material for your web site will also be an efficient business plan. This works particularly neatly for selling such things as ebooks. You give them a sneak peek of the content material with a view to depart them short of extra. In nowadays’s educational, we’re going to turn you the best way to show off teaser content material inside of a scrollable pill in Divi. To do that, we’ll benefit from Divi’s integrated choices to change into a column right into a scrollable container (designed to resemble a pill) that may come with any form of content material you need. You’ll be able to use it to advertise the primary few chapters of any e-book, show instance designs out of your portfolio, or another form of content material.

Let’s get began!

Sneak Peek

Here’s a fast have a look at the pill with scrollable teaser content material 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 want to obtain it the usage of the button under. To achieve get entry to to the obtain it is very important subscribe to our Divi Day-to-day e-mail checklist through the usage of the shape under. As a brand new subscriber, you are going to obtain much more Divi goodness and a loose Divi Structure pack each Monday! Should you’re already at the checklist, merely input your e-mail deal with under and click on obtain. You’re going to now not be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media simplest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 !essential;}

Download For Free

Obtain For Unfastened

Sign up for the Divi Publication and we can e-mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of alternative wonderful and loose Divi assets, guidelines and tips. Observe alongside and you are going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e-mail deal with under and click on obtain to get entry to the format pack.

You might have effectively subscribed. Please test your e-mail deal with to substantiate your subscription and get get entry to to loose weekly Divi format packs!

To import the segment format for your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, make a selection the import tab and make a selection the obtain record out of your laptop.

Then click on the import button.

divi notification box

As soon as carried out, the segment format will likely be to be had within the Divi Builder.

Let’s get to the academic, lets?

What You Wish to Get Began

expanding corner tabs

To get began, it is very important do the next:

  1. Should you haven’t but, install and activate the Divi Theme.
  2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
  3. Select the choice “Construct From Scratch”.

After that, you are going to have a clean canvas to begin designing in Divi.

The right way to Design a Pill with Scrollable Teaser Content material in Divi

Section 1: Developing the Scrollable Pill Container with a Divi Column

Upload Row

To start out, create a two-column row with a normal segment.

divi tablet with scrollable teaser content

Column 1 Settings

Background Colour

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

  • Background Colour: #ffffff

divi tablet with scrollable teaser content

Padding and Border

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

  • Padding: 25px (peak, backside, left, proper)
  • Rounded Corners: 20px
  • Border Width: 30px
  • Border Colour: #000000

divi tablet with scrollable teaser content

Field Shadow

To offer the pill design a bit of intensity, upload the next field shadow:

  • Field Shadow: see screenshot
  • Field Shadow Horizontal Place: 5px
  • Field Shadow Vertical Place: 5px
  • Shadow Colour: #555555

divi tablet with scrollable teaser content

Customized Column Top and Width with CSS

The secret to meaking the column’s content material scrollable is to provide it a collection top. This may increasingly make the content material overflow the peak of the column. We additionally need to stay the side ratio of the pill constant, so it is usually a good suggestion to provide the column a max-width as neatly. To offer the column a customized top and width, cross to the Complex tab and replace the next:

Beneath Customized CSS, upload the next CSS for the Major Component desktop show:

top:650px;
max-width: 488px;

Then turn on the responsive tabs and paste the next customized CSS for the primary part telephone show:

max-height: 500px;
max-width: 375px;
go with the flow:none;
margin: 0 auto;

divi tablet with scrollable teaser content

Vertical Overflow: Scroll

As discussed previous, the column now has a collection top which can reason content material inevitably to overflow the column vertically. To verify the overflowing content material will also be seen through scrolling at the column, set the visibility vertical overflow method to “scroll”.

  • Vertical Overflow: Scroll

divi tablet with scrollable teaser content

Section 2: Including Teaser Content material to the Scrollable Column

At this level, the column (or pill) is able for some content material. You’ll be able to use any Divi module inside of this column to construct your preview content material. On this instance, we’re including some mock e-book content material which can include a blurb module (to show the preliminary name to motion), a picture module (to show the ebook duvet), and a textual content module (to show a couple of chapters of textual content).

The Scroll CTA with E book Duvet Background

The primary piece of teaser content material we’re going to upload is a blurb module that can function a “scroll to preview” name to motion. We will be able to use a blurb icon, identify, and a background with a ebook duvet because the background symbol and a gradient coloration overlay.

Within the pill column, upload a blurb module.

divi tablet with scrollable teaser content

Replace the next content material:

  • Identify: Scroll to Preview
  • Use Icon: YES
  • Icon: see screenshot

divi tablet with scrollable teaser content

  • Background Gradient Left Colour: clear
  • Background Gradient Proper Colour: #ffffff
  • Get started Place: 20%
  • Finish Place: 85%
  • Position Gradient Above Background Symbol: YES

Then upload the ebook duvet symbol. For best possible effects upload a picture this is about 600px through 850px in dimension.

divi tablet with scrollable teaser content

Beneath the design tab, replace the next kinds for the icon and identify:

  • Icon Colour: #000000
  • Icon Font Measurement: 80px (desktop and pill), 70px (telephone)
  • Identify Font: Montserrat
  • Identify Textual content Alignment: middle
  • Identify Textual content Colour: #000000

divi tablet with scrollable teaser content

We will be able to modify the peak of the blurb to compare the column top in order that it fills the pill the usage of 100% top. This top share worth simplest works as a result of our column has a collection top. Then we will be able to transfer the icon and identify to the ground of the column through including peak padding.

To dimension and area the blurb, replace the next:

  •  Top: 100%
  • Margin: 25px backside
  • Padding: 400px (desktop and pill), 270px (telephone)

divi tablet with scrollable teaser content

The E book Duvet Symbol

The following piece of teaser content material will likely be a picture of the ebook duvet. So as to add a picture, merely upload a picture module beneath the blurb module.

divi tablet with scrollable teaser content

Then add the similar symbol used for the background of the blurb.

divi tablet with scrollable teaser content

The Textual content Preview Content material

Our closing piece of teaser content material would be the textual content which can come with a couple of mock chapters of our e-book. So as to add the textual content, upload a brand new textual content module beneath the former symbol.

divi tablet with scrollable teaser content

Then paste the next HTML throughout the textual content tab of the frame:

Bankruptcy 1

Sed ut perspiciatis unde omnis iste natus error sit down 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 down aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit down 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 down amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim advert 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?

Bankruptcy 2

Sed ut perspiciatis unde omnis iste natus error sit down 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 down 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 down amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim advert 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?

divi tablet with scrollable teaser content

Beneath the design tab, replace the heading taste and spacing as follows:

  • Heading 3 Font: Montserrat
  • Heading 3 Font Weight: Extremely Daring
  • Heading 3 Textual content Alignment: Heart
  • Heading 3 Line Top: 1.3em

divi tablet with scrollable teaser content

  • Padding: 10% (peak and backside)

divi tablet with scrollable teaser content

Section 3: A Few Ultimate Touches

Replace Row Settings

As soon as the content material is in position, we want to make a couple of changes to the row to make the design extra responsive. Open the row settings and replace the next:

  • Width: 100% (desktop), 90% (pill and get in touch with)
  • Max Width: 1080px (desktop), 488px (pill and get in touch with)

divi tablet with scrollable teaser content

Upload Further Content material to Column 2

At this level, we will be able to upload further content material to column 2 as wanted. For this situation, I added a textual content module and button module and styled them very similar to the design featured in our E-book Structure Pack.

divi tablet with scrollable teaser content

Ultimate Consequence

Now let’s take a look at the general end result.

Take a look at the scrollable content material to be had throughout the pill.

And this is how the design stacks on pill and get in touch with show.

divi tablet with scrollable teaser content

divi tablet with scrollable teaser content

Ultimate Ideas

Possibly the most productive factor about this scrollable pill design is its versatility. Since the pill is basically a Divi column, you’ll be able to use any collection of Divi modules (textual content, symbol, button) to design the content material you need to function. Confidently, this will likely turn out to be useful the following time you want to show off teaser content material in your web site.

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!essential} 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 Design a Tablet with Scrollable Teaser Content in Divi gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]