▼
Streaming live at 10am (PST)

Turning pure HTML pages into dynamic pages in Webflow!

Design help Custom code
#1

Greetings Everyone!

My name is Shirley Marshall and I am trying to use dynamic webpage creation for the very first time! About 20 years ago, I developed websites with pure HTML, CSS and Javascript. Now I am doing a favor for a dear friend of mine - and she needs a dyanamic ecommerce site for her ~550 items.

My immediate problem is that I have no idea how to turn my pure HTML pages into Webflow’s dynamic pages! I have been to the University - and watched all the videos, but that did not help me! All of this on Webflow is completely new to me and I need some guidance on how to translate my HTML site design into pages in Webflow. Also, I need to have many, many [~550] pages for products - but I also want a Home/index page, an About page, a form page and a Links page that will not be product pages - but will have the same basic design - and I need to know which pages I should make first - the index, etc. or the product pages? And how to get them all to look the same design-wise!!

I hope I have explained this well enough that you understand the problem I am having - and that someone who used to/or still does code HTML pages can explain to me how I turn them into dynamic pages in Webflow!!

I don’t have a Read-Only site link yet because I could not even figure out how to start this process to create anything!! :wink:

Please, please can someone help me with this??

I really appreciate your time and assistance with this matter, Shirley :purple_heart:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

You cannot import HTML pages or templates into the designer. Those all need to be built using the designer. When you need custom code for an element or an integration you can use custom code embeds. The designer won’t display css loaded from an external style sheet but can display CSS inside style blocks placed on the page. If you are going to use Webflow, you will really need to learn the designer.

#3

Thank you so much for the reply, webdev!! And please believe me when I tell you that I AM trying to learn the Designer!! I have been to the University and taken all the lessons, but the vast amount of different terminologies is confusing me! I taught myself pure HTML code ~20 years ago - so I think I can learn this too - but I guess I am having trouble correlating what matches with what - like instead of doing this - do this instead. Don’t know if I am explaining myself properly, but I just hoped that someone who was really familiar with HTML coding could help me make the connection from that to Webflow. I believe I just need a starting point and then I can run with it! :wink:

Anyways, I appreciate your time and reply and I will get back to the Designer and watch the videos for that again, and then give it another stab - until or if anyone can give me some specific pointers.

Thank you so much, Shirley

#4

It is my space, I think you just need to understand that you can work from an existing site built by hand, look at the structure and mimic it in Webflow, then review your CSS rules in code and translate them via the designer. Start by working with one element and then go from there. Webflow’s designer is pretty complete, and you can always augment missing CSS with code embeds as needed.

#5

Thank you so much again webdev!! I think that helped me a bit - I have been very busy and just saw your most recent post 2 days ago, so have not tried to do anything yet. May I ask what element you would suggest starting with? [I couldn’t even figure out how to put in the background image, which is where I start in HTML!]

And if I could clarify this one issue - is it true then that you cannot reference an external style sheet [a .css file] within Webflow - so all CSS needs to be inline?

I really appreciate your valuable time and continued help with this!

Thank you so much, Shirley

#6

@Shirley_Marshall - I really recommend you watch the 101 course in the University. Webflow is a tool and understanding how to use it is essential to be able to build a site.

You can add an external stylesheet but it won’t render in the designer. Only on the front end when you publish a site. As a nocode tool you use the designer to add elements and style them in the designer.

#7

Thanks again webdev!! :grin: So it sounds like inline is going to be the perfect solution. I never used massive css in my sites anyway - so that will be fine for me.

Okay, this is embarrassing, but I really have to ask … How do you center an image [the site’s logo] on the pages? I have the body tag with a background image that seems to be working well. But I have searched in vain for a way to center the logo on the pages in the first element. Would you please let me know what area and adjustment I need to implement to center it? There is no text in this element except for the keywords in META tags, etc. I wanted it to be just the logo image centered horizontally in the first element on each page, whether it be the index page or an ecommerce page. I think if you will be so kind as to point me to that, I can then correlate the other items. And if not, I will just keep at it until I get it. My client may not be thrilled with that approach, but sh!t happens and I don’t want to continue to take up your time.

Btw, as I mentioned earlier, I have been to the University and ‘taken all the classes’, but I again had trouble matching functions with functions since the names are all changed [probably to protect the innocent!!] Sorry, I am trying not to be discouraged by my inability to grasp this the first time through.

But since it is obvious that I flunked out of University, I will be retaking all the lessons and now that I have been in the Designer/Navigator/Whatever - it will at least now look somewhat familiar to me, so I have hope that I will do better!!

But for my own peace of mind, I would really really appreciate it if you could tell me what controls or adjustments need to be made in what area to get an image to center within the page.

Also, when I was coding the HTML layout, to ensure the images would adjust to fit any screen, the css property was ‘background-size: cover’. I found ‘cover’ in the designer and selected it - but when I tested it, the logo was just cut in half for a mobile - and I thought that ‘cover’ told it to stretch or shrink the images as needed for whatever device it is being viewed on. So to me, this time the names are the same, but they are not reacting in a similar manner.

So I thank you and will hope that you can clarify these image placement issues, and in the meantime, I will re-enroll in University!! :grin: Thanks, Shirley :purple_heart:

#8

I’ll chip in here to say that I think completing the Webflow university again would be really beneficial, and it seems like you’re headed there anyway. I would strongly recommend doing every single tutorial again, even the ones you think you know and are tempted to skip. Sure, it’ll take some time but it’s really worth doing if you want to get the most out of this.

Given your position it may be difficult to put some of it into the context you had, and I sort of had the same thing when I first started with Webflow but a second time round will really help, especially after trying to play around with the designer - you’ll get a few moments where everything clicks together for you.

That said, if you just want to solve your immediate challenge then I suggest you look at the Flexbox/grid tutorials as it’s generally a very easy way to assign alignments.

#9

When you style using classes in the designer, the CSS is written to a CSS file included on page loads. Webflow’s normalize, base css, and your css are there.