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
Show LessComments
loading text loading
loading text loading
loading text
loading text loading
loading text
loading text loading
loading text
loading text loading
loading text