Author 诗语

Creating Blog Posts

Before you can display Blog posts on your site, you must first create the individual posts. This is done via the 『Posts』 link from the WordPress dashboard. Here you can see 『All Posts』 as well as being able to 『Add New』 Posts and manage 『Categories』 and 『Tags』.
How To Create A Blog PostStep 1 – Navigate to Posts in your WordPress admin sidebar.
Step 2 – Click on the Add New button to create a post. Insert a title, then insert any post content in the editing field. You can use the Avada Builder to create advanced blog post layouts, or you can just add simple text to create a more simple blog post.
Step 3 – Add and assign Categories on the right side of the post. You can add Categories on the fly by clicking the + Add New Category link at the bottom of the Categories section, or you can navigate to Posts Slideshows tab.
Step 7 – For a video post, paste the iFrame embed from either Youtube or Vimeo into the Video Embed Code field on the Post tab of the Avada Page Options.
Step 8 – Select any number of post options in the Post Options box.
Step 9 – Once you are finished, click Publish to save the post.
Next Step: Blog Single Posts

Blog Archive Pages

The Blog Archive pages are automatically generated from the Categories, Tags, and other meta information that you enter into your individual blog posts. When you are viewing a blog post on the front end, and click on a Category or Tag (if the meta info is being displayed), you will be taken to a Blog Archive page, filtered to that Category or Tag.
There are also archive pages for authors, and month, and Avada provides a number of widgets that show archive pages, such as Categories, Archive, Tag Cloud, Author, etc.
These pages cannot be edited directly but can be styled and configured via the General Blog Options, found in the Theme Options at Avada > General Blog.  Please see the Blog Theme Options doc for more details on what can be configured here. You can also add Sidebars to them in the Avada > Sidebars > Blog Archive tab in the Theme Options.
The items shown on the Archive pages pull their information from the individual blog posts, including their Featured Image, Category, Tags, etc, so even if you are not displaying this information through the Blog Element, or on the Single Blog Posts, it』s important it』s entered if you want the archives to be optimally organized and presented.
In the image below, you can see the categories and tags that have been added for this blog post on the Forum Demo, and displayed through the Blog Element. If you click on one of these categories or tags, you will be taken to an archive page, filtered to that category or tag.
In the image below, I have clicked on the Photography category, and here we can see we have been taken to the filtered archive page for that category, as seen in the URL. The layout for these pages, as mentioned previously, is controlled in the Theme Options > Blog > General Blog tab, where you can choose from the various layouts and affect the display fo the page in many ways.,Post Meta InfoAlternatively, through the Blog Element and the Theme Options, you can hide the meta information on your posts, and although the archive pages will still be generated, your users might never find them. It』s totally up to you how you present your blog posts. Have a look at the SEO demo, for example, to see a blog where all meta information has been hidden, and archive pages are hard to find.
In the image below, from the Blog Element, you can see an example of how granular the control for the Meta Information is. You can turn it off entirely, or you can choose to show any particular type of meta info on your blog. To control the Meta Info for the Archive pages, head to the Theme Options > Blog > Blog Meta tab, where you have the same controls for archive pages and assigned blog pages.
Next Step: Blog Post Formats

Creating Custom Blog Layouts with Avada Layouts

