Loading...

Follow WpCtrl.com on Feedspot

Continue with Google
Continue with Facebook
or

Valid
Last updated on: 4th December, 2018

The season is on and you want to add some Christmas mood to your WordPress website?

The easiest thing you can do is to add falling snowflakes, which might sound a little cliche, but it always grabs the attention in a good way.

If you run a corporate website or some serious business site, this might not be for you.

These Free plugins I’m about to show you are lightweight, and won’t get you in trouble with loading time or increased page size.

So let it snow!

1. WP Snow Effect

This snow effect is my favorite. The plugin has just enough customization options to get you the desired effect.

You can also choose specific pages where to display the snowflakes. Another cool feature is the min and max falling speed, which creates a more realistic effect.

2. WP Super Snow

WP Super Snow gives you a full set of options while keeping it lightweight and easy to manage.

You can choose your own png image files or use the default.

3. Christmasify!

With Christmasify! you can turn the full Christmas mode on.

It will not only add snowflakes to your blog, but you can also enable music, decorations for images, a custom font for your headlines and a ridiculous flying Santa.

Bonus – Add Falling Snow to Your Slides

You probably have at least one theme, packed with Revolution slider. It is the most well-recognized slider for WordPress.

If you planning to make some Christmas slides this year, you should definitely check the FREE Snow Effect add-on!

Note you will need an activated license in order to use the add-on.

Happy Holidays and let it snow! Have fun and don’t be so serious on Christmas. Everybody will enjoy a little snow!

The post 3 Free Plugins to Add Snow Effect to Your WordPress Blog (and Slides) appeared first on WpCtrl.com.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Drag and drop page builders are powerful tools that gave the opportunity to the regular WordPress users to create pages and layouts, similar to what only experienced web designers were able to do a decade ago.

The process of web designing is becoming more user-friendly with every year and WordPress is the best platform for non-tech savvy users.

What you’ll find in this article:

  • Why having a page builder plugin is necessary
  • The difference between the plugins interfaces
  • The actual process of designing a section with a page builder
  • The available elements for both plugins

The web is changing quickly and webmasters want a flexible environment to change their websites with a similar phase. Having a website is no longer a “set it and forget it” work, another contact channel just to fill the info on your business card.

Today most of the themes on the market come with some kind of visual page builder. This is giving the owners the opportunity to easily manage the look of their websites and update things quickly when needed, without hiring a professional.

Why do you Need a Page Builder?

Let’s take a look at one of the most popular themes on the market – The Genesis Framework themes.

The Genesis Framework is valued for its clean code, speed, security and SEO friendliness.

The themes are stylish, clean and completely inflexible.

If you take a look at any Genesis Framework child theme, you’ll see the same issues with all of themes – they are predefined!

For example, You can love the Essence Pro when you first see the theme demo. Let’s say you decide that this is your theme and you buys it.

What you’ll probably find out later is, except the complicated setup to make it look like the demo, is that you have absolutely no control over your layouts. You are given a few widgets and that’s it!

For Genesis Framework, even simple tasks like adding a search to your header, or changing the colours of your site are made so complicated and frustrating even for experienced users.

If you want to feature a new section on your homepage, to list new services or anything else, you will be stuck.

And that’s the reality with most of the predefined “section ready” themes.

WPBakery Page Builder

$46

More info

Elementor Pro

$49

More info

Elementor has a FREE version. You can create the hero section and some more basic designs, but you won’t have access to the premium widgets and elements.

Now let’s get into it. I’ll make one of the most used section that almost every website or landing page have – the hero section, with both Elementary and WPBakery Page Builder.

Hero Section with WPBakery Page Builder

This is what your visitors see first, so you better grab their attention with clear messages and design.

How to create a hero section with WPBakery Page Builder?
  • Make sure you have disabled any sidebars and preferably choose a full-width layout if you have the option in your page/theme settings.
  • Switch to “Backend editor” (this will enable the page builder instead of the classic text editor) then click the “Add Element” button. Choose “Row”.

