Site icon Hip-Hop Website Design and Development

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

Pixeldust WordPress Developer

Including teaser content material to your web site might be an efficient advertising and marketing technique. This works particularly nicely for selling issues like ebooks. You give them a sneak peek of the content material in an effort to depart them wanting extra. In at the moment’s tutorial, we’re going to indicate you the best way to showcase teaser content material inside a scrollable pill in Divi. To do that, we’ll reap the benefits of Divi’s built-in choices to rework a column right into a scrollable container (designed to resemble a pill) that may embrace any kind of content material you need. You should use it to advertise the primary few chapters of any book, show instance designs out of your portfolio, or some other kind of content material.

Let’s get began!

Sneak Peek

Here’s a fast take a look at the pill with scrollable teaser content material we’ll construct on this tutorial.

Obtain the Structure for FREE

To put your palms on the designs from this tutorial, you’ll first have to obtain it utilizing the button beneath. To achieve entry to the obtain you will have to subscribe to our Divi Each day electronic mail listing by utilizing the shape beneath. As a brand new subscriber, you’ll obtain much more Divi goodness and a free Divi Structure pack each Monday! When you’re already on the listing, merely enter your electronic mail tackle beneath and click on obtain. You’ll not be “resubscribed” or obtain further emails.

Obtain the Information
.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:earlier than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media solely display screen 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 !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:earlier than { 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 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 type enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container type button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Obtain For Free

Be part of the Divi Publication and we’ll electronic mail you a duplicate of the last word Divi Touchdown Web page Structure Pack, plus tons of different wonderful and free Divi assets, suggestions and methods. Observe alongside and you may be a Divi grasp very quickly. If you’re already subscribed merely kind in your electronic mail tackle beneath and click on obtain to entry the structure pack.

You will have efficiently subscribed. Please test your electronic mail tackle to substantiate your subscription and get entry to free weekly Divi structure packs!

To import the part structure to your Divi Library, navigate to the Divi Library.

Click on the Import button.

Within the portability popup, choose the import tab and select the obtain file out of your laptop.

Then click on the import button.

As soon as executed, the part structure shall be out there within the Divi Builder.

Let’s get to the tutorial, lets?

What You Have to Get Began

To get began, you will have to do the next:

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

After that, you should have a clean canvas to start out designing in Divi.

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

Half 1: Creating the Scrollable Pill Container with a Divi Column

Add Row

To start out, create a two-column row with a daily part.

Column 1 Settings

Background Shade

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:

Field Shadow

To offer the pill design a bit depth, add the next field shadow:

Customized Column Peak and Width with CSS

The important thing to creating the column’s content material scrollable is to provide it a set top. It will make the content material overflow the peak of the column. We additionally need to preserve the facet ratio of the pill constant, so it is usually a good suggestion to provide the column a max-width as nicely. To offer the column a customized top and width, go to the Superior tab and replace the next:

Beneath Customized CSS, add the next CSS for the Predominant Factor desktop show:

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

Then activate the responsive tabs and paste the next customized CSS for the principle factor cellphone show:

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;

Vertical Overflow: Scroll

As talked about earlier, the column now has a set top which is able to trigger content material inevitably to overflow the column vertically. To ensure the overflowing content material might be seen by scrolling on the column, set the visibility vertical overflow choice to “scroll”.

Half 2: Including Teaser Content material to the Scrollable Column

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

The Scroll CTA with E-book Cowl Background

The primary piece of teaser content material we’re going to add is a blurb module that may function a “scroll to preview” name to motion. We are going to use a blurb icon, title, and a background with a e-book cowl because the background picture and a gradient coloration overlay.

Contained in the pill column, add a blurb module.

Replace the next content material:

Then add the e-book cowl picture. For greatest outcomes add a picture that’s about 600px by 850px in dimension.

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

We will modify the peak of the blurb to match the column top in order that it fills the pill utilizing 100% top. This top share worth solely works as a result of our column has a set top. Then we will transfer the icon and title to the underside of the column by including prime padding.

To dimension and area the blurb, replace the next:

The E-book Cowl Picture

The following piece of teaser content material shall be a picture of the e-book cowl. So as to add a picture, merely add a picture module beneath the blurb module.

Then add the identical picture used for the background of the blurb.

The Textual content Preview Content material

Our final piece of teaser content material would be the textual content which is able to embrace a number of mock chapters of our book. So as to add the textual content, add a brand new textual content module beneath the earlier picture.

Then paste the next HTML contained in the textual content tab of the physique:

<h3>Chapter 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 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?

<h3>Chapter 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 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?

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

Half 3: A Few Remaining Touches

Replace Row Settings

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

Add Extra Content material to Column 2

At this level, we will add further content material to column 2 as wanted. For this instance, I added a textual content module and button module and styled them much like the design featured in our E book Structure Pack.

Remaining Outcome

Now let’s try the ultimate end result.

Take a look at the scrollable content material out there contained in the pill.

And right here is how the design stacks on pill and cellphone show.

Remaining Ideas

Maybe the perfect factor about this scrollable pill design is its versatility. As a result of the pill is actually a Divi column, you should utilize any variety of Divi modules (textual content, picture, button) to design the content material you need to characteristic. Hopefully, it will come in useful the subsequent time you must showcase teaser content material in your web site.

I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; coloration: crimson; 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 submit The way to Design a Pill with Scrollable Teaser Content material in Divi appeared first on Elegant Themes Weblog.