Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I was editing a page, and I used the page builder, I added a Text in the page, then I was trying to add a link in the Text, by editing the Text in Visual mode, but after I saved my work, nothing had been changed. I could not add any links in the Texts.
Is there any ways to achieve that?
Thanks.
you can only use text/visual OR pagebuilder on any particular post or page
use this plugin and you will have a visual text editor widget: https://wordpress.org/plugins/black-studio-tinymce-widget/
Thank you very much Zach.
I will take a look at your recommendation first.
Hi crazyfox2015. To confirm; once Black Studio TinyMCE widget is installed you need to search for and insert a widget called Visual Editor using the + button in Page Builder.
Zach, thanks for your help.
Hi Andrew,
Thanks, I am now using the BS TMCE, and it works well. But I have a question about the style. For example, I use the visual tool to add a link, and how can I define the styles of the link texts, hover texts etc? Is the html editor the only way to achieve that?
I don’t like the underlines of the link texts.
This is best done with Custom CSS, for no underlines just insert the following under Appearance > Custom CSS:
#main a { text-decoration: none !important; }Hi Andrew,
Many thanks as usual.
How about the other styles of the texts, ie., size, color etc? Is it best done with Custom CSS too? And how can I achieve that?
For sure.
What do you want to do?
for example, I want the text to be in white color
and when it hovering, it gives me a line.
Just for a single block? If so you could do something like:
Then the CSS to match:
.white-text { color: #fff; }HTML goes in HTML tab of Visual Editor – CSS goes into a Custom CSS module. If you need site wide white text then you’d need to do this differently.
Which theme are you using?
To remove the hover it would be:
a:hover { text-decoration: none; }I see, so, I still need to input the html codes in the visual editor, and then define the attributes in Custom CSS, just like what we normally do in a html website?
I am using the premium one.
Vantage?
You can also just set text color in the Visual Editor widget itself, no problem doing that.
yes, vantage
You can set the overall theme content text color under Appearance > Customize > Fonts.
Hi,
I have the same problem with when you add content in the Visual mode and you press done, the content wont be saved, UNLESS, after you add content in Visual mode you go to Text mode and click just in the text area with the mouse and after that you press Done and then it will save your content. So will this issue be Fixed?
Also a missing icon for Hyperlinks is not present in the plugin. A long time ago i used another plugin where you also can make a duplication of the Main column window, will this also be implemented?
And Crazy fox, there is a way where you don’t have to devine the code in the Custom CSS but directly in the content screen. I had an issue before with the theme i use. Example. The theme use red for hyperlink text, when hover it will get black. I did not want to add devine a style in the custom css so what i did was:
.myLabel span { font-type: bold; }
.myLabel span { font-size: 14px; }
.myLabel span { color: #876908; }
.myLabel:hover span { color: #c22e2e; }
Text area (with the color #876908, hover color is #c22e2e). you can give any name to “myLabel”.
Hope this helps. I use this in my widget by adding a Text area and paste this code in it.
Hi nbtran1975
Thanks for running Page Builder. I’ve just answered a question very similar to yours here: https://siteorigin.com/thread/adding-text-formats-to-pagepost-with-vantage-and-page-builder/#comment-43944.
For further assistance please open a new support thread.
Thanks for your support.
Sorry, the last post i didnt use the code snippet. now it shows the right html codes.
<style> myLabel span { font-type: bold; } .myLabel span { font-size: 14px; } .myLabel span { color: #876908; } .myLabel:hover span { color: #c22e2e; } </style> <div> <span>Text area (with the color #876908, hover color is #c22e2e). you can give any name to “myLabel”.</span </div>