1. Support

Thank you so much for choosing Palette WordPress Theme. We have put a lot of effort and love creating it. In this documentation, we have tried to consider all the important details to run your website successfully. In case you have any questions left, please feel free to submit a support ticket here.

Your feedback on our theme is much appreciated. We would love to make our product even better, so please feel free to get in touch with any suggestions for improvement. Thanks again for your support. We value you!

If you like our work, please rate it. If you are going to rate it with less than 5 stars, please let us know the reason first and we will do our best to improve the theme.

0

2. Theme Installation

After you’ve installed WordPress on your hosting, download the archive with the purchased theme, unzip it and prepare palette.zip and child-palette.zip archives. Open your WordPress dashboard.

Go to Appearance > Themes and click on Add New.

2

Click on Choose File and select the palette.zip. Click Install Now.

3

You will see the success message ‘Theme has been installed successfully’, click on the Return to Themes page and do the same for child-palette.zip.

4 5

You will see your new palette theme and child theme appear in the dashboard. Press the Activate button on your child-palette theme, you will work with the child-palette theme and do not activate your palette theme.

After activation you will be redirected to the ‘Welcome’ page of the theme. Now you need to install all the plugins used in the theme: click on the Install Theme Plugin button.

7

Select all plugins in the list, choose Select from the dropdown menu and click on the Apply button. Installation process will begin, it might take a couple of minutes, please wait until it's finished.

8

Once the installation process is finished, you will see a success message ‘All plugins installed and activated successfully’. Click on the Return to the Dashboard action link.

9

From your admin panel go to palette > Demo Install.

10

You should choose the demo you want to import and use for your theme and click on the Import button.

11 12

Demo import can take up to 10 minutes, please wait until it's finished. You will see the success message after the demo is installed successfully.

On the top bar, hover on the ‘home’ icon and select ‘Visit site’ you will see that the demo has been installed.

The detailed documentation is provided for the Multipurpose Demo as it's the most complex demo with a lot of features and funtionality. For the specific instructions on how to set up your Personal Demo, please see the section 14. Personal Demo. For the specific instructions on how to set up your Studio Demo, please see the section 15. Studio Demo.

3. Theme Customization

In your admin panel hover on the home icon and select Visit Site.

18

On top on the page click on Customize and you will see Customization Panel.

19

In the Customization Panel you can find settings that will be applied to the entire theme.

20

Once you have applied any changes you have to click on the Publish button to apply those changes.

21

3.2 Favicon

Go to Customize > General. In this section you can also upload a site icon that will appear in the browser tab.

23

3.3 Button Style

Go to Customize > Button Style. You can change button colors and button text colors in this section.

24 25

3.4 Main Theme Colors

Go to Customize > Theme Style. In this section you can change main theme colors.

26 27

3.5 Typography

Go to Customize > Typography. In this section you can change fonts and their settings: size, line height, letter spacing, align. From the Font Family dropdown you can select any Google font you like.

28

3.6 Social Media

Go to Customize > Social Icons. In this section you can change social media icons that appear in the header and footer and set links to your accounts. To add more social media icons, simply click on the Add New Social.

29

3.7 Global Theme Icons

Go to Customize > Global Icons. In this section you can change global theme icons, such as: shopping cart icons and icon from the successful order page.

30

3.8 Header Types

Go to Customize > Header Type. In this section you can change the header of your theme. Just select the option you like more.

31

3.10 Blog Catalogue Types

Go to Customize > Blog Archive Type. In this section you can choose the Blog Catalogue page layout. There are two different types, just pick the one you like more.

35

Default Blog Archive type has a featured post on top of the screen.

34

Sticky Blog Archive type has a sticky blog post on the right part of the screen.

33

Typical Blog Archive type — it's just a standard list of the posts. For this type of the Blog Catalogue page we suggest uploading horizontal preview images.

3.11 Portfolio Details Settings

Go to Customize > Portfolio Settings. In this section you can choose portfolio categories that will be shown on the portfolio catalogue page.

36

In this section you can also choose the layout for your portfolio details page. There are 3 different options here. The first option is a page with masonry grid and beautiful chaotic layout for the preview images on top of the page.

37

The second option is masonry grid with one preview image and some details on top of the screen.

38

