标签： extra

The Extra Text Module

The Extra Text Module
The most basic module, but with tons of different applications.

Module Overview

You can use the Text Module to insert text content into your category layouts. This can be useful, for example, if you need to display a disclaimer or notice for certain posts categories (like reviews, perhaps?).
View A Live Demo Of This Module
The Module Options

General Settings
Text Color
If your text is being placed onto a dark background the Text Color should be set to 『Dark』. Visa versa, if your text is being placed onto a light background, the Text Color should be set to 『Light』.
Text Orientation
This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.
Content
This field is where you can enter the body content of your blurb. Text content spans the full width of the column that it is in.
Admin Label
By default, your text module will appear with a label that reads 『Text』 in the builder. The Admin Label allows you to change this label for easy identification.

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.

The Extra Standard Blog Feed Module

The Extra Standard Blog Feed Module
This module will showcase Posts in a classic 「blog-style」 list, or in a masonry block.

Module Overview

The Standard Blog Feed Module displays posts using Extra』s standard post listing layout. You can use multiple Blog Feed Modules on a single layout to create truly unique content listings.
View A Live Demo Of This Module
The Module Options

General Settings
Categories
Choose the categories from which this module should display posts.
Blog Feed Title
An optional title to display for this module if pagination is enabled.
Posts Per Page
Define the number of posts to be displayed per page when pagination is enabled.
Show Pagination
This allows you to enable/disable pagination.
Show Author
Include the author in each posts』 post-meta information.
Show Categories
Include categories in each posts』 post-meta information.
Show Featured Image
Show the posts』 featured image.
Show Read More Button
Show the Read More button after the post excerpt.
Show Date
Include the date in each posts』 post-meta information.
Display Featured Posts Only
Yep, you guessed it! Enable this option to show only featured posts.
Show Comments
Include the comment count in each posts』 post-meta information.
Show Rating
Include the rating in each posts』 post-meta information.
Content
Choose whether the posts』 full content or the posts』 excerpt is shown.
Date Format
The format in which to display the date. This must be specified using a PHP date() format string.
Heading Style
Choose a heading style.
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.
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.

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.

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.

The Extra Code Module

The Extra Code Module
Place custom code onto your page, such as HTML and JS, or input third party shortcodes.

Module Overview

You can use the Code Module to add custom HTML and/or WordPress Shortcodes to your layouts. In the above example we added an e-mail opt-in form using a Shortcode provided by our very own e-mail opt-in plugin, Bloom.
The Module Options

General Settings
Content
Here you can copy and paste your desired code into the module.
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.

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

Using eCommerce In Extra

Using eCommerce In Extra
Extra integrates with WooCommerce, making it easy to create an online store.

Overview
If you require eCommerce functionality, you』ll be glad to know that Extra is 100% compatible with the WooCommerce plugin. We recommend WooCommerce because it provides the best overall balance between feature set, code quality, cost, and support. While you can certainly use other eCommerce plugins, we cannot guarantee full functionality nor can we provide support for issues related to the use of other eCommerce plugins.

WooCommerce Basics
After you enable the plugin, you will see two new top-level menu items in your WordPress Dashboard: 「WooCommerce」 and 「Products」. You can use those menus to adjust your site』s eCommerce settings and to create new products. You can find full documentation on WooCommerce here.
Please note that while the Divi Builder includes various WooCommerce modules, you can also use WooCommerce by itself, without the builder. You can use the standard pages that are created by WooCommerce (Checkout, Shopping Cart, etc) as outlined in their documentation. You can also link directly to your WooCommerce product categories, and/or use the WooCommerce Shortcodes within a Divi Builder Code Module. This gives you the freedom to do just about anything.

Extra Header & Menu Options

Extra Header & Menu Options
Extra header is highly customization, featuring various menu, logo and alignment options.

Customizing The Header & Navigation Area
To begin customizing your website』s Header & Navigation, you must first enter the Theme Customizer by clicking on the Extra >> Theme Customizer menu link within your WordPress Dashboard. Next, find the Header & Navigation panel. Now, click the panel to reveal the relevant settings and then adjust them to your liking.

Header Format
Here you can adjust your header』s general format, such as switching between the Default and Centered layouts. Choosing Centered will place your logo above your navigation menu and it will be centered horizontally within the header. You can also choose to hide your header navigation area until the page is scrolled.

Primary Menu Bar
In this section you can adjust the size, style, and color of your primary navigation menu. This is the larger area at the top of the page which contains your logo and your primary menu links. From within this panel you can adjust the height of your logo, change the background color of the menu bar, change the color of your menu links, and more.

Secondary Menu Bar
The secondary menu bar is the smaller of the two navigation areas. It appears above your main navigation bar. This area will not appear unless you assign a menu to the secondary menu location. In this customizer panel you can customize the style of the secondary navigation bar including its background color, menu link color, and font style.

Fixed Navigation
The fixed navigation bar refers to the state of the navigation bar after scrolling. You will notice that as you scroll the page, your menu bar shrinks and remains fixed to the top of the screen to provide more space on the screen for your content. You can adjust the height of the menu if you think it shrinks too small, and/or you can adjust the colors of the menu and menu links independently from the menu』s non-fixed state.

Header Elements
Header elements are optional elements that you can display in your navigation bar, each of which can be enabled/disabled in this panel. Currently, the available elements include social follow icons, search icon, WooCommerce Cart, & Trending widget (which displays the titles of your most-popular posts like a news ticker).

How To Install The Extra Theme

How To Install The Extra Theme
Installing our themes is a snap using the WordPress Dashboard theme installer.

Download Your Theme
In this tutorial, we will be installing your theme using the Upload feature in your WordPress Dashboard. Before you can upload your theme, you first need to download it from the members area. Login to your account, and then look for the 「Divi」 theme on the list of themes. Click the 「download」 link, and then select the 「Theme Package」 to begin your download.

installing Your Theme In The WordPress Dashboard
To upload your theme, you first need to log in to your WordPress Dashboard. After you have logged in, click the Appearances > Themes tab to open up the themes page. Click the 「Add New」 button on the top of the screen.

On the next screen, click the 「Upload Theme」 button on the top of the page. This will bring you to a new page with an upload link. Click the 「Choose File」 button to open up a window to browse your computer. Locate the Divi.zip file that you just download from the members area, and select it.

After you have selected the file, the window will close. Click the 「Install Now」 button to install your theme. The page will re-load, and after the theme has been fully uploaded, you will be presented with an 「Activate Theme」 link. Click this theme to activate your theme and complete the installation.