Save 💰 $14.95 a Month With Popcorn: Replace Mediavine Trellis Using #popcorntheme

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.

Monetize Your Site With Ads: https://bit.ly/ezoicdisplayads
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;
}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
body{
letter-spacing: 0.05em;
line-height: 1.7;
}
.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.

Видео Save 💰 $14.95 a Month With Popcorn: Replace Mediavine Trellis Using #popcorntheme канала Josh Koop