Learn how to implement the features for your 1der1 page. There is never a need to edit code. Just Copy and Paste and use our text editor. We recommend Drag and Drop. You can drag all kinds of data from your computer and from the internet into the input fields on the update page. You will be amazed at how easy and powerful drag and drop can be. It's a lot of fun. You can do this! If you feel overwhelmed, like while assembling your IKEA purchase, we can create your 1der1 page for you.
Click the section headers on this page to read the help text. If you use the navigation tool on the update page, the integrated help link will open this page with the related help section. The section labels on the left of this page match the navigation links on the update page.
Clicking a button uses browser tabs; pressing a function key opens a popup window.
F2 key opens this help page context related.
F3 key opens a search page for matching examples. Please move the mouse over an input field of the form. Then press F3. You can then Copy from those examples.
F4 key shows you a preview of your page before you publish with the Save button. Using the F4 key opens a single popup while clicking one of the preview buttons opens another tab for you to compare the results.
F8 key opens a help video - context specific to your mouse position.
Please note: Automatic adaption to slower devices and connections can result in overriding your settings for a better performance of your 1der1 page.
1der1 is about making it easy for you. You don't have to provide content. Instead, we can use content from your website and your social media accounts. On your 1der1 update page, you provide your website address and the addresses of your account profiles. In the top section of the update page, you will find some tools for this:
Just enter missing business data. You can find helpful information next to each field.
F8 key opens a help video - context specific to your mouse position.
Changing the settings is very easy. You can disable automatic content. If you don't want data from a social media account, just disable it in the following Social list or move it to the Pages.
F8 key opens a help video - context specific to your mouse position.
You can change the background colors and the QR code colors as well. We show you the contrast and make sure that the QR code can be scanned. Please avoid dark background colors to allow easy reading. You can choose dark or bright frame colors for images.
The Header is the top part of manually added content. Like the Cover, it has several optional components. Watch this video. While Header and Cover have many options in common, there are special features for the Header:
If you stack a 'Header Text/Logo' on a 'Header Pictures' video, you would prefer a white 'Text' over a dark video. Since the video will not be part of the print, the white logo image would be invisible on a white page background. Just choose a 'Header Text for Print' like in this example.
The Cover is the central part of manually added content. It is on top of social media covers. Like the Header, it has several optional components.
You can use the content field to drop or paste any code from external sources, or you can start the text editor by clicking the symbol in front of it.
Help about entering external data
Use the LCR position control to choose the 1der1 page column for the content. It can be the wider central Cover or one of the left or right sidebars. The order of the content always relates to its column.
1der1 can connect to internet services to provide data for your 1der1 page. You just have to enter your related profile address. 1der1 develops special connection software for every service and shows the icons of these services. The entries for the Icon profile addresses come prefilled with suggestions for your future registrations. If you click into an address field, you get hints on how to find your profile at this service.
Facebook requires a public fan page for unrestricted features. As long as your Facebook account is private, you can enter it into the Web page list, giving it the name Facebook (private).
In the Set section, you can disable the features of services. If you don't like any of a service's features, just un-check the Use field or enter the service into the Web page list instead.
Enter page addresses you like to see linked on your 1der1 page.
Help about entering external data
The page names will show up on your 1der1 page, and we try to replace the favicons with native 32x32-pixels pictures for better quality.
Styles change the appearance of the page.
Please paste Styles as a file with .css extension or as code with the <style> tag.
Help about entering external data
Styles might interfere if they are sharing the same internal names. Reordering the style sequence might help avoid resulting problems. Please paste style-only code into the style fields and not into the general content fields because this would slow down the performance of your 1der1 page.
If a widget contains style and other code as well, you can paste both separately. If you do not have the knowledge to do this, just paste the whole widget into a content field.
A script for your 1der1 page is executable Javascript code from external sources.
Please paste Javascript as a file with .js extension or as code with the <script> tag.
Help about entering external data
Scripts might interfere if they are sharing the same internal names. Reordering the script sequence might help avoid resulting problems. Please paste script-only code into the script code fields and not into the general content fields because this would slow down the performance of your 1der1 page.
If a widget contains script and other code as well, you can paste both separately. If you do not have the knowledge to do this, just paste the whole widget into a content field.
You can add a script for cascading animations. This script can contain one or more function calls:
LogoAnimation(<name>, <delay>, <duration>, <count>, <direction>);
Example:
LogoAnimation('spin', 10000);
LogoAnimation('rotateYfull', 20000);
All parameters are optional and relate to the settings on the update page.
Following animation names come with 1der1. More are possible by adding Style Sheets.
blur | Blur |
borderbrightness | Border Brightness |
bordercolor | Border Color |
borderpulse | Border Pulse |
bounce | Bounce |
bounceIn | Bounce In |
bounceInDown | Bounce In Down |
bounceInLeft | Bounce In Left |
bounceInRight | Bounce In Right |
bounceInUp | Bounce In Up |
bounceOut | Bounce Out |
bounceOutDown | Bounce Out Down |
bounceOutLeft | Bounce Out Left |
bounceOutRight | Bounce Out Right |
bounceOutUp | Bounce Out Up |
brightness | Brightness |
burst | Burst |
contrast | Contrast |
fadeIn | Fade In |
fadeInDown | Fade In Down |
fadeInDownShort | Fade In Down Short |
fadeInLeft | Fade In Left |
fadeInLeftShort | Fade In Left Short |
fadeInRight | Fade In Right |
fadeInRightShort | Fade In Right Short |
fadeInUp | Fade In Up |
fadeInUpShort | Fade In Up Short |
fadeOut | Fade Out |
fadeOutDown | Fade Out Down |
fadeOutLeft | Fade Out Left |
fadeOutRight | Fade Out Right |
fadeOutUp | Fade Out Up |
flash | Flash |
flip | Flip |
flipInX | Flip In X |
flipInY | Flip In Y |
flipOutX | Flip Out X |
flipOutY | Flip Out Y |
float | Float |
fontsize | Font Size |
foolishIn | Foolish In |
grayscale | Grayscale |
growIn | Grow In |
hinge | Hinge |
horizontal | Horizontal |
hue-rotate | Hue-Rotate |
hue-rotateAnti | Hue-Rotate Anti |
hue-rotateFull | Hue-Rotate Full |
invert | Invert |
jello | Jello |
left | Left |
letterspacing | Letter Spacing |
lightSpeedInLeft | LightSpeed In Left |
lightSpeedInRight | LightSpeed In Right |
lightSpeedOutLeft | LightSpeed Out Left |
lightSpeedOutRight | LightSpeed Out Right |
lineheight | Line Height |
magic | Magic |
marginleft | Margin Left |
margintop | Margin Top |
opacity | Opacity |
outlinecolor | Outline Color |
outlineoffset | Outline Offset |
outlinewidth | Outline Width |
padding | Padding |
passing-reverse | Passing Reverse |
passing | Passing |
puffIn | Puff In |
pulse | Pulse |
ring | Ring |
rollIn | Roll In |
rollOutAway | Roll Out Away |
rotateIn | Rotate In |
rotateInDownLeft | Rotate In Down Left |
rotateInDownRight | Rotate In Down Right |
rotateInUpLeft | Rotate In Up Left |
rotateInUpRight | Rotate In Up Right |
rotateOut | Rotate Out |
rotateOutDownLeft | Rotate Out Down Left |
rotateOutUpLeft | Rotate Out Up Left |
rotateOutUpRight | Rotate Out Up Right |
rotateX | Rotate X |
rotateXfull | Rotate X Full |
rotateYfull | Rotate Y Full |
rubberBand | Rubber Band |
saturate | Saturate |
sepia | Sepia |
shake | Shake |
shakeHorizontal | Shake Horizontal |
shakeUp | Shake Up |
spaceInDown | Space In Down |
spaceInLeft | Space In Left |
spaceInRight | Space In Right |
spaceInUp | Space In Up |
spin | Spin |
swap | Swap |
swing | Swing |
tada | Tada |
textshadow | Text Shadow |
top | Top |
twisterInDown | Twister In Down |
twisterInUp | Twister In Up |
vanishIn | Vanish In |
vertical | Vertical |
wiggle | Wiggle |
wobble | Wobble |
wordspacing | Word Spacing |
zoomIn | Zoom In |
zoomInDown | Zoom In Down |
zoomInLeft | Zoom In Left |
zoomInRight | Zoom In Right |
zoomInUp | Zoom In Up |
Clicking the Save button is the only action that updates your 1der1 page.
Before you update, you can preview the changes in the update form data by using one of the Preview buttons. One button shows you the premium version of your page, the other one the free version. For faster development cycles, you can use the view symbol on the navigation control as well. Clicking this symbol will always show the full view.
Backup and restore are paramount for your business data. We store all your data with high-end security. 1der1 backup & restore automatically creates additional backup versions that you can name. This way, you can easily restore earlier versions after a particular campaign is over, or you can restore last year's seasonal campaign. 1der1 keeps your data in synchronization - modules can't mess up. If your PC crashes before you can submit your data, we have Autosave & Auto-Recovery.
Some professions require a physical backup. Click the Extern button. You can export and import all your data in the standard, human-readable JSON data format that you can edit with Open Source tools. You can have your whole website in a spreadsheet. This way, your IT could edit thousands of franchise shop pages in an instant. In fact, all 1der1 Examples are created by 1der1 software that creates the JSON data. The update page is just another way to create the data, and both methods can be used by turns.
1der1 allows you to present your business as easy as possible, and it is a hub for your most important content as well. You can use 1der1 as your website or as a companion of your existing website.
If you need more pages:
"Keep the total number of pages as small as possible to simplify navigation."
As soon as you have dropped or pasted into the data field, you will find a name for the content in the name field, which you can change. If there is a link inside the data, you will see a favicon at the beginning of the row as well. Name and favicon will help you to remember which kind of content you added.
As soon as you have added, there will be another row for you to fill. This way, you can add without limits. Use the symbol in front of the line to reorder lines by dragging it up or down while you click on it.
Headers have all type of Cover components as well:
Just drop or paste the address of the content into the 'Pictures' input of your update page. If you paste or drop several pictures line by line, your page will show a slide show. Please choose pictures with the same height to width ratio. Otherwise, there will be a gap at the bottom of the wider pictures. Please use the JPG format with web quality and follow the width recommendations at the related input field to reduce the loading time of your page.
You can stack a picture over embedded iframe content. This way, you can hide the loading of a video and choose an individual thumbnail. If the video is supposed to play automatically, the Poster will vanish as soon as the video starts. Otherwise, we will add a play button over the Poster. Clicking the button or the Poster will hide both and start the video. Use the Video Poster Tool to manage your video posters. Please keep in mind that posters add to your 1der1 page load.
Advanced: Instead of using an embedded iframe and Poster, you can use a video tag with a Poster. Just check the Hooters Video example.
Text that shows up in a tooltip on mouseover
There is a text editor for you to write text. Just paste and edit text, insert pictures, and even Video. For a picture logo, just use the link or the image data URI.
The address of a page to visit on mouse click
Do you like the picture component to be part of the print? The default depends on the content and the position.
If you want to show the text first or over the pictures, just choose the Layout. If you stack 'Text' over the "Pictures" area, you cannot click this part of the "Pictures" content.
If there are a Poster and no autoplay, we will automatically add a play button because the Poster is in front of the video play button. In case your Poster contains a click to play hint already, you can choose to have no play button.
You can use the editor for every content field. You can start by pasting code directly into the content field, then clicking the symbol in front of it.
The editor offers video embedding, too. Click the Video button, and then insert a video address from YouTube, Vimeo, Vine, Instagram, DailyMotion, or youku. You get the video address by right-clicking on the video of your choice, then 'Copy video URL'.
Use the Picture button to insert a picture link obtained by mouse clicking and 'Copy image URL'. You can even select an image from your computer's folder, but we don't recommend this for performance reasons.
After clicking on an inserted picture, you can change the image properties.
The editor uses the spell checker of your browser. We recommend Grammarly, which integrates into Google Chrome and Microsoft Office, extending and improving the existing checks for grammar and spelling. You can use external editors like Microsoft Word, too. The 1der1 editor preserves font information of dropped or pasted text.
Buttons, links, and images can have associated click actions.
Type | Param | Action |
---|---|---|
Page content anchor | Navigate to | |
Attach | Show/hide at item | |
Inline | Lightbox | |
Phone | Phone call | |
Open mail | ||
Message text | Open Mail with subject and body | |
Text | HTML | Lightbox |
Function | Parameter | Function call |
URL | Open tab | |
Target | Open in target | |
Popup | Open popup | |
Image | Lightbox | |
Video | Lightbox | |
Iframe | Lightbox | |
Ajax | Lightbox |
Please note: Some websites may limit access.
Popup and all Lightbox parameters can include width and height:
Popup, width:500, height:300 opens the popup window with 500 pixels width and 300 pixels height.
auto:0 causes ANY click on the page to start the click action of the element:
HTML,auto:2 opens the HTML lightbox with the first click on the page if the click happens at least 2 seconds after the page load.
Lightbox parameters may include (case sensitive):
infobar: true/false
toolbar: true/false/auto
smallBtn: true/false/auto
Attach parameters may include (for animation):
duration: number of milliseconds
effect: blind/bounce/clip/drop/explode/fade/fold/
highlight/puff/pulsate/scale/shake/size/slide/transfer
easing: linear/swing/_default/
easeInQuad/easeOutQuad/easeInOutQuad/
easeInCubic/easeOutCubic/easeInOutCubic/
easeInQuart/easeOutQuart/easeInOutQuart/
easeInQuint/easeOutQuint/easeInOutQuint/
easeInExpo/easeOutExpo/easeInOutExpo/
easeInSine/easeOutSine/easeInOutSine/
easeInCirc/easeOutCirc/easeInOutCirc/
easeInElastic/easeOutElastic/easeInOutElastic/
easeInBack/easeOutBack/easeInOutBack/
easeInBounce/easeOutBounce/easeInOutBounce
direction: up/down/left/right
complete: name of function that is called once the animation is complete
for position:
my: position of the attached content, for example:
left top
at: position of the clicked item, for example:
right+10 top-25%
collision: dealing with overflow, for example:
fit
Classes define styles for elements, for example as part of the image properties. Following classes come with 1der1. For animations, use animation classes by preceding the "anim_" extension, for example, "anim_bounceOut". More classes are possible by adding Style Sheets.
round | Rounded corners, increasing intensity |
round7 | |
round15 | |
round25 | |
round40 | |
ellipse | Ellipse, circle |
roundspan | Rounded text background corners |
roundspan7 | |
roundspan15 | |
roundspan25 | |
roundspan40 | |
roundspane | |
shadow | Shadows, increasing radius |
shadow7 | |
shadow15 | |
shadow25 | |
shadow40 | |
shadow_curved | |
glow_silver | Glows |
glow_blue_violet | |
glow_gold | |
glow_lime_cyan | |
glow_lime_yellow | |
glow_orange_yellow | |
glow_red_orange | |
glow_red_violet | |
glow_violet_magenta | |
borderWhite | Border, white |
borderDark | Border, dark |
border_solid | Border styles |
border_dashed | |
border_dotted | |
border_double | |
border_groove | |
border_inset | |
border_outset | |
border_ridge | |
background | Backgrounds |
grad_blue_green | |
grad_blue_red | |
grad_darkpink_purple | |
grad_gold | |
grad_orange | |
grad_orange_red | |
grad_pink_purple | |
grad_rainbow | |
grad_red_orange | |
grad_silver | |
grad_yellow_green | |
grad_yellow_orange | |
grad_yellowed | |
shad_3d | Font shadows |
shad_cloudy | |
shad_dreams | |
shad_embossed | |
shad_fire | |
shad_fire_flare | |
shad_future | |
shad_letterpress | |
shad_machine | |
shad_metal | |
shad_neon1 | |
shad_neon2 | |
shad_neon3 | |
shad_neon4 | |
shad_neon5 | |
shad_neon6 | |
shad_neon | |
shad_retro | |
shad_street | |
shad_whiteframe | |
shad_blackframe | |
shad_redframe | |
shad_goldframe | |
shad_whity | |
hover_bright | Hover and Active Effects |
(see in Link tool) | |
mcover | float: left; margin-right |
w100p | width: 100% |
left | float: left |
right | float: right; position: relative |
inline | display: inline |
center | text-align: center |
align_left | text-align: left |
align_right | text-align: right |
If you like to have a unique website address/domain, just get one at Namecheap.
1der1 makes it very easy for you to Drag and Drop or Copy and Paste data. You can even copy from existing 1der1 pages. This feature is handy if you create 1der1 pages for chain stores. Please respect Copyright and linking rights and use your own or free content only.
You can embed pictures by copy and paste of one or more picture links into the 'Pictures' input of your update page.
Please note: All picture links have to be secure: They have to start with "https".
If you use drag and drop instead of giving the picture link, we can quite often convert the images and store them for you into the cloud automatically. You can drag pictures directly from your website. However, we recommend dragging image files from your PC.
If the dragging from websites can't make your images secure, you should download the pictures first. 1der1 collects the pictures for you, allowing you to download them at the click of a button. You can then optimize your pictures before usage.
If you want to create more specific solutions, use the text editor at the Cover or any Content field.
If you have a website already, just use the same pictures for 1der1, if the links start with "https". Otherwise, drag and drop images from your PC.
Your resulting 1der1 page will load faster if you use Google Chrome or Opera for dragging photos after scaling down and compressing with the Squoosh image optimizer app. You can create logos with SVG-edit. Read the SVG-edit introduction. Convert images into SVG using INKSCAPE.
You can embed videos by dropping or pasting video code into the 'Pictures' input of your update page or by pasting it into a Content field.
If you want to create more specific solutions, use the text editor.
When viewing a video on YouTube, click on the Share button located left-hand under the video player. Then click on the Embed tab. You can now copy the code.
Click on the Share button located in the top right-hand corner of the video.
A popup box will appear that will allow you to copy the Embed code.
Most of the providers of embedded code will offer you some options.
"Code" is a piece of software that you can embed into your 1der1 page. This functionality is called Web Widget.
The update page has several ways for changing the input data of the form. In these cases, you get a note and the option to cancel the changes.
When you changed data manually without saving, there will be a warning before leaving the update page.
While you are entering data on the update page, every change is saved to your hard drive to prevent data loss. There will be an auto-recovery of these autosaved data when you re-start the update page after a PC crash. You can cancel the auto-recovery.