We’re currently beta testing EverWeb version 2.0, but in the meantime we’re so excited about it that we wanted to share some things about the upcoming release with you! As you may know, blogging is coming in EverWeb 2.0! This headline feature will be available to EverWeb+Hosting users and for those of you who have your own Hosting provider. There’s also great support for iWeb and WordPress users included. For now, we’d like to tell you some of what iWeb users can expect…
The new blogging environment in EverWeb version 2,0! In this screenshot, an iWeb blog entry has been imported and the original image drag and dropped in to the blog post. The recreated blog post took only a few minutes to do!
Import Your iWeb Blogs in to EverWeb!
EverWeb version 2.0 will easily import iWeb blog entries into EverWeb’s blogging feature. EverWeb 2.0 will make it simple and straightforward to transfer your blog titles and text over with just a couple of mouse clicks.
The screenshot below shows a sample iWeb blog entry imported in to EverWeb version 2.0. The blog title, date, time and main body text are quickly added in to your EverWeb Project file’s blog. We spent only a couple of minutes formatting the EverWeb version to match up with the original just to give you an idea of what’s coming soon.
The original blog post from iWeb which has been recreated in the next screenshot with the forthcoming EverWeb 2.0 release.
In EverWeb 2.0, you will be able to quickly format all blog posts at once by adding Master Page like features directly in the Blog Post Preview Window. You will also be able to easily edit blog posts using a great in-line editor which includes features such bullet lists, numbered lists, quote levels, paragraph styles and more. There’s also a choice of Disqus and Facebook Comments for your comments engine, so your visitors can join the conversation!
The recreated blog post in EverWeb version 2.0 uses Master Page style features to save you time and effort. There are lots of new and updated features for all iWeb blog developers to enjoy.
In our example screenshot above, once the text was imported from iWeb in to EverWeb version 2.0, the page and background colors, as well as the page dimensions, were changed using the Page Settings tab in the Inspector Widow.
The blog post Widget Settings were used to change the blog post’s fonts to look like how they were in iWeb. The Navigation Links to the previous post, next post and blog index were also changed and a Comments Engine added (not shown) so visitors can comment on the blog post.
A Navigation Menu Widget from EverWeb’s Widgets tab was added at the top of the page to give the blog post the same navigation as it had in iWeb.
Finally, the blog entry’s image file from iWeb was drag and dropped from it’s original location on the hard disk on to the Blog Post Editor Window, centered and given a background frame using a shape.
Recreating blog posts from iWeb is easy and our example only took a few minutes to make. Remember that there will be some differences between the iWeb and EverWeb but it’s a great opportunity to update the look of your blog with EverWeb version 2.0 features that keep your website fresh, up to date, easy to change and easy to mange in the future.
We’ll have another update soon on the upcoming EverWeb 2.0 release!
EverWeb includes 13 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 shapes…
Mouse Over and Mouse Down Effects
Using Color Fill
A good way to draw a visitor’s attention to a particular part of your web page is by changing a shape’s color depending on user behavior. For example, you can change a button shape’s color when it’s ‘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 ‘Normal’ and change the setting to either ‘Mouse Over’ or ‘Mouse Down’. Next, change the 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.
Using Image Fill
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 of 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 the ‘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!
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!
Adding Text to Shapes
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, After Paragraph and Insert Margin settings to zero. If using the speech bubble and it’s 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 rotating when rotating the stem.
Creating Special Effects
Create a Pill Shaped Button
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 the text inside the button horizontally and vertically. Set Before Paragraph, After Paragraph and Insert Margin to zero. Use the Line options in the Stroke section of the Shape Options to add a border to the button if desired.
Create Picture Frame Buttons
To create a picture frame effect button, choose the shape you want e.g. 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 ‘None’ to ‘Picture Frame’ e.g. in the example screenshot below we used the fourth frame on the first row of picture frames. This produces a circle with a square border. You now have a button which you can use e.g. as a hyperlink to another page.
Combine shapes with picture frames to create button effects easily.
Combine Shapes for Different Effects
Combining shapes can easily create different effects. For example, create a crescent moon effect by adding an oval shape to a black background. 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 around the page whilst keeping the effect.
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.
Shape Widget Settings
Some shapes have Widget Settings available to them e.g. the Speech Bubble has an option to change the edges to make the bubble more round or square looking. These following shapes have Widget Settings:
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:
If you ever select 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.
With some thought and imagination, shapes can be extremely useful in your web design. Enjoy!
We are pleased to announce that EverWeb version 1.9.7 is now available for download for anyone with an active license and macOS Sierra (10.12) installed. Please read the information in the ‘How to Update to EverWeb version 1.9.7’ section below before updating.
This version of EverWeb focuses on compatibility with the new macOS Sierra operating system. A big update is coming soon with EverWeb version 2.0 which will add a host of new, exciting features to the product. We will have more news soon!
EverWeb 1.9.7 Features
Supports Apple macOS Sierra operating system
Fixes issues when previewing websites in EverWeb on macOS Sierra
How To Update To EverWeb version 1.9.7
EverWeb version 1.9.7 is available only with macOS Sierra installed. The update is not available if you are using OS X El Capitan or earlier.
If you have installed macOS Sierra you can easily update to EverWeb 1.9.7 by launching EverWeb and going to the EverWeb menu at the top of the screen and selecting ‘Check for Update’.
EverWeb will check to see if you are running macOS Sierra. If you are, the Software Update window will appear where you can update EverWeb to version 1.9.7.
If you are running an older Operating System version, you will not see the Software Update window and will remain on your current version of EverWeb.
Remember that you won’t lose any previous data when updating since your website project files are stored elsewhere on your computer.
If you purchased EverWeb as a standalone product the upgrade will not be free if your license has expired. You can check your license expiry date at any time using the EverWeb-> Preferences… menu. The ‘Next Due Date’ in the ‘Account’ tab shows the date your license is due for renewal.
The EverWeb Standalone license entitles you to EverWeb plus one year of upgrades and support. You can always use your purchased version of EverWeb without ever paying again. If your EverWeb license has expired and you want to renew it to receive another year of updates and support, click on the ‘Manage Account’ button. This will take you to the EverWeb Client Area. Select the Services-> My Services menu. On the ‘My Products & Services’ page, double click on the EverWeb product that has expired. The ‘Manage Product’ page is where you renew your license. Once you have renewed your license, you can update your product to the latest version.
What are Cookies?
Cookies are small packets of data that a website asks a web browser to store so that the data can be used in the future. The data stored typically helps identify visitors, visitor preferences or visitor actions. Cookies can be either be valid for the browser session or persistent i.e. permanent.
What Does This Mean For My Website?
Even if your website is targeted towards a market or audience outside of the EU, cookie consent is probably good to include anyway in case visitors from the EU find your website.
Silktide’s Wizard quickly guides you through setting up and customizing your Cookie Consent bar.
Using Silktide for Cookie Consent
The code that you have copied to the clipboard should be added to your Site Publishing Settings. To access the Site Publishing Settings, click on your website name in the Web Page List of your project, or use the File-> Edit Publishing Settings menu.
In the Head/Footer Code section, paste the copied code in to the Head section. Publish your website and test to see the results. If you use Preview, you may not see the Cookie Consent bar.
The EverWeb Codebox Touch Cookie Bar lets you customize many features of the Cookie Consent Bar to match your website’s design.
Using The EverWeb Codebox Widget
The EverWebCodeBox from EverWeb super user Roddy, includes a Touch Cookie Bar Widget that is available for purchase as part of the Touch Widgets collection. Once purchased and installed, drag and drop the Touch Cookie Bar Widget on to your web page. It is best to do this on the home page on your website as this is typically the first page visitors will access on your website. you can add the Widget to all of your website pages, but this may be irritating for your visitors!
Once the Widget has been placed on your page, go to the Metrics Inspector and tick ‘Full Width’ and ‘Always On Top’. The remaining settings for the Widget can be found in the Widget Settings tab. The Cookie Bar is placed at the top of the browser window by default but can be placed at the bottom of the screen by ticking the ‘Fix To Bottom’ checkbox.
Further information about the EU Cookie Consent Directive can be found in the European Commission’s ‘EU Internet Handbook‘.
Welcome to the Summer Edition of EverWeb Highlights which rounds up all the news, features, articles, tips and tricks about EverWeb from the last few months.
The EverWeb April 2016 Survey
A big thank you to everyone who completed the April Survey on the EverWeb Discussion Forum. We really appreciate all your feedback and suggestions on what you would like to see in future releases of EverWeb. We’re working hard on including some highly requested feature suggestions in to the next major release of EverWeb so stay tuned to the Announcements section of the Discussion Forum for the latest news!
EverWeb versions 1.9.5 & 1.9.6 Released
Since our EverWeb Highlights: Winter Edition, there have been two updates to EverWeb: Version 1.9.5 featured optimisations for speed, memory efficiency and stability. The Video Widget also received an big update with many requested customization options added such as volume settings, autoplay and video poster images. For more information on the feature list of 1.9.5 please see ‘Introducing EverWeb version 1.9.5’.
April 2016 introduced EverWeb version 1.9.6. featuring performance and stability improvements. The full release notes can be found in ‘Introducing EverWeb Version 1.9.6’
The release notes also detail how you can update your product to the latest version if you haven’t done so already.
There are a number of new Blogs articles to read up on, including:
We’ve added 12 great new videos to our YouTube Channel, highlighting EverWeb product features, hints and tips and many ‘How to Do’s’. Our YouTube Channel has plenty of new and updated videos and is updated regularly and it’s easy to sign up to. Some of the titles we’ve recently added include
Adding and Embedding a Video
The Projects Window
The Audio Widget
Adding a Facebook Like to Your EverWeb Website
How to add Jump and Smooth Scroll Anchor Links to Your Website
Adding Retina Images to Your EverWeb Website
Resizing Header on Scroll – Full Width Resize Header Widget for EverWeb
Using Google Fonts in EverWeb
How to Transfer an EverWeb Project File to Another Computer
Introduction to EverWeb – A Quick Start Guide
Sticky Header in EverWeb – Making a Fixed Position Header
EverWeb on Social Media
We all have a favorite Social Media platform for staying connected! As well as the EverWeb website and Discussion Forum, you can find all the latest EverWeb news and info on the following social media…
EverWeb’s popup window hyperlink feature is an extremely useful and versatile website design tool. It’s great for keeping visitors focused as the browser background is greyed out when the popup window is in use. That’s useful when you want your visitor to concentrate on filling out a Contact Form or anything else that may require a ‘call to action’. Popup windows are also good to use for additional information that’s useful, but not essential, to the main message, or theme, of your page e.g. clicking on an image of a person shows a popup biography, clicking an address link shows a map etc. There are almost unlimited ways to use a popup window. In the example below we show how you can use to use a popup window for downloading a PDF file. A fictional company, ‘iPicture’, wants to offer it’s customers a free download of their photography e-book ‘Point, Shoot, Share’. Their website uses EverWeb’s built in ‘Software’ Theme Template.
1. Firstly, a PDF file should be made ready. A PDF file is a good choice for downloads as it’s file format is operating system independent. That makes PDF’s easy to access almost anywhere. Many apps, such as Microsoft Word and Apple Pages, can convert their own native document formats to PDF file format.
2. Once you have created your PDF file, convert it into a ZIP file. A ZIP file will compress the file making it quicker to download for your visitor. Locate the PDF file in OS X’s Finder, then right click on it. Select the option to ‘Compress’ the file. This will produce a new file with the same name as the original but with a ZIP extension added at the end. You may edit the name of the new file to remove the ‘PDF’ extension. Remember to keep the ‘ZIP’ extension though.
2. With the ZIP file ready, open your EverWeb Project file. If you haven’t done so already, create the page that will contain the hyperlink to the popup widow. The hyperlink can be a piece of text, an image or a button. Often a button is best as it acts as a ‘Call To Action’, i.e. something that is clearly visible and gets your visitor to respond, to take action!
3. If you want to use a button, you can easily create on by drag and dropping a rectangle shape on to the Editor Window. Next, style the rectangle as you want. Double click inside the rectangle to add the button text, in the same way you do for a text box. Use the Fonts Panel to style and size the text. To center the button text, highlight the text itself. Use the horizontal and vertical alignment buttons in the Text Inspector to center the text. If the button does not align properly, make sure sure that ‘After Paragraph’ is set to zero.
4. After creating your download link button, you need to create the popup window. This is just another page that is suitability sized and styled. Start by adding a new page. In our example, we used the blank page style of the ‘Software’ Theme Template. Name the page appropriately to indicate it’s function e.g. ‘Popup PDF Download’.
5. As this is a popup window, it will only part of the page. In this example we will make it 400 x 400 px. To achieve this effect, go to the Page Inspector tab and use the following settings:
Top Margin: 0
Header Height: 0
Content Width: 400
Content Height.: 350
Note that the Content Height and Footer combined equal 400.
6. With the popup window’s page dimensions set, design the popup window page as desired. Add a button, in the same way as we did above, that will be used to initiate the PDF File download.
7. With the button selected, go to the Hyperlinks Inspector and ‘Enable as Hyperlink’. In the ‘Link To’ drop down box, select ‘A File’. You will see a ‘Choose…’ button appear below the ‘Behavior’ drop down section. Click on the ‘Choose…’ button and select the ZIP file you created earlier.
8. You have now completed your popup window page. Return to the original page containing the link button to the popup window page so that you can add the link in.
The E-Book Download button’s settings in the Hyperlinks Inspector
9. Click on the link button to select it then go to the Hyperlinks Inspector. This time, leave the ‘Link To’ drop down as ‘One of My Pages’. In the ‘Behavior’ drop down box, set it to ‘Open in Popup Window’.
10. When you change the ‘Behavior’ to ‘Open in Popup Window’ options to change the height and width of the popup window will appear. Set both values to 400. See the above screen shot.
11. Finally set the ‘Page:’ drop down box to your popup window page.
The Popup Window with the page that links to the popup window greyed out in the background.
You’re finished! When publishing your website, don’t forget to test that the file downloads and unzips properly to your computer. In our example, when the visitor clicks on the ‘E-Book Download’ button on the Home page, the popup window in the screenshot above will display. The Home page background can see seen ‘greyed out’, focusing the visitor on how to download the e-book.
If you have a question about Popup Windows in EverWeb, please let us know in the Comments Section below. We’re happy to help!
EverWeb’s Heading Tags Widget makes it easy to insert HTML Heading Tags into a web page without having to code. In this blog we explain what Heading Tags are, how to use them with the widget and why Heading Tags are good for your website’s SEO.
Headings, HTML and Heading Tags
Text is often organised in such a way to make it easy to read and understand. Written articles often include a title with the text broken down by headings, sub-headings , sub sub-headings and so on. The title has the most importance followed by the article’s headings which are of secondary importance, followed in third by sub-headings and so on. This hierarchy can continue further if needed, although having more than three or four levels can leave readers a bit lost..
When developing web pages in EverWeb, you probably use the same approach. Your web pages may have some form of title and the page text organised either formally, or informally to give your content a logical, readable, flow. When you ‘Publish’ your website the web pages are converted in to HTML (HyperText Markup Language) code and uploaded to the host server.
EverWeb generates code that is structured to HTML standards. In HTML, Heading Tags act as a language element used explicitly to add structure to the generated code. If you take this blog as an example, it has a title at the top of the page and headings to break the text content down in to smaller, more manageable parts. If we want, we can explicitly make the page titles and headings in to specific HTML Headings using the Heading Tags Widget.
HTML has six levels of Heading, the most important heading is ‘h1’ with the least important heading referred to as ‘h6’. For example, an ‘h1’ tag would be used for the title of this blog as it’s the most important piece of text on the page. The blog’s headings would have an ‘h2’ tag. Any subheadings would use an ‘h3’ tag and so on… This blog’s tags would therefore be:
h1= EverWeb’s Heading Tags Widget
h2= Headings, HTML and Heading Tags
h2= Heading Tags and SEO
h2= The Heading Tags Widget
h2= Heading Tags Widget Tips
Heading Tags and SEO
Heading Tags should be used in EverWeb as it’s good for your SEO. Search engines can target Heading Tags that have been placed in a web page. Without Heading Tags, search engines treat the headings in your web page just as regular text and so will not be able to distinguish what is important to highlight, in SEO terms, on the page. This in turn may have an effect on your web page rankings.
The title ‘Global Business’ has been converted in to an H1 Heading Tag with the fonts and colours matched properly using the Fonts Panel. The heading below the title could be converted to an H2 tag and the ‘Tools & Technology’ title in to an H3 tag if desired.
The Heading Tags Widget
It doesn’t matter if you have already created web pages or not, you can still use the Heading Tags Widget. On an existing web page, start by taking the most important piece of text and converting it into a Heading Tag. This will probably be the page title. To convert the heading to a Heading Tag:
If you have a page title already on the page, copy it to the clipboard. If it is a new page, you can manually enter the title in to the Heading Tags Widget later on.
Next, drag and drop the Heading Tags Widget on to the page.
Paste the text from the clipboard in to the ‘Heading Text’ box in the Widget Settings Inspector or enter the text that you want to use for the title in the box.
Select the Heading Level you want to use for the text, in this example it will be h1 as the title is the most important heading on the page.
The heading tag can be aligned to the left, centered or to the right using the ‘Text Alignment’ drop down box.
You can apply a bold styling to the tag by ticking the ‘Use Header Bold Styling’ box.
With the Heading Tag created you can now match it’s style with the rest of the page using the Fonts Panel.
When you have finished styling the Heading Tag, place it where you want on the page, or replace the original text with the newly created Heading Tag.
Heading Tags Widget Tips
Don’t overuse Heading Tags in your web pages. Search engines can detect the overuse of tags, called ‘stuffing’, and will demote your web page rather than improve it’s ranking.
Use just one h1 tag per page. You can use more than one h2-h6 tags on the page as you need. Again, use wisely and sparingly.
Including multiple tags at the same tag level on a page is perfectly acceptable with the possible exception of the h1 tag.
Save Heading Tags for important pages only. Inserting Heading Tags on pages such as Contact and About pages will not be of benefit.
As always, don’t sacrifice your web page content for the possibility of a higher search engine page ranking. It is always better to have a better visitor experience than better SEO.
Heading Tags are useful and easy to implement, and are another tool in your SEO arsenal!
If you have any questions, please let us know! We’re happy to help!
One of the most important aspects of website development is Search Engine Optimisation (SEO.) It’s an essential element to incorporate in your web pages as it may affect your website ranking in search engine results pages (SERPs.) When creating your website in EverWeb you should add ‘Keywords’ to your web pages so they are optimized for search engine spiders. If you have not added Keywords to your website, or have not thought about SEO yet, take a look at the ‘SEO for EverWeb Video Course‘ which explains all you need to know about SEO and how to implement it in EverWeb.
The SEO for EverWeb Video Course is the perfect start to learning about how to apply SEO in EverWeb.
SEO itself is not a static concept, it’s dynamic and constantly changing as our patterns of Internet usage change and technology develops. In this Blog we’re feature some recent SEO articles below to help you stay up to date with SEO to keep your website tuned to keep it’s SERP ranking optimized.
Don’t Avoid Linking To External Websites
Do you include links to external websites in your own website? There’s a tendency to exclude external links from websites as developers and website owners believe that such links take visitors away from their own site. Google’s Gary Illyes has a different view on external links:
“The internet is built upon links, links are essential for the internet.”
What happens if the focus of your website changes over time?
When developing your website you should include SEO as part of the development process. However, do you review your website’s SEO when you update or change it’s content? And what happens if you decide to change the focus of your website at a later date? Will this change your ranking? Find out more in ‘How Google Handles a Site When It Changes Topic Focus‘
Google Launches Mobile Friendly Update Algorithm
Google’s ‘Mobile First’ strategy for SEO gained a boost in May when it completed the launch of it’s mobile friendly ranking algorithm. It’s a good reminder that mobile’s importance is growing fast and that all websites should have a mobile version, with SEO included!
We recently released a popular video tutorial that demonstrates how to create a full width header that can resize as the user scrolls down the page. This can make your website have a more modern feel to it, as this type of header is becoming more widely used on professionally built websites.
This effect not only will make your site look and feel more modern, but it also adds a bit of convenience to your website visitors. Rather than having to scroll all the way back up to the top of the page, visitors will be able to access your website’s navigation menu at all times, making it much easier to navigate from page to page.
Check out the video below and see how you can add this feature to your website. The widget can be found at EverWebCodeBox.
With the help of a very powerful widget, you can add a sticky header that resizes when you scroll down the page of your EverWeb site. Here is an example of a basic sticky header that I will show you how to create in EverWeb.
The widget that we will be using to create this header was developed by a third-party EverWeb widget developer named Roddy. The widget is available for purchase at a modest price on Roddy’s website everwebcodebox.com
You can locate it by clicking on the Widgets 3 link, followed by hovering over Responsive and selecting resize header. Scrolling down this page will show you another example of this widget in use.
In this tutorial I am going to show you how I created this header using the widget. This widget is powerful and comprehensive, so I will be skipping over some of the controls that I don’t need to use or ones that I accept the default values for. I am making sure that I cover the most important aspects of the widget, and provide you with enough information to be able to move forward with creating your own header.
I also want to point out that Roddy actively updates his widgets, so if you see a control in your widget that you do not see here, it is because the widget has been updated after the release of this video.
The header that we will be creating has 4 main parts to it. There is the background, the logo, the text, and the navigation menu.
So starting with a blank page for the purpose of this demonstration, I will drag and drop the widget onto the page. This is what appears by default.
The very first thing I will do is make the header full width. I do this by clicking on the Metrics tab, and then enabling the Full Width option.
I will now click on the Widget Settings tab.
The first thing I will do to the widget settings is change the background color of the header. This is done by clicking on the color control next to where it says Background. You will also notice that there is a Background B. This is because by default, the background will be a Gradient. Since I want a solid color, I will also make Background B the same color as the one I chose before.
Next I am going to add the image. I have already added the image to the assets list, so I just need to click on Choose and then select it.
My logo appears much smaller than I want, so I will adjust the value next to width, until my desired width for my logo is displayed.
I also want the logo to be closer to the top of the header, so I will adjust the value next to Top.
The logo is also a bit further to the left than I want it to be so I will adjust the value next to Left.
I will also adjust the Resize Width so that the logo is my desired size once it has been resized.
I will also adjust the Resize Top value so that the logo is a bit further from the top.
The next thing I will do is replace the heading with my own.
I will also type in my desired Font Family. Since this is a Google Font, I will check the option for Google Font.
You will also notice that the text is overlapping with the logo, so I am going to adjust the value next to Left to move it a bit to the right.
I will also modify the resize left value.
The next thing we will do is add the navigation menu. This is done by adding the navigation menu widget by dragging and dropping it onto the header.
Next, I will click on the Metrics tab and enable the Full Width option. Back on the Widget Settings for the navigation menu, I am going to change the alignment from Left, to Right, since my navigation is on the right side of my header. I will also position the navigation menu somewhere around the middle of the header.
I will also click on the Fonts button to open up the fonts window to select my font.
The rest of the modifications that I make to the navigation menu will be done using the controls on the Full Width Resize Widget, so I will click back to that widget, and then select the Widget Settings tab in the Inspector, and then scroll down to the navigation menu section.
I am going to increase the value next to Resize Top so my navigation menu is bit further away from the top.
I will now adjust the link color, as well as the hover color. You will notice that some of the changes made to the navigation menu will not appear in EverWeb. This is normal. Your navigation menu will appear much different when your site is previewed or published.
I also do not want there to be a background for my navigation menu so I will select Transparent background.
I will modify the font size since I want it to be a bit larger.
I am going to decrease the minimum width for the links in the navigation menu because I want this spacing between links to be a bit smaller.
My navigation menu does not contain a drop down menu so I will skip over the drop down menu style controls.
The last thing I will do is check the boxes to fix the header and navigation and activate the resize on scroll.
We have now just re-created this header.
Just a quick reminder about all of the values that I just set. These values correspond to my logo and the way I want it to appear. Your values will all differ based on the logo and based on how you want your header to look. The way you will determine most of the values that you input will be through trial and error, which is how I determined the values for this header. For most of values that we adjusted, you will be able to see the result of changing the values right away. But for the values that have Resize next to them, you will need to preview the page in order to see the change.
And even though I skipped over some of the controls, you might still find them useful for you, so feel free to play around with them when creating your header.
EverWeb allows you to create anchor links – links that can send visitors on your site from one section on your page to another. Anchor links allow to you guide the visitor to certain sections on the page, making it easier for them to navigate your content. For example, let’s say that your home page has some important content, but that content is located near the bottom of the page. Rather than just hoping the visitor will scroll down to the bottom, you can guide them right to that particular section by using an anchor link.
There are 2 styles of anchor links that you will be able to use on your site. One style is a basic ‘jump’ that will just send the user directly down the page. The other style is a ‘smooth scroll’ which will gently scroll the visitor down the page.
In this video tutorial, I am going to show you how you can create anchor links so that you can link from one section of your page to another.
I am going to show you three different ways of accomplishing this, and I encourage you to watch all 3 methods before determining which one will best suit your needs.
The first method will be a simple method which will just jump the user from one part of the page to another.
The second method adds a couple more steps, but will allow you to have a smoother scroll to the other section of your page.
The third method is the easiest, allowing you to setup smooth scroll anchor links, but will require the purchase of a third-party widget. I will provide more information on this later in this tutorial.
So for the first method, I have this page here and I want to setup an anchor that will let the user jump from up here near the top of the page, to a section closer to the bottom.
The first thing I am going to do is create my link that will allow the user to click to go to the bottom of the page. I am just going to create some basic text, and then hyperlink the word or words that I want the user to click on.
I’m now going to enable this as a Hyperlink by clicking on the Hyperlinks tab in the Inspector window, and checking the box to enable as hyperlink. I will choose to link to an external page. In the URL field, I will type in the pound sign, followed by any text that I want to refer to this as, so in this case I am just going to call it bottom
The next thing I will do is add an HTML snippet to the page. In the Widget Settings box, I am going to type in some simple HTML. The important thing to note here is that I am putting in the same word which is bottom, that I linked to in our previous step.
I also wrote bottom inside the tags, and that does appear on the page here. So what I will do is just find an object that this can hide behind nicely, and I will just hide it by going to Arrange, and then selecting Send to back.
When the site is previewed or published, you will see that I can jump to the bottom when I click on the link.
The next method will provide us with a smooth scrolling anchor. This is going to be done using some code, which you can obtain from everwebcodebox.com, hovering your mouse over the Links menu, and then clicking on Links & Anchors. You can now scroll down to the bottom of the page, or click on the Smooth Scroll link to get there smoothly.
We’re going to highlight the script that is here, and copy it.
Back in EverWeb, this script is going to be pasted into the Footer Code section. If you only plan on having the smooth scrolling anchors on one page of your site, you can actually just paste it into the footer code box for that particular page. But if you plan on having it on multiple pages, or you are not 100% sure yet, pasting the script into the site wide footer code section will be fine.
Next, I’ll head back to everwebcodebox and copy the code next to Hyperlink code.
I am going to add an HTML snippet and then paste this code. The anchor-name can be changed to whatever you want, as well as the text that will appear as the anchor link.
Place this on your page where you want the anchor link to be located.
Now I will head back to everwebcodebox again, and copy the code for the anchor.
Drag and drop another HTML snippet onto the page, and paste the code.
I’m going to replace anchor-name with the same name I gave to the anchor in the previous step, which was bottom.
Now place this where you want the user to end up when they click on the anchor link.
When the site is previewed or published, you will be able to see that you can scroll smoothly.
This next method, which is my preferred method, involves using two widgets that are available for purchase on everwebcodebox.com. If you prefer the smooth scroll over the jump, this method is by far the easiest to accomplish and provides the most flexibility for your text link.
These widgets can be purchased by going to everwebcodebox.com, clicking on the Widgets 1 link and then go to Layout and click on Anchors.
To use these widgets, first drag the A Link widget onto your page. In the Pre Text field, type in whatever you want to appear before the link. Then in the Link Text field, type in the text that you want to appear as the anchor link. Then type whatever you want to appear after the link in the Post Text field. You can also change the font, the size, the text color, the link color, and select if you want the link to be underlined.
Then you can give the hyperlink an ID. I’ll just use the same ID I have been using throughout this tutorial which is bottom, but you can of course use whatever you want.
Place this on your page where you want the anchor link to be located.
Then go back to the Widgets tab and drag and drop the Anchor widget.
In the anchor ID field, type in the anchor ID that we just entered in the previous step.
Now you can place this anchor wherever you want the smooth scroll link to the take the user.
When the site is previewed or published, you will be able to see that you can scroll smoothly.
And those are three different ways you can setup anchor links on your site in EverWeb.