I have a responsive layout and need a solution for editors to easily create muti-column content within TincyMCE.
Found some Plugins which allow me to create simple Templates/Snippets which can be inserted into Tiny and then modified (e. g. TinMCE Templates).
I don´t like the solution for some reasons. Editors could (and will) break things badly by accidently removing tags or nesting things. Moreover there seems to be no way to leave the parent div.
I think the best solution would be a button which opens a dialog, where editors can select a layout/style and then fill out predefined fields. For example: Click button, choose layout "2 columns", a form appears with fields for column 1 and column 2 (title and body). I appended a mockup for clarification.
If the editor inserts a template and wants to edit the texts, ideally he just clicks a part of the inserted template and the overlay opens again, so that nothing gets broken.
Is there such a plugin? Or an other built-in way?
This is the plugin that you're looking for to achieve multi-column support → Easy Columns
Related
I have an issue with the Gutenberg blocks in WordPress. I save a section of text with an image as a reusable block. However, if I insert that block multiple times on the page and change one image, all of the images are changing.
I can't seem to find any workaround for this. I want to be able to change each image individually. I even tried using "Design Patterns" however the results are the same.
Is there any solution to this?
You will need to convert the reusable block to regular blocks before you can update the images individually. There is a button in the toolbar when you select the block that allows you to do this:
I'm trying to do the layout of a course on masterstudy in wordpress, but I'd like to make a template for certain parts of the course, lets say for example when I hover over the title, show an image, when I click on a paragraph, make another one appear next to it etc... I think it is possible to have shortcuts for these and not have to copy paste the code each time I want to have these effects. I think this icon(see image) might do the trick (not sure) but I can't seem to save a template in my dashboard. So if it is indeed this button, can you please explain me how to save templates, and if it is not the solution can you explain me where to look ? The screenshot shows the Tiny MCE editor
Thanks screenshot
I am working in Wordpress version 5.4.1, in Gutenberg, with a table block and having trouble editing.
It is relatively simple setup. One column of images another of text. I need to edit and change one image and I find it cannot be edited through the visual editor. I cannot get to detail below table. See image from the bottom of the editor.
Is this a bug, or am I doing something basic wrong.
BTW, I can edit the text and I can edit the HTML to change the image, but that is of course defeating the intent of the visual editor.
You really should check out the guide, how to ask questions on stackoverflow: https://stackoverflow.com/help/how-to-ask
So I guess, you want to have a two column layout created with the Gutenberg Editor in Wordpress.
Gutenberg: Columns Block for multi-column layouts
There is the columns block for that (layout). This block is used to create multi column layouts. You can add it under "Layout Elements" -> "Columns" (https://wpdevelopment.courses/articles/a-list-of-all-default-gutenberg-blocks-in-wordpress-5-0/#layout). Use this block, it will ask you which column layout you want to choose. I think the two columns seperated in the middle will be your choice. You can also set if the content should be vertically top, middle or bottom.
Inside the columns you now have "+" and can add an "Image", found under the common blocks (https://wpdevelopment.courses/articles/a-list-of-all-default-gutenberg-blocks-in-wordpress-5-0/#common-blocks), and upload or choose an image from your media library. Inside of the other column you can add your paragraph.
Gutenberg: Table Block for tabular data in table format
There is the table block for that (formatting: https://wpdevelopment.courses/articles/a-list-of-all-default-gutenberg-blocks-in-wordpress-5-0/#formatting). The times using tables for layouting thankfully are over since a long time. You should not use tables to create the layout of your website. They are and were only for data in table format, not for creating layouts.
Is your image block not working?
If you are using your image block, you cannot upload or add images form the media library? Please try deactivating all your plugins and change to a default wordpress theme (i.e. twentytwenty). Is the problem still occuring when using Gutenberg? You should check the console in your browser inspector if there are any erros.
Your image block is just not working for one image?
Try to delete that block and save the page. Clear all your caches and reload the page. After that, insert a new image block in your layout. If it is working now, there just was something wrong with this one block element.
Your image is not working inside a table block?
Are there any errors, have you tried deactivting all plugins and change to default theme? Are you really wanting to show data in the table, or do you want to set up a column layout? Maybe it would be better to use the columns block, if you want to achive two column layout.
Our team is working in ServiceNow and trying to make some aesthetic changes to the ootb Form widget. We've cloned that widget and are trying to give the Form Sections a different background and some larger/bolder font. Since the Form layout is buried in some template code in the system, the only way for us to change the look and feel is to manipulate the DOM in our cloned widget. We've read that the best way to do this is to use the Link Function tab, but we are unsure how to begin. After inspecting our console, it looks like we want to manipulate the parent div of a tag. What is the syntax so that we can target that specific div?
We've tried different variations of this without any success:
angular.element('legend').parent().addClass('newDiv');
Depending on how big changes you want to make are, I would just try and add CSS using the page CSS. I don't know how familiar you are with ServiceNow, but if you ctrl + right-click the widget in the portal, click 'Page in designer', and then the 'Page' button with a gear on it in the top right corner, then you can add page specific CSS there. I've used this a lot, and it also saves you from cloning the widget.
i want to make a css/jquery tabbed for an "Admin panel", so it will all be loaded without the need to refresh.
im going to do it dynamicly but its a small exercise site so i know ill have only 3-4 main "areas" to edit in the panel (the tabs in the top).
the thing is i have other links for each editing area.
is there a way to do it with jquery, without the need of putting all the code in 1 page, in 3-4 divs and make them all invisble except the tabed being choosen(like ive seen in examples)?
in examples i saw all the content in one page, and if adding the top tabs and also the pages of each area(lets say delete, edit etc) its alot of code.
is there a comfortable way of doing it, while being able to make it dynamicly in the future?
edit to answers:
i already made tab from the this tutorial:
http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the thing is, at first in the admin menu i have like 13-14 html pages(before it becomes php) with different operations.
how would you take 13 pieces of code(they have the layout and the admin+admin menu yet the content is changed) that should be in different files, and make them show up in the same tab?
would you have to split each code to only its div, and then load it someway?
from the tutorial above, they used all of the content in one page and used invisible......
how would you load 13 pieces?
Have a look at the jQuery UI Tab Widget:
you can load the tab content statically or dynamically with AJAX
it uses the jQuery CSS framework
it's easy and full of sample code