Her er en vejledning til opsætning af email på Simply.com sites – nyttig når fx WordPress / WooCommerce skal sættes korrekt op.
Category: Multimediedesign
-
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:
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!
CSS animations
How to add custom code
e.g. from jsFiddle or CodePenCustom Code: CSS, HTML and JavaScript
And yes – in this particular order:
- Add a custom HTML block.
- Copy the CSS and place it in a <style> element.
- Next insert the HTML
- 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
JavaScriptMaps
… and much more …
Q.E.D.
-
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:
- $wpdb (1)
- 1863 (15)
- 1semE14 (1)
- Adobe Animate (4)
- AI (1)
- Android noter (5)
- Animation (4)
- API (6)
- Artikler (16)
- B&O (1)
- blogging (1)
- Book Review (6)
- Bootstrap (2)
- Business (1)
- Canvas (3)
- computer (1)
- Corona (9)
- Creative Writing (13)
- CSS (6)
- danish (1)
- dansk (1)
- Danske Tutorials (20)
- Database Modelling (1)
- Didaktik (11)
- Digital Kommunikation (12)
- English (2)
- English Tutorials (22)
- FAQ (1)
- flash (1)
- foto (1)
- FOWD (2)
- Front Trends (1)
- Git (3)
- Github (3)
- Github Desktop (1)
- Guitar (1)
- html (6)
- Illustrator (1)
- Image Magick (1)
- JavaScript (10)
- Jquery (3)
- JsConf (1)
- Kanban (118)
- Link (1)
- linux (1)
- Makey (1)
- MAMP (1)
- Master IT og Multimedier (2)
- MMD2 (16)
- Multimedia Design (169)
- Multimediedesign (16)
- Music (2)
- MySQL (9)
- Open Source (1)
- Pandoc (5)
- Per's Corona Diary (2)
- Philosophy (3)
- Photoshop (1)
- PHP (8)
- Portfolio (5)
- Programming (4)
- Project Work (1)
- Python (1)
- Raspberry Pi (1)
- Research Project (25)
- REST API (3)
- Scratch (1)
- sound (2)
- Spin Off (3)
- sql (1)
- teaching (1)
- Teaching WordPress (8)
- Test (3)
- Theme Quest (6)
- Theme Review (13)
- Theme.json (1)
- Themes (14)
- Tutorials (14)
- TV (1)
- Twenty Seventeen (14)
- Typography (1)
- UX (2)
- validate (1)
- WAU Blog (34)
- wceu2021 (1)
- What You Should Know (12)
- Whisky (2)
- Woocommerce (9)
- WordPress (85)
- WordPress Core (6)
- WordPress in the Classromm (3)
- WordPress Workshop (7)
- WWWhat (59)
- XAMPP (1)
- Zengarden (1)
- $wpdb
- 1863
- 1semE14
- Adobe Animate
- AI
- Android noter
- Animation
- API
- Artikler
- B&O
- blogging
- Book Review
- Bootstrap
- Business
- Canvas
- computer
- Corona
- Creative Writing
- CSS
- danish
- dansk
- Danske Tutorials
- Database Modelling
- Didaktik
- Digital Kommunikation
- English
- English Tutorials
- FAQ
- flash
- foto
- FOWD
- Front Trends
- Git
- Github
- Github Desktop
- Guitar
- html
- Illustrator
- Image Magick
- JavaScript
- Jquery
- JsConf
- Kanban
- Link
- linux
- Makey
- MAMP
- Master IT og Multimedier
- MMD2
- Multimedia Design
- Multimediedesign
- Music
- MySQL
- Open Source
- Pandoc
- Per's Corona Diary
- Philosophy
- Photoshop
- PHP
- Portfolio
- Programming
- Project Work
- Python
- Raspberry Pi
- Research Project
- REST API
- Scratch
- sound
- Spin Off
- sql
- teaching
- Teaching WordPress
- Test
- Theme Quest
- Theme Review
- Theme.json
- Themes
- Tutorials
- TV
- Twenty Seventeen
- Typography
- UX
- validate
- WAU Blog
- wceu2021
- What You Should Know
- Whisky
- Woocommerce
- WordPress
- WordPress Core
- WordPress in the Classromm
- WordPress Workshop
- WWWhat
- XAMPP
- Zengarden
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.
