"WordPress Theme Development" was retired on July 6, 2019.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a No-Code Web App with Softr!
You have completed Build a No-Code Web App with Softr!
Preview
Learn how to make the most of Softr's user-friendly interface to create a polished, functional web app. You’ll learn how to modify headers, footers, and various content blocks to create a tailored user experience.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Alright, it's time to start
customizing these pages to fit my needs.
0:00
I'll begin with the homepage, working from
top to bottom, starting with the header.
0:04
Selecting
it reveals options for both desktop
0:09
and mobile views.
0:12
In mobile view,
the header is currently at the bottom,
0:16
so I'll move it to the top.
0:18
This adjustment
0:22
provides a clean hamburger menu.
0:23
Let's check it out in the preview.
0:26
I'll click preview
0:28
and switch to the mobile view up top.
0:30
The links aren't showing here
0:35
and this is due to visibility settings,
so I'll address that next.
0:36
Moving down, we have our buttons.
0:40
There is an option to show an icon,
which we can enable
0:42
here.
0:45
Clicking
a button opens a menu where we can select
0:49
an icon, modify
the text, and adjust its action.
0:52
Once it's set to open a page, but
it's currently set to open the New Course
0:56
Form page, I'll change it to navigate
to the All Courses
1:00
page instead,
and I'll leave it to open in the same tab.
1:04
I'll also update the Sign In button
1:08
to open a modal rather than a new page.
1:10
The User menu determines
what appears in the drop-down
1:17
when a logged in user clicks their profile
image in the header.
1:20
On the right side of each button,
1:26
we can fine-tune visibility settings.
1:27
For now, I'm going to remove the user
group settings on the courses button
1:31
while I'm testing things out
and just leave it as all logged in
1:34
users.
1:38
The hero sections
1:41
look good for now,
so I'll keep moving down.
1:41
This members
block provides sorting options,
1:44
and customizable display fields.
1:47
For example, I'll change this sort
1:50
by field to name A
to Z to sort them by name alphabetically.
1:53
But these things aren't visible
in the workspace.
1:58
You would have to see them in the preview.
2:00
The content tab allows us to edit
all the visible data in this block. I'm
2:02
going to change this subtitle to something
more relevant see who's learning.
2:06
We can enable various
2:12
fields using the eyeball icon.
2:13
I don't have any images in my data,
but the placeholders work well.
2:17
Clicking a field makes it easy to map it
2:21
to a corresponding column in the dataset
2:24
Here I enabled a heading 3
2:27
and I setting the map to field to name
Since the name property
2:29
was already mapped in a different text
below, it's asking if I want to remap it.
2:33
So I'll click yes, remap it.
2:38
Now I'll go through the rest of the card,
adjusting the text,
2:41
mapping to fields, and enabling a divider.
2:44
I'm pretty happy with this.
2:49
Next, I'll add a footer
to the bottom of the app.
2:50
Adding a new block is simple.
2:53
Just click the plus sign icon,
2:55
which opens a list of block options,
and there are a lot of them.
2:57
Please take the time
to check all of this out.
3:01
You may find something in this list
that you didn't even realize you wanted in
3:03
your app.
3:07
I'll navigate to the Static tab
and search for a footer,
3:08
selecting one that fits my needs.
3:11
I think this footer with links
3:15
option is a good fit for me.
3:16
Here,
3:20
we can add a logo and configure
all these links to open different pages.
3:21
While I won't build all those pages
in this workshop,
3:25
I recommend setting it up for your app.
3:28
I'm going to adjust this copyright line
3:31
here with the name
that was generated for me.
3:32
There are also social media icons
3:36
that can be customized
and linked to your profiles.
3:38
Now let's preview the site.
3:41
This is how a non-logged in
user will see it.
3:46
We can change who we're impersonating
using the drop down menu.
3:49
I'll try a free member.
3:53
Now I can see the courses button, the
correct hero block, and the members block.
3:55
Looking good!
4:00
Next, I'll move to the all courses page.
4:02
This setup is similar to the members
block on the home page,
4:05
so I'll be speeding this up.
4:09
I'm basically
doing the same adjustments as before.
4:10
I'm changing the subtitle,
adding headings, and remapping fields
4:14
to get the layout that I want.
4:18
The Search By field
4:27
allows us to define which attributes
the user can search against.
4:28
I'll add the course topic here
so they can simply search for Python,
4:32
for example, and see Python courses.
4:36
The Actions tab lists
all button actions in the block,
4:42
the Add Courses button, which is visible
only to admins
4:45
Clicking it opens a variety
of customization options
4:51
including defining what happens
when a new record is submitted
4:54
We can even modify the success message but
I remove this button since I don need it
4:58
I have these edit buttons also.
5:06
I'll leave them for now.
5:07
The item on click setting determines
5:10
what happens when a user clicks
on a course card.
5:12
Currently,
it will open the corresponding courses
5:15
detail page in the same tab.
5:17
Each block
5:22
has an options menu in the top right
when selected.
5:22
From here we can delete, move, duplicate,
5:25
or hide a section.
5:28
You can even drop some notes here.
5:32
Clicking a block's
brief description opens a documentation
5:36
panel specific to that block type,
which is super convenient.
5:39
I'm not completely happy with this layout,
5:48
so I'll add a new block
and try a grid layout instead.
5:50
This looks much better.
5:54
I'll sync it with my data source
5:58
and start mapping the fields.
6:00
Occasionally, a robot
6:09
icon appears, which allows AI-generated
text suggestions.
6:10
The rest of this is
6:19
identical to before,
so I'm going to skip ahead.
6:20
Okay, here I encountered an issue.
6:24
When setting the item on click option
to open the details
6:27
page, no details page option appears.
6:30
This could be because I changed the name
and the URL
6:33
of the course detail page.
6:36
Since I haven't customized the details
6:40
page yet,
I'll let the system generate a new one.
6:41
If I had already styled the page,
6:44
I would have tried
restoring the original URL,
6:46
and if that failed, I would have
reached out to customer support.
6:49
Speaking of which, I had a great
experience with their support chat.
6:53
Very helpful and responsive.
6:57
So if you ever get stuck,
don't hesitate to use it.
6:59
It's this little chat bubble
icon at the bottom right of the page.
7:02
As for
7:08
adding, editing, and removing content,
that covers the basics.
7:08
You now know how to sync data
to a block and map its fields.
7:12
I'm going to skip ahead again
to avoid repetition.
7:15
Okay now I going to adjust this Add
New Course Form
7:20
Software makes working with forms
very simple and straightforward
7:23
First you want to tell it
where to send this data in my case
7:27
my courses sheet
7:31
Then you just need to click
7:35
on each form field
to adjust their properties.
7:37
So I'm going to map this title
field to the course name column.
7:40
Change this label to name,
and here's where you can add placeholder
7:44
text and set whether a field is required
for submission.
7:48
I'll do the same for the description
7:53
and remove the instructor,
duration, and creation date fields.
7:55
Now I'm
8:00
using this add field button
to add everything else I need.
8:01
You get a full list of form
field options here.
8:04
So I'll use a long text
for the content property.
8:07
Since I have specific options
8:21
for the topic, I'll use a drop-down
and add the options manually.
8:22
There is a Sync with Source
toggle up here,
8:27
but I had issues getting it to work,
likely because I'm using a Google Sheet
8:29
instead of a database,
so I would give that a try first.
8:33
You can click and drag these fields
8:48
to rearrange them on the page too.
8:49
I'll add another dropdown
8:54
for the access level.
8:55
Now for the On Form Submit,
9:03
you can adjust
what happens when your form is submitted.
9:05
You can show a message
and apply an action,
9:09
redirecting the user to a different page.
9:12
I'll send them back to the All Courses page and provide a friendly success message.
9:15
That should do it for this page.
9:24
Finally, I'll add a Redirect
to Sign Up page
9:27
below the login form.
9:30
The rest of these utility pages
are fine for me, but definitely go
9:40
through them in your app and see what
you can add or remove from them.
9:44
That wraps up this video.
9:48
In the next one, I'll start applying
custom styles to personalize this app.
9:49
See you there.
9:54
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up