Sections & Elements

Yes, Folio allows for you to integrate your contact form with ShootQ.

1. No. There is no other way to get it back but to redo it by going through Add Section.

   

1. Please note that this only applies if you are on an upgraded plan. On the Main page, scroll down to the bottom of the page and click on the gear settings located on the lower right corner to bring up the Footer Setting that will appear on the upper left hand side of the screen.

   

2. Under the Footer Settings, select None to remove the footer mentioning “Folio Websites”.

   

1. Go to the main menu, click on the Pages and Menus.

   

2. Click on Add Page.

   

3. After that the Select Page window will pop up on your screen. Click Link.

   

4. Under Pages, in the Display Name textbox, put in the Display Name and URL and hit SAVE CHANGES down at the bottom.

   

1. Scroll all the way down and hover the footer section.

   

2. Hover on the social media and click on it to bring up the EDIT SOCIAL MEDIA window.

   

3. Select from the list of the social media you want to be displayed by the footer.

   

4. Click on the double arrow icon to Browse Footer Style. Each click will display different kinds of style on your social media icon.

   

1. On the header menu, click on Contact.

   

2. Hover anywhere on the body of the email section and then click to bring up the contact form.

   

3. Click on the pen icon to bring up the EDIT CONTACT window.

   

4. In the Email Recipient field, put in your email address. Then hit the blue X button to close the window.

   

1. Go to the main screen then hover on the Header and click on the gear icon/settings. You will notice that the HEADER SETTING will appear on the left hand side of the screen.

   

2. Click on image.

   

3. Then click on UPLOAD to browse image as your background.

   

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.

   

A slider is utilize for adding a photo slideshow into a web page. With FolioWebsites, you can add a slider for photos and album. Please take a look below to see how to add a slider to your web page.

1. Go to Add Section and click on Slider icon.

   

2. Choose slider and then select which slider you want on your web page.

   

3. When you select “photo”, a list of all albums will pop-up on the right hand side of your screen.

   

4. Click on the album title and select one or more photo to display to your slider and go to another album and select another photo.

   

5. When you select “album”, a list of all albums will pop-up on the right hand side of your screen. This time, you will select one or more album you want to display to your slider.

   

A separator is commonly used to visually separate sections on a web page. With Foliowebsites, you can either put a space or add a line separator to enhance the look of your web page. Take a look below to see how to add a separator to your web page.

1. Go to Add Section and click on the “separator” icon

   

2. Choose and then select the separator you like to add on your web page. (space or line)

   

1. When you want to add a Title on your page, click on Add Section icon and select Column.

   

2. Select a Column and click on your choice.

   

3. A Column will be added on the page. Click on the Column custom section to bring up the elements.

   

4. Click on Title.

   

5. Type in your title and click on the formatting toolbar to customize.

   

1. To add Video on your page, click on Add Section icon and select Column.

   

2. Select a Column and click on your choice.

   

3. A Column will be added on the page. Click on the Column custom section to bring up the elements.

   

4. Select and click on Video.

   

5. Click on the link and paste the URL of the video you want to show on the page.

   

1. To add a photo on your page, click on Add Section icon and select Column.

   

2. Select a Column and click on your choice.

   

3. A Column will be added on the page. Click on the Column custom section to bring up the elements.

   

4. Select and click on Photo.

   

5. Click on the upload here and choose from the photos you have saved on your computer.

   

1. To add a Button link on your page, click on Add Section icon and select Column.

   

2. Select a Column and click on your choice.

   

3. A Column will be added on the page. Click on the Column custom section to bring up the elements.

   

4. Select and click on Button.

   

5. You can rename the button itself, browse button style and choose alignment. You can edit the link with a website URL.

   

6. You can also edit the button with a page on your site. Click on the page set as the link.

   

7. You can upload file (jpeg,gif,png) for the button to view images.

   

8. Lastly, you can also add a button link for email.

   

1. To add a Paragraph on your page, click on Add Section icon and select Column.

   

2. Select a Column and click on your choice.

   

3. A Column will be added on the page. Click on the Column custom section to bring up the elements.

   

4. Click on Paragraph.

   

1. To add a Form element on your page, click on Add Section and select Columns. Then select a column layout.

   

2. On the new column, click Add Element button. Click Form.

   

3. Click Form to bring up the dark toolbar. Click the pencil icon and start adding or removing fields. You can also change the order of the field by dragging the fields.

   

4. Finally, click on the gear icon to view the Form Settings. On the sidebar, click General and set the Form Recipients. email to ensure you’ll receive the responses. Click Save Changes.

   

