The Extra Tabbed Posts Module

The Extra Tabbed Posts Module

The Extra Tabbed Posts Module
Tabbed posts are a great way to consolidate posts into a smaller area, allowing to tab through categories.

Module Overview

The Tabbed Posts Module is just like the Posts Module, but with one extra feature. It allows you to display a tab for each of the categories you enable, essentially making the posts filterable by category on the frontend.
View A Live Demo Of This Module
The Module Options

General Settings
Posts Limit
Define the number of posts to be shown in the slider.
Show Featured Image
Show the posts’ featured image.
Show Author
Include the author in each posts’ post-meta information.
Show Categories
Include categories in each posts’ post-meta information.
Show Comments
Include the comment count in each posts’ post-meta information.
Show Rating
Include the rating in each posts’ post-meta information.
Show Date
Include the date in each posts’ post-meta information.
Sort Method
Choose the method in which the posts will be sorted.
Sort Order
Choose whether the posts will be displayed in descending or ascending order.
Date Format
The format in which to display the date. This must be specified using a PHP date() format string.
Admin Label
This will change the label of the module in the builder for easy identification.
CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.
Module Item Settings
You can add multiple tabs to a Tabbed Posts Module.
Category
Choose the category from which this tab should display posts.
Display Featured Posts Only
Yep, you guessed it! Enable this option to show only featured posts in this tab.

Extra’s Custom Sidebar Widgets

Extra’s Custom Sidebar Widgets

Extra’s Custom Sidebar Widgets
Extra comes with tons of custom widgets built for needs of bloggers and publications.

Overview
WordPress Widgets add content and features inside any widget-ready area on your website, such as your footer or sidebar. In addition to the widgets that come with WordPress by default, Extra includes custom widgets for displaying posts, advertisements, social feeds, and more.

Using Widgets
You can add widgets to your sidebar areas using the drag-and-drop interface in Appearence>>Widgets as demonstrated in the animation below. Next, we’ll take a look at each of Extra’s nine custom widgets in detail.

Authors
With the Authors Widget you can display a list of your site’s authors, each with a profile picture and number of posts stat.

Login
The Login Widget lets you display user login fields to users who are not currently logged in.

Ads
As it’s name implies, the Ads widget allows you to display advertisements. You can configure multiple images in a single instance of the widget and the images will be shown in a round-robin fashion (based on page-load).
Basic Linked Image
Image URL
The image’s source URL. (eg. //yoursite.com/wp-content/uploads/2015/12/image.png)
Link URL
The URL that the image should be linked to. (your affiliate/ad URL)
Custom HTML
Ad HTML
Custom HTML Ad code.

Recent Comments
With the Recent Comments Widget you can display a list of your site’s most recent post comments.

Recent Posts
The Recent Posts Widget lets you display a list of your most recently published posts.

Recent Reviews
With the Recent Reviews Widget you can display a list of your most recently published review posts.

Recent Videos
The Recent Videos Widget lets you display a list of your most recently published posts that use the video post format.

Social Follow
The Social Follow Widget lets you display links to your social profiles along with your follower counts.
Facebook
Page URL
Your page’s Facebook Web Address. You can find this in your page’s About tab.
Page Slug
This is the last part of your page’s URL. The part after http://facebook.com/
App ID & App Secret
To obtain an App ID and App Secret, follow the directions provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same ID & Secret.
Google+
Page URL
Google+ ID
Your page’s Google+ ID.
eg. +elegantthemes
Google API Key
To obtain an API Key, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same API Key.
Youtube
Page URL
Youtube Username
Google API Key
To obtain an API Key, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same API Key.
Vimeo
Channel URL
Channel Name
Tumblr
URL
Keys & Tokens
To obtain the necessary keys and tokens, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same keys and tokens.
Twitter
URL
Keys & Tokens
To obtain the necessary keys and tokens, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same keys and tokens.
Pinterest
URL
Username
Instagram
URL
Username
Access Token
To obtain a token, follow the steps provided here.
The callback URL should use the following format: https://yoursite.com/wp-admin/widgets.php
Note: If you have already done this for Monarch, you can use the same token.

How To Update The Extra Theme

How To Update The Extra Theme

How To Update The Extra Theme
Using our Elegant Updater Plugin, you can update Extra right from your dashboard.

Updating Your Themes & Plugins
Elegant Themes products can be updated normally through the WordPress update system. When new versions of our themes or plugins become available, update notifications will appear in the Dashboard > Updates page of your WordPress Dashboard, as well as within the Themes & Plugins manager. It is important to always keep your themes and plugins updated to ensure compatibility with the latest version of WordPress, to keep your website secure, and to take advantage of the latest and greatest features!
Before you can update, you must first authenticate your Elegant Themes subscription by inputting your Username and API Key into the Updates tab of your theme or plugin settings. Only members with active Elegant Themes accounts have access to the latest versions of our products. Your Username is the username you use when logging in to ElegantThemes.com, and your API Key can be found by logging into your Elegant Themes account and clicking on the Account > Your API Key link. Once you have authenticated your account, you can click the update link when you receive an update notification to automatically update your theme or plugin.
Update Notifications
When new updates become available for any of our themes or plugins, a notification will appear in the Dashboard > Updates page of your website’s WordPress Dashboard.

Authenticating Your Membership
Before you can update your theme or plugin, you must first authenticate your Elegant Themes subscription. Only members with active accounts have access to product updates. To authenticate your account, you will be asked to input two pieces of information into your theme or plugin settings panel: 1) Your Username and 2) Your API Key. Your username is the same username you use when logging in to your ElegantThemes.com account, and your API Key is a unique identifier used to authenticate your account that is only available to you when logging in. To locate your API Key, log in to the Elegant Themes members area and click on the Account > Your API Key link. Copy the API Key displayed on the page. You will by pasting this key into your Theme or Plugin options page.