The third option is really unique portfolio gallery. Photos are opened one by one, it is like you are looking at the real photobook.

39

3.12 Second Header: Button Settings

Go to Customize > Header Settings > Second Header. In this section you can apply settings for the button on the second header type. You can change the button text and add a custom link to the Button simple link field that will be opened once the button is clicked.

There is also an option to open popup on the button click. You will need to leave the Button simple link field blank and to fill in: Popup title, Popup description if needed and Popup Shortcode. Where to find popup shortcodes, please see ‘Popup Setting & Shortcodes’ in the documentation.

40

3.13 Menu Settings

Go to Customize > Menus. In this section you set all menu items you want to appear in the header and footer of your theme.

In the Footer Menu you can select menu items you want to appear in the footer.

And in the Header Menu you can select menu items you want to appear in the header.

41

To change menu items in the header you have to select Menus > Header Menu. You will see the list of pages that are displayed in the header menu of your theme.

42

To change the label of the menu item or to remove it from the header you have to click on the label, e.g. Service Menu. To change Navigation Label, simply type in a new name in the field. And to remove the menu item click on the Remove action link.

43

To reorder menu items you can drag menu items and drop in the location you want it to appear in the header.

To add other pages to the menu, you need to click on the Add Item at the bottom of the list. You will see another panel on the right. Under Pages label there are all the pages you can add to the menu and they will appear in the header of your theme.

44

Click on the page name and it will be added to the left panel and appear in the header of your theme.

3.14 WooCommerce

Go to Customize > WooCommerce.

In this section you can set up things like: add a store message, product sorting, product images, checkout page.

46

Go to your admin panel and select WooCommerce > Settings. In this section you can set up your online store: select/change currency, select payment methods and delivery methods, etc.

47

3.15 Additional CSS

Go to Customize > Additional CSS. In this section you can add CSS to apply some custom changes to your theme.

48

5. Popup Settings & Shortcodes

Each page that can be edited using Elementor page builder can be animated. You can choose animation for each block of the page. Open the page in the Elementor Editr. Let's take as an example our Home page.

127

Hover on the block of the page you would like to animate and click on the Edit icon. In the left side panel select Advanced tab and expand Timeless Animation. You can select animation effect from the Animation dropdown and add delay in the corresponding field. We use SlipeUpIn, SlideDownIn and FadeIn effects. We think these effects looks great with our theme.

128

6. Posts

Go to your admin panel and click on Posts > All Posts. Here you will see the list of all blog posts. To add a new post simply click on the Add New button on top of the screen.

50

You can choose from 3 types of the Blog Catalogue page, you can find detailed information in the ‘3.10 Blog Catalogue Types’ section of this documentation.

To set up a Sticky post or any other blog post, hover on its name and click on the Edit action link.

51

For each post you will need to upload a preview image, it will appear on the blog catalogue page. Suggested size of the image is 526px * 700px.

52

For the sticky post you will also need to add an image that will appear on top of the catalogue page or on the right side of the catalogue page. Suggested image size is 1110px*1110px.

53

After the changes are applied, click on the Update button on the top right corner of the screen to save and apply all changes.

7. Products

Go to your admin panel and click on Products > All Products. Here you will see the list of all products available in the theme shop. To add a new product simply click on the Products > Add New.

54

To edit an existing product, hover on its name and click on the Edit action link.

55

For each product you should add its name, description, price, you can also add product categories and tags.

56

Don’t forget to add product image and images to the product gallery, suggested image size is 1052 by 1400px.

57

All settings connected to payments, currency, etc. can be found in the WooCommerce > Settings.

8. Portfolio

Our main demo has 3 options for your Portfolio Catalogue page. You can review all of them in our main demo by hovering on the Portfolio menu item.

Portfolio Default

84

Portfolio Masonry

85

Portfolio Sticky

86

You can edit portfolio catalogue page in the Elementor editor: you can choose which categories to show as tabs on the page.

87

To add/edit portfolio categories, go to your admin panel and select Portfolio > Portfolio Category.

88

To edit Portfolio Details go to your admin panel and select Portfolio > Portfolio, you will see the list of all existing portfolio details pages. To edit the page, click on the Edit action and portfolio Details page will be opened in edit mode.

89

