Check everything right from creating a project, to moving elements and replacing images.
Creating your first project in ruttl
Adding your first webpage to Ruttl
Once your project is created, please copy the URL of the webpage you would like to add. Paste it inside the project and click on ‘Add page’. The webpage will be added to your project, and will be ready for review.
Sharing your project with other people
There are 2 methods in which you can share your project:
- Share to an email ID with View, Comment or Edit access - Open the project which you would like to share. Click on the ‘Share’ button on the top right side, copy and paste the email ID of the user with whom you would like to share this project, and send an invite. The person will receive an email, with the help of which he/she will be able to access the project in his/her available access.
- Share the project link - This is especially useful for sharing a project with the clients, since clients want to see progress on the project without logging into any platform. Inside any project, go to the top right hand corner, click on ‘Share’. On the next pop-up, toggle the ‘Shareability’ to on, copy the project shareable link and share this with your client. The client will then be able to see all the comments, replies to comments and edits on all the webpages of the project.
Commenting on live websites
To comment on a live website, create a project, add the webpage URL and click on ‘View page’. The webpage will load in ‘Comment mode’ by default, you can confirm the same in the bottom bar. Hover over any element and click on it, a comment box will appear. Type your comment here, and once it is done, click on ‘Comment’ or press Enter/Return key. Your comment is now added to a live website on Ruttl. Keep adding as many comments as required on this webpage. You can also add more teammates and tag them in comments using the ‘@’ sign while commenting.
Moving elements on live websites
To move elements on live websites, open the webpage inside Ruttl and go to ‘Edit mode’. Search the element which you would like to move around, i.e. any image, content, icon, or any other section and click on it. Now, use your keyboard arrow keys to move the element around as per your requirement. Once done, click on ‘Save changes’ and then your element is moved. You can check the dimensions of your movement in the ‘Activities Panel’ to the right hand side of the screen.
Editing content on live websites
Inside the project, open the webpage where you want to make the content edits. On the bottom bar, go to ‘Edit mode’ and click on the content section where you would like to make content changes, and then click on the ‘Edit text’ button. Enter the content as required, click outside the content box and click on ‘Save changes’. Your content will be saved on Ruttl. You can also make multiple changes together and then save the changes at once.
Replacing images on live websites
To replace any image on your website, you need to be in Ruttl’s ‘Edit mode’. There are 2 methods to replace images:
- Replace from Unsplash - Click on the image that you would like to replace. You will see a small button to the top left corner of the image named ‘Replace image’. Select ‘Photo Library’ and a list of images from Unsplash will appear. Search for your required image, select it, adjust the size and then click on ‘Save changes’. Your image will now be replaced. Your developer, or anyone else with Edit access to this project can download the image from the ‘Activities panel’ and use it on the live website.
- Replace from your computer - Click on the image that you would like to replace. You will see a small button to the top left corner of the image named ‘Replace image’. Select ‘Upload Image’, a small pop-up will appear, from which you can select the image from your computer which you want to place on the webpage. Once selected, click on ‘Save Changes’. Your developer, or anyone else with Edit access to this project can download the image from the ‘Activities panel’ and use it on the live website.
Using the Activities Panel
After you make any changes in ‘Edit mode’ on the webpage, your changes are reflected in the ‘Activities panel’. The activities panel can be seen on the right hand side of the screen in Comment and Edit modes. In comment mode, all comments, replies to comments, resolved comments, and the ability to resolve, edit or delete a comment can be seen in the activities panel itself. In edit mode, all the changes to font, font properties, button properties, image replacements, and more can be seen in the Activities panel itself.
6 Hidden Secrets Of Better Design-Development Collaboration
Why Client Feedback Is Crucial For Web Designing?
The Critical Role Of Design Systems In Building Products!
Simplify Web Projects With The New Page Approval Feature!
6 Elements Needed To Create A High Converting Landing Page
UX Auditing And Doing It The Right Way
Introducing The Video Commenting Feature In Ruttl
Learn How To Craft An Intuitive Design That Users Love
5 Tips To Boost Website Audience Engagement
How To Properly Review A Website?