Once you have copied your API Key, you will need to use it to authenticate your account by pasting it into your theme or plugin options page. Log in to your website’s WordPress Dashboard and navigate to your theme or plugin options page. For Extra, this can be found by clicking the Extra > Theme Options link.

Once you have loaded your theme or plugin options page, look for the Updates tab. Click the Updates tab to reveal the Username and API Key fields. Type your username into the Username field and paste the API Key you copied earlier into the API Key field. You should confirm that you have not copied any extra white spaces by mistake. Click save to complete the account authorization.

Once you have entered your credentials, you are now ready to update your theme. Click on the Dashboard > Updates tab and update your theme or plugin normally using the WordPress update interface. If you do not see any update notifications, or you receive an authentication error when updating, try waiting a bit and then check back later. Sometimes WordPress will cache update notifications and it can take some time for them to appear correctly.

Using Extra’s Theme Options

Using Extra’s Theme Options

Using Extra’s Theme Options
All of Extra’s basic configurations can be modified within the theme options panel.

Theme Options
Every Elegant Theme comes fully loaded with its own custom theme options panel. This is where you can control things like your logo, post meta information, and so much more. These options exist in what we call ePanel, and it can be accessed via the
Extra >> Theme Options menu.

General Settings

Logo
This is where you can upload your own logo file to appear in the header of every page of your website.
Favicon
installing an image here will add a favicon image to represent your site in browser address bars and bookmark menus.
Global Accent Color
This allows you to control your site’s Global Accent Color which is used on all pages.
Sidebar Location
Here you can choose the default location of the Sidebar. You will still be able to control the sidebar location at the individual page/post level.
WooCommerce Sidebar Location
Here you can choose the default location of the Sidebar for WooCommerce pages.
Sidebar
Here you can choose the custom Sidebar (defined in Appearance >> Widgets) that will appear on your site’s category, archive, and index pages.
WooCommerce Sidebar
Here you can choose the custom Sidebar (defined in Appearance >> Widgets) that will appear on your site’s WooCommerce pages.
Social Network Follower Count Refresh
Here you can configure how frequently your social follow counts are retrieved from the social networks.
Social Media Icons
You can control which of Extra’s supported social networks’ icons are enabled using these controls. There is a control for each of the supported networks.
Social Media Profile URLs
In order for an icon to be shown on the frontend it must have a profile URL configured using these controls. Again, there is a control for each of the supported networks.
Numbers of posts per page
Define how many posts you would like to be displayed when a user visits a Category Page, an Archive Page, a Search Results Page, or Tag Page.
Date Format
This option allows you to change how your dates are displayed. For more information please refer to the WordPress codex here:
http://codex.wordpress.org/Formatting_Date_and_Time
Use excerpts when defined
This will enable the use of excerpts in posts or pages.
Responsive shortcodes
This option enables shortcodes to respond to various screen sizes
Google Fonts subsets
This will enable Google Fonts for Non-English languages.
Back To Top Button
This will enable a small button fixed to the bottom-right side of the screen that will scroll the page to the top when clicked.
Smooth Scrolling
This will enable smooth scrolling which is especially useful when using anchor links to link to specific areas of the page.
Custom CSS
This is where you can enter any custom css to customize your site. For extensive CSS modifications we recommend that you always use a child theme.
Navigation > Pages