Change title, categories, upload photos and features image.

90

We've also designed 3 different option for your Portfolio Details page, for more information pleasee see section '3.11 Portfolio Details Settings'.

9. Pages

Go to your admin panel and click on Pages > All Pages. Here you will see the list of all pages in your theme. To add a new page simply click on the Pages > Add New.

58

To edit an existing page hover on its name and click on the Edit action link. The majority of the pages are created using Elementor page builder. For such pages you should select Edit with Elementor option.

59

If you don't need some of the pages at the moment but may use later, simply changes page's status to Draft and publish it back when needed.

60

9.1 Homepage

To edit the homepage you have to find it in the pages list, hover on it and click on Edit with Elementor. To change the hero image, click on the Edit icon on the top right corner of your screen.

61

Select the Style tab in the settings panel on the left of the screen and upload your image to the Choose Image section.

62

Click on the Select Files button and upload your image. Click on the Insert Media at the bottom of your screen.

After uploading the image or making any other changes, don’t forget to click on the Update button to save the changes.

63

To edit the Title click on the Content tab in the settings panel, edit the title and apply changes.

64

To edit the About Me section, hover on the block and click on the Edit icon. You will be able to edit all the content in the left side panel.

65

To edit the Learn More link, expand the Widget Link block in the left side panel. You will see all the setting you can apply/change for your link. You can hide it, change its copy and add a custom link or a link to other page of your website. If you want to add a link to an existing page, select the name of the page in the Page Link dropdown and select Page Link in the Usage dropdown. In case if you want to add a custom link to a different website, leave Page Link dropdown blank, add your link to the Custom Link input and select Custom Link in the Usage dropdown. By clicking on the settings icon near the Link inut you can select/deselect 'open in new window' setting.

66

To edit any other section on the page, click on the Edit icon on the left of the section and make changes in the left side panel. Click on the Update button on the bottom of the screen to save the changes.

67

Almost each button in the theme has a variety of settings:

  • You can change the text on the button.
  • There is an option to show a Boxzilla popup which will be opened on a button click. In this case you need to add a shortcode to the input field Boxzilla ID.
  • You can select a specific page in the Page Link section and it will be opened on a button click.

In case if you added a custom link, click on the settings icon on the right of the input field and uncheck the checkbox near Open in New Window. In case if you want to open the link in a new tab, skip this step.

Once you’ve decided what option to show on the button click, you need to select the corresponding option in the Usage section.

68

9.2 Tips

To edit the Tips Wedding/Travel pages you have to find it in the pages list, hover on it and click on Edit with Elementor.

69

To change the Welcome section, click on the Edit icon on the left of the block. And edit all the content in the left side panel. Animated element in the demo — it's an animated image, just upload yours and it will be animated as in the demo.

70

All other blocks on the page can be edited the same way, just by clicking on the edit icon and changing the content in the left side panel.

9.3 Pricing

To edit the Pricing page you have to find it in the pages list, hover on it and click on Edit with Elementor.

71

In order to edit any section on the page click on the Edt icon on the top right corner of the page. On the left side panel you will be able to edit all needed information. You can add as many pricing blocks as needed, simply click on the Add Item button in the left side panel. The Book Now action link has a global setting, you can set it up by expanding Link Settings block and all changes will be applies on all links on the page.

72

9.4 Workshops

To edit the Workshops Catalogue page you have to find it in the pages list, hover on it and click on Edit with Elementor.

73

You can switch between classic 4 column grid and masonry grid, click on the Edt icon on the top right corner of the page. On the left side panel you will be able to swith to the masonry grid. You can can also choose which categories to show as tabs on the page.

74

To add/edit workshop categories, go to the admin panel, click on the Workshop > Workshop Category. Here you can add new categories or edit existing ones.

75

To edit Workshop Details page, open the page and click on the Edit with Elementor on top of it.

76

To edit different blocks on the page, simply click on the Edit icon and make all needed changed in the left side panel.

77

9.5 Contact

To edit the Contact page you have to find it in the pages list, hover on it and click on Edit with Elementor. There are 2 Contact pages and you can select any of them for your theme: one option with a map and another just with a contact form.

Contact pages are created using Elementor page builder, so all the blocks are editable as usual.

