User Tools

Site Tools


Sidebar

magento_2:blog_pro

For more details, see how the Blog Pro for Magento 2 extension works.

Guide for Blog Pro for Magento 2

Make blogging an effective part of your marketing strategy with Blog Pro for Magento 2. Take advantage of the responsive design and customizable layout settings. Add meta information to the posts, categories, and tags and explore the power of SEO.

  • Use responsive layout design
  • Customize blog posts display
  • Use AMP to make pages work fast
  • Add multi-level category tree and 3D tags for enhanced navigation
  • Manage comments effectively
  • Make your blog user- and SEO-friendly
  • Import blog from WordPress in few clicks
  • Allow users to share your content on social networks
  • Share with readers the information about authors

Blog Pro for Magento 2 is a powerful tool for creating an informative blog. Make the posts noticeable by adding images and thumbnails; optimize your posts for search engines, use share buttons to attract new readers and visitors. The module is very flexible and has an intuitive interface.

The extension is read compatible with GraphQL. Expose the data like post page, recent posts, posts grid, recent comments, comments, categories tree, tags, author page, category page, etc. in order to build PWA/JS-based frontend

Configure the extension

Blog Pro has many options in the configuration section. Don't worry about such a large number of settings, once the main options are set, posting blog articles becomes a matter of several minutes. To access the settings of 'Blog Pro for Magento 2' please go to Stores → Configuration → Blog Pro

Display Settings

Configure the blog link position on your webstore pages.

Blog Link Title - give a title that will be displayed in the link to the blog.

Display Blog Link in Footer - enable if you want to display the link to the blog on the footer.

Display Blog Link in Header - set to Yes to display the link to the blog in the header.

Display Blog Link in Top Menu - switch to Yes to display the link to the blog in the categories menu.

Here is an example of how the footer link looks on the frontend.

Check the examples of the links located in the Header and in the Top Menu.

Search Engine Optimization Section

Optimize the blog for search engines by adding well-thought meta titles, keywords, and description. Your blog will appear higher in search results and thus attract more visitors.

Route - Specify the URL title, which will redirect visitors to your blog page.

Blog Home Page Title - Specify the blog title, which will be displayed on the blog home page.

Blog Home Page Breadcrumb Label - Specify the label for breadcrumb navigation.

Blog Home Page Meta Title - Define the meta title for the main blog page in a browser tab.

Blog Home Page Meta Description - Add the meta description for the blog home page. It will be displayed in the search engine results page.

Blog Home Page Meta Keywords - Determine the keywords by which customers can find your blog.

Blog Pages Meta Title Prefix - Set the default prefix that will be displayed in a browser tab in front of the page title for all blog pages.

Blog Pages Meta Title Suffix - The meta title suffix is a permanent text that will be added to the meta title of all post pages. This text will be separated from the meta titles with “ | ”. You can use your brand name as a meta title suffix. This will contribute to your brand awareness.

This is how the settings look on the frontend.

Organization Name - Your company name will be used for the creation of post microdata.

The best Magento 2 Blog extension is designed to increase your blog visibility with microdata: breadcrumb, author, name, description, image. Fill in the appropriate fields while creating a post to better index the articles and make your blog more SEO friendly.

Layout

Here you can arrange blocks with different blog information and specify how they will look on the frontend. Four layout types are available: desktop layouts for the main blog page and for a post page and the same layouts for mobile devices. The blocks are visualized; you can change the order using drag and drop option.

Desktop - It's possible to group the blocks in one, two, or three columns. To add a block, click the 'Plus' button; to delete a block click the basket in its upper-right corner. This is an example of the main blog page; the post page has the same options.

This is the frontend example of the main blog page.

And here is an example of a particular post page.

Mobile - On mobile devices, such as tablets and smartphones, your blog will have a 2-column layout, the other options of the layout constructor are equivalent to Desktop. The screenshots below show how a mobile post looks on the frontend. To see the tab with categories and other blocks, a customer should swipe it from the left or right side.