With the introduction of Avada 6.2, and Avada Layouts, it is now easy to create completely custom Layouts for your Blog pages. The two main Blog related areas you can create custom Layouts for are the Single Post Page, and the Archives page.
With the introduction of Layout Section Elements, and with the help of Dynamic Content within normal Design Elements, you can build virtually any layout you can think of, using the full power of the Fusion Builder. And using the power of Conditional Layouts, you can specify when your Layout will be used. You could make a Custom Layout for ALL single post pages, just for a single post, or category etc, or you could also just exclude a single post of category. The Conditions can be as simple or as complex as you need them to be.
Single Post LayoutIf you want to create a Custom Layout for your Single Post Blog pages, create a Conditional Layout (The Layout Builder is found at Avada > Layouts) and start by setting the Conditions on the Layout to show it on all single posts in the Layout Conditions dialog (Posts > All Posts). You can then build your Layout using various Custom Layout Sections.
When building the Content Layout Section, you will find the Layout Section Elements, most of which you will use to design the content section of the Single Post Layout. These dynamic elements pull the required data from the database based on the conditions of the layout, and for a Blog Single Post Layout, you could choose from such Elements as Pagination, Content, Author, Featured Images Slider, Related Posts, and Comments to design your layout.
See the video below for a rundown on how to Build a Custom Single Post Layout.
Post Archives LayoutYou might also want to create a Custom layout for your Blog Archives pages. Just remember, that a Custom Layout can include as little or as much as you want.
You may just want to add a Custom Page Title Bar, or Custom Footer, but you might also want to customise the Content Layout Section of the page. For this, there is the Archive Element, one of the Layout Section Elements, as well as the other Layout Section and normal design elements. See the How To Use The Layout Section Elements video for more info on this.
If you don』t set a Custom Content Layout Section, your Archives layout will be controlled from the Blog Archives Layout Options, found under the Theme Options > General Blog tab.
See the video below for a rundown on how to build a Custom Archives Layout.

Blog Featured Images

Every Blog Post you create requires at least one featured image. The featured image that you upload for a Blog Post will display on its Single Post Page (unless you disable it globally via the Theme Options or locally via the Fusion Page Options), as a thumbnail when using the Blog or Recent Posts Element, on the Post Slider Element, on Archive Page thumbnails, and even on Search Results.
The image below shows the Blog page of the Gym Demo, with the Blog Element displaying a Grid layout, and Featured Images of various aspect ratios.,Adding Featured ImagesAs discussed earlier, you add Featured images on the individual blog posts. You only need one, but you can upload up to 5 by default, and it』s possible to add a video featured image as well. See the Blog Single Posts document for more info on the options you have with uploading multiple Featured images.,Size Of Featured ImagesThis one requires some consideration. Where you wish to display the Featured Images plays a role in your considerations.
When you add a Featured Image, by default, it shows at the top of the individual blog post. This image displays at the full width of the content (site width) or the full width of the Column if using Sidebars. So if you』re going with the default, it』s important that your Featured Images are the appropriate width for your site.
If desired, the Featured Image can also be turned off on Single Blog Pages on the Theme Options > Blog > Blog Single Post tab, and for the Archive pages on the Theme Options > Blog > General Blog tab. If you take this path, the Featured Image will still show as a thumbnail on the Archive Pages, and when using the Blog, or Recent Posts Element, and possibly much larger if using the Post Slider Element.
In this case, you can use a smaller featured image size. We recommend using an image at least 700px in width, as the Recent Posts Element requires Featured Images to be at least this size for them to be uniformly cropped when the images are different aspect ratios. In any case, even if you have uploaded a larger Featured Image, Avada is smart enough to only load the image size that is necessary for the layout, rather than just loading the full-size image. Please see our How Avada Controls Responsive Images document for more information on this.
If on the other hand, you want to have Featured Images on your single post pages, or you want to use the Post Slider Element, or add the Featured Images into your posts manually, you might want to upload an image size closer to the site width, or even bigger. The bottom line here is that Avada controls responsive images for you, and so it』s better to upload a larger Featured Image than one too small.
767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada,Aspect Ratio Of Featured ImagesAnother thing to consider is the aspect ratio of your Featured Images. With the Blog Element, if you want consistency with layout, it』s best to use all the same size and aspect ratio for your Featured Images. However, this is not at all necessary. As seen above on the image from the Gym Demo at the top of the page, a Grid Layout with images of different aspect ratios can look great. And if you wanted to use the Masonry Layout, having images of different aspect ratios is a pretty much a necessity. So it all depends on your goals. What is important to know is how the different Elements and Layouts affect the original Featured Images.,Blog ElementWhen using the Blog Element, most of the layouts respect the original aspect ratio of the Featured Images. The exception to this is the Medium and Medium Alternate layouts, which both crop the images to a uniform aspect ratio for a better looking layout.,Recent Posts ElementWith the Recent Posts Element, there is a Picture Size option in the Element Options. The choices are Fixed or Auto. Fixed means that the images will be cropped to all have the same aspect ratio, whereas if you choose Auto, it will respect the original aspect ratio. As illustrated below, if all images had the same size and aspect ratio, then it wouldn』t matter which option was chosen.
As noted above, for the Fixed option to uniformly crop all images, all the Featured Images need to be a minimum of 700px in width.,Featured Image Theme OptionsThere is a range of global Theme Options that relate to Blog Featured images. See them all below.

