Multimusen.dk

Category: English Tutorials

WordPress tutorials in English.

  • Taxonomies: filter by Category or Tags

    Taxonomies: filter by Category or Tags

    Below you see two columns. One with texts from the English. To the right Danish articles. It’s made by two Query Loops, one for each category. In this way you can create multilingual sites.

    [icon name=”filter” prefix=”fas”] Query Loop Filter

    Category: English

    Category: Dansk

  • Mega Menu 2

    Mega Menu 2

    My Mega Menu will appear above this post when you hover over “Dropdown” – or click on it.

    • Responsive
    • No plugin needed – it’s all done by HTML, CSS, JavaScript and WP markup.
    • The menus inside the mega menu are made by WP’s navigation block

    Insert the wanted menu somewhere. Make sure to adjust the menu’s behavior. Select the block in Document Overview. Then copy the block.

    Now in the editor – paste the code. You will get something along these lines:

    <!-- wp:navigation {"ref":62,"overlayMenu":"never","layout":{"type":"flex","justifyContent":"center","orientation":"vertical"}} /-->

    How to Create a mega menu

    Sample Code on Github
  • Animation and parallax – custom code in WordPress

    Animation and parallax – custom code in WordPress


    Animations, Effects and Custom Code in WordPress

    Animations and Parallax

    Plugin: Blocks Animation – CSS Animations for Gutenberg Blocks

    Parallax Javascript Library

    Rellax.js

    Rellax.js

    Here you can download Rellax.js:

    All about Rellax.js
    Rellax CDN

    Rellax need this script at the end of your page or post:

    <!-- initiate Rellax Js -->
<script>
  // Place this script at the end of the page.
  // Start Rellax
  var rellax = new Rellax('.rellax');
  // Destroy and create again parallax with previous settings
  // rellax.refresh();
</script>

    How can I give a <div> or similar container elements full width?

    Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it’s width. If you do this you can see, that the div has a class named alignfull. Add this class to the WP markup:

    <!-- Put the cover inside a div element -->
<div class="rellax alignfull" data-rellax-speed="3" style="width:100vw;">

    Don’t tell it.

    Show it!

    Bam !!
    Url: https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDV2NjRjMHd4MmphbXV4NmFpOWhkMnJib3hvbWp6OWpuNGEwbmV4eSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/3lxnK7ITpLB205JD5k/giphy.gif

    CSS animations

    How to add custom code
    e.g. from jsFiddle or CodePen

    Custom Code: CSS, HTML and JavaScript

    And yes – in this particular order:

    1. Add a custom HTML block.
    2. Copy the CSS and place it in a <style> element.
    3. Next insert the HTML
    4. After the HTML-element(s) add theJavaScript.

    In the Custom HTML block the code above could look like this:

    <style>
#square {
  background-color: yellow;
  width: 125px;
  height: 125px;
  border: 3px solid black;
}
@keyframes example {
  from {left: 0px;}
  to {left: 200px}
}
.animate {
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}
</style>
<!-- Her følger HTML -->
<div id="square"></div>
<h3>Click the yellow square</h3>
<script>
let runAnimation = function(){
  square.classList.add("animate");
  setTimeout(clearClass, 4000);
}
// element.addEventListener("click", myAddClassFunction);
square.addEventListener("click", runAnimation);
//
let clearClass = function(){
  square.classList.remove("animate");
}
</script>

    Click the yellow square!

    Custom Code in WP

    Animations
    Parallax
    CSS
    JavaScript

    Maps

    … and much more …
    Q.E.D.


  • Animation

    Animation

    This animation is made by the Animate Gutenberg Blocks Plugin.

  • Gallery from w3 tutorial

    Gallery from w3 tutorial

    1 / 3

    Caption Text
    2 / 3

    Caption Two
    3 / 3

    Caption Three




    from this turtorial: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

  • Categories and Custom Query Blocks

    Categories and Custom Query Blocks

    Categories

    You can give structure to a blog if you remember to add your Posts to one or more categories. Here you have to analyze your content. Which categories will be relevant in this case?

    Categories can be anything from:

    • Language (categories: English, Danish, Slovakian, German, Chinese)
    • Topics (categories: fashion, kitesurfing, hiking)

    To the right in the Post settings you can add any post to a category. If the category does not exist you can create it too:

    In this case you can see a few language categories. This post is in the English category. You may want more categories than this.

    Categories and the Menus

    In the menus you can link to a category. The category is presented in the Archive template. So if you want to change the looks of the category page, that’s the template you’re looking for.

    How to present a category in a post, page or template

    You can present categories in several ways. Explore the options in Gutenberg.

    Categories List

    Will list all categories:

    Categories

    Will display the presnt category, as you see below here:

    ,

    Query Loop

    Add a Filter, and select Taxonomies. Click on the + and select categories. Now write the category you want to see. In this case the category below is “English”.

    In this way you can filter the content by one or more categories:

    Sample Query Loop

    Category: English

    Tags

    Remember that you can add tags to a Post. Then you can filter by tags too – or even by a combination of tags and categories.

    In this way you can add structure to a blog.

  • JSON Array in WP

    JSON Array in WP

    This page is a demonstration of the turotial “JSON Band List”. Here the contents of the JSON band list is looped out in my post.

  • Rellax – in practise

    Rellax – in practise

    Here is a parallax effect made via the Rellax library. Here is the recipe:

    • Add the divs that you want to animate.
    • At the bottom of the page add the Rellax Library

    Also see this page. There you’ll see the actual code.

    Images

    Convert the image to HTML and add the relevant data.

    Rellax in a cover block


  • Parallax Effects by Rellax Js

    Parallax Effects by Rellax Js

    Demonstration of the Rellax Js Library.

    Per’s Rellax Tutorial (ca. 7 minutes)


    Stray <p> tags

    If you have whitespace in the code WP will add <p> tags, and such tags may ruin you JavaScript – or at least throw errors in the console. This will happen as soon as you save the page or post. This is most annoying.

    That’s why there is no space between the tags in the code above.

    In your editor you can install a plugin that will remove whitespace in the code.

    You can animate any HTML element, be it <p>, <img>, <article>, <figure> etc.

  • Karrusel

    Karrusel

    Karusellen er fremstillet i Kadence Blocks “Gallery Adv.”

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close