Welcome to June Documentation. Here you will find the all the useful detailed instructions to use June theme.



Hey there! We are very pleased that you have chosen June for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation and Knowledgebase, and also watch our Video Tutorials. We provide you with all the details you need to use June. It can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please follow this link to see our section on WordPress to help you get started.

Thanks, and enjoy!

Wordpress Information

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information.

June Requirements

To use June, please make sure you are running WordPress 4.7 or higher, PHP 5.6 or higher, and MySQL 5.6 or higher (for legacy environments also PHP versions 5.3.x will work but it is recommended to be on at least PHP 5.6 and preferably PHP 7.0. WordPress recommends PHP 7). We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

To check your system status please go to Codeless -> System Status on the manin WP menu.

Recommended PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time: 300
  • memory_limit: 128M
  • post_max_size: 32M
  • upload_max_filesize: 32M

What's included

When you purchase our theme from ThemeForest, you can download the June files via the 'Downloads' tab on your ThemeForest account. When you download June, you have 2 options, eather dowload 'All Files & Documentation' or the 'Installable WordPress File Only'. The former includes the theme files and supporting documents, while the latter only includes the theme's installable WordPress file. The latter is recommended when you're only looking to update/install the theme manually. Aside from the digital files you get when you purchase the theme, you also obtain exclusive services that will help you as you use the theme. Below is a full list of everything that is included when you purchase the theme and download all the included files.

Theme Support

All of our items come with 6 months of included support and free lifetime updates for your theme. After the 6 months period, you have the opportunity to extend support coverage up to 6 or 12 months further. If you choose to not extend your support, you will still be able to submit bug reports via email or item comments and still have access to our online documentation knowledge base and video tutorials. Envato clarifies item support here We have an open forum system to answer the question. Support is limited to questions regarding the theme’s features or problems with the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, we suggest enlisting the help of a developer.

How To Receive Support

Before posting on the forum

Extending and renewing Support

On September 1st, 2015, Envato changed their terms and conditions for item support and introduced paid item support for Themeforest and CodeCanyon. When you purchase a theme, you will be granted an inclusive 6 months period of support for that item. When this expires you can choose to extend your item support for a further 6/12 months at a fee. Please continue reading below to learn more about item support, or click to read Envato's 'What Is Item Support?' article.

How To Renew or Extend Support

You are eligible to renew or extend your support subscription if you have less than 6 months support remaining and the author is still supporting the item. The cost of purchasing support can vary according to the different periods of your subscription. For example, extending your support subscription while it's still active costs less than renewing it when it has expired. To learn more about this, please read Envato's 'Extending and Renewing Item Support' article found here.

  • 1. Login to your ThemeForest account and go to the Downloads tab.
  • 2. Search June theme.
  • 3. Here you will see how many month support you have remainded and a link to exted the support time.
  • 4. Click it and you will be redirected to item's page. On the right side you will see how many months support you have remaining and the 'Extend Now and save' button.
  • 5. Once you click the 'Extend Now and Save' button, you’ll be redirected to the checkout page. Confirm your payment details and follow the on screen prompts to finish purchasing the extension.

What will happen if I do not renew the item support?

In this case you will not be granted access to hands on support. You will however continue to receive theme updates that contain bug fixes, new features and access to our online documentation, help files, video tutorials and the community forum.

When can I renew the item support?

There are 3 scenarios for when you can extend or renew item support; At the time of purchase, during your support period, and after your item support has expired.

Register your purchase

After theme installation it's required to activate it for beeing able to use the theme. You need to enter your email and the theme purchase code at theme activation screen like in the screenshot below. This registration is requested before installing demo data and plugins, for a reliable and secure theme setup.

How to find your purchase code?

Go to Download page at your account on Themeforest, search Foli theme in the list of purchased items and go to item page. Click Support tab and there you will find the purchase code and the support extension validation.


When purchasing June from ThemeForest, you have two licensing options. The Regular License, and the Extended License. The billing, licensing terms and process is purely handled by Envato (the company who owns ThemeForest), and we have no control over these aspects. To learn more about what each License is for and which one to purchase, continue reading below.

License Information Purchase another license


You can install the theme in two ways: through WordPress, or via FTP.
The file is the Installable WordPress Theme and what you need to use to get the theme installed. There are two ways to install June, via WordPress or via FTP. First, you need to download the June files from your ThemeForest account. Navigate to your downloads tab on ThemeForest and find June. Click the download button to see the two options; The Main Files and the Installable WordPress Theme. See below.

What’s included in The Main Files:

      ├── June
      ├── June-child-theme
      ├── Documentation
      ├── License
      └── Slider-dummy-data

What’s included in The Installable WordPress Theme:

Wordpress Installation

There are two ways you can install the June theme. You can choose to install it via WordPress, which is what will be outlined in this article, or via FTP. First of all you need to download the June Theme from Themeforest on: Downloads Continue reading below for more information.

Downloading Theme Files From ThemeForest

Step 1 – Login to your ThemeForest account and navigate to your 'Downloads' tab and then locate your June theme purchase.
Step 2 – Click the 'Download' button and choose to either download the 'Installable WordPress file only', which is just the WordPress installable file, or choose to download 'All Files & Documentation' which is the full June theme package.
Step 3 – For instructions on how to install the theme via WordPress, click here

How To Install June via WordPress

Step 1 – Now that you have uploaded June theme in your website go to: Appearance -> Themes.
Step 2 – Click the 'Add New' button on top of the page, then the 'Upload Theme' button.
Step 3 – Click 'Choose File' and find the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you do not need to unzip the file. If you’ve downloaded the Full Theme Package, you have to unzip the master file, there in you will see June folder, zip this one and select it to install.
Step 4 – Once the file has uploaded, the next and very important step is to activate your June WordPress Theme. Only then you can install the demos and activate our plugins.
Go to WordPress Dashboard > Appearance > Themes and click the Activate button. Click Active on June Theme or active the child theme if you have planned to make modifications of the code. In that way you will get all future updates without loosing your changes.
Step 5 - After the activation, the Codeless Welcome screen will be shown. In that screen you can find important information about the theme, where you can get support and some video tutorials. But, the most important, here you can install the fully dummy data of the site.
Step 6 - All that you need to do is to Click the Setup (Blue Button), Select the Default Demo and all the installation will start and end automatically with only one click without need to change nothing! All necessary plugins, content, widgets, menus will be installed.
Step 7 - A Success Complete Message will appear. Now you are ready to start your new website with June Theme :)

Installing Header and Footer

The new technology of this theme has made it even more simple! Now you can import seprately the header and footer. Select the preferred layout from the given demos and install with one click. Mix and match styles to your wish and convenience!

Header Wizard

We have created a new tool for our users to automatically select from 16 predefined headers. You can find the Header Wizard from Codeless Menu in the left navigation section of WordPress Administration Panel. Just click over the header you want to import. The header will be changed in 1-2 seconds!

Footer Wizard

The same as Header Wizard you can select from predefined Footers, all of them with predefined widgets ready for use.


You can customize all pages and Theme Options from the Customize Button on the top bar navigation of WP site or from the Admin Panel: Appearance -> Customizer

FTP Installation

Downloading Theme Files From ThemeForest

Step 1 – Login to your ThemeForest account and navigate to your 'Downloads' tab and then locate your June theme purchase.
Step 2 – Click the 'Download' button and choose to either download the 'Installable WordPress file only', which is just the WordPress installable file, or choose to download 'All Files & Documentation' which is the full June theme package.
Step 3 – For instructions on how to install the theme via WordPress, click here

How To Install June via FTP

Step 1 – Log into your server installation via FTP. You can use software such as Filezilla for this.
Step 2 – If you have downloaded the Full Theme Package from ThemeForest, please unzip the master file and then select only the June folder.
Step 3 – Upload the extracted June folder to the wp-content > themes folder on the server. Make sure the folder name is -> June.

Step 4 – Log in to your WordPress Dashboard and navigate to Appearance > Themes and clicking the ‘Activate’ button, for the June theme.
Step 5 - Then go to Codeless Panel. Enter your email and purchase code to register your copy. Only after registering with success you will be able to use any theme settings and features.

Update Theme

There are three ways to update your theme. Before you update, it is best practice to always check our update notes. Also we strongly recommend you to make a backup of your previous theme folder. See the information below for more.

Before you update, it's best practice to always check our Important Update Information article which is updated for each new version, and to make a full backup of your theme folder, files and entire database. If you update via FTP, it's important that you delete (not replace) the old June theme folder, Codeless Builder and Core plugin folders. They need deleted because if you only replace the folders, then old files can be left on the server and can cause issues. When you update via WordPress admin, these folders are automatically deleted.

