How To Use Stock Image As Site Background Squarespace
7 ways to use the Image Block in Squarespace
People beloved the idea of Squarespace, because it'south and then easy to edit. No developers are necessary; therefore, longterm, yous save fourth dimension & money in investing in Squarespace, whether you rent out the original design or DIY.
The one thing that people worry near is whether their site will look as well much like the template, or likewise much similar everyone else'southward Squarespace site, considering of this template-based system.
The way around that? Get creative! With the right creative mind and the right tools, your site doesn't have to look like anyone else's –and I'grand not even talking about using some code to customize information technology.
Let'due south investigate some other means we can utilize the Epitome Block in Squarespace to make your site stand out!
7 Artistic means to utilise the Image Block in Squarespace
1. Uploaded Images (new or reusing) AND
2. Stock Photo Images (paid or costless)
Okay, and so these aren't creative, per se, but you MAY have missed an update in Squarespace that allows you lot to access all the images you've uploaded to the website (plus paid or gratuitous stock photos) from within the Image Block. That is a new and heady feature, that I dive into more in this post on how to Reuse Images using the Image Block.
3. Image as push
If you lot want to accept a special push button for a sure thing, you tin can design a new button, and so consign it every bit a PNG file (which allows a transparent groundwork behind your blueprint; JPGs don't) and upload information technology every bit an image. Then all y'all have to do is link it to the the destination URL as yous unremarkably would link a Button Block on Squarespace, merely y'all'll be using the link feature in the Image Block settings.
To get there, you'll add your Prototype Cake; click Design in the Paradigm Block Settings/Edit popup. From at that place, curl down to Clickthrough URL and find the content or paste in the URL yous want to link your new "button" to.
You can design the push in something like Canva, if you're not a designer & don't have design software, or even Affinity Designer (similar Adobe Illustrator) or, obviously, in any of the Adobe products.
Here's an example of a push I created, which links to my Contact page so you tin can see it in activity:
four. Image equally design chemical element or icon
Images can also just exist used every bit a design element on a page. A lot of people do this for icons on their services page or for blog categories.
blueprint element
favicon or icon
5. Image every bit a text header
If y'all want to utilise a different font mode (for a short flake of text, like a fun title, etc) for something really specific or special on the folio, but don't know plenty about coding to code that new header text, y'all can blazon it out in your design app, consign it as a PNG and upload it as an Paradigm to Squarespace.
Here'due south an prototype I created as an example:
I wouldn't go crazy with this 1. Squarespace limits your font choices to 4 (Heading ane, Heading 2, Heading three and Trunk text) for a reason: those limits keep the design consistent, which is key for maintaining consistency & professionalism in your brand.
6. Paradigm as a section divider
Don't like the way your Line Block looks? If yous can't whip upwardly some CSS to change the manner your template displays the Line Block, and then you an Image Block instead, and upload a line you've created elsewhere!
Create it in Canva, Analogousness or Adobe (recommended) apps, export it as a PNG (with no background colour) and upload information technology as an prototype in the space yous desire. Ta'da!
Here are a couple I've created and used in the past on my own site:
unmarried line, white
seven. Uploading or embedding a GIF
A lot of GIFs are embedded, like those from giphy.com, only if y'all create 1 or have i you'd like to use and you lot have the actual .gif prototype file to upload, then you can exercise so with the Image Block. It volition car-play once added to your page. Nice!
If you'd rather embed it, then you'll want to employ the Embed Block. It's SUPER elementary, grab the embed lawmaking from the GIF you lot want, select the Embed Cake and click Edit. Click the code icon (</>) in the right side of the bar where information technology looks like they want you to paste in a link, and a dissever popup volition appear where you can paste in the code for the embedded GIF. Click Save/Apply on that 2nd popup, then Salve/Apply on the 1st popup, then Salve your page changes.
Image Cake
BONUS SEO TIPS TO Remember:
✔️ Make sure you lot provide an alternating file proper name in the Image/Edit popup, beneath where yous add the image to upload it, so that Google knows how to interpret your Image "Heading" (considering information technology tin can't read text out of an image very well, right?).
✔️ Make sure each epitome you add together is a file size nether 500KB, wherever possible, to ensure your website doesn't get slow trying to load your new images! For more tips on how to optimize your images for web, read this post too!
Featured Freebie!
If you demand help organizing all these free tips you're digging upwardly, you might demand to be using a free project direction app!
Check out my free PM Tool feature list to detect the one that fits your needs best.
Information technology showcases features beyond 6 dissimilar platforms, listing integrations, which features are just available for paid plans and more!
Websites don't take to be complicated.
https://www.launchthedamnthing.com
How To Use Stock Image As Site Background Squarespace,
Source: https://www.launchthedamnthing.com/blog/7-ways-use-image-block-squarespace-tips
Posted by: hopperonexped.blogspot.com
0 Response to "How To Use Stock Image As Site Background Squarespace"
Post a Comment