We recently got a few questions on how to create buttons, or text that looks like buttons, to be easily edited in our own templates. There are two main ways to accomplish this in the Drag and Drop editor.
Use the text editor and format a regular link into a “button”
1. Create your link
2. Highlight your link and choose a background color for your “button”
3. To help create more of a “button” feel, click on either side of your link and add a space. It should add a little bit of breathing room around your link.
4. You may want to change the color of your text as well, depending on which color your background is. To do this, click on the box that holds your “button” and see which section it is in (Pre-Header, Header, Body, Column 1, Footer, etc). If you do not want all your links in the same area to be the same color as the text in your button, then you can drag and drop the block to another section.
From there, click “Styles” at the top right. My button is in the Body, so I next clicked Body and then scrolled to “Body Links” at the bottom and specified the color as white. I also chose “None” under “Link Decoration” and bolded the link there.
5. From here, I decided to center my link, increase the font size, and customize the background color. From here, you have a fully customizable “button” without having to use image editing software or code. Here’s my final example:
Create a button in the image editor
1. This time we’re going to create an actual image but do so within the Image Editor in ClickDimensions. First, you’ll need to add an image block and select a starter image. It doesn’t matter what image because any changes we make will not effect the original image (our image editor always “Saves As”).
Add in your image to the block. I started with an unassuming cup of coffee. Then click the pencil icon to start editing.
2. I’m going to start by resizing this image so it looks more like a button.
You may need to click the lock icon to be able to specify your own dimensions since the proportions of the image are locked by default.
3. Next, scroll to the next page of icons and click “Draw”. Choose your color, and click “Set Color”. This will be the background color. Rapidly draw across your image until the area is completely covered by your chosen color.
Click “Apply”.
4. Click “Text”, choose your color and font, and type in your text. You can drag it to place it in the center of your button and stretch the corner to make the text the right size.
Click “Apply”.
5. From here, you can make other changes, too, with the other features in the editor. When you’re happy with your button, click “Save”. It will save your work as a copy and, in my case, spare our unimposing coffee cup.
You will notice that the editor has already updated your template to include your new image. To link it, simply click the hyperlink icon.
6. To make changes to the text or other properties on the button, you would need to open the image manager again, re-paint your background, and type in new text.
Written by Courtney Smith, ClickDimensions Marketing Success Manager
Powered by WPeMatico