How to Create an Agency Homepage Using Kwik Theme (for Thrive Theme Builder)

creating a clean and modern looking homepage for your service-based business is a pretty quick task with quick our fast loading companion theme for thrive theme builder hi i'm christine with thrive themes if you haven't subscribed to our channel yet i invite you to do so and be sure to ring the bell to be notified when we publish new videos so when it comes to customizing the home page for your website that can seem like a pretty daunting task especially if you don't consider yourself to be a designer thankfully with the companion themes built right into thrive theme builder you can easily create a gorgeous home page that is completely customized to your brand and with the quick companion theme you can be confident that your home page is fast loading and optimized for speed so in this video i'll be taking you through the steps of setting up quick and customizing your home page so that it looks just as you want it to so let's start by installing quick if you already have thrive theme builder on your website then you can go to the thrive dashboard and then thrive theme builder then go to the themes tab and then click add theme in the upper right hand corner then click load from the thrive cloud here you'll find quick listed among the other companion themes and then click the download button now let's go to the quick option here and then click activate now if you're installing thrive theme builder for the first time then quick will already be available to you and you won't have to go and download anything you can simply select it during the setup process next let's go through the site wizard to select the layouts for our website so let's just click the get started button for your logo you can upload a dark logo for use on light backgrounds and you can upload a light logo for use on dark backgrounds to upload your logo simply click edit dark logo and then you can go to the upload files tab to upload your file i've already got one here so i'll select it and then i'll click select and then you can do the same for the light logo next let's choose a main brand color to change this color here simply click on the swatch and then you can choose a new color i'll choose this nice orange here and then click choose and continue next let's choose a design for our header let's click on the drop down in the upper right hand corner to view all of the layout options as you can see there are quite a lot now if you don't see the exact layout you want simply choose the one that's closest and you'll be able to make adjustments later so for now i'll choose this one next let's take a look at the footer templates this one looks pretty good now let's choose our home page design as you can see there are lots of designs to choose from now these designs were crafted to be fast loading and so you'll see fewer images and instead the design is going to rely on shapes and colors to create that clean modern look and if you look at the names here you'll see that they're geared toward certain types of business and that's to help you get your business website up and running quickly however you can absolutely choose any layout you wish regardless of the name and again if the layout isn't exactly what you're looking for you will be able to customize it later so for now i'll go ahead and choose this layout next let's choose a layout for our blog posts this one looks pretty good next let's choose the layout for our blog post list this is the page that will display all of our blog posts let's choose this one and now let's choose a layout for our regular pages so these are for things like your about page your contact page your privacy page etc this one looks pretty good so i'll select that one and now let's select menus to use in our header and footer so if you've already created menus for your header and footer in wordpress then you can specify them here now if you haven't created any menus yet you can actually create them in thrive theme builder later in which case you can simply click continue without choosing a menu but i've already created mine in wordpress so i'll click activate menus on my site alright so the wizard is complete let's move on to the next step next i'd like to show you where you can input information for your global fields which are things like your business address phone number social profiles and more so let's go to the thrive dashboard and then let's look for smart site and then let's click smart settings so here is where you can input your company information what's really nice about smart site global fields is that you can input your information once and it will automatically populate in all of the appropriate blocks and elements so for example your footer is a common place to put links to your social media profiles but you can also place your social media profiles on other parts of your site now if your link to your social media profile ever changes you can simply come here to the global fields and change it here once and then it will automatically reflect on all of the other parts of your site so under company here is where you can put in your company information under legal here's where you can input the links to your privacy policy disclaimer terms and conditions and contact pages now for these pages here i would recommend going to the pages tab in wordpress and creating the pages that you need first so that you can copy and paste the links in here so for example let's say you don't have a disclaimer page yet let's go to pages and click add new let's give this page a name i'll go ahead and publish it so that i can get the link so now let's copy this link and then back in smart site i'll simply go to the disclaimer field i'll click the pencil icon to edit it and then i'll paste the link in here and then click save and then you can go back and flesh out the rest of the disclaimer page at a later time and then for your social media links you'll need to get your link from the page or profile for each platform and then you can simply paste them in all right so now that the basic setup is done let's take a look at our home page and just like that our home page is already built so this is the header that i chose this is the main brand color that i chose this is indeed the home page layout that i chose and you'll notice that our company information is already populated here in the footer and that's because we took the time to fill out smart site global fields next let's take a quick look at the thrive beambuilder dashboard so let's go to thrive dashboard and let's go to thrive theme builder so up here at the top is our current theme which is quick we've already gone through the theme wizard now in the branding section here is where you can customize your brand colors logo and favicon you can also access the branding section by going to the branding tab on the left in the typography section is where you can customize the typography for your entire site and you can also access the typography by going to the typography tab so let's go ahead and take a quick peek so this is the current typography set that is active on your site let's go ahead and click the pencil icon to edit this typography set so here are all of the different typography elements that you can use on your website and this is also where you can make global changes that would affect the styling for your entire site to edit an individual element simply click on it and then use the options over here on the left you can also customize all of the headings at the same time by clicking on this middle green line here and then all of the headings will be highlighted and you can edit all of them at once using the options on the left you can also customize all of the paragraph elements at once by clicking on this middle green line here and then you can use the options on the left and you can customize all typography elements at the same time by clicking on the outermost green line and then you can change the font and color for all of the typography elements at the same time when you're finished making your customizations don't forget to save your work next let's customize the home page to access it you can go to manage templates from the thrive theme builder dashboard or you can go to the templates tab so here are all of the templates for your website so you have a home page you also have a default post template for regular blog posts if you have a podcast you have a default audio post template if you have a youtube channel there is a default video post template this is your default page template for things like your about page and your contact page you also have an error 404 template your default blog template is your blog roll page and your default archive template is for things like displaying all blog posts within a given category or displaying all blog posts by a particular author and if you're using woocommerce to sell physical products digital products or online courses then your woocommerce templates will appear here as well in this video we are going to focus specifically on customizing your home page so let's go to the active home page and let's click edit landing page so we are going to go through this entire page section by section and customize it for this demo let's pretend that we are creating a home page for a service based business such as a marketing agency now every business is different so there may be sections or blocks that you don't need in which case it is very easy to delete a section simply click inside of the section make sure that the right section is highlighted in the breadcrumbs and then use the trash can icon to delete that section now i'll go ahead and undo this because i actually do want to keep that section and you can easily move sections so again make sure that the correct section is highlighted in the breadcrumbs then use the cross hairs icon to click and drag it to where you want it so let's say i want to move it to here and let me scroll up a bit so that you can see that we did actually move it pretty far down the page all right so let me undo this if you feel like this page is missing a section that you need then you can always add blocks so for example let's say that i would like to add a block right here i can simply click the add block button or i can go to add elements and then i can click and drag the block into place so as you can see there are dozens of blocks that you can choose from let's say that i would like to add a block walking people through the steps of getting started if they want to hire my company so i'll go over here to the list on the left i'll go to steps and i'll choose this design and not only can you add blocks to your page you can also add individual elements so i'll go to the add element button and as you can see there are dozens of other elements that you can add to your page if needed for now i'm happy with my page as it is so let's just start customizing the finer details like the text images and icons first up is the header the header and footer are linked sections which means that they are used on other templates as well as on the home page so if you click the edit header button any changes you make will be reflected on other templates as well if you would like to use a completely different header just for your home page then you can click the change header button to choose a new header design just for the home page now i would like to use the same header for the entire site so i'll click edit header now you may have noticed that there is now an orange outline around this window that indicates that you are in a sub menu of sorts and so you're restricted to editing just the header for now so the main feature of the header is the menu i'll go ahead and click on one of the menu items and to display our menu we are using the custom menu element so let's go to the main options tab and let's take a look at the menu source if you have menus that you created in wordpress they will show up here if you would like to create your own menu in thrive theme builder then you can choose custom menu and then your menu items will be listed down here just to show you how these menu items work you can easily add menu items you can also delete items very easily and you can rearrange them by clicking on the dotted lines and dragging them around to edit the labels and links you can go to the pencil icon to edit it then you can enter in a label and to select a page to link to under target url you can simply start typing the title of the page and it should pop up and then click apply for a business such as a marketing agency you might have a services page a client's page and an about page now if you haven't created those pages yet i would recommend creating those first you don't have to completely flesh them out just create them so that they exist and so that you'll be able to specify the links in your menu if you would like to change the appearance of your menu that's very easy to do so let's say that i would like to change the text color i'll simply select one of the menu items i'll make sure that menu item is highlighted in the breadcrumbs and then over here on the left i'll go to the typography tab and under color i'll select a new color you'll notice that all of the menu items change to color as well and that is thanks to the grouping feature this saves you clicks when customizing groups of elements if by chance you need to customize one particular menu item by itself you can easily do that by selecting the menu item and when the lock icon here is green that indicates that the item is grouped to ungroup the item simply click on the lock icon and when it's red the item is ungrouped so now i can style this item independently from the rest now you can always regroup the item by clicking on the lock icon again and when it turns green then when you make further customizations this item will be part of that group now the custom menu element is pretty powerful so you can do things like add icons and images to your custom menu and we do have a video on that which we will link to once you're finished customizing your header click done to click out of the header and to continue on with the rest of the page alright so moving on to the next section we have some text here that needs to be customized everything is click to edit so you can simply click on a text element and start typing now for your main call to action try to think of something that's really attention getting that will resonate with your audience now for this button here let's create a jump link to the contact form down at the bottom of the page because a lot of times with a service based business people want an easy way to contact you with questions about the services you offer pricing scheduling etc so let's go back up here and let's select the button make sure that button is highlighted in the breadcrumbs let's take a quick look at animation in action to see if there's any links already established there is one here so let's just go ahead and delete it now let's go to the main options tab under button link let's go ahead and create a jump link i'll go ahead and enable smooth animation so that when someone clicks on the link the page will scroll nicely instead of doing a jarring jump and let's click select target so i'll scroll down here and i will select the background section for my form next we have the why work with us section in this paragraph here you can explain what your company does and in these three boxes you can explain the benefits that people will get by working with your particular company next we have these icons which we will need to change so to change an icon simply select it make sure that icon is highlighted in the breadcrumbs and then under the main options tab you can click change icon you can search for a particular icon by using the search field in the upper left corner lastly for this section we will need to link up these learn more buttons so ideally you will have already created the pages that these buttons link to if you haven't done that yet you can simply link these buttons up at a later time so i'm going to go ahead and click on this button i'll make sure that button is highlighted in the breadcrumbs then let's go to animation and action and there's already a link here in place so simply click the pencil icon to edit it and then if you start typing the name of the page it should pop up and i'll go ahead and link up the other buttons as well now if you don't need these buttons because you don't want to link to anything it's really easy to remove these buttons just click on the trash can icon alright so we are done with this section let's move on to the team section having a team section on your website is a good way to humanize your brand now if you don't have a team and you are a solopreneur then you can easily substitute this section for an about section featuring yourself so you can simply delete this section by clicking on the trash can icon and then you can add a block by clicking on the add block button and then let's view all of the about blocks and you can choose one of these blocks to add to your page but assuming that you do have a team in this section you'll definitely want to change out these images for photos of your own team members to do that click on the image gallery element make sure that it is highlighted in the breadcrumbs and then go to the main options tab and then click edit selection then click on the x's to remove the old images then click add gallery to add your own images so i'll select these and then click add to gallery and then click insert gallery now the image gallery has a lot of options so you can choose a gallery type and each gallery has its own set of options you can also edit the design of the gallery by going to edit design and then you will have to click on the gallery again and under main options you can choose an image style so for example let's go ahead and add a dark frame to all of these images and you can also play with the image effects so for example we can make all of these images grayscale when you're finished editing the design of your image gallery click done okay so moving on to the next section this is the what you'll get section this is a great place to mention the positive aspects of working with your company and what you offer that others don't so let's go ahead and customize this text here now the lower part of this section uses the styled list element if you would like to change these icons you can do that by simply clicking on the icon then going to the main options tab and click change icon as you may have noticed all of the icons changed which thanks to the grouping feature makes changing these icons a bit faster if you would like to change a particular list item icon so that it's different from all the others simply click on it and then click the lock icon to ungroup it and then you can go ahead and change the icon just for this particular list item to add or remove an item make sure that styled list is highlighted in the breadcrumbs then go to the main options tab and here is where you can easily add new items or delete them if necessary and so now let's go ahead and replace the template text with our own all right so we're done with this section let's move on to the next one so here we have the testimonials section testimonials are really helpful to build trust and also help your audience understand how they can benefit from your service now what we actually have here are two instances of the testimonial element so here is one instance and here is the second one and you can change the design of these testimonials if you like so i'll simply click inside of this testimonial i'll make sure that testimonial is highlighted in the breadcrumbs and then in the upper left hand corner go to the paint palette icon and now you can choose from any of these designs i'll go ahead and choose this one and then if you like you can do the same thing for this testimonial element as well and so now we can go ahead and change the text and the images to change an image simply click on it go to main options and then click replace image i'll select this one and then click insert into post alright so we are finished with our testimonials let's move on to the next section which is case studies so for a marketing agency business case studies are a great way to prove that your method or product works but if you don't have case studies you can also just use this section for blog posts so you can just change this text here to our most recent articles or something similar now these case study articles are displayed using the post list element so if i click anywhere inside of here you'll see that the post list element is highlighted in the breadcrumbs now the post list element has a lot of flexibility built right in so first if you would like to change the design of these posts then you can easily do that so let's click on the paint palette icon on the left here and now you can choose from any of these designs i'll go ahead and choose this one now even after you choose your design you can actually edit this design even further so you can go ahead and click the edit design button and now you can customize colors you can change borders shadows etc so for example let's say that i would like this button here to have rounded corners i'll simply click on it to select it then i'll go to the borders and corners tab and then i'll adjust the corner radius and as you can see the other buttons changed as well which thanks to the grouping feature saves you clicks when you're finished making design customizations click done now how exactly do you specify which case studies or blog posts are shown here you can do that by going to the post list tab and then click filter posts so here we are using the custom query tab and you can choose to display either posts or pages under filtering here is where you can specify which posts to display so for example let's say that we have blog posts in several different categories and we only want to display posts in the case study category so let's click add rule and then in this drop down here you can specify posts in a particular category posts with a specific tag posts with a specific format for example audio posts or video posts you can display posts by a specific author or you can use the title to choose individual posts for this one we're going to choose categories then to specify the exact category i'll click add and i'll choose my category under order here is where you can specify the order of the posts that are displayed so for now we are going to display them in the order of the date published and in descending order so that most recent posts are first and we want to display the three most recent posts now let's say that you have a more advanced layout and perhaps your most recent article is featured on the page separately and so you want this particular post list element to start with your second most recent article in that case you can opt to start from item number two and so it will skip your most recent article and go straight to your second most recent article all right so i'll switch this back to one and when you're finished making your specifications click save and close all right so let's move on to the next section so this is the section that i added to the home page earlier in this section let's say that we want to walk our audience through the process of what happens when they decide to hire us for a job so first let's customize this text and now we'll need to change the text and icon for each one of these tabs so to do that select one tab then go to edit tab items and then you can replace the template text for your own to change the icon simply click on the icon then go to the main options tab and click change icon when you're done with this tab click done and then you can move on to the next tab and then to begin your customizations click edit tab items and then use this same exact process to edit the rest of the tabs all right so i've gone through and customized each of these tabs now don't forget that a lot of blocks have options that are just for that specific block so for this one you can change the hover effect right now we are using brackets i'll go ahead and change that to underline alright so we have just one section left and that is the contact form so let's go ahead and change out this text here now if you would like to change the design of this contact form you can do that by clicking on the form make sure that form is highlighted in the breadcrumbs and then go to the paint palette icon in the upper left hand corner and now you can choose a new design if you like now i'm happy with the current design so i'll simply close this window if you would like to add a field to your form for example let's say you want to ask for their phone number in addition to their name and email under form fields you can click add new and then under field type you can click this drop down to see the available field types i'll click phone now for this particular design i know that i don't need anything in the name field but i will want something in the placeholder field and if you like you can go ahead and make this field required to rearrange the fields simply click on the dotted lines and drag them around so let's say that whenever someone submits this form we want to receive their message in our email inbox to set this up click add connection and then under connection choose email we do want to send emails from this site and let's go ahead and click compose email to customize the message so the most important field here is the to field so this is where you can specify your email address where you would like the message to be sent now if you would like to send a confirmation email to the user you can go ahead and enable that and then you can customize this message as well i'll go ahead and click save and apply now if you would also like to add the person who is sending the message to your email list you can do that as well so let's click add connection and then let's go to choose connection to see the available connections now in order for your email marketing service to be listed here you will need to have integrated your email service in the thrive dashboard so you would go to api connections then select the name of your email service and input your api key once you've done that then your email service will show up right here so i'll select my email service which is mailchimp if you have a particular list to add your subscriber to you can select it here if you have a particular group you can select that you can choose single or double opt-in i will choose single opt-in but if you choose double opt-in then you'll also need to make sure that your email service is properly set up for double opt-in and you can also add a tag which is helpful in identifying your subscribers and this tag will be sent to your email marketing service alright so now let's click apply next let's specify what happens when someone submits the form so you can either redirect to a custom url or you can show a success notification we'll choose to show a success notification and then you can go ahead and customize your success message all right so the very last thing we'll have to do is make sure that this page looks good on tablets and mobile devices so let's use the buttons at the bottom of the screen and let's take a look at tablet mode alright so this page is looking pretty good i don't anticipate needing to make any changes because the templates in quick are already mobile responsive out of the box and let's take a look at mobile phone mode okay so i am happy with this let's go ahead and save our work okay so i've gone through this home page and i've made all my customizations let's take a look at the final product [Music] all right so now that you've got your home page configured you can move on to customizing the rest of your website so i hope this was helpful if you have any questions about setting up your home page be sure to leave them in the comments down below you can get thrive theme builder and the rest of our tools when you purchase thrive suite so click the link below to learn more thanks so much for watching and we'll see you next time [Music] you

Channel: Thrive Themes

Views: 1,220

Keywords: thrive themes, thrive suite, thrive theme builder, kwik theme, kwik, mobile responsive website, mobile responsive, page speed optimization, how to build a homepage, website customization, best theme builder for wordpress, fast-loading wordpress theme, website template design, optimized for speed wordpress theme, customizable wordpress theme templates, core web vitals, pagespeed insights, conversion focused web design, how to use kwik theme to create a fast website, ttb, cro

Id: iskUzeg00mk

Length: 32min 13sec (1933 seconds)

Published: Thu Nov 25 2021