Featured Image / Video on Blog Archive Page – This option turns the Featured Image on or off on Blog Archive pages and is found on the Theme Options > Blog > General Blog tab.

Featured Image / Video on Single Blog Post – This option turns the Featured Image on or off on Single Blog Posts and is found on the Theme Options > Blog > Blog Single Post tab.

Posts Slideshow Images – This option controls the number of featured image boxes for blog/portfolio posts and is found on the Theme Options > Slideshows tab.

Lightbox For Featured Images On Single Post Pages – This option enables the lightbox on single blog and portfolio posts for the main featured images and is found on the Theme Options > Lightbox tab.

Live Search Display Featured Image – This option displays the featured image of each live search result and is found on the Theme Options > Search > Search Form tab.

Featured Images for Search Results – This option displays featured images for search results and is found on the Theme Options > Search > Search Page tab.

Image Placeholders – This option displays a placeholder image for posts that do not have a featured image. This allows the post to display on portfolio archives and related posts/projects carousels and is found on the Theme Options > Extra > Miscellaneous tab.

Related Posts / Projects Image Size –  This option relates to the Related Projects when using Blogs and Portfolios. Please see the Related Posts doc for more info. This is found on the Theme Options > Extra > Related Posts / Projects tab.

Image Rollover –  This option displays the rollover graphic on blog and portfolio featured images and is found on the Theme Options > Extra > Featured Image Rollover tab.
Next Step: Blog Archive Pages

Displaying Blog Posts On Your Site

Once you』ve created your individual blog posts, you can now display the blog in many ways on your site. To get an idea of the layout possibilities,  visit the Blog Element Demo page.
There are three main methods you can use to display a blog in Avada – assigning a posts page, using the Blog Element, or using the Recent Posts Element. There is also a Post Slider Element which can be used to supplement the other Elements. Indeed, on the Church Demo News page, you can see all three Elements at work. Read on to find out more about the various methods of Displaying Blog Posts on Your Site in Avada.

There are three main methods you can use to display a blog in Avada – assigning a posts page, using the Blog Element, or using the Recent Posts Element. There is also a Post Slider Element which can be used to supplement the other Elements. Indeed, on the Church Demo News page, you can see all three Elements at work. Read on to find out more about the various methods of Displaying Blog Posts on Your Site in Avada.,Overview
Assigning a Posts Page

Using The Blog Element

Using The Recent Posts Element

Using The Post Slider Element,Assigning A Posts Page
The first method we will cover is the standard WordPress method, which is setting up an assigned blog or post page. It』s as easy as making a new blank page to hold the posts, and then telling WordPress to use that page as the post page. This method works fine, but lacks some of the flexibility of other methods using our Blog Elements.

