The share link has been copied to clipboard
Business & Industrial
Computers & Electronics
Home & Garden

Replace Mediavine Trellis Using Popcorn Theme: How To Save ? $14.95 a Month #popcorntheme

1K views · Jul 17, 2023
Visit Channel:whitehatblogging.com
Popcorn Theme is much more potent at customization than many give it credit for, today I wanted to showcase how you could take and revise the entire homepage to make a very similar homepage to the expensive as heck Trellis theme from Mediavine ($14.95 monthly!!!) I know many love the simplicity of the homepage, so I thought it would be an excellent one to showcase the flexibility Popcorn gives you to create a similar look and function with speed without much work and without any "coding" other than minor CSS. Purchase Popcorn: https://joshkoop.com/recommends/popcorn/ AI Writing Made Easy: https://joshkoop.com/recommends/koala/ Gain Ad Income Today: https://joshkoop.com/recommends/ezoic/ CSS: .post-template-single-with-sidebar .sidebar-about { margin-top: -50px!important; } .post-template-single-with-sidebar .wp-block-post-author__name { font-size: var(--wp--preset--font-size--popcorn-font-xs) !important; } .post-template-single-with-sidebar .wp-block-post-excerpt__excerpt { font-style: italic; padding-left: 2rem; padding-right:2rem; } .sidebar-about-image { margin-top: -75px!important; } .sidebar-about { margin-top: -150px!important; } a.wp-block-post-excerpt__more-link { color: #ffffff; background: var(--wp--preset--color--popcorn-primary-color); font-size: .875rem; margin-top: 10px; padding: 10px 20px; line-height: 1.25; text-align: right; text-decoration: none; text-transform: uppercase; } .wp-block-post-excerpt__more-link:hover { background-color: #a5e2ab; } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (max-width: 1025px) { .sidebar-about { margin-top: 75px; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (max-width: 768px) { } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .wp-block-site-logo img { max-width: 90%; } figure.wp-block-post-featured-image { aspect-ratio: unset!important; height: auto!important; width:100%; padding-right: 0!important; } .wp-block-group-is-layout-flex { padding-left: 0.2rem!important; padding-right: 0.2rem!important; padding-top: 0.2rem!important; padding-bottom: 0.2rem!important; } body .is-layout-flex { display: flex; flex-direction: column; } aside#sidebar .is-layout-flex { display: flex; flex-direction: row; } .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow { padding-bottom: 128px; } aside#sidebar { padding-left: 0.2rem; padding-right: 0.2rem; } #sidebar .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow { padding-bottom: 0px; } .sidebar-about { margin-top: 0px!important; } footer.wp-block-template-part { text-align: center; } .sidebar-about { margin-top: 0px; } header .is-layout-flex { display: flex; flex-direction: row; } .wp-block-navigation__responsive-container-open svg { fill: currentColor; display: block; height: 48px; pointer-events: none; width: 48px; padding-right: 8px; } } Contents: 0:00 Introduction 0:07 Discussing Mediavine's Trellis Theme 1:08 Installing Popcorn 2 2:26 Start Building Inline Menu 5:08 Start Editing Front Page Template 10:25 Build First Hero Post On Front Page 19:36 Quick Clone Post To Work From 20:14 Back Building the Hero With Content 31:00 Building A Sidebar With Lift 42:40 Tweaking CSS For Buttons and Link Text 53:40 Editing Footer Note: This is not a sponsored video although some of the products and services linked to in this description are affiliate links. This means if you click on them and make a purchase, I make a commission. This page may contain Amazon affiliate links. If you choose to purchase after clicking a link, I may receive a commission at no extra cost to you.
Show More

Comments

loading text loading
loading text loading
loading text
loading text loading
loading text
loading text loading
loading text
loading text loading
loading text