Website Customization & Details

For legal reasons with music royalty licensing, we don’t include music on our websites. FolioWebsites is not responsible for any issues that may arise regarding the addition of music to your website.

Currently, our websites do not include a shopping cart. However, this is something that we are looking to add to Folio in the near future. More information coming soon!

Yes. You can upload your logo and a custom background pattern or color, change the colors of the menu and page titles, or install any of the hundreds of available free WordPress plugins. Also, because our websites are built on the WordPress platform, the possibilities of customizing your informational pages are endless. And yes, you can definitely upload your own images to your new website. Click Examples on menu see what a few of our clients have done with their FolioWebsites theme.

Yes. You can change the font on the website & blog, we highly recommend using default browsers fonts for menu items. FolioWebsites are a little different than flash-based websites in that the browser is actually “rendering” the font, so we highly recommend using browser compatible fonts (which there are several options in both san serif and serif fonts). The major advantage to the browser rendering the font is that the browser can actually read the text (which helps tremendously with SEO). The disadvantage is that its not a “movie” playing in the window so you can’t “hide” the font from the browser.

Our websites can accommodate a wide range of image sizes (750px x 500px, 800px x 533px, 960px x 640px, 1140px x 760px).

As many as your little heart desires! Our websites allow for as many galleries and/or text sections as you need to promote your business.

1. To edit the format of your website, click on the edit menus appearing on the left side of your site builder, and click Theme menu.

   Make adjustments on the options and click the save button.

   

Columns defines one of two or more vertical sections of a web page. Websites often view content in multiple columns (like a newspaper). With FolioWebsites, when you put in a column on your web page, you can customize and add in a title, paragraph, photo, map, contact form, button, space and line. Take a look below to see how to add a column to your web page.

1. Go to Add Section and click on the columns icon.

   

2. Select the number of columns you would like to add.

   

3. Choose what you would like to add in your new column section.

   

Google Analytics is used to keep track of the traffic and usage of your website.

1. If you don’t have a Google Universal Analytics account set up for your site yet, you can do so quite easily. From Google Analytics ,sign in with your Google (Gmail) account (or sign up for one).

   

2. Create New Account.

   

3. If you don’t have a Google Universal Analytics account set up for your site yet, you can do so quite easily. From Google Analytics ,sign in with your Google (Gmail) account (or sign up for one).

   

4. Once you are signed in, go to Admin tab down at bottom left corner.

   Click on Property Settings.

   

5. Look under Basic Settings for your Tracking ID.

   

6. Log in to your Foliowebsites account at https://foliowebsites.com/app/login#/.

   Go to Main menu and click on Settings. Go down to Google Tracking ID and put in your tracking ID.

   

1. Hover over your selected section and click on the Settings button in the upper right-hand corner.

   

2. Under HEADER SETTINGS, drag the Top Spacing and Bottom Spacing scales until you reach the spacing you desire.

   

3. Alternatively, you can directly type in the numerical amount of spacing you desire.

   

Click on your selected element and click on the Duplicate button the two overlapping squares icon.

1. Click on your selected element and click on the Duplicate button the two overlapping squares icon.

2. To duplicate a Text section:

   

3. To duplicate an image/photo section:

   

4. To duplicate a video section:

   

Hover over your selected section and click on the Swap Columns button.

1. Hover over your selected section and click on the Swap Columns button.

   

2. Click and hold onto the column you wish to move.

   

3. You are able to relocate the column into the areas bordered with blue lines.

   

4. Drop the column onto your chosen area.

   

On the main menu, click on Pages and Menus.

1. On the main menu, click on Pages and Menus.

   

2. Click on the Add Page button near the top left-hand corner.

   

3. Click on Services.

   

4. Choose the layout you prefer for your Pricing Page.

   

5. Click on a text box within a section and type in a description of your service.

   

6. Once you’ve finished your description, click on the Add Element button on the rightmost side of the section tab - depicted by the icon of a plus sign inside a blue square.

   

7. Choose the column containing your service description.

   

8. Add a Button.

   

9. You may customize the Button text to fit the action that you want it to take.

   

10. You can link an existing Contact page from your Folio website to lead clients or customers to you. Do this by clicking Select from Pages and typing in the page name. You can repeat this process for your other services on the page.

    

11. You are able to change the page name to Pricing.

    

1. Hover over your selected section and click on the Duplicate button.

   

2. The duplicated section will appear directly below the original one.

   

1. Hover over the logo you wish to resize.

   

2. Hover over the resize button, depicted by the icon of two white arrows inside a blue circle.

   

3. This will bring up the current size of the logo.

   

