aurevoirblue

@aurevoirblue Have you tried Portfolio Page yet? We can give the code to turn links to button. And if you want to change portfolio project urls, we can also send the code.

Site URL: https://emu-maracas-4rxy.squarespace.com/
Hi,
I'm trying to create something similar to this plugin by Ghost:
https://www.ghostplugins.com/products/phase-image-changer
But I'd like it to be at the top of homepage main banner image. Main image with 4 text links which have this rollover/rotating image effect. I'm not sure if I'm describing this properly so please let me know if you need an explanation!
Thanks 
Site: https://emu-maracas-4rxy.squarespace.com/
Password: emu
 

Site URL: https://brass-sepia-454p.squarespace.com/
Hi,
I'm trying to create a custom section borders by creating an image and positioning it above the section. I created an SVG wave here: https://getwaves.io/ and get this code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#74C2CB" fill-opacity="1" d="M0,64L80,85.3C160,107,320,149,480,154.7C640,160,800,128,960,122.7C1120,117,1280,139,1360,149.3L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg> and I'm using this code to place it on the page:
#your-section-id-here { background: #DE551B; overflow: visible; &:before { content: ''; width: 100%; height: 100%; background-image: url(ADD URL); position: absolute; background-size: 100%; background-repeat: no-repeat; background-position: bottom; top: 0; margin-top: 1px; transform: translateY(-100%); pointer-events: none; z-index: 1; @media screen and (max-width: 800px) { background-size: 200% 50%; } } &:after { content: ''; width: 100%; height: 100%; bottom: 0; left: 0; background-image: url(ADD IMAGE URL); background-size: 100%; background-repeat: no-repeat; background-position: top; margin-bottom: 1px; transform: translateY(100%); position: absolute; pointer-events: none; z-index: 1; @media screen and (max-width: 800px) { background-size: 200% 50%; } } } Question is: where does the SVG wave code go into the CSS code? The CSS asks for a URL but I don't have that. Is there a fix for this??
 
Thanks!

Thanks @creedon Setting the background to full bleed w/CSS worked! 
Many, many thanks for all your help on this @creedon @Kwamzilla 🙏

@creedon is correct.
Once you've completed that, you can add css that will essentially be
#yoursectionid .content-wrapper { padding-left: 0; padding-right: 0; } You'll also want to think about the mobile layout though as it will automatically place the blocks in order from left to right. You may then wish to use
/*Shrink Images*/ #yoursectionid .sqs-block-image { max-width: 40%; } /*Align Image Left*/ #blockid1 { margin-right: auto; } /*Align Image Right*/ #blockid2 { margin-left: auto; } Where #blockid1 is the left image and #blockid2 is the right image.
Walkthrough video.

Even though you're not using a background image on that section, set the background image to full bleed.

Add the following to Design > Custom CSS.
[data-section-id="60c3a049a9e0ef1b010386eb"]:not( .full-bleed-section ) > .content-wrapper {   padding-left : 0;   padding-right : 0;      } Let us know how it goes.
 

No drama. Please don't forget to mark your question as answered if one of us has solved it for you.

Thanks so much @creedon and @Kwamzilla!!
I'll give it a go right now. Your attention on this is very much appreciated! 

Thanks so much @creedon and @Kwamzilla!!
I'll give it a go right now. Your attention on this is very much appreciated! 

Here is the basic effect. I set the content width of the page section to custom 100.

You can of course put any block(s) you want in the middle area.
Then I threw on some CSS to get the section to be full-bleed.

Once you get the basic effect started and are happy with the direction it is going hit us up for the CSS.
v7.1 has only one template. What SS calls templates for v7.1 are a starting point of colors and fonts.
Please see Adding content with blocks - Add blocks to a page and Resizing blocks.
Let us know how it goes.

Each page section is divided into 12 columns. On the page you cite the are 2 cols, 8 cols, 2 cols for the effect you are interested in. The 2 cols contain image blocks.
The basic effect can be built with standard SS interface tools.
Once you get the basic effect started, hit us up if you need some CSS to finish it off. It would help if you post a URL to a page we can see.