Tips and Tricks

"Everything is hard before it is easy"

- Johann Wolgang Goethe.

This page contains tricks to make editing Wonder CMS sites with Materialize themes easier and faster.

Always add Grid CSS classes to parent elements.


Whether you add a single element or a block of elements, don't forget to add Grid CSS classes to it. This is especially important when adding some elements like images, video, audio and tables. But there are exceptions to this rule, such as in the case of images .


Images inside the Grid using Summernote Editor


When you place an image in the grid, after you place it on the page, first click on it and use the "Original Size" and "Remove float" options. Otherwise, the image will have inline CSS styles automatically added by Summernote Editor when you place the image on the page. This conflicts with the Grid CSS classes.


Paragraphs using Summernote Editor


Instead of centering the text, placing it on the left or right using the Paragraph editor tool, you can use CSS classes left-align, right-align or center-align.


Span for content blocks using Summernote Editor


For content blocks - make the <span> with paragraph inside using Code View tool:

<span class="some Grid classes"><p>Some text</p></span>
This way, later you will be able to easily use the available Summernote Editor tools to create content inside this Span.
⚠️ This does not apply to tables, which are always created at the end of the content code. Read further.


Tables inside the Grid using Summernote Editor


  1. Create the Span using Code View tool and give it some Grid Classes
  2. Create the table using the Table tool
  3. Using the Code View tool cut the table code and paste it to the previously created Span to replace the paragraph inside with table code.

 

Enlarging the gaps using Summernote Editor

To enlarge gaps between lines of text or other elements, use line breaks: <br><br> or <br>&nbsp;<br> or empty paragraphs: <p></p> cleverly. In the Summerote Editor, line breaks can be inserted using ctrl+enter (ctrl+return on Mac). You can make empty paragraphs with the enter key (return on Mac).
⚠️ Sometimes you will need to use Code View tool for this.


To insert an image with a link do as below

  1. Create a paragraph with one word and - if you like to, give it the CSS Grid classes
  2. Make it a link using the Link tool
  3. Insert an image in the next paragraph and give it CSS Grid classes using the Code View tool (don't do it if you previosly give the CSS Grid classes to the paragraph from step 1.)
  4. Cut the code of the inserted image using the Code View tool and replace the text of the previously created link with it

Example

Below you can find the example of the image with link. For this exaple is used the example.jpg image uploaded to this Wonder CMS website.

<p><a href="https://www.apple.com" target="_blank"><img src="http(s)://your-wonder-cms-website-address/data/files/example.jpg" class="col s4"></a></p>