How can I edit the social boxes and the contact form in the TileDesign Template

Design help Layout & Design
1

I have started using WebFlow for the first time. I liked the look of the TileDesign template, and have been customising it to my needs - getting my head around projects etc.

Problem no. 1 - I want to change the social media boxes. I wanted to make the bottom two instagram and linkedIn.
a. While I’m sure they’re out there, finding a white .svg logo for each in the same format as the Facebook and Twitter graphics above proved difficult. Does web flow have a repository for such things? I’ve found logos that I can make work.
b. There is a background colour transition in force. I can see the transition, however what I can’t do is edit the colour it transitions to. Where should I be looking for this?

Problem no. 2 - There is a ‘contact’ form overlay that pops up when contact or hire me is clicked. This is great, however I cannot for the life of me find out where to edit the text on this overlay - I can see it on my website, but cannot find settings for it anywhere in designer or editor.

Any help appreciated, sorry for newbie questions :slight_smile:
Jim

Here is my public share link: https://preview.webflow.com/preview/jamess-first-project-3b524a?preview=74db452dc56f670ecde6135bed7173e4
(how to access public share link)

2

Hi @Jimbo

Glad you are trying Webflow out.

##1) The Social Media Boxes
a) It’s better if you find similar icons for all the social media you want to include and replace all of them.
b) the background color transition you are referring to is a hover state. See here:
https://cl.ly/092F2j3T1z2x/Screen%20Recording%202017-05-09%20at%2002.02%20PM.gif

##2) The Contact overlay
In this template, the contact overlay is a symbol with hidden content that is shown using an interaction on the contact button.

To access the overlay, follow these steps:

  • In the navigator tab, find the Contact overlay symbol and double click it.
  • In the style tab, clear the settings for the display and make opacity: 100%
  • Make the changes you need.
  • Reset the display to none and opacity: 0;

See the video here:
https://cl.ly/2X3M3A1h2R0o/Screen%20Recording%202017-05-09%20at%2002.12%20PM.mov

​Hope this is helpful.

To learn how to use Webflow better, check out our video tutorials here: Free web design courses and tutorials | Webflow University

3

Thank you so much :slight_smile:

4

You are most welcome @Jimbo

Good luck with your project!