Welcome to this tutorial! We are creating a Creative Agency website today, step by step, with the help of Folie Theme.
Let’s get started 🙂
First we should choose a demo from the Folie Theme. The perfect choice for the topic would be exactly the Creative Agency Demo. Let’s Start the Theme Setup :
Watch this other tutorials on how to install and import Folie Theme :
When it comes to creating your own website, everyone should have their rules and priorities. There are no exact rules when it comes to a Creative Agency site, but there are some tips and points that you should keep in mind :
- What kind of business do you have
- Include the marketing content on your homepage
- Always include a portfolio to showcase your works
- Include a blog
We are creating this agency for a Graphic Designers studio. So you are a group of talented designers and want to showcase your works and offer services for the customers. You are creating a website for your creative business to help it grow.
So you should include :
- a Presentation of you,
- a Portfolio,
- a Blog to post your ideas and see what your customers have to say,
- the Services that you offer,
- how the customers can reach you (contact).
The Static Front Page
The first thing to do after Installing your Theme and Demo Data, is to assign the Front Page of the site and the Posts Page if you decide to integrate blog into it.
Watch this other tutorial for more detailed information :
Menus are the most important structure that will be shown to the customers. They can only see what you are offering and browse the sections of your website if all your content is well organized on the Menus. That’s why you should work on your menus since the beginning of your site.
To learn how to assign menus with Folie, please watch this other detailed tutorial :
- First create a new menu :
- A good menu is minimal and a presentation of what your site is offering, that means that in our case it should include :
These are the most important pages you should focus now. If you add other pages you can assign them later.
After creating your menu you are ready to customize the header. We are continuing with this part of the site because it it the ‘head’ of the entire site. The Codeless Builder contains 2 sections dedicated to the header.
- Header – that includes the general options for customizing the Logo, Custom Styles, Dropdown and Mobile Styles, Sticky, Top Header Row.
- Header Builder – in this section will be displayed the options of the elements that you include in the header (Social Menu, Menu, Logo, Tools, Button, Text)
- I am going for a simple header design and content, so i have chosen the fullwidth layout, without extra rows or borders.
- For the Logo i have chosen the Image Logo type and uploaded the dark and light version of it. The builder let’s you choose a logo also for the iPhone and iPad devices and select the height of it.
- I did some other color and font size adjustment about the header :
Is important to customize the site identity. Go to Theme Options > Site Identity and choose the site title, tagline and a favicon :
Adding Content – Homepage
Let’s start to add content to the homepage first. We should include here all the content that we are offering as a Designers Studio, but like a showcase.
- I am going to include a slider like the example demo, but i will choose a different video as a background. Go to the Containing Row > General Options and add your video here. On Design Options i will do some other adjustments and leave the slider like a simple showcase of what the agency is about.
- After the slider we will show our works with a portfolio. One thing you should keep in mind while adding content is that all the section should have the same design and match each other. You can also fix the general Styling options later anytime. For this website i have chosen a black and white theme with minimalist touch.
- Next we should let customers know what we offer by including Services.
- We should thank the Clients by including them on our homepage.
- It is better to show some posts at the homepage by including the Blog.
- The bottom line can be something to invite the customers to your site. Include a button and the add a link to direct them to a specific page, for example the Contact page.
- For the Footer i am only going to include the Social Icons in a simple widget. If you want add the copyright at Footer > Show Copyright and edit it on Widgets section. To edit the elements of the footer just click on the pen icon and the element settings will be displayed on the left sidebar. To style the footer and copyright go to General Options > Styling > Footer section.
Website General and Layout Options
Before adding other content to the pages i recommend to check out the site general options :
- Site Options – check the responsive layout, a nice scroll, select a favicon if you want, activate comments and even add a Back to Top button.
- Page Transitions – add or remove page transitions.
- Custom Codes – add Custom CSS, JS or HTML codes.
and layout options :
- All Pages Layout – i have chosen fullwidth layout.
- Site Container Width – Define site container width in pixel.
- Layout Modern – Switch if you want to make web layout with sidebar background color. You can change color on Styling.
- Inner Content Distance from Top and the Bottom .
- Distance between blog entries and portfolio entries.
Website Styling Options
The Styling options include everything about the site design. I recommend to style your site after you have completed the homepage to test with the different styling options. You will have a more fixed idea on yourself how the whole website and other pages will look.
These options include :
- General styling options from primary color to highlighted areas.
- Headings – the font style and color for all available headings in the theme.
- Blog – style all text available at the blog page.
- Portfolio – font styling
- Buttons – light and dark button styling.
- Widgets – customize widgets titles styles.
- Footer styling
- Copyright styling
Read a more detailed information about the styling options here.
Now you can continue to add content to the other pages and create new ones if you like.
Adding Content – Works
On this section you can showcase some of your best works on a portfolio or a media element. Keep the design simple for the attention to concentrate on the content :
Adding Content – About Us
Give a presentation of your agency including custom headings, team, some progress bar and a description :
Adding Content – Contact
Add a google map to show the agency location and other details on how the customers can contact you :
Now you are ready to add you own personalized content 🙂 .
We will also include some other video tutorials on our YouTube channel about the same topics, so stay tuned.