Site elements that can be customized for each version include:. Elements controlled here include:. Global fonts: Set the font size and color for everything from H1 to H6. These styles also apply to the blog. Global buttons: Set the design for all buttons. Stick to your color palette no more than three colors; see Step 2 and consider adding shadows to make buttons pop. Site background: Set a background image or color for all pages and per page.
Site layout: Choose from three customizable desktop layouts and choose your desktop width: px or px. The homepage is super important as it defines the entire flow of the site. If your template has multiple pages, there should be a section on the homepage for each page that appears in the navigation. If your template has a single page, the navigation should connect with anchors on the page.
Even though many if not all of the images that you use in the template will be replaced when it is used to build a website, we still recommend using high-quality, relevant images that provide guidance and inspiration.
The hero image is the top image on the page — select a great, relevant, high-quality image for it. As for the rest of the images, use px HD images with a max weight of k. Never use images that contain text. If you want text on the hero image a slogan, for example add it using a paragraph widget. Add the widgets that you want from the left side bar. To add pages, click the Pages tab and click New Page.
To add sections, hover the plus sign that appears between sections and click on it to select sections. I've seen a lot of people become really frustrated when they find out their template can't do what they want it to do.
I also see people flip flopping between templates once they realize one doesn't work. My best advice is to do your research and map out what you want your site to be before you switch themes. Make sure the template you choose has everything you want to do with the site. Get to know the template and understand it. HubSpot will quickly show you if the template is responsive. However, you can always use the Google Mobile Friendly Test here.
If you want an e-Commerce site, the functionality is limited in template sites. Adding e-commerce and other kinds of custom applications is hard or impossible in template sites.
If you want a fully functioning e-Commerce site, avoid templates. Most well design templates should have all of these options but again please make sure you double- or triple-check that your template has them.
Think of it like buying a car for your high schooler. The car may be eight years old but runs well, has good tires a nd only has two doors. You may pay a couple of thousand dollars, and the car will last through college, ideally! If you're buying a car for a family, it's a whole other story. You may need more room for a growing family, so an SUV with aaaaall the bells and whistles might be a must.
It'll look great, drive great, but it'll also cost waaaay more than a couple thousand dollars. Both cars are great options, but what a family needs will be completely different than what a year-old needs. A custom site will be designed to fit you, rather than trying to get a template to match your brand. So the single most important reason to create a custom-built website is that your site is designed and built to support your established brand consistently and explicitly.
Good job, Andreas. Really good stuff, Andreas. Looking forward to Part 3 — soon I hope? What am I doing wrong? I am so glad i found your site! I now need to put up a site as an affiliate, to help my family financially…this is a HUGE learning curve for me, so finding a clear concise tutorial to this half of the equation, is a blessing…thank you for taking the time to help.
I downloaded the template I want to experiment with basic noise , unzipped it, and saved it, but when I go open the file by double clicking it, it only opens to a screen that shows the picture icons of the individual parts of the template. I right clicked the icon and chose edit and it opens up either into the picture edit screen, or a notepad. So I assume that this is what I need to find in order to try to edit each part of the template. But what does opening in my web browser mean, and how do I do that?
Will it look like the actual template when I do eventually figure out how to open it in the browser? I am a dental assistant by trade, and my computer knowledge, before this, goes as far as emailing friends and goofing around on Face Book! I am below a novice for sure! Thanks for this detailed tutorial, we are currently working on improving our site and also think about changing the template.
Hi very good job, Andreas. Please, keep using this two words: For example. Great tutorial Andreas! I am trying out the example you generously provide in this tutorial, and am sad to say the link to Part 3 appears to be broken! I really hope it is not too hard to restore. It depends on what operating system and web browser you use. Typically, just double-click on the. You can also, in most cases, right-click on the index.
Thanks for sharing your knowledge. At the moment we are planning to build up a new project and are always looking for tips like you present here. For me it sounds like that therewith the benefit of the ease of use is given. Anyhow I like how you explain things step by step. Even I can pretty much follow-up ;. This tutorial was amazingly detailed. The concept of adaptive design is very straightforward. When implemented, the layout of your website will conform to any screen size on any device.
This is achieved through different means, the primary of which are responsive sites and mobile sites. Responsive sites adapt to changes in screen size automatically.
This means that the same site is served to all users and it conforms to the space in which it is displayed. WebsiteBuilderInsider is built on a responsive platform, and you can see for yourself how the elements adapt when you expand and contract the size of your browser. Mobile sites are versions of your web page that automatically get called up when a mobile user is detected. These sites may have a simpler layout and a more limited functionality from their desktop equivalents, so it is important to choose the most important elements for mobile users.
These can include store directions, phone numbers, and general information. Most websites conform to a standard layout that users have gotten used to and have come to expect. A website header is a bar that runs across the top of your website and generally contains the main tools you will need to navigate from page to page, including a search bar, links to main pages, a blog, and even contact information.
If you have a logo, it is usually featured on the header and typically serves a double purpose as a home button which users can click to return to the homepage of your website. The body is the part of the website that changes from page to page. It takes up the most space and displays all of the content contained on each page. This can range from image galleries to blogs and anything in between. When you add pages to your website, you will only be changing the body. Footers contain information like copyright notices, contact information, newsletter signups, and anything else important enough to be on every page, yet not important enough to be prominently displayed within the header.
So what are you waiting for?
0コメント