Updating theme using Envato Toolkit or Envato Market plugin

These two plugins are created both by Envato and server the same purpose. They help you take track of the available updates of theme and all the plugins you have purchased from Envato. You can update them by one click. The later one is a follow up of the first plugin and will also replace Envato Toolkit in a near future. So we strongly suggest to install Envato Market plugin.

Step 1 – Go to Envato Toolkit plugin option panel:
Step 2 – Enter your Envato Username and Secret API key. To generate an API key, select Settings from the Envato account dropdown, then navigate to the API Keys tab. Multiple API keys can be generated so it is recommended to use one per application.
Step 3 – Back in Wordpress, Click 'Save Settings'.
Step 4 – There will appear a new tab 'Themes'. Find June theme there and click update. Then wait some seconds.
Step 5 – Last, update the included plugins. You will see a notification message letting you know the plugins that have a new version and need to be updated. Follow the on screen steps.

To use the Envato Market plugin, follow this tutorial.

How To Update June via Wordpress

Step 1 – Deactivate the current June theme in the "Appearance > Themes" section by simply activating a different theme. Once you activate a different theme, you can delete the June theme. Your data is saved in the database so the content will not be lost!
Step 2 – Retrieve the file from your Themeforest downloads. If you downloaded the "Main Files" from Themeforest, then just unzip the archive file you received. Retrieve the "June" folder inside of it. Zip it, and upload via Wordpress dashboard.
Step 3 – In the "Appearance > Themes" section, click on the "Install Themes" tab at the top and choose to upload the "" file.
Step 4 – After the upload is done, activate the theme.
Step 5 – Last, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps.

How To Update June via FTP

Step 1 – Go to "wp-content > themes" location and backup your "June" theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.
Step 2 – Retrieve the newly downloaded "" file from your hard-drive and extract the file to get the "June" theme folder.
Step 3 – Import the new "June" theme folder into "wp-content > themes" location. Choose to "Replace" the current one if you did not delete it.
Step 4 – Lastly, update the included plugins. Go to your "wp-content/plugins" folder. Find and delete the plugins that came with the theme. Go back to your wordpress dashboard, a notification message letting you know there are required plugins that need to be installed. Follow the on screen steps.

Important Update Information

Always Backup Your Current Setup

We strongly recommend to make sure that you have a current backup of your web site, including your wp-content folder, your wp-config.php file, and your .htaccess file in your WordPress installation folder, and a copy of your WordPress database. You can use these to revert back to your original site if anything unexpected happens during the update process. If you are not familiar with the backup proccess and can not do this yourself, there are several plugins available that completely automate that process for you, such as: UpDraft Plus and WordPress Backup Buddy. If you are using the Revolution Slider and have added custom css, please make a backup of the styles because those will be removed when you update. You can also backup your June Theme Options on the Backup tab in Appearance > Theme Options > Backup.

Do Not Keep Older Copies of The Theme In WP Theme Folder.

You should completely remove all previous June theme folders before adding the new updated theme folder, or you could end up with WP path issues, etc.

Do Not Rename The Theme Folder

If you rename your theme folder when you update, then the path is no longer valid. WordPress stores menus and widget settings and some other settings by folder path. You need to rename your theme folder back to what it was before, and your settings, menus, widgets will be restored. Make a copy of your current theme folder before you upload the new theme.

Reset Theme Cache, Browser Cache, Server Cache And Plugin Cache.

It is always recommended to reset all caching systems after an update, including theme cache, your browser, plugin (e.g. W3 Total Cache), and server cache. Visual issues may happen and more often than not, its caused by caches, and they need to be emptied. Each browser allows you to remove cookies, history and other data. If your theme version is not updated after uploading the new files, it is due to a server-side caching system. Some hosting providers have server-side cache systems installed to optimize the speed of content delivery, please clear any server-side cache or ask your host to do it. This is also true for google pagespeed setups or cloudflare setups. View our general cache information that describes the various forms of cache and how to clear them.

Update Child Theme

If you have copied template files from parent theme to child theme. Please make sure to revert to parent theme first to confirm if the issue exists there too. If it doesn’t, please update the templates copied to child theme with the parent theme.

Required & Recommended Plugins Must Be Updated

When you update the theme, you will see a notification message in your admin telling you the required and recommended plugins need to be updated. Follow the onscreen prompts to install the plugin updates. Our Codeless Builder plugin is the only required plugin and it has to be installed and activated for theme features to work. Make sure you are always using the most recent version of the Codeless Builder plugin (this will not be an issue if you keep theme up to date). It will be installed automatically upon installing or updating your theme. If you dismiss the prompt or do not see it, then you can go to Appearance > Install Plugins page and install the plugin that way. Every time you update the theme, the plugin also will be updated.

How to install your Demo template

This is one of the most important features like importing demo template for you to work on it instead of starting th esite from scratch. June comes with a handfull of build-in demo's. Just choose the one that is more suitable for your site and in a few click it'll be all done! .

Using the Setup Wizard:

The automatic setup wizard will help you configure your new website. The importer will upload for you all pages and posts, some sample sliders, widgets, Theme Options and more. This is recommended to do on fresh installs. It will not replace content like posts, pages, portfolio, etc. and it will not delete current menus or sliders. It will, however, configure and use the selected demo menus, add sliders and replace Theme Options, Reading Settings and Widget Settings.

Step 1 - Go to your Codeless > Home and scroll down to the "Setup Wizard" section. Click on "Setup Now".

Step 2 - By clicking Setup Now, a new window will appear with all available demos. Select the demo you want.

Within minutes all neccesary data will be imported in your server.

..and you're done! You will see a Success message at the end of the proccess.

Child Theme Installation

The child theme is a copy of theme that inherits all June options and styling. Here you can customize the default styles and options to your wish. All you have to do is install child theme and activate it. After this you can edit out child theme files to your wish. Since this is independent from the parent theme, all the custom changes made to it will not be affected by future theme updates.

But as the name says, it is a child theme. So for it to work properly you MUST have installed the parent theme first. In the paragraph above you learned how to install theme.

Read below the steps to install and use a child theme:

How To Install June child theme

Step 1 – The methods to install a theme are the same as the parent theme. You can import it via Wordpress or ftp.
Step 2 – You need to have downloaded the Full Theme Package from ThemeForest, in order to have the child theme folder. Unzip the master file and then select only the June-child theme folder.
Step 3 – Zip and upload the extracted child theme folder to the Wordpress > Themes > Add New in your Wordpress dashboar. Or leave as it is and upload the folder into your wp-content > themes folder on the server. Make sure the folder name is -> June-child.

Step 4 – Log in to your WordPress Dashboard and navigate to Appearance > Themes and click the ‘Activate’ button, for the June Child theme.

Theme Options

We present you the new live customizer. Using this new feature you can change and see at the moment all your customization in the site and page, live. Make all the changes you want to pages and save them ONLY after you have finished all the work. To access the customizer go to your Appearance > Customize.

June Theme Options

Active Theme

Check out the current active theme in your site.


Set up Responsive Layout, options about Nice Scroll, Favicon, Page comments, Back to Top, 404 error message, page transitions and other theme features.

Select type of header to use, Header Layout, global header options. Set up logo image or font. Assign styles for other header elements such as header box layout, background, border, menu etc. Here you can assign a sticky header too and style it. Customize the menu and Top Navigation Area.


The styling section covers most of all theme's styling options. From Primary color used for prepended text (In, By, etc..), counter ("3" categories for example), quote icon, current pagination to Heading, Blog, Portfolio, Buttons and much more.


The general website layout options. This can be overwrite from Blog Layout and from single page/post layouts.


All Blog Styles and options. Select one of the blog styles that you want to use as a default template. Overwrite the default all pages layout option, set a custom layout for blog

Footer Options and Layout. Use this option to change layout of footer. You can use the UI on the page too. Switch On/Off Copyright on website.

Site Identity

Set a title and tag line to present your website.

Custom Types

Configure here all Portfolio Page and single portfolio items options.

As the title implies, add, remove and customize site menus here. Assign a menu to your site and add/remove menu items to existing menus.

Ap Menu / Left Mega Menu