Step 1 – Create a new page by navigating to the 『Pages』 tab in your WordPress admin sidebar. Once here, click the 『Add New』 button at the top of the page.
Step 2 – Input a new name for your page, like 『News』 or 『Blog』, then find the 『Page Attributes』 box on the right side. Under the Template section, ensure the 『Default Template』 option is selected.
Step 3 – If you wish, you can choose to customize the page using options located under the Fusion Page Options. When you』re done, click 『Publish』 to save the page.
Step 4 – To set a page as your main blog page, navigate to Settings > Reading and find the 『Posts Page』 option, then select the page you have created from the dropdown list. Doing this will automatically pull your blog posts and place them on the assigned page.
Fusion Theme Options For The Assigned Blog PageWhen using the assigned posts page as described above, all the options for it are located in the Avada > Theme Options > Blog tabs. There are dozens of options to choose from like layout, sidebars, excerpts, full width, etc. There are general blog options, single post page options, and blog meta options. Each one has titles and descriptions to help you better understand what they do. For full details, see the Blog Theme Options doc.
767,636 Businesses Trust Avada
Get Avada767,636 Businesses Trust Avada
Get Avada767,636 Businesses Trust Avada
Get Avada,Using The Blog ElementThe second method of displaying a blog in Avada is to use the Blog Element. This is a very versatile method, as the Blog Element can be placed wherever you want in your content, on any page, or indeed, on any number of pages. It can also be used in conjunction with the other Blog related Elements, like the Recent Posts Element or the Post Slider Element, as well.
Step 1 – When using the Blog Element for your main Blog page, you do not need, or indeed, want to have a posts page assigned in the WordPress Settings > Reading section. Under the Posts Page, make sure no page is selected as the Posts Page (it should show –Select– in the Posts Page field).
Step 2 – Create a page for your Blog and add the Blog Element to it, along with any other content you might wish. This method allows you full flexibility with layout and content.
Step 3 – Configure the Blog Element to display as per your preferences. There are a huge number of options, including choosing or excluding certain categories, different layout options, post offset options, and many other metadata options. For a full list of possibilities, please see the examples of various Blog layouts from the Blog Menu item on the Classic Demo and read the Blog Element doc.
Step 4 – Remember to add this newly created page to your main menu.
See below for a live example of the Blog Element. It is a very powerful element, as it can be used in a multitude of ways. It can be placed on multiple pages, or even multiple instances on the same page, and in conjunction with the post offset and page category options, the possibilities are almost endless.

Avada Beer: Deconstructing a Prebuilt Website

Avada Electrician: Deconstructing a Prebuilt Website

Avada Barber Shop: Deconstructing a Prebuilt Website

The 2021 Avada Black Friday Sale

Avada eSports: Deconstructing a Prebuilt Website

Avada Extreme Sports: Deconstructing a Prebuilt Website

Avada Salon: Deconstructing a Prebuilt Website

Avada Spa: Deconstructing a Prebuilt Website

How to Build a Multilingual Website in Minutes Using Avada and WPML,Using The Recent Posts ElementThe third method to consider is not really an alternative, but rather an additional way of displaying blog posts on your pages. The Recent Posts Element allows you to add blog posts anywhere you can place the Element, but as the name implies, this is usually used to just show the most recent posts, perhaps on the home page, but in reality, anywhere you wish.
It does not have the number of configuration options as the Blog Element, and it should not be confused with Related Posts that show up the bottom of posts. As can be seen on the Church Demo News Page, it is possible to use a combination of these elements on a single page.
See the Recent Posts Element page on the Classic Demo for a visual rundown on what the Element can do, and read the Recent Posts Element doc and the Blog Featured Images doc for further information about the element. Also, see below for a live example of the Element in action.
Schantel2021-12-14T19:03:32+00:00Avada Beer: Deconstructing a Prebuilt WebsiteSchantel2021-12-14T19:03:32+00:00December 14th, 2021|0 Comments Say hello to Avada Craft Beer. This Avada prebuilt website is ideal for [...]Schantel2021-12-07T18:57:40+00:00Avada Electrician: Deconstructing a Prebuilt WebsiteSchantel2021-12-07T18:57:40+00:00December 7th, 2021|1 Comment Say hello to Avada Electrician. This Avada prebuilt website is ideal for beginners, [...]Schantel2021-11-30T18:02:57+00:00Avada Barber Shop: Deconstructing a Prebuilt WebsiteSchantel2021-11-30T18:02:57+00:00November 30th, 2021|1 Comment Say hello to Avada Barber Shop. This Avada prebuilt website is ideal for [...],Using The Post Slider ElementLike the Recent Posts Element, this is not an alternative method to show an entire blog, but it is a very useful element that can be used to highlight blog posts in a slider layout.
You can use one of three layouts for the Post Slider – Posts with Title, Posts with Title and Excerpt, or the Attachment Layout, Only Images Attached to Post/Page. For more information, see the Post Slider Element doc.
Avada Beer: Deconstructing a Prebuilt Website Say hello to Avada Craft Beer. This Avada prebuilt website is ideal for beginners, marketers, professionals and anyone in between. Avada Craft Beer can be imported at the click of a button and [...]Avada Electrician: Deconstructing a Prebuilt Website Say hello to Avada Electrician. This Avada prebuilt website is ideal for beginners, marketers, professionals and anyone in between. Avada Electrician can be imported at the click of a button and is highly [...]Avada Barber Shop: Deconstructing a Prebuilt Website Say hello to Avada Barber Shop. This Avada prebuilt website is ideal for beginners, marketers, professionals and anyone in between. Avada Barber Shop can be imported at the click of a button and [...]Next Step: Blog Featured Images

