{"id":348896,"date":"2022-03-30T00:16:16","date_gmt":"2022-03-30T00:16:16","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=348896"},"modified":"2022-04-03T17:11:51","modified_gmt":"2022-04-03T17:11:51","slug":"comment-concevoir-une-tablette-avec-un-contenu-daccroche-defilable-en-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-concevoir-une-tablette-avec-un-contenu-daccroche-defilable-en-divi\/","title":{"rendered":"Comment concevoir une tablette avec un contenu d’accroche d\u00e9filable en Divi"},"content":{"rendered":"
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\u2019s tutorial, we\u2019re going to show you how to showcase teaser content within a scrollable tablet in Divi. To do this, we\u2019ll take advantage of Divi\u2019s 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.<\/span><\/p>\n Let\u2019s get started!<\/p>\n Here is a quick look at the tablet with scrollable teaser content we\u2019ll build in this tutorial.<\/p>\n 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\u2019re already on the list, simply enter your email address below and click download. You will not be \u201cresubscribed\u201d or receive extra emails.<\/p>\n To import the section layout to your Divi Library, navigate to the Divi Library.<\/p>\n Click the Import button.<\/p>\n In the portability popup, select the import tab and choose the download file from your computer.<\/p>\n Then click the import button.<\/p>\n Once done, the section layout will be available in the Divi Builder.<\/p>\n Let\u2019s get to the tutorial, shall we?<\/p>\n To get started, you will need to do the following:<\/p>\n After that, you will have a blank canvas to start designing in Divi.<\/p>\n To start, create a two-column row with a regular section.<\/p>\n Open the settings for column 1, and add a white background to the column.<\/p>\n Then add a border and padding to the column as follows:<\/p>\n To give the tablet design a little depth, add the following box shadow:<\/p>\n The key to making the column\u2019s 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:<\/p>\n Under Custom CSS, add the following CSS for the Main Element desktop display:<\/p>\n Then activate the responsive tabs and paste the following custom CSS for the main element phone display:<\/p>\n 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 \u201cscroll\u201d.<\/p>\n 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).<\/p>\n The first piece of teaser content we are going to add is a blurb module that will serve as a \u201cscroll to preview\u201d 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.<\/p>\n Inside the tablet column, add a blurb module.<\/p>\n Update the following content:<\/p>\n Then add the book cover image. For best results add an image that is about 600px by 850px in size<\/strong>.<\/p>\n Under the design tab, update the following styles for the icon and title:<\/p>\n 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.<\/p>\n To size and space the blurb, update the following:<\/p>\n 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.<\/p>\n Then upload the same image used for the background of the blurb.<\/p>\n 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.<\/p>\n Then paste the following HTML inside the text tab of the body:<\/p>\n Under the design tab, update the heading style and spacing as follows:<\/p>\n 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:<\/p>\n 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.<\/p>\n Now let\u2019s check out the final result.<\/p>\n Check out the scrollable content available inside the tablet.<\/p>\n And here is how the design stacks on tablet and phone display.<\/p>\n 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.<\/p>\n I look forward to hearing from you in the comments.<\/p>\n Cheers!<\/p>\n<\/div>\n [ad_2]<\/p>\nSneak Peek<\/h2>\n
Download the Layout for FREE<\/h2>\n
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!<\/h2>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/p>\n
What You Need to Get Started<\/h2>\n
<\/p>\n
\n
How to Design a Tablet with Scrollable Teaser Content in Divi<\/h2>\n
Part 1: Creating the Scrollable Tablet Container with a Divi Column<\/h3>\n
Add Row<\/h4>\n
<\/p>\n
Column 1 Settings<\/h4>\n
Background Color<\/h5>\n
\n
<\/p>\n
Padding and Border<\/h5>\n
\n
<\/p>\n
Box Shadow<\/h5>\n
\n
<\/p>\n
Custom Column Height and Width with CSS<\/h5>\n
height:650px;\nmax-width: 488px;<\/pre>\n
max-height: 500px;\nmax-width: 375px;\nfloat:none;\nmargin: 0 auto;<\/pre>\n
<\/p>\n
Vertical Overflow: Scroll<\/h5>\n
\n
<\/p>\n
Part 2: Adding Teaser Content to the Scrollable Column<\/h3>\n
The Scroll CTA with Book Cover Background<\/h4>\n
<\/p>\n
\n
<\/p>\n
\n
<\/p>\n
\n
<\/p>\n
\n
<\/p>\n
The Book Cover Image<\/h4>\n
<\/p>\n
<\/p>\n
The Text Preview Content<\/h4>\n
<\/p>\n
<h3>Chapter 1<\/h3>\nSed 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.\n\nNemo 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?\n\n<h3>Chapter 2<\/h3>\nSed 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?\n<\/pre>\n
<\/p>\n
\n
<\/p>\n
\n
<\/p>\n
Part 3: A Few Final Touches<\/h3>\n
Update Row Settings<\/h4>\n
\n
<\/p>\n
Add Additional Content to Column 2<\/h4>\n
<\/p>\n
Final Result<\/h2>\n
<\/p>\n
<\/p>\n
Final Thoughts<\/h2>\n