- Make your content editable
- Create a custom mod
- General usage
- AngularJS 1
- Angular 2+
- Data only
- Global methods
- Anymod HTML
- Anymod CSS
- Kitchen sink
- Content anywhere
- HTML & CSS on the page
- Order of items
- Contact Form
- Carousel (Slideshow)
- About Module Monday
- October 2018
- September 2018
- August 2018
- July 2018
- June 2018
To use mods in your project, paste the
<div> tag for your mod and the
<script> tag for your project.
When you add a mod to your project, you are directed to a page with the install code for the mod you’ve just added. It will look something like this:
To make your new mod show on the page, paste this code into your HTML where you would like the mod to show. For example, we’ve pasted the same code here, and it delivers the mod:
If you have multiple mods on your page, you don’t need to paste the
<script> tag multiple times. Include it only once at the bottom of your HTML page, just before the closing
The above code delivers both mods:
You can add as many mods as you want to a page and you only need to add the
<script> tag once. It’s also not a problem to add the same mod multiple times.
Add as many mods as you want to a page. All mods are delivered together in a single request, so delivery of 10 mods is just as fast as delivery of 1 mod.
You can use the dashboard to edit both the content of a mod and its code.
Content is the text, images, and attributes that show for a mod, like a title or the text of a button. You do not need to know how to code to edit the content.
To edit content, log into your project at https://anymod.com and use the search bar or browse to find the mod you want to edit. Click on it, and you will see a screen like the following:
Clicking the “Content” tab allows you to make changes to the mod’s content:
Once you have made changes, click “Publish” to make the changes live.
To edit code, log into your project at https://anymod.com and use the search bar or browse to find the mod you want to edit. Click on it, and you will see a screen like the following:
The page is divided into four adjustable parts:
- Top-left is for HTML
- Top-center is for CSS
- Bottom is a Live preview
Each time you make edits, you can click the
Save button or press
command+s on mac) to save your changes. Changes you make in the dashboard are live and are immediately used wherever the mod is delivered.
A mod has an
id attribute and will also keep any other attributes (such as
data-toggle, etc) you add to it.
The id attribute identifies the mod so that it can be delivered to the page. Following HTML convention, you can use this attribute with or without quotes (in this example,
id="anymod-mldrn"), as both will work.
Each mod has a unique id.
You may also use
id=anymod-blank if you have added a URL rule in your dashboard with mods in it.
If you use
anymod-blank, mods will be delivered according to the order in your URL rule in the dashboard.
Any attributes you place on a mod (such as
data-toggle, etc) will be kept during the render process.
For example, if you add
style="color:green;" to a mod like so:
That style will be kept and applied to the mod.
Each project will have a script that looks something like this:
project attribute lets the script know which project to request mods for. This attribute will be the same for all mods in a given project. However, if you have multiple projects, each one will use a different value.
Unlike the key and load attributes above, the project attribute sometimes starts with a number, so it must always be used inside of quotation marks (
src attribute should be set to