w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …thank you :) t h a n k s f or p u r ch a...
TRANSCRIPT
![Page 1: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/1.jpg)
www.cocobasic.com
https://cocobasic.ticksy.com/
![Page 2: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/2.jpg)
Theme Manual
Blanka - WordPress Theme
![Page 3: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/3.jpg)
Thank You :) Thanks for purchasing our theme. We really appreciate your support
and trust in us. We worked hard to make Blanka 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 “Blanka WP - THEME” folder and you need
to upload zip file from that folder (zip file called blanka-wp.zip)
Also, there is a Child theme available placed in same folder (zip file
called blanka-wp-child.zip)
After installing the theme, you will get alert of required plugins:
CocoBasic - Blanka WP and Contact Form 7. You need to install and to
activate those plugins.
![Page 4: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/4.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://youtu.be/kuVj8w1VgWY
Demo Content is placed in “Blanka WP - DEMO CONTENT” folder.
![Page 5: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/5.jpg)
After you have imported dummy/demo content go to Dashboard >
Settings > Reading and set Front page displays: “A static page” and
select OnePage for Front page. For Posts page select Blog.
![Page 6: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/6.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 7: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/7.jpg)
Sidebar (Footer) Widget *Note - on our demo we don’t use footer widget To set/edit widgets in footer go to: Appearance > Widgets Here is how it looks our demo widgets area.
![Page 8: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/8.jpg)
Theme Customization To open customizer click on Dashboard > Appearance > Customize
Site Title, Tagline and Site Icon Customizing
![Page 9: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/9.jpg)
Blog Settings
Portfolio Settings
![Page 10: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/10.jpg)
Images Settings
Colors Section
![Page 11: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/11.jpg)
Footer Text
Default footer text:
2017 Blanka Wordpress Theme by <a
href="http://cocobasic.com">CocoBasic</a>.
and:
<a href="#">Twitter</a><a href="#">Facebook</a><a
href="#">Instagram</a><a href="#">Behance</a>
![Page 12: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/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: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/13.jpg)
OnePage This is main page (it is set to be Front Page) and that page is collecting
all other pages inside it and make one big page (home page).
Important for this page is to set:
Page Attributes > Template > OnePage
*Note - This page has no content in editor (it will automatically all other
pages which are set to be the part of this big/front page)
![Page 14: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/14.jpg)
Home This page is first section in front “OnePage” page. The content on this
page is basic and it looks like this:
[curve_text class="center"]Hello[/curve_text]
[intro_desc class="center"]We are old school Web Designers [br] & Developers from New
York[/intro_desc]
[button position="center" href="#contact"]Hire Us Now[/button]
But, there is also background image which has “parallax” effect and
there is a scroll animation image. All this settings and much more you
can edit just below the page editor in “Page Preference”. Here it is how
it looks like:
![Page 15: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/15.jpg)
Here you can “Show/Hide” page title, use “Custom Page Title”, add “Page
Description”, set page to be full height of screen, change page
background color/image, set background image size/position/repeat,
make it to be “Parallax”, show scroll animation image on bottom of
![Page 16: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/16.jpg)
page, add custom CSS for just current page.
But, the most important option is to set “Page Structure”. With this
option you can select how to use the current page - to be “separated /
stand alone” page (it will regular page, not included in front/big page)
or to be “included in One Page” (it will be included in front/big page).
All this settings are available for all pages, so, each of them you can
make it to be included or not in front/big One Page.
![Page 17: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/17.jpg)
Services On this page you will find code like this:
[col size="one_third" class="animate"]
[service title="Pixel Preciese"
img="http://demo.cocobasic.com/blanka-wp/wp-content/uploads/2017/09/icon_01.png" href="#clients"]
Cosmic ocean another world the only home we've ever known
[/service]
[/col]
[col size="one_third" class="animate wait-03s"]
[service title="Top Notch Support"
img="http://demo.cocobasic.com/blanka-wp/wp-content/uploads/2017/09/icon_02.png" href="#team"]
The sky calls to us rig veda gathered by sun carbon in our apple
[/service]
[/col]
[col size="one_third_last" class="animate wait-06s"]
[service title="Web Scalable"
img="http://demo.cocobasic.com/blanka-wp/wp-content/uploads/2017/09/icon_03.png" href="#contact"]
Fugue how far away preserve and cherish that pale blue dot
[/service]
[/col]
There is code for 3 columns and for 3 service items. Each column has
additional class “animate” which mean it will have “fadeTop” animation.
Also, the second and third column has class “wait-03s” and “wait-06s”
![Page 18: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/18.jpg)
which mean, there is animation delay of 0.3s and 0.6s. You can set any
class from “wait-01s” .... “wait-15s” and to have 0.1s to 1.5s delay.
![Page 19: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/19.jpg)
Portfolio Page
On this page is just basic code like this:
[full_width]
[portfolio]
[/full_width]
With “[full_width]” page content will be full width (no max 1070px
which is default).
Also, there is shortcode “[portfolio]” which will take all items which are
created as custom post type in Dashboard > Portfolio and display it in
the appropriate way.
![Page 20: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/20.jpg)
News Page Here you will find code like this:
[latest_posts num=”5”]
It will show your 5 latest posts from blog.
Contact Page This page must have a custom Template “Contact”.
![Page 21: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/21.jpg)
When the custom Template “Contact” is selected, the “Page Preference”
looks a little bit different. There is additional field where you should
past the contact form shortcode (we are using Contact Form 7) and also
there is one more color picker where you can set background color for
left part of contact page.
![Page 22: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/22.jpg)
Feature Page On this page is placed a lot of shortcodes. But this page is also set to be
“Separated / Stand Alone” - that mean, it is not included in front/big
page.
![Page 23: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/23.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”:
After you have set the image and category, you need to add item
content.
![Page 24: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/24.jpg)
Also, below the editor, there is “Portfolio Preference”
Here you can set “Mouse over text”, size of featured image, where to
![Page 25: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/25.jpg)
link when you click on portfolio item, item info and header content.
If you link to “This Post” when you click on featured image it will open
portfolio item post.
If you link to “Image” you need to set “Link thumb to image” with
image URL - it will open image in pop-up when you click on featured
image.
If you link to “Video” you need to set “Link thumb to video” with:
YouTube video in format:
http://www.youtube.com/watch?v=XXXXXX
or Vimeo video in format:
http://vimeo.com/XXXXXX
Now, when you click on featured image it will open video in pop-up.
If you link to “External URL” you need to set URL in “Link thumb to
External URL” in format http://yoururl.com
Now, when you click on featured image it will open your URL.
![Page 26: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/26.jpg)
Also, here you can set different background color / background
image for each item.
“Post Header Content” will be displayed in head of single portfolio
item, and here you can place image, text, video, image slider,
soundcloud iframe...
Here are some examples what can you use in “Post Header Content”:
- Image:
<img src="http://demo.cocobasic.com/blanka-wp/wp-content/uploads/2017/09/item_img_01.jpg" alt="" />
- Slider:
[image_slider name="slider2" speed="1500" hover_pause="true" auto="true"]
[image_slide img="http://demo.cocobasic.com/blanka-wp/wp-content/uploads/2017/09/about_img_04.jpg"]
[image_slide img="http://demo.cocobasic.com/blanka-wp/wp-content/uploads/2017/09/about_img_05.jpg"]
[image_slide img="http://demo.cocobasic.com/blanka-wp/wp-content/uploads/2017/09/about_img_06.jpg"]
[/image_slider]
- 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/157276599?color=ffffff" width="640" height="360"
allowfullscreen></iframe>
![Page 27: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/27.jpg)
Shortcodes
This theme has shortcodes. When you install theme plugin named
“CocoBasic - Blanka 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 28: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/28.jpg)
Plugins
CocoBasic - Blanka WP plugin User interface for Blanka WP. It will add Portfolio post types 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 29: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/29.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/166419987
https://vimeo.com/157276599
https://vimeo.com/150685211
https://vimeo.com/168939109
https://vimeo.com/161133048
Contact Form 7 Plugin
https://wordpress.org/plugins/contact-form-7
TGM-Plugin-Activation https://github.com/thomasgriffin/TGM-Plugin-Activation
![Page 30: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/30.jpg)
jQuery Isotope Plugin
http://isotope.metafizzy.co
Slick
http://kenwheeler.github.io
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
Easing jQuery Plugin
http://gsgd.co.uk/sandbox/jquery/easing
Smart Menus http://www.smartmenus.org/
Sticky
http://stickyjs.com/
![Page 31: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/31.jpg)
Font Awesome http://www.fontawesome.io/
FitVideo.js http://fitvidsjs.com/
CountUP https://inorganik.github.io/countUp.js/
We are sorry if we forgot to mention someone.
![Page 32: w w w . cocob a si c. com h ttp s: / / cocob a si c. ti …Thank You :) T h a n k s f or p u r ch a si n g ou r th eme. W e r ea l l y a p p r eci a te y ou r su p p or t a n d tr](https://reader033.vdocuments.us/reader033/viewer/2022041711/5e482dc4f6b46e09f77e7929/html5/thumbnails/32.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/