Affiliate
Find Keywords
Make Money
Use WordPress

Acabado: Add 3D Layer Appearance To Your Posts

by Josh Koop | Last Updated: August 31, 2020
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete disclaimer information for more details.

I had a question on how to mimic the appearance of BestRoofBox.com and create a similar look to how their posts look “raised” off the page.

I built a Custom CSS which will allow you to manage and modify each part of the shadow portion and the spacing from the edges for your text. I did increase the spacing as I felt it made the overall visual appeal better than having text to the edge.

.site-main {
    
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 25px;
}

For those who need help understanding the box shadow above here is how they different values are used. You can tweak these to fit your need and if you want a specific look to the shadow it can get you there.

box-shadow: h-offset v-offset blur spread color;

Once this is added to your Custom CSS Just make sure to save in the upper right hand corner and go back to your posts to check it out!

If you have other ideas please post them in the comments below!

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!

Recommended Reading

  • Acabado: Building an Elementor Landing Page

    Covering how you can use Elementor to build a landing page for your website to sell an e-book, info product, or pull a email signup list with giveaway!

  • Acabado: Creating A Landing Page With Gutenberg

    When you want to build landing pages people talk about how you need page builders, the thing is though that Gutenberg by itself may be more than good.

  • Power Up Acabado By Enabling JQuery

    Jquery within Acabado is disabled by default to maximize page speed, you can enable it with specific plugins that keep changing but include Elementor, etc.

  • Acabado: Adding Image Banners To Each Tag and Category

    This is a tweak specifically to allow you the ability to make your category and tag pages look much more structured and professional, hopefully you like!

  • Acabado: Alternating Flipped Image on Homepage

  • Acabado: Simple High-Resolution Images

    One thing which impacts Acabado non-stop is the poor look of the images on the website, especially the homepage and featured post images.