Blog Global Options

There is a range of both global and local options for the various parts of the Blog system. Here, let』s look at the various global options that affect the Blog.

General Blog Options

Blog Single Post Options

Blog Meta Options

Sidebars > Blog Posts

Sidebars > Blog Archive

Avada Builder Elements > Blog Element,General Blog OptionsFirstly, the General Blog Options are located at Avada > Options > Blog > General Blog, from the WordPress dashboard.
As noted at the top of the page: 「The options on this tab only control the assigned blog page in 「Settings > Reading」, blog archives or the blog single post page, not the blog element. The only options on this tab that work with the blog element are the Date Format options and Load More Post Button Color.」
Archive pages are the automatically generated pages you get when you click on a Category, or Tag on the front end. These archive pages display according to the options chosen here. See the Blog Archive Pages documentation for more information on this.

Blog Page Title Bar – Controls how the page title bar displays on single blog posts and blog archive pages.

Blog Assigned Page Title Bar – Controls how the page title bar displays on the assigned blog page in 「Settings > Reading」.

Blog Page Title – Controls the title text that displays in the page title bar only if your front page displays your latest post in 「Settings > Reading」.

Blog Page Subtitle – Controls the subtitle text that displays in the page title bar only if your front page displays your latest post in 「Settings > Reading」.

Blog Layout – Controls the layout for the assigned blog page in 「Settings > Reading」. Choose from Large, Medium, Large Alternate, Medium Alternate, Grid, Timeline, or Masonry.

Blog Archive Layout – Controls the layout for the blog archive pages.

Pagination Type – Controls the pagination type for the assigned blog page in 「Settings > Reading」 or blog archive pages.

Load More Posts Button Background Color – Controls the background color of the load more button for ajax post loading for blog archives.

Load More Posts Button Text Color – Controls the text color of the load more button for ajax post loading for blog archives.

Load More Posts Button Hover Background Color – Controls the hover background color of the load more button for ajax post loading for blog archives.

Load More Posts Hover Button Text Color – Controls the hover text color of the load more button for ajax post loading for blog archives.

Number of Columns – Controls the number of columns for grid and masonry layout when using it for the assigned blog page in 「Settings > Reading」 or blog archive pages. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing for blog posts for grid and masonry layout when using it for the assigned blog page in 「Settings > Reading」 or blog archive pages. In pixels.

Equal Heights – Turn on to display grid boxes to equal heights per row.

Blog Archive Grid Text Padding – Controls the top/right/bottom/left padding of the blog text when using grid / masonry or timeline layout. Enter values including any valid CSS unit, ex: 30px, 20px, 25px, 25px

Blog Archive Grid Content Alignment – Controls the content alignment of the blog text when using grid / masonry or timeline layout.

Blog Content Display – Controls if the blog content displays an excerpt or full content or is completely disabled for the assigned blog page in 「Settings > Reading」 or blog archive pages.

Excerpt Length – Controls the number of words in the post excerpts for the assigned blog page in 「Settings > Reading」 or blog archive pages.

Strip HTML from Excerpt – Turn on to strip HTML content from the excerpt for the assigned blog page in 「Settings > Reading」 or blog archive pages.

Featured Image / Video on Blog Archive Page – Turn on to display featured images and videos on the blog archive pages.

Blog Alternate Layout Month and Year Format – Controls the month and year format for blog alternate layouts. Formatting Date and Time.

Blog Alternate Layout Day Format – Controls the day format for blog alternate layouts. Formatting Date and Time