URLs and Redirects

URL Postfix - The .html postfix shows search engines that the page is static and is reliable. Also, you can use slash( “/“) as a value. The addition of a slash at the end of a URL instructs the webserver to search for a directory. This speeds the web page loading because the server will retrieve the content of the web page without wasting time searching for the file.

Redirect to SEO formatted URL - If you set the option to 'Yes', customers and search robots will be redirected to the SEO-friendly post page by 301 redirects.

List

List - Define the number of posts displayed on one blog page.

If there are more articles in your blog, visitors can browse content with Older/Newer Entries links.

Post

Display Author Name - Choose 'Yes' if you want to display the name of the post author on the frontend.

Display Number of Views - Set to 'Yes' to display the number of views for each blog post.

Display Print Link - Allow visitors to print out the articles they enjoy.

Display Categories - Enable the option to display categories a post belongs to.

Limit of Categories in Block - Define the limit of categories in the block.

Display Tags - Tags help readers find all posts on the same topic.

Date Format - Choose how to display the publishing date. It can be either in the standard format or as the number of days passed since posting.

Width of image on Blog page - Define the images' width to use on the blog pages.

Height of image on Blog page - Define the images' height to use on the blog pages.

Enable 'Like' control - Set 'Yes' to enable blog visitors to vote for posts on the frontend via likes or dislikes. It will help you to indicate which topics are more helpful and interesting for your readers.

Categories

Show Categories the Post Belongs to - Set to 'Yes' to display the categories block on post view and listings pages.

Limit of Categories to Show on Post - Here you can limit the number of categories that should be displayed on post view. If you leave this field empty or fill in 0, all categories assigned to a blog post will be displayed.

Limit of Categories in Layout Widget - This setting defines the number of categories per each level to be shown in the categories tree.

Comments

Use Comments - Enable or disable comments on the frontend.

Automatic Approving - You can allow publishing comments immediately without approval or moderate them first.

Allow Guest Comments - Enable or disable guest comments.

Quantity of Recent Comments in Block - Define the number of comments that will be displayed in the 'Recent Comments' block.

Display Short Content for Recent Comments - If you enable this option, customers will see the beginning of recent comments in the block.

Display Date for Recent Comments - Set this option to 'Yes' if you'd like to show the date when a comment was left in the 'Recent Comments' block.

Ask Email for Comment - Make the Email field mandatory for new comments.

Ask Name for Comment - Make the Name field mandatory for new comments.

Notify Customers about Replies to Comments — Choose 'Yes' to notify customers about new comments to the thread they participate in. If you enable this setting, the two additional fields will be displayed, where you can specify the Email Sender and the Email Template for customers' notifications.

To let customers Unsubscribe from such notifications please install the EmailUnsubscribe system module which is supplied with the extension.

Enable GDPR Consent - Enable or disable the GDPR consent for comments.

GDPR Consent Text - Specify the consent text with a link to the privacy policy page.

The module doesn't provide your store with a privacy policy. It should be created as a CMS page in the admin panel.

Notification of Added Comment

Keep your store administrators timely informed of every added comment.

Enabled - Choose 'Yes' to enable notifications of added comments.

Receiver - Specify the email addresses, to send the notifications. Several emails should be written on a separate line.

Sender - Define the sender.

Notification Template - Choose the email template to send the notifications of a newly submitted comments.

Recent Posts Block

Recent Posts Quantity in Block - Set how many posts will be displayed in the block.

Display Short Content - Select 'Yes' to allow your customers to read the beginning of posts.

Display Date - Choose whether you want to show the date when a post was published.

Display Image - Specify whether you want to show images in the recent posts block.

Image Width and Image Height - Specify an image size.

Posts & Products Relation

In this tab, you can configure the general settings of the relations between posts and products.

Show Related Posts Tab on Product Page - Choose 'Yes' if you want to display the related blog posts on product pages.