If you want to activate and configure the left menu:

  • 1. Install the Ap Mega Menu Plugin on Appearences > Plugins
  • 2. Activate the Ap Mega Menu Plugin on Plugins > Ap Mega Menu
  • 3. Go to Apearances > Menus > and configure the options like in the image below
  • 4. Set the MegaMenu layout by click on menu items :
  • 5. Add the icons
  • 6. Change the icon in the Icon Settings Tab
  • 7. After that Go to Apperances > Widgets > Custom Sidebar2 > Ap Mega Menu Widget
    Select the Menu Location "June Main Navigation" or where you have the left menu.


    This section is responsible for the widgets. Select the area you want to add or remove widgets from and after clicking on it, you will be able to see all of it's current widgets. Customize them to your wish.

    Static Front Page

    Similar to your old default Wordpress Static page, thi ssection specifies whither you will be using your post's page as a home page or a static page.

    Page Builder

    Click on an element on the page on the right side panel of your screen, the optiins of the element will display in this section of theme options.

    For easy access you can select some page options at the right-bottom side of the screen. Click here for more info about page options.

    Header Builder

    Click any elemnt in header of your site and the options of header will be displayed here. Click here to view all the header options.

    Portfolio Items

    List of your current portfolio items. Add new item by clicking on the plus icon or edit out existing items by clicking on them. A new list of options will enfold. So that you can customize each portfolio item differently.


    The part of menu settings to add your team profiles and customize them.


    Add your customer's testimonials for your awesome work here.


    Add and edit website posts in this section.


    Add and edit website pages in this section.

    June Page Options

    Page Settings

    This is the main section where you can customize a specific page's settings. Change it's title, layout, header type, publishing date or featured image.

    Global Styling

    All theme styling options.

    New Page

    Add a new blank page template here.

    Live Page

    Click here if you have finished customizing your page (or want to check the result so far) and want to give a live look to all recent customizations.

    Image Sizes

    Images are an important part of a website. They make it flatering and eye-catching if presented in the right dimensions and resolution. In this Options Section you can define all image sizes of site. Leave the width and height empty to display the full image. Leave empty the height attribute to disable the crop.

    To find the option go to Codeless > Image Sizes.


    Image Resizing - Codeless Theme has the ability to create only the needed thumbnails. For ex, if you add a blog featured image, it will not create automatically all image sizes, it will create only the blog featured image size. Disable this feature if you use CDN. If you disable this feature you need to regenerate thumbnails.

    Add Custom Size - Here you can add a new id for a custom image size. You can edit width, height after Save. The new size will be shown at Other Section. After setting the new image size you can use it over your webpage.


    Blog Entry - Used as default for all blog images.

    Blog Entry Small - Used for Blog Grid and Carousels, News, Media, Alternate.

    Blog Post - Used for Blog Grid and Carousels, News, Media, Alternate.

    Width: Specify the width of the image

    Height: Specify the height of the image

    Crop Location: Crop is the action where wordpress forcefully resizes the image you upload to the specified dimensions. Select one of the drop down option to specify the position where the crop should start. Leave default of you do not want to crop images.


    Portfolio Entry - Used as default for all portfolio grid.


    Team Entry - Used as default for all team members.


    Use to add additional image sizes to use for other part of the site.

    Codeless Builder

    Welcome to Codeless Builder! New kind of page builder you will change everything in seconds and you will see it live. The Codeless Page builder it is faster like no other builder on the market. You will change everything on the fly. It is intuitive and simple. Codeless Team have used the best Technology inspired by Medium Editor and SquareSpace. For the first time even portfolios, staff, clients, testimonials will be added in realtime. Access any element option, section, background, font, color, border etc by click directly on the live site on the right window and set all this options on the left option sidebar. Please read below for information about it's functionalities.

    Builder Starter Page

    This is the Codeless Builder Welcome page. Useful tip are displayed to help you undestand how it works.

    How it works

    Once you've activated June's required plugin - Codeless Builder, you can now use the Codeless Builder to build your pages or posts, and even custom post types. To start using it just click Customize on your WP dashboard.

    When creating pages or posts with the new Codeless Builder, first you should add row then select the columns into row settings then add elements. Place the pointer at the top left corner of the page below hte header and click the light gray circle that is showing up. It will add a new row. Then hover the pointer on the added row and click the column icon at the right top corner of the row. Select the layout you want. Then add elements. See the below screenshots.


    Rows & Row Options

    Place the pointer at the top left corner of the page below the header and click the gray circle icon that is showing up. It will add a new row.

    Click on the 'edit' icon at row options. The row options will be dispalyed at the left panel in customizer.

    Here are the main options available for row:

    Layout - Select type of layout (into container or stretch content), Full height row, Custom container width
    Columns - Column gap, Equal columns height, responsive columns options.
    Attributes - Disable Row, Row Id options.
    Extra Class - Add here the extra class which you may use to add custom css code.
    Animation - Select the animation effects.
    Video - Add video background.
    Responsive - Hide the row on specific devices.
    Design - Borders, Margins and Paddings, background color, background image, overlay background and border style.

    The rows can be moved with drag and drop everywhere ins the page. Also the row have the option to clone it adn delete it.

    Seems like your are using Photoshop.

    Column Options

    After adding a row it contains 1 column, to change the column number go to row icon (hover) click the column icon and select the layout you want. To change the column setting click the column icon inside that row. At the left panel will show up the column options.

    Here are the main options available for columns:

    Horizontal/Vertical align - Horizontal/Vertical Alignment of elements into this column(container).
    Sticky Column - Make this Column sticky on this page.
    Disable Column - Make this Column invisible in this Page.
    Column ID - This is useful when you want to add unique identifier to columns.
    Extra Class - Add extra class identifiers to this column, that can be used for various custom styles.
    Animation - Choose the animation effect.
    Design - Borders, Margins and Paddings, background color, background image, overlay background and border style.


    An element can be added very easy everywhere in page clicking the gray ballon icons that appeat hovering the row or columns.

    This is the list of all available elements:

    Other elements will be added continuously to the list.

    For most of the elements, they have some predefined templates which can be selected clicking in 'list' button beside 'add' button.

    The main options of elements are:

    Clone - It duplicated the elements.
    Copy style - It's a useful option which help you to copy the style of an element to another, ex. if you have many services elements and made some style changes to one of them adn want to copy the same style to others.
    Paste Style - Click paste style to the other element where you want to paste the copied element style.
    Copy element - Copy the element and paste it somewhere else.
    Delete element - Click it to delete the element.
    Drag & drop - Click and hol the element to drap adn drop it everywhere in the page.
    Search the elements - Find easy the elements searching them by name at the search field above teh elements list.
    Element Options - Click the element icon and see it's options displayed on the left customizer panel. Each element has it's specific options. To see all the options for each element please click here.

    Content Blocks

    Content blocks are predefined group of element to make the creating of similar pages easier. The content blocks can be added in backend -> clcik at Content Block at the main WP menu. After creating it, edit with Customizer and add the elements you want. Save the page. This content block will be displayed at 'content block' tab when adding elements in column.

    Ready made content blocks will be added continuously to the list.

    Live edit any content in page, post, portfolio items and custom post types

    One of the most powerfull key features of Codeless Buidler is the live edit on any content. New kind of page builder you will change everything in seconds and you will see it live. The Codeless Page builder it is faster like no other builder on the market. You will change everything on the fly. It is intuitive and simple.

    Click on any content, title, image, icon or even custom post type to edit it instantly in seconds.

    How to edit simple text

    Just place the mouse in any text on the page and write, it's that simple.

    How to edit Single Portfolio

    There are 2 ways to edit portfolio items:

    First way

    Open the portfolio page, click at a single portfolio item. The single portfolio item options will display at the left side panel in customizer. The cahnges are implemented live.

    Second way

    Go to Portfolio items at Customizer menu and search the portfolio item you want to edit. In the customizer will be displayed the single portfolio options and the portfolio single item at the right side.

    For more info about portfolio and portfolio items please click here.

    How to edit Team Members

    The same thing works with team. Go to team section, click on edit icon on a team member and you will see the options of that team will be loaded at the customizer panel. For more info about team options please click here.

    How to edit Testimonials

    The same thing works also with testimonials. To add a new testimonial click the '+' icon and enter the information at the left panel. To edit a testimonial, go to testimonial element, click on edit icon on a testimonial and you will see the options of that team will be loaded at the customizer panel. For more info about team options please click here.

    How to edit icons

    It's very easy to edit an icon, just click at the icon and a list of icons will be displayed. Select one from the list and it will change instantanly. To find easy an icon you can search it at the search field. For more information please click here.

    How to edit widgets in builder.

    With Codeless Builder is very easy to edit widgets, go to footer or sidebar area and click the edit blue icons to edit the widgets. The widget options will display at Customizer panel. See the below image:

    Logo Builder is another powerful feature of Codeless Builder. Create the logo instantanly adn see the changes live. Drag and drop it everywhere in header. Click the logo edit icon that is displayed when hover the logo. Teh logo options will be displayed in Customizer.

    Logo options:

    Logo type - Select the type: font logo or iamge.
    Logo Font - Font family, subset, font size, style, letter spacing, text align, text transform and color.
    Logo Image - In this logo type you can add the light and dark logo images, set the logo height and add additional logo for the responsive view.

    Header Builder

    The main header options are at Header in the main Customizer menu. Header has it's elements that can be placed anywhere with drag and drop.

    To add elements at header, click one of the gray ballons that appear in header area when hovering it. The options of each element will be displayed at Customizer panle when selecting them. The available elements for the header:

    Social Icon - Add social link, select the socials you wnat to display, select fort size, color, border style, display mode, space between icons, icon alignment, line height, margins and paddings.
    Logo - click here to read more about logo builder.
    Menu - Select if you want hamburger menu or vertical menu (other options for each style will appear), menu animation effects. Tools - Choose the elements(and their options) you want to display in tools: search, cart, side navigation. Button - Add teh button text adn link. Also can change the margins, paddings and borders. Text


    Within June WordPress Theme you will get a total of 27 elements and we are going to describe each one of them in this section. We should include also the fact that we'll add other elements from time to time.
    There is an easy way to show all the elements : you simply click on the black line below the main menu. But you can also add elements on every section possible, by clicking the icon located on left and right of the rows and columns.
    See the image below.



    Rows are the base unit on a theme layout. They are the column layouts that can placed inside of sections. Rows can be accessed easily with our builder:

    • Simply by clicking the Row icon on the top left of the row
    • Manually on Theme Options > Page Builder > Row.

    Adding elements inside the columns :


    We have divided the Row settings in two large categories : General and Design Settings.

    General Settings

    These settings show everything about customizing the entire row from layout, columns, attributes, to animations, video (self-hosted, youtube or vimeo) and responsivity.
    For more detailed information, go to Row Options.

    Design Settings

    The Design Settings include everything about the paddings and margins between elements and the row, the border style/size and color, text and background color, background image and background overlay.
    For more detailed information and screenshots, go to Row Options.

    A normal Header has included the menu and the Page Header. No struggles around to add and customize the Page Header : now you can add it as a new element.


    General Settings

    • Page Header Style - you can choose between simple and modern header styles.
    • Modern Title Position - if choosen moder header style you will have to choose the title position also.
    • Description or Second Title - choose a description.
    • Effect - you can choose an effect (gradient shadow) for the page header.


    Design Settings

    • Box - choose the height of the box and the title color (light or dark).
    • Background Color and Background Image - choose a color or an image for the background.
    • Overlay and Border - choose a gradient or color overlay for the background. You can also choose a bottom/top border and its color.
    • Typography - choose the title typography, title font size and weight, title line height, title text transform, subtitle color/font size and weight.



    Completely customize the text typoghraphy, font size, font weight and even including animations in just a few clicks.


    Text options include :
    • Adjust the distance between paragraphes.
    • Custom Typography - adjust text font size, title font weight, line height, text transform and text color.
    • Animation - choose the animations effect, delay and speed.
    • Adjust paddings, margins and borders.


    Whenever selecting a random text on every section, you will notice a black panel above the selected area. There you will find all the formatting options of the text, as shown on the image below.


    Custom Heading

    Just add a Custom Heading in every section that you want and customize it in a minute.


    Custom Heading options include :
    • You can choose the heading tag and the title typography.
    • Responsive Options
      • Add a custom size for the heading for screens smaller than 992px.
      • Add a custom size for this heading for screens smaller than 768px.
    • Animation - add an animation effect to custom heading.
    • Box Design - add borders, adjust padings and margins of the box.
    • Border - adjust the border color and style.


    There are a lot of customizing options for buttons.


    After adding a button element you have the options to :
    • Input the destination URL for your button.
    • Adjust the paddigns, margins and assign borders.
    • Add an animation and adjust its delay and speed.
    For this example we edited the button column settings and chosen Light Text Color for the first button, and Dark Text Color for the second one. This is done by clicking on column and choosing Column > Design.

    This way we will asign different styling options to the buttons, on Theme Options > Styling > Buttons.


    Buttons styling options include :
    • Button style - in this example we have chosen the Text Effect style.
    • Button Size Layout - choose a button size from extra small to extra large.
    • Button Font - choose the size of the font or a custom font.
    • Choose the button background color, font color, background hover color and font hover color for the normal button.
    • Choose the button background color, font color, background hover color and font hover color for the light button.


    Our Builder makes it easy to add images, videos or live photos anywhere on the page. All images support lazy-loading, and come with different animation styles. Media modules can be placed in any column that you create, and their size will be adjusted to fit.


    Image Media

    • After uploading image from media library, you can position it on the panel (left, center, right, stretch).
    • You can Show lightbox icon on image hover or not.
    • Adjust image size (default, ful, blog entry, blog post).


    Video Media

    • You can choose a self embed video, youtube or vimeo video and add the video ID/URL.
    • You can switch on/off video loop.
    • Autoplay option - switch on when video is used with Video Placeholder.
    • Video/Embed Height - use this to adjust the video height, for embed links and for video with image placeholder.


    You can also upload Live Photos or add a video if you want to use it for live photo.
    For all media types you can add shadow to container, animations and adjest margins/paddings/borders.

    Add and customize your gallery in no matter of time. Simply choose your photos and star to edit them live.


    Gallery options include :
    • Carousel - you can easily swith from static images to carousel.
    • Items per row - choose how many images you want in a row.
    • Distance between items - easily adjust the distance between them.
    • Lightbox on hover - turn on/off the lightbox when hovering on an item.
    • Image size - it can be full, default, blog entry or blog post size.
    • Adjust margins, padings or add borders easily.


    The divider element is perfect for creating a horizontal line rule and for adding structure and organization to your site.


    Another cool divider example :


    The divider options include :
    • Divider Height - set the divider height.
    • The option to set the divider fullwidth.
    • Set the divider width - easily adjust the divider width to your requirements.
    • Set color - set the divider color.
    • Set the border style - choose between the solid, dotted, dashed, double, groove, ridge and inset divider style.
    • Set the border align - set the divider border to be left, right or center aligned.
    • Select the style of the divider - choose between three styles : simple, two borders or with centered icon. We have chosen the divider with centered icon style on the second example. When clicking on the icon, a panel with all the icons will be shown, so you can easily choose the icon you need.
    • When choosing the divider with centered icon style, you have the option to choose also the icon size and color.


    Services customization is unlimited with our builder. Transform everything from icons, to distances between title and content, including animation effects.


    General Settings

    • Media Type - the media type can be only text, icon, SVG and custom image.
    • Layout Type - the layout type can put media aside or top.
    • Align Content and Icon - align icon and content on the left, right or center.
    • Icon Wrapper - select the type of wrapper around icon if you want one. Select between square and circle.
    • Add Subtitle - switch on if you want a custom subtitle after primary title.

    Design Settings


    • Box - adjust padding, margins or assign borders and change text color (light or dark).
    • Style and Distances
      • Custom Icon Size - easily adjust the icon size by dragging the mouse.
      • Icon Color - select a color for the icon.
      • Wrapper BG Color - select a background color for the wrapper (if you have chosen a wrapper).
      • Wrapper Border Color - select a color for the wrapper border.
      • Add Shadow - switch On to add shadow to icon wrapper.
      • Custom Wrapper and SVG Size - change Wrapper size by dragging the mouse.
      • Icon and Wrapper Distance - select the icon and wrapper distance from content.
      • Distance Title From Top - drag to change the distance of the title from top of element.
      • Distance beetween Title and Content - drag to change the distance of the content from title
    • Typography - select one of the predefined title typography styles or select "Custom Font" if you want to edit the typography of Title.

    If chosen Custom Font option you can :
    • Drag to change Title Font Size.
    • Choose Title Font Weight.
    • Drag to change Title Line Height.
    • Drag to change Title Letter-space.
    • Title Text Transform - transform to uppercase.
    • Select the Title Color.

    If you want to modify the typography of content, swith on the Content Typography button. You can :
    • Drag to change Content Font Size.
    • Change the Content Font Weight
    • Drag to change Content Line Height.
    • Content Text Transform - to uppercase.
    • Change content color.
    In the end you can also choose an effect for animation, the delay and speed.


    Testimonials are a great way to encourage trust from your visitors. With our builder you can easily add and setup a testimonial. To create a testimonial go to Theme Options > Testimonials and add a new one clicking on the plus icon.


    Than fill the required fields to complete, like shown on the image below.


    Now that that the testimonial is created, we are going to add it as a new element, on a page section (you can add a testimonial everywhere you want).


    The testimonial options include :
    • Carousel Navigation - switch on if you want carousel navigation.
    • Carousel Dots - switch on if you want carousel dots for pagination.
    • Categories - select the testimonials categories you want to display.
    • Items per page - choose the number of items displayed per page (the max number).
    • Order testimonials by author, title, name, date, modified or none.
    • Order testimonials by ascending or descending order.


    To create a new team member go to Theme Options > Team and add a new one clicking on the plus icon.


    Than fill the required fields to complete, like shown on the image below.


    Now add team as a new element on any page section you want. There are some pre-created team members that will be shown, including the new member that we created earlier. You can delete the existing members if you wish.


    The team options include :
    • Single Team - switch on to show only one team member.
    • Style - choose between simple or only photo styles.
    • Layout - choose how many columns you want to display.
    • Distance between Team Members - drag to adjust the distance.
    • Carousel - switch on id you want carousel.
    • Animation - select an animation effect.
    • Image Size - choose between default, full, blog entry, blog post, portfolio entry, team entry image size.
    • Categories - select the team categories you want to display.
    • Items per page - choose the number of items displayed per page (the max number).
    • Order team members by author, title, name, date, modified or none.
    • Order testimonials by ascending or descending order.
    • Adjust margins, padings and add borders.


    Portfolios are a must have in your site, even it is a business or a creative one. They represent you. By portfolios the customers are able to create a better version of you.

    You can add a portfolio element on every section of your page and customize it endlessly.

    Portfolio Options

    General Options

    They include everything from portfolio layout, to special filters, alignment, space adjustments and animations.

    Overlay Options

    These options include all the items overlay styles, effects and colors.

    For more detailed information about all portfolio options, go to Portfolio Options.

    Portfolio Items

    The Portfolio item options include the item title, slug, status, date, featured image and from here you can also open the Editor and edit the content using shortcodes too.

    For more detailed information about portfolio items, go to Portfolio Items.

    Blog Page Setup

    The blog page is one of the wordpress most important and basic pages. It show of a list of all your posts. You can now customize it in different styles to showcase the articles in the most effective and nice layout you can.

    There are two ways to assign the blog page for your Wordpress installation.

    Wordpress Basic way

    The old fashioned and wordpress default option to assign the post's page. For this, please go to Settings > Reading. Assign a static page for home and the blog page.

    Use June options

    Assign the blog page using solely theme options. To access this option follow the track: Appearances > Customize > Static Font Page. Just as in the default wordpress settings, you get to assign here hte home page and the blog page.

    June Blog Options

    There are more than 100 options to style and customize your blog page. Scroll down for a detailed specification for each.

    June Blog Style

    Select one of the blog styles that you want to use as a default template. These are the available styles:

    Default Style

    Alternate Style

    Grid Style

    Masonry Style

    Minimal Style

    Timeline Style

    Boxed (with shadow)

    Enable if you want to make this style boxed with small shadow around each post.

    Animation Type

    The Animation type controlls the way the posts will be loaded into your ppage when you first open (or refresh) blog page.

    Blog Page Layout

    Assign a sidebar and it's position for the blog. Avalable options are: Default, Fullwidth, Left Sidebar, Right SIdebar, Dual Sidebar.

    Set the exact blog width

    Set a custom width for your blog in fullwidth layout only.

    Set Blog Align

    As the title implies, this option gives you the option to change the alignement of the blog posts positioning. Avalable options are: Left, Center, Right

    Blog Posts Layout

    Change the layout of blog posts, you can add custom sidebar for posts also. Avalable options are: Fullwidth, Left Sidebar, Right SIdebar.

    Blog Post Style

    Select one of the blog single post styles. These are the available styles:> Classic Style, Modern Style, Custom Style.

    Enable Auto Excerpt

    If enabled you will see only a small part of content. If disabled all post will show.

    Excerpt Length

    If excerpt is enabled. Here you can specify the exact length of the excertp to show.

    Blog Share Buttons

    Select Social share buttons that you want to use on blog page. A list of available share buttons will be listed if you click on the gray field. Click on each social you want to add. All the present socials have the share option available. Some social networks do not offer a share facility so they can not be added here.

    Blog Overlay Style

    Select the style of overlay of blog image on hover. Available options are: None, Color Overlay, Zoom and color, Grayscale.

    Overlay Icon

    Select the icon you want to show up on hover of the blog post. Available options are: Plus, Arrow Right, Expand, Image, Lightbox.

    Entry Image Link

    Disable if you dont want that image linked with post.

    Blog Page Filterable

    Will add a filter to your blog based on the post categories. Available options are: Disabled, Small Square, Fullwidth.

    Blog Lazy Load

    Another alternate option to load the posts images in the blog page. The lazy load will load image posts as you keep scrolling down the blog page.

    Post Slider

    Will add a bar with additional information for the blog post. Such as post author, date created and categories it belongs to.

    Show Author Meta

    If enabled will show the author of post right after the featured image.

    Show Categories Meta

    If enabled will add the categories list of the post, under the featured image.

    Show Date Meta

    If enabled will add the creation date of the post.

    Post Entry Tools

    Will add a vertical bar with additional interaction tools for the blog post. Such as social shares, comment count and post likes number.

    Show Share Buttons

    If enabled will add the shares icon. Click on it for the full list of available shares for this post.

    Show Comments Count

    If enabled will add a comment icon displaying the number of comments for the post. If clicked on it you can go to the comment section.

    Show Post Likes

    If enabled will add the likes icon. Each visitior can 'like' your post by just clicking on this icon. This will also display the amount of likes a post has gathered.


    Here is where you specify how do you want the blog pagination method.

    Pagination Style

    Select the style of pagination. Available options are: With page numbers, Next/Prev, Load More, Infinite Scroll.

    Pagination Align

    Specify the position of the pagination. You can chose from: Left, Right, Center.

    Enable Slider Pagination

    This option if enabled will add pagination to the slider of posts.

    Enable Slider Prev/Next

    This option if enabled will add the Next/Prev arrows to your post slider. (It will affect only the gallery posts)

    Enable Slider Loop

    This option if enabled will set the post slider in a loop.

    Enable Slider lazy Load

    This option if enabled will set the slider images into a lazy load. Each image will load by the time they will show up. Not since the page loads.

    Blog Slider Direction

    Select the type of styling for the slider images to load. You can chose from: Scroll, Fade, Cube, Coverflow, Flip.

    Blog Slider Speed

    Move the scale to specify the value of slider speed. If left at 0, it will remove autoplay.

    Single Blog

    In this block of options you can customize the single blog post options.

    Single Blog Shares

    If enabled, it will add the social shares into the single blog post.

    Single Blog Tag

    If enabled, it will add the list of tags into the single blog post.

    Single Blog Author Info

    If enabled, it will add the post's author name into the single blog post.

    Single Blog Related Posts

    If enabled, it will add other related posts into the single blog post.

    Single Blog Pagination

    If enabled, it will add pagination to the single blog post. So you can nagivate directly to the next/previous post without needing to go back to the blog page.


    Portfolio is a kind of that personal space that you want to take care in a special way. It is used to dispaly mainly your works, business or creative ones, but we are going to put something new.


    Breaking the rules, our builder lets you add a portfolio as an element on every page section. Even the portfolio items are not the same. They are treated like pages, where you can add any element you want and have your own freedom to built the portfolio you like. There are more than 100 options to style and customize your portfolio page. Scroll down for a detailed specification for each.

    Just 2 examples of a portfolio entry.


    Portfolio Item Options

    When adding a portfolio element to the page, some pre-created item will be shown. You can edit them clicking on the little icon located on right-bottom of each portfolio item.
    You can add a new portfolio item at :

    • Theme Options > Portfolio Items.
    • Clicking on the plus icon at the bottom of each portfolio element.



    Portfolio Item Format

    Select the portfolio item format. Available options are: Thumbnail, Slider and Video.

    The Layout

    First you need to choose in what format your portfolio will be displayed : Masonry, gGid, Inline. Select the format on portfolio general options. For every format choosen, the layout of Portfolio item can be : Default, Wide or Large.


    Enter the title of portfolio item.


    Select the status of the portfolio item. Available options are : Draft, Pending Review, Private, Published, Scheduled.


    Enter the date according to timezone.


    If you wish you can also edit the content of portfolio item with the Editor. Shortcodes are available too.

    Featured Image

    Select the features image of the portfolio item.

    Let's add a new portfolio item :

    This portfolio item includes a page header, gallery, 2 custom headings and 2 text elements. You can choose to display the comments also.

    Portfolio Element Options

    Now let's see the Options of the Portfolio as an element. The options are divided into :

    General Options


    Choose the portfolio layout. Available options are : Grid, Masonry, Inline.


    Choose the portfolio style. Available options are : Classic, Classic Excerpt, Media and Title, Only Media.

    Media and Title


    Choose how many columns the portfolio items will be displayed.

    Columns (Items) Gap

    Drag to adjust the space between portfolio items.

    Image size

    Choose the images size. Available options are : Default, Full, Blog Entry, Blog Post, Portfolio Entry, Team Entry.

    Justify Gallery

    Calling Justified Gallery, the disposition of all the thumbnails is changed to fill all the spaces (justification). Switch on this option if you want to hava an elegant and modern justified gallery.

    Justify Row Height

    Drag to adjust the justify row height.

    Justify Item Margins

    Drag to adjust the justify items margins.


    Switch on if you want items to be displayed in carousel.


    Choose how the pagination form will be displayed. Available options are : Page Numbers, Next/Prev, Load More, Infinite.


    Choose the items filter layout. Available options are : Disabled, Small Square, Fullwidth.


    If you choose fullwidth option you can also choose :
    • Filter color type - light or dark.
    • Fullwidth filter with shadow - display a shadow.
    • Fullwidth filter sticky - swith on if you want a sticky filter.

    Filter Align

    Choose the filter alignment, Available options are : Left, Right, Center.

    Images Filter

    This is definitely new! Choose an filter for the portfolio images. This works like instagram : choose a cool filter for the images. Now your portfolio can have it too. Available options are : 1977d, Aden, Brannan, Brooklyn, Clarendon, Earlybird, Gingham, Hudson, Inkwell, Kelvin, Lark, Lo-fi, Maven, Mayfair, Moon, Nashville, Perpetua, Reyes, Rise, Slumber, Stinson, Toaster, Valencia, Walden, Willow, X-Pro.

    Image Filters

    Boxed Style

    Switch On if you want to add a boxed shadow. Works only on Classic and Classic with Excerpt.


    Choose an animation effect.


    Choose the categories of the items.

    Items per page

    Choose the number of items per page.

    Order By

    Choose how do you want your portfolio item to be ordered, Available options are : Post ID, Author, Title, Name, Date, Modified.


    Choose the order of items. It can be ascending or descending.

    Overlay Options


    Choose the style of the portolio items overlay. Available options are : Color Overlay, Zoom and Color, Grayscale Hover, Two Icons.


    Position of content into the overlay ( icons, title, tags ). Available options are : Center, Icon Top/Content Bottom, Content Top/Icon Bottom.

    Show Title

    Switch on if you want to show the title of the portfolio items.

    Title Style

    If the title is enabled, choose the style of it. Available options are H1, H2, H3, H4, H5, H6.

    Show Categories

    Switch on if you want to show the categories of the portfolio items on overlay.

    Show Icon

    Switch on if you want to show an icon on overlay.


    If Show Icon is enabled you can choose here the style of the icon. Available options are : Plus, Arrow Right, Expand, Lightbox, Lightbox amp; Link.


    Drag to adjust the distance between portfolio overlay and photo corners.

    BG Color

    Choose the background color of the overlay.

    Overlay Bg Color

    Choose a gradient as the overlay background. Available options are : Azure Pop, Love Couple, Disco, Limeade, Dania, Shades of Grey, Dusk, Delhi, Sun Horizon, Blood Red, Sherbert, Firewatch, Frost, Mauve, Deep Sea, Solid Vault, Deep Space, Suzy.

    Content Color

    Choose the content text color between light and dark.

    Content Animation

    Choose an animation for the content.

    Another item overlay customization.

    Have fun with your new portfolio !

    Header Config

    June WordPress Theme comes with Header Wizard:

    Header Wizard

    - We have created a new tool for our users to automatically select from 16 predefined headers. You can find the Header Wizard from Codeless Menu in the left navigation section of WordPress Administration Panel. Just click over the header you want to import. The header will be changed in 1-2 seconds!

    Header Builder

    - After you have opened the Customizer Section you will be able to drag & drop builder elements.
    Header is organised in 3 Rows: Top Header Row, Main Header Row, Extra Header Row. Each of these rows is organized in three columns: Left, Middle, Right. In that way it's more easy for you to create your custom header layout. Easily drag and drop elements from one column to another or from one row to another row.

    Each Header element on hover has two buttons: Element Header (can be used for drag and drop or for open options of that element) and Delete button. You can customise text, as them at Top Header Row, with just clicking over the text!

    Header Options

    Customizer -> Header:


    -Header Stretch: Stretch Header to Fullwidth or into the container

    -Advanced: We recommend to use the header wizard for complicated layouts like Side Header

    -Header Layout: Change the position of the header

    -Force Center, Middle Column - Force center the middle column of Header Row, in that case it will not vary from the size of left or right column, it will be fixed.

    -Boxed (Outer Header) - Make a boxed header layout, for example with shadow and overlap the content some pixels.

    -Logo: Change between Image Logo and Font Logo

    -Default Logo: the default site logo

    -Logo Light: Should be used on header transparent with light color

    -Logo height: change the height of the logo

    -Responsive Options: Other options that can help you to set custom logos for various screen size

    Menu Style

    -Main Menu Style: Change between various menu style

    -Space between Menu Items: Control distance between menu items (in pixels)

    -Small dividers between menu items: Switch to add small vertical dividers between menu items

    -Dividers Color: Color the color of small vertical dividers

    -Hover & Active Item Styles: control how active( and hover ) menu item is styled

    -Menu Item Active border Color: should be work on Menu Style with border (top,left,right,bottom)

    -Menu Item Active BG Color: should be work on Menu Style with Background Color

    -Menu Active Font Color - Change font color of menu items on hover and active state

    -Main Menu Typography - Style Menu items on normal state

    Dropdown Typography

    -Dropdown Items with submenu: style the title of Megamenu Columns Title

    -Dropdown items typography- simple menu items on dropdown

    -Mobile Menu Hamburger Icon Color - Change between light/dark color of menu icon on Mobile devices

    -Main Header Row - This is the main centered row of the header. In this section you can customize everything about this section of page.

    -Top Navigation Row - This is the top row of the header. In this section you can customize everything about this section of page.

    -Extra (Bottom) Row - This is the bottom row of the header. In this section you can customize everything about this section of page. There is something special from other parts.

    -Outer Boxed Row: if you active this option all styles (bg color etc) will be applied into the container. Useful to create a header layout like this:

    -Force Center, Middle Column: if you leave this off and for example we have a navigation menu in the middle of the Extra bottom row and this menu is too large, it will be shown in two lines, overall design will be broke.

    Use this option to solve the problem and expand the size of the middle container for your elements.

    -Dropdown&Mobile Styles - Here you can edit styles of dropdown and menu dropdown in responsive.

    -Sticky: Make your header sticky.

    -Default Header Options: Set default header style, used specially for archives and categories. You can override these options for each page.

    How to make header transparent in one specific Page?

    First of all we need a appropriate header for this purpose. We suggest you to use: (vendos dhe foto ketu). We have two possibilities to edit Page Options: On WordPress Pages and From the Customizer. All you need to do is to set the “Header Over Content (Transparent)” -> Transparent Header, and also "Header Color"-> Light. You can access the section of page options from the customizer, by clicking the button in the bottom right corner. See image for more.

    How to create a Megamenu?

    Go to Appearance -> Menu Click the menu item you want as megamenu. Options of that menu will be shown. Now select the checkbox "Check if you want to use this item as megamenu" You can choose to create a boxed or fullwidth megamenu. The first children of that item are recognised as megamenu columns. Add items as children of columns

    How to add image to megamenu?

    Two possibilities: Background Image, In-column Image (set image just like in default).

    In both cases you need to add the url of image on the textfield. Select, Background Image or Image in column
    3. In the case you have selected Background Image, click Save, you have finished!
    4. In case you want to show it into the column, we need to add a new menu item (name and link is not important), drag it into megamenu as the last column. Click Save
    5. After the refresh go to that Column and check: "Check to hide column, use only for layout. If you have set a Megamenu image as Column, by hiding this, the image will be shown instead."

    How to add a custom Widget in Header?

    In all cases when you make modifications on header or pages you need to open the Customizer

    You need to add a new Widget element on Header. You can add it in any column or row you want. After creating it you need to select the sidebar widget area to use: we have created 3 Custom Sidebar area for this purpose, select one of them.
    Save and close the customizer;
    Go to Appearance -> Widgets on Custom Sidebar 1/2/3 (the one you have selected before) add the widget you want.

    Header Elements

    -Logo - When clicking the editing button, a redirection on Header->Logo will be occur, already described above.


    Select Menu to display

    -Vertical Menu - used on Full overlay menu styles and left menu styles where menu is showed as vertical. This is an advanced option, please use the wizard instead.

    -Use for responsive - Switch to use this element for responsive menu display

    -Show Open Menu Button in-place - important on responsive, if you switch on the menu hamburger icon on mobile will be displayed on the same position of element.

    -Show other menu in responsive - select a custom menu for responsive.

    -Hamburger Menu - Use this if you want to change the style of menu. Advanced option, use wizard instead!

    -Custom Items Color - Switch on to add a custom color for this menu nav. Useful when you use multiple menu in same header

    -Items Animation Effect - Add effect to navigation menu items, useful on vertical menus only.Search Element

    -Style - Select one of styles, use Simple Transparent on dark headers

    -With Quick Search - Active/Disactive Quick searches on top of search, works on With Categories Style

    -Search Input Width - Specify a custom width for the input of the search, useful when you build custom headers.


    -Tools Style: Large with Desc, like the default one, or small circles.

    -When Small circles style is active you can active search element.

    -Show Wishlist - add wishlist widget on header

    -Show Cart - add cart widget on header

    -Cart Style - On header style with dropdown, open from side of page when clicking over header widget

    Icon Text (text)

    -Hide On responsive - possibility to hide completely on small screens

    -Icon Size - Space between title and icon - Text color - Icon Color - style the element

    -Click on text to modify text, click on icon to edit the icon

    Widget Sidebar

    Select the widgetized are you want to use for adding widgets. (3 predefined for header use Custom Sidebar 1/2/3)

    Color of the text

    After successfully setting up header menu, you can now proceed in styling it. For this, here is the section to check out. Header Layout, global header options. This is the section containing all the neccesary options to configure and customize your website header. Check below for a list of all available options functions explained.


    From bold and interactive footer, to simple and clean one, our builder takes goog care for the Footer section too. You can add any widget you want on it and customize the style to fit your requirements.

    Find the footer general options at Theme Options > Footer .

    Show Footer

    Switch on if you want to show footer.

    Footer FullWidth

    Switch on if you want footer content without container.

    Footer Layout

    Use this option to change layout of footer. Available options are : 1 Column, 2 Columns, 3 Columns, 4 Columns, 6 Columns, 1/4 3/4, 3/4 1/4.

    Footer Centered Content

    Switch on to center content of column.

    Show Copyright

    Switch On/Off Copyright on website.

    Footer Reveal Effect

    Switch On/Off to activate reveal footer effect.

    Find the footer styling options at Theme Options > Styling > Footer .

    Footer BG Color

    Choose the footer background color.

    Footer Second Color

    Used for inputs, textarea and other more darken area.

    Widget Title

    Choose a color for the footer widgets title.

    Footer Body Color

    Choose a color for the footer body (content) text.

    Footer Link Color

    Choose a color for the footer links.

    Footer Link Hover Color

    Choose a hover color for the footer links.

    Footer Borders Color

    Choose a border color for footer.

    Distance From Top

    Choose the distance between footer and page content.

    Distance From Bottom

    Choose the distance between the footer and the bottom of page.

    Distance Between Widgets

    Choose the distance between footer widgets.

    To add footer widgets go to Theme Options > Widgets > Footer Column and add new one.
    If copyright is on you can add copyright widgets at the same place Theme Options > Widgets > Copyright.

    In this case we are going to Switch On the footer Copyright and add a text widget on the Copyright Left.

    You can also edit every footer widget by clicking on each left-top icon.
    For more detailed information about Widgets, go to Widgets.
    Find Copyright Styling options at Theme Options > Styling > Copyright .

    Copyright BG Color

    Choose the copyright background color.

    Copyright Body Color

    Choose a color for the copyright body (content) text.

    Copyright Link Color

    Choose a color for the copyright links.

    Copyright Link Hover Color

    Choose a hover color for the copyright links.

    Copyright Borders Color

    Choose a border color for copyright.

    Content Distance From Top

    Choose the distance between copyright content and top.

    Content Distance From Bottom

    Choose the distance between copyright content and bottom.


    More than a theme, June is a shop builder dedicated especially to the Shop sites. It adds to the basic layout of an Woocommerce shop, countless styles and features. To help you get the neccesary tools to build the shop of your dream. Drag & Drop functionalities and Front-end editing in real time. Scroll down to learn more how to build, edit and launch your online shop on the go and with far less efforts than ever.

    How to set up single products options

    Change product style

    To change or edit a product style please go to the product option panel from Products > Product Data > Product Single Style

    Add Content from Builder

    June comes with plenty pre-created content blocks that you can use throwout the entire site. These blocks are available for products as well. To add them go to Products > Product Data > Product Builder Content. Select from the drop-down list the blcok you want to use.

    Add Gifts Text

    To add or edit a gift text for the product profile, in the same place as before scroll down to the Product Gifts Text area. Add the text/media your want here.

    Setup Complete The Look Section

    You see often sections in a product profile that suggest you more items to complete the look you are looking for. To this section in your product, in product option pane scroll down to the Product Data > Linked Products > Cross-sells. Choose the categories of products that should show up in the "Complete The Look" section.

    Setup Product Attributes & Variations

    Go to Products > Attributes > Add Attribute, to add a new attribute. It could be color of the item, size, condition..etc. After adding it, go to Configure Terms to add values for each attribute.

    Back to Product options, go to Product Data > Attributes. Select from the list the attributes you want to show in the product profile. Check the Used for Variations checkbox, in case you want to create some variations with them. Next step is to open Variations menu to customize the variations created.

    Set color (attribute) filter on Sidebar Shop page

    To set Color as a filter in the Shop page Sidebar, go to Appearance > Widgets. Add the YITH Woocommerce Ajax Product Filter into the WooCommerce Sidebar. Select the type: Color.

    Shop Options

    To access the Shop options go to Appearance > Customize > Shop.

    Shop Item Style

    The first set of options used to change default items style and column number, is Shop Page Archive. Select the style you want your products to show from the drop-down list.

    Add/Remove Quick View Option

    Move down the shop'soption to the Shop Single Product section. You see here the Quick View option. Set it ON or OFF.

    Customize Product Catalog Image

    To customize the product catalog images, we move onto Woocommerce menu options. Go to WooCommerce > Product Catalog, select the type of items to display for the shop page and categories page from the respective drop-downs. Go back to Product Images menu item in WooCommerce, to set up the images size and aspect ratio for the product images.

    Create Shop Page using Codeless Builder

    Let's create a shop page from scratch, using the Codless Builder. First, create a new (blank) page. -> Open Codeless Builder -> Add content by adding one or more Content Blocks.

    Customize Sections/Row

    To customize rows and sections, just hover with moude above them until the options at the top-left corner are visible. You can edit/delete/clone or copy one row's style using these options. Use the additional optiona in the sidebar to further customize page/row/sections.

    Add a base Shop element

    In your page open the Codeless Builder and add new element. In the search field look up for 'Woocommerce' to easily find the shop element. Add it. Along with your shop the shop's options will unfold in the left sidebar.

    Add Shop Trending element

    The same procedure is for adding the Shop Trending element. Select it from the Cdeless Builder elements and customize using the sidebar options to your wish.

    How to set up Cart page / Checkout

    Woocommerce Options > Settings > Add pages

    How to add and configure Wooommerce plugin

    If you have imported the demo data, the plugin will already be installed and active in your site. If you didn't import demo data, then just install and activate WooCommerce plugin from the Plugins menu, just like any other plugin.


    Sliders are a powerfull elemnts of every website, they are used to display imporant content to catch the users attention. June includes 3 sliders: Revolution Slider, Layer Slider, Fusion Slider. We also include other slider types for pages/posts and carousels. Each slider can be used on any page or post and has its own set of unique options. below are listed the slders options and the instructions how to use them.

    How to add a slider

    Sliders can be added in any part of the site, as elements. Search them at the list of builder elements. See the below screenshot:

    The available options for slider are the same as for any element: Edit slider options, Clone slider, delete slider and drag and drop it anywhere is site.

    Importing demo sliders

    Except for Codeless Slider which is incorporated in theme, the other sliders (Rvolution Slider) dummy data can be imported right after theme activation at Theme Setup. You can import slider dummy data any time manually at Revolution Slider (or Layer Slider) panel options. The slider dummy data filer are included in theme package (the one you download from Themeforest) at "slider_dummy_data" folder.

    How To Import Revolution Slider sliders

    The Revolution Slider allows you to easily export/import your slides. It's always a good idea to backup your slides so you can easily import them again if you ever need to.

    • Step 1 - Go the the Revolution Slider menu tab in your WordPress Admin, and click the Import Slider button.
    • Step 2 - Choose the .ZIP file of the slider you'd like to import. The slider dummy data are included in theme package at folder 'slider_dummy_data'.
    • Step 3 - Click the Import Slider button, and wait for it to finish uploading.
    • Step 4 - Once it's finished uploading, you will now see your imported slider in the list of Revolution Sliders available.

    Codeless Slider

    Codeless Slider is one of our important elements and features. The first Slider that can be edited directly live on the page and you can also check how it will look with the rest of the theme.

    How to create a slider with Codeless Slider

    Please follow the instructions below to create an amazing and simple slider with Codeless Slider.

    • Step 1 Add codeless slider by clicking at the gray ballon which appears on hovering the row in Visual Builder. Click at codeless slider icon to view the slider options in the right panel. The available options for the codeless slider are: slider height, full heighe slider, previous/next buttons (on/off), pagination buttons, effects, direction, transition speed, delay, loop, mousewheel. (See the first image below).
    • Step 2
      Click at row containing the slider and see the row options at the left panel. Go to Design -> Background Image and upload an image. You will see the image displayed at the left panel of the screen. This si the slider image. (See the second image below).
    • Step 3
      At this point you can add some content in slider. Click at the gray ballon that appears in column insider slider and add any elemnt you want. For a simple slider usually can be used 'Custom Heading' element. Select the options of this element on Customizer panel. (See the third image below).
    • Step 4
      We have added a button in the below example. Click at button edit icon and select the button options in customizer. Only some button options are displayed in this section. To choose the deafult button type and styling go to Styling -> Button in theme options menu. (See the forth image below).
    • Step 5
      Add another slide by clicking '+' button at the right top angle of codeless slider element. You can clone the created slide and change only the text in second slide (See the 5th image below).

    Revolution Slider

    June includes the most popular and best seller Slider Revolution Created By ThemePunch. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. Here we have outlined the most important featurest and instructions but you can find the full sldier documentation at the official plugins page.

    Revolution Slider Documentation Purchase Plugin For Auto Updates

    How To Create A New Slider Revolution Slider

    Step 1 – Click on the 'Slider Revolution' menu on your WP admin main navigation. At slider panel, click the 'New Slider' button.
    Step 2 – Select the content source type from the 1st section called 'Content Source'. Read the Revolution Slider Documentation for more info about content source types.
    Step 3 – Insert a slider name and alias from the 2nd section called 'Slider Title & Shortcode'. The alias text will generate a shortcode that can be used in the editing field of pages or posts.
    Step 4 – Select a layout at 'Select a Slider Type' section and each type will have its own settings. If you've selected a Slider Type, you can also choose to load a preset from that Slider Type.
    Step 5 – Set the layout and resolution settings at 'Slide Layout' section. Here, you can set different heights and widths for your slider when viewed on different mobile screens or viewports.
    Step 6 – On the right side panel, you'll find many more options you can set for you slider, such as General, Layout & Visual, Navigation, etc.
    Step 7 – If you have finished setting the options, click the button 'Save Settings' at the very bottom of the page, or the green save icon on the top of the screen.

    How To Add Slides To Your Slider

    Step 1 – Go to the Slider Revolution menu on your WP admin main menu navigation and select the Slider you'd like to add slides to from the Slider Revolution section.
    Step 2 – Click the 'Add Slide’ button and select the type of slide you'd like to add. It will create a new blank slide.
    Step 3 – You can change the title of your new slide by clicking the name field. Enter your new name, then click the pencil icon right beside it to save your new slider name.
    Step 4 – Find these tabs and choose the options you want: Main Background, General Settings, Thumbnail, Slide Animation, Link & SEO, etc. We won't go into detail on what each option in these tabs do, you can chekc hte Revolution Slider documentation for more info.
    Step 5 – Below the page is the Slide Editor. To add a new layer, hover over the blue 'Add Layer' button on the top left side and select which type of layer you’d like to add. You can add a Text/HTML layer, an Image layer, a Video layer, a Button layer, a Shape layer, etc.
    Step 6 – Once you add a layer, You can customize it further by using the tabs on top of the canvas. These tabs are the Style tab, Animation tab, Loop tab, Visibility tab, Behaviour tab, etc.
    Step 7– Once finished, click the green save icon on the upper right part of the screen. Repeat this process for any new slides you'd like to create.

    How to add Revolution Slider in pages

    It's very easy to add revolution sldier in every part of the page using Visual Builder. You can find it at the list of elements. Revolution Slider element has the same options as all the elements, it can be deleted, cloned, moved with drag and drop anywhere on page.

    Layer Slider

    June includes the popular Layer Slider Created By Kreatura. It is slider for creating image galleries, content sliders, and slideshows with must-see effects, even from your WordPress posts and pages. Below we have described how to cerate a slider with Layer Slider and how to add it on page. For more info about Layer Slider please read the Layer Slider documentation.

    Layer Slider Documentation Purchase Plugin For Auto Updates

    How To Create A New Layer Slider

    Step 1 – Click on 'Layer Slider' menu on your WP Admin main navigation, then click the 'Add New' button on the top of the page, give the slider a name, then click 'Add Slider' to add it to the list.
    Step 2 – The 'Slider Settings' tab will open and allow you to set the general settings for your slider: the width, height, responsive, full width, and more.
    Step 4 – Once you are done, click 'Save Changes' to save the slider. Next you can add slides, see the information below.

    How To Add Slides To Your Slider

    Step 1 – Open the Slider you’d like to add slides to, then click on the 'Slides' tab at the top of the page.
    Step 2 – The first slide will already be created. Add a background image for the slide, set thumbnails, transitions, links and more in the Slide Options box above the Slider Preview window.
    Step 3 – Each slide you create can have multiple layers added to it. The layers show up below the slider preview window. Click 'Add New' to create a new layer. An editing section will display once clicked.
    Step 4 – Click the 'Enter Preview' button to view a preview of the slider and layers.
    Step 5 – When finished, click the 'Save Changes' to save it.
    Step 6 – Add more slides by clicking the '+' icon.

    How to update the premium sliders

    When you purchase June theme (any other theme) that bundles Revolution Slider and Layer Slider you get to use these Sliders with the theme. However, your purchase of June does not give you an individual license for the Revolution Slider and Layer Slider to use or download as you wish. Due to license rules, we can only issue new plugin updates when we issue new theme updates. So anytime June is updated, the latest plugin for the Revolution Slider and Layer Slider will be included. This is according to the licensing rules enforced by Envato, and is something out of our control and must abide by. We ensure that the included plugin updates don't have any critical bugs, or conflict with our own update.

    How to get auto plugin updates

    Due to the license rules, the only way to get automatic plugin updates is to purchase the plugins individually through CodeCanyon. Doing this provides you with a regular license for the plugin and a purchase code that can be used for Automatic Plugin Updates.

    Purchase Revolution Slider Purchase Layer Slider

    Purchase code for sliders

    When purchasing June, you'll be provided with a unique Purchase Code that you can use to receive auto-updates, theme support and demo installation. The purchase code you receive can only be used for the June theme, not for the included 3rd party plugins. The 3rd party plugins that come with June can still be used and used as the plugin advertises, however since they are bundled with the theme they can only be used on your June site, and do not come with their own individual purchase code that allows you to recieve premium support/features from the individual plugin author. We provide support for the plugins included in our theme.

    You can only register the Layer & Revolution Slider plugins if you have purchased them individually from CodeCanyon. The status of the plugins state that the site is not authorized to receive updates, this is no cause for alarm. Rest assured that these messages can be ignored and that with every new version of June we release, we always make sure to include the latest available versions of the plugins that come bundled with the theme.

    Other Sliders