To add your own map from mapbox to the page, click on the Edit icon on the top right corner of the screen, select Style tab. You have to provide an Access token and Mapbox Style link. For more information about mapbox, how to add a marker on the map and where to find Access token and Mapbox Style link, please see section ‘12. Map’ of this documentation.

78

Contact form is created using Contact Form 7 plugin, to change the contact form you have to provide a different shortcode or edit existing form. For more information about Contact Form 7 please read '13. Contact Form 7' section of this documentation.

79

10. Button Settings

Almost each button in the theme has a variety of settings:

  • You can change the text on the button.
  • There is an option to show a Boxzilla popup which will be opened on a button click. In this case you need to add a shortcode to the input field Boxzilla ID.
  • You can select a specific page in the Page Link section and the selected page will be opened on a button click.
  • Another option is to show one of two default popups on a button click. Add popup image, title, description and popup shortcode. Please see the section 10. Popup Settings & Shortcodes for more info about shortcodes.
82

In case if you’ve added a custom link, click on the settings icon on the right of the input field and check or uncheck the checkbox near Open in New Window.

Once you’ve decided what option to show on the button click, you need to select the corresponding option in the Usage section.

83

11. Instagram Feed Plugin

First of all, you have to install the Instagram Feed plugin. The author is Smash Balloon. You do not need a Pro Account to use our layouts for instagram, everything should work just out of the box. If you have followed our instructions on how to install the theme, all the plugins including this one should have been already installed and activated.

In a separate tab open instagram.com and log in to the account you would like to link.

91

Go to the Admin panel > Instagram Feed > Settings. Click on the Connect an Instagram Account button.

92

Select account type you would like to connect and press Connect.

93

You will see a confirmation popup, click Allow.

94

Confirm the account you would like to link by clicking on Connect This Account.

95

You will see a success message ‘Successfully connected’ and username of the account you’ve just connected to your theme. To save these settings click on the Save Changes. All done, go check the homepage and instagram section on it.

96

If your instagram looks differently, please go to Instagram Feed > Settings > Customize.

97

Scroll down and make sure that Enable Custom Templates checkbox is cheсked.

98

And also make sure that the correct shortcode is set on the homepage. Open your homepage in the Elementor editor, scroll down to the Instagram section and Click on the Edit icon. Make sure that in the left side panel there is a correct shortcode.

7 photos layout [instagram-feed showbutton=false showheader=false num=7 showfollow=false imageres=true]

10 photos layout [instagram-feed showbutton=false showheader=false num=10 showfollow=false imageres=true1]

99

12. Map

We care about our clients and use Mapbox maps in our theme because we think it is the best solution on the market for small and medium businesses. It is very easy to customize and mapbox provides a meaningful free tier. Websites with monthly loads up to 50,000 will be able to use mapbox for free unlike Google Maps which are significantly more expensive.

To start setting up your maps you will need to create an account on https://www.mapbox.com/. Open the link and click on Sign Up.

100

Click on Sign up for Mapbox. Fill in all required fields and press on the Get Started Button.

101

On your account screen click on Design in Mapbox Studio.

102

Click on the New Style button.

103

In the popup choose: Monochrome style and click on Customize Monochrome button. You will see a map and on the left of the screen there is a setting panel. On the bottom of this panel there is a tab Colors and a colored rectangle, click on it to change the main color of your map.

104

Change default color to the one you need for your theme. We suggest using this color: #F5E1D3

105

After a new color scheme has been applied you will need to add marker(s) on your map. Please follow the tutorial on youtube created by mapbox team.

Instead of the marker icon used in the tutorial, we suggest using the icon we designed specially for this theme. Please download it here.

In case if you find it difficult to create a geojason file and follow further instructions on video tutorial, we tried to make it even simplier. Download geojason file here. Open it in any text editor, you will see that it contains geographical data: longitude and latitude. You need to edit those coordinates: paste coordinates of the location you need to see on the map. First number in the file stands for longitude, the second one — for latitude. You can quickly find geographic coordinates on Google map by right click on the pin. Here is how the geojason file looks like on text editor.

106

Now you have geojason file with your location coordinates, your map opened in browser. Next step is to open in a new tab mapbox datasets https://studio.mapbox.com/datasets. Click on the button New Dataset, choose Upload tab and drag and drop here your geojason file. Click on Confirm, Create and then on Start Editing button. Please see screenshots for reference:

107 108 109 110

You will see a map with location point on it, click on the point. See the screenshot below for reference:

111

Select tab Geojason and you will see a code with geographic coordinates: longitude and latitude, the pin with those coordinates will be shown on your map. Please see screenshot for the reference:

112

Click on the Save button on top right corner of the screen (only in case youve changed something). Then you need to export your dataset into a tileset, click on the Export button. Please see screenshot for the reference:

113

Next step is to copy the link to the tileset you've just created, click on the icon shown below:

114

Go back to your map, select Layers tab and click on the plus icon Add New Layer.

115

Click on the None Selected under the Source title, paste in the search field link you've copied and you will see the dataset you've just created, click on it.

116

If you cannot see the dot on the map, click on the Go to Data button on the bottom right corner of the screen:

117

Now we'll add the location icon to your point on the map. Select type Symbol, to do that choose option shown on the screenshot:

118

Select tab Style and click on the Manage icons in your spritesheet.

119

Download the icon we designed specially for this theme here and upload it to your map.

120

Enter the name of the icon in the search field and select the icon by clicking on it. After this you'll see your icon on the map. Click on the Publish button on the top right corner of the screen.

121

Your map is ready! Click on the Style on top left corner of your screen.

122

To add the map you’ve just created to the Contact page you will need map Style URL and Access Token. Click on the Share icon near your map.

123

You will see a popup where you can find Style URL and Access token. Paste these links to the corresponding fields in the Elementor builder for Contact page. That's it! You are done, check your map on the Contact page.

124 125

13. Contact Form 7

For the detailed information about the Contact Form 7 plugin, please read the official guide here.

To view all existing Contact forms and copy their shortcodes, go to your admin panel and choose Contact > Contact Forms

126

14. Personal Demo

In this section you can find some spesific instructions on how to set up your Personal Demo. Personal demo was designed as a minimalist website for creative profetionals to showcase their works, provide brief information about them and contact details. Thats it. The goal here was to make the website as simple as possible to easily maintain it.

14.1 Personal Demo: Homepage

Click on the Edit with Elementor. Here you can upload your background image and image for the animated call-to-action. For more information on how to set up your CTA, plese got to the section 10. Button Settings of this documentation.

129 130

14.2 Personal Demo: Navigation

Click on the Customize and select Menus > Mobile Menu.

131 132

Here you can set up your menu: add, delete menu items that appear in your side menu panel.

133

To change information that appears at the bottom of youe side menu panel, go to Customize > Header Settings > Third Header.

134

For more information on how to change the logo, please go to the section 3.10 Logo.

14.3 Personal Demo: About

The are two options for the About page. Both of them can be edited with the Elementor: open the page you want to edit and click on the Edit with Elementor.

135

Click on the edit icon and change the content in the left side panel.

136

14.4 Personal Demo: Contact

Open the page and click on the Edit with Elementor.

137

Click on the edit icon and change the content in the left side panel.

138

14.5 Personal Demo: Portfolio

To add/edit portfolio galleries, go to your admin panel and select Portfolio. Here you will see all galleries that already exsist and will be able to add new one. To set up your portfolio grid, you will need gallery ID which also can be found on this page.

139

You can change or add gallery name, upload photos to the gallery and upload featured image.

140

To set up your portfolio grid, open Portfolio page and click on the Edit with Elementor.

141

The grid consist of blocks, each block has 3 portfolio galleries. To edit the block, hover on it and click on the Edit icon. Each block consist of the main gallery (the big one) and two other galleries. To change the main gallery, replace gallery ID in the Post ID input, Main section. You also have to upload post image, it will appear as a preview photo.

142

To change two other galleries, expand Other section and replace galleries IDs. Preview image for these galleries should be uploaded through the admin panel.

143

You can add as many gallery blocks as you like by duplicationg them on the page.

15. Studio Demo

In this section you can find some spesific instructions on how to set up your Studio Demo. Personal demo was designed as a minimalist website for creative studios to showcase their works, provide brief information about them and contact details. The goal here was to make beautiful website that is easy to maintain.

15.1 Studio Demo: Homepage