1. To add a Map on your page, click on Add Section icon and select Column.

   

2. Select a Column and click on your choice.

   

3. A Column will be added on the page. Click on the Column custom section to bring up the elements.

   

4. Click on map.

   

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.

To duplicate a Text section:

To duplicate an image/photo section:

To duplicate a video section:

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.

   

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 About.

   

2. Choose the layout you prefer for your About 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. Let’s add a sample gallery to our photographer’s About Page. To do this, click on the ADD SECTION button – the “+” icon inside a blue circle – at the bottom right-hand corner. Choose Slider, then Photo.

   

5. Once the Photo Slider section appears, click on the Select Photos button, depicted by a camera icon, on the section tab. Select which of the existing images on your website builder you would like to feature in your gallery.

   

6. You can change the layout of any of your sections by clicking on the Browse [Section] Style button to the right of the section tab. In this case, let’s explore a few of the different layouts available for your Slider.

   

7. Your gallery is now ready to go! Notice now that there is no space between the Photo Slider column and the Custom 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.

   

8. If you wish, you can also rearrange the order of the sections on the page. You can do this by dragging the section from either the dotted icon or the name of the section. Both can be found on the leftmost end of the section.

   

9. Now let’s add a video to the About Page. Create another column by clicking on ADD SECTION and choosing Columns. It’s always a good idea to keep your page dynamic by adding variety in the designs of the different sections. This time, let’s choose the One-Third option for our new column.

   

10. Let’s add a text description on the left column by adding a Paragraph element, and link a video on the right column by adding a Video element.

    

11. Click on Link Video and copy-paste your video’s URL into the given text box. You are able to adjust the size of the video by dragging the Video Size scale below the link.

    

12. Continue to customize and build on your About Page by exploring the different sections and elements available to you.

    

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. Click on the paragraph you want to modify. The toolbar will then appear with different options to choose from.

   

2. Highlight the whole paragraph or areas and choose the certain property you want to modify.

   

3. Such as the font, size, line-height, and other options.

   

4. To add or attach a link, highlight the word or sentence and click the link icon.

   

5. To return to its default or original format just click the clear formatting icon beside the unlink icon.

   

6. All changes are automatically saved.

1. Log in to your FolioWebsites account. Inside the builder, click Theme on the left sidebar.

   

2. Click the drop-down button to show the options for Title, Paragraph, and Link.

   

3. Click the color picker to change the color of your text.

   

4. To change the font, click the drop-down button opposite the word font.

   

5. To change the text size and the line height, just drag the slider or enter the size you want.

   

6. Don’t forget to click Save Changes after any adjustments.

   

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.

   

To add a new page

1. Go to Pages and Menus then click the Add page button.

   

2. Select the Blank Page. You can select a specific layout with a customized gallery section or add your own.

   

3. To add your own gallery section, click , select gallery and then album.

   

4. To add an album, click the camera icon on the toolbar and click the + Album.

   

5. To add photos in your album simply click the upload icon. You can add as many albums as you want.

   

6. After adding all your albums, you can then choose the gallery style by clicking the double arrow symbol.

   

7. Once done, toggle Publish this Page and click the Save Changes button.

   

1. Click the settings icon on the toolbar to show the slider settings on the left sidebar.

   

2. You can toggle Thumbnail to show the viewer a glimpse or preview of photos in that specific gallery.

   

3. Toggle Title to show the title of the photos.

   

   Toggle Description to show the captions you have for each photo.

   

4. Toggle Date to show the date a photo was added or taken.

   

5. Toggle Button to remove or add a black overlay to the button on your album.

   

6. Toggle Pagination to show the number of photos in your gallery.

   

7. The pop-up title and description can be toggled if you choose to show the title and description of each photo once viewed. *There is no option to preview these 2 setting options on the builder. You can view the settings on the live website. Below is an actual image of when these 2 options are enabled and once a user views the photos.

   

1. Please take note that paid forms are only available on paid plans. You need first to connect Folio to your Stripe account. To learn how to connect your Stripe account, click here How to connect your account with Stripe?

2. To add a paid form, add or select an existing form.

   

3. Once the form is selected, click Edit Form icon and select Add Field. Please note that enable pricing is only available on radio, checkbox and dropdown fields.

   

4. Select your desired field. You can edit or add more options and click the enable pricing and add amount. You can also enable quantity to set the max quantity.

   

5. Once done, click save button to save your changes. Click the globe icon on the main sidebar to view your live site with your new form with pricing.