Design like a Pro.
Understanding how to lay down information is crucial to the success of your website. There is a lot of moving elements but doing it properly will push your design into what professionals do. In this article, we will uncover how to achieve a professional look and good user experience.
Elements of page layout.
So what do professionals actually do? First, they have all their content (website text and images) saved to a folder, so that all can be easily found and uploaded to the website.
Remember: your images should be properly titled (this will help with SEO, you can read a full article here: SEO Crash Course
Reading a newspaper.
Now, imagine a web page is like a newspaper or a magazine spread. It has headers/headlines, subheadlines and columns of text and images. Often you see a square with an advert. These elements are designed with different visual cues (size, colour, animation), making some elements stand out (headers for example). It is the same with web pages. But not only text and images but also multimedia (audio/video/slideshows), forms (newsletter sign up and contact) and buttons (with Call to Actions) can be added to the page. With so many choices you can achieve a professional look by creating rows and columns and sticking to that grid.
TOP TIPS
Page Layout
- Stick to the grid.
- Add visual cues.
- Make most of your images.
- Keep it mobile friendly.
LET US DO IT FOR YOU
Need Help?
Our experienced team of graphic designers can help you establish your page layout using Elementor.
Keep it mobile and responsive.
A responsive website will automatically fit content into the screen size of the user. Look at FIG1&1.2. to understand the order in which it will display on smaller screens.
In Elementor you can also choose to hide sections from either desktop or mobile view. You would usually hide sections on mobile view, to avoid very long pages which will require a lot of scrolling. You can also swap order of elements in a row.
What is the best layout for my page?
The best way to decide how to distribute elements on the page is to first collate your content (all the text and images you want to publish to this page). With all the assets in one place, you can now work out how you could fit it on the desktop screen. Prioritise order of elements with most important at the top (your website should be responsive, so this is important for mobile views). Drawing a sketch of your layout will really help later on. Decide how many columns you want to create. Usually, it will be either 3 or 4 columns. But if you have a lot of elements to fit on the page you may want to increase it to 6, 8, 9, 12. This will give you more flexibility but is also harder to follow so be wary of adding too many.
How many columns?
The best way to decide is to count how many paragraphs of text you have written for this page. If the number is even you may want to divide your page into even amount of columns (2,4,6,8) etc. If the amount of content is uneven try to use the 3 column grid (3,6,9). This will help your website look professional. And remember, when you Do It Yourself you can always add or remove a little more text or images to make things align horizontally.
If you have a lot of text try to break it up with images. Elementor offers a wide range of widgets, so you could include a counter, a flip card or icons. These will help your website look more engaging!
Bonus tip:
Every now and then break the grid with either uneven or even row. This particular row will visually stand out from the others so you may want to include there a button with your Call To Action (CTA) or announce an offer.
Static Content.
The content of a website that remains the same across pages is referred to as static content. This could be served from a database as well, but it would be the same across all pages. For instance, the navigation menu, logo of the website, or any other information on the header or footer would not depend on inputs from the visitor.
Dynamic Content.
The content of a website that does not remain constant and changes according to user input(s) is referred to as dynamic content. For instance, in case of a product page, all product details such as Product Name, Price, Quantity, and Description are stored in a database and are fetched when a user is viewing the webpage of a particular product. Therefore, this content is dynamically generated by the CMS and it changes across products.
Home page layout template.
You can follow the below template for a sure way to a good home page/landing page.