Note: You can also use the frontend editor of WPBakery Page Builder, but I find it easier to work in the backend.

Add an empty row first

  1. The row columns layout
  2. Row settings – from here you set the background, width, setting the margins and paddings and more.
  3. This is the style of the column
  4. From here you add your elements (content)

The hero section needs a background image. Head to the row settings (2). On the ‘General’ tab set the row stretch to ‘Stretch row’, this will make your row full width.

Then go to the ‘Design options’ tab.

Here you can choose your hero image and set the row paddings, this is necessary in order to get enough space around your elements.

In the drop-down menu, below the thumbnail, set the option to ‘Cover’.

Note: You can play with the paddings to get the desired height of your row. I choose percentages, but you can use px, em or rem values.

Click Save changes.

Note: Later when I added the headings I changed the top padding to 10%.

The default background options of WPBakery Page Builder are very limited. You can add overlays, parallax effects, gradients and more with any of these additional add-ons.

What you should get is a nice full-width section ready for some extra elements.

Adding text and Call-to-Action button

WPBakery Page Builder comes with its own Custom Heading element.

For this example, we’ll use two custom heading elements, the second will play the role of a subheading.

Choose your desired font, size, colour and align in the element’s settings screen.

Clone the element for the subheading and just change text and the size to a smaller one.

Click the small plus sign below your element to add a CTA.

Select the ‘Button’ element and select your prefered settings (size, color, url etc.). Remember to add some padding to give your CTA space to breath – go to the ‘Design options’ tab of your button and add 15px top padding!

…and voila!

Our Hero Section is ready to get some clicks.

Hero Section with Elementor Pro

Let’s try the same example but this time using Elementor Pro.

The main difference is that Elementor is a frontend page builder only, the moment you click the ‘Edit with Elementor’ Button you will be redirected from your backend.

Both page builders have a very different interface and approach to design.

First things first, you want to get rid of any sidebar you might have and hide the page title.

Then click the purple plus icon to add a new section. Before we add the image and the heading, there is some work to be done in the row settings.

When you hover over the section, three small icons appear at the top left corner. Click the middle one (the 6 dots) and the settings panel will appear on the left side.

To get a nice full-width section turn on the Stretch section option and from the Content width drop-down choose Full Width.

In the Style tab, you can set your font colour, alignment and more.

Hover again and another small icon will appear at the top left corner, that is where we’ll place our image and set the paddings.

Note that your background won’t appear until you add your an element.

Click the plus icon and drag the Heading widget to your section. Then again drag another heading for the subheading and finally drag a button below the two.

Click update and your hero section is ready.

Here is the final result.

Elementor or WP Bakery Page Builder?

If you want a front end drag-and-drop page builder – Elementor is the better choice. It has also a free version, which might be totally enough for some users. It’s also more intuitive and easier to get used to. If you want to get creative, I think WP Bakery is the one you should get. Combined with some of the premium addons on the market it becomes a powerful tool to create almost anything.

The post WPBakery Page Builder vs. Elementor – Creating Hero Sections (Step by Step) appeared first on WpCtrl.com.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

TablePress is the most popular and widespread WordPress table plugin (700 000+ active installs).

The plugin does a great job and the creator Tobias Bäthge is providing amazing support for a free plugin! It is perfect for data tables and with some work, it could also be used for comparison tables (powerful marketing tool).

But the thing is that the plugin default styling looks old-fashioned and not very appealing to the eye of the modern user.

Here is a preview of our test table with the default styling and options:

What will probably grab your attention is the poor alignment of the text and elements, the unnecessary sorting and search options and some other minor details, that we’ll want to get rid of.

Center the alignment of all elements

You can see how the text is aligned in the top left corner of the cell.

Even if we centre it, it’d still be at the top which looks bad. Instead, we’ll set it to be centred in the middle of the cell, no matter of the height of the row.

Like this

To do that add this line of CSS to your Custom CSS (you can use this free plugin):

    .tablepress thead th,  .tablepress tbody td {  	text-align: center;  }    td.column-1, td.column-2, td.column-3, td.column-4, td.column-5 {  vertical-align: middle !important;  }    