Related Posts Tab Title - Indicate the title for the related posts tab.

Show Related Products Block on Post Page - Set to 'Yes' if you want to display the related products block on the blog posts pages.

Related Products Block Title - Specify the title for the related products block.

You can adjust the connections between particular posts and products on each post editing page.

Tags

Tags are more specific than categories. They help visitors find posts on the topic they are interested in quicker.

Minimal Posts Number per Tag - Define the minimal quantity of posts that a tag should have.

Use 3D Cloud to Display Tags - Display tags as a 3D cloud.

To make tags more noticeable to visitors you can add a block with a 3D tag cloud to the main blog page and post pages. This is how a tag cloud looks on the frontend. More popular tags look brighter than the other to drive the readers' attention to the hottest topics.

3D Cloud: Height - Choose the height of the 3D cloud block (in pixels).

3D Cloud: Text Color - Input the HEX code of the color that will be applied to the most popular tags (they have a bigger size than other tags).

It's also possible to use a handy palette instead of the color codes.

3D Cloud: Tag Color for Less Used Tags - Define the color that will be applied to minor tags (they are of a smaller size than the popular ones).

3D Cloud: Tag Highlight Color - Choose the highlight color.

3D Cloud: Color Scheme - Choose a ready-made color scheme of the cloud that will suit your store design.

Social Buttons

Enabled - The option turns on/off social networks share buttons.

Networks - Choose networks where your customers will be able to share posts. The following networks are available: Twitter, Facebook, Vkontakte, Odnoklassniki, Blogger, Pinterest, Tumblr, Digg, StumbleUpon, Slashdot, Reddit, LinkedIn, Whatsapp.

Frontend example. As you can see, the sharing buttons are displayed right under the article on each post page of the blog.

Look and Feel

Include - Select a color scheme for the icons displayed at the top of a blog post (the author, number of views, the Print button, etc.).

Accelerated Mobile Pages

Enable this option to make mobile pages work fast. AMP pages load nearly instantly and offer smooth experience on any mobile screen.

Image - Choose a logo image to display on accelerated mobile pages. Allowed file types: jpeg, gif, png. Maximum file size: 2MB

Width/Hight - Specify logo width and height. Note, that it shouldn't exceed 180 х 60px.

Design - Configure color settings for tags, links, buttons, and footer displayed on accelerated mobile pages.

How does it work?

AMP is a feature that optimizes website pages and makes them fast-loading on mobile devices. It is possible due to the special algorithm that replaces any code with HTML. It allows to remove and replace tags in order to make the page as fast as possible.

Key features:

  • Pages are rendering extremely fast.
  • The extension applies AMP on mobile devices only. It doesn’t affect the desktop version.
  • The position in Google ranking is improved due to the better score in Google PageSpeed Insights.
  • It works properly on the Magento cloud as well.

Posts

Reach features of the extension allow you to create blog posts adding images, thumbnails and author details. Besides, you can optimize posts for search engines and thus increase leads traffic to the store.

To view, edit and create posts, please go to Content → Posts. A convenient grid displays all your articles. Discover mass actions to manage blog content faster. To submit a new entry, please click the 'Add Post' button in the upper right corner of the page.

Every post has three options: Edit and Duplicate.

Edit - If you want to make some changes in the post content, select this option or just click the post line.

Preview - Select this option to preview the post look and feel.

Duplicate - the feature is useful if you need to publish the same post in another store view, but want to change the content or translate it into another language.

For this example, we will edit one of the existing posts.

Edit and create posts

Create posts with an all-in-one intuitive live design editor. Create texts and complement them with advanced formatting, various fonts, images, lists, and tables. Preview the post look and feel, add tags, categories, and metadata.

Title - Specify the title of the post.

URL Key - Define an SEO-friendly URL for the post.

Post Image - Choose an image that will be displayed in the post.

Post Image Alt - Specify an alternate text for a post image to be shown when a user for some reason cannot view it.

