Do you want an eye-catching graphic like this one?
If you want to add professional-looking elements to your landing page but don't want to pay an expert designer for it, then you're in the right place. This blog is the perfect beginner's tutorial on adding a beautiful scrolling text graphic to your website.
Simply follow these simple steps and you'll add a professional moving graphic to your own website!
Creating your gallery in Wix
Insert the Wix pro gallery element in the section you want your moving text to be placed in.
2. Stretch the gallery to full width, so that your graphic can stretch to either edge of the screen
3. Click settings, and go to Layout and select "Slider", then click "Customize Layout" for the next step.
4. Set Thumbnail resize to "Fit", turn on "Loop images" and "Slide automatically", and select "Continuous".
5. Also adjust the slideshow speed to your preference, I chose 100 for a quicker scroll, and reduce the spacing to "0" so that when the image replays itself there isn't any gap
6. Go to Settings, and set "When clicking on an item" to "Nothing happens". Also turn off the heart icon as it is turned on by default.
7. Move onto the Design tab, and set the Overlay color to 0 so it is transparent.
8. Still in the Design tab, turn off "Show navigation arrows"
9. Crop your gallery frame to the dimensions that you want your text graphic to be. For this tutorial, I chose the dimensions 1370 by 88.
10. In Canva or Figma, create a new file or frame to the dimensions of your Wix pro gallery. In this tutorial I am using Figma and create a 1370 by 88 pixel frame.
11. Create your graphic. I used a combination of text and an icon in my desired font.
12. For Figma, to make the background of your frame transparent, you can simply change the fill in the design editor by setting the opacity to 0. Adjust your text and icon to the desired color, and group together all your elements (the frame, the text, and any icons you may have used).
13. On the bottom right side of the screen, export your group with your entire graphic
14. Going back to Wix, select your gallery and click "Manage Media". Once there, select all the default photos and delete them.
15. Upload a new image, and select your file from wherever it's stored on your device
16. Insert the image, and enjoy your professional-looking moving text graphic!
Comments