This guide takes you from nothing to a live website in one sitting: install WordPress, add the free Kira Page Builder, pick a template kit for your industry, and swap the placeholder text and photos for your own. Every step says what to click, and none of them assume you have used WordPress before.
What you will end up with
A complete site: home, about, services or menu, a contact page with a working form, a header with your logo and menu, a footer, and a page for broken links. It uses your colors and fonts, works on phones, and lives on a host you can leave whenever you want.
What you need
- A WordPress install. The quickest route is a Web9 hosting account at $12 per month: WordPress, Kira and the other Web9 plugins come preinstalled, and you start at step 3. Any other host that runs WordPress works too; you just do steps 1 and 2 yourself.
- A domain name. If you already have one, your host will show you where to point it. If not, buy one from any registrar; they typically cost $10–20 a year.
- Your content. A logo (a PNG with a transparent background is ideal), the text for each page, and a handful of photos. Rough is fine; the kit gives you a finished structure to pour it into.
Step 1: get WordPress
On Web9 hosting, skip to step 3. The site is already installed, you have your login, and Kira is active.
On another host, look for “Install WordPress” or a one-click installer in the hosting control panel. Follow it, choose a username and a strong password, and write them down. When it finishes, open yourdomain.com/wp-admin and log in. You land on the dashboard; the menu down the left side is where everything in this guide lives.
Step 2: install Kira Page Builder
Kira is free and open source. There are two ways to install it.
Zip upload. Download https://git.web9.live/pcgraphics/kira_page_builder/archive/main.zip to your computer. In the dashboard, click Plugins → Add New → Upload Plugin, choose the zip, click Install Now, then Activate.
Git Plugin. If you would rather have updates show up in the dashboard like any other plugin, install Git Plugin first (zip from https://git.web9.live/pcgraphics/Git-Plugin, uploaded the same way). Plugins → Add New then gets a “Git Plugin” button next to “Upload Plugin”. Click it, paste https://git.web9.live/pcgraphics/kira_page_builder, and install. From then on Kira updates from Dashboard → Updates.
Either way, “Kira” now appears in the left menu. Install Formulator the same way (https://git.web9.live/pcgraphics/formulator) so the kit’s contact form has somewhere to live; on Web9 hosting it is already there.
Step 3: pick a kit
Click Kira → Template Kits. The screen lists every kit, grouped by industry: restaurant, medical, driving school, services and nonprofit. Each card shows the kit’s home page, its name and a short description; the template kits page has fuller previews.
Pick the one closest to what you do. The industry matters less than you think, because you are about to replace every word and picture; what you are choosing is the layout and the mood.
Each card has two buttons:
- Build the site sets up the whole website from the kit in one step. This is the one you want.
- Download templates only adds the kit’s pages as drafts in your template library without touching the site. Use it later if you want a second kit’s page in your own site.
Click Build the site, then OK on the confirmation. It takes a few seconds.
Step 4: what just happened
The message at the top of the screen says the kit is set up and lists how many pages it made. Click “View the site” and you will see a finished website. Here is what Kira did:
- Pages. One published page per page in the kit, with the kit’s name as the page address (for example
/contact/). If an address was already taken, the message tells you which pages got a different one. - Menu. A menu named after the kit, with a link to every page, assigned to your theme’s main menu location.
- Front page. The kit’s Home page is now what visitors see at your domain.
- Header, footer and 404 page. Published site-wide. If you had other published ones, they became drafts; nothing was deleted.
- Colors and fonts. The kit’s design tokens are now your site’s colors and fonts. Google Fonts are copied to your server, so nothing loads from Google.
- Images. Every photo in the kit is now in your media library, ready to be replaced.
- Forms. The kit’s forms (contact, booking, and so on) were created in Formulator and are already wired into the pages.
Step 5: replace the content
Go to Pages, hover over Home and click “Edit with Kira”. The editor opens with your page in the middle and a settings panel on the side.
Text. Click any heading or paragraph on the page and type. What you see is what visitors will see. For links and alignment, use the Content tab in the panel; for size, color and spacing, use the Style tab.
Images. Click an image, and in the Content tab choose a new one from your media library or upload a photo from your computer. The image keeps its size and position; only the picture changes. Do the same for section backgrounds: click the section, then look for its background image under the Style tab.
Delete what you do not need. Right-click a section to delete it, or to duplicate it if you need one more.
Click Save, then open the next page from the Pages list. The header and footer are edited the same way: on any page, the “Edit with Kira” item in the top admin bar lists the page, its header and its footer.
Your logo. The kit’s header uses the site logo widget, which shows whatever logo WordPress has. Set it under Appearance → Customize → Site Identity → Logo, upload your file, and publish. Until you do, the widget shows your site name as text. Set the name and tagline on the same screen.
The contact form. It already works. Submissions are stored under Formulator → Entries, and a notification email goes to the admin email address under Settings → General. Send yourself a test message to confirm it arrives. To change the fields or the recipient, open Formulator → All Forms.
Placeholder details. Kits ship with a made-up address, phone and example.com email. Replace them everywhere, footer and contact map included.
Step 6: colors and fonts
The kit’s colors and fonts are not baked into each page. They are design tokens, a short list of global values every page points at. Change one and the whole site follows.
In the editor, click the Site settings button in the panel. Under Global colors you will find the primary, secondary, text and background colors. Pick your brand color for primary and watch the canvas update. Under Typography, choose a heading font and a body font from the Google Fonts list; Kira downloads a copy to your server when you save. Button styles are here too.
Change as little as you can. The kit’s palette passes contrast checks; if you change the background, check that the text is still readable on it.
Step 7: publish and check on your phone
Every page the kit created is already published, so your site is live the moment the domain points at it. If your host has not connected the domain yet, do that now in the hosting control panel.
Then open the site on your actual phone, not the editor’s preview. Tap every menu item, scroll every page to the bottom, fill in the contact form, tap the phone number. If a section looks cramped, go back to the editor, switch the canvas to the mobile view with the device buttons at the top, and adjust the Style settings there; changes made in the mobile view do not affect the desktop layout.
Last, under Settings → Reading, make sure “Discourage search engines from indexing this site” is unchecked.
Keeping it safe
Backups. Install Backinator (free, https://git.web9.live/pcgraphics/backinator; preinstalled on Web9). Set a backup password in its settings and store it in your password manager, run one backup and download it. The archive comes with an installer.php that rebuilds the site on any host without the original server. Then create a schedule; weekly is enough for a site that changes once a month. Web9 hosting takes daily backups too, but a copy you hold yourself is what makes the site truly yours.
Updates. Once a week, open Dashboard → Updates and apply what is there. On Web9 hosting this is done for you. If you installed with Git Plugin, the Web9 plugins show up in this same list.
If you get stuck
Email hello@web9seo.com with a link to your site and what you were trying to do. Support is email only, Monday to Sunday, 9 to 5 Pacific, and we reply within one business day. If you cannot get your domain pointed, send the registrar name and we send you the exact settings.
If you would rather hand the setup over, the “Build it for me” option does steps 1 through 7 for you: we set the site up from a kit with your content, connect the domain and hand it back with a short walkthrough. After that it is the same $12 per month hosting and the site is yours to run. Ask for a custom quote at /get-a-quote/; you will hear back within 24 hours.