Blog Timeline Layout Date Format – Controls the timeline label format for blog timeline layouts. Formatting Date
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Blog Single Post OptionsThe Blog Single Post tab is below the General Blog tab. The options here cover the default options for the Blog Single Posts, which can also be overridden on a blog post by post basis. See below for the Global options and see the Blog Post Options for more info on how to override these options on a post by post basis.

100% Width Page – Allows you to display blog posts at 100% browser width. Turn Off to follow the site width, instead.

Featured Image/Video On Single Blog Post – Allows you to show or hide Featured images or video on blog single posts.

Previous/Next Pagination – Allows you to show or hide the previous/next pagination on single blog single posts.

Post Title – Allows you to set the position of the title relative to the Featured image. Choose between Below, Above or Disabled.

Meta Data Position – Allows you to choose the position of the post』s meta data. You can choose from Below Article or Below title.

Author Info Box – Allows you to show or hide the Author Info box below blog single posts.

Social Sharing Box – Allows you to show or hide the Social Sharing Box below blog single posts.

Related Posts – Allows you to show or hide Related Posts.

Comments – Allows you to show or hide the comments.,Blog Meta OptionsThe Blog Meta tab deals with how the Blog Meta data displays on various parts of the site. As noted at the top of the page, 「The on/off meta options on this tab only control the assigned blog page in 「Settings > Reading」 or the blog archives, not the blog element. The only options on this tab that work with the blog element are the Meta Data Font Size and Date Format options.」

Post Meta – Turn on to display post meta on blog posts. If set to 「On」, you can also control individual meta items below. If set to 「Off」 all meta items will be disabled.

Post Meta Author – Turn on to display the post meta author name

Post Meta Date – Turn on to display the post meta date.

Post Meta Categories – Turn on to display the post meta categories.

Post Meta Comments – Turn on to display the post meta comments.

Post Meta Read More Link – Turn on to display the post meta read more link.

Post Meta Tags – Turn on to display the post meta tags.

Meta Data Font Size – Controls the font size for meta data text. Enter value including CSS unit (px, em, rem), ex: 12px.

Date Format – Controls the date format for date meta data. Formatting Date and Time,Sidebars > Blog PostsThere are also Blog options in the Sidebars > Blog Posts, and Sidebars > Blog Archive sections. These two sections allow you to control the display and content of any sidebars you might want on your Single Blog Posts and Blog Archive Pages.

Global Blog Post Sidebar 1 –  Select sidebar 1 that will display on all Blog posts.

Global Blog Post Sidebar 2 – Select sidebar 2 that will display on all Blog posts. This can only be selected in Sidebar 1 is also selected.

Force Global Sidebars For Blog Posts – Turn on if you want to use the same sidebars on all Blog posts. This option disables the Sidebars tab in the Avada Page Options on Blog Posts.

Global Blog Sidebar Position – Controls the position of sidebar 1 for all Blog posts and archive pages. If sidebar 2 is selected, it will display on the opposite side.,Sidebars > Blog Archive
Blog Archive Sidebar 1 – Select sidebar 1 that will display on the Blog archive pages.

Blog Archive Sidebar 2 – Select sidebar 2 that will display on the Blog archive pages. Sidebar 2 can only be used if sidebar 1 is selected.,Avada Builder Elements > Blog ElementFinally, in the Avada Builder Elements > Blog Element area of the theme options, you can set the default behavior of the Blog Element, which as well can be overridden in any instance of the Element you place on a page.
View the Displaying Blog Posts On Your Site, or the Blog Element documentation for more information on how to use this Element to display your Blog posts across your site.

Number of Columns – Set the number of columns per row for grid and masonry layout. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing for blog posts for grid and masonry layout. In pixels.

Blog Grid Text Padding – Controls the top/right/bottom/left padding of the blog text when using grid / masonry or timeline layout. Enter values including any valid CSS unit, ex: 30px, 20px, 25px, 25px.

Content Display – Controls if the post content displays an excerpt, full content or is completely disabled for blog elements.

Excerpt Length – Controls the number of words in the excerpts for blog elements.

Blog Date Box Color – Controls the color of the date box in blog alternate and recent posts layouts.
Next Step: Blog Post Options