Wp shortcode pro

Before we start, make sure that you have sầu installed WPhường Shortcode Pro on your trang web và know how to navigate the features. If you haven’t, we have sầu tutorials on installing WPhường. Shortcode Pro và navigating WP. Shortcode Pro as well.

Bạn đang xem: Wp shortcode pro

Another thing that we would lượt thích to clarify is that since WP. Shortcode Pro gives you so many different shortcodes to choose from, covering each of the features separately would not only be impractical, it would also be redundant.

The good news is that there are basic concepts that apply to all the shortcodes equally. We will describe the concepts, with examples, for a few shortcodes và using that information – you will be able to use all the shortcodes in WPhường Shortcode Pro easily.

Let’s get started.

Log inkhổng lồ your website’s admin tài khoản, and open a new page/post. Cliông chồng on the green plus sign lớn open up WP Shortcode Pro.

*

Here is how the options screen looks lượt thích.

*

As we have mentioned in one of our other articles, there are many ways to lớn navigate through WPhường Shortcode Pro. The following image will serve as a quiông chồng guide.

*

To demonstrate how to lớn use any of the options, let us take the example of a button shortcode.

For this example, we used the keyboard navigation lớn tìm kiếm for the button shortcode and select it.

*

Once selected, the options for the button open up. Here is how they look.

*

Similar to this menu, each shortcode you select will have sầu its options. What options are present with each shortcode is dependent on the type of shortcode.

Let us check out the example of the button in detail to lớn underst& the variety of options available. The button shortcode has plenty of options, & here are all the options side-by-side.

*

That’s a lot of options. Don’t worry, they are not complicated at all. And yes, we have sầu specifically blurred out some options in the last option menu. We will explain those as the article progresses.

Let’s start by understanding each option in detail.

The style option determines how the button will look. Different shortcodes can have different styles built in which you can use directly. For example, the button has the following styles built in.

*

The URL option specifies the URL which the button will point lớn. You can enter any URL in here.

*

The target option determines if you want the URL khổng lồ open in the same tab or in the new tab. You can select any option based on your requirements.

*

The background color option is used khổng lồ set the color of the button. You can choose the color picker lớn pichồng a color or enter the hex code of the color you prefer directly.

*

The text color option sets the color of the font. Choose a contrasting color to lớn your button color for maximum readability. Similar khổng lồ the background color, you can use the built in the color picker khổng lồ piông xã this color.

*

The kích thước option sets how big or small the button should be. You can use the slider to set the size of the button easily.

*

Your button can have sầu an ibé with the text. This option lets you piông chồng the inhỏ you want to lớn place on the button. You can use a custom image, or use the built-in icons. We recommover using the built-in icons for ease of use. The icons also have sầu a filtering option which lets you quickly find a suitable icon for your button.

*

The position option sets the alignment of the button. You can choose left, right, or center alignment.

*

The radius option sets the roundness of the button. There are plenty of options lớn choose from.

*

The text-shadow options lets you phối a shadow to the text on the button. It offers multiple settings lớn create the shadow of your choice.

*

The Rel attribute setting lets you configure the rel attribute for the button. Technically, the button is a URL, & the rel settings here act the same as they would on any URL. You can use the rel attribute lớn make the link a nofollow, or trigger other popups or lightboxes with it.

*

The title attribute sets the title for the button. This is similar khổng lồ setting the title for a URL.

Xem thêm: Best Free Domain Hosting Of 2021, Best Free Web Hosting Options

*

The button ID gives the button an ID which you can use in CSS or JavaScript for some advanced functionality.

*

The button mô tả tìm kiếm option lets you phối a description for the button.

*

In the Extra CSS Class option, you can assign extra CSS classes to the button which you can then style by referencing them in your CSS files.

*

The Content option is where you enter the actual text which will appear on the button.

*

Checking Your Shortcode With Live sầu Preview

Now to lớn cover the option that we hid in the screenshot above sầu. That feature is the live sầu pReview feature. That means when you configure any shortcode with custom settings, you don’t have to lớn go baông xã & forth in the post pReviews to lớn make sure that it looks right. You can see all the changes you make to your shortcode, in real time.

Here is a small animation that demonstrates how that works.

*

To showcase live pĐánh Giá, here are some of the changes that we did for the buttons and the results that we got.

*

*

*

*

Inserting The Shortcode In Your Post

After you have created the perfect shortcode, the next step is to actually include the shortcode in your post. To do that, all you have to lớn do is to press the ‘Insert Shortcode’ button at the over of the settings window.

*

And here is how it looks on the post/page itself.

*

If you pReview the post, you will notice that the button looks exactly the same as it looked in the shortcode creator.

*

Using presets & their benefits

Another important feature of WP Shortcode Pro which you can use with every shortcode is presets.

A Premix is a collection of settings that you can save sầu for each shortcode to lớn use later. Let us explain with an example. Let’s say on your trang web, you regularly need 2 types of buttons. Without a way lớn save sầu your settings, you will have sầu to lớn reconfigure all the settings every time you need to lớn create a different button. You can imagine that it’s not the best solution in the world.

Presets eliminate this problem by allowing you khổng lồ save sầu your settings & reGọi them in a single cliông chồng. In the button example we created, we can save our complete configuration of the button as a premix by clicking the ‘Preset’ button và clicking ‘Save settings’.

*

A dialog box will appear that will ask the name of your premix. Enter a name that helps you identify this premix later.

*

The next time you want to lớn create the button, instead of configuring all the settings, all you have to vì is go to lớn the presets menu and select your prephối.

*

As soon as you select the preset, all the existing settings will be automatically replaced with your preset’s settings.

Nested Shortcodes

Another concept that you need khổng lồ understand is nested shortcodes. The idea behind nested shortcodes is that some shortcodes are designed khổng lồ be used only inside other shortcodes. This makes the design modular, and the elements inside the parent shortcode can be styled easily.

Let us explain with an example.

Suppose that you have sầu to create a tabbed view on your post. If you select & open the ‘Tab’ option from WP.. Shortcode, you will reach this screen. Notice the warning on the top.

*

The error or warning is there because the tab shortcode is khổng lồ be used with the tabs shortcode, not individually.

Let us kiểm tra out the ‘Tabs’ shortcode.

In the Tabs shortcode, you will see an option of adding a ‘Tab’.

*

Once you cliông chồng the ‘Add Tab’ button, you will be taken lớn the Tab shortcode settings, which we saw earlier. We created a tab for this example. After the tab is saved, you will be taken bachồng lớn the tabs screen, where you will see that the tab we just created is present. The shortcode pReview will also be updated, showing the created tab.

*

You can create more tabs và add them khổng lồ the tabs shortcode. The nested thiết kế makes it easy to customize each tab & opens up possibilities for creative uses.

The tabs shortcode is not the only shortcode with the nested feature. Just remember this, if you use a shortcode và receive sầu a similar warning as we showed you above sầu, then it’s a nested shortcode.

Xem thêm: Top 4 Phần Mềm Làm Việc Nhóm, Top 5 Phần Mềm Làm Việc Nhóm Thịnh Hành Nhất 2020

That’s it. That is how you can use WP Shortcode Pro’s individual shortcodes khổng lồ style your blog posts. Obviously, we haven’t shown you all the shortcodes, but the concept behind using the shortcodes is the same. Just so that you understand better, here are some screenshots of other shortcodes for you khổng lồ see.


Chuyên mục: Theme wordpress