Remove the unnecessary TablePress options

When adding a new table you will see some checkboxes with options. Some of those are handy, but for our purpose, we’ll want to disable them.

Here is what we left checked:

Alternating Row Colors and Row Hover Highlighting looks good only if your product images are transparent! If you use transparent background images you can leave those options enabled.

Changing the header and footer colour

By default, all tables have a blue header with no option to change. To do so you’ll need to add this line of CSS to your custom CSS:

    .tablepress thead th,  .tablepress tfoot th {  	background-color: #F2A53B;  }    
Adding visual elements

Visuals work better than plain text and when it comes to conversion rates, the numbers increase significantly.

TablePress works perfectly with shortcodes. Add your favourite button shortcode for your CTAs. Download some icons to display pros and cons, “yes and no” etc.

You can even add lists of benefits or specifications, get creative.

Making TablePress Responsive

By default, TablePress tales will shrink to some degree, but on smaller screens most of the tables will look cluttered.

You can see how the columns are overlapping on the example below.

Download the responsive add-on for TablePress- Click Here

Read the description on the page above, because the plugin has 3 responsive modes, also you have to change the shortcode of your table from:

[table id=1 /]

to something like

[table id=1 responsive=collapse responsive_breakpoint=device /]

For “responsive” you can choose from: flip, scroll, or collapse and for the “responsive_breakpoint” from what type of device the table will become responsive – phone, tablet, desktop, or all.

Upload and activate the plugin and let’s check again our table.

I choose the following setup:

[table id=1 responsive=scroll responsive_breakpoint=tablet/]

And here is the final look of our refreshed and styled TablePress table

The post TablePress Custom Styling – How to Make your Tables Sleek and Responsivene appeared first on WpCtrl.com.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

What is Rank Math?

Rank Math is a brand new FREE plugin from MyThemeShop, that promises to be а main competitor in the fight of the WordPress SEO plugins, a fight dominated by Yoast for years.

The plugin is still not available for public download, but a selected few MyThemeShop users were given the opportunity to test it before everybody else and their reviews are promising.

As it looks like Rank Math will be available in both Free and Premium versions.

One thing is for sure, the guys from MyThemeShop have put their hearts and souls into this project and from what we’ve seen so far, it’s notable that this plugin is powerful!

The plugin is so well-documented and described, you can view the plugin’s page for more details here.

Rank Math Setup

The plugin has a setup wizard and a 1 Click Import From Yoast SEO, which will keep your existing SEO settings and you won’t lose anything along the way.

The setup is very detailed, but users can also choose the recommended settings option and skip a lot of the manual work.

The in-post user interface looks similar to the one in Yoast, but with more polished and modern look.

Watch this sneak peek video of Rank Math:

Rank Math - The Most Powerful & Lightweight SEO Plugin for WordPress (Long Intro) - YouTube

I can’t wait for the official launch of Rank Math, to install it and test it myself. I’ll write more details and personal experience once that happens.

The post Rank Math vs. Yoast – Should you Make the SEO Switch? appeared first on WpCtrl.com.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

WooCommerce has proved itself over the past decade as a major e-commerce platform. Combined with the powerful WordPress functionalities and the abundance of plugins available, it is reasonable for some shop owners to switch to WooCommerce.

Migrating stores over platforms is a pain in the ass and even more when it comes to moving the users’ accounts with passwords.

So for one of my stores (running on Presta since forever) I decided to start a second store from scratch, keeping only the products (a total of 646) and the categories.

And I wanted to do this fast.

I searched the web for a FREE solution and I found this plugin.

FG PrestaShop to WooCommerce

With the free version, you can migrate:

  • Product images
  • Product Descriptions
  • Prices
  • Categories
  • Tags
  • and CMS pages

For me, that was more than enough to start my WooCommerce version of the shop. What I noticed afterward was that the plugin puts all products that were disabled or out of stock in the PrestaShop dashboard to drafts which was very handy.

What will you need for the migrate process?

First, you will need to install WooCommerce and the FG PrestaShop to WooCommerce plugin.

After that, you will see an “import” link in the plugin’s box.

This will lead you to the plugin’s settings page, where you will need to fill your PrestaShop database information.

  • Store URL
  • Database Name
  • Database User and password

The rest should be left as default in most cases.

Note:
In case your Presta store is on a different server you have to export the database (from phpMyAdmin), then create a new database and user on the server where your WordPress website is hosted, and import the previously downloaded .sql file to the new database. Then fill the details of it in the plugin’s settings page.

If everything is set properly you should get a green light – Connection Succesful!

Now you are ready to start the importing process. Brace yourself because it takes a while, and by while I mean forever.

What I found was that the importing gets stuck after 2-3 minutes of working. The best thing you can do is refresh the page and click the “Start/Resume the import” button. Then repeat the process until you reach 100%

Also Note: The Import progress goes beyond 100%, so wait for it to finish, don’t close it when it reaches 100%!

Hope this plugin works for you as it worked for me. With its help, I managed to get the store from nothing to full catalog with prices featured images and descriptions.

You can download the plugin here.

The post How to Import Products from PrestaShop to WooCommerce (for FREE) appeared first on WpCtrl.com.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Are you writing amazing detailed reviews with valuable information? Long articles are great for SEO and you should totally stick to them.

On the other side, you have your readers, actual human beings (in a hurry most of the day) that want to find the information they search for in the fastest way possible, or they can get annoyed and leave your website.

Then you have your conversion goals, you want to design your posts in a way that suggest a call to action in an intuitive and not too pushy manner.

Here’s an easy piece of shortcodes that you can try for your product reviews or for whatever other purposes you chose.

The Summary Box

This box is telling the user what is all about within few seconds. It’s responsible and it will integrate smoothly with any theme and post layout.

Here is the live preview first:

You’ll need the following plugins:

  • Olevmedia Shortcodes or simmilar
  • YASR or simmilar for star rating
  • Any button shortcode or image
  • 300×200 image

Free Template

Just copy the following code and paste it to your post, modify it and see how will look.

[box title="" bg_color="#f9f9f9" ]

[one_half]

<img  src="https://wpctrl.com/wp-content/uploads/2018/05/review-img.jpg" alt="" width="350" height="200" />

[/one_half]

[one_half_last]

You'll need the following plugins:

[custom_list icon="check-circle-o" iconcolor="#74b538"]
<ul>
 	<li>Olevmedia Shortcodes or simmilar</li>
 	<li>YASR or simmilar for star rating</li>
 	<li>Any button shortcode or image</li>
 	<li>300x200 image</li>
</ul>
[/custom_list]

<center>[yasr_overall_rating]</center>[/one_half_last]

[su_button url="#"  background="#216fb7" color="#ffffff" size="8" center="yes" radius="0" text_shadow="px px px "]Your Button[/su_button]

[/box]

If you have activated all the suggested plugins and paste the above code in your post/page text editor you should have the same summary box as the example above!

Enjoy!

The post Add Summary Box to your Reviews to Increase Conversions (Free Template) appeared first on WpCtrl.com.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

New Solutions are Added Weekly

Delete Post Revisions

Why is a good idea to Delete old post’s revisions?

Whit time revisions can grow to a significant number and grow on your database.

By deleting old revisions you will reduce your database size and speed up your website.

Another option is to bulk delete all revisions, if that’s what you want you can install the WP-Optimize plugin.

But in this post, I’ll show you how to easily delete only specific post’s revisions, because you may want to keep some of those for later.

Simple Revisions Delete adds a small “Purge” action next to the Revisions number in each post or page.

Simply click the link and it’s all done. Voila!

The plugin also has a bulk delete option if you want to get rid of all your post’s revisions.

Quick Fix Wednesdays

Quick and simple tutorials on common WordPress issues that users face everyday.

New fix every Wednesday

The post The Ultimate WordPress “How to” Guide – Quick Solutions for Common Issues appeared first on WpCtrl.com.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview