fbpx
Documentation and Tutorials for your BestWebSoft products

User Guide Columns Plugin

Columns

User Guide

Columns

1.0.1 *

WordPress

5.5.1 *

*When using other versions some differences are possible to occur

** Screenshots were taken from a PC

Table of Contents

1. Introduction

2. Add New Columns

2.1. Add Title

2.2. Columns

2.2.1. Image

2.2.2. Numerical Value of Title

2.2.3. Title

2.2.4. Description

2.2.5. Display Button

2.2.6. Button Text

2.2.7. Button Link

2.2.8. Add New Column

2.2.9. Delete

2.2.10. Publish

2.3. Settings

2.3.1 Number of Columns

2.3.2. Column Alignment

2.3.3. Style

2.3.4. Image Position

2.3.5. Custom Widget Background

2.3.6. Column Widget Background Opacity

3. Columns Settings

3.1. Settings

3.2. Miscellaneous Settings

3.2.1. Track Usage

3.2.2. Default Settings

3.3. Custom Code

4. Columns

4.1 Edit Columns

4.2. Delete

4.3. Search

4.4. Copying of the Shortcode

4.5. Add Columns via Shortcode

4.5.1. Add Columns to a Page/Post

4.5.2. Add Columns to a Widget

You can download Columns Plugin here:
https://bestwebsoft.com/products/wordpress/plugins/columns/

1. Introduction

Note: Сlick the “Publish/ Save Changes” button in order to apply any changes.  

1.1. Go to your WordPress Admin Dashboard and find the menu on the left.

1.2. Go to the “Columns” > “Add New” on your dashboard.

1.3. The “Add New Columns” page will open.


2. Add New Columns

Use the “Add New Columns” page to add information and configure a columns content.

2.1. Add Title

Enter the necessary title of a new columns group to an appropriate field.

2.2. Columns

Use the options of the appropriate “Columns” tab to add content to the column.

2.2.1. Image

Use the “Image” option to add an image to the appropriate column.

2.2.1.1. Click the “Add Media” button to open the Media Library window.

2.2.1.2. Click the “Select Files button or drag and drop files into the window to upload new images from your computer.

2.2.1.3. Open the “Media Library” tab to choose images that are already uploaded into the Media Library. Select images and click the “Insert” button.

2.2.1.4. The selected images will be displayed in the “Image” option as follows.

2.2.2. Numerical Value of Title

Use the “Numerical Value of Title” option to set quantitative measure related to the title of the column.

2.2.3. Title

Use the “Title” option to add the title for a column. Enter a custom title to the appropriate field.

2.2.4. Description

Use the “Description” option to add the description for a column. Enter the description text in the appropriate field.

2.2.5. Display Button

Enable the “Display Button” option to display custom button.

2.2.6. Button Text

Use the “Button Text” option to enter the necessary text of the button.

2.2.7. Button Link

Use the “Button Link” option to enter the proper link to the button.

2.2.8. Add New Column

Click the “Add New Column” button to add a new column.

2.2.9. Delete

Click the “Delete” button to delete the selected column.

2.2.10. Publish

Click the Publish button to save the changes and publish the columns.

2.2.10.1. The result of columns publishing may look on a page as follows.

2.3. Settings

Use the “Settings” tab to customize the appearance of columns.

2.3.1 Number of Columns

Use the “Number of Columns” option to change the number of columns in a row.

2.3.2. Column Alignment

Use the “Column Alignment” option to choose the alignment of columns.

2.3.2.1. Choose “Left to set the alignment relative to a left part of a block. 

2.3.2.2. After saving changes the columns with the left-alignment may look as follows.

2.3.2.3.  Choose “Right”  to set the alignment relative to the right part of a block.

2.3.2.4. After saving changes the columns with the right-alignment may look as follows.

2.3.2.5. Choose “Center  to set the alignment relative to a central part of a block.

2.3.2.6. After saving changes the columns with the center-alignment may look on a page as follows.

2.3.3. Style

Use the “Style” option to set columns custom style. To change the style of a column -  select the appropriate value in the “Style” dropdown menu between “Default”, “With Border”, “With Background” or “With Shadows”.

2.3.3.1. Select the “Border Color” and “Border Color” for “With Border” style.

