Building Trellis Clone Using Popcorn Theme: How To Save Yourself $14.95 a Month #popcorntheme
White Hat Blogging
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. ... https://www.youtube.com/watch?v=enbzXy1oh4A
344941921 Bytes