Create a Dynamic Personal Website

Heffron this is Paul from bring web.com
and I’m back with another elementary
dynamic fields tutorial this time we’re
going to take a look at pots which is a
great plugin for creating custom post
types and custom fields during this
tutorial we’ll going to use pots to
extend the default wordpress post with
some new fields and then we will use
elementor’s theme builder to display
them into a single page template let me
show you what we’re going to create
during this tutorial this is a
healthcare website that displays the
list of doctors on the homepage by
clicking on one of the doctors we will
be taken to the doctors single page
where we have a lot of information about
the specific doctor at the top of the
page we have this cardboard show the
doctors imaged name and title we also
have two buttons one for the phone
number and one for emailing this doctor
on the right side of this card we have
the specialty and education of this
doctor as well as a Facebook page button
further down the page we have a three
column layout displaying more
information about this doctor on the
Left column we have a card with some
more contact information and under that
a list of related doctors this central
column shows the card with some about
information on this doctor and the
presentation video on the right column
we have two more cards the first one
being a sign up call to action while the
second one is a list of share buttons
everything you see on this page that is
related to the doctor is coming
dynamically from our custom fields that
we’ve created using pots that being said
let’s jump into the wordpress dashboard
and start building this okay so here we
are inside of the WordPress dashboard I
will never get over to posts all posts
and here you can see that we already
have a list of some doctors I will click
on edit from the first one and you can
see that right now we only have two
fields the title which is the doctor’s
name and the post content which is the
short description for our doctor and we
also have here a featured image for this
doctor so what we want to do now is go
over to pods and extend this post type
with some more fields that we will then
display in our template so I will hover
here over pods admin and click add new
and on the screen you can see we have
two options we have the option to create
a new post type or taxonomy or custom
settings page or we have the option to
and an existing one because we just want
to add some fields to the pre-made
wordpress post we will click on extend
existing and then on this page you can
see we want content type for post types
and for the post type we want post then
I will click on next step and we are now
on the add new fields screen so I’ll
click here on add field and we can go
ahead and create our first field so the
first field that we want to create is
the doctor’s name so here for the label
I will type doctor’s name then I will
press tab to go to the next input which
is name and this is the internal name
that WordPress uses for our custom field
you can see that once I pressed tab this
was automatically filled in by pots so
we don’t need to worry about that that’s
perfect how it is right now and also for
the fill type we can leave it to plain
text so I’ll click on save field and
then I can go ahead and click on add
field to add our second one this one is
going to be doctors jobs so I’ll write
here doctors job and once again I’ll
press tab to fill in the name leave it
on plain text and click on save field
the third field that we’re going to
create is going to be the doctors phone
number so I’ll click here on add field
and for the label I’ll write doctors
phone number fill in the name of
matically and here for the field type I
will change from plain text to fold like
this and then click on save field if you
look on the screen right now you will be
able to see how these fields will look
like on the front end now I want to add
a few more fields but just to speed
things up I will add them on phosphoryl
and then I’ll explain what I did
so now all of our fields are created you
can see we have a few more field tabs
here we have email that we use for the
doctor’s email we have website that we
use anywhere that we need a link for
which is Facebook doctors video URL and
the doctors website and we also have
this file image video field type which
we use for video overlay this one will
let us upload a picture for this custom
field so now that all of our fields are
created I can come here and click on
save pod and our pod was successfully
saved so I will navigate again to posts
all posts and I will click Edit on the
first one and now you can see if we
scroll down the page we’ll have this
more fields section where we have all of
our fields that we just created so now
we can start filling those in and I’ll
start with the doctor’s name I’ll just
copy it from here from the top and paste
it here then the doctors job which is a
chief medical officer
[Music]
and I’ll quickly do the other so we
don’t waste any time filling in
information
okay so we’ve filled in all the fields
and now I will click here on add file to
choose the video overlay we already have
some uploading images which is this one
and I’ll click on add file and now all
of our fields are done and filled in
with information so I can scroll back up
and click on update and then we can
navigate over to Elementor and start
creating our single template so I’ll
hover over Elementor and click on my
templates and you can see that here we
already have the header and the footer
created I will not go over how to create
those because on the channel there are
plenty of tutorials about creating
headers and footers so instead I will
just come here the top I click on add
new then here for the template type I
will select single and for the post type
I will select post I will also give this
template a name so it’s easier to find
like this and then I will click on
create template now Elementor already
opened for us the blocks library but we
don’t want to use any blocks so I will
click close here at the top and we are
now on our page so a few things before
we actually start creating the page is I
will go here in the hamburger icon and I
will click color picker and I’ve already
set up a few colors here that I need for
my design which is like this blue this
dark blue this gray color all you have
to do to select those you just click on
one of the colors that is here
input your color and then at the top
click apply so you will have them in the
color picker I’ve already done that so
I’m not gonna change them all so if I
return here and click on default phones
you can see that for the primary
headline we have monster rat and also
for the secondary headline so I’ve
already chosen some default phones for
this design now what I want to do is
come here at the bottom click on the
settings wheel and for the style of the
page I will choose a background type
classic and I will change the color to
ef ef ef
which is this light gray color and one
last thing I will click here on the
eyeball icon choose the settings and
make sure that my preview is for this
doctor dr. Alice and I will click apply
and preview okay so I’ll start by
creating a new section here I will click
on the plus sign and I will choose a
free column section then I’ll go to the
first column and I’ll make it 15% in
width and for the second one I will do
column I’m going to drag in the featured
image widget so I’ll return to the
widgets panel and I’ll drag in the
featured image I’ll make sure that the
image size is set to large and the
alignment is set to left then I’ll go
over to the style tab make the width of
the image 100 percent and then for the
border radius here at the bottom I will
do of 500 border ranges all around to
make it a circle next inside of the
second column I will add in a heading
widget so I’ll written the widgets panel
and now drag in a heading widget here
and for the title I will click here on
the dynamic link scroll all the way down
and choose pods field then I’ll click
again here in the input and for the key
I will choose the doctor’s name you can
see we have the doctor’s name coming
dynamically from our post
I will then move over to the style tab I
will change the color to our dark blue
color here and then for typography I
will make it 25 pixels a size a weight
of 500 and 0.82 letter spacing great now
under this I will add yet another
heading so I’ll drag it inside for the
title I’ll once again do dynamic and
choose pods field but this time for the
key outs like the doctors job I will
then go over to the style tab and for
the text color I will do this gray color
here then for typography I will make it
a weight of 409 aligned height then I
will move over to the advanced tab I’ll
link the margin values and I will do
minus 10 pixels margin to the top and 35
pixels margin to the bottom perfect
now under this I will add in an inner
section so I’ll return to the widgets
panel and I will drag in an inner
section under this I will go to the
first column of this inner section and I
will make it 70% in width
meaning that the second one is 30% and
then inside of it I will drag in a
bottom we can also close the previous
settings here at the bottom because we
don’t need them then for the text here I
will select dynamic I’ll scroll down to
the pods field and for the key I will
choose the doctors phone number I will
also expand here the Advanced Options
and in the before input I will write
phone and a column and a space that way
we provide context for our text inside
of the button and this phone text will
be rendered in front of any phone number
that we have in the post all right so I
will close this up I will make the
button justified and I will change this
size from small to medium then I’ll go
over to the style tab I’ll make sure
that the text color is set to white and
the background color is set to our green
color like so then I will select a solid
border of one pixel and for the color I
will do again our green color perfect
then I’ll click here on the box shadow
scroll down to see and for the color I
will choose this grey color here and I
will reduce the opacity to 30% if I come
here to the RGB a you can see the last
value here is the opacity so right now
is 0.5 which means is at 50% as you can
see from this slider as well so I’ll
just do 0.3
and now it’s reduced to 30% then I’ll
change here the horizontal – to the
vertical – – and the blur – 20 and I
will have a very nice subtle drop shadow
for our body then I will select the
column in which this button is placed I
go over to the advanced step and then
we’ll onok the margin and the padding
values and I will just make sure that
our margin right is set to 10 pixels
like so now instead of the second column
of this intersection I’ll drag in
another button widget so I’ll return the
widgets panel and I’ll drag in the
button here for the text I will write
here email now I’ll click here on the
dynamic link for our link input and I’ll
scroll all the way to the bottom where
we can see we have the pods URL field so
I’ll click on that and then for the key
I will choose the doctors email then
I’ll once again make it justified and
the size of medium I’ll go over to the
style tab and for the text color I will
choose our blue color and then for the
background color I’ll just come here and
reduce the opacity to zero to make it
transparent then I will toast this up
and I’ll select a solid border make it 1
pixel all around and for it I will
choose our blue color here but I will
reduce the opacity down to 45% so once
again we can use this value here right
this up and I will select the Box shadow
for the color I’ll do once again our
blue color but this time on only 25%
opacity and then I will do a horizontal
of to a vertical of 2 and the blur of 10
perfect now I’ll select this column here
and under advanced I’ll make sure the
margins and padding’s are set to zero
all around and then just do a 10 pixel
margin to the left
then I will select the intersection here
and I’ll make sure that the column gap
is set to no gap I will also go under
advanced and on Ling the padding values
to make sure it is zero all around now
inside of our third column I will drag
in another intersection so I’ll return
to the widgets panel and I’ll drag in an
intersection I’ll make the first column
inside 35% in width
meaning the second one is 65% and then
inside of that I will drag in ahead in
widget for the title I’ll write
specialty then I’ll go over to the style
tab for the text color I will choose
this dark grey color we have here and
for typography I will make it 12 pixels
in size a weight of 700 I will transform
it to uppercase and they will do 0.9
letter spacing like this I will then go
over to the Advanced tab I’ll link the
margin values and do a margin bottom of
-5 pixels then I will come here right
click on the handle and click duplicate
to make a copy of this then all I will
do is just change the title from
specialty to education perfect then in
the second column I will drag in another
heading widget so I’ll turn to the
widgets panel and I will drag it inside
this time for the title we’ll click on
the dynamic link and choose sports
fields here at the bottom and for the
key I will choose specialty
I will then go over to the style tab
I’ll choose a light gray color which is
this one here and for typography I will
do 12 pixels in size a weight of 409 lat
your spacing then I’ll once again go
over to the Advanced tab and I will own
in the margin values and outlook -5
margin to the bottom great now I’ll come
here I’ll right-click on the handle do
dublicate and this time come here to the
pottsfield
and change the key from specialty to
education there we go now I’ll select
the intersection and I’ll make sure that
the column gap is setting no gap and the
contact position is at the middle under
this I will drag in a divider so I will
return to the widgets panel and I will
search for divider and I will just drag
it inside just like this then I will
change the color of these two our first
blue color here and then I’ll decrease
the opacity to 40% perfect then I’ll
make the width
tab and they were learning the mark
values and I will do 20 margin to the
top and -10 margin to the bottle then
under this I will add in an icon widget
I’ll change the icon to the Facebook
square icon
if you can stay on default and here for
the link I will click on the dynamic tag
scroll all the way to the bottom and
choose sports URL field and then for the
key I will choose Facebook then I’ll
align it to the left go over to the
style tab change the size to 20 to make
it smaller and then for the primary
color I will make it our blue color
perfect now we just did to add some
margin and padding around so I’ll select
the first column here go over to the
Advanced tab and I will awning the
padding values and I will do 35 padding
to the top and to the bottom 10 padding
to the right and 30 padding to the left
like this then for the second column
I’ll come here to the Advanced tab once
again and then do 30 all around then I
will unlink the values and change the
right one to 90 great and of course our
third column here where we will have
just 30 all around like this then I
would select the section and now it’s
time to style this little bit so I’ll
change the content width to 11 40 pixels
then I will change the columns gap to no
gap and the content position to middle
I’ll now go under the style tab and for
the background type I’ll do classic and
I’ll make the color white like this I
will then click here on border and I’ll
make the border radius 3 pixels all
around to round up the corners a little
bit and now we will add a box shadow so
I’ll click here in the box shadow for
the color I will do black with 15
percent opacity and we will have a
horizontal of to a vertical of 2 and the
blur of 5 then under hover here I will
change the settings to a horizontal of
to a vertical of 6 and the blur of 10
also make sure that the color is the
same black with 50% opacity and that the
transition duration is set to
point three now we have this nice drop
shadow for our section and when we hover
over it we have this depth effect all
right so we can continue with our second
section so I’ll click the plus sign here
and I’ll choose a one column section
then inside of here I will add in a new
heading so I’ll go over to the widgets
panel and out dragging a heading inside
for the title I’ll write more
information then I’ll navigate to the
style tab and for the text color I will
do our dark blue color and under
typography I will make it 15 pixels in
size a weight of 500 I’ll transform it
to uppercase and then I’ll give it zero
point eight letter spacing then I’ll go
over to the Advanced tab I will awning
the margin values and that will give it
– 7 March into the bottle now I will
select once again the section I’ll
change the content position from default
to middle and then I will go under
advanced I will olling the margin values
once again and I will do 50 margin to
the top and 20 margin to the bottom and
now our second section is done so we can
continue on with our third and final
section so I will click once again a
plus sign and I will choose a three
column section then I will select the
first column and I will choose a column
width of 30% then for the second one I
will do 45% meaning that the third one
is 25% with now inside of the first
column I want to drag in an inner
section so I’ll go back to the widgets
panel and I will drag it inside for this
intersection we only want one column
inside of it so I’ll right click on the
second one and click delete then inside
of here I will drag in a new heading and
for the title I will write contact
then I’ll go over to the style tab and I
will make it our dark blue color and for
typography I will make it 20 pixels in
size a weight of 500 I’ll transform it
to uppercase and that will give it zero
point eight letter spacing then I’ll go
over to the Advanced tab I will own in
the margin values and I will give it 40
pixels marching to the bottom so we have
a bit more space between the elements
then under this I will drag in an icon
box widget so I’ll go over to the
widgets panel and I will search for it
the first thing that I want to do is get
rid of the description because we won’t
need that
so I’ll just delete it now I will change
the icon from star to WordPress this one
I’ll change the view from default to
stack and the shape can stay on circle
then for the title I’ll write website
and here for the link I will click on
the dynamic link button I’ll scroll all
the way to the bottom of the list and
choose pods URL field and for the key
here I will choose doctors website so
this will now link to the doctors
website I will also align this to the
left like this and then I’ll go over to
the style tab for the primary color I
will choose our blue color the lighter
one then I’ll give it a spacing of 10
and the size of 11 to make it much
smaller
I will then expand the content here I’ll
do the vertical alignment of the middle
and align left then for the title I will
do here 3 spacing our dark blue color
and under typography I will make it 14
pixels in size with a weight of 300 and
over to the Advanced tab owning the
module values and I will do minus 10
pixel margin to the bottom now we need
three more copies of this item box so
I’ll come here to the handle
click and choose duplicate and I will do
that three times so we have four in top
then I will select the second one and
for the icon and will change it to sand
which is this paper plane icon for the
title here I will choose dynamic this
time scroll all the way down and choose
pods field and for the key I will do
doctors address then I will also a link
this link to value here because we don’t
want these two link anywhere
perfect now on to the third one here I
will change the icon to envelope Oh
which is this one the O stands for
outline then for the title once again we
will choose a pods field and this time
is going to be the doctors email and for
the link here I will do once again the
doctors email so this shows the doctor
emails but also links to the doctors
email great and now the final one I will
select it for the icon I will do phone
for the title once again a pods field
and the key will be a doctor’s phone
number and we want no link just like so
now it’s time to style the intersection
but as you can see these are outside of
the intersection so I’ll just quickly
drag them inside then I will select the
intersection I’ll change the content
position to middle then I’ll go over to
the style tab for the background color I
will choose classic and I will choose
white then I’ll go over to the border
and for the border radius I will do
three pixels all around to round up the
corners a little bit then I’ll click
here on the Box shadow and on the color
and right now you can see we have zero
zero zero zero point five that’s black
on 50% opacity and we want to change it
to 15 percent opacity so adjust here
I’ll just write 15 0.15 and now our
black is on 15
percent opacity then I will do a
horizontal of two vertical of two and a
blur of eight to have this nice soft
shadow now I’ll go over to the hover
here Rick once again on box shadow make
sure that is the same color black on 15%
opacity and I will do a horizontal of to
a vertical of six and a blur of ten so
now when we hover we have this nice
effect with the shadow also make sure
that the transition duration is set to
zero point three seconds now I’ll
navigate over to the Advanced tab and I
will awning the margin and the pegging
values for the margin we want to have 40
pixels to the bottom to make a bit of
space before the next element and for
the padding we will have 40 pixels to
the top and to the bottom and 35 pixels
to the left and to the right just like
so great now under this we want to add a
divider so I will just duplicate this
one here I will right click and
duplicate and I will just drag it in
under our intersection just like so now
I will change the width to 100% to span
all the column width I will also change
the gap from 15 to 5 and under the
Advanced tab I will do zero margin to
the top and to the bottom is going to be
heading under this divider so I’ll go
back to the widgets panel and I will
drag a heading inside and for the title
I will write related doctors
I’ll go over to the style tab I’ll
choose our dark blue color now for
typography
I will do 15 pixels in size a weight of
and I will give it zero point eight
letter spacing under this heading we
don’t want to drag in a posts widget so
I’ll return to the widgets panel and I
will search for posts and I will just
drag it under you can see that this
already displays some information but we
want just to style it a little bit so
the first thing that I want to do is
change the columns from three to one and
the post per page from six to two then I
will change the image position from top
to left the image size can stay on
medium the image ratio should be one and
the image with 25% great now here we do
want to show the title and the excerpt
we do not want to show animated data so
I’ll get rid of the data and the
comments and for the read more button we
want it to be on but we want to change
the read more text from read more to
view profile like this then I’ll go over
to the query and make sure the source is
set to post here for other categories
and times we don’t have to worry about
anything the ordered by should be by
date descending if you want to show the
latest doctors and here it is very
important for the exclude to exclude the
current post because we do not want to
show the same doctrine that we already
on and also take on avoid duplicate so
you don’t have any duplicate doctors
order pagination we want none so we will
just leave pagination none I’ll then go
over to the style tab I will align this
to the left and I will change the rows
gap to 25 to bring them a little bit
closer together then under image here I
will do 100 pixels border radius all
around that means that the image is
going to be round and now we will use
CSS filters to achieve a really nice
effect so I’ll just be here
or CSS filters and for the saturation
slider I will drag it all the way to the
left to zero now you can see that our
image is black and white and if I go to
the hover I just want to make sure that
saturation is set to 100 what that will
do is it will show a black and white
image but when we hover over it it will
bring back color into the image so it
have this really nice subtle effect then
I will click on content for the title or
under typography I will make it 13
pixels in size and a weight of 300 then
for the excerpt I will change it to 12
pixels in size and to a weight of 204
the read more button I will change the
color to our light blue color this one
here and on the typography I’ll make it
a weight of 400 great so now this is
done as well and we can move on to the
second column the first thing that we
want to drag inside here is a heading so
I’ll return to the widgets panel and
I’ll drag in a heading inside of the
second column for the title I will write
about now I’ll go over to the style tab
and for the text color I will do our
dark blue color and under typography I
will make it 20 pixels in size a weight
of 500 I’ll transform it to uppercase
and that will give it once again 0.8 the
letter spacing then I’ll go over to the
Advanced tab calling the margin values
and I will give it 40 pixels margin to
the bottom so you have a bit more space
between the elements then under this I
want to drag in the post content widget
so I’ll return to the widgets panel and
you can see we have here post content
and I will just drag it inside this
widget automatically brings back
information that is inside of our post
content for the text color I will change
it to this lighter gray color and under
typography I will just change the size
to 13 pixels and the line height to 1.7
so we have a bit more breathing room
between the lines
great now under this we want another
divider so I’ll just duplicate this one
and drag it in I will just change here
the gap to seven and under advanced I
will leave zero margin all around then I
will drag in a video widget under this
so I’ll search for video and I will drag
it in we can leave here the source to
YouTube but for the URL we’ll click on
the dynamic link here scroll all the way
down and choose pods URL filled and for
the key we will choose doctors video URL
and now you can see that the video was
updated with our dynamic link here we
can specify the start time and the end
time for the video so I can just do for
example forty-three seconds for the
start and 150 seconds to the end then I
will change here some settings so we do
not want this to autoplay but we want it
to be muted
we do not want loop we do want player
controls video info and modest branding
as well as suggested videos but I will
leave privacy mode to know then I’ll
click on the image overlay and I will
turn it on and here for the dynamic link
I will click scroll all the way down and
choose sports image field and for the
key here we have just one which is the
video overlay that we uploading in the
back end and you can see that now we
have this beautiful image as our overlay
for the video then well I see load can
stay to off in the size fool we want to
show the play icon and we do not want to
show a light box I will go over to the
style tab and just make sure that the
aspect ratio is set to 16 by 9
great so our second column is done as
well let’s just I like a little bit so I
will select the column and I’ll go over
to the style tab I will choose a
background type of classic and don’t
make the color white
then I will go over to the border and I
will do three pixels border-radius all
around to round the corners a little bit
then I’ll click on the box shadow and
once again we’ll have the same settings
so I’ll make it black 15 percent opacity
then give it a horizontal of two
vertical of two and a blur of eight and
under hover one scan black on 15 percent
opacity but this time a horizontal of to
a vertical of six and a blur of ten and
transition duration 0.3 seconds then
I’ll go over to the Advanced tab awning
the margin and the padding values and
for the margin I will give it 35 pixels
to the right to narrow it a little bit
and for the padding we will do 40 pixels
to the top and then 35 pixels on all the
other sides perfect so this is now that
as well
and we can now move on on to the third
column so the first thing that I want to
do is just add in another intersection
so I’ll go over to the widgets panel and
I will drag it inside we only need one
column so I’ll do the second one from
the inner section then I will drag in an
icon widget so I’ll search for it and I
will drag it inside I will change it
from the start to the comments icon then
under style I will choose a primary
color of our lighter blue color and then
I will decrease the opacity to 25% so
I’ll just drag in the slider a little
bit and then here I will type 25 like
this then under this I will drag in a
heading widget so I’ll back to the
widgets panel and I will drag it inside
I will right get started now and I will
align it to the center then I will go
over to the style tab and for the text
color I will choose our lighter gray
color
and under typography I’ll make it 20
pixels in size
I’ll give it away of 500 I’ll transform
it to uppercase and give it 0.8 letter
spacing now under this I will drag in
another heading widget like so then here
for the title I’ll just paste in some
lorem ipsum text in dummy text like this
maybe it’s a bit too much so out it in
the last part yes I’d like so I will
align it to the center then go over to
the style tab and for the text color I
will choose our light gray color and
then I will reduce the opacity to 70%
like this then under typography I’ll
change the size to 13 pixels I’ll give
it a weight of 300 and I will do 1.7
line height you’ll have a bit more
breathing room now under this we want to
drag in a button so I’ll return to the
widgets panel and I will search for the
button and drag it inside then for the
text I will right sign up I will align
it to the center and change the size to
medium then for the icon I will search
for a long arrow right which is this one
here and I will change the position of
the icon to be after the text and I will
give it 15 spacing like so then I’ll go
over to the style tab I’ll make sure
that the text color is white and for the
background color I will do our blue
color like this then I’ll select a box
shadow for the color here R which is our
light grey color and then crease the
opacity to be 30% like this
and we’ll then give it a horizontal of
to a vertical of two and the blur of 20
so now this is a very very subtle shadow
for the for this button great now under
this button we just want to drag in one
more heading so I’ll return to the
widgets panel and I’ll drag in a heading
under it for the title I’ll right sign
in then I will align it to the center
I’ll go over to the style tab and for
the text color I will do our light gray
color then under typography I’ll make it
I’ll give it a weight of 500 transfer me
to uppercase and then do 0.8 letter
spacing then I’ll go over to the
Advanced tab I will awning the marching
values and I will give it – 5 pixels top
margin to bring it a little bit closer
to our button now this is done as well
so we can just style the inner section
itself so I will click on it and I’ll
just change the content position to
middle then I will go over to the style
tab I will choose a background type of
classic and I’ll make it white like this
then I will click on the border and I
will choose a bold type of solid I will
make it 1 pixel in width and I will
change the color to our blue color then
for the border it is able to do 3 pixels
on the round to round up the corners
once again then for the box shadow once
again the same settings so it will be on
black on 15 percent opacity with a
horizontal of two of vertical of 2 and
the blur over 8 and under cover it will
be the same black on 15 percent opacity
with a horizontal of 2 vertical of 6 and
the blur of 10 and 0.3 seconds
transition duration now I will go over
to the Advanced tab here and for the
margin I will do 50 pixels to the bottom
so we have a bit more space between this
and the next element and under padding
we will do
forty pixels to the top L to the bottom
and 35 pixels to the right and to the
left right now energies we want to drag
in another inner section so I’ll just
return to the widgets panel and I’ll
drag in an inner section here once again
I will delete this second column because
we only need one and here I’ll drag in a
heading I will right share in the title
then I’ll go over to the style tab and
for the text color I will do our dark
blue color and under typography I’ll
make it 15 pixels in size I’ll give it a
weight of 500 transfer me to uppercase
and then 0.8 to letter spacing perfect
then under this we want to drag in this
share buttons widget so I’ll return to
the widgets panel and I will search for
share button and drag it inside as you
can see here on the left side we now
have four buttons Facebook Google+
Twitter and LinkedIn but we want to
change a few things here so the first
thing that we want to change is the
Google+ one you want to change to email
and also we want to add our fifth item
so on just click on add item and for the
network I will choose what’s up so now
have five buttons Facebook email Twitter
LinkedIn and what’s up now it’s time to
style this a little bit so here for the
view I will change from icon and text to
just the icon then the skin I will
change to flat the shape will be a
circle and the alignment will be
justified the great then I will go over
to the style tab and I will change the
column gap to zero
I’ll make the button size 1 then here
for the color I will change from
official color custom color and for the
secondary color I will choose our blue
color and for the primary color I will
just drag it to zero opacity so we only
show the icon not the background great
now I will go over to the Advanced tab I
will
the moral values and I will give it – 15
margin to the left perfect now this is
done we only have to stall the
intersection itself so I will select it
and I will change the content position
to middle then I’ll go over to the style
tab I will give it a classic background
type with a color of white and under the
border I will choose three pixels all
around for the border radius then I’ll
click on the box shadow and the same
settings as before
black on 15 percent opacity with a
horizontal of two vertical of two and
the blur of eight and on hover black on
two vertical of six and blur of 10 with
now I’ll just go over to the Advanced
tab I will all in the margin and padding
values for the margin I will make sure
that is zero to the top and to the
bottom and for the padding I will do
actually 20 pixels all around then I’ll
go over here to this text element and
delete a little bit of it because it’s
too much we don’t want that much text
okay I will now go to our first column
here I’ll go over to the Advanced tab
and I will unlink the margin and the
padding values then I will give it 35
pixels margin to the right to make it a
bit more narrow after that I will select
this column inside of this inner section
and I will go over to the Advanced tab
then I will earning the padding value so
it’s zero all around perfect now I will
go over to the third column click on
advanced and I will earning the margin
and the padding values to have zero all
around once again great now I will
select the section click on advanced and
I will online the margin value so we
have zero to the top and the bottom
perfect so now our template is done you
can see we have a lot of information
coming dynamically from our post
this beautiful video with an overlay
image to share buttons the card here at
the top with a phone number the email
specialty and education and everything
in between great so the last thing that
we have to do is to publish this so I
will click here on publish at the bottom
and this is the display condition screen
and because at the beginning when we
created the template we have selected
that we want to work with our post post
type you can see that here we have
include all posts all which is exactly
what we need so all we have to do is
just click on publish here okay so our
document is now live so we can return to
the dashboard I’ll click here on the
hamburger icon and click exit to
dashboard and I will go now to view our
website and we can now see the list of
Dockers on our front page so I will
click on the first one which is the one
that we’ve worked on and you can see the
beautiful template that we just created
but right now if I click for example on
another doctor light doctor Ellie gold
here to view his profile you can see
that we have the exact same design here
and also for example for doctor grace so
this was my elementary imports tutorial
about custom field I really hope you
enjoy it and that you learn something
new out of it if you have any questions
don’t hesitate to leave them in a
comment box below I’ll try my best to
answer them thanks for watching as you
all soon