List Image - Choose an image that will be displayed on the main blog page.

If you add only one image, it will be displayed for both list and post.

List Image Alt - Specify an alternate text for a list image. A title of the post will be used if this field is empty.

Image Link - You can insert a link to an internal page in your store or to another website.

Full Content - Write the actual post in this field.

With the help of WYSIWYG editor tool, you can quickly format text, change fonts, add images, videos, create lists, tables, etc.

Short Content - Write a short description or summary of the post. It will be displayed on the main page as a preview for the post.

Tags - Specify the tags that are related to the post topic. If you used a tag once in the past, it will be autocompleted. Find out how to create a tag in this section.

Preview - Preview the post look and feel before publishing.

Add Related Posts - Choose this option to add posts related to the article. Readers will be able to see them right on the post page they are currently viewing.

Add Related Products - With this option, you can display related products on the post page as well as show related posts on linked products' pages.

Choose the necessary products, which you want to display on a particular post page and click the Add Selected Products button.

Now you can see the list of products, related to the post. You can change the order of the products via drag and drop.

After you have added the products to the post, this post also will be displayed on the linked products pages in the Related Posts tab.

Status - Select the status of the post.

- Published - The post is displayed on the frontend.

- Disabled - The post is not displayed on the frontend.

- Hidden - The post is not enabled but you can see how it will look in the frontend. For this, click the link above the post that will appear after saving. We recommend you to set this status until the post is ready for publishing.

- Scheduled - The post will automatically be published at the time that you define in Publish Date field.

Categories - Select a category or categories the post will be published in. Author - Choose the author from the list.

Posted From - Select the store view from which the post will be published.

Allow Comments - Select 'Yes' if you want to allow customers to leave comments to the post.

Mark as Featured - Select 'Yes' if you want to pin a post at the top of the blog page and to draw more readers' attention to it.

Here you can also see the post’s views counter. It shows the number of times each post was viewed on the frontend. Also, you can see the number of likes and dislikes.

Meta Data - Metadata, which includes meta title, meta description, and meta tags, helps search engines to correctly analyze what your post is about.

Meta Title - Specify the meta title of the post.

Meta Tags - Write keywords and phrases by which visitors can find the post in search engines.

Meta Description - Add a brief description of the topics, which are covered in the post.

When you finished editing a post please, save the changes.

Manage blog categories

Categories are aimed to help readers easier navigate in your blog and find the necessary posts faster. To access the existing categories, please go to Content → Categories. You can view the current blog categories with their main parameters on the grid. You can create a multi-level category tree and assign blog posts in the subcategory. Use the 'Edit' action to make the needed changes or click the 'New Category' button to create a category.

For this example we will edit the existing category; you would go through the same steps to create a new one.

Name - Specify the category title.

Url Key - Specify the category URL.

Description - Fill in the category description.

Sort Order - The sort order of a category is defined automatically. If necessary, you can change it.

Status - enable or disable the category.

Parent Category - Choose the parent category if any or select 'Root Category'.

In the Meta Data tab, you can specify a meta title, tags, and description. They will allow search engines to index the category better.

Meta Title - Specify the meta title of the category.

Meta Tags - Write keywords and phrases by which visitors can find the category in search engines.

Meta Description - Add a brief description of the topics, which are covered in all posts of the category.

In the Post From Category tab you can see the list of posts that were published in this category.

Remember to click the 'Save' button when you are done.

See how the list of categories will look on the frontend.

Manage blog tags

To view all the tags that are used in your blog, please go to Content → Tags. There you can view all the tags you have with their main parameters on a convenient grid. Click on the tag to edit it and use the 'Add Tag' button to create a new tag.

For this example we will edit the existing tag; you would go through the same steps to create a new one.

Name - Specify the name of the tag.

Url Key - Define the URL key for the tag.

In the Meta Data tab, you can specify a meta title, tags, and description. They will allow search engines to index the tag better.

