So while browsing around the web today I found a fun CSS trick that can make the main content of the site appear like a pile of stacked papers. There are a few options available so give them a try and see if one fits your site. I could see how this could work well for an art site or another paper-oriented blog.
/* Stacked Paper Effect At Bottom Of Content */
.site-main {
background: #fff;
box-shadow:
/* The top layer shadow */
0 1px 1px rgba(0,0,0,0.15),
/* The second layer */
0 10px 0 -5px #eee,
/* The second layer shadow */
0 10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 20px 0 -10px #eee,
/* The third layer shadow */
0 20px 1px -9px rgba(0,0,0,0.15);
/* Padding for demo purposes */
padding: 30px;
}
/* Stacked Paper Effect At Top Of Content */
.site-main {
background: #fff;
box-shadow:
/* The top layer shadow */
0 -1px 1px rgba(0,0,0,0.15),
/* The second layer */
0 -10px 0 -5px #eee,
/* The second layer shadow */
0 -10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 -20px 0 -10px #eee,
/* The third layer shadow */
0 -20px 1px -9px rgba(0,0,0,0.15);
/* Padding for demo purposes */
padding: 30px;
}
/* Diagonal stacked paper effect */
.site-main {
background-color: #fff;
/* Need position to allow stacking of pseudo-elements */
position: relative;
/* Padding for demo purposes */
padding: 30px;
}
.site-main,
.site-main::before,
.site-main::after {
/* Add shadow to distinguish sheets from one another */
box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}
.site-main::before,
.site-main::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
}
/* Second sheet of paper */
.site-main::before {
left: 7px;
top: 5px;
z-index: -1;
}
/* Third sheet of paper */
.site-main::after {
left: 12px;
top: 10px;
z-index: -2;
}
.site-main {
background: #fff;
padding: 30px;
position: relative;
}
.site-main,
.site-main::before,
.site-main::after {
/* Styles to distinguish sheets from one another */
box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border: 1px solid #bbb;
}
.site-main::before,
.site-main::after {
content: "";
position: absolute;
height: 95%;
width: 99%;
background-color: #eee;
}
.site-main::before {
right: 15px;
top: 0;
transform: rotate(-1deg);
z-index: -1;
}
.site-main::after {
top: 5px;
right: -5px;
transform: rotate(1deg);
z-index: -2;
}
Acabado has SEO functionality baked into the theme which can cause issues when you like to use Yoast, Rank Math, or other SEO plugins.
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.
One thing which impacts Acabado non-stop is the poor look of the images on the website, especially the homepage and featured post images.
One of the things which have driven people crazy with Acabado is the fact that WooCommerce won't load, it is near impossible to have an "on-site" storefront.