… · this theme comes with our dummy/demo content which can be imported directly on your website...
TRANSCRIPT
![Page 1: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/1.jpg)
www.cocobasic.com
https://cocobasic.ticksy.com/
![Page 2: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/2.jpg)
Theme Manual
Anotte - WordPress Theme
ver 1.2
![Page 3: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/3.jpg)
Index
How To Install? 4
Import Content 5
Creating Menu 7
Sidebar (Menu) Widget 8
Theme Customization 9
Content Editing 12
Home (Carousel Set Up) 13
Case 1 - Latest Portfolio Item 14
Case 2 - Custom Carousel 15
Case 3 - Carousel as Gallery 16
About 18
Contact Page 19
Add/Edit Portfolio Item 21
Add/Edit Posts 22
Shortcodes 25
Plugins 26
Source & Credits 27
Questions 30
![Page 4: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/4.jpg)
Thank You :) Thanks for purchasing our theme. We really appreciate your support
and trust in us. We worked hard to make Anotte WP theme easy to edit
as much as possible. Hopefully, you will enjoy using it.
Have fun!
How To Install? Once you have the zip archive ready, you need to go to your dashboard,
which is www.yourwebsite.com/wp-admin and go to Appearance >
Themes > Install Themes and, in the top menu, select Upload. Now,
select the zip archive and just install it normally.
*Note - Theme is placed in “Anotte WP - THEME” folder and you need
to upload zip file from that folder (zip file called anotte-wp.zip)
Also, there is a Child theme available placed in same folder (zip file
called anotte-wp-child.zip)
After installing the theme, you will get alert of required plugins
CocoBasic - Anotte WP and Contact Form 7. You need to install and to
activate it.
![Page 5: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/5.jpg)
Import Content
This theme comes with our dummy/demo content which can be
imported directly on your website to achieve the same look as our
demo. To import our content go to your WordPress admin page
dashboard and select Tools > Import and then choose WordPress
option.
Here is a small video tutorial how to install and import demo content.
https://www.youtube.com/watch?v=XXWcbTfxr0o
Demo Content is placed in “Anotte WP - DEMO CONTENT” folder.
![Page 6: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/6.jpg)
After you have imported dummy/demo content go to Dashboard >
Settings > Reading and set Front page displays: “A static page” and
select Home for Front page. For Posts page select Blog.
![Page 7: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/7.jpg)
Creating Menu
In order to create menu, go to Appearance > Menus. You can see on
the image below example how menu can looks like.
* Don’t forget to check “Main Menu”.
![Page 8: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/8.jpg)
Sidebar (Menu) Widget *Note - on our demo we don’t use menu widget To set/edit widgets in footer go to: Appearance > Widgets Here is how it looks widgets area.
![Page 9: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/9.jpg)
Theme Customization To open customizer click on Dashboard > Appearance > Customize
Site Title, Tagline and Site Icon Customizing
![Page 10: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/10.jpg)
Menu text and Search in menu
[menu_text title="HELLO"]Welcome to our online art journey. You can read our <a
href="https://cocobasic.com">thoughts</a> or you can simply <a href="https://cocobasic.com">write to
us</a>[/menu_text]
[br][br]
[social href="#"]TW.[/social][social href="#"]FB.[/social][social href="#"]IN.[/social][social
href="#"]BE.[/social]
![Page 11: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/11.jpg)
Images Settings
Colors Section
![Page 12: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/12.jpg)
Content Editing To edit Page, just open a page that you want to edit and replace the
existing content with your own (text, images, videos).
After importing demo content, you will have pages like this:
Now, for each page we will explain just some part of code which is
specific for it:
![Page 13: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/13.jpg)
Home (Carousel Set Up)
This is main page (it is set to be Front Page) and shows latest Portfolio
Items in Carousel. There are 3 different ways (Case 1, Case 2 and Case
3) how you can set up the Carousel and you will find instructions
below.
Important for this page is to set:
Page Attributes > Template > Carousel
![Page 14: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/14.jpg)
Case 1 - Latest Portfolio Item:
On this page you will find code like this:
[carousel_slider portfolio="true" show="5"]
[carousel_slide type="text" title="Art of the Camera" des="PHOTOGRAPHY"]
Courage of our questions ship of the imagination across the centuries, the only home we've ever known
descended from astronomers ship of the imagination intelligent beings.
[/carousel_slide]
[/carousel_slider]
In “translation” this code is - show latest 5 portfolio items (if there are
more, add “Load More” on end) but before that, add one slide with
custom text on start (“Art of the Camera”).
Important - “Load More” button is available just in this case when
carousel is showing latest portfolio items.
Live demo:
http://demo.cocobasic.com/anotte-wp/
![Page 15: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/15.jpg)
Case 2 - Custom Carousel:
There is a option to create a custom carousel, with custom images,
links, titles (not to use latest Portfolio items) and code for that will look
like this:
[carousel_slider]
[carousel_slide type="text" title="Photo Session" des="WORK DAY"]
But as I have said, a day came when I began to cease from noting the glories and the charms which the moon
and the sun and the twilight wrought upon the river’s face another day.
[/carousel_slide]
[carousel_slide type="image" link="#"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2017/04/blog_img_04.jpg" title="Coffee time"]
[carousel_slide type="image" link="#"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/06/image_11.jpg" title="Good Day"]
[carousel_slide type="image" link="#"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2017/04/blog_img_02.jpg" title="Old Photo"]
[/carousel_slider]
Here we have 4 slides:
- 1st slide is a text “Photo Session”
- 2 - 4 are images slides
Live demo:
http://demo.cocobasic.com/anotte-wp/portfolio/the-dawn/
![Page 16: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/16.jpg)
Case 3 - Carousel as Gallery:
There is a option to create a Carousel as Gallery (and also there is a
option to create a Black&White and Inverse Black&White gallery).
[carousel_slider]
[carousel_slide type="text" title="Natural Look" des="PHOTO SESSSION"]
Courage of our questions ship of the imagination across the centuries, the only home we've ever known
descended from astronomers ship of the imagination intelligent beings.
[/carousel_slide]
[carousel_slide type="gallery"]
[gallery_item title="Graphic Design"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/07/image_30.jpg"]
[gallery_item title="Love Addict"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/07/image_31.jpg"]
[gallery_item title="Plate Mockup"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/07/image_32.jpg"]
[gallery_item title="Above Clouds"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/07/image_38.jpg"]
[gallery_item title="My Perfume"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/07/image_39.jpg"]
[gallery_item title="Sneakers"
img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/07/image_41.jpg"]
[/carousel_slide]
[/carousel_slider]
Live demo:
http://demo.cocobasic.com/anotte-wp/gallery/
![Page 17: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/17.jpg)
For Black&White gallery, use the same code as above, just add class
“black-white” on carousel item with type gallery.
[carousel_slide type="gallery" class="black-white"]
Live demo:
http://demo.cocobasic.com/anotte-wp/gallery-bw/
And for Inverse Black&White, the same logic, use the class
“inverse-black-white”:
[carousel_slide type="gallery" class="inverse-black-white"]
Live demo:
http://demo.cocobasic.com/anotte-wp/gallery-inverse-bw/
![Page 18: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/18.jpg)
About Page Important for this page is to set:
Page Attributes > Template > Split
Below the editor you will see the “Page Preference” part where you can
set up the split image (big image on half of screen):
![Page 19: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/19.jpg)
Contact Page
On this page you will find shortcode for contact form. It is shortcode
from Contact Form 7 plugin which looks like this:
[contact-form-7 id="151" title="Contact form 1"]
To set your contact form you need to open
Dashboard>Contact>Contact Forms and to edit the contact form.
Or demo code for contact form looks like this:
![Page 20: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/20.jpg)
Code for contact form:
<p>[text* your-name placeholder "Name"]</p>
<p>[email* your-email placeholder "Email"]</p>
<p>[text your-subject placeholder "Subject"]</p>
<p>[textarea your-message placeholder "Message..."]</p>
<p class="contact-submit-holder">[submit "SEND"]</p>
![Page 21: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/21.jpg)
Add/Edit Portfolio Item To Add a new Portfolio Item you need to open
Dashboard > Portfolio > Add New
Enter a Title and after that you need to set “Featured Image” and
“Portfolio Category” for the item.
After you have set the image, you need to add item content.
![Page 22: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/22.jpg)
Add/Edit Posts
To edit post, open Dashboard > Posts and select some post to edit.
Below the editor, there is “Post Preference” section where you can do
some more customisation. This section looks like this:
As you see, there is “Blog Featured Image” field where you can set the
image which will be used on “Blog” page. If you don’t set this image, on
“Blog” page will be default “Featured Image” (if you set it):
![Page 23: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/23.jpg)
At the end, there is “Post Header Content” - here you can set image
slider, video iframe (YT or Vimeo), sound cloud iframe, etc…
Here are some examples:
- Slider:
[image_slider name="slider2" auto="true" speed="2000"]
[image_slide img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/06/image_45.jpg"]
[image_slide img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/06/image_46.jpg"]
[image_slide img="http://demo.cocobasic.com/anotte-wp/wp-content/uploads/2018/06/image_43.jpg"]
[/image_slider]
![Page 24: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/24.jpg)
- Youtube
<iframe width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" allowfullscreen></iframe>
- Vimeo
<iframe src="https://player.vimeo.com/video/150685211?color=ffffff" width="640" height="360"
allowfullscreen></iframe>
- SoundCloud
<iframe height="450"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/184006547&auto_play=false&hi
de_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
![Page 25: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/25.jpg)
Shortcodes
This theme has shortcodes. When you install theme plugin named
“CocoBasic - Anotte WP”, you will be able to use shortcodes used in
this theme. After installation and activation the plugin, open page/post
and you will see new icon in the editor. After click on it pop up window
with shortcodes list will appear. Choose shortcode you want to insert
and you will get a window with fields of attributes.
![Page 26: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/26.jpg)
Plugins
CocoBasic - Anotte WP plugin User interface for Anotte WP. It will add Portfolio post type and also
will add shortcodes.
Contact Form 7
Contact Form 7 can manage multiple contact forms, plus you can
customize the form and the mail contents flexibly with simple markup.
https://wordpress.org/plugins/contact-form-7/
![Page 27: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/27.jpg)
Source & Credits Special thanks to creators and contributors of these awesome libraries,
we couldn’t done this without them.
Images used in theme
https://unsplash.com
VIdeo used in template
https://vimeo.com/157276599
TGM-Plugin-Activation https://github.com/thomasgriffin/TGM-Plugin-Activation
jQuery Isotope Plugin
http://isotope.metafizzy.co
![Page 28: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/28.jpg)
HTML5 Fallback Support
https://code.google.com/p/html5shiv
Respond JS
https://github.com/scottjehl/Respond
jQuery
http://jquery.com
Google Web Fonts
http://www.google.com/webfonts
Smart Menus http://www.smartmenus.org/
Font Awesome http://www.fontawesome.io/
FitVideo.js http://fitvidsjs.com/
Tipper.js https://github.com/FormstoneClassic/Tipper
![Page 29: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/29.jpg)
Sticky Kit http://leafo.net
Swiper Slider http://www.idangero.us/swiper/
PrettyPhoto http://www.no-margin-for-errors.com/
We are sorry if we forgot to mention someone.
![Page 30: … · This theme comes with our dummy/demo content which can be imported directly on your website to achieve the same look as our demo. To import our content go to your WordPress](https://reader033.vdocuments.us/reader033/viewer/2022050315/5f77c487deecde5f0019f4fc/html5/thumbnails/30.jpg)
Questions?
We tried to help you out with this documentation. So please read
carefully. If we fail here, you can always go to our support forum and
post a new discussion in appropriate category. Our developers will try
to solve your issue.
Thanks for understanding.
www.cocobasic.com
https://cocobasic.ticksy.com/