Meta Title - Specify the meta title of the tag.

Meta Tags - Write keywords and phrases by which visitors can find the tag in search engines.

Meta Description - Add a brief description of the topics, which are covered in all tagged posts.

Tagged Posts - In this tab, you can view all the posts that are marked with the chosen tag.

When you finished editing a tag, please, save the changes.

Comments

Comments are a necessary part of every blog. With their help, you can communicate with your visitors and learn their opinion on the topics you cover.

All blog comments are displayed on the backend. To view, approve or edit them, please go to Stores → Configuration → Amasty Blog Pro → Comments.

To edit a comment or change its status, select the Edit option in the Action dropdown or just click the comment line. You can also approve, reject, reply or delete a comment right from the grid.

On the comment page, you can change the customer name, email, comment content, status, and store view.

This is how comments are displayed on the frontend, right under the post and the sharing buttons.


Authors

Share the joy of creating interesting content with other users. Let them publish posts alongside you and provide visitors with the author's introduction by adding social media links to their individual Facebook, Twitter, and LinkedIn pages. Manage all authors in a special grid.

Easily add new authors and edit their information.

Name - Specify the author's name.

URL Key - Specify the author's URL.

Job Title - Fill in the author's job title.

Facebook Profile - Add social media link to the author's individual Facebook page.

Twitter Profile - Add social media link to the author's individual Twitter page.

LinkedIn Profile - Add social media link to the author's individual LinkedIn page.

Short Description - Type in few words to briefly describe the author.

Description - Add more detailed information about the author. For example, you may tell something about the author's sphere of interests, career, etc.

Image - Here you can attach the author's photo. Note, that the maximum file size is 2 MB. Allowed file types are JPG, GIF, PNG, ICO, APNG.

In the Meta Data tab, you can specify a meta title, tags, and description. They will allow search engines to index the author (and hence your posts) better.

Meta Title - Specify the meta title.

Meta Tags - Write keywords and phrases by which visitors can find the blog posts of the author in search engines.

Meta Description - Add a brief description of the topics, which are covered in the blog posts of the author.

In the Posts of Author section, you can find all the posts of this author.

When you finished editing a piece of author information please, save the changes.

Customers can view the author's information by clicking on the author's name on the post pages or blog category pages.

In this section, besides the additional info, your blog visitors will also find other posts of this author.

Blog Activity in Customer Account

With the extension, customers can conveniently keep track of the posts they liked or commented on in the Blog Posts tab of their accounts.

Widgets

Do you want more visitors to know about your blog? Spread the necessary information via widgets. With the extension, you can add the Blog Categories, Blog Recent Posts, Blog Featured Posts, Recent Comments, and other widgets to any page of your website.

Please, go to Content → Widgets → Add Widget button to create a new widget.

Blog Category Widget

Choose this type of widget to display the posts categories in your blog.

On the Settings tab, select the Amasty Blog Category Widget in the Type field. Then, choose the desired design theme in the corresponding field and press the button Continue.

On the Storefront Properties tab, give a title to your widget in a Widget Title field at first. Then, choose the stores in which the widget should be available in the Assign to Store Views field. You can also specify the Sort Order when needed (when you have several widgets in the same container).

After these steps are completed, hit the Add Layout Update button. In the Display on dropdown, choose the pages or products type to place the widget on.

If you want to place a widget on your blog pages, just choose Amasty Blog → Post Listing Page or Amasty Blog → Post Page from this dropdown list. Please note, that if you choose All Pages, the widget will be displayed both on the pages of your web store and on the pages of the blog.

Then specify the required additional information below, such as particular pages or products and also the container (the place on the page) for the widget.

Proceed to the Widget Options tab. Here, you can specify the header text, define the categories limit in the same name field. All these fields are optional.

When everything is completed, hit the Save button.


Blog Recent Posts

Use the widget to display the recent blog posts.