2.3.3.2  Set the color for the border by means of the color-picker tool.

2.3.3.3. Set the color for hover by means of the color-picker tool.

2.3.3.4. After saving changes the columns with changed border-color may look as follows.

2.3.3.5. Select the “Background Color” and “Background Hover Color” for “With Background” style.

2.3.3.6. Set the color for the background by means of the color-picker tool.

2.3.3.7. Set the color for background hover by means of the color-picker tool.

2.3.3.8. After saving changes the columns with changed background-color may look on a page as follows.

 

2.3.3.9. Select the “Shadow Hover Color” for “With Shadow (for hover)” style.

2.3.3.10. Set the color for shadow hover by means of the color-picker tool.

2.3.3.11. After saving changes the columns with the shadow-styled display may look on a page as follows.

2.3.4. Image Position

Use the “Image Position” option to set the image position in the column. Select the desired position from the dropdown menu.

2.3.4.1. Image position “Above Title” may look on a page as follows.

2.3.4.2. Image position “Left Title” may look on a page as follows.

2.3.4.3. Image position “Left Title and Description” may look on a page as follows.

2.3.4.4. Image position “Background Left” may look on a page as follows.

2.3.4.5. Image position “Background Center” may look on a page as follows.

2.3.5. Custom Widget Background

Use the “Custom Widget Background” option for application of “Color or “Image background of the columns.

2.3.5.1. Choose the “Color to apply the color style background.

2.3.5.2. Set the color for the background by means of the color-picker tool.

2.3.5.3. After saving changes the columns the color-style background may look on a page as follows.

2.3.5.4. Use the “Image option to apply the custom image for the background.

2.3.5.5. Click the “Add Media” button to set the custom image for the background.

2.3.5.6. After saving changes the columns with the image-style background may look on a page as follows.

2.3.6. Column Widget Background Opacity

Use the “Column Widget Background Opacity” option to set the background opacity level. Choose the necessary opacity level by the means of a slider or by entering the value to the apropriate box.

3. Columns Settings

Use the options of the “Settings” page to make the settings applicable to all the columns of the website.

3.1. Settings

Enable the “Bootstrap” option, if your theme does not use Bootstrap.

3.2. Miscellaneous Settings

Use the options of the “Miscellaneous Settings” tab to make the settings regarding track usage and default settings.

3.2.1. Track Usage

Enable the “Track Usage” option to allow tracking plugin usage anonymously.

3.2.2. Default Settings

Click the “Restore Settings button to reset all the settings made previously and revert them to the default ones.

3.2.2.1. Click “Yes, restore all settings” button to confirm the procedure.

3.3. Custom Code

Use the “Custom code” tab to insert a CSS, PHP or JavaScript code. To activate the inserted code, enable the “Activate custom … code” option and save changes.

4. Columns

Use the “Columns”  page options to set some changes in the existing columns, to delete the column or to do the search.

4.1 Edit Columns

Go to the “Columns” > “Columns” on your dashboard.  Open the preferred columns in the “Edit” mode and do the proper editions.

4.2. Delete

Click the “Delete” button to delete selected columns.

4.3. Search

Enter the title of the column and click the “Search Column” button to do the search.

4.4. Shortcode

Use the “Shortcode” column to copy the shortcode of the necessary column for further insertion.

4.5. Add Columns via Shortcode

Use the shortcodes to add the columns to the appropriate place.

4.5.1. Add Columns to a Page/Post

Create a new page/post, type its “Title” and insert the selected shortcode.

4.5.1.1. Click the “Update/Publish” button to see the columns in the front-end.

4.5.1.1. After saving changes the page with the inserted columns may look on a page as follows.

4.5.2. Add Columns to a Widget

Go to the “Appearance” > “Widgets” page on your dashboard.

4.5.2.1. Add the widget or edit the existing one.

4.5.2.2. Enter the title and the shortcode to the appropriate fields.

4.5.2.3. After saving changes the footer with columns may look as follows.

Thank you!

Help & Support

Visit our Help Center if you have any questions — https://support.bestwebsoft.com/

Services

We provide additional services such as WordPress themes & plugins development,

graphic design, custom programming.

Contact us now to get a free quote — https://bestwebsoft.com/contacts/

Help & Support

support.bestwebsoft.com

 of