Exclude pages from the Navigation Bar
All of your existing pages will appear in this window. Every new page will appear in your navigation by default. You can uncheck any page here if you wish to not display a specific page or pages.
Show Dropdown Menus
If you would like to remove the dropdown menus from the pages navigation bar disable this feature.
Display Home Link
By default the theme creates a Home link that, when clicked, leads back to your blog’s homepage. If, however, you are using a static homepage and have already created a page called Home to use, this will result in a duplicate link. In this case you should disable this feature to remove the link.
Sort Pages Links
Choose how page links should be sorted here.
Order Pages Links by Ascending/Descending
Further, specify in which order your sorted page links should appear.
Number of dropdown tiers shown
This options allows you to control how many tiers your pages dropdown menu has. Increasing the number allows for additional menu items to be shown.
Navigation > Categories

Exclude Categories from the Navigation Bar
All of your existing categories will appear in this window. Every new category will appear in your navigation by default. You can uncheck any category page here if you wish to not display a specific category or categories.
Hide Empty Categories
If a category has been made but is not being used by any posts, you can choose whether or not to display it in your navigation. By default empty categories are hidden
Number of Dropdown Tiers Shown
This options allows you to control how many tiers your pages dropdown menu has. Increasing the number allows for additional menu items to be shown.
Sort Category Links
Choose how category links should be sorted here.
Order Category Links by Ascending/Descending
Further, specify in which order your sorted category links should appear.
Navigation > General

Disable top tier dropdown menu links
In some cases users will want to create parent categories or links as placeholders to hold a list of child links or categories. In this case it is not desirable to have the parent links lead anywhere, but instead merely serve an organizational function. Enabling this options will remove the links from all parent pages/categories so that they don’t lead anywhere when clicked.
Layout Settings

Single Post Layout
Choose Which Items to display in the post meta info section
Here you can choose which items appear in the post meta info section on single post pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Show Comments on posts
You can disable this option if you want to remove the comments and comment form from single post pages.
Sharing Icons
You can choose which social networks’ icons are shown on your posts (for social sharing).
Single Page Layout
Show Comments on Pages
By default comments are not placed on pages, however, if you would like to allow people to comment on your pages simply enable this option.
General Settings
Post Info Section
Here you can choose which items appear in the post meta info section on pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Archive Page Style
Choose whether your archive/index pages list posts in the standard layout or the masonry layout.
Ad Management

Here you can control Extra’s five predefined Advertisement areas. Each Ad Area has the following options:
Enable Ad
Enable the Ad Area.
Input advertisement image
Here you can provide your image url
Input advertisement destination url
Here you can provide the URL that the image should link to.
Input Adsense code
Place your Adsense code here (if applicable).
SEO > Single Post Page SEO

The SEO options are only applied when you are not using a supported SEO plugin. Currently, Elegant Themes support Yoast SEO and All-In-One SEO.
Enable canonical URL’s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL’s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine’s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treaded individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Enable meta descriptions
Check this box if you want to display meta descriptions on category/archive pages. The description is based off the category description you choose when creating/edit your category in wp-admin.
Choose title autogeneration method
Here you can choose how your titles on index pages are generated. You can change which order your blog name and index title are displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and index page name when using autogenerated post titles. Common values are | or –

