Align "buttons"

Up please ??

Hi.

I don’t know what Vlad’s answer would be, but if I was trying to accomplish what you said you were trying to accomplish, I would do this (tested and works):

• Add the buttons that you want
• Go to your Text Editor (not your visual editor) to see the code
• Find your buttons, and then add divs in there, which would result in something like this:

<div style=”display:inline;”>[button url=”https://www.example.com/&#8221; style=”bubbles” icon=”icon: shield” icon_color=”#99CC99″]Read More! >>[/button]</div><div style=”display:inline;”>[button url=”https://www.example.com/&#8221; style=”bubbles” icon=”icon: shield” icon_color=”#99CC99″]Read More! >>[/button]</div><div style=”display:inline;”>[button url=”https://www.example.com/&#8221; style=”bubbles” icon=”icon: shield” icon_color=”#99CC99″]Read More! >>[/button]</div>

Once completed, you can switch back to your visual editor, and your divs won’t disappear, although you won’t see them.

I just tested this, and it does the trick. The key would be the display:inline of course.

Good luck!

Isn’t the default all buttons in a single line? If you check the rendered HTML, it is just a bunch of <a href></a> and ‘<span></span>`

They shouldn’t split to multiple linies. Can you post an example link?

“WebPrezence Member” your solution didn’t work for me. I am also also looking for the solution. Admin Please reply. Here is the code for buttons:
[su_button url=”Target Page” style=”flat” background=”#2393bc” size=”4″ center=”yes” radius=”round” icon=”icon: envelope-o”]Contact[/su_button]

[su_button url=”Target Page” style=”flat” background=”#5bb531″ size=”4″ center=”yes” radius=”round” icon=”icon: info-circle”]More Info[/su_button]

Thanks.

Shahzadnabeelpk, when implementing what I mentioned up there, please do so in your Text Editor, not your Visual Editor. See this screen capture.

So your code in your text editor will look like this:

<div style=”display:inline;”>[su_button url=”Target Page” style=”flat” background=”#2393bc” size=”4″ center=”yes” radius=”round” icon=”icon: envelope-o”]Contact[/su_button]</div><div style=”display:inline;”>[su_button url=”Target Page” style=”flat” background=”#5bb531″ size=”4″ center=”yes” radius=”round” icon=”icon: info-circle”]More Info[/su_button]</div>

This will absolutely work, but only if done in your text editor. When you switch to your visual editor, you should not see the div tags:

[su_button url=”Target Page” style=”flat” background=”#2393bc” size=”4″ center=”yes” radius=”round” icon=”icon: envelope-o”]Contact[/su_button]

[su_button url=”Target Page” style=”flat” background=”#5bb531″ size=”4″ center=”yes” radius=”round” icon=”icon: info-circle”]More Info[/su_button]

Only in your text editor will you see your div tags.

@shahzadnabeelpk: Can you post a link to the page where you are placing your buttons?

Here is the link to page. please help https://beta.tranzzlate.de/albanischen-sprache/

So the div tags ARE working, at least the way I believe you want them to work. Here’s what I see in all of my browsers: Screen Capture.

And when you’re centering, instead of using the Shortcode Ultimate “Center=Yes” command, leave that blank.

Instead, add this around your shortcodes, in your text editor, not your visual editor:

<span style=”text-align:center;”> ** shortcodes here ** </span>

So in your text editor, it should look like this:

<span style=”text-align:center;”><div style=”display:inline;”>[su_button url=”Target Page” style=”flat” background=”#2393bc” size=”4″ center=”yes” radius=”round” icon=”icon: envelope-o”]Contact[/su_button]</div><div style=”display:inline;”>
[su_button url=”Target Page” style=”flat” background=”#5bb531″ size=”4″ center=”yes” radius=”round” icon=”icon: info-circle”]More Info[/su_button]</div></span>

buttons are centralized, I also got the same view but I don’t want buttons to get below each other, that’s the problem I want you guys to help.

Thanks.

No help from Plugin Author, very sad ??

There are two ways you could do this. Either put them each in their own column or set it as a button class. You’ll notice in both cases, the shortcodes are within a Row shortcode. This is so that they create a new row that can take up the full width of the area you’re dealing with, without interacting with the other things on your page.
The first way is very direct and easy to just plug in. The second way is very useful if you want to reuse the setup elsewhere on the site.

The first way:
In the visual editor:

[su_row]
[su_column size="1/3"][su_button]Number 1[/su_button][/su_column]
[su_column size="1/3"][su_button]Number 2[/su_button][/su_column]
[su_column size="1/3"][su_button]Number 3[/su_button][/su_column]
[/su_row]

The second way uses this on the page:

[su_row]
[su_button class="inline"]Number 1[/su_button]
[su_button class="inline"]Number 2[/su_button]
[su_button class="inline"]Number 3[/su_button]
[/su_row]

And then this in the Custom CSS properties (You can change the width and margin if you don’t want them to be that size. It just makes it standard.):

.inline {
    display:inline-block;
    width:29%;
    margin:2%;
}