Upload Your Own Logo
You can upload your own logo image in the Customizer under Appearance → Customize. Click the Site Identity tab where you will find the “Logo” image upload field.
Setting Up the Homepage
Swell comes with a versatile homepage template designed to highlight your important content. To set up a static homepage, first create a new page and name it something like “Home.” After creating the page, select the “Home” page template in the Page Attributes box found in the right column.
After you publish your page, go to Settings → Reading. For “Front page displays,” choose a static page, select your newly created “Home” page, then save your settings.
The content of the homepage template is broken into sections. Below is an explanation of how you can customize each section.
This area displays text and a full-screen video that you set under Appearance → Customize → Theme → Banner. You’ll also want to set a background image because the video does not display at all on mobile devices. The image is shown instead. This section is full screen, so the background image needs to be large. The recommended image size is: 1700px x 1100px. These are not exact image size requirements, so feel free to experiment with different dimensions.
You can also include a call-to-action button in the banner area by adding an HTML
a tag to the Secondary Banner Text field and giving it the button class. Creating buttons is explained in the “Buttons” section at the bottom of this page.
Your homepage’s static content is displayed here. To add or edit this, open up your “Home” page for editing, and add text, images, etc. to the content area.
Here you can show off your recent portfolio projects. You can change the heading of this section under Appearance → Customize → Theme → Portfolio. Creating portfolio projects is explained below.
Here you can display another video. Set the video for this section under Appearance → Customize → Theme → Secondary Video. This section will also display the manual excerpt of your “Home” page. Open up your “Home” page for editing. If you do not see the Excerpt field, click on the Screen Options tab in the upper right to make sure it is checked.
If there is no video set here, this section will display the featured image of your homepage as the background.
This section highlights your latest blog posts. You can change the heading of this section under Appearance → Customize → Theme → Blog.
Here is where your Testimonials will be displayed. You can set a background image for this section under Appearance → Customize → Theme → Testimonials. Creating testimonials is explained below.
Setting Up Your Portfolio
- Create a new page, give it a title, select the “Portfolio” page template, and then click Publish. This page will display all of your projects.
- Add a new project by selecting Add New under Portfolio in the left-hand menu.
- Use the main content editor on the Project edit page to insert text, images, or videos. Ideal image width is 1000px.
- Assign categories to your project using the Project Types box in the right hand column. The categories that you create will appear at the top of the Portfolio page as a filtering menu.
Repeat steps 2-4 for each project you want to show on your portfolio page. Your recent projects will be displayed on the homepage in the Recent Projects section.
Be sure that the page that is using the “Portfolio” page template is not set as the Posts page under Settings → Reading, or the portfolio will not display your portfolio projects.
If you name your portfolio page “Portfolio”, you will need to change the page slug to something different in order for the Portfolio page template to be used.
To create a new testimonial, go to Testimonials → Add New. Testimonials are composed of a Featured Image, title (the person’s name), and their quote, which is added to the content editor. Recent testimonials will be displayed on the homepage in the “Testimonials” section.
To add a Testimonials page, create a new page and give a title like “Testimonials”, for example. Then select the “Testimonials” page template, and click Publish. This page will display all of your testimonials.
Setting Up The Blog Page
Set up your blog page by creating a new page and giving it a name like “Blog,” “News,” or whatever you’d like. After publishing the page, go to Settings → Reading. Under Front page displays, set the Posts page to your newly created “Blog” page. Save your settings.
As explained above, there are two sections on the home page where you can display a background video. You simply need to copy a video URL from YouTube.com or Vimeo.com and then paste it into the Background Video field or the Secondary Background Video field.
If you are embedding a Youtube video, make sure to copy the url from the browser address bar, not the share link. The URL should look something like this: https://www.youtube.com/watch?v=LDIpC80oeLs
The page header on pages, posts, and single projects will display the title and the featured image as a background. Make sure you use a wide image for the featured image; the recommended width is 1800px. On pages and projects, the manual excerpt will be displayed. If the Excerpt box is not visible, make sure it’s checked under the Screen Options tab at the top right in your dashboard.
Footers and Widget Areas
Swell comes with two footers/widget areas:
- Footer Top – Appears below the content area on pages and posts. This widget area will not display on the homepage template.
- Footer Bottom – Appears at the bottom of every page and post.
Swell uses a menu bar at the top of the page for navigation, which at smaller screen sizes and on mobile devices converts to a mobile menu. This menu is triggered using the three-bar menu toggle in the top left of your site.
You may notice that if you put many menu items in the navigation bar, that it will start displaying as a mobile menu. Doing this allows you to place as many links as you want in the primary navigation without disrupting the layout of your homepage.
You can easily create social links by adding a couple of special classes to an HTML
a tag. Here’s an example of a Twitter link:
<a href="your-url-goes-here" class="fa fa-twitter"></a>
Create multiple links like this:
<a href="your-url-goes-here" class="fa fa-twitter"></a> <a href="your-url-goes-here" class="fa fa-dribbble"></a> <a href="your-url-goes-here" class="fa fa-instagram"></a>
An ideal place to add social links is in a text widget or in the Right Footer Area, which can be edited under Appearance → Customize → Footer.
Adding buttons to your content is easy. First, add a link. Then switch to the Text tab so you can edit the HTML. To turn your link into a button, simply add the button class like this:
<a class="button" href="your-url-goes-here">This is a Button</a>
You can even set the color of your button with some inline CSS like this:
<a class="button" style="background: #46adb1;">This is a Button</a>