Webflow apps mark a turning point in the history of Webflow. Indeed, the arrival of this new era is enabling developers from all over the world to create advanced new features for Webflow. Here's our full tutorial on how to use Webflow Apps Unsplash.
With this revolution, and in collaboration with Webflow, the royalty-free image bank Unsplash has decided to launch its own extension. It lets you easily add images from your Webflow designer. Pretty handy, isn't it?
Our tutorial for using Unsplash in the Webflow designer :
Install Unsplash Webflow apps on your site
It's easy, just follow these simple steps:
1. From your designer, click on the little puzzle icon 🧩, then on "Find an app" to be redirected to the Webflow App Store.
2. Find the "Unsplash" application among the applications (or using the search bar). "Unsplash" application.
3. When you click on the application, its details appear with an "Add to site " button. This button will allow you to add this Webflow app to one or more projects at a time. This application is secured by Webflow, so you can use it with complete confidence.
4. When you click on the "Add to site" button, you'll be redirected to a page asking you to choose which site you'd like to install Webflow Apps Unsplash on. Choose one or more projects to suit your needs. You can also choose to install it on a Workspace, so the app will be installed on both old and new sites. Click on "Authorize app", then return to your site designer. A message will tell you that the application has been installed on your workspace.
Using Unsplash Webflow apps easily
Once in your designer, go back to the app tab (or click on the "E" keyboard shortcut) with the puzzle icon 🧩. You'll see that a new application has appeared. It's Webflow Apps Unsplash.
Click on "Launch" to launch the Unsplash application dialog box.
Add an Unsplash image:
- Use the search bar to find an interesting image.
- Select the div that will receive the image.
- Click on the image.
And voilà, the image appears in your designer. It has been included directly in the div with a class.
Repeat for every image you want on your site. If you don't like an image, you can select your image element and replace it with a new one. This way, the old image will be deleted and the new one will take its place. Handy, isn't it?
Why use Webflow Apps Unsplash?
The arrival of this app speeds up the creation of websites. This new feature means we don't have to switch tabs, and we can choose images directly from the designer. But that's not all. In the app, you can also access trends, broad search categories (Abstract, Art, ...), search for the image you want in the search bar and, last but not least, access your image history.
Unsplash App specifics:
You'll quickly notice the special features of Unsplash elements. Here are the details:
- When you add an image via the Unsplash app, it doesn't appear in your assets because it's sourced directly from Unsplash (you can go to the Unsplash element settings and see its source, src, in the attributes).
- The size attribute: Gives information to the browser to make your website a pleasant experience for your users.
- The Alt attribute: gives search engines a textual description of the image. Very important with Unsplash, the photo's creator is cited.
- Src attribute: Tells Google where the image comes from, useful for credits.
- Srcset attribute: Gives an indication of the image resolution so that your browser can choose the right image.
- Width and Height attributes: Give an indication of the width and height of your image.
- The Style attribute: Gives the image's color palette and an indication of its hues.
In conclusion ...
Webflow Apps Unsplash is a major innovation in the world of web design and website creation. The result of a collaboration between Webflow, a leading web design platform, and Unsplash, one of the world's largest royalty-free image banks, this application offers designers and developers seamless and efficient integration of high-quality images directly into their Webflow projects.
With Webflow Apps Unsplash, users no longer need to juggle multiple tabs or download images and then import them into their designs. It's all done in a few clicks. This direct integration not only saves time, but also ensures that the images used are optimized for the web, respecting best practices in terms of performance and SEO.
One of the major advantages of Webflow Apps Unsplash is the vast library of images it makes available to users. Whether it's landscapes, portraits, abstract images or any other type of photography, chances are you'll find the perfect image for your project. What's more, since all Unsplash images are royalty-free, users can use them with confidence, without fear of licensing or copyright issues.
What's more, Webflow Apps Unsplash is designed to be intuitive. Even people discovering Webflow for the first time will find the app easy to navigate. Advanced search features allow images to be filtered by category, color, orientation and much more, ensuring that users find exactly what they're looking for.
In conclusion, Webflow Apps Unsplash is much more than a simple image bank integration. It's a powerful tool that transforms the way designers and developers interact with images in their Webflow projects. It simplifies the design process, while ensuring the use of high-quality, web-optimized images. For anyone looking to improve their workflow and visually enrich their sites, Webflow Apps Unsplash is a must-have.