4. Click and drag the resize button as needed.

   

1. Hover over the image or photo you wish to resize.

   

2. Hover over the resize button, depicted by the icon of two white arrows inside a blue circle.

   

3. This will bring up the current size of the image or photo.

   

4. Click and drag the resize button as needed.

   

1. Start by clicking on Pages & Menus under the main menu, and click on ADD PAGE. Choose Blank.

   
   
   

2. Choose the layout you prefer for your Photo Gallery Page.

   

3. Click on the ADD SECTION button – the + icon inside a blue circle – at the bottom right-hand corner.

   

4. Choose Gallery.

   

5. From there, click on Photo.

   

6. Select the photos you would like to be included in your gallery.

   
   

7. You can change the layout of your gallery by clicking on the Browse Gallery Style button to the right of the section tab.

   
   
   

8. You are able to change the page name to Photo Gallery.

   

1. On your sidebar, click on the Pages.

   

2. Then go to your page that has a form element.

   

3. Click on your Form and hit the gear icon.

   

4. On Form Settings, click Advanced and Turn on the Google reCAPTCHA switch and then click Save Changes.

   If you have a “I’m not a robot checkbox” settings a checkbox will display both in the builder and live site. If you have Invisible reCAPTCHA you will have the reCAPTCHA badge on the live site.

1. Start by clicking on Pages & Menus under the main menu, and click on ADD PAGE. Choose Portfolio.

   
   
   

2. Choose the layout you prefer for your Portfolio Page.

   

3. Under the Album Gallery Section, click on Select Album – the camera icon – and start creating your portfolio by creating new albums, and adding images to each album. You can then choose one of the images to serve as an album cover.

   
   

4. To see your new Portfolio in action, see the Pages menu and toggle Publish this Page and Show on Menu, and check Header. Click on Save Changes.

   

5. On your live site, click on an album – in this case, FEATURED CLIENTS, to browse its collection of images.

   

1. Start by clicking on Pages & Menus under the main menu, and click on ADD PAGE. Choose Services.

   

2. Choose the layout you prefer for your Services Page.

   

3. Start by adding a Header to your Services Page. To do this, click on the ADD SECTION button – the + icon inside a blue circle – at the bottom right-hand corner. Choose Columns, then One.

   

4. Click on the new column, and choose Title.

   

5. For this example, we’ll type What We Do into the Title column and customize the text to your liking by making use of the toolbar above it.

   

6. Add a description of your services below the Title. Do this by clicking on the Add Element button on the rightmost side of the section tab – depicted by the icon of a plus sign inside a blue square – and choose Paragraph.

   

7. Add your description to the new Paragraph and customize the text to your liking by making use of the toolbar above it.

   

8. The Services Page includes a Custom Section, which you can redesign by adding or deleting elements and columns, or rearranging or resizing existing columns.

   In this case, let’s customize our photographer’s page by showing off their different services. Let’s design it by displaying two services per section, and creating duplicates of the section as we add more services.

   Start by creating two Photo columns in the existing Custom Section. For each column, add a Separator element (in this case, a Space) under the Photo Element, a Text element (in this case, a Title) under the Separator element, and another Separator element under the Text element. For efficiency, you can duplicate elements in one column and drag them into the other. Once this is done, duplicate the Custom Section.

   

9. You can now edit the columns by adding the respective names and images for each of your services.

   

10. Prospective customers or clients will want more information on your services, and so the next step is to add links which will redirect visitors to a dedicated page for each service. Click on the element, then Link, and choose the appropriate link type. In this case, let’s choose Page On My Website, from which you’ll click on Select From Pages and choose the page you want the link to redirect to. Repeat for each service.

    

11. If you have other pages – outside of your new Services Page – containing useful resources regarding your services, you can provide links to them as well. An example is through creating buttons. Click on ADD SECTION, create one or more columns, and, once you click on a column, choose Button. You can duplicate and drag new buttons from this one for however many additional links you intend to include in your Services Page. Align, rename, and add the appropriate links to each button.

    

12. Once you’re done designing your Services Page, publish it by referring to the menu and clicking on Page Settings – depicted by the gear icon to the right of the page name. Turn the toggle on to Publish This Page and to Show On Menu. Make sure to click on Header under Select Menu to make sure this page shows up on your menu. Click on Save Changes.

    

1. Start by clicking on Pages & Menus under the main menu, and click on ADD PAGE. Choose Contact.

   

2. Choose the layout you prefer for your Contact Page.

   

3. Start designing your page to your liking. Make use of columns to be able to add images, videos, text descriptions, and more. Select the Element you want for the individual columns as you go about customizing the page.

   

