A css variable is a great way to keep things like colors and other styles consistant.
It allows you to define something like a color '#0a85ff' to a name like '--primary-color'.
You can then user 'var(--primary-color)' to color an element, and then you can change that value here.
This allows you to change the color for your entire website easily without having to change it for every element.
Open
You can open a file or paste some html you wish to edit below
Edit a Class
Classes are a way to make sure your design is consistant. It allows you update the style of all elements with the same class with one change, instead of changing each element. This is useful
for things like buttons that you want to be consistant on your page.
WARNING: styles applied to individual elements take precedence over styles in classes. So if you want have a class style show up on an element, make sure the corresponding style is blank
on the element.
hover style
Edit an Animation
Animations are a great way to make your page stand out and feel more interactive. To create one you specify
the style of the element at each keyframe below (you can skip keyframes). You can then apply this to an elements 'animation'.
keyframe 0%
New Page
Feel free to use one of the templates below or upload your own (html files).
Upload
Blank Page
A basic blank page for starting fresh
Splash Page
An splash image based landing page to show off something on your site.
Generic Business
A generic business page with a nav bar.
Portfolio
Basic portfolio page with a few cards for showing off your stuff!
Food Blog
Basic food blog landing page for showing your recipes off
Help
Hi! To get started, click on a something in the view window to see what styles are applied to that element.
It may help you to look at some of our templates under 'new page'. (Often the best way to start is by using a template similar to your idea)
We don't have a dedicated staff to help you unfortunately, but here are some resources for when you're stuck:
Look at our reference below or hover over styles in the editor for hints
Chat gpt can help answer questions you might have about CSS, which is the styles you see in the right menu in the editor.
Say something like 'Hi, I'm working in a visual html editor that lets me modify css without code. How can I ... ' and he should be able to help you to some extent
You can also try this some of these websites for learning about CSS. Though I think chat gpt will probably be more helpful.
There are multiple ways to do this in css, but most people do one of these 3
For text, many people use 'text-align' set to 'center'
For other elements, try setting the container for the element to 'display' 'flex', 'justify-content' 'center, and 'align-items' 'center'.
You can also set 'margin' to '0 auto' and that sometimes works as well.
Add an Image
Right click or use the '+' button at the bottom to add a new element
Select 'img' and hit add
Click on the image element and on the right side click on the upload icon for 'src'
Select your image from your computer
You might want to change settings for the image
A good starting point is 'width' '100%' and 'height' too 'auto' and no blank in the drop down.
Change Text Color
Click on the text you want to change
Click on the square next to 'color' to change the color
Remove a Background Color or other Color
Click on the color square and delete the color text in the color picker.
Add Something to an Element you can't Select
If you can, click on a child of the element
On the bottom, click 'select parent'
On the bottom hit the '+' button to add an element
Make a Scroll Section
First you'll probably want to limit the height of the element by setting the height to something you like
Then on the element set 'overflow' to 'auto'
Now the element will become a scroll view when it's children overflow it's height
Make a Second Page
Most websites have multiple pages, and this is something you may want to do. Here are the steps to do that:
Make your main page and your second page
Save the second page as an html file and name it whatever you like with.
In the first page make an 'a' (link) element and set 'href' to the name of your second page like 'my_second_page.html'
Save your main page in the same folder as your second page on your computer
Double click your main page html file to open it in your browser
Click on the 'a' element you created to check if it goes to your second page
It that doesn't work, make sure your 'a' tag has the right file name as 'href', and that both your pages are in the same folder.
When you upload your website files to a hosting service you'll want them to be in the same folder there too for the link to work.
Publish a Website
Publishing a website can be kind of complicated. We may in the future provide hosting options,
but currently we do not. If you want your website to be accessable online, here are some general steps:
Get a domain name
Find a hosting service
Upload your html files to the hosting service
Modify your domain name DNS to point to the hosting service (very technical, however some hosting services do this for you)
For many websites I create, I actually use github pages which is free. Here's some general steps for that:
Create a github account
Create a repository (project)
Upload your html files to the repository
Got to Settings > Pages
Then see if you can find something to publish the site
Optionally get a domain name and point it to github pages (very technical)
Save user data
Unfortunately saving user data pretty much always involves having a server where that data is stored.
Steps for this might include:
Create a server that can recieve messages
Pay a hosting service to run your server on.
Add javascript (code) to your webpage to send user data to the server
Alternativly you can use a google form to collect data which will be saved to your drive. This is free and easy to setup.
We've toyed with the idea of making a no code solution to this. Though no code solutions are often finicky and limited in what they can do.
If your business could use this and you have the money, hiring a developer is probably what you'll want to do.
If your comfortable with doing some coding yourself, I'd check out FastAPI in Python for doing this.
Chat GPT can help get you started pretty
quickly.
Make Transactions
Transactions are also pretty complicated to set up. They involve connecting to a payment provider
and handling user orders. If you want to do this you'll probably need a developer.
We've thought of making a no code solution for this, which we may do in the future.
