Thank you so much for choosing Amie 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.
2. Theme Installation
After you’ve installed WordPress on your hosting, download the archive with the purchased theme, unzip it and prepare amie.zip and child-amie.zip archives. Open your WordPress dashboard.
Go to Appearance > Themes and click on Add New.
Click on Choose File and select the amie.zip. Click Install Now.
You will see the success message ‘Theme has been installed successfully’, click on the Return to Themes page and do the same for child-amie.zip.
You will see your new Amie theme and child theme appear in the dashboard. Press the Activate button on your child-amie theme, you will work with the child-amie theme and do not activate your amie 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.
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.
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.
From your admin panel go to Amie > Demo Install.
You should choose the demo you want to import and use for your theme and click on the Import button.
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.
3. Theme Customization
In your admin panel hover on the home icon and select Visit Site.
On top on the page click on Customize and you will see Customization Panel.
In the Customization Panel you can find settings that will be applied to the entire theme.
Once you have applied any changes you have to click on the Publish button to apply those changes.
Go to Customize > General. Here you can upload your logo. We suggest uploading a dark and a light version of your logo. The size of our logo is 185px x 18px.
Go to Customize > General. In this section you can also upload a site icon that will appear in the browser tab.
3.4 Main Theme Colors
Go to Customize > Theme Style. In this section you can change main theme colors.
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.
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.
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.
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.
Default Blog Archive type has a featured post on top of the screen.
Sticky Blog Archive type has a sticky blog post on the right part of the screen.
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.
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.
The second option is masonry grid with one preview image and some details on top of the screen.
The third option is really unique portfolio gallery. Photos are opened one by one, it is like you are looking at the real photobook.
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.
Go to Customize > WooCommerce.
In this section you can set up things like: add a store message, product sorting, product images, checkout page.
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.
3.15 Additional CSS
Go to Customize > Additional CSS. In this section you can add CSS to apply some custom changes to your theme.
4. Popup Settings & Shortcodes
To find the shortcode of the popup go to the admin panel of your theme. From the left menu choose Contact > Contact Forms. You will see the list of your contact forms and you can copy the shortcode of each popup from this page.
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.
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.
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.
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.
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.
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.
After the changes are applied, click on the Update button on the top right corner of the screen to save and apply all changes.
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.
To edit an existing product, hover on its name and click on the Edit action link.
For each product you should add its name, description, price, you can also add product categories and tags.
Don’t forget to add product image and images to the product gallery, suggested image size is 1052 by 1400px.
All settings connected to payments, currency, etc. can be found in the WooCommerce > Settings.
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.
You can edit portfolio catalogue page in the Elementor editor: you can choose which categories to show as tabs on the page.
To add/edit portfolio categories, go to your admin panel and select Portfolio > Portfolio Category.
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.
Change title, categories, upload photos and features image.
We've also designed 3 different option for your Portfolio Details page, for more information pleasee see section '3.11 Portfolio Details Settings'.
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.
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.
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.
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.
Select the Style tab in the settings panel on the left of the screen and upload your image to the Choose Image section.
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.
To edit the Title click on the Content tab in the settings panel, edit the title and apply changes.
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.
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.
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.
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.
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.
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.
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.
To edit the Pricing page you have to find it in the pages list, hover on it and click on Edit with Elementor.
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.
To edit the Workshops Catalogue page you have to find it in the pages list, hover on it and click on Edit with Elementor.
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.
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.
To edit Workshop Details page, open the page and click on the Edit with Elementor on top of it.
To edit different blocks on the page, simply click on the Edit icon and make all needed changed in the left side panel.
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.
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.
9.6 Proofing Gallery
Proofing Gallery — is a functionality created specially for photogrpaphers. Here you can create public or password protected galleries to share with your clients. Clients will be able to download photos from the gallery you shared with them and will be aple to approve/reject specific pictures.
To create new proofing gallery ort edit existing, go to the Proofing Gallery in your admin panel. Here you will see that there are 2 password protected galleries and one public. You can edit them and create new galleries.
Click on the Edit under the gallery title, it will be opened in the edit mode. Here you can set gallery name, add clients names and add photos to the gallery. You can also add zip archive to download or provide a link (add it to the File URL input field) to other service from which photos will be downloaded.
You can set visibility to each proofing gallery by changing Post Visibility setting on the right side of the page.
For the password protected galleries do not forget to upload featured image.
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.
Go to the Admin panel > Instagram Feed > Settings. Click on the Connect an Instagram Account button.
Select account type you would like to connect and press Connect.
You will see a confirmation popup, click Allow.
Confirm the account you would like to link by clicking on Connect This Account.
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.
If your instagram looks differently, please go to Instagram Feed > Settings > Customize.
Scroll down and make sure that Enable Custom Templates checkbox is cheсked.
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]
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.
Click on Sign up for Mapbox. Fill in all required fields and press on the Get Started Button.
On your account screen click on Design in Mapbox Studio.
Click on the New Style button.
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.
Change default color to the one you need for your theme. We suggest using this color: #F5E1D3
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.
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:
You will see a map with location point on it, click on the point. See the screenshot below for reference:
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:
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:
Next step is to copy the link to the tileset you've just created, click on the icon shown below:
Go back to your map, select Layers tab and click on the plus icon Add New Layer.
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.
If you cannot see the dot on the map, click on the Go to Data button on the bottom right corner of the screen:
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:
Select tab Style and click on the Manage icons in your spritesheet.
Download the icon we designed specially for this theme here and upload it to your map.
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.
Your map is ready! Click on the Style on top left corner of your screen.
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.
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.
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
13. Multilingual Settings
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.