4. You can customize the Contact Form by clicking first on the form, then the Edit button, depicted by the icon of a pencil inside a circle. You can change the recipient of the contact information by typing an email address in the Email Recipient text box. After that, select any of the available options you’d like to include on your Contact Form, and they will automatically appear. If your website is registered for Google reCAPTCHA, you can toggle it at the bottom of the EDIT CONTACT box.

   

5. You can change the layout of your Contact Form by clicking on the Browse Form Style button to the right of the section tab.

   

6. You can do the same for maps.

   

7. You can edit your map’s location by clicking on the Edit button and typing in either the name of the location, or – for a higher chance of accuracy – the exact address.

   

8. You can adjust the size of your section by dragging the blue icon at the bottom of the section.

   

9. It’s a good idea to add contact information for you or your company. You have the freedom of customizing this section however it suits you. Here is an example for Folio, made using two Column sections. To start, click on the ADD SECTION button – the “+” icon inside a blue circle – at the bottom right-hand corner. Choose Columns, then One.

   

10. Click on the new column, and choose Title.

    

11. In this case, we’ll type Offices into the Title column. Create a new section below it and choose a One-Third Column. For the left column, choose Paragraph and type in addresses and contact information. For the larger, right column, choose Map and type in your location on Edit Map.

    

12. Notice now that there is no space between the Title column and the Map column above it. To add space, click on the ADD SECTION button again and choose Separator. You can choose either Space or Line. You can adjust the amount of separation between sections by dragging the blue icon at the bottom of the Separator Section.

    

1. Start by clicking on Pages & Menus under the main menu, and click on ADD PAGE. Choose Blank.

   

2. Choose the layout you prefer for your Team Page.

   

3. Start by adding a Header to your Team Page. To do this, click on the Add Element button – the + icon inside a blue square – to the right of the section tab. Choose Title.

   

4. For this example, we’ll type Who Are We? into the Title column and customize the text to your liking by making use of the toolbar above it.

   

5. Add a description of your team below the Title. Do this by clicking on the Add Element button. Choose Paragraph.

   

6. Add your description to the new Paragraph and customize the text to your liking by making use of the toolbar above it.

   

7. Put a Separator below your header to create distinction between sections. Do this by clicking on the ADD SECTION button – the + icon inside a blue circle – in the bottom right-hand corner of the page, then Separator. You can choose either a Space or a Line Separator.

   

8. You can resize the Separator – and any other section – by dragging the blue icon at the bottom of the section.

   

9. We can now begin adding the names and photos of team members to the page. Start by creating a Three Column section (or however many team members you want to display per row) below the Line Separator.

   

10. Add a Photo element to each column and upload the photos you wish to represent each team member.

    

11. Add a Paragraph element below the Photo element. For efficiency, you can duplicate elements in one column and drag them into the other. In the Paragraph element, type in the team member’s name and position in your group or company. Customize the text to your liking by making use of the toolbar above it.

    

12. In designing your team profiles, you can add a Separator between the Photo and Paragraph elements. Adjust the size of the Separator to your liking, then duplicate it to your other columns.

    

13. Once you have finished designing your first row of team members, duplicate the Custom Section. All you have to do now is change the photos and titles in each column of the duplicated section. Repeat this step as many times as you need for your particular Team Page.

    

14. If you wish, you can add links to each profile to redirect visitors to dedicated pages for each of your team members. Click on the element, then Link, and choose the appropriate link type. In this case, let’s choose Page On My Website, from which you’ll click on Select From Pages and choose the page you want the link to redirect to. Repeat for each team member.

    

15. Retitle your Page Name, URL, and Title in the menu to the left of the page.

    

16. Once you’re done designing your Team Page, publish it by toggling Publish This Page, Show On Menu, and clicking on Header under Select Menu. Click on Save Changes.

    

1. Start by clicking on Pages & Menus under the main menu, and click on ADD PAGE. Choose Blank.

   

2. Choose the layout you prefer for your Testimonial Page.

   

3. Start by adding a Header to your Testimonial Page. To do this, click on the Add Element button – the + icon inside a blue square – to the right of the section tab. Choose Title.

   

4. Type Testimonials into the Title column and customize the text to your liking by making use of the toolbar above it.

   

5. Add a description of your testimonials below the Title. Do this by clicking on the Add Element button. Choose Paragraph.

   

6. Add your description to the new Paragraph and customize the text to your liking by making use of the toolbar above it.

   