Click on the Edit with Elementor. Right click on the hero image, click on the Edit Hero Header. Here, in the left sidebar you can upload your background image and change the title.

144 145

To manage galleries that appear on your homepage in the next section, click on the Edit icon. In the left sidebar you weill be able to choose which portfolio categories to display.

146

To create/edit/delete portfolio categories, got to your admin panel and click on the Portfolio > Portfolio Category. Here you can add new categories, edit existing or delete them.

147 148

To edit sections with photographers and videographers, click on the Edit. In the left sidebar you can select which portfolio authors to display and add photo for each author.

149

To add/edit portfolio authors (in our theme we call them photographers and videographers), go to your admin panel and click on the Custom Fields > Field Groups > Portfolio Authors.

150

Enter your authors names (one per line) to the input field Choices.

151

To set up the action link 'Let's work together', click on the Edit icon and apply changes needed. For more information on how to set up buttons and links, please see the section 10. Button Settings.

152

15.2 Studio Demo: Navigation

Click on the Customize and select Menus > Header Menu.

153 154

Here you can change page link that appears on the left of your header. In our theme, it's Contact page.

155

To change menu items in your harmburget menu, go to Customize > Menus > Mobile Menu. Here you can add/edit menu items in your side panel menu.

156

To change information that appears at the bottom of your side panel menu, go to Customize > Header Settings > Third Header.

158

15.4 Studio Demo: About

Open the About page and click on the Edit with Elementor.

160

Right click on the hero image, select Edit Hero Header and the content in the left side panel. Title can be changed in the Content tab and background image — in the Style tab.

161

All other sections on the page can be edited in the same way, just click on the edit icon on the right of each block and make changes in the left side panel.

162

15.5 Studio Demo: Contact

Open the page and click on the Edit with Elementor.

163

Hero block is edited in the same way as described in the section 15.4 Studio Demo: About. To edit all other blocks on the page, simply click on the Edit button and make changes in the left sidepanel.

164

For more information about the map setup, go to the section 12. Map .

15.6 Studio Demo: Photographers, Videographers, Categories

All these pages are edited in a similar way. Let's take the page Photographers as an example. To edit it, open the page, click on Edit with Elementor. The page will be opened in the Elementor editor, right click on the hero image, choose Edit Portfolio page Archive and make changed in the left side panel.

165

To choose which portfolio authors or categories to show on the page, expand Staff section in the left side panel and select authors/categories you want to display.

166

15.7 Studio Demo: Portfolio Details

There are two options for the portfolio details page you can choose from. You can check them out in our demo: Portfolio Details v1 and Portfolio Details v2. To choose portfolio details page for your website, go to the Customizer, select Customize > Portfolio Settings. Here you can switch between option Three and Four.

167 168

To edit existing portfolio galleries or do add new one, open your admin panel and select portfolio > Portfolio. Here you will see the list of all existing portfolio galleries and can edit, delete existing and add new one.

169

For each gallery you have to add it's title, author, categorie, featured image and gallery images. In case if it's a video gallery, do not add gallery images. Just add a link to the video in the corresponding field.

170 171

15.7 Studio Demo: Portfolio Authors

We've added 'portfolio author' feature for the studio demo. You can assign author to each portfolio gallery. To add/edit portfolio authors (in our theme we call them photographers and videographers), go to your admin panel and click on the Custom Fields > Field Groups > Portfolio Authors

150

Enter your authors names (one per line) to the input field Choices.

151

Authors will be added to the list and you will be able to select author form this list on each portfolio details page.

171

16. Multilingual Settings

We suggest using WMPL or Polylang

17. WordPress

Since WordPress is constantly being updated information about how to install WordPress may become out of date, so you can always read the official guide here.

Here you can find some useful links about the WordPress:

WordPress Codex – general info about WordPress and how to install it on your server.

First Steps With WordPress – general information that covers a wide variety of topics.

FAQ New To WordPress – the most popular FAQ’s regarding WordPress.

18. GDPR

We suggest using Complianz – GDPR/CCPA Cookie Consent plugin. Complianz is a GDPR/CCPA Cookie Consent plugin that supports GDPR, DSGVO, CCPA and PIPEDA with a conditional Cookie Notice and customized Cookie Policy based on the results of the built-in Cookie Scan.