To do this, on the Settings tab:

  • choose the Amasty Blog Recent Posts in the Type field;
  • define the Design Theme you want to use;
  • click the Continue button.

On the Storefront Properties tab:

  • specify the widget title (the Widget Title field);
  • define the store views, to which you want to assign the widget (the Assign to Store Views field);
  • determine the sort order in case of need (the Sort Order field);
  • press the Add Layout Update button. Now, choose where you want to display the widget.

Switch to the Widget Options tab, where:

  • specify the header text and the posts limit in the same name fields (if needed);
  • enable/disable the Show post images in the widget view;
  • determine, whether to show the dates of the recent posts and choose the date format (the Show Date for Recent Post and the Date Format fields);
  • enable the Show Short Content for Recent Posts field if you want to display the short content for posts in the widget;
  • choose the needed post categories and post tags in the Post Categories for the Widget and the Post Tags for the Widget fields accordingly.

When completed, press the Save button.


Recent Comments Widget

With the widget, you can show to visitors the recent comments to your posts.

To create the widget, first, select Amasty Recent Comments Widget in the Type field and specify the Design Theme. Click Continue.

On the Storefront Properties tab, fill in the Widget Title, the Assign to Store views and the Sort Order fields. Then, hit the Add Layout Update button and customize the widget placement settings.

Open the Widget Options tab. Specify the Header Text and define the maximal number of comments in the widget in the Comments Limit field (optional). Then, choose whether to show date for recent comments, in the corresponding field.


Add Widgets to Pages and Blocks

To add widgets to pages or blocks, please, go to Content → Pages or Content → Blocks.

Choose the required page or block and click to edit it (or create the new one).

Here, on the Content tab in the Show Editor mode, click the Insert Widget button. Then you will need to configure the settings the same way as for the new widget.

Import from WordPress

With Magento 2 Blog extension you can easily transfer all the posts, comments, tags, authors and media files from WordPress to your Magento installation and comfortably manage your store and your blog in one place. To do this, go to Content → Import:

Fill in the following fields: Database Name, Database User Name, Database Password, Database Host, Table Prefix.

Allow Update Content on Existing URL-key - Set 'Yes' to allow content updates on posts with existing URL-key. Choose 'No' to add a new post.

Web Hosting Reviews of 2020

Assign related products to your blog articles in cross-promotional purposes. Add Magento 2 Automatic Related Products and easily choose products to be displayed in a catchy widget on each post page.

Cron Tasks List

To check if cron generates and processes tasks and detect all cron execution errors in one place, please go to System → Cron Tasks List.

On a separate grid, you can see a job code, its status, the date each job was created, scheduled, executed and finished.

Run all cron tasks and generate their schedule by clicking the Run Cron button. Also, Delete separate tasks in bulk via Actions dropdown menu. Apply filtering and sorting options if needed.

Magento 2 Blog Pro extension is compatible with Porto theme.

Magento 2.3 Page Builder

If you have Magento 2.3 Page Builder module, use the Composer to make it compatible with Magento 2.3 Blog Pro. The necessary package can be installed with composer require amasty/blog-page-builder command.

PWA for Blog Pro (Add-On)

The extension also works smoothly on mobile devices due to a ready-made PWA solution, due to which store admin can significantly improve mobile shopping experience.

The feature can be enabled only after purchasing the PWA for Blog Pro Add-On. Also, you need to install PWA Studio first.
Please, keep in mind that PWA does not support 3D tags cloud. Also, widgets are applicable on blog pages only.

If the add-on is installed, Venia theme will display mobile blog section in the following way:

The add-on supports any devices including tablets. The navigation menu will look like this:

PWA component supports all Blog Pro extension features for category pages:

Shoppers will be also available to leave comments to posts:

Find out more about Magento PWA integration here.

Find out how to install the Blog Pro extension for Magento 2 via Composer.
Rate the user guide
 stars  from 7 votes (Details)
magento_2/blog_pro.txt · Last modified: 2021/05/21 10:38 by asemenova