7. Put a Separator below your header to create distinction between sections. Do this by clicking on the ADD SECTION button – the + icon inside a blue circle – in the bottom right-hand corner of the page, then Separator. You can choose either a Space or a Line Separator.

   

8. You can resize the Separator – and any other section – by dragging the blue icon at the bottom of the section.

   

9. We can now begin adding the names and photos of clients or customers to the page. You have multiple options in designing these sections. In this first example, start by creating a Three Column section (or however many testimonials you want to display per row) below the Line Separator.

   

10. Add a Photo element to each column and upload the photos you wish to represent each client or customer.

    

11. Add a Title element below the Photo element, a Line Separator below that, and a Paragraph element below that. For efficiency, you can duplicate elements in one column and drag them into the other. In the Title element, type in the client’s or customer’s name and occupation (and/or their location, if you wish). In the Paragraph element, type in the client’s or customer’s testimonial, and bookend the testimonial with quotes. Customize the text to your liking by making use of the toolbar above it.

    

12. If applicable to your particular Testimonial Page, you can link each testimonial to dedicated pages detailing how respective clients or customers benefited from your service/s. Do this by adding another Paragraph element below the quoted testimonial. Click on the element and select Insert/Edit Link on the toolbar. Type in or copy-paste the URL of the page you want this text to link to, and type in Read Their Story – or something similar – in Text to Display. Title the link if you wish, and choose whether you want the linked page to load on the same page or in a new tab. Change the font color to distinguish the link from the text above it. Once you’re done, duplicate this element to your other columns and edit the URLs accordingly.

    

13. Once you have finished designing your first row of testimonials, duplicate the Custom Section. All you have to do now is change the photos, titles, and links in each column of the duplicated section. Repeat this step as many times as you need for your particular Testimonial Page.

    

14. Another way to design your Testimonial Page is by having one testimonial per row, with the client’s or customer’s photo beside their title and testimonial, instead of having the photo above the description. Choose this type of layout for your Testimonial Page if you want to highlight individual clients or customers, as this layout allows you to add larger photos and text for each testimonial.

    To do this, click on the ADD SECTION button and choose a One-Third column. The left column will contain the client’s or customer’s photo, and the right will contain their title and testimonial – which you can format similarly to the first layout option. The primary difference with this layout, as mentioned, is that you can include a larger photo, as well as larger text. Once you’re done, duplicate this section as many times as you have testimonials and edit each element accordingly. Add Separator elements between each section.

    

15. Retitle your Page Name, URL, and Title in the menu to the left of the page.

    

16. Once you’re done designing your Testimonial Page, publish it by toggling Publish This Page, Show On Menu, and clicking on Header under Select Menu. Click on Save Changes.

    

1. Start by clicking on Pages & Menus under the main menu, and click on ADD PAGE. Choose Blank.

   

2. Choose the layout you prefer for your FAQ Page.

   

3. Start by adding a Header to your FAQ Page. To do this, click on the pre-existing empty column and choose Title.

   

4. Type Frequently Asked Questions into the Title column and customize the text to your liking by making use of the toolbar above it.

   

5. You can now begin adding in questions and answers in different sections. Start by clicking on the ADD SECTION button – the + icon inside a blue circle – in the bottom right-hand corner of the page. Choose Columns, then One.

   

6. Type in your first question. Customize the text to your liking by making use of the toolbar above it.

   

7. Make your question sections distinct by adding background color to them. Do this by clicking on Settings – depicted by the gear icon – on the section tab. Turn the Background toggle on and click on Background Color. Experiment with different colors until you find the one you prefer for your question sections.

   

8. Create a new One Column section under the question and choose Paragraph.

   

9. Add the answer to the above question to the new Paragraph and customize the text to your liking by making use of the toolbar above it.

   

10. You can create space between each section by clicking on the Add Element button – the + icon inside a blue square – to the right of the section tab. Choose Space.

    

11. You can resize the Space element by dragging the blue icon at the bottom of the element.

    

12. Quickly add another Space element under the text. Duplicate the current Space element by clicking on the overlapping squares icon. Move the duplicated Space element under the text by dragging the icon of three dots to the very left of the element toolbar. Enlarge the new Space element to create greater separation between each FAQ.

    

13. You’ve now finished your first FAQ. Quickly create another by duplicating both the question and answer sections. All you have to do now is change the text in the column of each duplicated section. Repeat this step as many times as you have FAQs.

    

14. Retitle your Page Name, URL, and Title in the menu to the left of the page.

    

15. Once you’re done designing your FAQ Page, publish it by turning the toggle on to Publish This Page and to Show On Menu. Make sure to click on Header under Select Menu to make sure this page shows up on your menu. Click on Save Changes.

    

