Search
Search Menu

How It Works?

Spread the love

The working of WP better pages plugin is quite easy. It consists of 3 main steps : Visual analysis, CSS code creation and finally shortcode generation.

In this example we will try building the plugin boxes from this page : https://wordpress.org/plugins/search/tables/

1) Visual Analysis

Take a look at this photo : 

We will now divide the left plugin box into some sections that we can draw :

As you can see we have a main grid box with 3 cells in it. To generate this we need a grid with 2 rows and 2 columns. There are 2 cells on top but only one on bottom.

2) CSS Code Creation

Now head over to this site : https://grid.layoutit.com/

Make sure there are two rows and two columns on the page.

Now create all 3 cells by clicking on first top two cells individually, and for bottom clink and drag. Name all the areas with something like 1,2,3 or a,b,c.

3) Shortcode Generation

Now click on get the code button on top left. Make sure all top three options are off.

Copy the css code to your plugin’s convert grid box (Click on WP Better Pages in wordpress dashboard, first box in second tab). Then click convert.

Now copy the shortcode to your post or page and then put content in the cells and apply style to it.

**Please note that the first cell is narrower than second one. So you can change columns=”1fr 1fr” to columns=”o.4fr 1.6fr” to achieve the same appearance. Also note that rows are changed from 1fr to auto. Let it remain that way if you don’t know what you are doing.

a) First cell has an image

b) Second cell has title, rating and text

c) Third cell has author name and installations. We will skip the version text.

**Note you will need font-awesome plugin or something similar to generate the rating and the icons beside name and installations.

In our first try this is what we get. Of-course this does not have any style.

———–Begin————

WP Better Pages

(766 Fake Ratings)

Build better looking optins, CTA, review sections, landing pages etc. with this very awesome plugin within few minutes.

Amit Upadhyay

Expecting 10,000+ installations.

———–End————

With little styling where we put background color and max-width in our main grid style tag, this is what we get :

a) Style tag for main grid : background-color:#f9f9f9;max-width:550px;

b) Style tag for first cell : display: flex;align-items: center;justify-content: center;

c) Style tag for second cell : padding:6px;

d) Style tag for third cell : padding:10px;

WP Better Pages

(766 Fake Ratings)

Build better looking optins, CTA, review sections, landing pages etc. with this very awesome plugin within few minutes.

Amit Upadhyay

Expecting 10,000+ installations.

Now my theme adds 30px margin below each p element so the above box looks little larger otherwise when i turn that off the plugin section looks like this :


Spread the love