Enable custom titles
By default the theme creates post titles based on the title of your post and your blog name. If you would like to make your meta title different than your actual post title you can define a custom title for each post using custom fields. This option must be enabled for custom titles to work, and you must choose a custom field name for your title below.
Enable custom description
If you would like to add a meta description to your post you can do so using custom fields. This option must be enabled for descriptions to be displayed on post pages. You can add your meta description using custom fields based off the custom field name you define below.
Enable custom keywords
If you would like to add meta keywords to your post you can do so using custom fields. This option must be enabled for keywords to be displayed on post pages. You can add your meta keywords using custom fields based off the custom field name you define below.
Enable canonical URL’s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL’s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine’s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Custom field Name to be used for title
When you define your title using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom title you would like to use.
Custom field Name to be used for description
When you define your meta description using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom description you would like to use.
Custom field Name to be used for keywords
When you define your keywords using custom fields you should use this value for the custom field Name. The Value of your custom field should be the meta keywords you would like to use, separated by commas.
If custom titles are disabled, choose auto-generation method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
SEO > Index Page SEO

Enable custom title
By default the theme uses a combination of your blog name and your blog description, as defined when you created your blog, to create your homepage titles. However if you want to create a custom title then simply enable this option and fill in the custom title field below.
Enable meta description
By default the theme uses your blog description, as defined when you created your blog, to fill in the meta description field. If you would like to use a different description then enable this option and fill in the custom description field below.
Enable meta keywords
By default the theme does not add keywords to your header. Most search engines don’t use keywords to rank your site anymore, but some people define them anyway just in case. If you want to add meta keywords to your header then enable this option and fill in the custom keywords field below.
Enable canonical URL’s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URLs all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine’s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Homepage custom title (if enabled)
If you have enabled custom titles you can add your custom title here. Whatever you type here will be placed between the tags in header.php
Homepage meta description (if enabled)
If you have enabled meta descriptions you can add your custom description here.
Homepage meta keywords (if enabled)
If you have enabled meta keywords you can add your custom keywords here. Keywords should be separated by commas. For example: wordpress,themes,templates,elegant
If custom titles are disabled, choose autogeneration method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
Integration

The integrate tab is great for adding third party code to certain areas of the theme. Code can be added to your websites head and body, as well as before and after each post. For example, if you need to add a tracking code to your website (such as google analytics), but are unsure which PHP file to edit in order to add the code to the of your website, you can simply input this code into the “body” field of the Integration tab.
For more information on getting the most out of the Integration Tab, see our blog post on
Ways To Use The Integration Tab In Our ePanel Theme Options

Four Creative Ways To Use The Integration Tab In Our ePanel Theme Options


Enable header code
Disabling this option will remove the header code below from your blog. This allows you to remove the code while saving it for later use.
Enable body code
Disabling this option will remove the body code below from your blog. This allows you to remove the code while saving it for later use.
Enable single top code
Disabling this option will remove the single top code below from your blog. This allows you to remove the code while saving it for later use.
Enable single bottom code
Disabling this option will remove the single bottom code below from your blog. This allows you to remove the code while saving it for later use.
Add code to the of your blog
Any code you place here will appear in the head section of every page of your blog. This is useful when you need to add javascript or css to all pages.
Add code to the (good for tracking codes such as google analytics)
Any code you place here will appear in body section of all pages of your blog. This is useful if you need to input a tracking pixel for a state counter such as Google Analytics.
Add code to the top of your posts
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.
Add code to the bottom of your posts, before the comments
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.

Using The Extra Theme & Module Customizer

Using The Extra Theme & Module Customizer

Using The Extra Theme & Module Customizer
Using the theme customizer, you can adjust just about every part of Extra’s design.

Accessing The Theme & Module Customizers
The Theme & Module customizers give you control over just about every single element on your page. Want to adjust the size or spacing of text or an element of your website at the click of a button? The Customizer is where you want to start! To customizer panels can be accessed via the
Extra > Theme Customizer and Extra > Module Customizer links in your WordPress Dashboard. The Theme Customizer gives you control over site-wide theme elements, such as your menu & logo size or your body and header text styles. The Module Customizer gives you size & font controls over individual modules. Do you want to reduce the height of all the slider modules on your website? That can be done in just a few seconds via the Module Customizer! Let’s take a closer look.

Exploring The Theme Customizer
First we will explore the Theme Customizer. There are hundreds of options here, separated into different categories. When you first open up the customizer you will see several panels, such as “Header & Navigation” and “General Settings.” Opening these panels will reveal the options related to those areas of your website. As you adjust the settings within the customizer, you will be given a live preview of their effects. Once you save your changes, the new styles will be reflected on your live website.

You can do just about anything with the Theme Customizer without ever touching a line of code. For a more detailed look at some of the different customizer options, and some creative ways to use these options together, be sure to watch the instructional video above.
Exploring The Module Customizer
The Module Customizer works just like the Theme Customizer, except it focuses on the customization of individual modules as opposed to general website elements. When you open up the Module Customizer, you will see a separate panel for each of the Divi Builder modules. Opening up these panels will reveal customizer controls that can be used to adjust the spacing and typography of each module across your entire website.
For example, if you think that the FullWidth Slider Module’s default settings have too much padding, you can simply open the Fullwidth Slider panel and adjust the padding slider. Now whenever you add a new Fullwidth Slider to a page, the customized padding value will be reflected. There’s no need to use a Child Theme or adjust the Advanced Module settings for the individual module. The Module Customizer is a collection of global module controls.

Ratings & Reviews In Extra

Ratings & Reviews In Extra

Ratings & Reviews In Extra
Extra comes with an integrated user and author rating system that can be used for reviews.

Rating Systems
Extra comes with two different rating systems out-of-the-box: a system that lets you add a product
rating to any post, as well as a user rating system. Both of these features are perfect for fostering
reader engagement.

Product Ratings
You can add a Product Review to any posts that you like. When you create a new post, you will notice a box labeled “Review Box Contents.”. Within this box there are fields with which you can configure the content for the Product Review Box. If you do not want a Product Review Box to be shown below a post’s content, simply leave the fields empty.
Review Box Title
This is the text that will be used as the Review Box’s heading.
Summary
The text entered here will appear to the right of the products overall rating.
Summary Title
This is the text that will appear in bold before your summary.
Breakdown
Breakdowns are the components that make up the overall rating.
Title
This is the title text describing the breakdown.
Rating
This is your rating for the breakdown, it should be a number between 0 and 100.

User Ratings
Your site’s visitors can submit a star rating on any posts for which you haven’t explicitly disabled (hidden) Ratings. When you create a new post, you will notice a box labeled “Extra Settings”. To disable ratings for the post, simply select the option labeled “Hide Post Rating”.

A post’s overall star rating is displayed with it’s meta information (eg. Date, Categories, Tags, etc) in various areas throughout the theme. You can enable/disable the inclusion of ratings in post meta information globally for your site’s posts, pages, & archive pages from within Extra’s ePanel Settings.
You can also control the inclusion of ratings in posts’ meta information for any modules which display post meta (eg. Blog Module, Posts Modules, Portfolio Modules, etc). You can control it for all modules (globally) from within Extra’s Module Customizer as well as at the individual module level from within the module’s settings (while editing a post or page).

Projects & Portfolios In Extra

Projects & Portfolios In Extra

Projects & Portfolios In Extra
Extra’s project post type can be used to create an online digital portfolio.

Overview
Extra’s includes a custom project post type. One of the ways it can be used is to create an online digital portfolio. In Extra, a Portfolio is basically a group of Project posts, represented by their featured images and post meta information, that link back to the individual projects’ page.
There are five Portfolio layouts/styles included with Extra, including: Standard, Standard Grid, Fullwidth Grid, Masonry Grid and Fullwidth Carousel.
How To Create A New Project
Extra makes building a project fun and easy. When you installed Extra, a ‘Projects’ menu item was added to the main menu of your WordPress Dashboard so you can create Projects in the same manner as a Post or Page. You also have the option to use the basic project layout, or to use the Divi Builder to create truly amazing project layouts.

Creating Your Project

Title
Start off by defining your project title.
Content Editor
When using the basic project layout (instead of the Divi Builder), your featured image will appear at the top of the page above any content that you place in the content editor.
Categories
Project categories are separate from post categories so that you can have full control over what appears inside of your portfolios. Here you can add a new category or choose from existing categories.
Skills
Skills are to Project Posts as Tags are to Regular Posts. They provide another method of organizing your projects as well as an easy way for your site’s visitors to navigate and discover your portfolio content.
Extra Settings
Here you can configure various post options for your project such as which of your Sidebars should be displayed, the Sidebar display location, post meta visibility, etc.
Project Details Options Group
The options inside this settings box allow you to configure what is displayed in the Project Details area on the frontend.
Project Details Title
Here you can configure the title for the Project Details area. The default title is “Project Details”.
Project URL
When using the basic project layout (instead of the Divi Builder), your featured image will appear at the top of the page above any content that you place in the content editor.
Open In New Window
Choose whether or not the project URL should open in a new window.
Project URL Text
The text that will be used to create a link to your project URL.
Project Description Location
Here yo can choose where on the page the Project Details area will be displayed (eg. below content, in the sidebar, etc).
Project Short Description
A short description for your project to be included in the Project Details area.
Featured Image
Here you can select a featured image for your project by choosing/installing an image via the WordPress Media Library. This will be the image that will be used to create the thumbnail that represents your project in portfolios.
A thumbnail is a copy of an image that has been scaled and/or cropped to fit a predefined size. For best results when using a grid layout, we recommend that all of your project featured images have the same aspect ratio.
Project Gallery
The options inside this settings box allow you to configure an Image Gallery Slider for your project.
Add Images
This option allows you to use the WordPress Media Library to add existing photos to your project gallery and/or upload new photos.
Extended Layout
As an alternative to the basic project layout, you can use the Divi Builder to create extended layouts. In this mode, you have just as much creative freedom as you do when creating any other post/page with the Divi Builder.
NOTE: If you choose to use the builder, you will start from a blank canvas. That means all of the elements from the basic project layout (as described above) are removed (i.e. Title, Categories, Featured Image, Skills, and Date). However, you can still add this information to your project layout using the appropriate builder modules.

An Overview Of Post Formats In Extra

An Overview Of Post Formats In Extra

An Overview Of Post Formats In Extra
Extra supports all major post formats, giving your blog a wonderful variation of media.

Extra Supports All The Major Post Formats
When you write a blog post, you can apply one of 7 different post formats to the post: Standard, Video, Audio, Quote, Gallery, Link, and Map. Each of these formats structures your post differently, putting more focus on the type of content that the format represents.

When you write a blog post, you will notice a box to the right of your text editor labeled “Format.” Within this box are the 6 format options. Choosing “Standard” will result in a normally-formatted blog post, while each of the other options has a unique design associated with their format type.

Using The Video Post Format
For posts using the Video Post Format, a video is placed at the top of the post. Additionally, the post’s Featured Image will be replaced with an embedded video in post listings.
Upon selecting the “Video” post format from within the Format options box, you will notice a new settings box has been added in the left column. There you can define your video(s) by either copy/pasting a video URL (from providers like Youtube and Vimeo) or by installing your own HTML5 video via the WordPress Media Library.

Using The Audio Post Format
Posts using the Audio Post Format will display an audio player at the top of their content. The post’s Featured Image on index pages will be replaced by an audio player as well. Upon selecting the “Audio” post format from within the Format options box, you will notice a new settings box has been added in the left column. You can use the options provided there to define an Audio file for the post.

Using The Quote Post Format
Applying the Quote Post Format to a post will display a stylized quote at the top of your post. The stylized quote will also replace the post’s Featured Image on all index pages.
Upon selecting the Quote Post Format from within the Format options box, you will notice a new settings box has been added in the left column. You can use the options provided there to define a quote for the post.

Using The Gallery Post Format
An image gallery is displayed at the top of the post content when you apply the Gallery Post Format to a post. A gallery slider will replace the post’s Featured Image on all index pages.
Upon selecting the Gallery Post Format from within the Format options box, you will notice a new settings box has been added in the left column. You can use the options provided there to define your gallery images for the post.

Using The Link Post Format
Applying the Link Post Format to a post will display a stylized link at the top of your post. The stylized link will also replace the post’s Featured Image on all index pages.
Upon selecting the Link Post Format from within the Format options box, you will notice a new settings box has been added in the left column. You can use the options provided there to define a link for the post.

Using The Map Post Format
When you apply the Map Post Format to a post, a map centered on a location of your choosing will appear prominently at the top of the post content. This can be useful in various situations, especially for sites where posts might be connected to a physical location (a restaurant review site is one example that comes to mind).
Upon selecting the Map Post Format from within the Format options box, you will notice a new settings box has been added in the left column. You can use the options provided there to define a map point for the post as well as configure the map’s zoom level and positioning.

Google Maps API Key
An API key is required in order to use the Contat Page Template since it contains a google Map. To obtain an API key, log into the Google Developers Console, which will guide you through the process, and activate the Google Maps JavaScript API and any related services automatically. The first thing you will be asked to do is create a new project.

Next you will be asked to name your project. You can name the project anything you like. In this example, I simply called it “Maps.” You can also input your website’s domain name (add an * in front of it if you allow access from both www.domain.com and domain.com) to make sure to other website’s are allowed to your your API key.

After you have created an named your project, you will be presented with an API Key that you can use.

After you have obtained an API key, you must copy/paste it into the theme options panel by navigating to: Divi>>Theme Options>>General Settings>>Google Maps API Key

Using Extra’s Page Templates

Using Extra’s Page Templates

Using Extra’s Page Templates
Extra comes with a variety of page templates that can be used in various situations.

Using Page Templates
Extra includes a collection of page templates that can be used for a variety of purposes. You can apply any of these page templates to any page that you create. When you edit a page in your WordPress Dashboard, you will notice a Templates dropdown menu located in the Page Attributes box which appears to the right of the text editor. There you can choose from a list of available page templates.

Once a template is selected and if the selected template has configurable options, an additional settings box labeled
“ Page Template Settings”, where “>Theme Options>>General Settings>>Google Maps API Key
Member Login

Portfolio

Sitemap

Timeline

An Introduction To The Extra Theme

An Introduction To The Extra Theme

An Introduction To The Extra Theme
Learn the basics of the theme in this complete video overview. Newcomers, start here!

What Is Extra?
The first thing you need to know about Extra is that it’s built on a rock-solid foundation, our Divi Builder. The Divi Builder allows you to create beautiful and unique post and page layouts visually, without touching a single line of code. It gives anyone the ability to create truly dynamic websites with ease.
In many ways, Extra was conceived as the counterpart to the Divi Theme. Extra does the things that Divi was never meant to do. Beautiful, versatile, magazine-like layouts that cater to a variety of blogs and online publications are Extra’s forte. Robust customization options that allow for unique and elegant post feeds with a focus on social interaction and user engagement are Extra’s second nature. The bottom line is this: Where Divi’s primary focus is on the page, Extra’s focus is on the post feed.
Extra’s Category Builder The Divi Builder: Extended
Extra extends upon its Divi Builder foundation with a brand new set of post-based modules. These modules bring the builder’s advanced drag-and-drop functionality to your home and category pages. Collectively, we call these new modules the Category Builder. Extra’s Category Builder gives you control over your home and category pages like never before, allowing you to completely build them from the ground up. This lets you break away from the standard, prebuilt category pages, so you can create unique experiences on a per-category-basis.

Category Builder Modules
Extra comes with a new set of Divi Builder modules built specifically for the needs of bloggers and online publications. These new modules can be used to build a variety of different homepage and category layouts. Now you can build a post feed to meet the needs of your unique content.
There are currently two main types of category modules with which you can display posts:
Widget Style
Posts
Posts Carousel
Posts Slider
Tabbed Posts
Feed Style
Blog Feed
Blog Feed (Masonry)
Through the combination of different column structures and modules, a wide range of category and homepage designs can be created. Whether you are running a personal blog or a huge online media website, Extra can be tailored to suite your needs.
Creating A Category Layout
Creating a Category Layout is done much in the same way as you would create a new page or post. You will start by navigating to Extra >> Category Builder in your WordPress Dashboard. You will then be presented with a list of your existing Category Layouts. To create a new layout, click the Add New button that appears at the top of the page, next to the title. Next, use the Divi Builder interface to create your layout. Hint: Start out by clicking “Insert Columns”.

Configuring A Category Layout
In the left column you will notice a box labeled Categories as well as a box labeled Layout Usage and a box labeled Extra Settings. They allow you to configure when and where your layout will be used on the frontend of your website and if/how the sidebar should be shown.

Products & Projects
In addition to standard blog posts, Extra includes full support for two other important areas: Projects and Products. If you are a designer looking to showcase your recent work, Extra makes it dead simple. Looking to sell products to your readers? Extra makes that easy as well with built-in WooCommerce integration.

Post & Product Reviews
Give your review posts some extra polish using Extra’s custom review system. It includes a built-in User Rating System allowing your site’s users to rate posts as well. This fosters user engagement and provides valuable insight.