{"id":2576,"date":"2016-09-30T17:15:21","date_gmt":"2016-09-30T22:15:21","guid":{"rendered":"http:\/\/www.ragesw.com\/blog\/?p=2576"},"modified":"2018-04-10T02:15:45","modified_gmt":"2018-04-10T07:15:45","slug":"shape-play-with-everweb","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2016\/09\/30\/shape-play-with-everweb\/","title":{"rendered":"Shape Play with EverWeb!"},"content":{"rendered":"

EverWeb<\/a> includes\u00a013 built in shapes that can be used and customized in a number of different ways to add features and flair to your website. Here are a few tips on getting the best from\u00a0shapes\u2026<\/p>\n

 <\/p>\n

Mouse Over and Mouse Down Effects<\/h2>\n

Using Color Fill<\/h3>\n

A good way to draw a visitor’s attention to a particular part of your web page is\u00a0by changing a shape’s color depending on user behavior. For example, you can change a button shape’s\u00a0color when it’s\u00a0‘moused over’ or ‘moused down’. To create this effect, select the shape you want then go to the ‘Fill’ section of the Shape Options tab. Click on \u2018Normal\u2019 and change the setting to either ‘Mouse Over’ or ‘Mouse Down’. Next, change\u00a0the Fill type from ‘None’ to ‘Color Fill’ and select the color you want. When the user mouses over or mouses down, the button will change color.<\/p>\n

 <\/p>\n

Using Image Fill<\/h3>\n

You can use ‘Image Fill’ as a Fill type to create special mouse over effects. For example, if a visitor mouses over an image, you can use the mouse over effect to highlight certain parts\u00a0of the image (see the screenshot below). To do this, use an image editor to create an image that contains your text caption. Once you have done this, add an image to your page in EverWeb. Next, add a rectangle shape to your image in EverWeb where you want the text caption to be located. In the Shape Options tab, make the rectangle’s Fill for the Normal state ‘None’. This will make the rectangle invisible. Now change the Fill for\u00a0the\u00a0‘Mouse Over’ state to ‘Image Fill’. Choose your text caption image. Preview or publish the page and mouse over the area where the shape is. The text magically appears!<\/p>\n

 <\/p>\n

\n

\"Mouseover<\/a><\/p>\n

The top image uses a rectangle shape but cannot be seen as the ‘Fill’ for Normal behavior is set to None. In the bottom image, the ‘Fill’ for Mouse Over for the same shape is set to Image Fill. The image used is a piece of text about the building. When the visitor mouses over the rectangle area, the text appears!<\/p>\n

 <\/p>\n

Adding Text to Shapes<\/h2>\n

Remember that you can add text to shapes. This is useful when you want to create a button with a label on it or when using the speech bubble shape! Just double click on the shape and start typing. Use the Fonts Panel to apply font choices and the alignment options in the Text Inspector to center the text vertically and horizontally. Set Before Paragraph,\u00a0After Paragraph and Insert Margin settings to zero. If using the speech bubble and it\u2019s stem is not in the corner you want it in, use the Flip option in the Rotation section of the Metrics Inspector. This stops your text \u00a0rotating when rotating the stem.<\/p>\n

 <\/p>\n

Creating Special Effects<\/h2>\n

Create a Pill Shaped Button<\/h3>\n

Start by adding a rounded rectangle shape to your page. Set the Corner Radius to about 25 in the Widget Settings. Add the text you want and style it using the Fonts Panel. Use the Text Inspector to center and align\u00a0the text inside the button horizontally and vertically. Set Before Paragraph, After Paragraph and\u00a0Insert Margin to zero. Use the Line options in the Stroke section of the Shape Options to add a border to the button if desired.<\/p>\n

 <\/p>\n

Create Picture Frame\u00a0Buttons<\/h3>\n

To create a picture frame effect button, choose the shape you want e.g.\u00a0 a circle. Make the height and width equal and then check ‘Constrain Proportions’ in the Metrics Inspector. Next, go to the Shape Options tab and change Stroke from \u2018None\u2019 to \u2018Picture Frame\u2019 e.g. in the example screenshot below we used the fourth frame on the first row of picture frames. This produces a\u00a0circle with a square border. You now have a button which you can use e.g. as a hyperlink to another page.<\/p>\n

 <\/p>\n

\"Picture<\/a>

Combine shapes with picture frames to create button effects easily.<\/p><\/div>\n

 <\/p>\n

Combine Shapes for Different Effects<\/h3>\n

Combining shapes can easily create different effects. For example, create a crescent moon effect by adding an oval shape to a black \u00a0background. In the Metrics Inspector check that the oval shape height and width are equal, then click ‘Constrain Proportions’ to keep the shape as a circle. Fill the circle with a white, or yellow, color using the Color Fill option in the Shape Options tab. Next, duplicate the shape. Change the color fill to black to match the background. Move the duplicate as required so that it overlaps the original circle. This will create the crescent moon effect. Finally select both shapes and group them so you can easily move the crescent moon\u00a0around the page whilst keeping the effect.<\/p>\n

 <\/p>\n

\"crescent-moon\"<\/a>

The presence moon is created using two overlapping circles shapes as shown. The background circle is white, the overlapping shape black, on a black background.<\/p><\/div>\n

 <\/p>\n

Shape Widget Settings<\/h2>\n

Some shapes have\u00a0Widget Settings available to them e.g. the Speech Bubble has an option to change the edges to make the bubble more round or square\u00a0looking. These following shapes have Widget Settings:<\/p>\n

Rounded Rectangle<\/p>\n

Single Arrowhead<\/p>\n

Double Arrowhead<\/p>\n

Star<\/p>\n

Polygon<\/p>\n

Jagged Box<\/p>\n

Speech Bubble<\/p>\n

 <\/p>\n

Some shapes also have a ‘blue dot’ available when you use them. As you move the dot the shape changes in character e.g. the rounded rectangle can become a circle or even a square edged rectangle. The shapes that have feature a blue dot are:<\/p>\n

Star<\/p>\n

Jagged Box<\/p>\n

Rounded Rectangle<\/p>\n

Single Arrowhead<\/p>\n

Double Arrowhead<\/p>\n

 <\/p>\n

If you ever\u00a0select the wrong shape, you can easily change it to the shape you want. In the Shape Options tab go to the Shape section. Click on the drop down menu and select the shape you want. The shape changes but retains any settings you may have applied already.<\/p>\n

 <\/p>\n

With some thought and imagination, shapes can be extremely useful in your web design. Enjoy!<\/p>\n<\/div>\n

 <\/p>\n

You can also find EverWeb\u00a0on Social Media at<\/p>\n

Facebook<\/a><\/p>\n

Google+<\/a><\/p>\n

Flipboard<\/a><\/p>\n

YouTube<\/a><\/p>\n

Twitter handle @ragesw<\/p>\n

\n

If you have any comments, questions or feedback please let us know. We’re happy to help. <\/p>\n","protected":false},"excerpt":{"rendered":"

EverWeb includes\u00a013 built in shapes that can be used and customized in a number of different ways to add features and flair to your website. Here are a few tips on getting the best from\u00a0shapes\u2026   Mouse Over and Mouse Down Effects Using Color Fill A good way to draw a visitor’s attention to a […]<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,252,2],"tags":[279,319,318,320],"class_list":["post-2576","post","type-post","status-publish","format-standard","hentry","category-everweb","category-everweb-software","category-software","tag-everweb","tag-hints","tag-shapes","tag-tips"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=2576"}],"version-history":[{"count":12,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2576\/revisions"}],"predecessor-version":[{"id":3584,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/2576\/revisions\/3584"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=2576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=2576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=2576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}