1. Hover over the section of your choice and click on Settings – depicted by the gear icon – to the right of the section tab.

   

2. Head to GALLERY SETTINGS on the left-hand side, scroll down, and hit the toggle for Background Image. Drag-and-drop an image, or click on Upload Image to choose your background image.

   

3. Click on any part of the image in the GALLERY SETTINGS menu to serve as its focus point.

   

4. You can change the Scaling of your image to Fit, Fill, or Tile.

   

5. You can add a Color Overlay to your background image. Select the color of your choice, and adjust its transparency by adjusting the tiled scale.

   

1. Sign up for your FolioWebsite using an existing email. Choose a subdomain for your account.

   

2. After successfully registering, select any theme of your choice.

   

3. Before adding your sections and elements, you can configure the Theme settings, such as the Title, Paragraph, Images and so on.

   

4. Don’t forget to click the Save Changes button.

   

5. Start adding sections by clicking the add button on the right-hand corner of the page.

   

6. Simply click the add button on the section toolbar to start adding your desired elements such as images, paragraph, video, etc to its designated column.

   

7. Once satisfied with the outcome, click the live view icon to see your first created web page with the Folio builder.

   

1. On your photo gallery or slider, click the camera icon to show the existing albums on your website.

   

2. Click Add Album on the right hand corner.

   

3. You can also add photos by clicking the upload icon.

   

   Please remember that deleting an album can only be done on the album manager page.

1. On the Header toolbar, click the settings icon.

   

2. The Header Settings will then appear on the left sidebar, toggle or enable the

   Background and the Background Image to show the Edit link beside the toggle icon.

   

3. Click the Edit link to upload your background images for the different platforms.

   

4. You can either drag and drop the image from your folder or click Browse.

   

5. Once uploaded, you can change the scale of your image, adjust the focus point and color overlays.

   

1. To add Google reCAPTCHA to your form, register for reCAPTCHA service by going to this link and clicking the Admin Console button.

   

2. Register a new site. Fill in site Label, click reCAPTCHA v2. Select the invisible reCAPTCHA option.

   

3. Fill in the domain and accept the reCAPTCHA Terms of Service and click Submit.

   

4. Once submitted Google will generate site key and secret key. Make note of both keys. The site key is a public key while the secret key is the private key.

   

5. Log in to your Folio account, go to Settings on the main menu. Hover and click Advanced and find Google reCAPTCHA and select invisible reCAPTCHA option. Enter the site key and secret key and hit enter. Please note that, “I’m not a robot” checkbox keys doesn’t work with invisible reCAPTCHA option and vice versa.

   Google reCAPTCHA helps secure your contact form and protects your website from spam and abuse. Click here to learn how to add or enable Google reCAPTCHA on your form.

1. To add Google reCAPTCHA to your form, register for reCAPTCHA service by going to this link and clicking the Admin Console button.

   

2. Register a new site. Fill in site Label, click reCAPTCHA v2. By default, the "I'm not a robot" checkbox option is selected.

   

3. Fill in the domain and accept the reCAPTCHA Terms of Service and click Submit.

   

4. Once submitted Google will generate site key and secret key. Make note of both keys. The site key is a public key while the secret key is the private key.

   

5. Log in to your Folio account, go to Settings on the main menu. Hover and click Advanced and find Google reCAPTCHA and select “I’m not a robot” checkbox option. Enter the site key and secret key and hit enter. Please note that, “I’m not a robot” checkbox keys doesn’t work with invisible reCAPTCHA option and vice versa.

   Google reCAPTCHA helps secure your contact form and protects your website from spam and abuse. Click here to learn how to add or enable Google reCAPTCHA on your form.

1. To add Google reCAPTCHA to your form, register for reCAPTCHA service by going to this link and clicking the Admin Console button.

   

2. Register a new site. Fill in site Label, click reCAPTCHA v3. Please note that v3 reCAPTCHA is only an invisible recaptcha.

   

3. Fill in the domain and accept the reCAPTCHA Terms of Service and click Submit.

   

4. Once submitted Google will generate site key and secret key. Make note of both keys. The site key is a public key while the secret key is the private key.

   

5. Log in to your Folio account, go to Settings on the main menu. Hover and click Advanced and find Google reCAPTCHA and select invisible reCAPTCHA. option. Enter the site key and secret key and hit enter. Please note that, v3 reCAPTCHA keys will only work with invisible badge option.

   Google reCAPTCHA helps secure your contact form and protects your website from spam and abuse. Click here to learn how to add or enable Google reCAPTCHA on your form.